Ionic 4 Video Streaming App Template - TeeVee

Ionic 4 Video Streaming App Template — TeeVee

Table of Contents

1. Introduction — What is this template

2. Features of this template

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 Video Streaming App Template — TeeVee


This is a Video streaming app template with Netflix style UI. With this template kit, you can build a complete working video streaming and downloading application to provide the streaming services to people at an extremely convenient way, only by integrating with a back-end server with the help of a good back-end developer. Now let‘s check out this starter kit in detail here.



Type caption for image (optional)

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.2 Adding rides, booking rides, History, etc

5.3 Recommendations

5.4 Video Player

5.5 Social Share

5.6 Payments

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


TeeVee— An Ionic 4 Video streaming App Template is a mobile app theme/template. With this template, you can create video streaming apps like Netflix, Amazon Prime, Zee5, Hotstar, etc.

This template is the front-end part of the TeeVee 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 Netflix, Amazon Prime, Zee5, Hotstar, etc. you just need to add a back-end to the app, and load your data in the back-end.



Type caption for image (optional)

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

  • Create iOS and an Android app (and a Progressive Web App as well) with a single source code
  • Cut your project cost and time in half (or further if you are making a PWA)
  • Ensure exact same UI in iOS and Android, while following the standard UI norms
  • Saves you from doing separate updates for each app (iOS and Android) in future, hence saves time

Title
Subtitle
Kicker


2. Features of this template


2. 1. Screens

2.1.1 Login



Login screen

This page can be accessed from the Signup page as the app loads. By clicking on the sign-in button at the top right of the header, after the required entries in the input field, it redirects you to the home 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 “Need Help” and “Signup” page navigations.

2.1.2 Signup — Load



Type caption for image (optional)

This page can be accessed as the app loads. By clicking on the “Join Free For A Month” button it redirects you to the Plan 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 “Login page “ page and “Help” page navigations.

2.1.3.1 Signup — Choose a Plan



Choose a plan page

This page can be accessed from the signup loading page by clicking on the Join Free For a Month button at the bottom of the page.
This page navigates to the Plan List page.

2.1.3.2 Signup —  Plan List



Choose a plan from the list

This page can be accessed from the choose a plan page by clicking on the set the plan button at the bottom of the page.
This page navigates to the Create an account page.

2.1.3.3 Signup — Create an account



Create your account

This page can be accessed from the select a plan List page by clicking on the set the plan button at the top of the page and after selection by clicking on the continue button at the bottom of the page.
This page navigates to the Payment setup page.

2.1.3.4 Signup — Payment setup page



Type caption for image (optional)

This page can be accessed from the create an account page by clicking on the continue button at the bottom of the page. This page contains the payment methods for the subscription of the application.
This page navigates to the Home page.

2.1.4 Home



Home page

This page can be accessed from the Payment setup page by clicking on the Start Membership button at the bottom of the page, or if you login to the app directly from Login screen. This page contains the previews, Top Picks, and many other categories in the vertical direction. This layout is similar to Netflix’s latest layout.

Each category contains multiple types or categories in the horizontal direction and is scrollable.

This page navigates to the Previews, Full video, Movie details, TV Shows, Movies and My List pages.

Home page contains the nested segments and tabs in the page.

2.1.5 Home — Previews



Previews


Previews

This page can be accessed from the Home page by clicking on each of the preview cards image arranged in the horizontal line as scrollable content on the home page. This page contains videos previews in a story format, very similar to Netflix, Whatsapp and Instagram stories.
This page navigates to the movie information page.

2.1.6 Home — Categories



Home tab 


home tab with video autoplay.

This is the first tab of the app. This page can be accessed after a successful login or sign up. this page contains multiple categories of video streaming arranged in horizontal rows. Each row contains scrollable items in the horizontal rows.
By clicking on any item of any particular category navigates you to the detailed information of the movie page.

2.1.7 Home — Categories — Movie information



Movie I formation

This page can be accessed from the first tab of the application by clicking on any item of any particular categories.
This page contains the complete information of the movies or shows streaming on TEEVEE.
This page contains segments including
1. EPISODES
2. TRAILER
3. MORE LIKE THIS

2.1.8.1 Home — Categories — Movie information — EPISODE



EPISODES

This page contains all the episode of the particular season of the series or TV shows. This page also has a share icon which can be used to share the page content among the network of yours.

2.1.8.2 Home — Categories — Movie information — TRAILERS



Trailers

This page contains all the upcoming movies or TV Shows trailers of the particular season of the series or TV shows.
By clicking on any of the trailers, this will navigate to the video player.

2.1.8.3 Home — Categories — Movie information — More Like This



