OfflineNotes

สร้าง OfflineNotes แอปโน้ตแบบ local-first ที่ทำงาน offline ได้เต็มรูปแบบ โน้ตอยู่ใน IndexedDB, CRDT engine แบบ Rust→WASM merge การแก้ไขพร้อมกันแบบ conflict-free, Service Worker ทำให้เป็น PWA ที่ติดตั้งได้ และ sync server บาง ๆ คอยให้ทุกอุปกรณ์ตรงกันตอนคุณกลับมา online

เริ่มที่นี่ ดู architecture

สิ่งที่คุณจะสร้าง

Introduction

ทำไมต้อง OfflineNotes, คอร์สนี้จัดโครงสร้างอย่างไร และคุณจะสร้างอะไรได้บ้างเมื่อจบ Open →

Setup & Tooling

Astro, TypeScript และ toolchain แบบ Rust→WASM (wasm-pack) ใน pnpm workspace Open →

App Shell

สร้าง Astro app shell และ Web Components ชุดแรกสำหรับ UI ของโน้ต Open →

IndexedDB Foundation

ห่อ IndexedDB ไว้ใน store ที่มี type สำหรับโน้ตและ local op log ของโน้ต Open →

The Notes UI

สร้าง แก้ไข และลบโน้ต markdown ในรูปของ Web Components ที่หนุนหลังด้วย IndexedDB Open →

Rust → WASM Toolchain

compile Rust เป็น WASM ด้วย wasm-bindgen แล้วเรียกจาก TypeScript Open →

A CRDT in Rust

สร้าง CRDT: LWW register สำหรับ field และ sequence CRDT สำหรับ body Open →

Wiring the WASM Core

ป้อน edit ในเครื่องผ่าน WASM CRDT แล้ว persist op ที่ได้ลง IndexedDB Open →

Service Worker (Offline)

precache app shell ให้ OfflineNotes ทำงาน offline ได้เต็มรูปแบบและติดตั้งเป็น PWA Open →

The Sync Server

สร้าง Hono server บาง ๆ ที่เก็บและส่งต่อ CRDT op ของแต่ละโน้ต Open →

Push & Pull Sync

push op ในเครื่อง, pull op จากที่อื่น แล้ว merge ด้วย WASM engine Open →

Background Sync

เลื่อน sync ออกไปตอน offline แล้ว retry อัตโนมัติเมื่อกลับมามีเน็ต Open →

Conflict-free Merge

ดู client สองตัวแก้โน้ตเดียวกันตอน offline แล้ว merge โดยไม่มี conflict เลย Open →

Deployment

ปล่อย PWA กับ sync server ขึ้น production และผ่านการตรวจ installability Open →

Wrap-up

ทบทวนสิ่งที่คุณสร้าง, trade-off ต่าง ๆ และจะพา OfflineNotes ไปต่อทางไหน Open →