top

Search

Ionic Tutorial

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 studioType AVD and click on AVD ManagerLaunch the AVD managerYou 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 emulatorExample 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 pluginYou 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 constructorLaunching the browser is as simple as it is below.In the htmlClicking the button launches the browserIn 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.FlashlightThis 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 ngModuleIn 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 runAnd 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. CameraAmong 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 InstallationIn ngModuleIn the componentYou 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 launchedOn clicking the image the base64 string is returned and stored in the variable sImg which can be displayed as below:Open picture from GalleryYou 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. PHOTOLIBRARYCallNumberThis is used to directly launch the dialer from the app First, install the pluginImport and add as a provider in the ngModuleInject into the componentWrite the methodCall from HTMLAccessing Phone ContactsThis can be used to access phone contacts InstallProvider in ngModuleInject into componentMethod to pick the contactOn clicking the button, the phone contacts will open up. On selecting one, the selected contact will be displayed.ClipboardYou can access the phone clipboard to copy, paste and clear.  InstallationInclude as provider in ngModuleInject into component and write the methodWrite the methodScreenshotThis is used to take a screenshot of the current screen InstallationProvider in ngModuleInject in component and create MethodCreate button and display in htmlNetworkThis can be used to check network status and carry out offline activity. InstallationAdd as a provider to ngModuleInject into componentWrite the method to check if network is onWe will look at this in detail when we look at reactive programming Native AudioThis is used to play audio files. InstallationAdd as a provider in ngModuleInject as a service in the componentInclude the audio file in assetsUse a constant to let the component know the file locationLoad the file in the component’s constructorNow you can start and stop playing the fileBarcode ScannerBarcodes 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/ computerInstallationImport as a serviceComponentHTMLFile ChooserThis allows you to access the phone file system and returns a URIInclude as a service in ngModuleIn the controllerYou 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 ComponentThis 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. 
logo

Ionic Tutorial

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 and write the method

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. 

Leave a Reply

Your email address will not be published. Required fields are marked *