guide ionic from code to android - devonfw/devon4ng GitHub Wiki

Table of Contents

Ionic to android

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 application and wants to build it on an android device,

  • A working installation of NodeJS

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

  • Android Studio and Android SDK.

From Ionic to Android project

When a native application is being designed, 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 different configuration files for each environment (commonly production and development). Ionic 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.

Android environment and angular.json 
    "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 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).

Click on make project click on make app

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

  2. Click on run and choose a device.

click on build APK click on running 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.

Create new device Select hardware

  1. Download a system image.

    1. Click on download.

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

    3. Click "Next".

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

Download system image Check configuration

  1. Check that the new device is created correctly.

New created device

From Android project to real device

To test on a real android device, an easy approach to communicate a smartphone (front-end) and computer (back-end) is to configure a WiFi hotspot and connect the computer to it. A guide about this process can be found here.

Once connected, run ipconfig on a console if you are using windows or ifconfig on a Linux machine to get the IP address of your machine’s Wireless LAN adapter WiFi.

Result of `ipconfig` command on Windows 10

This obtained IP must be used instead of "localhost" or "10.0.2.2" at environment.android.ts.

Android environment file server URL

After this configuration, follow the build steps in "From Ionic to Android project" and the first three steps in "From Android project to emulated device".

Send APK to Android through USB

To send the built application to a device, you can connect computer and mobile through USB, but first, it is necessary to unlock developer options.

  1. Open "Settings" and go to "System".

  2. Click on "About".

  3. Click "Build number" seven times to unlock developer options.

Steps to enable developer options: 1, 2, 3

  1. Go to "System" again an then to "Developer options"

  2. Check that the options are "On".

  3. Check that "USB debugging" is activated.

Steps to enable developer options: 4, 5, 6

After this, do the step four in "From Android project to emulated device" and choose the connected smartphone.

Send APK to Android through email

When you build an APK, a dialog gives two options: locate or analyze. If the first one is chosen, Windows file explorer will be opened showing an APK that can be send using email. Download the APK on your phone and click it to install.

Steps to enable developer options: 4, 5, 6

Result

If everything goes correctly, the Ionic application will be ready to be tested.

Application running on a real device

Creative Commons License Agreement
This documentation is licensed under the Creative Commons License (Attribution-NoDerivatives 4.0 International).

⚠️ **GitHub.com Fallback** ⚠️