“Ionium 2” Documentation by “Ionic Premium” v1.3.1


“Ionium 2 - Ionic Premium Multipurpose App”


Ionium 2 - Ionic Premium Multipurpose App

Updated: 07/19/2018
By: Ionic Premium
Email: ionicpremium@gmail.com

Thank you for purchasing Ionium 2 - Ionic Premium Multipurpose 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. Introduction
  2. Requirements
  3. Folder Structure
  4. Getting Started
  5. References
  6. Support
  7. FAQs
  8. Sources & Credits
  9. Version History

A) Introduction - top

Ionium 2 is an advanced version of the previous Ionium. Ionium 2 is already using the latest Ionic CLI version (Ionic v3). This app will allow you to develop hybrid applications using Ionic 3. Some of the features we offer such as Ionic UI Components, Ionic Forms, Ionic Native, CRUD (Create Update Update Delete) using Firebase, MySQL (http) and Local Storage, Google Map, Push Notification (FCM) and more.

Lastly, thank you for supporting us in purchasing this product, looking forward to our exciting feature updates for Ionium 2. If you have any question to ask, feel free to contact us.

Regards,
Ionic Premium Team


B) Requirements - top

Here is what you need:

  1. Firebase
  2. MySQL Database

C) Folder Structure - top

When you extract the zip package, you will find this:


D) Getting Started - top

Please follow these step to get the app work. You can also watch our video tutorial below to get started.


D.1) Installing Ionic Framework - top

To run this Ionic, you have to install Ionic Framework by following this step. Download and install devendable version of node.js. Then open your cmd.exe for windows or Terminal for mac and run:

			npm install -g cordova@latest ionic@latest
			npm install -g npm@latest
			npm update

Or if you use mac, don’t forget to use "sudo":

			sudo npm install -g cordova@latest ionic@latest
			sudo npm install -g npm@latest
			npm update

Ionic and cordova are now ready on your computer. No we need to re-install node_modules and plugins into the app. Go to ionium2

			npm i
			cordova prepare

Note: Make sure your internet connection is stable and running well. It may take several minutes to install all modules. Ionic and cordova are now ready on your computer.


D.2) Firebase, Push Plugin (FCM) & Google Map Configuration - top

In this step you will learn how to setup the Firebase & Google Map into the app. Firebase will be used in app to integrate the Firebase Cloud Messaging (FCM) and it also will be used with Note app. Create a new project in firebase console. If you alrady have, then click on it. Check this video below and follow the step-by-step.

Install Phonegap Push Plugin

To install the phonegap push plugin, use the code below:

			ionic cordova plugin rm phonegap-plugin-push
			ionic cordova plugin add phonegap-plugin-push

D.3) MySQL API Configuration - top

To integrate the MySQL database, please kindly check this video below:


D.4) Run in Browser - top

Now, we have completed all of requirements to run our apps. First, we will run app on browser by run:

			cd ionium
			ionic serve --lab
Ionstore on browser

Now, you app is on chrome browser and running well.
Note: All of hardware plugin will not work on browser.


D.5) Android SDK for Mac- top

In order to run this app on Android, you have to install Android SDK and some extras. Follow this step:

  1. Download Android Studio for your Mac OS X and install Download Android Studio for Mac
  2. After installation finished, open Android Studio & select Preferences Select Preferences on Android Studio
  3. Launch standalone SDK Manager Launch SDK Manager
  4. Install Tools, Android 6.0 (API 23) and some Extras as below Installing Android Platform

It may take times untill the installation finish. After finish, close SDK Manager.


D.6) Android SDK for Windows - top

In order to run this app on Android, you have to install Android SDK and some extras. Follow this step:

  1. Download Android SDK (not Android Studio) for your Windows and install Download Android Studio for Windows
  2. After installation finished, open SDK Manager Open SDK Manager
  3. Install Tools, Android 6.0 (API 23) and some Extras as below Installing Android Platform

It may take times untill the installation finish. After finish, close SDK Manager. Then you have to setting the environment variables, check the reference below.


D.7) Build and Run on Android - top

To build your project to Android platform, please make sure that you have completed the instructions above. After the installation complete, you can build the project using:

			cd ionium
			ionic cordova build android

This process will produce apk file on your platforms/android.

Now, let’s start running & testing on real device. Follow this step:

  1. Connect USB cable on your Android device to computer (Windows only)
  2. Run the app on real device using:
    					ionic cordova run android
  3. If you want to run Android on Mac, you can use android emulator or Genymotion
  4. Emulate the app using:
    					ionic cordova emulate android

You will see the app running on your real device or android emulator.


D.8) Build and Run on iOS - top

To build your project to iOS platform, open your Terminal and type:

			cd ionium
			ionic cordova build ios

The build process will produce ios folder in your platforms folder. Then, to run your app on emulator, please follow this step:

  1. Open Ionium 2/platforms/ios/Ionium 2.xcodeproj
  2. Double click Ionium 2.xcodeproj file, it will open Xcode
  3. Your can run your app by selecting iOS device or device emulator, then click play button Running on iOS
  4. You can also run the app using command line from Terminal, using
    					ionic cordova emulate ios
  5. To emulate on specific iOS device (eq. iPhone 6s)
    					ionic cordova emulate ios --target="iPhone-6s"

You will see the app running on iOS simulator.


I) References - top

To learn more about Ionic Framework, you can visit:

Ionic Getting started guide
ionicframework.com/getting-started

Ionic Documentation
ionicframework.com/docs

Ionic Community Forum
forum.ionicframework.com

ngCordova Documentation
http://ngcordova.com/docs


J) Support - top

When you have any issues related to Ionic, please don’t be hesitate to contact us using:

You can also visit: forum.ionicframework.com for more informations and any issues about Ionic Framework.


K) FAQs - top

1. How to edit the project files?

You can use below editors to edit project file on your Windows and Mac :

By downloading and installing it to your computer.


2. How to change the icon and splash screen?

To change Icon and Splash Screen, you can do it by following this step:
  1. Open your cmd or Terminal, then:
    						cd ionium
    						ionic cordova resources

    Ionic Framework will create resources directory at the root of the project. This resources directory contains image file for icon and splash screen.

  2. Create your own icon by save an icon.png (1024px x 1024px) in resource directory. The icon images dimension should follow the Ionic Framework recommended icon file dimension. This icon template provide the recommended size icon files.
  3. Create your own splash screen by save a splash.png (2732px x 2732px) in resource directory. The splash screen images dimension should follow the Ionic Framework recommended splash screen file dimension. This splash screen template provide the recommended size splash screen files.
  4. Every time you change the icon or splash screen, you have to run ionic cordova resources. Ionic will will automatically generate the icon and splash for each screen size using the icon.png and splash.png you provided.

3. What are plugins version, Ionic and others?

Here are what versions we used for latest Ionium 2:
  1. Ionium 2 - Ionic Premium Multipurpose App

  2. Ionium 2 - Ionic Premium Multipurpose App


L) Sources & Credits - top

Thanks for all of you that give me resources and inspirations.


M) Version History - top


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

Ionic Premium

Go To Table of Contents