guide ionic from code to android

Ionic: From code to android

Table of Contents

• Introduction
• Assumptions
• From ionic 4 to Android project
  • Modifications
  • Build
• From Android project to emulated device
• From Android project to real device

Introduction

This page is written to help developers to go from the source code of an ionic application to an android one, with this in mind, topics such as: environment, commands, modifications,…​ are covered.

Assumptions

This document assumes that the reader has already:

• Source code of an ionic 4 application and wants to build it on an android device,

• A working installation of Node.js

• An Ionic CLI installed and up-to-date.

• Android Studio and Android SDK.

From ionic 4 to Android project

When a native application is being dessigned, sometimes, functionalities that uses camera, geolocation, push notification, …​ are requested. To resolve these requests, Capacitor can be used.

In general terms, Capacitor wraps apps made with Ionic (HTML, SCSS, Typescript) into WebViews that can be displayed in native applications (Android, IOS) and allows the developer to access native functionalities like the ones said before.

Installing capacitor is as easy as installing any node module, just a few commands have to be run in a console:

• cd name-of-ionic-4-app

• npm install --save @capacitor/core @capacitor/cli

Then, it is necessary to initialize capacitor with some information: app id, name of the app and the directory where your app is stored. To fill this information, run:

• npx cap init

Modifications

Throughout the development process, usually back-end and front-end are on a local computer, so it’s a common practice to have diferent configuration files for each environment (commonly production and development). Ionic 4 uses an angular.json file to store those configurations and some rules to be applied.

If a back-end is hosted on http://localhost:8081, and that direction is used in every environment, the application built for android will not work because computer and device do not have the same localhost. Fortunately, different configurations can be defined.

Android Studio uses 10.0.0.2 as alias for 127.0.0.1 (computer’s localhost) so adding http//10.0.0.2:8081 in a new environment file and modifying angular.json accordingly, will make possible connect front-end and back-end.

"build": {
...
    "configurations": {
        ...
        "android": {
            "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.android.ts"
                }
            ]
        },
    }
}

Build

Once configured, it is necessary to build the Ionic 4 app using this new configuration:

• ionic build --configuration=android

The next commands copy the build application on a folder named android and open android studio.

• npx cap add android

• npx cap copy

• npx cap open android

From Android project to emulated device

Once Android Studio is opened, follow these steps:

1. Click on "Build" → Make project.

2. Click on "Build" → Make Module 'app' (default name).

3. Click on" Build" → Build Bundle(s) / APK(s) → Build APK(s).

4. Click on run and choose a device.

If there are no devices available, a new one can be created:

1. Click on "Create new device"

2. Select hardware and click "Next". For example: Phone → Nexus 5X.

3. Download a system image.

   1. Click on download.

   2. Wait until the installation finished and then click "Finish".

   3. Click "Next".

4. Verify configuration (default configuration should be enough) and click "Next".

5. Check that the new device is created correctly.

From Android project to real device