IonSpotify
enappd loader

Ionic 4 Spotify app Starter -Ion Spot

Table of Contents

1. Introduction — What is this template

2. Features of this template

2.2 Features

3. Setup and Installation

4. Modifying code

5. Feature Explanation

6. Integrating Back-end Data

7.0 Troubleshooting

8.0 Third-party libraries, sources, and Credits

Ionic 4 Spotify app Starter -Ion Spot





Title
Subtitle
Kicker


Table of Contents


  1. Introduction — What is this template
  2. Features of this template

 2.1 Screens

 2.2 Features

 2.3 Device compatibility

3. Setup and Installation

3.1 Introduction

3.2 Installation

3.3 Running your app

3.4 Run your app with changes

3.5 Creating icon and splash

3.6 Generating Release builds

4. Modifying code

4.1 Screen code structure

4.2 Styling structure

4.3 Logic structure

4.4 Running your app

4.4 Navigation structure

5. Feature Explanation

5.1 User Authentication

5.1 Adding songs, playlists, artists, etc

5.3 Recommendations

5.4 Search

5.4 Music Player

5.5 Mini Music Player

5.6 Settings

5.7 Premium feature addition

6. Integrating Back-end Data

6.1 Data structure

6.2 Back-end options

7. Troubleshooting

8. Third-party libraries, sources, and Credits


Title
Subtitle
Kicker


1. Introduction — What is this template


IonSpotify— An Ionic 4 Music Streaming App Template is a mobile app theme/template. With this template, you can create a Music streaming app like Spotify, Gaana, Wynk music, jio music, etc.

This template is the front-end part of the music app, which means the screens and user interfaces (screens) are ready. You can easily change the screens, styles and logics to suit your requirements. To make it a live app like Spotify, Gaana, Wynk Music, Jio Music, etc. you just need to add a back-end to the app, and load your data in the back-end.



This template is made in IONIC 4 language. With IONIC 4, you can

  • Create iOS and an Android app with a single source code

 • Cut your project cost and time in half 

  • Ensure exact same UI in iOS and Android, while following the standard UI norms 
  • Saves separate updates for each app in future

Title
Subtitle
Kicker


2. Features of this template


2. 1. Screens

2.1.1 Landing




This page can be accessed after the app loads. This is the landing page. This page contains the signup page, continue with facebook and login page navigations.

Continue with Facebook can be used to perform for facebook login action. Currently, the Facebook login is only for demo purpose, you can integrate ionic facebook login authentication following our previous blog on Facebook login in Ionic 4 apps using Firebase.

2.1.2 Login



This page can be accessed after the app loads. By clicking on the login button it redirects you to the login page. 

The login page can be used to perform login action with username/email and password. Currently, the login is only for demo purposes.

The login page also contains “Forgot Password” page navigations.

2.1.3 Signup



This page can be accessed from the landing page. By clicking on the signup button it redirects you to the signup page.

The signup page can be used to register a user with a username/email and password. Currently, the signup is only for demo purposes.

The signup page also contains “Date of birth and Gender, select music of your taste, select artist of your taste and find favorite artist page” page navigations.

2.1.4 Select Music



This page can be accessed by successful input of username/email and password in the create account page. Here, you can select kinds of music according to your taste. After selecting kinds of music it will navigate to the music artist taste.

2.1.5 Select Artist



This page can be accessed by successful selection of kind of music in the select music taste page.

 Here, you can select many artists according to your taste. After selecting artists it will navigate the finding music page where your selected music and artist data will be loaded in the app but here it is only UI demonstration.

Here we have a find artist page too. You can access this page by clicking on the search bar. It will navigate to the search page.

2.1.6 Find Artist



This page can be accessed by clicking on the search bar at the top of the artist page. Here you can find an artist of your search by typing in the search input.
It will display you some results according to your input in the vertical list view.
This is only UI so it will result only some preset data.

2.1.7 Account Recovery



This page can be accessed from the “Login” page. Account Recovery page can be used to send a reset password URL or OTP to the user’s email or any other way you want to use. Currently, this page is only UI. The OTP sent to the user can be verified here and the user can be asked to provide a new password.

2.1.8 Home



This is the first tab of the application. 

Home page contains recommended music and other categories for a user. 

The songs/albums are arranged in a horizontal scroll for each category.

 A vertical scroll allows the addition of any number of categories on the homepage, each category being arranged in a horizontal scroll.

By clicking on any category, it will navigate to the category playlist page.

2.1.9 Home, by category songs list



This page can be accessed by clicking on any category on the home page.

Here the list of all songs is available according to the category you selected.In this page, we have three icons for each song functioning different things.

Here the heart icon is used to toggle songs to add or remove as like or dislike songs.

