Welcome to Multiplatform Mobile App Development with Web Technologies: Ionic 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

170 ratings

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova

170 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

Hybrid Mobile App Development Frameworks: An Introduction

This module introduces you to hybrid mobile application development. You will learn about the Ionic framework and explore some of the features of the Ionic framework to implement an Ionic app based on the Angular application that was implemented in the previous course on Angular.

Welcome to Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova13:36

How to Use the Learning Resources10:03

Meet the Instructors

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

Welcome to Multiplatform Mobile Application Development

with Web Technologies: Ionic and Cordova.

I am glad you decided to join us in this course to learn about how to use Ionic and

Cordova to develop hybrid mobile applications

targeting both the Android and iOS platforms.

This course is part of

the five-course specialization on

full stack web and hybrid mobile applications developments.

We are concentrating on the Angular ecosystem as part of this course and

also the NodeJS ecosystem as part of this specialization.

Let me give you a quick overview of

this course and the topics that you will encounter as part of this course.

Before you embark on this course,

let me set up the context for this course and the background

that I expect you to possess before you proceed on with this course.

First and foremost, of course,

you should have a good working knowledge of HTML, CSS and JavaScript.

Without this, this course is not going to be an easy course for you.

Also, since this course is part of the Angular ecosystem,

I expect you to know Angular,

especially the new version of Angular, not AngularJS.

Also, we will be using Typescript as

the language for developing the publications in this course.

So I would expect you to have sufficient knowledge of Typescript.

If you have taken the previous course of this specialization,

which concentrates on front end JavaScript frameworks Angular,

then you have acquired

sufficient background to be able to proceed ahead with this course.

If you have not taken the previous course,

I would strongly urge you to complete that course

before you proceed ahead with this particular course.

Or alternatively, you should have learnt enough about Angular,

especially Angular 4 onwards and also have

sufficient working knowledge of Typescript

before you can proceed ahead with this of course.

In this context, let me also clarify

how I view this course as part of web design and development.

When you ask me to clarify about web design and development,

I view web design and development as consisting of two parts;

one is the design aspect of web design and development,

which concentrates more on user interface or user experience design,

visual design, prototyping and

the visual elements of designing

your application including color, graphics and animation.

Now, this is one aspect of web design and development - or even,

for that matter, mobile application design and development.

The other side of the story is the actual technologies that you will be using

to realize a design that - that you have completed earlier.

So this particular specialization is concentrating more on the development,

building and deployment of applications,

be it front end Web UI framework-based applications like using

Bootstrap 4 or JavaScript frameworks using

Angular or hybrid mobile frameworks using Ionic,

Cordova and NativeScript and back end frameworks like NodeJS-based frameworks,

Express and MongoDB for storing data.

So we are looking at developing the skills that enable us to take

an existing design and translate it into a working application.

So the primary concentration of this specialization is on acquiring

the coding skills that enable us to

implement a web application or a hybrid mobile application.

If you are thinking in terms of web design or mobile design,

then this specialization is not the right one for you.

Instead, we are looking at developing hard skills for

doing coding and deployment of mobile applications.

Of course, the other question that will arise in your mind is what exactly is

full stack web development and

how does this course fit into the overall scheme of things?

Now, this particular course is part of the node and the Angular ecosystem and hence,

in the specialization, we have covered Bootstrap 4 and we have covered

Angular in the first two courses of the specialization.

In this course, we are looking at the Ionic framework and Cordova.

As you wold understand,

the Ionic framework is based on Angular and hence,

forms part of the Angular ecosystem for developing hybrid mobile applications.

In the next course of the specialization,

we will look at NativeScript and we will use

Angular as part of the NativeScript development.

So that's the reason why I categorize this set of courses as part

of the Angular ecosystem and the larger NodeJS ecosystem.

We are still concentrating on the front end in this course.

We are looking at developing the mobile interface for our applications using the HTML,

CSS and JavaScript technologies.

The last course of the specialization looks at the server side support using

NodeJS ecosystem and Express and data storage support using MongoDB.

To give you a quick overview of the course,

this course, as I mentioned,

concentrates on the Ionic framework.

As you would understand in this course,

the Ionic framework is based upon Angular and hence,

knowledge of Angular is essential to understand how an Ionic application is developed.

