About this course: 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
Who is this class for: This course is aimed at students with sufficient knowledge of Web technologies like HTML, CSS and JavaScript. A good working knowledge of JavaScript, especially ES 5 and the Angular framework is strongly recommended.
Created by: The Hong Kong University of Science and Technology
Taught by: Jogesh K. Muppala, Associate Professor
Department of Computer Science and Engineering
| Basic Info |
Course 3 of 5 in the
Full Stack Web and Multiplatform Mobile App Development Specialization.
|
| Commitment | 4 weeks of study, 6-8 hours/week |
| Language | English |
| How To Pass | Pass all graded assignments to complete the course. |
| User Ratings |
Syllabus
WEEK 1
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.
19 videos, 28 readings
- Video: Welcome to Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova
- Video: How to Use the Learning Resources
- Reading: Welcome to Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova: Additional Resources
- Reading: Full Stack Web Development: The Big Picture: Objectives and Outcomes
- Video: What is Full-Stack Web Development?
- Reading: Full Stack Web Development: Additional Resources
- Reading: Setting up Your Development Environment: Git and Node: Objectives and Outcomes
- Reading: Setting up your Development Environment
- Video: Exercise (Video): Setting up Git
- Reading: Exercise (Instructions): Setting up Git
- Video: Exercise (Video): Basic Git Commands
- Reading: Exercise (Instructions): Basic Git Commands
- Video: Exercise (Video): Online Git Repositories
- Reading: Exercise (Instructions): Online Git Repositories
- Video: Node.js and NPM
- Video: Exercise (Video): Setting up Node.js and NPM
- Reading: Exercise (Instructions): Setting up Node.js and NPM
- Video: Exercise (Video): Basics of Node.js and NPM
- Reading: Exercise (Instructions): Basics of Node.js and NPM
- Reading: Setting up your Development Environment: Git and Node: Additional Resources
- Reading: Hybrid Mobile App Development: An Overview: Objectives and Outcomes
- Video: Hybrid Mobile App Development
- Video: Introduction to the Ionic Framework
- Video: Exercise (Video): Setting up the Ionic Framework
- Reading: Exercise (Instructions): Setting up the Ionic Framework
- Reading: Hybrid Mobile App Development: An Overview: Additional Resources
- Reading: Setting up a Simple Server: Objectives and Outcomes
- Video: Exercise (Video): Setting up a Server using json-server
- Reading: Exercise (Instructions): Setting up a Server using json-server
- Reading: Setting up a Simple Server: Additional Resources
- Reading: Ionic and Angular: Objectives and Outcomes
- Video: Ionic and Angular
- Video: Exercise (Video): Getting Started with your Ionic App
- Reading: Exercise (Instructions): Getting Started with your Ionic App
- Video: Exercise (Video): Ionic and Angular
- Reading: Exercise (Instructions): Ionic and Angular
- Reading: Ionic and Angular: Additional Resources
- Reading: Ionic Navigation: Objectives and Outcomes
- Video: Ionic Navigation
- Video: Exercise (Video): Ionic Navigation
- Reading: Exercise (Instructions): Ionic Navigation
- Reading: Ionic Navigation: Additional Resources
- Video: Assignment 1 Requirements (Video): Introduction to Ionic Framework
- Reading: Assignment 1: Introduction to Ionic Framework: Additional Resources
- Reading: Ideation: Objectives and Outcomes
- Reading: Ideation Report Template
- Reading: Ideation: Additional Resources
Graded: Introduction to Ionic Framework
Graded: Ideation
WEEK 2
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.
11 videos, 18 readings
- Reading: Floating Action Buttons: Objectives and Outcomes
- Video: Floating Action Buttons
- Video: Exercise (Video): Floating Action Button
- Reading: Exercise (Instructions): Floating Action Button
- Video: Exercise (Video): FAB and Favorites
- Reading: Exercise (Instructions): FAB and Favorites
- Reading: Floating Action Buttons: Additional Resources
- Reading: Ionic Lists: Advanced Features: Objectives and Outcomes
- Video: Ionic Lists: Advanced Features
- Video: Exercise (Video): Ionic Lists: Advanced Features
- Reading: Exercise (Instructions): Ionic Lists: Advanced Features
- Reading: Ionic Lists: Advanced Features: Additional Resources
- Reading: Ionic Forms and Modals: Objectives and Outcomes
- Video: Ionic Forms and Modals
- Video: Exercise (Video): Modal
- Reading: Exercise (Instructions): Modal
- Video: Exercise (Video): Forms
- Reading: Exercise (Instructions): Forms
- Reading: Ionic Forms and Modals: Additional Resources
- Reading: Alerts, Popovers, ActionSheets, Loading and Gestures: Objectives and Outcomes
- Video: Alerts, Toasts, Popovers, ActionSheets and Loading
- Video: Exercise (Video): Alerts, Toasts and Loading
- Reading: Exercise (Instructions): Alerts, Toasts and Loading
- Reading: Alerts, Popovers, ActionSheets, Loading and Gestures: Additional Resources
- Video: Assignment 2: Ionic Components
- Reading: Assignment 2: Ionic Components: Additional Resources
- Reading: UI Design and Prototyping: Objectives and Outcomes
- Reading: UI Design and Prototyping Report Template
- Reading: UI Design and Prototyping: Additional Resources
Graded: Ionic Components
Graded: UI Design and Prototyping
WEEK 3
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.
11 videos, 16 readings
- Reading: Adapting to Large Screens: Objectives and Outcomes
- Video: Adapting to Large Screens
- Video: Exercise (Video): Ionic Split Pane
- Reading: Exercise (Instructions): Ionic Split Pane
- Video: Exercise (Video): Ionic Grid
- Reading: Exercise (Instructions): Ionic Grid
- Reading: Adapting to Large Screens: Additional Resources
- Reading: Ionic Storage: Objectives and Outcomes
- Video: Ionic Storage
- Video: Exercise (Video): Ionic Storage
- Reading: Exercise (Instructions): Ionic Storage
- Reading: Ionic Storage: Additional Resources
- Reading: Installing Android and iOS SDK and Platforms: Objectives and Outcomes
- Video: Installing Android Studio and Android SDK
- Reading: Installing Android Studio and Android SDK: Ionic and Cordova Guides
- Video: Installing Xcode on Mac and iOS SDK
- Reading: Installing Xcode on Mac and iOS SDK: Ionic and Cordova Guides
- Reading: Installing Android and iOS SDK and Platforms: Additional Resources
- Reading: Ionic Adding Platforms, Building and Deploying the App: Objectives and Outcomes
- Video: Introduction to Cordova
- Video: Exercise (Video): Building and Deploying to Android Emulator
- Reading: Exercise (Instructions): Building and Deploying to Android Emulator and Android Device
- Video: Exercise (Video): Building and Deploying to iOS Emulator
- Reading: Exercise (Instructions): Building and Deploying to iOS Emulator
- Reading: Ionic Adding Platforms, Building and Deploying the App: Additional Resources
- Video: Assignment 3 Requirements: Grid and Storage
- Reading: Assignment 3: Grid and Storage: Additional Resources
Graded: Assignment 3: Grid and Storage
WEEK 4
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
13 videos, 20 readings
- Reading: Introduction to Ionic Native: Objectives and Outcomes
- Video: Introduction to Ionic Native
- Video: Exercise (Video): Customizing the SplashScreen
- Reading: Exercise (Instructions): Customizing the SplashScreen
- Reading: Introduction to Ionic Native: Additional Resources
- Reading: Notifying the User: Objectives and Outcomes
- Video: Notifying the User
- Video: Exercise (Video): Notifying the User
- Reading: Exercise (Instructions): Notifying the User
- Reading: Notifying the User: Additional Resources
- Reading: Social Sharing: Objectives and Outcomes
- Video: Social Sharing
- Video: Exercise (Video): Sending Email
- Reading: Exercise (Instructions): Sending Email
- Video: Exercise (Video): Social Sharing
- Reading: Exercise (Instructions): Social Sharing
- Reading: Social Sharing: Additional Resources
- Reading: Using the Camera: Objectives and Outcomes
- Video: Using the Camera
- Video: Exercise (Video): Using the Camera
- Reading: Exercise (Instructions): Using the Camera
- Reading: Using the Camera: Additional Resources
- Reading: Network Status: Objectives and Outcomes
- Video: Network Status
- Video: Exercise (Video): Network Status
- Reading: Exercise (Instructions): Network Status
- Reading: Network Status: Additional Resources
- Video: Assignment 4 (Requirements): Ionic Native and Cordova
- Reading: Assignment 4: Ionic Native and Cordova: Additional Resources
- Video: Conclusions
- Reading: Conclusions: Additional Resources
- Reading: Project Implementation: Objectives and Outcomes
- Reading: Final Report Template
Graded: Assignment 4: Ionic Native and Cordova
Graded: Project Implementation and Final Report
FAQs
How It Works
Coursework
Each course is like an interactive textbook, featuring pre-recorded videos, quizzes and projects.
Help from Your Peers
Connect with thousands of other learners and debate ideas, discuss course material, and get help mastering concepts.
Certificates
Earn official recognition for your work, and share your success with friends, colleagues, and employers.
Creators
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.
Pricing
| Audit | Purchase Course | |
|---|---|---|
| Access to course materials | Available | Available |
| Access to graded materials | Not available | Available |
| Receive a final grade | Not available | Available |
| Earn a shareable Course Certificate | Not available | Available |
Ratings and Reviews
Nice course. The instructor is very qualified.
Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.
© 2017 Coursera Inc. All rights reserved.
Excellent course. Great professor!