More like this

This page contains the recommended video or episodes related to your search or preferences in the application.
By clicking on any recommended card, it will navigate to the movie information page.

2.1.9 Search — Popular Searches



Search page

This is the second tab of the application. This page contains random searches in the application. By clicking on the image of a particular item it navigates to that search item details and by clicking on the play icon of the particular image of the item it navigates to the video player.

2.1.9.1 Search —Custom Search



Searched result

This page can be accessed from the second tab of the application by writing more than three words in the search box. By clicking on any item of the page will navigate to the movie or show information page.
Here this is only UI demonstration but you can integrate back-end and make it dynamic.

2.1.10 Coming Soon



Type caption for image (optional)

This is the third tab of the application. This tab contains all the upcoming movie trailers and short videos. By clicking on any of the movies it plays the video.

2.1.11 Downloads



Downloads

This is the fourth tab of the application. This tab contains the list of downloaded videos, movies or TV Shows in the application. If you don't have any video downloaded then this will contain a button to navigate you to the downloadable contains.
This page contains a smart downloadable toggle to enable and disable smart download service.

2.1.12 Downloads — Smart Downloads



Smart Downloads FAQ’s

This page can be accessed from the downloads tab by clicking on the “Smart Download ON” button in the header of the page.
This page contains detailed information about the smart download.

2.1.13 More



Type caption for image (optional)

This is the fifth and last tab of the application. This tab contains all the functions of the app including: — 

  1. Manage Profiles
  2. Refer a Friend
  3. Notifications
  4. My List
  5. App Settings
  6. Help
  7. Sign Out

2.1.13.1 More — Manage Profiles



Manage Profiles

This is the fifth tab and the first content of this application. This page contains the currently available users for the application. Here a user can edit the user details by clicking on any of the user profile delete the user from the application.

2.1.13.2 More — Manage Profiles — Edit profile



Edit user profile

This page can be accessed from the applications fifth tab by clicking on the manage profile and inside manage profile click on any user to edit details.

Here a user can edit his/her own or other users detail in the application can save that.

2.1.13.3 More — Notifications



Notification

This can be accessed from the more page by clicking on the notifications.
This page contains the notifications of upcoming movies or episodes or Tv Series.
 This page contains the notification as list items in the vertical direction of the page. By clicking on any item in the navigations it will redirect you to the notified item details. 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.

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 notification here.

2.1.13.4 More — My List



My List

This page can be accessed from the more page in the application by clicking on the “My List”. This page contains the selected or shortlisted movies, shows, series or any item within the application shortlisted by the user.
By clicking on the list item it will navigate to the item details page.

2.1.13.5 More — App Settings



Settings

This page can be accessed by clicking on the settings on the more page. In any app, settings page plays an important role in setting user’s preferences and requirement, here user can set the preferences for Push Notification, Email Notifications,download quality, device, storage, account, data usage and many more.
This page allows you to toggle some preferences and navigates to other pages to select choices.
This page allows the user to select Cellular Data Usage, Allows Notifications Toggle, and download video quality.

We can select and set any setting from the list of settings arranged in the vertical direction. This is the only UI for the demo purpose.

2.1.13.6 More — Help



Help 

This page can be accessed from the more page by clicking on the “Help”.
This page contains all the help regarding the application account cancellation, payment method update, connection issues, etc.

2.2 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


TEEVEE is a video streaming application made with Ionic 4 and angular 8.

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

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 video 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, and a bit on front-end data integration.

3.3 Installation

Setting Up Environment and Installing Dependencies

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 the 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

Install the Ionic CLI

$ npm install -g ionic

#Angular + Ionic Framework

$ npm install @ionic/angular@latest --save

# iOS Setup

To target iOS, some additional environment setup is required. Unfortunately, iOS apps can only be created on macOS (or using Ionic AppFlow, which is a paid feature)

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

#Run the App

After installing all dependencies, you just need to run following command to run your app in the browser

$ cd your app name
$ ionic serve

For iOS build, follow the steps provided in the link here. Once all setup is done, you just need to run

// add ios platform
$ ionic cordova platform add ios 
// build ios for running in device or simulator
$ ionic cordova prepare ios

and then open the .xcworkspace file in Xcode, and run the app in iOS device or simulator.

For Android build, execute the following command

// add android platform
$ ionic cordova platform add android 
// build android for running in device or simulator
$ ionic cordova build android 
//run android app in device or simulator
$ ionic cordova run android


Type caption for image (optional)

3.4 Creating Icon and Splash screen

For creating an icon and splash first paste your icon.png (10241024) and splash.png (2732x2732) in the resources folder and then execute the following command in your project directory

