[🛠] Log Pengembangan Keymory #8: Membangun Sistem Kata Kunci Emosi DiaryPage, Pengaturan Karakter AI Comment

✨ Ringkasan GPT 　

Fitur pemilihan kata kunci emosi ditambahkan ke DiaryPage, lalu respons yang lebih natural diimplementasikan dengan menerapkan pengaturan karakter pada AI Comment.

💻 Log Pengembangan

⏰ Yang Dikerjakan Hari Ini

• ✅ DiaryPage: menambahkan ChoiceChip dan TextField kata kunci emosi
  • ✅ Membuat widget
  • ✅ Menambahkan diaries DB Field: mood_keywords (List <String>), mood_keywords_description (String)
  • ✅ Menambahkan diaries Page State: moodKeywordsSelected (List <String>)
  • ✅ OnPageLoad: mengirim variable yang baru ditambahkan
    • ✅ ChoiceChipRate(5~1): mengirim nilai diariesDoc.mood_keywords ke masing-masing ChoiceChip yang sesuai.
      • MoodKeywordRate5Options, …, MoodKeywordRate1Options List <String> didefinisikan sebagai nilai App Constant
        • Enum hanya mendukung bahasa Inggris, jadi perlu fitur terjemahan. Terlalu rumit, maka ditolak.
      • Define Options Var: AppConstant.moodKeywordRate5Options (List <String>)
      • Initially Selected: updateChoiceChipSelected
    • ✅ Membuat CustomFunction updateMoodKeywordsSelected
      • On Page Load: Select all matching items in RateOptions List

      List<String> updateChoiceChipSelected(
        List<String> moodKeywordsSelected, // daftar keyword yang sedang dipilih
        List<String> moodKeywordRateOptions, // opsi yang bisa dipilih untuk Rate saat ini
      ) {
        // Buat daftar baru untuk menjaga immutability
        return List<String>.from(
          moodKeywordsSelected.where((item) => moodKeywordRateOptions.contains(item))
        );
      }
      

  • ✅ On ChoiceChip Selected: Update Page State moodKeywordsSelected -> Set Value to Return of Func updateMoodKeywordsSelected
    • ✅ Membuat CustomFunction updateMoodKeywordsSelected
      • On Chip Select: Add to moodKeywordsSelected
      • On Chip Deselect: Remove from moodKeywordsSelected

      List<String> updateMoodKeywordsSelected(
        List<String> moodKeywordsSelected,
        List<String> choiceChipSelected,
        List<String> moodKeywordRateOptions,
      ) {
        // Salin daftar yang ada untuk menjaga immutability
        List<String> updatedList = List.from(moodKeywordsSelected);
      
        // 1️⃣ Hapus nilai dari pilihan lama yang termasuk Rate ini
        updatedList.removeWhere((item) => moodKeywordRateOptions.contains(item));
      
        // 2️⃣ Tambahkan nilai ChoiceChip yang sedang dipilih
        updatedList.addAll(choiceChipSelected);
      
        return updatedList;
      }
      

• ✅ (Issue) DiaryPage - AI Comment: pengaturan karakter
  • Menambahkan diaries DB Field: ai_comment_by (Doc Ref: Character)
  • DiaryPage - AICommentEditor Component - Return ai_comment_content + ai_comment_by
    • How? -> membuat DataType aiCommentPageReturnObject
  • On ChoiceChipChar Selected: Backend Query Character Doc with same Official_name value.
• ✅ (Issue) HomeFeedPage - FeedCardDiary: menerapkan gambar karakter AI Comment dengan benar
  • ✅ DiaryPage - AI Comment: saat Save, simpan juga Ref karakter yang menulis komentar ke Diary.
  • ✅ HomeFeedPage - FeedCardDiary - AI Image: muat Character Doc dengan Backend Query lalu tentukan Image Path.
  • ✅ (Issue) HomeFeedPage - FeedCardDiary: Unexpected Null Value Error
    • Ini muncul kalau hanya memasukkan nilai Path ke Image Widget…
      • Ah!!! Ternyata terjadi karena Default Variable Value belum dimasukkan. Baru sadar setelah susah payah.
    • 💡 Yang dipelajari
      • Biasakan untuk selalu memasukkan Default Value. Entah sudah berapa kali melihat Unexpected Null Value Error di mana-mana.
