Fasa 12 — Panduan Pengajar

Mobile App dengan AI (PWA)

Panduan lengkap untuk pengajar mengendalikan sesi membina Progressive Web Apps — aplikasi mobile yang boleh di-install ke home screen, berfungsi offline, dibina tanpa React Native atau Flutter.

3-4
Jam Sesi
2
Demo Langsung
5
Latihan Amali
Intermediate
Tahap Pelajar

Ringkasan Sesi

Sesi ini adalah fasa paling advanced dan paling power dalam kursus Vibe Coding. Pelajar akan belajar cara mengubah web app biasa menjadi Progressive Web App (PWA) — aplikasi yang boleh di-install di phone macam app native, berfungsi offline, dan boleh hantar push notification.

Yang bestnya: semua ini dibuat dengan HTML, CSS, JavaScript biasa — dan AI. Tak perlu belajar React Native, Flutter, atau Swift.

Objektif Pembelajaran

  • Memahami konsep PWA dan bagaimana ia berbeza dari web app biasa
  • Mampu menambah PWA manifest ke web app menggunakan AI prompt
  • Mampu menambah service worker untuk offline caching
  • Boleh test dan install PWA ke phone sendiri
  • Memahami push notifications, camera access, dan geolocation dalam PWA
  • Dapat deploy PWA ke hosting dan install di phone

Prasyarat Pelajar

  • Telah menyiapkan mana-mana projek HTML/CSS/JS sebelumnya (landing page, portfolio, dashboard)
  • Faham asas prompt AI (dari Fasa 2)
  • Mempunyai phone untuk test install PWA
  • Telah belajar deployment (Fasa 8/10)
  • Mempunyai HTTPS hosting (wajib untuk service worker)

Aliran Sesi (3-4 Jam)

1 Pengenalan PWA (20 min) 2 Demo 1: Web ke PWA (15 min) 3 Amali Pelajar (60 min) 4 Demo 2: Install & Offline (15 min) 5 Push & Features (30 min) 6 Deploy & Install (45 min) 7 Rumusan (10 min)

Langkah 1: Pengenalan PWA (20 minit)

Terangkan apa itu PWA dengan analogi mudah:

Analogi: Web app biasa macam brosur digital — kena buka pelayar web, taip URL, dan kena ada internet. PWA macam app yang di-install dari App Store — ada icon di home screen, buka terus tanpa pelayar, boleh guna offline. Bezanya: PWA tak perlu melalui App Store/Google Play.

  • PWA = Progressive Web App: Web app yang bertingkah laku macam app native
  • Manifest: Fail JSON yang "beritahu" phone cara PWA patut dipaparkan
  • Service Worker: Script JavaScript yang berjalan di latar belakang, handle caching dan offline
  • HTTPS wajib: Service worker hanya berfungsi di laman HTTPS (atau localhost)
  • Install Prompt: Pelayar akan tanya "Add to Home Screen?" secara automatik

Tip Motivasi: Tunjukkan contoh PWA popular — Twitter (X), Pinterest, Starbucks, Spotify. Semua ni adalah PWA! Pelajar akan terkejut dan lebih bermotivasi.

Langkah 2: Demo 1 — "Dari Website Biasa ke Mobile App dalam 15 Minit" (15 minit)

Ini adalah money shot sesi. Tunjukkan transformasi web app biasa menjadi PWA yang boleh di-install.

Demo 1A

Prompt AI untuk PWA Manifest

Guna AI prompt untuk generate manifest.json. Tunjukkan cara copy-paste prompt ke AI dan dapatkan output terus.

Prompt: "Tambah PWA manifest.json untuk web app bernama 'My Dashboard'. Guna warna tema #0b0d17 (dark), background putih. Sediakan ikon 192x192 dan 512x512 guna placeholder emoji."
Demo 1B

Prompt AI untuk Service Worker

Guna AI prompt untuk generate service worker yang cache semua fail static dan allow offline access.

Prompt: "Tambah service worker untuk cache offline. Cache semua fail HTML, CSS, JS, dan gambar. Guna strategi 'Cache First then Network'. Nama cache: 'my-app-v1'."

