Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova

4.8
114 ratings
26 reviews

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
Globe

100% online course

Start instantly and learn at your own schedule.
Clock

Approx. 18 hours to complete

Suggested: 4 weeks of study, 6-8 hours/week
CommentDots

English

Subtitles: English

Skills you will gain

AngularjsMobile Application Development
Globe

100% online course

Start instantly and learn at your own schedule.
Clock

Approx. 18 hours to complete

Suggested: 4 weeks of study, 6-8 hours/week
CommentDots

English

Subtitles: English

Syllabus - What you will learn from this course

1

Section
Clock
14 hours to complete

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....
SvgReading
19 videos (Total 313 min), 28 readings, 2 quizzes
Video19 videos
How to Use the Learning Resources10m
What is Full-Stack Web Development?6m
Exercise (Video): Setting up Git6m
Exercise (Video): Basic Git Commands18m
Exercise (Video): Online Git Repositories12m
Node.js and NPM3m
Exercise (Video): Setting up Node.js and NPM2m
Exercise (Video): Basics of Node.js and NPM23m
Hybrid Mobile App Development24m
Introduction to the Ionic Framework7m
Exercise (Video): Setting up the Ionic Framework9m
Exercise (Video): Setting up a Server using json-server6m
Ionic and Angular21m
Exercise (Video): Getting Started with your Ionic App23m
Exercise (Video): Ionic and Angular56m
Ionic Navigation19m
Exercise (Video): Ionic Navigation42m
Assignment 1 Requirements (Video): Introduction to Ionic Framework5m
SvgReading28 readings
Welcome to Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova: Additional Resources10m
Full Stack Web Development: The Big Picture: Objectives and Outcomes10m
Full Stack Web Development: Additional Resources10m
Setting up Your Development Environment: Git and Node: Objectives and Outcomes10m
Setting up your Development Environment10m
Exercise (Instructions): Setting up Git10m
Exercise (Instructions): Basic Git Commands10m
Exercise (Instructions): Online Git Repositories10m
Exercise (Instructions): Setting up Node.js and NPM10m
Exercise (Instructions): Basics of Node.js and NPM10m
Setting up your Development Environment: Git and Node: Additional Resources10m
Hybrid Mobile App Development: An Overview: Objectives and Outcomes10m
Exercise (Instructions): Setting up the Ionic Framework10m
Hybrid Mobile App Development: An Overview: Additional Resources10m
Setting up a Simple Server: Objectives and Outcomes10m
Exercise (Instructions): Setting up a Server using json-server10m
Setting up a Simple Server: Additional Resources10m
Ionic and Angular: Objectives and Outcomes10m
Exercise (Instructions): Getting Started with your Ionic App10m
Exercise (Instructions): Ionic and Angular10m
Ionic and Angular: Additional Resources10m
Ionic Navigation: Objectives and Outcomes10m
Exercise (Instructions): Ionic Navigation10m
Ionic Navigation: Additional Resources10m
Assignment 1: Introduction to Ionic Framework: Additional Resources10m
Ideation: Objectives and Outcomes10m
Ideation Report Template10m
Ideation: Additional Resources10m

2

Section
Clock
10 hours to complete

Ionic Components

This module explores the Ionic support for forms. Advanced features of Ionic lists are discussed. In addition all the different methods of overlaying information on the screen like modals, popups, popovers, action sheets, and loading are examined. Ionic support for gestures is also briefly considered....
SvgReading
11 videos (Total 153 min), 18 readings, 2 quizzes
Video11 videos
Exercise (Video): Floating Action Button13m
Exercise (Video): FAB and Favorites13m
Ionic Lists: Advanced Features4m
Exercise (Video): Ionic Lists: Advanced Features37m
Ionic Forms and Modals12m
Exercise (Video): Modal13m
Exercise (Video): Forms16m
Alerts, Toasts, Popovers, ActionSheets and Loading6m
Exercise (Video): Alerts, Toasts and Loading19m
Assignment 2: Ionic Components9m
SvgReading18 readings
Floating Action Buttons: Objectives and Outcomes10m
Exercise (Instructions): Floating Action Button10m
Exercise (Instructions): FAB and Favorites10m
Floating Action Buttons: Additional Resources10m
Ionic Lists: Advanced Features: Objectives and Outcomes10m
Exercise (Instructions): Ionic Lists: Advanced Features10m
Ionic Lists: Advanced Features: Additional Resources10m
Ionic Forms and Modals: Objectives and Outcomes10m
Exercise (Instructions): Modal10m
Exercise (Instructions): Forms10m
Ionic Forms and Modals: Additional Resources10m
Alerts, Popovers, ActionSheets, Loading and Gestures: Objectives and Outcomes10m
Exercise (Instructions): Alerts, Toasts and Loading10m
Alerts, Popovers, ActionSheets, Loading and Gestures: Additional Resources10m
Assignment 2: Ionic Components: Additional Resources10m
UI Design and Prototyping: Objectives and Outcomes10m
UI Design and Prototyping Report Template10m
UI Design and Prototyping: Additional Resources10m

