Offline-First Apps With Angular, Ionic, Pouchdb And Couchdb

Develop offline-first apps using a database technology which was built for syncing, from frontend to backend

What you'll learn

Develop modern, scalable, multi-platform web applications (Web, Mobile) with Angular 15, Ionic 6

Use PouchDB as frontend storage and CouchDB as database for creating Offline-First Apps with easy syncing between local and remote

Fully understand how to design and develop an application and how to implement advanced features to plug-in other database solutions using a Repository Pattern

Learn how to handle problems while developing and practical usage of advanced features like RxJS or creating Custom pipes for sorting multi-level JSON data

Learn how to use XState to implement state machines in your app

Requirements

Basic Knowledge of Angular and Ionic is recommended but you can as well just hop in and read the relevant things up in the documentation after every video!

Prior Typescript knowledge helps, but you will easily grasp the concept

Basic JavaScript knowledge is required

This course is more practical, not every basic concept is explained but you will have to actively work on the content and read up missing knowledge sometimes.

Description

In this course, you will learn how to build a robust, offline-first web application using PouchDB, CouchDB, Angular, and Ionic. You will start by setting up a development environment and learn how to use PouchDB and CouchDB to store and sync data locally and with a remote server. You will then learn how to use Angular to build the front-end of your application and Ionic to design and style your application for mobile devices.Throughout the course, you will work on a practical project to apply the concepts you have learned and build a fully functional offline-first web application. You will also learn how to test and debug your application, and how to deploy it for production use.You will learn about the CAP Theorem, which is a fundamental concept in the field of distributed systems. You will learn what the CAP Theorem is, how it relates to the design and implementation of distributed systems, and how it impacts the performance and reliability of these systems.You will start by exploring the three key components of the CAP Theorem: Consistency, Availability, and Partition Tolerance. You will learn about the trade-offs between these components and how they affect the behavior of distributed systems. You will also learn about different approaches to achieving consistency in distributed systems, including eventual consistency and strong consistency and why we used CouchDB as a technology.By the end of this course, you will have the skills and knowledge to build a reliable, offline-first web application using PouchDB, CouchDB, Angular, and Ionic. You will be able to store and sync data locally and with a remote server, build a responsive user interface, and design and style your application for mobile devices.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Ionic setup

Lecture 3 Ionic project structure walkthrough

Section 2: Our quick first Todo App

Lecture 4 A fast and easy Todo App 1

Lecture 5 A fast and easy Todo App 2

Section 3: Julies - The Offline First App for Restaurants

Lecture 6 Julies App - Introduction

Lecture 7 Screen Design - Home and Order Screen

Lecture 8 Home Screen with Table Overview

Section 4: PouchDB / CouchDB Integration, 4-Way-Binding

Lecture 9 Setting up CouchDB

Lecture 10 PouchDB Integration

Lecture 11 4-Way-Binding

Lecture 12 CAP-Theorem, Eventual consistency, Update is better than fetch

Lecture 13 Propagate changes from PouchDB

Section 5: Using Models, implementing the Table Details Screen and the Ordering Process

Lecture 14 Types / Models

Lecture 15 Table Details Models

Lecture 16 Products Consumed View

Lecture 17 Display available products for ordering

Lecture 18 Bugfix: Same Products consumed for every table

Lecture 19 Styling the Products View

Lecture 20 String vs string in Typescript

Lecture 21 Add Ordered Product to Consumed Products

Lecture 22 Save Add / Delete of Consumed products to PouchDB and CouchDB

Lecture 23 Create Documents in the Database for Empty Tables

Section 6: Refactoring the Database Implementation

Lecture 24 Refactor: Adding Repository Pattern

Section 7: Add/Remove products, Creating a custom sorting pipe

Lecture 25 Add / Remove products

Lecture 26 OrderByPipe to sort nested array of objects

Section 8: Payment Screen

Lecture 27 Ion-Fab-Button to navigate to the payment screen

Lecture 28 Payment Page 01

Lecture 29 Payment Page 02

Lecture 30 Payment Page 03

Lecture 31 Creating a service for generating bills

Lecture 32 Refactor: Create new bill for every user without update

Section 9: Kitchen View Screen

Lecture 33 Kitchen View

Lecture 34 Using XState to create a state machine for every table

Lecture 35 Implement styling and continue with state machine

Lecture 36 Implement State Transitions :: Part 1

Lecture 37 Implement State Transitions :: Part 2

Section 10: Improve waiter workflow

Lecture 38 Improve workflow, sorting

Lecture 39 Make changes visible before storing them in the database

Section 11: Debug & Styling using different fonts

Lecture 40 How to Debug

Lecture 41 Adding custom fonts

Section 12: CRUD for Products and Tables

Lecture 42 CRUD Products :: Part 1

Lecture 43 CRUD Products :: Part 2

Lecture 44 CRUD Products :: Part 3

Lecture 45 CRUD Tables

Section 13: Fix the last bug - tables can not be free after being occupied once

Lecture 46 Transition from Paid to Free

Section 14: Documentation

Lecture 47 Generate code documentation using compodoc

Section 15: Unit Tests

Lecture 48 Mock the database for unit tests

Software engineers who are interested in creating multi-platform Apps using a Webframework,Software engineers who want to use advanced features like Repository Patterns and XState state machines