Assignment 4 (Requirements): Ionic Native and Cordova

Loading...

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

Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova

157 ratings

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova

157 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

Assignment 4 (Requirements): Ionic Native and Cordova4:46

Meet the Instructors

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

So, here we are at the final assignment in this course.

In this module, we have been exploring

the Cordova plugins and the ionic native wrappers around the Cordova plugins.

Continuing with this theme,

you will explore yet another Cordova plugin called

the call-number plugin to enable your application to be able to call a phone number

directly from within your application using

the phone calling support on your mobile device.

Also, you will be able to configure your application to import a picture

from the photo gallery on your device and use it in the register page.

For this, we will be using the camera plugin to enable this operation.

Let's look at the two tasks in this final assignment.

The first task in this assignment is to be

able to support your application to call a phone number.

So to do that, in the contacts page,

as we have seen in the contacts page,

we have already in booked their email composer by clicking on the email button there.

You also see that we have a call button there.

So when the user clicks on the call button,

your application will be using their built in

phone dialer on your mobile device to be able to initiate a call to the phone number.

Obviously, the phone number that we have

configured within our application is an invalid phone number,

so it won't work.

But at least you saw that when I clicked on the call button,

the phone dialer was invoked and the number for the restaurant was already filled in and

the phone was trying to make a phone call to

the specific number that we have configured there.

That will be the first task in your assignment.

For doing this we will be making use of that call number Cordova plugin that is available

that enables your application to call phone numbers from within your application.

A link to the documentation of

the call number plugin is available in the additional resources.

Please read the documentation to understand how to make use of the call number plugin.

The second task in this assignment is to be able to import a picture from

the device's photo gallery and then make use of it within our register page.

So to do that,

we're going to update our register page as follows.

So when you go to the register page,

you will notice that in addition to the take picture button here,

you will also include a get from library button on the right side.

So when the get from library button is clicked,

then your application will allow you to

get a photo from the photo gallery on your device.

So clicking on the photo gallery we'll be able to click on

a picture and select it and make use of it within our application.

So as you see,

instead of obtaining the picture from the camera,

we are now able to obtain the picture from the photo gallery of

your device and then use it in our register forms here.

So, this is the second task of your assignment.

To do this you're going to be using the camera plugin.

The camera plugin allows you to specify the source as the photo library of

your device and then be able to import the picture from the photo library.

Check the camera plugin's documentation and understand

how to make use of setting the source in that

camera options for your camera plugin to enable that camera plugin to

be able to obtain that image from

the photo gallery and then make use of that picture within your application.

Have fun completing that final assignment of this course.

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