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
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
193 ratings
The Hong Kong University of Science and Technology
193 ratings
Course 3 of 5 in the Specialization Full Stack Web and Multiplatform Mobile App Development
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.
Meet the Instructors
Jogesh K. MuppalaAssociate 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.