The remove icon is used to hide and show the song in the song’s list. And the menu icon on click opens a modal from where we can like or dislike, hide or show, add it to playlist, add to queue, view artist, share, Report explicit Content and show credentials.

2.1.10 Song list modal



This page can be accessed by clicking on the Songs List page’s options button. This page contains the actions for the currently playing playlist arranged in a vertical list. Any song can be clicked and these actions can be performed.

2.1.11 Home — Songs List — Might Like



This page can be accessed from the songs list page from the home page, besides the songs selected by the category, there are some options to select other categories of your choice and it will navigate to the might like page.

2.1.12 Add songs modal



On clicking the options button in the top-right of the header, the current action modal opens.

This page can be accessed from the Songs List and Might Like page’s playlist button. This page contains the songs of the actions to add songs, make Non- collaborative, rename, delete, find and short playlist actions. Except add songs all the left actions are only UI. Particular actions can be done by writing some codes for that. You can follow or ask to that for you.

2.1.13 Add songs page




This page can be accessed by clicking on the add songs in the add songs modal or from the Library-Playlists. We can add songs to our playlist by clicking on the add button in the rightmost of each song name.

2.1.14 Music Player



This page can be accessed from many places, by clicking on a particular song item or by clicking the Mini-player on the bottom of any page.

Music player page contains the currently playing playlist, with songs of the playlist arranged in an image slider on the top half of the page. At the bottom, there is a music control bar with play, pause, next etc. buttons.

On clicking the Playlist button in the top-right of the header, the current playlist opens.

2.1.15 Settings Page



The settings page can be accessed from the Home page’s top-right button.

This page contains the settings/options for the app like 

  • data saver
  • Playback Options
  •  Language
  • Edit Profile
  • Notifications 
  •  Devices
  • Car-View 
  • About
  • Privacy-Policy
  • Support 
  •  Social 
  • Other 
  • Logout

 Most of these settings options have toggle options and Language and notification navigate to other pages. 

2.1.16 Settings — Notification



The settings page can be accessed from the Setting page’s navigation option.

This page contains the navigation options/settings for Push notification and Email notification in the app like

  • Recommended Music
  • New Music
  • Playlist Update
  • Concert Notification
  • Artist Updates

To enable and disable mobile notifications, you will first need a Push notifications system in your back-end. If you are using Firebase — implementing, enabling and disabling push notification is very easy compared to a custom back-end. Read more about Firebase- Ionic push notificationhere.

2.1.17 Settings — Language



This page can be accessed from “Settings” page.

 The options available can be chosen to change the language of the app / music, as per your requirement. “Back” button takes you back to “Settings” page.

2.1.18 Search 



This is the second tab of the application.

Search page contains the UI for searching songs, albums, artists etc.

 Just type any word in the input box and the results can be displayed in the content as a list For demo purpose. When you type in the search box, you see preset results in the result.

2.1.19 Library-Playlist



This is the third tab, first sub-segment of the Music segment’s

Playlist page contains your playlists arranged in a vertical list. The create playlist button allows you to create a playlist and add songs to it. You can add as many playlists you want. You can also implement an infinite scroll feature to fetch more playlists on scroll.

2.1.20 Library — Music — Playlist — Create Playlist



You can create as many songs as you want by creating different play lists.

All the playlists will be arranged in a vertical manner in the Library-Playlist page.

2.1.21 Library — Music — Playlist — Artist



This is the third tabs, second sub-segment of the Music segment’s

Artist page contains your favorite Artist arranged in a vertical list. By clicking on any artist navigates you to its songs list. You can add as many artist you want. You can also implement an infinite scroll feature to fetch more songs on scroll.

2.1.22 Library — Podcast



This is the third tab, and the second segment.

Episode, Download, and shows are the first, second and third sub-segment of the podcast segment.

The browse podcast button will navigate to the Episode, Download and shows podcast category.

Podcast categories have been defined in the grid view in the vertical direction in the app. 

2.1.23 Podcast — categories



These categories contain all the digital audio file made available on the Internet for downloading to a computer or mobile device, typically available as a series, new installments of which can be received by subscribers automatically. You can integrate all the functionalities by applying back-end code to it. Above is only UI.

The categories have been defined accordingly in the list view and grid view in the app. By clicking a particular category will navigate to the podcast category page.

2.1.24 Podcast — categories — List view



This page can be accessed by clicking on any category of the podcast categories. This will navigate to the podcast category type, playlist page.

2.1.25 Podcast — categories — Grid view



This page can be accessed by clicking on any category of the podcast categories. This will navigate to the podcast category selected page.

2.1.26 Premium



This is the apps forth tab.

Providing premium features is where you can earn using your app.This is only a UI but you can integrate back-end code for premium services with the help of a back-end developer orcan reach to us for integration.