Langkah 3: Amali Pelajar — Bina PWA Sendiri (60 minit)

Pelajar mengikuti langkah dalam Modul Pelajar untuk:

  1. Bina web app responsive (mobile-first)
  2. Tambah PWA manifest (guna AI prompt)
  3. Tambah service worker untuk offline (guna AI prompt)
  4. Test install di phone
  5. Tambah push notification basic
  6. Camera/Geolocation access via AI
  7. Deploy & install di phone sendiri

Langkah 4: Demo 2 — Install App di Phone & Test Offline (15 minit)

Tunjukkan cara install PWA ke home screen dan test offline capability.

  • Buka PWA di Chrome pada phone
  • Tunggu "Add to Home Screen" prompt muncul
  • Klik "Install" — icon akan muncul di home screen
  • Buka PWA dari home screen — ia buka dalam standalone window (tiada address bar)
  • Turn off WiFi/data — refresh — PWA masih berfungsi!
  • Tunjukkan perbezaan: web biasa vs PWA offline

Peringatan Teknikal: Service worker hanya berfungsi di HTTPS. Jika demo menggunakan localhost, ia juga OK (localhost dikecualikan). Untuk test di phone, kena deploy dulu ke hosting yang guna HTTPS.

Langkah 5: Push Notification & Native Features (30 minit)

Terangkan dan tunjukkan cara tambah feature tambahan menggunakan AI:

  • Push Notification: Hantar notifikasi ke phone walaupun PWA tak dibuka
  • Camera Access: Guna getUserMedia() untuk akses kamera
  • Geolocation: Guna navigator.geolocation untuk dapatkan lokasi
  • Bottom Navigation: Mobile-style navigation bar
  • Swipeable Cards: Touch events untuk swipe gesture

Langkah 6: Deploy & Install (45 minit)

Pelajar deploy PWA mereka ke Cloudflare Pages (HTTPS auto) dan install di phone masing-masing. Minta mereka share screenshot PWA di home screen dalam group chat.

Langkah 7: Rumusan & Q&A (10 minit)

  • Review apa yang dipelajari — PWA manifest, service worker, offline, install
  • Soalan dan jawapan
  • Cadangan projek seterusnya: bina PWA sebenar untuk portfolio, client, atau bisnes sendiri
  • Galakkan pelajar untuk terus explore dan guna AI untuk troubleshoot

Key Teaching Points

PWA Manifest adalah "Kad Pengenalan": Manifest.json memberitahu phone nama app, ikon, warna tema, dan macam mana app patut dipaparkan (fullscreen, standalone, atau minimal-ui). Tanpa manifest, pelayar tak tahu ini adalah PWA. Guna AI untuk generate — cuma bagi nama app dan warna tema.
Service Worker = "Pekerja Latar": Service worker adalah JavaScript yang berjalan berasingan dari web page. Ia boleh intercept network requests, cache response, dan serve dari cache bila offline. Analogi: macam pembantu peribadi yang ingat semua maklumat dan boleh bagi tanpa perlu telefon bos.
HTTPS Bukan Pilihan — Ia Wajib: Service worker hanya register di laman yang guna HTTPS (atau localhost untuk development). Jadi deployment ke hosting dengan HTTPS adalah prasyarat. Ini pengajaran penting tentang keselamatan web moden.
AI Membuat PWA Mudah Diakses: Dulu, setup PWA manifest dan service worker adalah tugas rumit yang memerlukan rujuk dokumentasi panjang. Dengan AI, pelajar boleh hasilkan kod yang betul dalam beberapa saat. Fokus beralih dari "cara tulis kod" ke "apa yang PWA boleh buat".

Demo Script: Dari Web Biasa ke PWA (15 Minit)

Demo ini menggunakan projek dashboard dari Fasa 7 atau mana-mana web app HTML yang sedia ada. Pastikan projek sudah deploy ke HTTPS hosting.

Langkah 1: Buka Projek Sedia Ada

1. Buka projek HTML sedia ada di editor (VS Code / Cursor) 2. Buka index.html — pastikan ada struktur HTML yang lengkap 3. Buka di browser — tunjukkan rupa web app biasa 4. Buka Chrome DevTools (F12) → tab "Application" 5. Tunjukkan yang belum ada manifest atau service worker

