Introduction to Ionic Native

Loading...

From the course by The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova

156 ratings

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova

156 ratings

Course 3 of 5 in the Specialization Full Stack Web and Multiplatform Mobile App Development

This course focuses on developing multiplatform mobile applications using the Web technologies (HTML5, CSS and Javascript). In particular we make use of the Cordova hybrid application framework to develop and target multiple mobile platforms with a single codebase. We make use of the Ionic framework (Ionic Ver 3.x), one of the most popular mobile application frameworks, that is built with mobile-optimized HTML5 and CSS based components and Angular. You will learn about UI development with Ionic and then using Cordova's modules to access the native mobile platform's capabilities from Javascript. You should have already completed the Bootstrap 4 and the Angular courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your HTML5, CSS, Javascript and Angular skills, and (c) Use various features of the Ionic framework to build hybrid mobile applications

From the lesson

Accessing Native Capabilities of Devices: Cordova and Ionic Native

In this module you will explore Cordova and the Ionic Native wrappers that enable you to access the native capabilities of the mobile devices. You will use a few plugins in order to understand the general concepts and the patterns for using these plugins within your Ionic application

Introduction to Ionic Native7:51

Exercise (Video): Customizing the SplashScreen16:34

Meet the Instructors

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

[MUSIC]

In the previous module, I introduced you briefly to Cordova.

And we saw how Cordova forms the core foundation on which Ionic is built.

And Cordova enables us to access the underlying native platforms capabilities.

And exports the JavaScript API that our Ionic application can leverage.

Now in the process of doing so,

we need to take the help of Cordova plugins.

I'll talk about the Cordova plugins a little more in the next slide.

And correspondingly,

Ionic provides wrappers around the Cordova plugins using the Ionic Native.

So let's talk about the role of these two in a little more detail.

The way I visualize the need for

the plugins and the role that they play in the overall scheme of

things is that you have Cordova library, which

basically ramps the underlying native platform and exports the JavaScript API.

Of course, the Cordova library provides the core library.

But then, the Cordova library takes advantage of the various

Cordova plugins that are developed independent of the core library.

These plugins give you access to individual native capabilities.

So, for example, you have a plugin that enables you to access the camera.

You have a plugin that enables you to access the local notifications.

You have another plugin that enables you to access the image gallery.

You have a different plugin that enables you to access the storage, and so on.

So each of these plugins basically fill in whatever

is required to wrap the native functionality.

And make it available through Cordova for

applications that are built on top of Cordova.

So these plugins, as you see in this picture here, represented by

the plus signs that are residing between the Cordova and the native platform.

Enable the bridge between Cordova and the native platform.

Now, as we have learned, Ionic is built on top of Cordova.

So Cordova wraps Ionic and then enables that to run on the native platform.

And Ionic leverages the features and facilities that are provided by

the Cordova library in order to be able to run on the native platform.

Now, as we have learned,

Ionic leverages Angular for its development.

And so when you have the Cordova plugins available for us,

so we want to be able to leverage the JavaScript API that

the Cordova plugins export within our Ionic application.

Since Ionic uses Angular, and within Angular,

you often use promises and observables as the way for providing the interfaces.

So the role that Ionic plays in the scheme of things is that

the Ionic provides wrappers around the Cordova plugins.

And then on the other side exports a callback

interface that supports promises or observables.

And that makes it easy for us to use these plugins within our Ionic application.

To summarize, what Ionic Native does is it provides

a TypeScript wrapper around the Cordova or the Phonegap plugins.

And this way, it eases adding the native functionality to your Ionic application.

And provides an interface that is more easier to use within your Angular

application.

It wraps the plugin callbacks in a promise or an observable.

So that when you make use of them within your Ionic application in

your Angular code, it becomes more easier.

Because Angular is already built to use promises and observables.

Now, recall that when you need to access the underlying native platform that

it's going to take some time for you to be able to obtain the results.

And so waiting for

the results means that you need to add a callback based interface.

And this is where the promise and observable based callbacks enable us to

easily handle the waiting for the native functionality

to be able to return whatever is required for our Ionic application.

So, also, the Ionic Native wrappers ensures that any

native events that take place will trigger the change detection in Angular.

Which will in turn detect the changes and then cause any updates that are required

within your Angular application, and consequently, your Ionic application.

Hence, the reason for using Ionic Native in our Ionic applications.

How do we use the Cordova plugins and

Ionic Native plugins within our application?

There are a set of steps that you will often see me doing in the exercises.

First and foremost, we will, of course,

acquire the Cordova plugin or the Phonegap plugin that we want to make use of.

Because we are trying to access some native functionality.

And then we will install that Cordova or Phonegap plugin by calling ionic

cordova plugin add, and then specifying the plugin name.

And then once the Cordova plugin is installed,

then we'll install the corresponding Ionic Native plugin for that Cordova plugin.

The Ionic Native plugin is an NPM module.

So we'll say, npm install and the specific Ionic Native plugin.

And once that is done, then you will import the plugin into your AppModule.

And then also make sure that the plugin is added in into

the providers of your ng decorator of your AppModule.

And once that is done, then the last step, of course,

is to identify where you want to make use of the plugin.

The respective page or component or the service or

the provider where you want to make use of plugin.

Within that code, you will then also import the Ionic Native plugin.

And then inject it into the constructor.

And thereafter, make use of the plugin API within your code in your page,

component, service, or the provider.

So as you go through the exercises,

look at the four steps that I'm going to follow in each case.

In order to leverage the Ionic Native plugin and

the corresponding Cordova plugin for

providing access to the native functionality of our device.

[MUSIC]

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play