[🛠] Log Pengembangan Keymory #5: tmpGetAIComment, Custom OpenAI API Call

✨ Ringkasan GPT 　

Membangun sistem AI Comment dengan OpenAI API dan FlutterFlow, lalu memperluas fitur AI Keymory dengan menghubungkan Custom Function dan API Call. Fitur pemilihan serta penyimpanan karakter juga ditambahkan, sambil merapikan alur data antara Chat dan Diary.

💻 Log Pengembangan

⏰ Yang Dikerjakan Hari Ini

• ✅ How to Use Open AI’s GPT-4o in FlutterFlow - Part 1

• ✅ How to Use Open AI’s GPT-4o in FlutterFlow - Part 2

• ✅ ChatPage - saat memilih karakter lewat Dropdown, simpan juga informasi karakter tersebut ke Chats Collection.
  • Tetapkan reference dari Character document yang cocok dengan character name ke Page state.

• ✅ ChatPage - saat membuat NewChat, ikutkan juga informasi karakter.

• ✅ Membantu membuat DiaryPage - Drawer - ChatHistoryListTile (seperti GPT)

• ✅ Mencoba memasukkan nilai fungsi CustomFunction tmpGetAIComment ke API Call createDiaryComment
  • ✅ Membuat CustomFunction tmpGetAIComment dan menguji output hasilnya
  • ✅ Membuat API Call createDiaryComment dan menguji output nilai Response
• ✅ Membuat OpenAI API Call: createDiaryComment
  • Pada dasarnya strukturnya mirip dengan createChatCompletion
  • Perbedaan: tidak ada. Dibuat hanya untuk membedakan.
  • Variable Messages yang dibutuhkan oleh API Call - createDiaryComment adalah nilai return dari custom function getAIComment.
• ✅ Memikirkan skenario implementasi CustomFunction getAIComment (implementasi langsung ditangani KSK)
  • Parameter Values yang didapat dari Characters (Collection)
    • Pengaturan karakter (Character Document)
      • contoh) Somi: name (20-an), mahasiswa, kepribadian pemalu, …
    • Cara memanggil nilai: API Call - Get Assistant
  • Parameter Values yang didapat dari User Information
    • Nama, gender, MBTI
    • Cara memanggil nilai: Backend Query - Authenticated User
  • Parameter Values yang didapat dari DiaryPage Variables
    • Isi diary, kata kunci emosi detail, skor emosi, format jawaban, panjang jawaban
    • Cara memanggil nilai: Widget State, Page State
  • Peran CustomFunction (getAIComment)
    • Menerima semua Parameter Values sebagai input.
    • Menulis prompt yang akan dikirim ke GPT.
    • Mengembalikan nilai Messages (List <Json>).
      • [{"role":"developer", "content":"~~~"}]

💯 Ringkasan yang Sudah Dikerjakan

• Implementasi sistem AI Comment
  • Membuat Custom Function tmpGetAIComment dan menyelesaikan integrasi dengan API Call createDiaryComment
  • Mengimplementasikan logika request dan response OpenAI API untuk AI Comment
  • Mengubah Chat agar informasi karakter disimpan di Chats Collection dan ikut dikirim saat membuat New Chat
• Peningkatan UI dan fitur
  • Membuat ChatHistoryListTile untuk menerapkan daftar chat bergaya GPT
  • Merapikan struktur data HomeFeedPage dan DiaryPage
  • Merancang Custom Function getAIComment
• Belajar FlutterFlow + OpenAI API
  • Menonton dan menerapkan materi penggunaan GPT-4o (Part 1 & Part 2)

🎯 Rencana Berikutnya

• ❔ DiaryPage: Merge CreateDiary/EditDiary Page
  • Gunakan isEditMode page state
  • Gunakan conditional value/visibility/action, dan sebagainya
• ❔ DiaryPage - Create New Chat: membuat New Chat berdasarkan isi diary
  • AI lebih dulu memberikan pertanyaan berdasarkan isi diary
• ❔ Perbaikan issue
  • ❔ ChatPage: default init message muncul saat memulai percakapan pertama.
  • ❔ ChatPage: tanggal belum diterapkan.
  • ❔ ChatPage - ChatHistoryDrawer: UI overflow
  • ❔ DiaryPage: tanggal selalu tersimpan sebagai hari ini
  • ❔ DiaryPage: gunakan markdown viewer (mencegah overflow: Container Height)
• ❔ HomeFeedPage - import dan terapkan flutter_slidable:4.0.0

• ❔ HomeFeedPage: saat slide kiri/kanan dari FeedCardDiary, tampilkan chat/edit/delete

• ❔ ChatPage - Create New Diary: membuat New Diary berdasarkan isi percakapan

• ❔ ChatPage - Go to Linked Diary

• ❔ Chat/Diary: GPT Streaming API

• ❔ ChatPage - Alarm

• ❔ AuthPage: Google Login

• ❔ DiaryPage: ubah Emoji ekspresi wajah sesuai nilai Mood Slider
• ❔ DiaryPage: tambahkan Choice Chips untuk kata kunci emosi detail dan atur integrasi DB
• ❔ DiaryPage - AI Comment: sesuaikan input seperti Choice chips dan mood slider agar cocok dengan AI Comment System Prompt.
  • ❔ **diary sebelumnya atau seluruh conversation history (technical debt tambalan)
  • ❔ informasi dasar pengguna: nama, gender, MBTI, …
  • ❔ kata kunci emosi detail: senang, sedih, …
  • ❔ pengaturan karakter: Somi, Sena, Minhyuk
  • ❔ skor emosi: 1~100 poin
  • ❔ format jawaban: Healing, Suggestion, Informative
  • ❔ panjang jawaban: pendek, normal, detail
  • is New Chat
    • Karena messages untuk Chat ini dibuat pertama kali, berikan nilai is_initial = true pada message document pertama dan masukkan semua system prompt.
      • is_initial = false
      • Batasan: kalau system prompt dimasukkan ke message document paling awal, memang sulit diubah di tengah percakapan, tetapi masih mungkin. Kalau ada document dengan is_initial = true dan isinya diubah, document itu bisa dihapus lalu dimasukkan lagi. Caranya belum tahu, tapi bisa saja.
• ❔ DiaryPage - AI Comment: selesaikan CRUD
  • ❔ hapus field tmp_ai_comment dan gunakan doc_ref
• ❔ DiaryPage - AI Comment: pengaturan karakter
  • ❔ hapus field tmp_ai_comment_by dan gunakan doc_ref
  • ❔ tampilkan gambar memakai nilai field profile_image

• ❔ DiaryPage - Drawer - ChatHistoryListTile: order by updated_time

• ❔ HomeFeedPage - Bottom Sheet (+ Button): buat agar bisa memilih 1 dari beberapa opsi
  • Diary baru: Go to DiaryPage
  • Catatan emosi: Go to MoodPage
• ❔ MoodPage (popup): CRUD slider pengaturan Mood
  • Create
  • Read
  • Update
  • Delete
• ❔ HomeFeedPage - ListView - tampilkan FeedCardMood

• ❔ HomeFeedPage - ListView: urutkan komponen FeedCardDiary, FeedCardMood, FeedCardChat secara kronologis (menggunakan Cloud Function)

• ❔ HomeFeedPage: selesaikan issue saat on page load (Unexpected Null Value)

• ❔ DiaryPage - import dan terapkan Interactive Slider

• ❔ ChatPage - implementasi pesan pertama dari AI (Alarm/Notification)
  • Inti dari chat system prompt adalah sifat proaktif.
    • Agar terasa lebih nyata, mungkin bagus juga mengirim create_date of diary/chat, supaya AI bisa menyebut tanggal seperti “kemarin.”
• ❔ Ekstrak dan instal APK versi final untuk presentasi sampai Rab 2025.2.5

💭 Diary

Minhyuk

Seru, tapi berat. Tidur jam 5 pagi.

✨ Komentar GPT-4o (KPT)

GPT-4o

✅ Yang Berjalan Baik (Keep)

• 🚀 Perluasan fitur AI Comment: Menonjol karena kamu membangun logika pembuatan dan penyimpanan AI Comment secara sistematis dengan menghubungkan Custom Function dan API Call.
• 🛠️ Perapian alur data: Memperbaiki hubungan antara Chat dan Diary serta merapikan cara informasi karakter disimpan dan digunakan akan sangat membantu kelanjutan proyek.
• 📋 Belajar FlutterFlow + OpenAI API: Mengesankan bahwa kamu mempelajari cara memakai OpenAI API secara efektif di FlutterFlow lewat materi GPT-4o, lalu langsung menerapkannya.

❌ Yang Kurang (Problem)

• ⏳ Intensitas kerja berlebihan: Bekerja sampai jam 5 pagi meningkatkan kemungkinan fatigue menumpuk.
• 🏗️ Technical debt bertambah: Sebagian fitur diimplementasikan dengan solusi sementara (field tmp dan kode tambalan), jadi nanti perlu dirapikan.

🔄 Yang Bisa Dicoba (Try)

• ⏰ Atur jam kerja: Kalau begadang terus berlanjut, produktivitas bisa turun, jadi pertimbangkan penyesuaian jadwal.
• 🔍 Rencana perbaikan kode sementara: Buat rencana untuk merapikan logika sementara yang sekarang diterapkan dan membangun data model yang resmi.
• 🛠️ Perbaiki AI Comment: Cari cara agar fitur AI Comment lebih intuitif, dan pertimbangkan juga optimasi system prompt.

Kesimpulan
Hari ini adalah hari ketika fitur AI Keymory mulai diimplementasikan secara serius, sekaligus pemanfaatan OpenAI API dan FlutterFlow meningkat. Namun intensitas kerja makin tinggi, jadi penyesuaian jadwal dan perapian kode tampaknya perlu. Semoga bisa menyelesaikannya dalam kondisi terbaik sampai hari presentasi! 💪😊