Point penting: Tunjukkan bahawa tanpa PWA, web app ni tak boleh di-install ke phone. Kena buka browser, taip URL, guna internet. Selepas tambah PWA, semuanya berubah.

Langkah 2: Prompt AI untuk Manifest

1. Buka AI assistant (Claude/GPT/Copilot) 2. Prompt: "Tambah PWA manifest.json untuk web app saya. Nama app: Dashboard Saya Nama pendek: Dashboard Warna tema: #0b0d17 Background: #ffffff Ikon: guna placeholder emoji untuk 192x192 dan 512x512 Display: standalone (supaya buka macam app native) Orientation: any" 3. Copy output AI dan simpan sebagai manifest.json 4. Tambah link dalam index.html:

Langkah 3: Prompt AI untuk Service Worker

1. Prompt ke AI: "Tambah service worker untuk offline caching. Nama cache: dashboard-app-v1 Cache semua fail static (HTML, CSS, JS, gambar) Guna strategi 'Cache First, Network Fallback' Tambah 'install' event untuk pre-cache Tambah 'activate' event untuk cleanup cache lama Tambah 'fetch' event untuk serve dari cache" 2. Copy output AI dan simpan sebagai sw.js 3. Register service worker dalam index.html:

Tip Pengajar: Jika AI bagi output yang kompleks, minta AI explain setiap bahagian. Ini peluang untuk pelajar belajar membaca kod JavaScript debug. Guna AI sebagai "mentor" yang sentiasa ada.

Langkah 4: Test & Install

1. Refresh browser — buka DevTools → Application tab 2. Tunjukkan yang manifest dan service worker sekarang ada 3. Perhatikan status service worker: "Activated and running" 4. Klik tab "Manifest" — tunjuk semua info app ada di situ 5. Di address bar, akan ada install icon ( ) — klik! 6. Atau: ⋮ menu → "Install Dashboard Saya..." 7. PWA akan buka dalam standalone window — tiada address bar!

Jika install prompt tak muncul: Pastikan (1) HTTPS, (2) manifest.json sah, (3) service worker registered, (4) ada icon sekurang-kurangnya 192x192. Chrome juga mungkin tak tunjuk prompt jika PWA sudah di-install.

Demo Script: Install di Phone & Test Offline (15 Minit)

Demo ini memerlukan PWA yang sudah di-deploy ke HTTPS hosting. Gunakan phone pelajar atau phone sendiri.

Langkah 1: Deploy PWA ke Cloudflare Pages

1. Git push projek PWA ke GitHub 2. Buka dash.cloudflare.com → Workers & Pages 3. Connect repository → deploy 4. Dapatkan URL: https://pwa-saya.pages.dev

Langkah 2: Buka di Phone

1. Buka Chrome di phone 2. Taip URL PWA yang dideploy 3. Tunggu sebentar — Chrome akan detect PWA 4. Akan muncul "Add to Home Screen" banner (bawah skrin) 5. Kalau tak muncul: ⋮ menu → "Add to Home Screen"

Langkah 3: Install & Buka

1. Klik "Install" / "Add" 2. Phone akan tunjuk mockup — confirm install 3. Icon PWA akan muncul di home screen 4. Buka dari home screen — ia buka standalone 5. Tiada address bar, tiada tab — macam app native!

Langkah 4: Test Offline

1. Buka PWA di phone — pastikan semua content loaded 2. Turn off WiFi / Data / Flight Mode 3. Buka semula PWA dari home screen 4. Walaupun offline, app masih berfungsi! 5. Bandingkan dengan web biasa — web biasa akan tunjuk "No Internet"

Moment "Wow": Bila pelajar nampak PWA berfungsi offline, mereka akan teruja. Inilah saat mereka sedar kuasa PWA. Ambil screenshot atau video untuk disimpan sebagai portfolio.

Kesilapan Biasa Pelajar & Penyelesaian

1. "Install prompt tak muncul"