3

Section
Clock
7 hours to complete

Ionic Split Pane, Grid and Storage, and Deploying your App

In this module you will learn about using local storage within your app. You will then learn about configuring your machine for building your app for various platforms, and deploying your app to emulators and devices....
SvgReading
11 videos (Total 127 min), 16 readings, 1 quiz
Video11 videos
Exercise (Video): Ionic Split Pane13m
Exercise (Video): Ionic Grid9m
Ionic Storage6m
Exercise (Video): Ionic Storage27m
Installing Android Studio and Android SDK13m
Installing Xcode on Mac and iOS SDK4m
Introduction to Cordova12m
Exercise (Video): Building and Deploying to Android Emulator10m
Exercise (Video): Building and Deploying to iOS Emulator4m
Assignment 3 Requirements: Grid and Storage4m
SvgReading16 readings
Adapting to Large Screens: Objectives and Outcomes10m
Exercise (Instructions): Ionic Split Pane10m
Exercise (Instructions): Ionic Grid10m
Adapting to Large Screens: Additional Resources10m
Ionic Storage: Objectives and Outcomes10m
Exercise (Instructions): Ionic Storage10m
Ionic Storage: Additional Resources10m
Installing Android and iOS SDK and Platforms: Objectives and Outcomes10m
Installing Android Studio and Android SDK: Ionic and Cordova Guides10m
Installing Xcode on Mac and iOS SDK: Ionic and Cordova Guides10m
Installing Android and iOS SDK and Platforms: Additional Resources10m
Ionic Adding Platforms, Building and Deploying the App: Objectives and Outcomes10m
Exercise (Instructions): Building and Deploying to Android Emulator and Android Device10m
Exercise (Instructions): Building and Deploying to iOS Emulator10m
Ionic Adding Platforms, Building and Deploying the App: Additional Resources10m
Assignment 3: Grid and Storage: Additional Resources10m

4

Section
Clock
10 hours to complete

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...
SvgReading
13 videos (Total 143 min), 20 readings, 2 quizzes
Video13 videos
Exercise (Video): Customizing the SplashScreen16m
Notifying the User3m
Exercise (Video): Notifying the User10m
Social Sharing8m
Exercise (Video): Sending Email9m
Exercise (Video): Social Sharing11m
Using the Camera7m
Exercise (Video): Using the Camera39m
Network Status6m
Exercise (Video): Network Status13m
Assignment 4 (Requirements): Ionic Native and Cordova4m
Conclusions3m
SvgReading20 readings
Introduction to Ionic Native: Objectives and Outcomes10m
Exercise (Instructions): Customizing the SplashScreen10m
Introduction to Ionic Native: Additional Resources10m
Notifying the User: Objectives and Outcomes10m
Exercise (Instructions): Notifying the User10m
Notifying the User: Additional Resources10m
Social Sharing: Objectives and Outcomes10m
Exercise (Instructions): Sending Email10m
Exercise (Instructions): Social Sharing10m
Social Sharing: Additional Resources10m
Using the Camera: Objectives and Outcomes10m
Exercise (Instructions): Using the Camera10m
Using the Camera: Additional Resources10m
Network Status: Objectives and Outcomes10m
Exercise (Instructions): Network Status10m
Network Status: Additional Resources10m
Assignment 4: Ionic Native and Cordova: Additional Resources10m
Conclusions: Additional Resources10m
Project Implementation: Objectives and Outcomes10m
Final Report Template10m
4.8
Briefcase

83%

got a tangible career benefit from this course

Top Reviews

By PMDec 9th 2017

It is the logical step to continue evolving into "full stack development" training! Perfect to discover new areas in IT development and stay up to date.

By EUMar 11th 2018

Great course by a great teacher, I love it. Went learning just make sure to get the correct package version.

Instructor

Avatar

Jogesh K. Muppala

Associate Professor

About The Hong Kong University of Science and Technology

HKUST - A dynamic, international research university, in relentless pursuit of excellence, leading the advance of science and technology, and educating the new generation of front-runners for Asia and the world....

Frequently Asked Questions

  • Once you enroll for a Certificate, you’ll have access to all videos, quizzes, and programming assignments (if applicable). Peer review assignments can only be submitted and reviewed once your session has begun. If you choose to explore the course without purchasing, you may not be able to access certain assignments.

  • If you pay for this course, you will have access to all of the features and content you need to earn a Course Certificate. If you complete the course successfully, your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile. Note that the Course Certificate does not represent official academic credit from the partner institution offering the course.

  • Yes! Coursera provides financial aid to learners who would like to complete a course but cannot afford the course fee. To apply for aid, select "Learn more and apply" in the Financial Aid section below the "Enroll" button. You'll be prompted to complete a simple application; no other paperwork is required.

More questions? Visit the Learner Help Center