• ✅ Design Action chains for CreateNewChatFromDiary (Start From: setelah proses AI Comment dan penyimpanan diary selesai)
  1. Create Diary
  2. API Call: createDiarySummary -> Output Var: OutVar1 (nama sementara)
  3. Create New Chat Document
  4. Create New Message Document: {“role”:”developer”, “content”:”$systemprompt + $OutVar1”}
  5. API Call: createChatFromDiary -> Output Var: OutVar2 (nama sementara)
  6. Create New Message Document: {“role”:”assistant”, “content”: “$OutVar2”}
  7. Navigate To: kirim relevant Chat Document Reference sebagai chatRefParam

💯 Ringkasan yang Sudah Dikerjakan

• Membangun sistem kata kunci emosi DiaryPage
  • Menambahkan ChoiceChip dan TextField
  • Menambahkan field terkait kata kunci emosi ke diaries DB
  • Mengimplementasikan fungsi updateMoodKeywordsSelected
• Pengaturan dan penerapan karakter AI Comment
  • Menambahkan field ai_comment_by untuk menyimpan karakter komentar
  • Mengubah AICommentEditor agar menyertakan informasi karakter
  • Saat ChoiceChip dipilih, data karakter terkait dimuat dengan Backend Query
• Menyelesaikan error gambar AI Comment di HomeFeedPage
  • Menyimpan nilai referensi karakter saat menulis AI Comment
  • Memperbaiki cara loading gambar karakter AI Comment di HomeFeedPage
  • Memperbaiki error Unexpected Null Value (dengan menerapkan nilai default)

🎯 Rencana Berikutnya

Klik untuk melihat detail

• ❔ (Issue) DiaryPage: gunakan markdown viewer (mencegah overflow: Container Height)

• ❔ DiaryPage: ubah Emoji ekspresi wajah dan warna sesuai nilai Mood Slider

• ❔ Membantu membuat Custom Function - systemPromptTemplate (pekerja utama: KSK)
  • ❔ Rapikan parameter yang akan ditambahkan
• ❔ Custom Function - uji apakah getAIComment benar-benar diterapkan
  • ❔ Cek apakah input value tercermin dengan benar
  • ❔ Cek apakah output value tercetak dengan benar sebagai String
• ❔ Chat Page - Create New Chat: terapkan system prompt
  • ▶️ Implementasi OpenAI API Call: createChatCompletion
    • Input: System Prompt (Chat)
    • Output: New Chat Message by AI ($.choices[0].message.content)
    • Additional Actions: Create New Chat, Create New Message
• ❔ DiaryPage - Create New Chat by Diary: membuat New Chat berdasarkan isi diary
  • ❔ Implementasi OpenAI API Call: createDiaryComment
    • Input: Diary Content, System Prompt (AI Comment)
    • Output: AI Comment ($.choices[0].message.content)
  • ❔ Implementasi OpenAI API Call: createDiarySummary
    • Input: Diary Content, AI Comment, System Prompt (Diary Summary)
    • Output: Diary Summary ($.choices[0].message.content)
  • ❔ Implementasi OpenAI API Call: createChatFromDiary
    • Input: Diary Summary, System Prompt (Chat From Diary)
    • Output: New Chat Message by AI ($.choices[0].message.content)
    • Additional Actions: Create New Chat, Create New Message
