top

Search

Ionic Tutorial

In the previous chapters, we have viewed apps on the browser, device and emulator.But, we have not gone into the finer detail of what happens inside the app. A quick look at the Ionic architecture will give an understanding of what goes on under the hood.Ionic apps are built using web technologies - HTML, CSS & JavaScript. They are rendered in WEB VIEWS which are full-screen and full-powered web browsers.These browsers provide HTML 5 APIs to be able to access device hardware like camera, GPS, etc. You can read up on HTML 5 APIs here, https://whatwebcando.today.In Ionic, these APIs are accessed through a bridge layer.The Android web view is based on the chromium-browser. You can read about the Android Web View here, https://developer.chrome.com/multidevice/webview/overview.You can see how Chromium displays web pages herehttps://www.chromium.org/developers/design-documents/displaying-a-web-page-in-chromeTo reiterate, Ionic Framework is a library of UI Components. They are built using HTML, CSS & JavaScript. As we have seen, they are highly customizable based on the needs of your app. They can also be themed globally.The component adapts to the platform (Android/ iOS) it is running on. In Apple devices, it is iOS Design Language and on Android, it is Material Design. You can read about the iOS Design here https://developer.apple.com/design/human-interface-guidelines/ and about Material Design here https://material.io/design/The overall structure of the Ionic app follows a Cordova file structure.The web app here is an Ionic web app.The application is implemented as a web page in a local file, index.html. This HTML references all the CSS, JSS, images, and all the resources required for the app to run, including the libraries for Angular. The app is executed in a webView within a native application wrapperThe container has a crucial file called config.xml. This contains information about the app and parameters to control how the application works. The structure of the Config.xml (You can look up all the details here, https://cordova.apache.org/docs/en/latest/config_ref/index.html.) is governed by the W3C standard for packaged web apps. You can see the standard here,. https://www.w3.org/TR/widgets/The root element of the config,xml is “widget” and its attributes are described here https://cordova.apache.org/docs/en/latest/config_ref/index.html#widget The web app, in this case, is an Angular web app that can contain Ionic components and native features that Cordova provides.The root folder contains the files.APP SUPPORT FILESPURPOSEapp/ Contains the component files in which your application logic and data are defined.assets/ Contains image and other asset files to be copied as-is when you build your application.environments/ Contains build configuration options for particular target environments. By default, there is an unnamed standard development environment and a production ("prod") environment. You can define additional target environment configurations.favicon.ico An icon to use for this application in the bookmark bar.index.html The main HTML page that is served when someone visits your site. The CLI automatically adds all JavaScript and CSS files when building your app, so you typically don't need to add any <script> or<link> tags here manually.main.ts The main entry point for your application. Compiles the application with the JIT compiler and bootstraps the application's root module (AppModule) to run in the browser. You can also use the AOT compiler without changing any code by appending the --aot flag to the CLI build and serve commands.polyfills.ts Provides polyfill scripts for browser support.styles.sass Lists CSS files that supply styles for a project. The extension reflects the style preprocessor you have configured for the project.test.ts The main entry point for your unit tests, with some Angular-specific configuration. You don't typically need to edit this file.(https://angular.io/guide/file-structure)The contents of the src folder are:SRC/APP/ FILESPURPOSEapp/app.component.ts Defines the logic for the app's root component, named AppComponent. The view associated with this root component becomes the root of the view hierarchy as you add components and services to your application.app/app.component.html Defines the HTML template associated with the root AppComponent.app/app.component.css Defines the base CSS stylesheet for the root AppComponent.app/app.component.spec.ts Defines a unit test for the root AppComponent.app/app.module.ts Defines the root module, named AppModule, that tells Angular how to assemble the application. Initially declares only the AppComponent. As you add more components to the app, they must be declared here.(https://angular.io/guide/file-structure)We have already seen components, modules and services and how they are implemented. With this background, we are well poised to take a look at how Cordova builds out an Android app out of the web app that we build.Till now we have seen how to build an end to end Ionic app with web and native features. We have also seen it run on an emulator and Android device. We have seen the structure of the Cordova and Angular app. We will now see how Cordova builds the Android app and how to publish the app into the app store.Prerequisites for building androidCordova requires Android SDK to be installed before you begin. Android SDK is the set of tools available to an android developer to build Android apps.Different versions of the Android SDK can be installed along with the Android Studio. Since Android is built on Java and Cordova uses Gradle to build Java. You first need to install Java and Gradle. A typical Java app uses multiple dependencies provided by different vendors. These are downloaded and packaged into the final app by Gradle.Step 1: You can install Java by following instructions.Step 2: You will need to set up the JAVA_HOME environment Variable. You can do so by following instructions here https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#setting-environment-variables Step 3: After installing Java, you can then install Gradle by following instructions here: https://gradle.org/install/Step 4: You are now all set to install android studio from https://developer.android.com/studio/index.html Step 5: You will now need to make sure you have the right version of the Android SDK as per your choice of the target device.You can do this using the SDK managerThe clock on the search icon on the top rightType SDK ManagerClick on SDK ManagerAnd install the desired version.You can look up the compatibility between Android versions and Cordova versions here:https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#requirements-and-supportStep 6: Set the Environment Variable, ANDROID_HOME to the path of your Android SDK and include tools, tools/bin, and platform-tools folders to your pathSetting up emulatorsSearch for AVD Manager in Android StudioAdd virtual devices for the version of API that you have set up in Android studio by clicking Create Virtual DeviceBuilding for AndroidFirst, add the android platform to the projectYou can run the Ionic app in the emulator usingAnd you can build the APK for debug usingThis will generate an APK file in the path :You will have to enable developer mode and USB debugging on your Android device in order to debug this app,This apk can be installed on an Android phone. Once the app is opened on the Android device you can view the console and debug it like a web app using chrome://inspectOn clicking “Inspect”This can be done with the emulator as well.Signing an app You can now build the app for production using the keyword --prodThis will generate an unsigned apk. You will now have to digitally sign the apk before it can be released into the Play Store. To do so, you will have to first generate a Keystore. A Java Keystore is a container for authorization certificates or public key certificates and is often used by Java-based applications for encryption, authentication, and serving over HTTPS.You can generate it with a key tool which comes with JDKkeytool-genkey-v-keystoremy-release-key.jks-keyalgRSA-keysize 2048 -validity 10000 -aliasmy-aliasYou will be asked to key in info as soon as you hit enter. Make sure you remember the password you enter here.You now have the Keystore with which you can sign the apk. A good practice would be to move both the APK and the Keystore into one folderUse the following command to sign the APKjarsigner-verbose-sigalgSHA1withRSA-digestalgSHA1-keystoremy-release-key.jksapp-release-unsigned.apkmy-aliasUse the Zip align tool within /path/to/Android/sdk/build-tools/VERSION/zipalign to optimize and rename the APK to your desired nameYou can now distribute the signed APK through the app Store.Publishing in the Play StoreOpen the developer console https://play.google.com/apps/publish/signupIf you have not already, pay the registration feeOnce you have paid, fill in your developer profileClick on publish an Android appFill in the details for creating the applicationFill in the store listing detailsClick on app releases. You will see that the store allows various levels of release starting with internal testing to the closed alpha. Open beta and production. In this case, we are using the beta track.You can then click on create releaseClick on allow “Google to manage app signing:”, itRead and accept terms of serviceUpload your Signed APKGive your release name and “Whats new”Click saveFill in the details in-store listing, content rating, app content and pricing & distribution.And click on “publish”.In the store listing remember to put a privacy policy if you are using the camera, reading contacts, phone state.Make sure you update the version no. in config.xml each time you upload a new file.If you face any error in the version of android make sure you add this to config.xmlSummaryIn this section, we explored the structure of an Ionic app, understood the structure of a Cordova and Angular app and gained insight on how the app is built into an Android app. We also saw how an APK file can be built and debugged on a device or an emulator. We finally saw how an APK can be signed before it can be put in the Play Store. We finally saw how the app can be uploaded intoPlay Store.
logo