Title
Subtitle
Kicker


2.2 Features


2.2.1 Tabs




Tabs can be accessed after the successful login or signup process. Maximum of the pages in the app can be navigated from the tabs.

Tabs are placed at the bottom of every page.

2.2.2 Mini Music Player 



Mini Music Player is present in almost all screens on the bottom of the screen. It shows the currently playing song, and a play / pause button depending on whether the song is playing or paused. 

Clicking on Mini Music Player takes you to Music player page.

2.2.3 Nested Segment Navigation



The app contains nested navigation of segments and Tabs. The app contains a tab-bar which is the parent.

Your Library is the second level of segment nesting.

2.3 Device Compatibility

As mentioned earlier , the app is written in Ionic 4 and angular language. This allows a single source code to create both iOS and Android apps. 

This template has been tested in all latest Android versions and major devices. 

This template has also been tested in all latest versions of iPhones, including iPhone X.


Title
Subtitle
Kicker


3. Setup and Installation


IonSpotify is a music streaming application made withIonic 4 and angular .

For navigation in application, we have used default angular nevigation.

3.1 What is Ionic Framework

Ionic Framework is an open-source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies (HTML, CSS, and JavaScript).

Ionic Framework is focused on the frontend user experience, or UI interaction of an app (controls, interactions, gestures, animations). It’s easy to learn, and integrates nicely with other libraries or frameworks, such as Angular, or can be used standalone without a frontend framework using a simple script include.

3.2 How can I use this template

This template is a ready-made front-end template for a Music Streaming App. You can use the screens coded in this app, navigation between the screens and specific functions applied to buttons etc. This saves your 100% cost and time in front-end UI development. You can simply add a back-end / server to this app template, and replace the demo data with data coming from your server. This way, you only spend time and money on back-end development.

3.3 Installation

Setting Up Environment and Installing Dependencies

# Install the Ionic CLI

npm install -g ionic

# Start an App

ionic start myApp tabs/blank/sidemenu
whatever is your requirement you can select that and remove others from tabs/blank/sidemenu.

#Angular + Ionic Framework

npm install @ionic/angular@latest --save

# Node & npm

Almost all tooling for modern JavaScript projects is based in Node.js. The download page has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure best compatibility.

Node is bundled with npm, the package manager for JavaScript.

To verify the installation, open a new terminal window and run:

node --version
$ npm --version

# iOS Setup

To target iOS, some additional environment setup is required. Unfortunately, iOS apps can only be created on macOS.

For iOS setup please follow the steps provided in the link here

#Run the App

cd your app name
ionic serve

For iOS build, follow the steps provided in the link here

For android build, execute the following command

ionic cordova prepare android
ionic cordova run android

 



3.4 Creating Icon and Splash screen

For creating icon and splash first paste your icon and splash in the resources folder and then execute the following command in your project directory

ionic cordova platform add android 
ionic cordova resources
ionic cordova build android

Title
Subtitle
Kicker


4. Modifying code


4.1 Screen / View’s Code Structure



4.2 Overall Folder Structure

There are broadly 30+ pages in this template. All pages are shown in the src/app folder above. Mostly, each page's code is kept in a separate folder. Folder names are self-explanatory.You can create a page by executind command

ionic cordova generate page your page name

This will create a folder of page name containinf four files as -

In case of Ionic 4, pages are generated with lazy loading by default which means a page has its own module.

├── enappd.html
├── enappd.module.ts
├── enappd.scss
└── enappd.ts
  • enappd.html: contains UI components for the page.
  • enappd.scss: contains sass styles to style your page.
  • enappd.ts: contains TypeScript code

4.3 Layout File Code Structure

The layout file has the structure shown in the image.

 • imports are written on the top.

• @component is the decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.

 • constructor is used for dependency injections.

When the app loads the constructor gets called first then ngOnInit.

After constructor and inside the class we can write our logics for the page/component in page.ts 



4.4. Styling Code Structure



style page are generated by default for each page after executing page generate command, inside the page folder.

4.5. Navigation Code Structure



On creating a project in ionic a file named app-routing.module.ts gets generated by default where all the navigation codes gets done.
We use the path name of a particular page to navigate from one page to another.

In ionic, there are some navigation type as-

Tab navigation



Controls the navigation of Tabs (4 tabs in app). This is detailed in src/app/ tabs/tabs-router.module.ts. All the settings of Tab Navigation can be controlled from here.

Side menu

Side menu navigation can be controlled from the app-routing.module.ts.


Title
Subtitle
Kicker


5. Feature Explanation


5.1. User Authentication

User authentication is often the first and most important part of the app. This template has pages for Login, Signup, Forgot password and Change password.

