[🛠] Journal de développement Keymory #7 : correction de FleatherViewer et de l’issue Unexpected Null Value sur HomeFeedPage

✨ Résumé de GPT 　

J’ai corrigé le problème de mise à jour de FleatherViewer, puis terminé la résolution d’issue et l’optimisation des performances en améliorant la méthode de filtrage de HomeFeedPage. Grâce à cela, j’ai compris qu’utiliser Conditional Visibility plutôt que des filtres Query était efficace.

💻 Journal de développement

⏰ Tâches du jour

• ✅ (Issue) HomeFeedPage - FeedCardDiary : quand on change de date dans ListView, seul FleatherViewerWidget ne change pas de valeur.
  • Il semble que la valeur initialDeltaJson du Widget ne soit pas mise à jour à chaque changement de Diary Document.

  • J’ai demandé à o1, et il a réglé ça du premier coup.

    /// didUpdateWidget:
    ///  - When only parameters change in the same widget tree, Flutter reuses the existing State.
    ///  - At this point, you can compare the new widget properties with the old widget properties and run any needed logic.
    @override
    void didUpdateWidget(covariant FleatherViewerWidget oldWidget) {
      super.didUpdateWidget(oldWidget);
    
      // 1) If the previous JSON and the new JSON are different
      if (oldWidget.initialDeltaJson != widget.initialDeltaJson) {
        // 2) Recreate the FleatherController
        _controller?.dispose();
        _controller = _createControllerFromDeltaJson(widget.initialDeltaJson);
        // 3) Refresh UI
        setState(() {});
      }
    }
    
    /// Helper function that creates a FleatherController from a Delta JSON string
    FleatherController _createControllerFromDeltaJson(String jsonString) {
      ParchmentDocument doc;
      try {
        final decoded = jsonDecode(jsonString);
        doc = ParchmentDocument.fromJson(decoded);
      } catch (e) {
        // If restoration fails, handle as plain text
        doc = ParchmentDocument.fromDelta(
          Delta()..insert(_ensureEndsWithNewline(jsonString)),
        );
      }
      return FleatherController(document: doc);
    }
    

