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

Packt via Coursera

Go to class Write review

Details

Go to class

Provider

Coursera
Pricing

Paid Course
Languages

English
Certificate

Paid Certificate Available
Duration & workload

15 hours 51 minutes
Sessions

On-Demand
Subtitles

English

Found in

Overview

Coursera Flash Sale

40% Off Coursera Plus for 3 Months!

Grab it

This course features Coursera Coach! A smarter way to learn with interactive, real-time conversations that help you test your knowledge, challenge assumptions, and deepen your understanding as you progress through the course. In this course, you will learn how to create offline-first apps using Angular, Ionic, PouchDB, and CouchDB. You'll explore the benefits of offline capabilities and how they improve user experience and reliability. Through building a practical restaurant management app, Julies, you'll discover how to design, implement, and synchronize data seamlessly between local and remote databases. The course begins by setting up Ionic and developing a simple Todo app, followed by more advanced techniques like handling CRUD operations, data modeling, and real-time synchronization. You will learn to work with PouchDB and CouchDB, implement state management with XState, and ensure data consistency across devices. This course is perfect for intermediate developers familiar with Angular and mobile app development who want to enhance their skills in offline-first app creation. By the end, you will confidently build and deploy offline-first apps with advanced features.

Syllabus

Introduction

In this module, we will introduce the course, outlining the key objectives and the tools that will shape your learning experience. You'll understand the importance of building offline-first apps and be motivated to dive into the exciting technologies of Angular, Ionic, PouchDB, and CouchDB.

Our Quick First Todo App

In this module, we will build a quick and easy Todo app as our first project. You will set up the app, add basic features like creating and managing todo items, and refine the user interface to improve the app's functionality and design.

Julies - The Offline-First App for Restaurants

In this module, we will introduce Julies, an offline-first app designed for restaurants, showcasing its unique features and offline capabilities. You will learn to design key screens like the home and order screens and implement features that streamline restaurant operations.

PouchDB / CouchDB Integration, Four-Way-Binding

In this module, we will explore the integration of CouchDB and PouchDB, enabling offline data storage and seamless synchronization. You’ll also learn how to implement four-way binding to synchronize data across the app in real-time. We’ll dive into important database concepts, including eventual consistency and the CAP theorem, to ensure robust app performance.

Using Models, Implementing the Table Details Screen and the Ordering Process

In this module, we will explore the use of TypeScript models to represent table details and order data in our app. You’ll implement models and features for tracking table reservations, managing orders, and updating the database to ensure data consistency.

Refactoring the Database Implementation

In this module, we will refactor the database implementation by introducing the repository pattern. This will enhance the modularity and maintainability of the app, improving the overall performance and scalability of your offline-first app.

Add/Remove Products, Creating a Custom Sorting Pipe

In this module, we will add functionality for managing products in the app, including adding and removing products from the list. You’ll also create a custom sorting pipe to sort nested arrays of product objects, enhancing the organization and display of product data in your app.

Payment Screen

In this module, you will learn to implement a fully functional payment screen, including navigation, design, and integration with a billing service. We’ll walk through the payment page in three stages, ensuring a smooth, user-friendly payment process, and refactor the code for better performance in generating bills.

Kitchen View Screen

In this module, we will design a Kitchen View screen to manage and track the status of orders. You will use XState to create state machines for each table, implement styling to improve usability, and ensure smooth state transitions to reflect the real-time status of orders.

Improve Waiter Workflow

In this module, we will optimize the workflow for waiters by adding features such as sorting orders based on priority. You will also learn to make changes visible to waiters before persisting them to the database, ensuring accuracy and reducing errors in order management.

Debug and Styling Using Different Fonts

In this module, we will focus on using debugging tools and techniques to troubleshoot and resolve issues within the app. You will learn how to apply custom fonts to enhance the app’s visual aesthetics and ensure consistency across the interface, creating a unique and professional user experience.

CRUD for Products and Tables

In this module, we will focus on implementing full CRUD functionality for both products and tables. You will learn best practices for managing and manipulating data, ensuring that changes are reflected consistently across the app.

Fix the Last Bug - Tables Cannot Be Free after Being Occupied Once

In this module, we will focus on fixing the bug that prevents tables from being marked as free after they've been occupied. You’ll learn how to implement proper state management to ensure accurate table status updates, and test the solution to guarantee smooth functionality within the app.

Documentation

In this module, we will dive into generating and maintaining code documentation using Compodoc, a powerful tool for Angular projects. You will learn how to structure and generate useful documentation to improve maintainability and collaboration, making the codebase easier to understand and work with.

Unit Tests

In this module, we will explore the concept of mocking the database in unit tests to isolate database operations and ensure accurate testing of app functionality. You’ll learn best practices for creating unit tests that ensure your app remains stable and reliable without relying on actual database interactions.