Explore
For Enterprise
Join for Free
Log In

Arts and Humanities
Business
Computer Science
Data Science
Information Technology
Health
Math and Logic
Personal Development
Physical Science and Engineering
Social Sciences
Language Learning
Degrees
Certificates

Explore all of Coursera

Browse
Search
For Enterprise
Log In
Join for Free

Introduction to Ionic Native

Loading...

Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova

The Hong Kong University of Science and Technology

4.7 (252 ratings) | 9.4K Students Enrolled

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

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

Skills You'll Learn

Ionic (Mobile App Framework), Apache Cordova, Angularjs, Mobile Application Development

Reviews

4.7 (252 ratings)

5 stars
201 ratings
4 stars
39 ratings
3 stars
6 ratings
1 star
6 ratings

BC

Feb 05, 2018

Great course! You definitely get your money's worth. Challenging, but informative.

AA

Oct 30, 2017

Best course ever\n\nThanks for that course it help me to make android and ios app

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

Taught By

Jogesh K. Muppala
Associate Professor

Transcript

[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.

© 2019 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play

Coursera
About
Leadership
Careers
Catalog
Certificates
MasterTrack™ Certificates
Degrees
For Enterprise
For Government

Community
Learners
Partners
Developers
Beta Testers
Translators

Connect
Blog
Facebook
LinkedIn
Twitter
Instagram
YouTube
Tech Blog

More
Terms
Privacy
Help
Accessibility
Press
Contact
Directory
Affiliates