Angular Development Fundamentals

Pengembangan aplikasi web modern menuntut lebih dari sekadar antarmuka yang responsif. Aplikasi saat ini diharapkan memiliki struktur yang modular, performa yang baik, kemampuan offline, serta mekanisme update yang andal agar dapat digunakan secara optimal di berbagai kondisi jaringan. Framework Angular hadir sebagai solusi untuk membangun aplikasi web berskala menengah hingga besar dengan pendekatan terstruktur, berbasis komponen, dan didukung ekosistem tooling yang matang (Google Angular Team, 2023).

Course Angular Development Fundamentals dirancang untuk membekali peserta dengan pemahaman dasar yang kuat dalam membangun aplikasi Angular modern, dimulai dari proses setup, struktur aplikasi, hingga pengembangan fitur berbasis komponen dan modul. Melalui studi kasus Web Arcade, peserta akan mempelajari penerapan Service Workers, mekanisme caching, serta pengelolaan lifecycle aplikasi untuk mendukung fitur Progressive Web App (PWA) seperti offline access dan background update. Pendekatan ini sejalan dengan praktik pengembangan web modern yang menekankan reliability dan performance pada aplikasi berbasis browser (Google Developers, 2022).

Selain itu, course ini juga membahas pengelolaan data secara offline menggunakan IndexedDB dan Dexie.js, termasuk proses sinkronisasi data ketika koneksi kembali tersedia. Peserta akan memahami bagaimana Angular dapat dikombinasikan dengan teknologi penyimpanan sisi klien untuk membangun aplikasi yang resilient, serta bagaimana menangani proses upgrade aplikasi dan notifikasi versi baru kepada pengguna. Dengan fondasi ini, peserta diharapkan mampu membangun aplikasi Angular yang tidak hanya fungsional, tetapi juga siap digunakan pada skenario dunia nyata dengan keterbatasan jaringan dan kebutuhan skalabilitas.

OBJECTIVES

1. Memahami dasar-dasar pengembangan aplikasi web dengan Angular
2. Mengimplementasikan konsep Service Worker untuk caching dan pengalaman offline-first
3. Menggunakan IndexedDB dan Dexie.js untuk mengelola data secara efisien
4. Melakukan pembaruan aplikasi Angular dengan SwUpdate
5. Menerapkan praktik terbaik dalam membangun aplikasi yang responsif dan skalabel

AUDIENCE

1. Developer
2. Software Engineer

PREREQUISITES

Tidak ada training khusus yang dipersyaratkan

CONTENT

1. Building Modern Web Applications

1.1. Laying the Foundation
1.2. Original Problem
1.3. Caveates with the Web Application Solution
1.4. Use Case
1.5. Code Samples

2. Getting Started

2.1. Prerequisites
2.2. Create an Angular Application
2.3. Run the Angular Application
2.4. Working with Yarn Global Add

3. Installing an Angular Application

3.1. Angular Components

4. Service Workers

4.1. Service Worker Lifecycle
4.2. Service Worker in an Angular Application
4.3. Web Arcade’s Service Worker Configuration
4.4. Pattern Match Resources to Cache
4.5. Browser Support

5. Cache Data with Service Workers

5.1. Adding a Component to List Board Games
5.2. Define a Data Structure for Board Games
5.3. Mock Data Service
5.4. Call the Service in the Angular Application
5.5. Cache the Board Games Data
5.6. Angular Modules

6. Upgrading Applications

6.1. Getting Started with SwUpdate
6.2. Identifiying an Update to the Application
6.3. Identifiying When an Update Is Activated
6.4. Activating with the SwUpdate Service
6.5. Checking for a New Version
6.6. Notifying the User About the New Version
6.7. Managing Errors in Unrecoverable Scenarios

7. Introduction to IndexedDB

7.1. Terminology
7.2. Getting Started with IndexedDB
7.3. Creating Object Story
7.4. Browser Support
7.5. Limitation of IndexedDB

8. Creating the Entities Use Case

8.1. Web Arcade: Game Details Page
8.2. Updates to Mock HTTP Services

9. Creating Data Offline

9.1. Adding Comments Online and Offline
9.2. Synchronizing Offline Comments on the Server Side
9.3. Updating Data in IndexedDB

10. Dexie.js for IndexedDB

10.1. Transactions
10.2. Add
10.3. Delete
10.4. Update
10.5. Retrieve
10.6. More Options

11. Addendum

11.1. Creating a Proxy for Mock Services
11.2. Using the Bottom Sheet for a Die Roll
11.3. Using a Hash Location Strategy