As per your requirements, you can either 

 — Allow a user to access the app without login, and ask a login for specific features, OR 

— Do not allow any access without login. In this case the Login page with go on top of the router navigation in app-routing.module.ts. Only once there is a “login”, the user should be allowed access to HomePage. Authentication can be achieved by your custom back-end or, if you are using Firebase, there are several easy authentication options. You can even choose to integrate social logins in the app. Check details here.

5.2. Adding songs, playlists, artists etc.

This template takes the dummy data from the JSON files placed in service.ts file. If you only want to create static data, you can modify the JSON files’ data and the data in the page/ layout will change. 

For example, in Homepage — we see different categories of media.

These categories are imported from the JSON data in the service.ts file in src/app.

You can generate service in ionic by executing the command 

ionic g service your service name


Editing this data will edit the view in the page on serve or device. 

Once you connect your back-end with the app, this JSON data will be replaced by the backend data. All the data labels are self-explanatory.

5.3 Images 

You can choose to load images from URLs (recommended), or keep images in the local storage. If you are loading images from URL, keep a backup image to show in case the actual image takes time to load.

5.4. Music Player

This is the central component of the a music streaming app. This template has two types of music player — a Mini player at the bottom of each screen and a full-screen player.



The app uses ionic @ionic-native/media plugin and ionic @ionic-native/music-controls plugin for playing audio.

Music controls for Cordova applications. Display a ‘media’ notification with play/pause, previous, next buttons, allowing the user to control the play. Handle also headset event (plug, unplug, headset button).

The Media plugin provides the ability to record and play back audio files on a device.

5.5. Settings

Settings are an important part of an app.

 This template also has a dedicated and relevant Settings page.



There are options for push notification, email notifications, and languages for

 — Notification handling

— Language handling

 — Edit Profile 

— Logout

 — Toggles for other many options

To enable and disable mobile notifications, you will first need a Push notifications system in your back-end. If you are using Firebase — implementing, enabling and disabling pushnotification is very easy compared to a custom back-end. Read more about Firebase- Ionic push notificationhere.

Edit Profile and Change Password can also be implemented very easily with Firebase, even if you are using Social logins. Custom back-end will require you to make custom APIs for these purposes.

5.6. Premium feature addition

Providing premium features is where you can earn using your app. 

This template does have a premium feature page but only UI.

 You can then route each your music streaming request via a checking function which checks for user being premium or non-premium. Accordingly, you can 

— Serve low quality data to non-premium users, ask them to get premium for better quality

 — Don’t allow Offline content for non-premium users, ask them to get premium for Offine content

 — Don’t allow creating more than a fixed number of playlists etc in non-premium 

— Show Ads using Ionic AdMob for non-premium users and many similar things.



You can implement the payments by using any one or multiple of the following

Ionic PayPal

— Ionic Stripe

Ionic in-app purchase

— Ionic Apple Pay and Android Pay

Ionic Razorpay


Title
Subtitle
Kicker


6. Integrating Back-end Data


6.1. Data Structure

In each service.ts, there is a dummy data file placed to mimic the behavior of a back-end. 

E.g. Following images shows the data and its structure in YourAlbums page. The data is in JSON format.



Data is imported in the page.ts file as

this.serviceProvider.albumData
here, serviceProvider is service name
albumData is the JSON data in service

6.2 Back-end options

To make the app fully operational you will need to attach a back-end to the app. This will require several additions and you will need the assistance of a back-end developer. 

We will provide a glimpse into the things you will require

Step 1 — Choose a back-end Technology

There are several options when it comes to back-end. Some of the major ones are 

  1. Node.js custom back-end 
  2. 2. Firebase back-end (node.js) 
  3. 3. Django custom back-end 
  4. 4. Ruby-on-rails custom back-end 
  5. GO back-end 

We recommend starting out with Firebase, if you want quick turn-around of features. Firebase is a BaaS platform and comes with a bunch of ready-made functionality, like

 — Storage

 — Analytics 

Push notifications

 — In-app messages

Real-time database and much more.

Step 2 — Connect the back-end to the app

As explained in the section above, you will need to replace the Data coming in form individual JSON files with the data coming in from APIs (from your back-end).

To manage the data efficiently, you will need to arrange all API calls, and data manipulation in a single location. You can manage API calls with HttpClient services orfirebase functions.


Title
Subtitle
Kicker


7.0 Troubleshooting


If you are facing issues related to `support.v4.media` does not exist or something similar, this line needs to be added in android → project.properties file.



Refer this troubleshooting guide from Ionic framework docs to solve some common issues.


Title
Subtitle
Kicker


8.0 Third-party libraries, sources, and Credits


Major third-party libraries used in this app template are

