Baby Movement Tracker dengan Cloudflare Pages

Saya baru sahaja menyiapkan satu lagi projek sampingan - aplikasi pengesan pergerakan bayi (Baby Movement Tracker) yang dibina sepenuhnya menggunakan Cloudflare Pages dan D1 database.

Demo: https://baby-kick.hafism.xyz

Ciri-ciri Utama

Ciri	Keterangan
Butang “Kick!”	Butang besar untuk rekod tendangan dengan satu tap
Dashboard	Paparan kalendar dengan statistik mingguan/bulanan
Sejarah	Paparan sejarah yang boleh dikembangkan dengan masa tendangan
Multi-user	Sokongan berbilang pengguna (berasaskan device, tanpa login)
Dark mode	Sokongan tema gelap (automatik)
PWA ready	Boleh dipasang pada telefon
Real-time	Kemas kini counter secara langsung
Tracking	Penjejakan completion dengan timestamp

Paparan Aplikasi

Halaman Count

Halaman utama memaparkan butang “Kick!” yang besar untuk memudahkan ibu merekod setiap tendangan bayi. Counter menunjukkan berapa banyak tendangan telah direkod hari ini.

Halaman Dashboard

Dashboard memaparkan paparan kalendar dengan warna berbeza mengikut status harian - hijau untuk hari yang mencapai 10 tendangan, kuning untuk hari yang belum lengkap.

Halaman History

Paparan sejarah menunjukkan rekod 30 hari terakhir dengan kemampuan untuk mengembangkan setiap hari dan melihat masa setiap tendangan direkod.

Sokongan Multi-User

Aplikasi ini menggunakan device-based anonymous ID untuk sokongan berbilang pengguna:

Setiap device secara automatik mendapat ID unik yang disimpan dalam localStorage
Tiada login atau pendaftaran diperlukan
Setiap pengguna hanya melihat data mereka sendiri
URL yang sama berfungsi untuk semua orang
Data diikat kepada device/browser

Nota: Jika anda clear browser data atau guna private mode, ID pengguna baru akan dijana.

Struktur Projek

baby-movement-tracker/
├── wrangler.toml          # Cloudflare Pages config
├── schema.sql             # D1 database schema (multi-user)
├── functions/             # Cloudflare Pages Functions (API)
│   └── api/
│       ├── kick.js        # POST /api/kick
│       ├── today.js       # GET /api/today
│       ├── history.js     # GET /api/history
│       └── session/
│           └── [date].js  # GET /api/session/:date
└── public/                # Static files
    ├── index.html
    ├── styles.css
    ├── app.js
    ├── manifest.json
    └── icon.svg

Deploy ke Cloudflare Pages

# 1. Clone repository
git clone https://github.com/xhafism/baby-movement-tracker.git
cd baby-movement-tracker

# 2. Login ke Cloudflare
npx wrangler login

# 3. Cipta D1 database
npx wrangler d1 create baby-tracker-db

# 4. Kemaskini wrangler.toml dengan database_id dari langkah 3

# 5. Jalankan migrations pada remote database
npx wrangler d1 execute baby-tracker-db --remote --file=./schema.sql

# 6. Deploy ke Pages
npx wrangler pages deploy public --project-name=baby-movement-tracker

Development Lokal

# Jalankan local database migrations
npx wrangler d1 execute baby-tracker-db --file=./schema.sql

# Start development server (Pages mode)
npx wrangler pages dev public

Buka http://localhost:8788 dalam browser.

Deploy via Cloudflare Dashboard

Fork repository ini ke GitHub
Pergi ke Cloudflare Dashboard → Workers & Pages → Create
Pilih Pages → Connect to Git → Pilih repository
Konfigurasi:
- Build command: (biarkan kosong)
- Build output directory: public
Cipta D1 Database:
- Pergi ke Workers & Pages → D1 → Create database
- Nama: baby-tracker-db
- Jalankan migration: npx wrangler d1 execute baby-tracker-db --remote --file=./schema.sql
Tambah D1 Binding:
- Pergi ke Pages project → Settings → Functions → D1 Database Bindings
- Variable name: DB
- Database: baby-tracker-db
Redeploy

API Endpoints

Semua endpoints memerlukan user_id (dihantar secara automatik oleh frontend).

Method	Endpoint	Keterangan
POST	`/api/kick`	Rekod tendangan (body: `{user_id}`)
GET	`/api/today?user_id=xxx`	Dapatkan sesi hari ini
GET	`/api/history?user_id=xxx`	Dapatkan 30 hari terakhir
GET	`/api/session/:date?user_id=xxx`	Dapatkan tarikh tertentu

Tech Stack

Komponen	Teknologi
Backend	Cloudflare Pages Functions
Database	Cloudflare D1 (SQLite)
Frontend	Vanilla HTML/CSS/JavaScript
Styling	Custom CSS dengan pink/coral gradient theme
Multi-user	Device-based anonymous ID (localStorage)

Kesimpulan

Baby Movement Tracker adalah contoh aplikasi yang simple tetapi berguna, dibina sepenuhnya dengan Cloudflare stack:

Zero server management - Serverless sepenuhnya
Fast globally - Edge network CDN
Free tier friendly - Sesuai untuk projek peribadi
PWA ready - Boleh dipasang sebagai app

Source code boleh didapati di GitHub. Sebarang soalan, boleh hubungi saya di X (@xhafism) atau Threads (@haf.ism).

Artikel ini adalah sebahagian daripada siri “Building with Cloudflare” di mana saya berkongsi pengalaman membina aplikasi menggunakan edge computing.