Cara membuat aplikasi pelacak kebiasaan dengan AI

Sebelum menulis prompt, tentukan versi paling kecil yang tetap berguna.

Untuk pelacak kebiasaan, biasanya itu berarti:

• layar beranda dengan kebiasaan hari ini
• cara menandai kebiasaan selesai atau dilewati
• layar untuk membuat atau mengedit kebiasaan
• tampilan progres sederhana seperti streak atau penyelesaian mingguan
• pengaturan dasar

Lalu tentukan data apa yang dibutuhkan setiap kebiasaan. Jaga tetap sederhana.

Model awal yang praktis:

• nama kebiasaan
• warna atau ikon
• frekuensi: harian, hari kerja, hari tertentu
• target: sekali per hari, beberapa kali, menit, gelas, repetisi
• current streak
• completion history

Tentukan juga apakah ini:

• prototipe personal untuk satu pengguna
• aplikasi dengan sign-in dan data tersimpan
• aplikasi berbayar dengan subscription

Jika Anda hanya ingin menguji ide, mulai tanpa akun atau pembayaran. Itu membuat build pertama lebih kecil dan lebih mudah ditinjau.

Di Moremade, Anda mendeskripsikan aplikasi dengan bahasa biasa dan agent AI menulis source code. Untuk website, sistem akan menghasilkan React dengan Tailwind. Untuk aplikasi mobile, sistem akan menghasilkan React Native dengan Expo.

Untuk pelacak kebiasaan, prompt pertama Anda sebaiknya mencakup:

• platform: web app atau mobile app
• layar inti
• aksi utama
• gaya visual
• apakah data boleh lokal dulu atau perlu backend

Contoh prompt pertama:

Build a mobile habit tracker app in React Native using Expo. I want a clean, simple interface with a home screen showing today's habits as cards with a checkbox or tap target to mark them complete. Add a create habit screen and an edit habit screen. Each habit should support a name, icon, color, frequency, and target count per day. Include a progress view with current streak and last 7 days completion. Start with local sample data only, no sign-in yet. Use a calm, minimal style with clear spacing and large tap targets.

Ini sudah cukup untuk mendapatkan struktur kerja pertama tanpa menjelaskan setiap pixel secara berlebihan.

Setelah generasi pertama, gunakan live preview untuk memeriksa aplikasi. Jangan mencoba memperbaiki semuanya dalam satu permintaan lanjutan yang besar. Kerjakan layar demi layar.

Perhatikan:

• apakah alur utama sudah lengkap
• apakah kartu kebiasaan mudah dipindai
• apakah target sentuh di mobile cukup besar
• apakah informasi progres mudah dipahami
• apakah label sesuai dengan cara pengguna memikirkan kebiasaan

Prompt lanjutan yang baik bersifat spesifik dan terbatas. Contohnya:

• "Ubah home screen agar kebiasaan dikelompokkan menjadi Morning, Afternoon, dan Evening."
• "Buat aksi penyelesaian menjadi tombol cek bulat yang lebih besar di sisi kanan setiap kartu kebiasaan, dan tampilkan current streak di bawah nama kebiasaan."
• "Tambahkan layar progres mingguan dengan grid 7 hari yang sederhana dan persentase penyelesaian minggu ini."

Moremade juga memiliki visual inspector dan code view, yang membantu saat Anda tahu tepat elemen mana yang perlu diubah. Gunakan chat untuk perubahan produk yang lebih luas, dan inspector saat Anda ingin menunjuk tombol, kartu, atau masalah jarak tertentu.

Pelacak kebiasaan sering membutuhkan progres yang tersimpan di berbagai perangkat. Jika itu penting, tambahkan Supabase setelah antarmuka dasar sudah masuk akal.

Supabase adalah connector bawaan yang relevan di sini karena mencakup:

• tabel database
• sign-in
• file storage jika nanti Anda menambahkan avatar atau upload

Urutan yang masuk akal adalah:

1. Bangun aplikasi dengan data lokal terlebih dahulu.
2. Pastikan layar dan interaksinya terasa tepat.
3. Hubungkan Supabase.
4. Minta Moremade mengganti data contoh lokal dengan data kebiasaan dan riwayat penyelesaian yang sesungguhnya.
5. Tambahkan sign-in jika pengguna membutuhkan data privat.

