Angular Development Fundamentals

Dalam pengembangan aplikasi web modern, Angular menjadi salah satu framework yang banyak digunakan karena kemampuannya dalam membangun aplikasi yang skalabel, modular, dan interaktif. Namun, banyak pengembang menghadapi berbagai tantangan saat bekerja dengan Angular. Beberapa masalah yang sering terjadi meliputi kompleksitas dalam mengatur arsitektur aplikasi, pengelolaan data dalam skala besar, serta optimasi performa aplikasi agar tetap responsif. Selain itu, integrasi dengan service worker untuk mendukung pengalaman offline-first juga sering menjadi tantangan bagi pengembang yang belum terbiasa dengan konsep ini. Penggunaan service worker yang kurang optimal dapat menyebabkan cache yang berlebihan atau bahkan kegagalan dalam menyajikan data yang diperbarui secara real-time (MDN, 2021). Pengelolaan data yang tidak efisien dalam aplikasi Angular dapat menyebabkan peningkatan latensi hingga 30% dalam pemrosesan data pengguna (Li et al. 2020). Oleh karena itu, pemahaman mendalam mengenai konsep-konsep fundamental Angular sangat diperlukan agar pengembang dapat mengatasi berbagai hambatan teknis yang sering terjadi.

Training Angular Development Fundamentals ini dirancang untuk memberikan pemahaman yang komprehensif mengenai dasar-dasar pengembangan aplikasi web dengan Angular. Materi yang dibahas mencakup bagaimana membangun aplikasi web modern dari nol, memahami komponen utama Angular, mengelola data dengan service worker, hingga teknik caching dan pengelolaan offline data menggunakan IndexedDB. Peserta juga akan belajar bagaimana melakukan upgrade aplikasi dengan SwUpdate serta memahami konsep IndexedDB untuk menyimpan data dalam browser. Dengan pendekatan berbasis kasus dan contoh kode nyata, peserta akan mendapatkan pengalaman langsung dalam menerapkan konsep-konsep yang diajarkan. Penerapan IndexedDB yang efektif dapat meningkatkan kinerja penyimpanan data browser hingga 40% dibandingkan metode tradisional (Patel & Singh, 2022).

Dalam pelatihan ini, peserta akan mempelajari fondasi dalam membangun aplikasi web modern menggunakan Angular, termasuk instalasi dan konfigurasi aplikasi Angular, implementasi Service Worker untuk meningkatkan performa aplikasi dan mendukung mode offline, serta pengelolaan cache data menggunakan Service Worker. Selain itu, peserta juga akan mempelajari pemanfaatan IndexedDB dan Dexie.js untuk penyimpanan data berbasis browser serta teknik upgrading aplikasi Angular agar selalu up-to-date dengan versi terbaru.

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