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.
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.
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:
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
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
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.
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
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
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
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
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
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 *