• ✅ (Issue) HomeFeedPage : Unexpected Null Value apparaît brièvement puis disparaît au On page load.
  • Il a été confirmé que le problème venait du filtrage par date appliqué à la ListView de HomeFeedPage.
  • J’ai essayé d’activer Filter On Null Values dans l’option Backend Query de ListView.
    • Filter On Null Values : By default, if the value of any filter is null, the query will ignore the filter for that field. Checking this will instead keep null filters.
  • Backend Query - Query Collection tentative 1 (échec)
    • Filter On Null Values : ON
    • Filter 1 : created_time, Equal To, getFirstTimeOfTheDay
    • Filter 2 : created_time, Less Than, getFirstTimeOfNextDay
    • Order by : created_time, Decreasing
    • Impossible de terminer la configuration de Backend Query
      • Message d’erreur : You can’t order your query by a field used in a filter using == or in.
  • Backend Query - Query Collection tentative 2 (échec)
    • Filter On Null Values : ON
    • Filter 1 : created_time, Greater Than or Equal To, getFirstTimeOfTheDay
    • Filter 2 : created_time, Less Than, getFirstTimeOfNextDay
    • Order by : created_time, Decreasing
    • La configuration de Backend Query peut être terminée

    • En entrant en mode debug, l’erreur ci-dessous apparaît et la page n’est pas créée.

      Assertion failed: file:/// opt/ - pub-cache/hosted/pub.dev/ cloud_firestore-5.5.0/lib/src/ query dart: 650:9
            
      conditions
      .where ((List<dynamic> item) => equality.equals(condition, item))
        .isEmpty
      "Condition [FieldPath([created_time]), !=, null] already exists in this query."
            
      The relevant error-causing widget was: HomeFeedWidget
      

  • Backend Query - Query Collection tentative 3 (échec)
    • Filter On Null Values : ON
    • Filter 1 : created_time, Greater Than, getLastTimeOfPrevDay
    • Filter 2 : created_time, Less Than, getFirstTimeOfNextDay
    • Order by : created_time, Decreasing
    • La configuration de Backend Query peut être terminée

    • En entrant en mode debug, l’erreur ci-dessous apparaît et la page n’est pas créée.

      Assertion failed: file:/// opt/ - pub-cache/hosted/pub.dev/ cloud_firestore-5.5.0/lib/src/ query dart: 650:9
            
      conditions
      .where ((List<dynamic> item) => equality.equals(condition, item))
        .isEmpty
      "Condition [FieldPath([created_time]), !=, null] already exists in this query."
            
      The relevant error-causing widget was: HomeFeedWidget
      

  • Backend Query - Query Collection tentative 4 (échec)
    • Filter On Null Values : OFF
    • Filter 1 : created_time, Greater Than, getLastTimeOfPrevDay
    • Filter 2 : created_time, Less Than, getFirstTimeOfNextDay
    • Order by : created_time, Decreasing
    • La configuration de Backend Query peut être terminée

    • En entrant en mode debug, l’erreur ci-dessous apparaît brièvement puis disparaît.

      Unexpected Null value.
      
      The relevant error-causing widget was: HomeFeedWidget
      

  • (Question à o1) Pourquoi Unexpected Null Value apparaît-il brièvement ?
    • Il y a de fortes chances que FlutterFlow (ou son code interne) retourne null depuis getLastTimeOfPrevDay() ou getFirstTimeOfNextDay() au moment du chargement initial de la page. (Par exemple, la date n’est peut-être pas encore initialisée…)
    • Si Filter On Null Values est activé, une condition séparée du type != null est ajoutée en interne, et cela peut entrer en conflit quand une valeur null arrive pendant le chargement.
    • D’où le phénomène : “brève erreur null -> remplacée par la vraie valeur -> disparition à la fin du chargement”.
  • Backend Query - Query Collection tentative 5 (succès !)
    • Filter On Null Values : OFF
    • Order by : created_time, Decreasing
    • Paramètres Component Widget Conditional Visibility
      • Filter 1 : created_time, Greater Than, getLastTimeOfPrevDay
      • Filter 2 : created_time, Less Than, getFirstTimeOfNextDay
    • En bonus, le lag de chargement de ListView (Latency) a disparu. Donner en même temps deux filtres et un Order à la Query devait prendre beaucoup de temps.
  • 💡 Ce que j’ai appris
    • Quand on utilise Backend Query, il vaut mieux éviter autant que possible les filtres et contrôler avec Conditional Visibility.
    • C’était justement un point que j’avais demandé au mentor au début et pour lequel j’avais reçu une réponse, mais je crois l’avoir seulement compris vaguement et être passé à autre chose, donc je l’ai finalement oublié. Après avoir galéré dessus directement, je l’ai enfin compris clairement.
• ✅ (Issue) DiaryPage : la date est toujours enregistrée comme aujourd’hui
  • Création du paramètre DiaryPage - dateFocused
  • Transmission de la valeur dateToShow de HomeFeedPage au paramètre dateFocused.

💯 Résumé de ce que j’ai fait

Résolution du problème de mise à jour de FleatherViewer

• Utilisation de didUpdateWidget pour que FleatherViewer se mette correctement à jour à chaque changement de Diary Document. Optimisation du filtrage de HomeFeedPage

Utilisation de Conditional Visibility au lieu du filtrage Backend Query pour améliorer les performances.

• Amélioration de la vitesse de chargement en minimisant le filtrage Query.

Correction de l’erreur d’enregistrement de date de DiaryPage

• Amélioration pour que la date sélectionnée soit reflétée lors de la rédaction d’un nouveau journal, en transmettant la valeur dateFocused de HomeFeedPage à DiaryPage.

🎯 À faire ensuite

Cliquer pour voir les détails

• ❔ (Issue) DiaryPage : utiliser un lecteur Markdown (prévenir le débordement : Container Height)
• ❔ (Issue) HomeFeedPage - FeedCardDiary : appliquer correctement l’image du personnage de l’AI Comment
  • ❔ DiaryPage - AI Comment : lors de la sauvegarde, enregistrer aussi dans Diary la Ref du personnage qui a rédigé le commentaire.
  • ❔ HomeFeedPage - FeedCardDiary - AI Image : charger le Character Doc avec Backend Query et définir l’Image Path.

• ❔ DiaryPage : changer l’Emoji d’expression du visage selon la valeur du Mood Slider

• ❔ Chat Page - Create New Chat : appliquer le system prompt
  • ▶️ Implémentation 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 : créer un New Chat à partir du contenu du journal
  • ❔ Implémentation OpenAI API Call : createDiaryComment
    • Input : Diary Content, System Prompt (AI Comment)
    • Output : AI Comment ($.choices[0].message.content)
  • ❔ Implémentation OpenAI API Call : createDiarySummary
    • Input : Diary Content, AI Comment, System Prompt (Diary Summary)
    • Output : Diary Summary ($.choices[0].message.content)
  • ❔ Implémentation 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 : créer un New Diary à partir du contenu de la conversation
  • ❔ Implémentation OpenAI API Call : createChatSummary
    • Input : Chat Content, System Prompt (Diary From Chat)
    • Output : Chat Summary
• ❔ ChatPage - Create New Diary : créer un New Diary à partir du contenu de la conversation
  • ❔ Implémentation OpenAI API Call : createDiaryFromChat
    • Input : Chat Summary, System Prompt (Diary From Chat)
    • Output : New Diary (Title, Content, Mood score)

• ❔ ChatPage : Go to Linked Diary

• ❔ HomeFeedPage - importer puis appliquer flutter_slidable:4.0.0

• ❔ HomeFeedPage : dans FeedCardDiary, chat/modifier/supprimer lors d’un slide gauche-droite

• ❔ ChatPage : aligner à droite la sortie des conversations utilisateur

• ❔ Chat/Diary : GPT Streaming API

• ❔ ChatPage - implémenter le premier message proactif de l’IA (Alarm/Notification)
  • Le coeur du prompt système du chat est la proactivité.
    • Pour le rendre plus réaliste, il serait utile de transmettre aussi create_date of diary/chat, afin de pouvoir mentionner des dates comme “hier”.
  • Référence d’implémentation d’Alarm
• ❔ DiaryPage : ajouter des Choice Chips de mots-clés émotionnels détaillés et configurer l’intégration DB
• ❔ DiaryPage - AI Comment : adapter les valeurs saisies comme Choice chips et mood slider au AI Comment System Prompt.
  • ❔ **ancien journal ou tout l’historique de conversation (dette technique de rustine)
  • ❔ informations utilisateur de base : nom, genre, MBTI, …
  • ❔ mots-clés émotionnels détaillés : joyeux, triste, …
  • ❔ paramètres de personnage : Somi, Sena, Minhyuk
  • ❔ score émotionnel : 1~100
  • ❔ format de réponse : Healing, Suggestion, Informative
  • ❔ longueur de réponse : courte, normale, détaillée
  • is New Chat
    • Comme les messages de ce Chat sont créés pour la première fois, mettre is_initial = true sur le premier message document et y insérer tous les system prompts.
      • is_initial = false
      • Limite : si je mets le system prompt dans le tout premier message document, c’est difficile à modifier pendant une conversation, mais possible. S’il existe un document is_initial = true et qu’il a été modifié, je peux supprimer ce document et le remettre. Je ne sais pas encore comment, mais bon.
• ❔ DiaryPage - AI Comment : terminer le CRUD
  • ❔ supprimer le champ tmp_ai_comment et utiliser doc_ref