Ionic Tutorial

Building & Publishing for Android

In the previous chapters, we have viewed apps on the browser, device and emulator.

But, we have not gone into the finer detail of what happens inside the app. A quick look at the Ionic architecture will give an understanding of what goes on under the hood.

Ionic apps are built using web technologies - HTML, CSS & JavaScript. They are rendered in WEB VIEWS which are full-screen and full-powered web browsers.

These browsers provide HTML 5 APIs to be able to access device hardware like camera, GPS, etc. You can read up on HTML 5 APIs here, https://whatwebcando.today.

In Ionic, these APIs are accessed through a bridge layer.

bridge layer

The Android web view is based on the chromium-browser. You can read about the Android Web View here, https://developer.chrome.com/multidevice/webview/overview.

You can see how Chromium displays web pages here

https://www.chromium.org/developers/design-documents/displaying-a-web-page-in-chrome

To reiterate, Ionic Framework is a library of UI Components. They are built using HTML, CSS & JavaScript. As we have seen, they are highly customizable based on the needs of your app. They can also be themed globally.

The component adapts to the platform (Android/ iOS) it is running on. In Apple devices, it is iOS Design Language and on Android, it is Material Design. You can read about the iOS Design here 

https://developer.apple.com/design/human-interface-guidelines/ and about Material Design here https://material.io/design/