All these are open-source libraries and the license & usage permission of the above are available on their respective URLs.

Thanks to A’s music control plugin because the ionic’s music controls plugin is buggy till now. But kudos to Amit Khare who solved this problem and made things easy.

Assets images are used from unsplash.com. The usage of these images is free. 


Title
Subtitle
Kicker



Ionic 4 Spotify app Starter -Ion Spot



Table of Contents

  1. Introduction — What is this template
  2. Features of this template

 2.1 Screens

 2.2 Features

 2.3 Device compatibility

3. Setup and Installation

3.1 Introduction

3.2 Installation

3.3 Running your app

3.4 Run your app with changes

3.5 Creating icon and splash

3.6 Generating Release builds

4. Modifying code

4.1 Screen code structure

4.2 Styling structure

4.3 Logic structure

4.4 Running your app

4.4 Navigation structure

5. Feature Explanation

5.1 User Authentication

5.1 Adding songs, playlists, artists, etc

5.3 Recommendations

5.4 Search

5.4 Music Player

5.5 Mini Music Player

5.6 Settings

5.7 Premium feature addition

6. Integrating Back-end Data

6.1 Data structure

6.2 Back-end options

7. Troubleshooting

8. Third-party libraries, sources, and Credits

1. Introduction — What is this template

IonSpotify— An Ionic 4 Music Streaming App Template is a mobile app theme/template. With this template, you can create a Music streaming app like Spotify, Gaana, Wynk music, jio music, etc.

This template is the front-end part of the music app, which means the screens and user interfaces (screens) are ready. You can easily change the screens, styles and logics to suit your requirements. To make it a live app like Spotify, Gaana, Wynk Music, Jio Music, etc. you just need to add a back-end to the app, and load your data in the back-end.



This template is made in IONIC 4 language. With IONIC 4, you can

  • Create iOS and an Android app with a single source code

 • Cut your project cost and time in half 

  • Ensure exact same UI in iOS and Android, while following the standard UI norms 
  • Saves separate updates for each app in future

2. Features of this template

2. 1. Screens

2.1.1 Landing




This page can be accessed after the app loads. This is the landing page. This page contains the signup page, continue with facebook and login page navigations.

Continue with Facebook can be used to perform for facebook login action. Currently, the Facebook login is only for demo purpose, you can integrate ionic facebook login authentication following our previous blog on Facebook login in Ionic 4 apps using Firebase.

2.1.2 Login



This page can be accessed after the app loads. By clicking on the login button it redirects you to the login page. 

The login page can be used to perform login action with username/email and password. Currently, the login is only for demo purposes.

The login page also contains “Forgot Password” page navigations.

2.1.3 Signup



This page can be accessed from the landing page. By clicking on the signup button it redirects you to the signup page.

The signup page can be used to register a user with a username/email and password. Currently, the signup is only for demo purposes.

The signup page also contains “Date of birth and Gender, select music of your taste, select artist of your taste and find favorite artist page” page navigations.

2.1.4 Select Music



This page can be accessed by successful input of username/email and password in the create account page. Here, you can select kinds of music according to your taste. After selecting kinds of music it will navigate to the music artist taste.

2.1.5 Select Artist



This page can be accessed by successful selection of kind of music in the select music taste page.

 Here, you can select many artists according to your taste. After selecting artists it will navigate the finding music page where your selected music and artist data will be loaded in the app but here it is only UI demonstration.

Here we have a find artist page too. You can access this page by clicking on the search bar. It will navigate to the search page.

2.1.6 Find Artist



This page can be accessed by clicking on the search bar at the top of the artist page. Here you can find an artist of your search by typing in the search input.
It will display you some results according to your input in the vertical list view.
This is only UI so it will result only some preset data.

2.1.7 Account Recovery



This page can be accessed from the “Login” page. Account Recovery page can be used to send a reset password URL or OTP to the user’s email or any other way you want to use. Currently, this page is only UI. The OTP sent to the user can be verified here and the user can be asked to provide a new password.

2.1.8 Home



This is the first tab of the application. 

Home page contains recommended music and other categories for a user. 

The songs/albums are arranged in a horizontal scroll for each category.

 A vertical scroll allows the addition of any number of categories on the homepage, each category being arranged in a horizontal scroll.

By clicking on any category, it will navigate to the category playlist page.

2.1.9 Home, by category songs list



This page can be accessed by clicking on any category on the home page.

Here the list of all songs is available according to the category you selected.In this page, we have three icons for each song functioning different things.

Here the heart icon is used to toggle songs to add or remove as like or dislike songs.

The remove icon is used to hide and show the song in the song’s list. And the menu icon on click opens a modal from where we can like or dislike, hide or show, add it to playlist, add to queue, view artist, share, Report explicit Content and show credentials.

