Offline-First Apps with Angular, Ionic, PouchDB, and CouchDB

Offline-First Apps with Angular, Ionic, PouchDB, and CouchDB

by Dominic Rudigier
Released June 2023
Publisher(s): Packt Publishing
ISBN: 9781835081433

Watch 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

Angular is a popular JavaScript framework for building scalable web apps, while Ionic is an open-source framework that uses Angular to create cross-platform mobile apps. PouchDB is a JavaScript-based database for offline storage and seamless data synchronization and CouchDB is a NoSQL database designed for distributed environments with built-in data replication and offline access. Together, they enable developers to build scalable, offline-first web apps.

The course begins with an introduction and preview, and a walkthrough of the Ionic project structure. We will then proceed to build a fast and easy Todo app and embark on the development of Julies app, starting with an introduction and screen design for the home and order screens and essential concepts such as four-way binding, the CAP theorem, and eventual consistency. You will learn to propagate changes from PouchDB, work with types/models, and create a view for products consumed. Displaying available products for ordering, fixing bugs, and styling the products view are further topics addressed. We will cover adding custom fonts, performing CRUD operations on products and tables, transitioning from paid to free, and generating code documentation using compodoc.

Upon completion, we will be equipped with the knowledge/skills to build scalable and feature-rich offline-first apps.

What You Will Learn

  • Build offline-first apps with Angular, Ionic, PouchDB, CouchDB
  • Sync data seamlessly between local and remote databases
  • Utilize repository patterns for advanced database solutions
  • Implement XState state machines for efficient state management
  • Handle problems in development using practical techniques
  • Explore advanced features such as RxJS and custom pipes

Audience

This course is designed for software engineers who are interested in creating multi-platform apps using a web framework, suitable for engineers who want to explore advanced features like repository patterns for database solutions and implementing state machines with XState. This course assumes a basic knowledge of Angular and Ionic. If new to these frameworks, you can refer to the documentation provided. Prior knowledge of TypeScript is desirable. Basic understanding of JavaScript is essential. The course focuses on practical implementation, so not every basic concept is thoroughly explained.

About The Author

Dominic Rudigier: Dominic Rudigier is a professionally experienced full-stack software developer specializing in web and mobile app development. With expertise in TypeScript, Angular, Ionic, NestJS, Java, C#, and Python, Dominic has 13 years of experience in developing software solutions. He is passionate about distributed systems, improving mobile app loading times, and constantly exploring new technologies in the web development space.

Dominic is dedicated to sharing his knowledge and enjoys teaching as a side project, alongside his self-employment in project-based work. He is also pursuing a master’s degree in software engineering to further enhance his skills and expertise.

Table of contents

  1. Chapter 1 : Introduction
    1. Introduction
    2. Ionic Setup
    3. Ionic Project Structure Walkthrough
  2. Chapter 2 : Our Quick First Todo App
    1. A Fast and Easy Todo App 1
    2. A Fast and Easy Todo App 2
  3. Chapter 3 : Julies - The Offline-First App for Restaurants
    1. Julies App - Introduction
    2. Screen Design - Home and Order Screen
    3. Home Screen with Table Overview
  4. Chapter 4 : PouchDB / CouchDB Integration, Four-Way-Binding
    1. Setting Up CouchDB
    2. PouchDB Integration
    3. Four-Way-Binding
    4. CAP-Theorem, Eventual Consistency, Update Is Better Than Fetch
    5. Propagate Changes from PouchDB
  5. Chapter 5 : Using Models, Implementing the Table Details Screen and the Ordering Process
    1. Types / Models
    2. Table Details Models
    3. Products Consumed View
    4. Display Available Products for Ordering
    5. Bugfix: Same Products Consumed for Every Table
    6. Styling the Products View
    7. String Versus String in Typescript
    8. Add Ordered Product to Consumed Products
    9. Save Add / Delete of Consumed Products to PouchDB and CouchDB
    10. Create Documents in the Database for Empty Tables
  6. Chapter 6 : Refactoring the Database Implementation
    1. Refactor: Adding Repository Pattern
  7. Chapter 7 : Add/Remove Products, Creating a Custom Sorting Pipe
    1. Add / Remove Products
    2. OrderByPipe to Sort Nested Array of Objects
  8. Chapter 8 : Payment Screen
    1. Ion-Fab-Button to Navigate to the Payment Screen
    2. Payment Page 01
    3. Payment Page 02
    4. Payment Page 03
    5. Creating a Service for Generating Bills
    6. Refactor: Create New Bill for Every User without Update
  9. Chapter 9 : Kitchen View Screen
    1. Kitchen View
    2. Using XState to Create a State Machine for Every Table
    3. Implement Styling and Continue with State Machine
    4. Implement State Transitions: Part 1
    5. Implement State Transitions: Part 2
  10. Chapter 10 : Improve Waiter Workflow
    1. Improve Workflow, Sorting
    2. Make Changes Visible before Storing Them in the Database
  11. Chapter 11 : Debug and Styling Using Different Fonts
    1. How to Debug
    2. Adding Custom Fonts
  12. Chapter 12 : CRUD for Products and Tables
    1. CRUD Products: Part 1
    2. CRUD Products: Part 2
    3. CRUD Products: Part 3
    4. CRUD Tables
  13. Chapter 13 : Fix the Last Bug - Tables Cannot Be Free after Being Occupied Once
    1. Transition from Paid to Free
  14. Chapter 14 : Documentation
    1. Generate Code Documentation Using compodoc
  15. Chapter 15 : Unit Tests
    1. Mock the Database for Unit Tests

Product information

  • Title: Offline-First Apps with Angular, Ionic, PouchDB, and CouchDB
  • Author(s): Dominic Rudigier
  • Release date: June 2023
  • Publisher(s): Packt Publishing
  • ISBN: 9781835081433