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://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.
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 FILES | PURPOSE |
|---|---|
| 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/ FILES | PURPOSE |
|---|---|
| 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:
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
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.
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 *