Part 2: Simple Ionic tutorial from scratch — From 0 to Live App
Adding backend to an ionic app— Beginners to Intermediate
This is in continuation to our Part 1.
Adding JS backend
Any logical app would eventually to get and save data to a backend. It could be a lite db embedded with app or to a REST Api. In our case we only get data from a service via REST APIs. For our app, We are using realtime Air Quality data apis from http://aqicn.org/json-api/doc/#api-Geolocalized_Feed-GetHereFeed.
In order to communicate with HTTP APIs, we need to add HTTP module to our Ionic/Angular app.
Add the below import statement in app.module.ts and add HttpModule in imports property to load it
import { HttpModule } from ‘@angular/http’;
Add the below two imports in home.ts. The promise import is used to convert our api calls into promises which gets handy later on.
import { Http } from ‘@angular/http’;
import ‘rxjs/add/operator/toPromise’;
The final code for home.ts should now look like this. To summarize, here is what we have done:
- Save the reference of Http and LoadingController objects in our HomePage class via the constructor function.
- Created a new method reload where we use the http object to issue a REST call to our air quality index API. Currently the token used is demo which will not return dynamic data. So please create your own token by following the api docs and replace the demo token with yours.
- The http calls return a promise and on success of this promise we have saved the air quality index (aqi) data in a variable of our class names aqi.
Binding Data in HTML
The data binding to HTML happens by Angular’s data binding. I wont be covering that here but again to summarise, this is the way using which the views automatically change when a change happens to the data in JS.
Angular has a specific convention of binding data and the most common one is using curly braces. In our case, we have our aqi variable defined in our JS name home.ts. In this file the below code means that the any data that is there in this class can be used in home.html
NOTE: Any new variable that you define in your JS should have a type associated with it following typescript conventions. For now, since we are declaring the aqi variable, typescript would throw a compile error asking us to tell the type. As a generic measure, simply add the type any to this variable.
@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
aqi: any; //typescript convention
constructor(public loader: LoadingController, public navCtrl: NavController, public http: Http) {
this.http = http;
this.loader = loader;
this.aqi = { data: {} };
this.reload();
}
So if we want to use our aqi data above in HTML, simply do this in our html
{{aqi.data}}
and so forth you can extend this style to refer any property in the json object graph.
This bring us to the final HTML that now looks like this.
Now if all goes well and so do an ionic serve you app should come up in the browser
Step 4 — Android Mobile App
Adding android platform
Now its time to convert our web app into mobile app. For this tutorial we will build an app for android. Make sure android is installed in your system. There will be a lot of tutorial to get you going through this step, so i am skipping this step.
To add android platform run the following cmd
ionic cordova platform add android
The above step will add android, splash screens and icons to your directory.
Building Android APK
Now its time to build an apk out of our web app. Run the below command and it should generate an apk into folder <project_dir>/platforms/android/build/outputs/apk/android-debug.apk
ionic cordova build android
Some phones don’t let you transfer the apk with this names so you can simply rename it and transfer it to your android phone and install it. If all goes well you now have your first fully functional hybrid app! :D
App name and version customisations
Your app name and version can be changed from config.xml file found in your project root directory.
<widget id=”io.ionic.starter” version=”0.0.1" xmlns=”http://www.w3.org/ns/widgets" xmlns:cdv=”http://cordova.apache.org/ns/1.0">
<name>MyApp</name>
Icon and Splash Screen customisations
To customize your app icon and splash screen, go into the resources folder found in your project root directory. Just replace the icon.png and splash.png with your own files. For me the minimum dimensions of the images that worked were: 512x512 for icon and 1920x1920 for splash screen. Once done, run the following command to generate all icons and splash for different kinds of devices
ionic cordova resources
APK Debugging and HOT code changes
For final steps you might need to make some changes in your code and making apk and transferring it to your phone every time gets frustrating. To solve this just connect your phone with your computer and allow remote debugging and file transfer mode.
No instead of ionic serve, run the following command
ionic cordova run android — livereload
PS: its double hyphen before livereload
This should bring the app up your phone and when you change the code in your computer, changes will reflect in realtime on your apk.
In addition to this, Another advance way to debug your JS code is to browse the below link in your chrome:
chrome://inspect/#devices
This will show you the connected phone and currently running apk. Make sure your apk is running when you do this.
Step 5 — Final Launch to Production Playstore
APK Performance and Initial Load Time
By now you must have realised that, our app takes a bit long for initial startup. To fix this we will build our apk with production flag that tells ionic to do optimisations like AOT compilations and other cool things (I am yet to dig deeper in this black magic!). Run the below command to build your app for production and give it startup speed
ionic cordova build android — prod
PS: prod is followed by double hyphen
Roll it to Playstore/Appstore
Android require you to sign you apk with your security certificate before you deploy any app. To do this step, first we need to create a keystore file. So on a system where java is installed, run the following command
keytool -genkey -v -keystore release.keystore -alias example -keyalg RSA -keysize 2048 -validity 10000
It will ask you some questions and a password to set. Make sure you remember the password. The output of this step will be a keystore file with same name as you gave in the command. Copy this release.keystore file and place it inside <project>/platforms/android.
In the same folder create one more file named release-signing.properties and put the below values in this file.
storeFile=<keystore file name with extension>
storeType=jks
keyAlias=<alias you gave in above step>
keyPassword=<password you gave in above step>
storePassword=<password you gave in above step>
Now finally run the below two commands to get your production apk
ionic cordova build android — prod
cordova build android -release
If all goes well, you will get a file named android-release.apk in the <project_dir>/platforms/android/build/outputs/apk/.
This release apk can be directly upload to your playstore account!.
The complete code of this tutorial is available in my github repo:
