[🛠] Membangun MVP aplikasi diet dan pencatatan makanan di dalam blog

✨ Ringkasan GPT-5.6 Sol 　

Catatan tentang mengubah log makanan yang terus terisi otomatis tetapi bahkan tidak saya baca menjadi aplikasi kecil di dalam blog, lalu memakainya sendiri dan terus memperbaikinya sebagai MVP.

Versi 1: datanya banyak, tetapi sangat sulit dibaca

Saya mulai mencatat data tubuh dan makanan yang saya konsumsi pada 20 Juni 2026.

Menulis catatannya sendiri tidak sulit. Saya hanya perlu mengunggah foto makanan, lalu Codex mencari data nutrisinya di FatSecret, mencatatnya, dan menambahkan hyperlink. Masalahnya, tampilannya sangat sulit dibaca. Saya sendiri tidak membacanya, jadi kemungkinan orang lain pun tidak.

Versi 2: menyembunyikan rincian makanan dan menambahkan 7 hari terakhir

Saya mengubah formatnya mulai 10 Juli 2026.

Rincian makanan saya sembunyikan di balik fungsi buka-tutup dan saya ubah menjadi arsip yang terutama digunakan AI untuk membaca cepat. Saya juga memperbaiki keterbacaan keseluruhan dan menambahkan perubahan selama 7 hari terakhir. Setelah itu, catatan ini mulai memberi umpan balik yang berguna bagi saya sendiri.

“Jadi inilah jumlah kalori yang sebenarnya saya konsumsi, dan karena itu berat badan saya berubah seperti ini.” Informasinya mulai terlihat.

Namun, semuanya tetap belum mudah dipahami dalam sekali lihat. Saya merasa penyebabnya adalah format yang terlalu berbasis teks. Karena bagaimanapun saya bisa meminta Codex membuatnya, saya mulai berpikir untuk menanamkan penampil kecil bergaya aplikasi langsung di dalam halaman.

Versi 3: aplikasi kecil di dalam blog membuat catatan jauh lebih mudah dibaca

Mulai hari ini, saya mengubahnya menjadi seperti ini.

Saya menjelaskan satu per satu fitur yang saya inginkan kepada Codex dan terus memberikan umpan balik. Dalam satu jam, hasil yang saya harapkan sudah berjalan di dalam postingan.

Setelah ditampilkan seperti layar aplikasi, saya bisa langsung melihat jenis makanan yang saya konsumsi pada setiap waktu dan makanan apa saja yang saya makan. Evaluasi diri pun menjadi jauh lebih mudah. Rasanya cukup mirip dengan Pillyze, aplikasi yang dulu sering saya gunakan.

Data dicatat di front matter dan antarmuka digambar dengan Liquid

Hasilnya memang terlihat seperti aplikasi, tetapi saya tidak membuat aplikasi terpisah untuk memasukkan data. Saya menulis data body_review dalam YAML di front matter pada bagian atas Markdown setiap Daily Review.

body_review:
  today:
    exercise:
      aerobic: []
      anaerobic: []
    nutrition:
      complete: true
      meals:
        - type: lunch
          foods:
            - name: Nasi dengan tumis daging babi pedas
              calories_kcal: 779
              macros_g:
                carbohydrate: 115.13
                protein: 29.85
                fat: 21.41

Alih-alih mengulang HTML di setiap postingan, isi artikel hanya memanggil penampil bersama satu kali melalui {% include %} milik Liquid.

{% include body-review.html review=page.body_review %}

Saat Jekyll melakukan build, page.body_review diteruskan ke _includes/body-review.html, lalu kartu, catatan olahraga, tab makanan, dan grafik makronutrien dirender di sana. Jika tidak ada catatan pada waktu tertentu, seperti sarapan atau makan larut malam, tab tersebut tidak dibuat sama sekali. Setelah kalori dan makronutrien setiap makanan dicatat, renderer menghitung total per waktu makan, total keseluruhan, dan persentasenya. Rating dan penilaian kebiasaan makan tidak dihitung sendiri oleh tampilan; Codex menilainya dari sudut pandang diet, lalu nilainya saya simpan langsung di front matter.

Dengan demikian, Daily Review berikutnya hanya perlu diisi dengan data hari itu tanpa menyalin ulang kode UI yang sama.

Dogfooding MVP

Saya akan terus menggunakannya dan memperbaiki bagian yang masih terasa tidak nyaman. Saya juga mulai berpikir bahwa suatu saat nanti saya mungkin bisa merilis layanan terkait yang terhubung antara web dan aplikasi.

Pada dasarnya, ini adalah MVP di dalam blog sebelum masuk ke pengembangan aplikasi penuh, sekaligus proses dogfooding¹. Setiap kali ada waktu, saya ingin membangun aplikasi native dan web sedikit demi sedikit dengan Codex dan Flutter, lalu pada akhirnya membuat datanya dapat disematkan di dalam blog.

Referensi

1. Dogfooding adalah praktik ketika pembuat produk menggunakan produk yang sedang dikembangkan di lingkungan nyata untuk memeriksa nilai dan kemudahan penggunaannya. Penjelasan Lean Product di Microsoft Azure DevOps Blog juga menggambarkannya sebagai proses menggunakan produk sendiri sebelum MVP disempurnakan lebih lanjut. ↩