2.1.10 Song list modal



This page can be accessed by clicking on the Songs List page’s options button. This page contains the actions for the currently playing playlist arranged in a vertical list. Any song can be clicked and these actions can be performed.

2.1.11 Home — Songs List — Might Like



This page can be accessed from the songs list page from the home page, besides the songs selected by the category, there are some options to select other categories of your choice and it will navigate to the might like page.

2.1.12 Add songs modal



On clicking the options button in the top-right of the header, the current action modal opens.

This page can be accessed from the Songs List and Might Like page’s playlist button. This page contains the songs of the actions to add songs, make Non- collaborative, rename, delete, find and short playlist actions. Except add songs all the left actions are only UI. Particular actions can be done by writing some codes for that. You can follow or ask to that for you.

2.1.13 Add songs page




This page can be accessed by clicking on the add songs in the add songs modal or from the Library-Playlists. We can add songs to our playlist by clicking on the add button in the rightmost of each song name.

2.1.14 Music Player



This page can be accessed from many places, by clicking on a particular song item or by clicking the Mini-player on the bottom of any page.

Music player page contains the currently playing playlist, with songs of the playlist arranged in an image slider on the top half of the page. At the bottom, there is a music control bar with play, pause, next etc. buttons.

On clicking the Playlist button in the top-right of the header, the current playlist opens.

2.1.15 Settings Page



The settings page can be accessed from the Home page’s top-right button.

This page contains the settings/options for the app like 

  • data saver
  • Playback Options
  •  Language
  • Edit Profile
  • Notifications 
  •  Devices
  • Car-View 
  • About
  • Privacy-Policy
  • Support 
  •  Social 
  • Other 
  • Logout

 Most of these settings options have toggle options and Language and notification navigate to other pages. 

2.1.16 Settings — Notification



The settings page can be accessed from the Setting page’s navigation option.

This page contains the navigation options/settings for Push notification and Email notification in the app like

  • Recommended Music
  • New Music
  • Playlist Update
  • Concert Notification
  • Artist Updates

To enable and disable mobile notifications, you will first need a Push notifications system in your back-end. If you are using Firebase — implementing, enabling and disabling push notification is very easy compared to a custom back-end. Read more about Firebase- Ionic push notificationhere.

2.1.17 Settings — Language



This page can be accessed from “Settings” page.

 The options available can be chosen to change the language of the app / music, as per your requirement. “Back” button takes you back to “Settings” page.

2.1.18 Search 



This is the second tab of the application.

Search page contains the UI for searching songs, albums, artists etc.

 Just type any word in the input box and the results can be displayed in the content as a list For demo purpose. When you type in the search box, you see preset results in the result.

2.1.19 Library-Playlist



This is the third tab, first sub-segment of the Music segment’s

Playlist page contains your playlists arranged in a vertical list. The create playlist button allows you to create a playlist and add songs to it. You can add as many playlists you want. You can also implement an infinite scroll feature to fetch more playlists on scroll.

2.1.20 Library — Music — Playlist — Create Playlist



You can create as many songs as you want by creating different play lists.

All the playlists will be arranged in a vertical manner in the Library-Playlist page.

2.1.21 Library — Music — Playlist — Artist



This is the third tabs, second sub-segment of the Music segment’s

Artist page contains your favorite Artist arranged in a vertical list. By clicking on any artist navigates you to its songs list. You can add as many artist you want. You can also implement an infinite scroll feature to fetch more songs on scroll.

2.1.22 Library — Podcast



This is the third tab, and the second segment.

Episode, Download, and shows are the first, second and third sub-segment of the podcast segment.

The browse podcast button will navigate to the Episode, Download and shows podcast category.

Podcast categories have been defined in the grid view in the vertical direction in the app. 

2.1.23 Podcast — categories



These categories contain all the digital audio file made available on the Internet for downloading to a computer or mobile device, typically available as a series, new installments of which can be received by subscribers automatically. You can integrate all the functionalities by applying back-end code to it. Above is only UI.

The categories have been defined accordingly in the list view and grid view in the app. By clicking a particular category will navigate to the podcast category page.

2.1.24 Podcast — categories — List view



This page can be accessed by clicking on any category of the podcast categories. This will navigate to the podcast category type, playlist page.

2.1.25 Podcast — categories — Grid view



This page can be accessed by clicking on any category of the podcast categories. This will navigate to the podcast category selected page.

2.1.26 Premium



This is the apps forth tab.

Providing premium features is where you can earn using your app.This is only a UI but you can integrate back-end code for premium services with the help of a back-end developer orcan reach to us for integration.

2.2 Features

2.2.1 Tabs