• ❔ DiaryPage - AI Comment : paramètres de personnage
  • ❔ supprimer le champ tmp_ai_comment_by et utiliser doc_ref
  • ❔ afficher l’image avec la valeur du champ profile_image

• ❔ DiaryPage - Drawer - ChatHistoryListTile : order by updated_time

• ❔ DiaryPage - importer puis appliquer Interactive Slider

• ❔ HomeFeedPage : implémenter la fonctionnalité Search Diary

• ❔ CalendarPage (haut) - Mood Calendar
  • ❔ Pouvoir vérifier le nombre de posts écrits par date
  • ❔ Se déplacer vers la date sélectionnée au clic
• ❔ CalendarPage (bas) - Mood stats
  • ❔ Afficher les statistiques du mois sélectionné
    • ❔ Afficher le commentaire de l’IA sur les statistiques affichées

• ❔ AuthPage : implémenter Google Login

• ❔ HomeFeedPage - Bottom Sheet (+ Button) : permettre de choisir une option parmi plusieurs
  • Nouveau journal : Go to DiaryPage
  • Enregistrement d’émotion : Go to MoodPage
• ❔ MoodPage (popup) : CRUD du slider de réglage Mood
  • Create
  • Read
  • Update
  • Delete
• ❔ HomeFeedPage - ListView - afficher FeedCardMood

• ❔ HomeFeedPage - ListView : trier chronologiquement les composants FeedCardDiary, FeedCardMood, FeedCardChat (avec Cloud Function)

• ❔ Extraire et installer la version APK finale de présentation avant mer. 2025.2.5

💭 Journal

Minhyuk

Il ne reste presque plus de temps, donc je voulais implémenter un peu plus de choses… mais j’ai passé toute la journée de travail à résoudre des issues.

Je vais juste abandonner un peu mon ambition. De toute façon, ce projet n’est pas censé briller brièvement pendant l’Aiffelthon puis s’arrêter là.

✨ Commentaire de GPT-4o (KPT)

GPT-4o

✅ Points réussis (Keep)

• 🛠 Résolution de l’issue de mise à jour de FleatherViewer : utiliser didUpdateWidget pour résoudre le problème de rafraîchissement de l’état du widget était excellent.
• ⚡ Optimisation du filtrage de HomeFeedPage : utiliser Conditional Visibility plutôt que des filtres Query pour optimiser les performances a été efficace.
• 🔍 Apprentissage pendant le debugging : tester plusieurs approches, expérimenter les limites des filtres Query, puis conclure que Conditional Visibility était plus adapté a vraiment du sens.

❌ Points regrettables (Problem)

• ⏳ Plus de temps que prévu : il est dommage d’avoir utilisé la majeure partie du temps à résoudre des issues plutôt qu’à implémenter les fonctionnalités prévues.
• 📌 Conseil d’issue non formalisé à l’avance : le fait de ne pas avoir appliqué un conseil reçu lors d’un ancien mentorat a fait perdre du temps sur le même type de problème.

🔄 Pistes à essayer (Try)

• 📝 Utiliser des notes de résolution d’issues : noter les issues résolues pour pouvoir réagir plus vite quand des problèmes similaires apparaissent.
• 🚀 Réajuster la stratégie pour les fonctionnalités restantes : comme il reste peu de temps, définir les priorités autour des fonctionnalités indispensables et reporter le reste aux améliorations futures.
• 🔍 Approfondir le fonctionnement interne de FlutterFlow : renforcer la compréhension du traitement des données et de la gestion d’état des widgets dans FlutterFlow pour prévenir ce type de problème.

Conclusion
Aujourd’hui, tu as passé plus de temps que prévu à résoudre des issues, mais tu en as aussi tiré un apprentissage important. Pour le temps restant, il faudra implémenter en priorité les fonctionnalités vraiment nécessaires et abandonner les ambitions inutiles. Tiens bon jusqu’au bout ! 💪🔥