Masalah: Pelajar tak nampak "Add to Home Screen" prompt. Banyak sebab: service worker tak register, manifest tak sah, atau PWA dah di-install.

Penyelesaian: Buka DevTools → Application tab. Semak status service worker (mesti "activated"). Semak manifest — mesti tiada error. Guna Lighthouse audit untuk diagnosis automatik.

2. "Service worker tak register"

Masalah: Service worker fail to register. Biasanya due to: path salah, HTTPS tak wujud, atau JavaScript error dalam sw.js.

Penyelesaian: Pastikan path ke sw.js betul (relatif ke root). Pastikan hosting guna HTTPS. Buka Console di DevTools — tengok error message. Guna AI untuk debug: "Kenapa service worker saya tak register? Ini error: ..."

3. "Offline tak berfungsi"

Masalah: App tak jalan offline. Service worker tak cache dengan betul, atau cache strategy salah.

Penyelesaian: Test di DevTools → Network tab → check "Offline". Tengok apa yang gagal dimuat. Pastikan service worker guna strategi "Cache First" dan semua fail yang diperlukan di-cache. Update cache version bila ubah fail.

4. "Ikon PWA nampak pelik/blur"

Masalah: Ikon yang disediakan tak cukup besar (minimum 192x192) atau format tak sesuai.

Penyelesaian: Guna AI prompt: "Buat SVG ikon untuk PWA dalam saiz 192x192 dan 512x512 dengan tema [warna]". Atau guna tool dalam talian macam favicon.io atau pwa-asset-generator. Jangan guna gambar JPEG — guna PNG atau SVG.

5. "PWA buka dalam browser biasa, bukan standalone"

Masalah: Display mode dalam manifest tak betul atau tak di-set.

Penyelesaian: Dalam manifest.json, pastikan "display": "standalone" atau "fullscreen". Jangan guna "browser" (itu akan buka dalam tab biasa). Juga pastikan start_url menunjuk ke halaman yang betul.

6. "Push notification tak sampai"

Masalah: Push notification memerlukan VAPID keys dan backend server. Untuk beginner, ini mungkin terlalu kompleks.

Penyelesaian: Untuk sesi beginner, tunjuk cara setup notification dalam PWA yang sedang aktif (guna Notification API). Push notification dari server adalah topik advanced. Fokus pada yang boleh capai dulu.

Panduan Fasilitasi

Cara Membantu Pelajar yang Berbeza Level

  • Beginner: Fokus pada guna AI prompt untuk generate manifest dan service worker. Jangan dokong konsep kompleks. Biarkan AI handle kod — pelajar hanya kena faham apa itu PWA dan kenapa ia power.
  • Intermediate: Galakkan mereka baca output AI dan tanya soalan. "Kenapa AI buat macam ni?", "Apa jadi kalau kita ubah cache strategy?"
  • Advanced: Cabar mereka tulis service worker manual tanpa AI, atau optimise cache strategy. Bina feature lebih kompleks macam background sync, push notification dari server.

Strategi Pengajaran

  • Demo dulu, baru buat: Tunjukkan Demo 1 (web ke PWA dalam 15 minit) dulu. Pelajar kena nampak "magik" sebelum mereka buat sendiri
  • Pair programming: Satu pelajar pegang phone (test install), satu pegang keyboard (kod). Tukar selepas 15 minit
  • Show and tell: Minta setiap pelajar/share screenshot PWA di home screen. Buat group chat dan minta semua share URL. Ini sangat memotivasikan
  • "Celebrate the install": Bila pelajar berjaya install PWA di phone, buat "ceremony" kecil — tepuk tangan, high five, atau sticker dalam group chat
  • Gamification: Cabaran: "Siapa boleh buat PWA paling power dalam 1 jam?" atau "Siapa boleh tambah feature paling kreatif guna AI?"

Projek Lanjutan: Selepas sesi PWA, pelajar boleh bina projek akhir: Aplikasi Mobile sebenar menggunakan PWA — contoh: apps to-do list, note taking, habit tracker, atau inventory sistem. Dengan kuasa PWA + AI, mereka boleh hasilkan app yang nampak professional tanpa belajar React Native.