Also, to package our Ionic application for deployment onto mobile platforms,

we will make use of Cordova.

And this is where to access the native capabilities of mobile devices,

we will make use of the Cordova plugins together with

the Ionic native wrappers that are built around the Cordova plugins that

enable us to access the native features of

the mobile platforms from our Ionic application using Angular.

This course itself is organized into four modules,

each module typically corresponding to one week of work.

Let me emphasize to you that you do not need

to be pressured by the deadlines of this course.

Please take sufficient time to understand every single step along the way.

Should you need additional time than the four weeks that is typical for this course,

please feel free to move to the next session of this course.

All the work that you have done in one session will be

automatically carried over to the next session of the course.

So some of you may require more than four weeks to complete the work.

Some of you may be quick enough to complete the work within

the four weeks time frame that is given for this course.

But in any case,

you should not be under any time pressure to finish

the course within the deadlines that are specified for this course.

Please feel free to take your time to understand the concepts and understand

Ionic and the Cordova framework before you complete this course.

The very first week of this course,

we'll introduce you to hybrid

mobile application frameworks and Ionic framework in particular.

So we will look at what is meant by

full stack web development - a quick introduction to full stack web development.

Then we'll look at setting up your computer for developing in the NodeJS ecosystem.

We'll briefly review Git and Node.

If you have done this as part of the previous courses of the specialization,

then you can skip this section and move on

to the hybrid mobile application development overview,

where we will introduce you to the general concept of

hybrid mobile application development and then

introduce you to Ionic framework in particular.

So we'll also look at how Ionic leverages Angular

for supporting the development of hybrid mobile applications.

And finally, look at Ionic navigation.

How does Ionic support typical patterns of

mobile application navigation in

our mobile application that we will be developing as part of this course?

That will take you all the way to the very first assignment of this.

The second module of this course concentrates on Ionic's components,

all the components that are based around providing you with an easy way of implementing

various features within your Ionic application and also designing

the views of your Ionic application or the pages of your Ionic application.

So we will look at how we can use things like floating action buttons;

we'll look at how we employ Ionic lists,

especially the advanced features of Ionic lists that are

well-suited for mobile experiences;

and also, we'll look at Ionic forms and

modals and how forms can be supported in an Ionic application.

We'll look at how you can deliver information to users either through alerts,

toasts, popovers, action sheets and also loading messages.

That should take you all the way to the second assignment of this.

The current module concentrates more on how you can

design your Ionic application to automatically adapt to larger screens.

The fact that you have more screen real estate on large devices

like tablets makes it more important to be

able to adapt your application seamlessly to

the larger screen real estate available on tablets and large screen devices.

And also, we'll look at how you will deploy your application to

a real mobile platform like an Android or an iOS platform by

packaging your application using the features that are provided by

Ionic and also the Android Studio and Xcode.

So in this module,

we'll look at how we adapt to larger screens.

We will also look at how we can leverage storage for

persisting data within your Ionic application.

We'll briefly review installing the Android and iOS SDKs and the platforms on

your computer and then using them for

building and deploying your Ionic application to mobile devices.

We'll look at how you'll add the platforms into Ionic and leverage

the support of Cordova to package your application for deployment to mobile devices.

And this should take you all the way to the third assignment in this course.

The final module concentrates on how you

leverage the native features of the mobile platforms,

be it Android or iOS.

These native features are packaged into Cordova plugins

that are then surrounded or wrapped in Ionic Native plugins

and that enables us to make use of them within our Ionic application using a promise or

an observable-based interface that makes it easy for us

to leverage these native features within our Ionic application.

So we'll look at how Ionic Native enables us

to leverage the native features of our mobile devices.

We'll look at, for example,

how they can use their local notification support available within

our native platform and how they can deliver notifications to the user.

We'll look at how we can examine the network status and take action,

based upon connecting and disconnecting our device to the network and dealing with

situations where we lose access to the internet within our Ionic application.

And we'll look at how we can leverage sending

e-mails from our Ionic application using the native capabilities of our mobile device.

And looking at how we can leverage

the camera support using the Cordova Camera plugin and also the Ionic Native wrapper.

This should take us all the way to the final assignment.

I hope you have fun going through this course and will learn

various aspects of Ionic as you go through this course. Have fun.

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