Ionic Native

This section introduces you to how you can access native components from your mobile device, like camera, flashlight, etc.

Ionic is built on Apache Cordova, which allows your mobile app to access native features. We have seen in previous sections the components that are needed to build an advanced mobile app from scratch. We began with the ABCs of Typescript and Angular and went on to the more advanced UI elements in Ionic.

Having come this far, we still have not seen how to use the camera, phone storage, and other features. This section will deal with that. We will look at how we can use Cordova native plugins to access native features on the mobile phone.

A point to be noted here is that you will need to have Android studio working and you should have configured virtual devices to build and test native features. Compiling might take longer than an “Ionic serve”.

Click on the handles / search icon on the top right toolbar in Android studio

Type AVD and click on AVD Manager

Launch the AVD manager

You can now create a virtual device by clicking on “Create New Virtual Device”.

Click on a device and complete the wizard.

Launch the virtual device and once it opens up, you are all set to develop and test Ionic native components.

You can run:

And the app will launch on the emulator

Example 1: In appbrowser

The as a simple example of a native component, we’ll look at launching a webpage in a native browser within the app. This uses the inAppBrowser Cordova plugin

You first have to install the plugin

You then import it into the ng module as a “provider”

You are now all set to use it in your app. You do it first by importing inAppBrowser and injecting it into the constructor

Launching the browser is as simple as it is below.

In the html

Clicking the button launches the browser

In summary, we install the plugin using npm, add it as a provider in the ngModule, import it into the component and inject it into the service and call the method to launch the browser. All native plugins work in a similar fashion.

Flashlight

This is a simple example of native control over the mobile phone’s hardware from Ionic. You can use the Cordova plugin to turn the flashlight on and off.

As we have already seen, we install the plugin, add it as a provider in a ngModule, inject it into a component and call the method that the plugin provides

In the ngModule

In the component,

In the html,

You will not be able to test the flashlight on the emulator and you will have to build an installable and run it in the device. For this, you can connect your Android device via USB and make sure you enable it for USB debugging by.

On the device, go to Settings > About <device>.
Tap the Build number seven times to make Settings > Developer options available.

Then enable the USB Debugging option.

Once you are done, you can then run

And your app will run on your phone. Click on the button described above and you can see the flashlight turn on and off each time you click.

You will notice a whole Android app being built. We will cover the build process in subsequent chapters. The purpose of this chapter is to introduce native plugins.

Camera

Among the most commonly used native features is the usage of the camera and handling images from the gallery. This is done using the native camera plugin

Installation

In ngModule

In the component

You first setup camera option on quality which impacts the quality of the images. The common options are 10, 20 and 100. The size of the image is also set here. The method getPicture launches the camera. Once the picture is clicked it returns a base64 encoded string as the image.

In this case, the method above is called from the “Take Picture” button. That loads the camera.

The camera is launched

On clicking the image the base64 string is returned and stored in the variable sImg which can be displayed as below:

Open picture from Gallery

You might not always want to load the picture from the camera. It might be in your gallery. You do that by using the camera plugin with a variation as below, with the sourcetype as this.camera.PictureSourceType. PHOTOLIBRARY

CallNumber

This is used to directly launch the dialer from the app

First, install the plugin

Import and add as a provider in the ngModule

Inject into the component

Write the method

Call from HTML

Accessing Phone Contacts

This can be used to access phone contacts

Install

Provider in ngModule

Inject into component

Method to pick the contact

On clicking the button, the phone contacts will open up. On selecting one, the selected contact will be displayed.

Clipboard

You can access the phone clipboard to copy, paste and clear.

Installation

Include as provider in ngModule

Inject into component

Write the method

Screenshot

This is used to take a screenshot of the current screen

Installation

Provider in ngModule

Inject in component and create Method

Create button and display in html

Network

This can be used to check network status and carry out offline activity.

Installation

Add as a provider to ngModule

Inject into component

Write the method to check if network is on

We will look at this in detail when we look at reactive programming

Native Audio

This is used to play audio files.

Installation

Add as a provider in ngModule

Inject as a service in the component

Include the audio file in assets

Use a constant to let the component know the file location

Load the file in the component’s constructor

Now you can start and stop playing the file

Barcode Scanner

Barcodes and QR codes are a simple way of sharing data. We will now store course information in a QR code and scan it using the Ionic app,

You can create a QR code at

https://www.qr-code-generator.com/

We put in the JSON data in the QR code

{"course":"Java", ↵  "faculty":"Josh"}

And it up as an image on your laptop/ computer

Installation

Import as a service

Component

HTML

File Chooser

This allows you to access the phone file system and returns a URI

Include as a service in ngModule

In the controller

You use the FilePath to convert the URI to a path that can be opened and the FileOpener to Open the file.

The plugins for filePath and fileOpener are installed,

Import into the Component

This brings us to the end of this chapter. We have added different native plugins and accessed native features within the mobile. The Ionic documentation lists several paid and free plugins. Most of them are implemented in a similar fashion. It is highly recommended that you try them out.