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.

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://developer.chrome.com/docs/webview

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.

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.

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

The contents of the src folder are:

(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 in 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 and sign in with your Google account.

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:”

Read and accept the terms of service

Upload your Signed APK

Give your release name and “What's 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.