Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova

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 5.0 stars Average User Rating 5.0See what learners said 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.

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.

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 expand

1. Video: Welcome to Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova
2. Video: How to Use the Learning Resources
3. Reading: Welcome to Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova: Additional Resources
4. Reading: Full Stack Web Development: The Big Picture: Objectives and Outcomes
5. Video: What is Full-Stack Web Development?
6. Reading: Full Stack Web Development: Additional Resources
7. Reading: Setting up Your Development Environment: Git and Node: Objectives and Outcomes
8. Reading: Setting up your Development Environment
9. Video: Exercise (Video): Setting up Git
10. Reading: Exercise (Instructions): Setting up Git
11. Video: Exercise (Video): Basic Git Commands
12. Reading: Exercise (Instructions): Basic Git Commands
13. Video: Exercise (Video): Online Git Repositories
14. Reading: Exercise (Instructions): Online Git Repositories
15. Video: Node.js and NPM
16. Video: Exercise (Video): Setting up Node.js and NPM
17. Reading: Exercise (Instructions): Setting up Node.js and NPM
18. Video: Exercise (Video): Basics of Node.js and NPM
19. Reading: Exercise (Instructions): Basics of Node.js and NPM
20. Reading: Setting up your Development Environment: Git and Node: Additional Resources
21. Reading: Hybrid Mobile App Development: An Overview: Objectives and Outcomes
22. Video: Hybrid Mobile App Development
23. Video: Introduction to the Ionic Framework
24. Video: Exercise (Video): Setting up the Ionic Framework
25. Reading: Exercise (Instructions): Setting up the Ionic Framework
26. Reading: Hybrid Mobile App Development: An Overview: Additional Resources
27. Reading: Setting up a Simple Server: Objectives and Outcomes
28. Video: Exercise (Video): Setting up a Server using json-server
29. Reading: Exercise (Instructions): Setting up a Server using json-server
30. Reading: Setting up a Simple Server: Additional Resources
31. Reading: Ionic and Angular: Objectives and Outcomes
32. Video: Ionic and Angular
33. Video: Exercise (Video): Getting Started with your Ionic App
34. Reading: Exercise (Instructions): Getting Started with your Ionic App
35. Video: Exercise (Video): Ionic and Angular
36. Reading: Exercise (Instructions): Ionic and Angular
37. Reading: Ionic and Angular: Additional Resources
38. Reading: Ionic Navigation: Objectives and Outcomes
39. Video: Ionic Navigation
40. Video: Exercise (Video): Ionic Navigation
41. Reading: Exercise (Instructions): Ionic Navigation
42. Reading: Ionic Navigation: Additional Resources
43. Video: Assignment 1 Requirements (Video): Introduction to Ionic Framework
44. Reading: Assignment 1: Introduction to Ionic Framework: Additional Resources
45. Reading: Ideation: Objectives and Outcomes
46. Reading: Ideation Report Template
47. 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 expand

1. Reading: Floating Action Buttons: Objectives and Outcomes
2. Video: Floating Action Buttons
3. Video: Exercise (Video): Floating Action Button
4. Reading: Exercise (Instructions): Floating Action Button
5. Video: Exercise (Video): FAB and Favorites
6. Reading: Exercise (Instructions): FAB and Favorites
7. Reading: Floating Action Buttons: Additional Resources
8. Reading: Ionic Lists: Advanced Features: Objectives and Outcomes
9. Video: Ionic Lists: Advanced Features
10. Video: Exercise (Video): Ionic Lists: Advanced Features
11. Reading: Exercise (Instructions): Ionic Lists: Advanced Features
12. Reading: Ionic Lists: Advanced Features: Additional Resources
13. Reading: Ionic Forms and Modals: Objectives and Outcomes
14. Video: Ionic Forms and Modals
15. Video: Exercise (Video): Modal
16. Reading: Exercise (Instructions): Modal
17. Video: Exercise (Video): Forms
18. Reading: Exercise (Instructions): Forms
19. Reading: Ionic Forms and Modals: Additional Resources
20. Reading: Alerts, Popovers, ActionSheets, Loading and Gestures: Objectives and Outcomes
21. Video: Alerts, Toasts, Popovers, ActionSheets and Loading
22. Video: Exercise (Video): Alerts, Toasts and Loading
23. Reading: Exercise (Instructions): Alerts, Toasts and Loading
24. Reading: Alerts, Popovers, ActionSheets, Loading and Gestures: Additional Resources
25. Video: Assignment 2: Ionic Components
26. Reading: Assignment 2: Ionic Components: Additional Resources
27. Reading: UI Design and Prototyping: Objectives and Outcomes
28. Reading: UI Design and Prototyping Report Template
29. 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 expand