Tabs can be accessed after the successful login or signup process. Maximum of the pages in the app can be navigated from the tabs.

Tabs are placed at the bottom of every page.

2.2.2 Mini Music Player 



Mini Music Player is present in almost all screens on the bottom of the screen. It shows the currently playing song, and a play / pause button depending on whether the song is playing or paused. 

Clicking on Mini Music Player takes you to Music player page.

2.2.3 Nested Segment Navigation



The app contains nested navigation of segments and Tabs. The app contains a tab-bar which is the parent.

Your Library is the second level of segment nesting.

2.3 Device Compatibility

As mentioned earlier , the app is written in Ionic 4 and angular language. This allows a single source code to create both iOS and Android apps. 

This template has been tested in all latest Android versions and major devices. 

This template has also been tested in all latest versions of iPhones, including iPhone X.

3. Setup and Installation

IonSpotify is a music streaming application made withIonic 4 and angular .

For navigation in application, we have used default angular nevigation.

3.1 What is Ionic Framework

Ionic Framework is an open-source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies (HTML, CSS, and JavaScript).

Ionic Framework is focused on the frontend user experience, or UI interaction of an app (controls, interactions, gestures, animations). It’s easy to learn, and integrates nicely with other libraries or frameworks, such as Angular, or can be used standalone without a frontend framework using a simple script include.

3.2 How can I use this template

This template is a ready-made front-end template for a Music Streaming App. You can use the screens coded in this app, navigation between the screens and specific functions applied to buttons etc. This saves your 100% cost and time in front-end UI development. You can simply add a back-end / server to this app template, and replace the demo data with data coming from your server. This way, you only spend time and money on back-end development.

3.3 Installation

Setting Up Environment and Installing Dependencies

# Install the Ionic CLI

npm install -g ionic

# Start an App

ionic start myApp tabs/blank/sidemenu
whatever is your requirement you can select that and remove others from tabs/blank/sidemenu.

#Angular + Ionic Framework

npm install @ionic/angular@latest --save

# Node & npm

Almost all tooling for modern JavaScript projects is based in Node.js. The download page has prebuilt installation packages for all platforms. We recommend selecting the LTS version to ensure best compatibility.

Node is bundled with npm, the package manager for JavaScript.

To verify the installation, open a new terminal window and run:

node --version
$ npm --version

# iOS Setup

To target iOS, some additional environment setup is required. Unfortunately, iOS apps can only be created on macOS.

For iOS setup please follow the steps provided in the link here

#Run the App

cd your app name
ionic serve

For iOS build, follow the steps provided in the link here

For android build, execute the following command

ionic cordova prepare android
ionic cordova run android

 



3.4 Creating Icon and Splash screen

For creating icon and splash first paste your icon and splash in the resources folder and then execute the following command in your project directory

ionic cordova platform add android 
ionic cordova resources
ionic cordova build android

4. Modifying code

4.1 Screen / View’s Code Structure



4.2 Overall Folder Structure

There are broadly 30+ pages in this template. All pages are shown in the src/app folder above. Mostly, each page's code is kept in a separate folder. Folder names are self-explanatory.You can create a page by executind command

ionic cordova generate page your page name

This will create a folder of page name containinf four files as -

In case of Ionic 4, pages are generated with lazy loading by default which means a page has its own module.

├── enappd.html
├── enappd.module.ts
├── enappd.scss
└── enappd.ts
  • enappd.html: contains UI components for the page.
  • enappd.scss: contains sass styles to style your page.
  • enappd.ts: contains TypeScript code

4.3 Layout File Code Structure

The layout file has the structure shown in the image.

 • imports are written on the top.

• @component is the decorator that marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.

 • constructor is used for dependency injections.

When the app loads the constructor gets called first then ngOnInit.

After constructor and inside the class we can write our logics for the page/component in page.ts 



4.4. Styling Code Structure



style page are generated by default for each page after executing page generate command, inside the page folder.

4.5. Navigation Code Structure



On creating a project in ionic a file named app-routing.module.ts gets generated by default where all the navigation codes gets done.
We use the path name of a particular page to navigate from one page to another.

In ionic, there are some navigation type as-

Tab navigation



Controls the navigation of Tabs (4 tabs in app). This is detailed in src/app/ tabs/tabs-router.module.ts. All the settings of Tab Navigation can be controlled from here.

Side menu

Side menu navigation can be controlled from the app-routing.module.ts.

5. Feature Explanation

5.1. User Authentication

User authentication is often the first and most important part of the app. This template has pages for Login, Signup, Forgot password and Change password.

As per your requirements, you can either 

 — Allow a user to access the app without login, and ask a login for specific features, OR 