• ❔ ChatPage - Create New Diary: membuat New Diary berdasarkan isi percakapan
  • ❔ Implementasi OpenAI API Call: createChatSummary
    • Input: Chat Content, System Prompt (Diary From Chat)
    • Output: Chat Summary
  • ❔ Implementasi OpenAI API Call: createDiaryFromChat
    • Input: Chat Summary, System Prompt (Diary From Chat)
    • Output: New Diary (Title, Content, Mood score)

• ❔ ChatPage: Go to Linked Diary

• ❔ MoodPage (atas) - Mood Calendar
  • ❔ Bisa mengecek jumlah post yang ditulis per tanggal
  • ❔ Saat tanggal diklik, pindah ke tanggal tersebut
• ❔ MoodPage (bawah) - Mood stats
  • ❔ Tampilkan statistik terkait bulan yang sedang difokuskan
    • ❔ Tampilkan komentar AI terhadap statistik yang muncul
• ❔ HomeFeedPage - import dan terapkan flutter_slidable:4.0.0

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

• ❔ ChatPage: ratakan output percakapan user ke kanan

• ❔ Chat/Diary: GPT Streaming API

• ❔ 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.”
  • Referensi implementasi Alarm
• ❔ 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 - Drawer - ChatHistoryListTile: order by updated_time

• ❔ DiaryPage - import dan terapkan Interactive Slider

• ❔ HomeFeedPage: implementasi fitur Search Diary

• ❔ AuthPage: implementasi Google Login

• ❔ 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)

• ❔ Membuat MoodEditPage di antara HomeFeedPage dan DiaryPage: pindahkan MoodSlider, MoodKeywordsRate(5~1), MoodDescription widget, dan sebagainya

• ❔ Ekstrak dan instal APK versi final untuk presentasi sampai Rab 2025.2.5

💭 Diary

Minhyuk

Rasanya technical debt tumbuh subur karena patchwork yang tidak ada habisnya haha. Deadline submit tinggal 3 hari, jadi ya… sedih sih.

✨ Komentar GPT-4o (KPT)

GPT-4o

✅ Yang Berjalan Baik (Keep)

1. 🎯 Membangun sistem kata kunci emosi: Bagus karena ChoiceChip diterapkan agar pengguna bisa mencatat emosi secara intuitif!
2. 🤖 Menerapkan karakter AI Comment: Mengesankan karena respons per karakter diatur sehingga immersion meningkat.
3. 🛠 Menyelesaikan error HomeFeedPage: Sangat baik karena nilai default diatur untuk mencegah error Unexpected Null Value!

❌ Yang Kurang (Problem)

1. ⏳ Waktu pengembangan lebih lama dari perkiraan: Implementasi fitur kata kunci emosi dan AI Comment memakan waktu lebih banyak dari yang diperkirakan.
2. 🔄 Kompleksitas data karakter meningkat: Alur data menjadi lebih kompleks, sehingga maintenance bisa makin sulit.
3. 📋 Catatan proses penyelesaian masalah kurang: Jika proses penyelesaian error tidak dirapikan, masalah yang sama bisa membuang waktu saat muncul lagi.

🔄 Yang Bisa Dicoba (Try)

1. 📌 Sesuaikan waktu pengembangan per fitur: Kenali lebih awal task yang memakan waktu lebih lama dari perkiraan dan sesuaikan jadwal.
2. 📊 Visualisasikan alur data: Coba rapikan struktur data terkait pengaturan karakter dalam bentuk diagram.
3. 📖 Biasakan mencatat proses penyelesaian masalah: Dokumentasikan issue yang sudah diselesaikan dan siapkan strategi agar tidak terulang.

🏁 Kesimpulan

Hari ini adalah hari ketika sistem kata kunci emosi dibangun dan pengaturan karakter diterapkan pada AI Comment. Lewat penyelesaian error, pentingnya default value kembali terkonfirmasi, dan ke depan sepertinya perlu mengelola waktu pengembangan dengan lebih efisien! 🚀🔥