The overall structure of the Ionic app follows a Cordova file structure.

Ionic app follows a Cordova file structure

The web app here is an Ionic web app.

The application is implemented as a web page in a local file, index.html. This HTML references all the CSS, JSS, images, and all the resources required for the app to run, including the libraries for Angular. The app is executed in a webView within a native application wrapper

The container has a crucial file called config.xml. This contains information about the app and parameters to control how the application works. The structure of the Config.xml (You can look up all the details here, https://cordova.apache.org/docs/en/latest/config_ref/index.html.) is governed by the W3C standard for packaged web apps. You can see the standard here,. https://www.w3.org/TR/widgets/

The root element of the config,xml is “widget” and its attributes are described here https://cordova.apache.org/docs/en/latest/config_ref/index.html#widget 

The web app, in this case, is an Angular web app that can contain Ionic components and native features that Cordova provides.

The root folder contains the files.

APP SUPPORT FILESPURPOSE
app/ Contains the component files in which your application logic and data are defined.
assets/ Contains image and other asset files to be copied as-is when you build your application.
environments/ Contains build configuration options for particular target environments. By default, there is an unnamed standard development environment and a production ("prod") environment. You can define additional target environment configurations.
favicon.ico An icon to use for this application in the bookmark bar.
index.html The main HTML page that is served when someone visits your site. The CLI automatically adds all JavaScript and CSS files when building your app, so you typically don't need to add any <script> or<link> tags here manually.
main.ts The main entry point for your application. Compiles the application with the JIT compiler and bootstraps the application's root module (AppModule) to run in the browser. You can also use the AOT compiler without changing any code by appending the --aot flag to the CLI build and serve commands.
polyfills.ts Provides polyfill scripts for browser support.
styles.sass Lists CSS files that supply styles for a project. The extension reflects the style preprocessor you have configured for the project.
test.ts The main entry point for your unit tests, with some Angular-specific configuration. You don't typically need to edit this file.

(https://angular.io/guide/file-structure)

The contents of the src folder are:

SRC/APP/ FILESPURPOSE
app/app.component.ts Defines the logic for the app's root component, named AppComponent. The view associated with this root component becomes the root of the view hierarchy as you add components and services to your application.
app/app.component.html Defines the HTML template associated with the root AppComponent.
app/app.component.css Defines the base CSS stylesheet for the root AppComponent.
app/app.component.spec.ts Defines a unit test for the root AppComponent.
app/app.module.ts Defines the root module, named AppModule, that tells Angular how to assemble the application. Initially declares only the AppComponent. As you add more components to the app, they must be declared here.

(https://angular.io/guide/file-structure)

We have already seen components, modules and services and how they are implemented. With this background, we are well poised to take a look at how Cordova builds out an Android app out of the web app that we build.

Till now we have seen how to build an end to end Ionic app with web and native features. We have also seen it run on an emulator and Android device. We have seen the structure of the Cordova and Angular app. We will now see how Cordova builds the Android app and how to publish the app into the app store.

Prerequisites for building android

Cordova requires Android SDK to be installed before you begin. Android SDK is the set of tools available to an android developer to build Android apps.

Different versions of the Android SDK can be installed along with the Android Studio. Since Android is built on Java and Cordova uses Gradle to build Java. You first need to install Java and Gradle. A typical Java app uses multiple dependencies provided by different vendors. These are downloaded and packaged into the final app by Gradle.

Step 1: You can install Java by following instructions.

Step 2: You will need to set up the JAVA_HOME environment Variable. You can do so by following instructions here https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#setting-environment-variables 

Step 3: After installing Java, you can then install Gradle by following instructions here: https://gradle.org/install/

Step 4: You are now all set to install android studio from https://developer.android.com/studio/index.html 

Step 5: You will now need to make sure you have the right version of the Android SDK as per your choice of the target device.

You can do this using the SDK manager

The clock on the search icon on the top right

Type SDK Manager

Click on SDK Manager

And install the desired version.

You can look up the compatibility between Android versions and Cordova versions here:

https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#requirements-and-support

Step 6: Set the Environment Variable, ANDROID_HOME to the path of your Android SDK and include tools, tools/bin, and platform-tools folders to your path

Setting up emulators

Search for AVD Manager in Android Studio

Add virtual devices for the version of API that you have set up in Android studio by clicking Create Virtual Device

Building for Android

First, add the android platform to the project

You can run the Ionic app in the emulator using

And you can build the APK for debug using

This will generate an APK file in the path :

You will have to enable developer mode and USB debugging on your Android device in order to debug this app,

This apk can be installed on an Android phone. Once the app is opened on the Android device you can view the console and debug it like a web app using chrome://inspect

On clicking “Inspect”

This can be done with the emulator as well.

Signing an app 

You can now build the app for production using the keyword --prod

This will generate an unsigned apk. You will now have to digitally sign the apk before it can be released into the Play Store. To do so, you will have to first generate a Keystore. A Java Keystore is a container for authorization certificates or public key certificates and is often used by Java-based applications for encryption, authentication, and serving over HTTPS.

You can generate it with a key tool which comes with JDK

keytool-genkey-v-keystoremy-release-key.jks-keyalgRSA-keysize 2048 -validity 10000 -aliasmy-alias

You will be asked to key in info as soon as you hit enter. Make sure you remember the password you enter here.

You now have the Keystore with which you can sign the apk. A good practice would be to move both the APK and the Keystore into one folder

Use the following command to sign the APK

jarsigner-verbose-sigalgSHA1withRSA-digestalgSHA1-keystoremy-release-key.jksapp-release-unsigned.apkmy-alias

Use the Zip align tool within /path/to/Android/sdk/build-tools/VERSION/zipalign to optimize and rename the APK to your desired name

You can now distribute the signed APK through the app Store.

Publishing in the Play Store

Open the developer console https://play.google.com/apps/publish/signup

If you have not already, pay the registration fee

Once you have paid, fill in your developer profile

Click on publish an Android app

Fill in the details for creating the application

Fill in the store listing details

Click on app releases. You will see that the store allows various levels of release starting with internal testing to the closed alpha. Open beta and production. In this case, we are using the beta track.

You can then click on create release

Click on allow “Google to manage app signing:”, it

Read and accept terms of service

Upload your Signed APK

Give your release name and “Whats new”

Click save

Fill in the details in-store listing, content rating, app content and pricing & distribution.

And click on “publish”.

In the store listing remember to put a privacy policy if you are using the camera, reading contacts, phone state.

Make sure you update the version no. in config.xml each time you upload a new file.

If you face any error in the version of android make sure you add this to config.xml

Summary

In this section, we explored the structure of an Ionic app, understood the structure of a Cordova and Angular app and gained insight on how the app is built into an Android app. We also saw how an APK file can be built and debugged on a device or an emulator. We finally saw how an APK can be signed before it can be put in the Play Store. We finally saw how the app can be uploaded intoPlay Store.

Leave a Reply

Your email address will not be published. Required fields are marked *