— Do not allow any access without login. In this case the Login page with go on top of the router navigation in app-routing.module.ts. Only once there is a “login”, the user should be allowed access to HomePage. Authentication can be achieved by your custom back-end or, if you are using Firebase, there are several easy authentication options. You can even choose to integrate social logins in the app. Check details here.

5.2. Adding songs, playlists, artists etc.

This template takes the dummy data from the JSON files placed in service.ts file. If you only want to create static data, you can modify the JSON files’ data and the data in the page/ layout will change. 

For example, in Homepage — we see different categories of media.

These categories are imported from the JSON data in the service.ts file in src/app.

You can generate service in ionic by executing the command 

ionic g service your service name


Editing this data will edit the view in the page on serve or device. 

Once you connect your back-end with the app, this JSON data will be replaced by the backend data. All the data labels are self-explanatory.

5.3 Images 

You can choose to load images from URLs (recommended), or keep images in the local storage. If you are loading images from URL, keep a backup image to show in case the actual image takes time to load.

5.4. Music Player

This is the central component of the a music streaming app. This template has two types of music player — a Mini player at the bottom of each screen and a full-screen player.



The app uses ionic @ionic-native/media plugin and ionic @ionic-native/music-controls plugin for playing audio.

Music controls for Cordova applications. Display a ‘media’ notification with play/pause, previous, next buttons, allowing the user to control the play. Handle also headset event (plug, unplug, headset button).

The Media plugin provides the ability to record and play back audio files on a device.

5.5. Settings

Settings are an important part of an app.

 This template also has a dedicated and relevant Settings page.



There are options for push notification, email notifications, and languages for

 — Notification handling

— Language handling

 — Edit Profile 

— Logout

 — Toggles for other many options

To enable and disable mobile notifications, you will first need a Push notifications system in your back-end. If you are using Firebase — implementing, enabling and disabling pushnotification is very easy compared to a custom back-end. Read more about Firebase- Ionic push notificationhere.

Edit Profile and Change Password can also be implemented very easily with Firebase, even if you are using Social logins. Custom back-end will require you to make custom APIs for these purposes.

5.6. Premium feature addition

Providing premium features is where you can earn using your app. 

This template does have a premium feature page but only UI.

 You can then route each your music streaming request via a checking function which checks for user being premium or non-premium. Accordingly, you can 

— Serve low quality data to non-premium users, ask them to get premium for better quality

 — Don’t allow Offline content for non-premium users, ask them to get premium for Offine content

 — Don’t allow creating more than a fixed number of playlists etc in non-premium 

— Show Ads using Ionic AdMob for non-premium users and many similar things.



You can implement the payments by using any one or multiple of the following

Ionic PayPal

— Ionic Stripe

Ionic in-app purchase

— Ionic Apple Pay and Android Pay

Ionic Razorpay

6. Integrating Back-end Data

6.1. Data Structure

In each service.ts, there is a dummy data file placed to mimic the behavior of a back-end. 

E.g. Following images shows the data and its structure in YourAlbums page. The data is in JSON format.



Data is imported in the page.ts file as

this.serviceProvider.albumData
here, serviceProvider is service name
albumData is the JSON data in service

6.2 Back-end options

To make the app fully operational you will need to attach a back-end to the app. This will require several additions and you will need the assistance of a back-end developer. 

We will provide a glimpse into the things you will require

Step 1 — Choose a back-end Technology

There are several options when it comes to back-end. Some of the major ones are 

  1. Node.js custom back-end 
  2. 2. Firebase back-end (node.js) 
  3. 3. Django custom back-end 
  4. 4. Ruby-on-rails custom back-end 
  5. GO back-end 

We recommend starting out with Firebase, if you want quick turn-around of features. Firebase is a BaaS platform and comes with a bunch of ready-made functionality, like

 — Storage

 — Analytics 

Push notifications

 — In-app messages

Real-time database and much more.

Step 2 — Connect the back-end to the app

As explained in the section above, you will need to replace the Data coming in form individual JSON files with the data coming in from APIs (from your back-end).

To manage the data efficiently, you will need to arrange all API calls, and data manipulation in a single location. You can manage API calls with HttpClient services orfirebase functions.

7.0 Troubleshooting

If you are facing issues related to `support.v4.media` does not exist or something similar, this line needs to be added in android → project.properties file.



Refer this troubleshooting guide from Ionic framework docs to solve some common issues.

8.0 Third-party libraries, sources, and Credits

Major third-party libraries used in this app template are

All these are open-source libraries and the license & usage permission of the above are available on their respective URLs.

Thanks to A’s music control plugin because the ionic’s music controls plugin is buggy till now. But kudos to Amit Khare who solved this problem and made things easy.

Assets images are used from unsplash.com. The usage of these images is free. 

_doc_end_


Title
Subtitle
Kicker