Hands-On App Development with Ionic

Hands-On App Development with Ionic

by Muhammad Ahsan Ayaz
Released May 2020
Publisher(s): Packt Publishing
ISBN: 9781789619904

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

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.

What You Will Learn

  • 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

Audience

This course is for web and mobile developers who have a basic knowledge of Ionic, and want to take their skills to the next level, and need to build real-time and complex applications.

A basic understanding of JavaScript is required to follow along with this course.

About The Author

Muhammad Ahsan Ayaz: Muhammad Ahsan Ayaz is a Google Developer Expert in Angular and a software architect at Syncron. He has taught programming worldwide for the past 8 years through articles, video content, one-to-one mentoring, and tech talks at diff erent global conferences. He has developed several libraries and plugins used by hundreds of thousands of developers, including ngx-device-detector, which has over 5 million installs and over 2,000 GitHub projects using it. Apart from programming, Ahsan likes to travel and play multiplayer video games. He lives in Sweden with his wife.

Table of contents

  1. Chapter 1 : 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
  2. Chapter 2 : Application State Management with MobX
    1. Introduction to MobX and Its Key Features
    2. Installing MobX Packages for Angular
    3. Subscribing to State Properties Using @observable
    4. Updating State with @action
    5. Using @computed Values
  3. Chapter 3 : Building the Notes Crud Using MobX
    1. Creating the Notes Store
    2. Listing Notes
    3. Adding and Editing Notes
    4. Adding and Editing Notes Part 2
    5. Adding and Editing Notes Part 3
    6. Deleting Notes
  4. Chapter 4 : Persisting Notes Using Cordova SQLite
    1. Installing Cordova SQLite Plugin
    2. CRUD Using Cordova SQLite
    3. CRUD Using Cordova SQLite - Part 2
    4. CRUD Using Cordova SQLite - Part 3
    5. Adding Abstraction over Cordova SQLite
    6. Using Ionic Storage as a Fallback for Web Browsers
  5. Chapter 5 : Adding Pictures Using Ionic Native Camera API
    1. Installing @ionic-native/Camera and Taking Pictures
    2. Saving Pictures to Database Along with the Notes
    3. Displaying Pictures with Notes
    4. Providing Different Options for Picture Selection
  6. Chapter 6 : Set Reminders Using Ionic Native Local-Notifications
    1. Installing the Local-Notifications Ionic Native Package and Cordova Plugin
    2. Understanding Local-Notifications in Depth
    3. Modifying the Database to Add Reminder Time
    4. Adding the Reminder Time Form Control
    5. Creating Notes with Reminders
    6. Updating Notes Reminders
    7. Removing Notes with Reminders
  7. Chapter 7 : Wrapping up Settings and about Tabs
    1. Changing the App's Name and Finalizing about Tab
    2. Clearing All Reminders Under the Settings Tab
  8. Chapter 8 : Upgrading to Ionic 5
    1. Updating Ionic CLI and Upgrading to Ionic 4.11.10
    2. Upgrading to Ionic 5 and Angular v9
    3. Breaking Changes
    4. Course Review

Product information

  • Title: Hands-On App Development with Ionic
  • Author(s): Muhammad Ahsan Ayaz
  • Release date: May 2020
  • Publisher(s): Packt Publishing
  • ISBN: 9781789619904