Claude Workflow
📘 Dokumentasi Internal

Claude Workflow

by Wildan Pratama

Kumpulan panduan proses kerja menggunakan Claude — mulai dari pengembangan aplikasi hingga topik-topik lain yang akan menyusul.

⌕
Daftar Topik
Tidak ada topik yang cocok dengan pencarian.
Topik baru akan ditambahkan di sini seiring waktu.
Panduan

Bagaimana Membuat Website dengan Claude Code

Alur kerja end-to-end untuk membangun aplikasi menggunakan Claude — mulai dari penyusunan requirement, pengembangan lokal, hingga deployment ke production.

Inti alurnya: requirement disusun lebih dulu (PRD) → dipecah menjadi fase sesuai batas token → development & pengujian dilakukan di lokal sampai stabil → publikasi ke GitHub dan deployment ke Cloudflare dilakukan di tahap akhir.

Alur Kerja Development

7 Tahap
01

Penyusunan PRD (Product Requirement Document)

PRD disusun sebelum development dimulai dan menjadi acuan utama sepanjang proses.

  • Functionality — seluruh fitur, alur pengguna, dan skenario edge case dijabarkan secara rinci.
  • Design language — acuan visual, misalnya gaya Apple yang modern dan minimalist, termasuk tipografi yang dipakai.
  • Responsivitas — dinyatakan secara eksplisit apakah aplikasi mobile-responsive atau desktop-only.
  • Strategi produksi — hosting di Cloudflare, database di Neon, repository di GitHub.
  • Alur kerja — development dilakukan di lokal terlebih dahulu; publikasi ke GitHub dan deployment ke Cloudflare dilakukan di tahap akhir.
02

Pembagian Fase Pengembangan

PRD dianalisis dan dipecah menjadi fase-fase yang proporsional terhadap batas token Claude Pro.

  • Setiap fase memiliki cakupan pekerjaan yang jelas dan dapat diselesaikan dalam satu sesi.
  • Strategi resume disiapkan sejak awal, sehingga jika sesi terhenti di tengah proses, fase berikutnya dapat dilanjutkan tanpa kehilangan konteks.
03

Pengembangan Database & Environment Lokal

Development dimulai sesuai urutan fase, umumnya diawali dengan pembangunan struktur database.

  • Skema database disusun dalam satu single SQL query agar dapat dieksekusi sekaligus di Neon.
  • Setelah database siap, development dilanjutkan di lingkungan lokal.
  • Publikasi ke GitHub tidak dilakukan pada tahap ini — repository baru dibuat pada tahap akhir (lihat Tahap 5).
04

Pengujian di Lingkungan Lokal

Seluruh pengujian dilakukan secara lokal karena setiap perbaikan dapat langsung diverifikasi.

  • Server backend dan frontend dijalankan melalui terminal.
  • Aplikasi diakses melalui localhost pada port yang sesuai.
  • Setiap ada perbaikan, browser di-hard refresh dengan Cmd + Shift + R.
$ npm run dev
→ Local: http://localhost:5173
05

Publikasi ke GitHub

Setelah aplikasi stabil di lokal dan terhubung dengan database, kode dipublikasikan ke GitHub.

  • Repository baru dibuat dan diatur sebagai private.
  • Kode di-push ke repository tersebut.
06

Konfigurasi Cloudflare

Cloudflare dikonfigurasi sesuai kebutuhan proyek, baik frontend-only maupun dengan komponen backend.

  • Konfigurasi mencakup pengaturan build, environment variable, dan koneksi ke repository GitHub.
  • Setelah konfigurasi selesai, setiap git push otomatis memicu deployment ke Cloudflare.
$ git push origin main
→ Cloudflare Pages: build triggered ✓
07

Debugging dengan Chrome DevTools

Chrome digunakan sepanjang development karena menyediakan developer mode yang lengkap.

  • Tab Console untuk memeriksa error log.
  • Tab Network untuk menganalisis penyebab loading time yang lambat.

Tech Stack Referensi

Quick reference

🗄️ Database

Neon Postgres — schema dibuat melalui satu single SQL query pada awal fase development.

🐙 Repository

GitHub, repository baru per proyek, selalu diatur sebagai private. Publikasi dilakukan di tahap akhir.

☁️ Hosting

Cloudflare Pages — auto-deploy setiap push, mendukung konfigurasi frontend-only maupun frontend + backend.

🧑‍💻 Dev Environment

Local dev server (frontend dan backend berjalan bersamaan), diakses melalui Chrome untuk memanfaatkan DevTools.

Tips & Praktik Terbaik

Terus ditambah
⌘⇧R

Hard refresh setelah setiap perbaikan

Browser sering menyimpan cache aset lama — hard refresh memastikan perubahan terbaru benar-benar termuat.

SQL

Satu query untuk seluruh schema

Menggabungkan seluruh CREATE TABLE dalam satu file/perintah membuat eksekusi di Neon lebih sederhana dan konsisten.

Praktik tambahan akan dilengkapi secara berkala seiring proses pengembangan berjalan.
← Kembali ke Daftar Topik