$ ionic cordova resources

Title
Subtitle
Kicker


4. Modifying code


4.1 Screen / View’s Code Structure



Type caption for image (optional)

4.2 Overall Folder Structure

There are broadly 25+ 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 executing the command

$ ionic cordova generate page your_page_name

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

In the 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



Type caption for image (optional)

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.

• A 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 logic for the page/component in page.ts

4.4. Styling Code Structure



Type caption for image (optional)

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

4.5. Navigation Code Structure



Type caption for image (optional)

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

In ionic, there are some navigation type as-

Tab navigation



Type caption for image (optional)

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

Nested Segment and Tab navigation



Type caption for image (optional)

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 Update password.

As per your requirements, you can either

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

— Do not allow any access without login/signup. 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 the 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 movies, series , recommended movies, TV Shows, etc

This template takes the dummy data from the JSON files placed in the teleflix.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 movies — we see many movies list.

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

You can generate service in ionic by executing the command

ionic g service your_service_name


Type caption for image (optional)

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 Social Sharing



Social share

Providing Social Sharing features is where you can share using your app.

This template does have a Social Sharing pluginfunctionality but only for demo purpose. You can enter your own share URLs, text, images etc to share whatever you want.

5.5 Video Player



Portrait Mode


Landscape Mode

This feature allows us to watch the video in ionic 4 apps very easily. We have used videogular2 npm package to play videos.

This package gives us the facility to play/pause, seek, show/hide controllers and many more. In our app, we have implemented video rotate functionality —  if you want to watch the video in landscape mode, you would only need to click on the rotate icon in the video screen.

5.6 Payments



Type caption for image (optional)

You can implement the payments by using any one or multiple of the following for TeeVee subscription.

Ionic PayPal

— Ionic Stripe

Ionic in-app purchase

— Ionic Apple Pay and Android Pay

Ionic Razorpay

— PhonePe

— GooglePay

— AmazonPay


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 the TEEVEE app. The data is in JSON format.



Type caption for image (optional)

Data is imported in the page.ts file as

  • this.teleflix.home — Here, teleflix is service name, home 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 the back-end. Some of the major ones are

  1. Node.js custom back-end
  2. Firebase backend (node.js)
  3. Django custom back-end
  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


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.

Assets images are used from unsplash.com and other “labeled for reuse” images. The usage of these images is free.


Title
Subtitle
Kicker



Ionic 4 Video Streaming App Template — TeeVee

This is a Video streaming app template with Netflix style UI. With this template kit, you can build a complete working video streaming and downloading application to provide the streaming services to people at an extremely convenient way, only by integrating with a back-end server with the help of a good back-end developer. Now let‘s check out this starter kit in detail here.



Type caption for image (optional)

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.2 Adding rides, booking rides, History, etc

5.3 Recommendations

5.4 Video Player

5.5 Social Share

5.6 Payments

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

TeeVee— An Ionic 4 Video streaming App Template is a mobile app theme/template. With this template, you can create video streaming apps like Netflix, Amazon Prime, Zee5, Hotstar, etc.

This template is the front-end part of the TeeVee 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 Netflix, Amazon Prime, Zee5, Hotstar, etc. you just need to add a back-end to the app, and load your data in the back-end.



Type caption for image (optional)

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

  • Create iOS and an Android app (and a Progressive Web App as well) with a single source code
  • Cut your project cost and time in half (or further if you are making a PWA)
  • Ensure exact same UI in iOS and Android, while following the standard UI norms
  • Saves you from doing separate updates for each app (iOS and Android) in future, hence saves time

2. Features of this template

2. 1. Screens

2.1.1 Login



Login screen

This page can be accessed from the Signup page as the app loads. By clicking on the sign-in button at the top right of the header, after the required entries in the input field, it redirects you to the home 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 “Need Help” and “Signup” page navigations.

2.1.2 Signup — Load



Type caption for image (optional)

This page can be accessed as the app loads. By clicking on the “Join Free For A Month” button it redirects you to the Plan 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 “Login page “ page and “Help” page navigations.

2.1.3.1 Signup — Choose a Plan



Choose a plan page

This page can be accessed from the signup loading page by clicking on the Join Free For a Month button at the bottom of the page.
This page navigates to the Plan List page.

2.1.3.2 Signup —  Plan List



Choose a plan from the list

This page can be accessed from the choose a plan page by clicking on the set the plan button at the bottom of the page.
This page navigates to the Create an account page.

2.1.3.3 Signup — Create an account



Create your account

