“IonTube- Ionic 3 Youtubers Channel App” Documentation by “Afroza Yasmin” v1.0

“IonTube- Ionic 3 Youtubers Channel App”

Created: 09/05/2018
By: Afroza Yasmin
Email: themebucketbd@gmail.com

Thank you for purchasing my app. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Table of Contents

  1. Prerequisite
  2. Environment Setup
  3. Run
  4. Build For Android
  5. Build For IOS
  6. Testing App
  7. QuickStart Guide
  8. Theming your Ionic App
  9. Features

Prerequisite - top

1. You must have basic programming knowledge/ JavaScript knowledge before going inside this project. You must familiar with Angular5, Ionicframework. Basic programming / JavaScript knowledge.

2. Need to install the latest version of the Ionic CLI and Cordova. Verify that you are running at least node 6.9.x and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.

Environment Setup - top

Setup your OS environment to install the Ionic CLI and Cordova for native app development.

npm install -g cordova ionic

You may need to add “sudo” in front of these commands to install the utilities globally

Run - top

Unzip the downloaded IonTube project and open a terminal window `cd` into the project root directory and install dependent packages by running `npm install` and run the command `ionic serve`. The server will be up & running on localhost 8100 port. At browser window, open http://localhost:8100.

Run Commands

$ ionic serve
$ ionic serve --lab

Build For Android - top


$ ionic platform add android
$ ionic build android

Android Production Builds (release.apk)/Publishing your app

$ cordova plugin rm cordova-plugin-console
$ cordova build --release android
$ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000
$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name
$ zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk

Build For IOS - top

You need the iOS SDK installed on your computer to build an iOS version of your application using the steps below.

Testing App - top

Desktop Browser Testing

$ ionic serve

Simulator testing

$ ionic build ios
$ ionic emulate ios

Testing as a native app

$ ionic run android

QuickStart- Step By Step Guide - top

Step One (Recommended)

First, install Node.js. Then, install the latest Cordova and Ionic command-line tools in your terminal.

npm install -g cordova ionic

Step Two (Download & Install Dependencies)

npm install

Step Three (Configuration)

Open IonTube project in your code editor and go into the project root directory.

At the root folder go into the `src/config`, here you can see two files, 1. admob.ts and 2. youtube.ts

In admob.ts, you need to replace your admob config keys for Banner, Interstitial and Video for Android and Ios.

Admob Website https://www.google.com/admob/ and Admob Ionic Plugin https://ionicframework.com/docs/native/admob-free/

In youtube.ts, you need to set your Google Api Key, Youtube Channel ID and Max Result of Videos per Page(By default we set 20/per page).

Step Four (Running)

Desktop Browser Testing

cd IonTube
ionic serve

Simulator testing

ionic build ios
ionic emulate ios

Testing as a native app

ionic run android
ionic emulate ios

Theming your Ionic App - top

Theme support is baked right into Ionic apps. Changing the theme is as easy as updating the $colors map in your src/theme/variables.scss file:

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222

The fastest way to change the theme of your Ionic app is to set a new value for default, since ThemesBuckets uses the default color by default to style most components.

Our main default colors - color1, color2

Read More Details from https://ionicframework.com/docs/theming/theming-your-app/

Features - top

  • Support Both Platform For Android and IOS
  • Beautifully Design
  • Integrated Super tabs - https://github.com/zyra/ionic2-super-tabs
  • List of Popular Videos
  • List of Videos
  • List of Playlist
  • Playlist Items Video
  • Video Details
  • Search Youtube By Query
  • Channel Infos
  • Pull-up to Refresh
  • Infinite Scroll
  • Order By Sorting - Rating, Date, Relevance, Title, View Count, Video Count
  • List of Featured Channels
  • Open Channel in Browser
  • Open Play Store For Rating App
  • Overlay Sidemenu
  • Confirm Alert Box
  • Toast
  • Used Cordova Sqlite Storage Plugin, Details - https://ionicframework.com/docs/storage/
  • Track Video Play/Pause in Background(Play Store not support play background video, this app handle to pause background video beautifully )
  • Integrated Admob For Ios and Android
  • Used Iframe for Youtube Player
  • SASS based
  • Well Documentation and Code Comment

Sources and Credits - top

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on Codecanyou, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Afroza Yasmin

Go To Table of Contents