Multiplatform Mobile App Development
with Web Technologies:
Ionic and Cordova
Course Overview
Jogesh K. Muppala
Expected Background
• You should have good working knowledge of:
– HTML, CSS and JavaScript
– Angular
• TypeScript
2
Web Design and Development
• Development, Building and
• Design Deployment
– User Interface (UI)/ User – Web UI Frameworks:
Experience (UX) Design Bootstrap 4
– Visual Design – JavaScript Frameworks:
– Prototyping Angular
– Colors, Graphics and – Hybrid Mobile Frameworks:
Animation Ionic, Cordova and
NativeScript
– Server-side Development:
Node + Express + MongoDB
3
Full Stack Web Development
UI JS
Framework Framework
Bootstrap 4 Angular
BaaS
JS CSS NodeJS Modules
HTML
NodeJS MongoDB
Presentation layer Business Logic layer Data Access layer
4
Course Outline
• Ionic Framework
• Cordova:
– Cordova Plugins
– Ionic Native Wrappers
5
Module 1: Hybrid Mobile App
Development Frameworks: An Introduction
• Full Stack Web Development: The Big Picture
• Setting up your Development Environment: Git and
Node
• Hybrid Mobile App Development: An Overview
• Ionic and Angular
• Ionic Navigation
• Assignment 1
6
Module 2: Ionic Components
• Floating Action Buttons
• Ionic Lists: Advanced Features
• Ionic Forms and Modals
• Alerts, Toast, Popovers, ActionSheets, and
Loading
• Assignment 2
7
Module 3: Ionic Split Pane, Grid and Storage, and
Deploying your App
• Adapting to Large Screens
• Ionic Storage
• Installing Android and iOS SDK and Platforms
• Ionic Adding Platforms, Building and Deploying
the App
• Assignment 3
8
Module 4: Accessing Native Capabilities of Devices:
Cordova and Ionic Native
• Introduction to Ionic Native
• Notifying the User
• Network Status
• Sending Email
• Using the Cordova Camera Plugin
• Assignment 4