This page can be accessed from the select a plan List page by clicking on the set the plan button at the top of the page and after selection by clicking on the continue button at the bottom of the page.
This page navigates to the Payment setup page.

2.1.3.4 Signup — Payment setup page



Type caption for image (optional)

This page can be accessed from the create an account page by clicking on the continue button at the bottom of the page. This page contains the payment methods for the subscription of the application.
This page navigates to the Home page.

2.1.4 Home



Home page

This page can be accessed from the Payment setup page by clicking on the Start Membership button at the bottom of the page, or if you login to the app directly from Login screen. This page contains the previews, Top Picks, and many other categories in the vertical direction. This layout is similar to Netflix’s latest layout.

Each category contains multiple types or categories in the horizontal direction and is scrollable.

This page navigates to the Previews, Full video, Movie details, TV Shows, Movies and My List pages.

Home page contains the nested segments and tabs in the page.

2.1.5 Home — Previews



Previews


Previews

This page can be accessed from the Home page by clicking on each of the preview cards image arranged in the horizontal line as scrollable content on the home page. This page contains videos previews in a story format, very similar to Netflix, Whatsapp and Instagram stories.
This page navigates to the movie information page.

2.1.6 Home — Categories



Home tab 


home tab with video autoplay.

This is the first tab of the app. This page can be accessed after a successful login or sign up. this page contains multiple categories of video streaming arranged in horizontal rows. Each row contains scrollable items in the horizontal rows.
By clicking on any item of any particular category navigates you to the detailed information of the movie page.

2.1.7 Home — Categories — Movie information



Movie I formation

This page can be accessed from the first tab of the application by clicking on any item of any particular categories.
This page contains the complete information of the movies or shows streaming on TEEVEE.
This page contains segments including
1. EPISODES
2. TRAILER
3. MORE LIKE THIS

2.1.8.1 Home — Categories — Movie information — EPISODE



EPISODES

This page contains all the episode of the particular season of the series or TV shows. This page also has a share icon which can be used to share the page content among the network of yours.

2.1.8.2 Home — Categories — Movie information — TRAILERS



Trailers

This page contains all the upcoming movies or TV Shows trailers of the particular season of the series or TV shows.
By clicking on any of the trailers, this will navigate to the video player.

2.1.8.3 Home — Categories — Movie information — More Like This



More like this

This page contains the recommended video or episodes related to your search or preferences in the application.
By clicking on any recommended card, it will navigate to the movie information page.

2.1.9 Search — Popular Searches



Search page

This is the second tab of the application. This page contains random searches in the application. By clicking on the image of a particular item it navigates to that search item details and by clicking on the play icon of the particular image of the item it navigates to the video player.

2.1.9.1 Search —Custom Search



Searched result

This page can be accessed from the second tab of the application by writing more than three words in the search box. By clicking on any item of the page will navigate to the movie or show information page.
Here this is only UI demonstration but you can integrate back-end and make it dynamic.

2.1.10 Coming Soon



Type caption for image (optional)

This is the third tab of the application. This tab contains all the upcoming movie trailers and short videos. By clicking on any of the movies it plays the video.

2.1.11 Downloads



Downloads

This is the fourth tab of the application. This tab contains the list of downloaded videos, movies or TV Shows in the application. If you don't have any video downloaded then this will contain a button to navigate you to the downloadable contains.
This page contains a smart downloadable toggle to enable and disable smart download service.

2.1.12 Downloads — Smart Downloads



Smart Downloads FAQ’s

This page can be accessed from the downloads tab by clicking on the “Smart Download ON” button in the header of the page.
This page contains detailed information about the smart download.

2.1.13 More



Type caption for image (optional)

This is the fifth and last tab of the application. This tab contains all the functions of the app including: — 

  1. Manage Profiles
  2. Refer a Friend
  3. Notifications
  4. My List
  5. App Settings
  6. Help
  7. Sign Out

2.1.13.1 More — Manage Profiles



Manage Profiles

This is the fifth tab and the first content of this application. This page contains the currently available users for the application. Here a user can edit the user details by clicking on any of the user profile delete the user from the application.

2.1.13.2 More — Manage Profiles — Edit profile



Edit user profile

This page can be accessed from the applications fifth tab by clicking on the manage profile and inside manage profile click on any user to edit details.

Here a user can edit his/her own or other users detail in the application can save that.

2.1.13.3 More — Notifications



Notification

This can be accessed from the more page by clicking on the notifications.
This page contains the notifications of upcoming movies or episodes or Tv Series.
 This page contains the notification as list items in the vertical direction of the page. By clicking on any item in the navigations it will redirect you to the notified item details. 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.

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 notification here.

2.1.13.4 More — My List