Untuk banyak pelacak kebiasaan, Stripe belum diperlukan di awal. Tambahkan Stripe hanya jika Anda benar-benar membangun produk berbayar, seperti subscription atau premium upgrade sekali bayar. Moremade mendukung checkout Stripe dengan harga yang Anda atur, tetapi itu menambah kompleksitas untuk versi pertama.

Jaga model database pertama tetap sederhana:

• users
• habits
• habit_completions

Biasanya itu sudah cukup untuk MVP yang dapat digunakan.

Walaupun aplikasi terlihat bagus di preview, pelacak kebiasaan digunakan dalam momen singkat dan berulang. Pengujian harus fokus pada kecepatan dan kejelasan.

Periksa hal-hal praktis berikut:

• Apakah kebiasaan bisa ditandai selesai dengan satu tap?
• Apakah alur tambah kebiasaan cukup singkat?
• Apakah streak dan riwayat mudah dibaca tanpa harus mencari-cari?
• Apakah tombol mudah ditekan di ponsel?
• Apakah aplikasi tetap masuk akal saat jumlah kebiasaan banyak?

Jika Anda membangun aplikasi mobile di Expo, perhatikan spacing, perilaku scroll, dan input formulir. Jika Anda membangun website, uji lebar mobile yang sempit dan pastikan layout tetap nyaman digunakan dengan ibu jari.

Prompt penyempurnaan yang berguna pada tahap ini:

• "Kurangi jumlah tap yang diperlukan untuk membuat kebiasaan baru."
• "Buat home screen lebih cocok untuk lebar ponsel kecil dengan spacing lebih besar dan navigasi bawah yang tetap."
• "Tampilkan jumlah penyelesaian hari ini di bagian atas dan redupkan kebiasaan yang sudah selesai secara visual."

Tahap pengujian ini biasanya menemukan masalah produk lebih awal dibanding pemolesan visual.

Setelah aplikasi layak dipakai, publikasikan. Moremade dapat mem-publish dalam satu klik ke subdomain gratis yourname.moremade.ai. Itu pilihan default yang baik untuk demo, pengujian pengguna, atau berbagi dengan kolaborator.

Jika Anda butuh alamat dengan branding sendiri, paket berbayar mendukung custom domains. Domain juga bisa dibeli langsung di dalam Moremade.

Sebelum publish, lakukan pengecekan rilis singkat:

• hapus placeholder text dan label palsu
• pastikan tombol utama berfungsi
• konfirmasi koneksi Supabase menggunakan project yang benar
• uji sign-in dan sign-out jika diaktifkan
• verifikasi judul aplikasi dan metadata dasar

Karena Moremade memungkinkan Anda mengekspor source code lengkap sebagai ZIP atau mengirimnya ke GitHub, publish tidak berarti terkunci. Anda bisa terus iterasi di Moremade atau memindahkan kode ke tempat lain nanti.

Masalah yang sering muncul biasanya bukan teknis. Masalah itu datang dari membangun terlalu banyak hal terlalu cepat.

Hindari kesalahan berikut:

• Memulai dengan akun, pembayaran, pengingat, fitur sosial, dan analytics sekaligus. Bangun dulu pembuatan dan penyelesaian kebiasaan.
• Menulis prompt yang samar. "Buat aplikasi pelacak kebiasaan" terlalu luas. Sebutkan layar, aksi, dan field data.
• Mengubah terlalu banyak hal dalam satu prompt. Permintaan kecil menghasilkan hasil yang lebih jelas dan lebih mudah diverifikasi.
• Mendesain untuk pengguna ideal yang hanya punya tiga kebiasaan. Periksa apa yang terjadi saat ada sepuluh atau dua puluh kebiasaan.
• Melewatkan export. Unduh ZIP atau kirim ke GitHub setelah mencapai versi yang stabil.
• Mengabaikan riwayat versi. Simpan checkpoint yang bermakna sebelum perubahan besar.

Rilis pertama yang baik adalah versi yang memungkinkan pengguna menambah kebiasaan, menyelesaikannya, dan memahami progres terbaru tanpa penjelasan.