1. Reading: Adapting to Large Screens: Objectives and Outcomes
2. Video: Adapting to Large Screens
3. Video: Exercise (Video): Ionic Split Pane
4. Reading: Exercise (Instructions): Ionic Split Pane
5. Video: Exercise (Video): Ionic Grid
6. Reading: Exercise (Instructions): Ionic Grid
7. Reading: Adapting to Large Screens: Additional Resources
8. Reading: Ionic Storage: Objectives and Outcomes
9. Video: Ionic Storage
10. Video: Exercise (Video): Ionic Storage
11. Reading: Exercise (Instructions): Ionic Storage
12. Reading: Ionic Storage: Additional Resources
13. Reading: Installing Android and iOS SDK and Platforms: Objectives and Outcomes
14. Video: Installing Android Studio and Android SDK
15. Reading: Installing Android Studio and Android SDK: Ionic and Cordova Guides
16. Video: Installing Xcode on Mac and iOS SDK
17. Reading: Installing Xcode on Mac and iOS SDK: Ionic and Cordova Guides
18. Reading: Installing Android and iOS SDK and Platforms: Additional Resources
19. Reading: Ionic Adding Platforms, Building and Deploying the App: Objectives and Outcomes
20. Video: Introduction to Cordova
21. Video: Exercise (Video): Building and Deploying to Android Emulator
22. Reading: Exercise (Instructions): Building and Deploying to Android Emulator and Android Device
23. Video: Exercise (Video): Building and Deploying to iOS Emulator
24. Reading: Exercise (Instructions): Building and Deploying to iOS Emulator
25. Reading: Ionic Adding Platforms, Building and Deploying the App: Additional Resources
26. Video: Assignment 3 Requirements: Grid and Storage
27. 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 expand

1. Reading: Introduction to Ionic Native: Objectives and Outcomes
2. Video: Introduction to Ionic Native
3. Video: Exercise (Video): Customizing the SplashScreen
4. Reading: Exercise (Instructions): Customizing the SplashScreen
5. Reading: Introduction to Ionic Native: Additional Resources
6. Reading: Notifying the User: Objectives and Outcomes
7. Video: Notifying the User
8. Video: Exercise (Video): Notifying the User
9. Reading: Exercise (Instructions): Notifying the User
10. Reading: Notifying the User: Additional Resources
11. Reading: Social Sharing: Objectives and Outcomes
12. Video: Social Sharing
13. Video: Exercise (Video): Sending Email
14. Reading: Exercise (Instructions): Sending Email
15. Video: Exercise (Video): Social Sharing
16. Reading: Exercise (Instructions): Social Sharing
17. Reading: Social Sharing: Additional Resources
18. Reading: Using the Camera: Objectives and Outcomes
19. Video: Using the Camera
20. Video: Exercise (Video): Using the Camera
21. Reading: Exercise (Instructions): Using the Camera
22. Reading: Using the Camera: Additional Resources
23. Reading: Network Status: Objectives and Outcomes
24. Video: Network Status
25. Video: Exercise (Video): Network Status
26. Reading: Exercise (Instructions): Network Status
27. Reading: Network Status: Additional Resources
28. Video: Assignment 4 (Requirements): Ionic Native and Cordova
29. Reading: Assignment 4: Ionic Native and Cordova: Additional Resources
30. Video: Conclusions
31. Reading: Conclusions: Additional Resources
32. Reading: Project Implementation: Objectives and Outcomes
33. Reading: Final Report Template

Graded: Assignment 4: Ionic Native and Cordova
Graded: Project Implementation and Final Report