My List

This page can be accessed from the more page in the application by clicking on the “My List”. This page contains the selected or shortlisted movies, shows, series or any item within the application shortlisted by the user.
By clicking on the list item it will navigate to the item details page.

2.1.13.5 More — App Settings



Settings

This page can be accessed by clicking on the settings on the more page. In any app, settings page plays an important role in setting user’s preferences and requirement, here user can set the preferences for Push Notification, Email Notifications,download quality, device, storage, account, data usage and many more.
This page allows you to toggle some preferences and navigates to other pages to select choices.
This page allows the user to select Cellular Data Usage, Allows Notifications Toggle, and download video quality.

We can select and set any setting from the list of settings arranged in the vertical direction. This is the only UI for the demo purpose.

2.1.13.6 More — Help



Help 

This page can be accessed from the more page by clicking on the “Help”.
This page contains all the help regarding the application account cancellation, payment method update, connection issues, etc.

2.2 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

TEEVEE is a video streaming application made with Ionic 4 and angular 8.

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

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 video 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, and a bit on front-end data integration.

3.3 Installation

Setting Up Environment and Installing Dependencies

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 the 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

Install the Ionic CLI

$ npm install -g ionic

#Angular + Ionic Framework

$ npm install @ionic/angular@latest --save

# iOS Setup

To target iOS, some additional environment setup is required. Unfortunately, iOS apps can only be created on macOS (or using Ionic AppFlow, which is a paid feature)

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

#Run the App

After installing all dependencies, you just need to run following command to run your app in the browser

$ cd your app name
$ ionic serve

For iOS build, follow the steps provided in the link here. Once all setup is done, you just need to run

// add ios platform
$ ionic cordova platform add ios 
// build ios for running in device or simulator
$ ionic cordova prepare ios

and then open the .xcworkspace file in Xcode, and run the app in iOS device or simulator.

For Android build, execute the following command

// add android platform
$ ionic cordova platform add android 
// build android for running in device or simulator
$ ionic cordova build android 
//run android app in device or simulator
$ ionic cordova run android


Type caption for image (optional)

3.4 Creating Icon and Splash screen

For creating an icon and splash first paste your icon.png (10241024) and splash.png (2732x2732) in the resources folder and then execute the following command in your project directory

$ ionic cordova resources

4. Modifying code

4.1 Screen / View’s Code Structure



Type caption for image (optional)

4.2 Overall Folder Structure

There are broadly 25+ 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 executing the command

$ ionic cordova generate page your_page_name

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

In the 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



Type caption for image (optional)

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.

• A 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 logic for the page/component in page.ts

4.4. Styling Code Structure



Type caption for image (optional)

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

4.5. Navigation Code Structure



Type caption for image (optional)

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

In ionic, there are some navigation type as-

Tab navigation



Type caption for image (optional)

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

Nested Segment and Tab navigation



Type caption for image (optional)

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 Update password.

As per your requirements, you can either

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

— Do not allow any access without login/signup. 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 the 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 movies, series , recommended movies, TV Shows, etc

This template takes the dummy data from the JSON files placed in the teleflix.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 movies — we see many movies list.

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

You can generate service in ionic by executing the command

ionic g service your_service_name


Type caption for image (optional)

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 Social Sharing



Social share

Providing Social Sharing features is where you can share using your app.

This template does have a Social Sharing pluginfunctionality but only for demo purpose. You can enter your own share URLs, text, images etc to share whatever you want.

5.5 Video Player



Portrait Mode


Landscape Mode

This feature allows us to watch the video in ionic 4 apps very easily. We have used videogular2 npm package to play videos.

This package gives us the facility to play/pause, seek, show/hide controllers and many more. In our app, we have implemented video rotate functionality —  if you want to watch the video in landscape mode, you would only need to click on the rotate icon in the video screen.

5.6 Payments



Type caption for image (optional)

You can implement the payments by using any one or multiple of the following for TeeVee subscription.

Ionic PayPal

— Ionic Stripe

Ionic in-app purchase

— Ionic Apple Pay and Android Pay

Ionic Razorpay

— PhonePe

— GooglePay

— AmazonPay

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 the TEEVEE app. The data is in JSON format.



Type caption for image (optional)

Data is imported in the page.ts file as

  • this.teleflix.home — Here, teleflix is service name, home 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 the back-end. Some of the major ones are

  1. Node.js custom back-end
  2. Firebase backend (node.js)
  3. Django custom back-end
  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

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.

Assets images are used from unsplash.com and other “labeled for reuse” images. The usage of these images is free.

_doc_end_


Title
Subtitle
Kicker