Hands-On App Development with Ionic: Build dynamic cross-platform apps using Ionic

Hands-On App Development with Ionic: Build dynamic cross-platform apps using Ionic
Hands-On App Development with Ionic: Build dynamic cross-platform apps using Ionic
English | MP4 | AVC 1920×1080 | AAC 48KHz 2ch | 5h 20m | 1.84 GB

This hands-on course teaches you to build reactive, scalable, and dynamic cross-platform apps using Ionic 4 and 5

While Ionic is an easy and straightforward framework to learn, building Ionic apps can sometimes be hard. Designing its architecture and making sure that your application is high-performing, dynamic, and scalable are always tricky.

In this course, you will develop a feature-rich Notes app in a step-by-step process using the Ionic framework. You will be using web components, persistent storage, and APIs to ensure your app is high-performing. You’ll use the MobX reactive state management tool to make your apps scalable. You’ll then use a SQLite database to persist data onto your device. With the Ionic Native Camera API, you’ll add, save pictures to your notes then edit and save them, set reminders in your notes, and have your device notify you of events using Ionic Native local notifications. You will deploy your app across iOS and Android devices and also on the web.

By the end of the course, you will have taken your Ionic 4 and 5 skills to the next level and will be equipped to build cross-platform hybrid mobile apps.


  • Build and develop native, real-world, cross-platform applications using Ionic 4 and 5, MobX, and Cordova
  • Integrate your Ionic apps with the SQLite Cordova plugin to persist data in an SQL way on your device
  • Use MobX to manage state with Ionic 4 and 5 and build scalable reactive apps
  • Develop and run your applications on multiple platforms using the Ionic CLI function
  • Build high-end user interfaces with enhanced functionalities and reuse code to build apps for multiple platforms
  • Create abstractions for application storage to support deployment on web browsers
  • Use Ionic Native to access a device’s camera and add images to items
  • Use local notifications to set reminders
Table of Contents

Setting Up Ionic Project
1 Course Overview
2 Creating Ionic project and serving on browser
3 Creating App Pages
4 Theming Colors Using Ionic Color Generator

Application State Management with MobX
5 Introduction to MobX and Its Key Features
6 Installing MobX Packages for Angular
7 Subscribing to State Properties Using @observable
8 Updating State with @action
9 Using @computed Values

Building the Notes Crud Using MobX
10 Creating the Notes Store
11 Listing Notes
12 Adding and Editing Notes
13 Adding and Editing Notes Part 2
14 Adding and Editing Notes Part 3
15 Deleting Notes

Persisting Notes Using Cordova SQLite
16 Installing Cordova SQLite Plugin
17 CRUD Using Cordova SQLite
18 CRUD Using Cordova SQLite – Part 2
19 CRUD Using Cordova SQLite – Part 3
20 Adding Abstraction over Cordova SQLite
21 Using Ionic Storage as a Fallback for Web Browsers

Adding Pictures Using Ionic Native Camera API
22 Installing @ionic-native Camera and Taking Pictures
23 Saving Pictures to Database Along with the Notes
24 Displaying Pictures with Notes
25 Providing Different Options for Picture Selection

Set Reminders Using Ionic Native Local-Notifications
26 Installing the Local-Notifications Ionic Native Package and Cordova Plugin
27 Understanding Local-Notifications in Depth
28 Modifying the Database to Add Reminder Time
29 Adding the Reminder Time Form Control
30 Creating Notes with Reminders
31 Updating Notes Reminders
32 Removing Notes with Reminders

Wrapping up Settings and about Tabs
33 Changing the App’s Name and Finalizing about Tab
34 Clearing All Reminders Under the Settings Tab

Upgrading to Ionic 5
35 Updating Ionic CLI and Upgrading to Ionic 4.11.10
36 Upgrading to Ionic 5 and Angular v9
37 Breaking Changes
38 Course Review