Construire une Application de Suivi de Sommeil avec Pythagora 2.0 : Guide Complet

Dans cet article, je vais vous montrer comment construire une application complète de suivi du sommeil en utilisant Pythagora AI. Cette méthode de « vibe coding » est incroyablement simple et permet de générer des milliers de lignes de code en moins d’une heure et demie de travail personnel. À la fin, vous aurez une application entièrement fonctionnelle. Un grand merci à Pythagora pour avoir sponsorisé ce contenu et pour être un partenaire fantastique. Vous avez adoré mes précédentes vidéos où je construis des applications complètes de A à Z, et nous allons recommencer aujourd’hui avec l’application la plus complexe que j’ai construite jusqu’à présent.

Qu’allons-nous construire ?

Je vais créer une application de suivi du sommeil. Je rencontre parfois des difficultés pour dormir et je souhaite pouvoir suivre mon sommeil, identifier des modèles et différentes habitudes qui m’aident à mieux dormir. Et je veux le faire avec l’aide de l’IA.

Création du prompt initial

La première étape consiste à créer le prompt, et c’est là que je vous recommande de passer le plus de temps. Voici ce que j’ai défini :

Je veux créer une application qui aura une page principale, une page de coach de sommeil, des pages de connexion et d’inscription, et une page de compte où l’utilisateur pourra ajouter sa propre clé API OpenAI et sélectionner un LLM qu’il souhaite utiliser pour cette application.

J’ai ensuite décrit en détail ce qui devrait être sur la page d’accueil, les boutons spécifiques, ce qui devrait se passer lorsqu’on les presse – très détaillé et très précis. On peut également appeler cela une spécification. Nous avons même utilisé l’IA pour nous aider à créer la structure JSON que nous utiliserons pour les données.

Fonctionnalités clés de l’application

Une grande partie de ce que je veux que cette application fasse est d’avoir essentiellement un coach de sommeil qui me donne des recommandations en analysant toutes les données. Je veux pouvoir lui poser des questions et qu’il ait le contexte de toutes les données que j’ai fournies.

Bien sûr, je ne veux pas que toutes ces informations soient publiques, donc je vais les protéger par une authentification. Une fonction vraiment importante de cette application est la facilité de téléchargement de mes informations, qu’il s’agisse de données de sommeil ou d’exercice.

Il y aura deux méthodes d’entrée de données :
1. Langage naturel : je vais simplement enregistrer quelque chose et dire, par exemple, « J’ai dormi de 22h à 6h ». Tout cela sera analysé par l’IA et placé dans la base de données.
2. Téléchargement de captures d’écran : j’utilise des applications de suivi du sommeil comme Whoop et Eight Sleep, et je veux pouvoir prendre les données qu’elles me fournissent (sommeil total, sommeil paradoxal, sommeil profond) et télécharger des captures d’écran que GPT-4 analysera pour les intégrer à mon application.

L’application servira ainsi de référentiel pour toutes ces données, les analysera et commencera à en extraire des insights.

Démarrage avec Pythagora 2.0

Pythagora 2.0 est désormais entièrement hébergé dans le cloud si vous souhaitez adopter cette approche, contrairement à la version précédente qui était une extension VS Code.

J’ai copié mon prompt complet et l’ai collé dans Pythagora. La première chose que fait l’outil est de reformater mon prompt, d’y ajouter des éléments, de clarifier certains points et de mettre le tout au format markdown. Une fois qu’il a créé cette spécification plus formelle, vous pouvez cliquer et modifier tout ce que vous voulez.

Examen des spécifications

Examinons rapidement les spécifications. Nous avons la navigation principale, la page d’accueil, le coach de sommeil, la page de connexion, la page d’inscription et la page de compte. Nous avons des spécifications détaillées pour chacune de ces pages :
– Page de connexion : email et nom d’utilisateur, mot de passe, connexion, mot de passe oublié
– Page d’inscription : formulaire d’inscription standard
– Page de compte : où nous mettrons la clé OpenAI

C’est extrêmement détaillé, couvrant littéralement tout ce que l’application va construire.

Le processus de construction

Une fois que j’ai validé les spécifications, Pythagora commence à travailler en arrière-plan. Dans l’onglet « Tasks », nous pouvons voir différentes épopées et les tâches qu’il va accomplir. Il en ajoutera d’autres au fur et à mesure que nous progressons et qu’il identifie d’autres besoins.

La construction commence par le front-end. Si vous vous souvenez de ma précédente vidéo, l’application complète que j’ai construite la dernière fois a pris environ 2 heures et environ 1 200 lignes de code. Je suppose que celle-ci comportera beaucoup plus de lignes de code et prendra moins de temps.

Construction du front-end

Nous pouvons voir que l’épopée 1, tâche 1 « Écrire les spécifications, définir les épopées et les tâches » est terminée. Nous travaillons maintenant sur l’épopée 2 « Construire le front-end et le squelette de l’interface utilisateur ».

Pythagora construit maintenant les API. Nous pouvons cliquer pour voir les détails en cours. Si nous avons besoin de consulter les spécifications, nous pouvons toujours revenir à celles-ci. Un point intéressant est que c’est un document dynamique. Si vous souhaitez apporter des modifications en cours de route, vous pouvez le faire et l’IA les prendra en compte si nécessaire.

Nous voyons qu’il installe les packages npm. Ce qui rend Pythagora vraiment efficace et rapide, c’est qu’il est très opiniâtre et tend à graviter vers des frameworks qu’il maîtrise parfaitement pour l’écriture de code.

De nombreux fichiers sont déjà écrits : app.tsx, sleep.ts, chat.ts, etc. Il construit également des composants. Si vous souhaitez examiner le code, vous pouvez le faire dans cette interface qui ressemble essentiellement à VS Code hébergé.

Nous pouvons voir les différentes API en cours de construction : l’API des paramètres, les API de sommeil et de chat, tous ces différents composants. Il construit littéralement une application full-stack sous mes yeux avec très peu d’intervention de ma part jusqu’à présent.

Premier aperçu de l’application

Une fois que la plupart du front-end est construit, nous pouvons le visualiser en cliquant sur le bouton « View app » sur le côté gauche. Cela charge un aperçu qui est en direct sur le web, mais seul moi peux y accéder en étant connecté via mon compte Pythagora.

Pour cette phase de test, je peux saisir n’importe quelle adresse e-mail. Après la connexion, nous voyons que le front-end complet est déjà construit en moins de 5 minutes.

Fonctionnalités de l’interface

Sur la page d’accueil, nous avons la saisie quotidienne des données de sommeil. En cliquant dessus, deux options s’offrent à moi : télécharger une capture d’écran de sommeil ou simplement enregistrer un mémo vocal.

Je peux cliquer sur « Donnez-moi des recommandations ». Pour l’instant, ce sont des données fictives qui ne sont pas encore connectées à GPT-4. Nous avons nos modèles de sommeil avec des données pré-remplies : sommeil total en bleu clair, sommeil paradoxal et sommeil profond.

Enfin, voici l’hygiène du sommeil : repas tardif, lecture d’un livre avant de se coucher et temps d’écran avant de se coucher.

En passant à la page du coach de sommeil, nous voyons une interface de chatbot traditionnelle. Je veux pouvoir poser des questions sur mes données et obtenir des recommandations.

Dans la section compte, je peux saisir ma clé API OpenAI et sélectionner le modèle LLM. Nous allons évidemment opter pour GPT-4, qui est le cheval de bataille.

Construction du back-end

Après avoir validé l’interface utilisateur, nous passons à la construction du back-end. Pythagora suit ce schéma : spécifications, front-end, puis back-end. Avec les outils de « vibe coding » habituels, toutes ces choses sont construites simultanément, ce qui peut parfois entraîner des erreurs. Une planification plus formelle et un processus plus structuré sont bénéfiques, d’où l’intérêt de construire le front-end puis le back-end.

Pythagora a déjà détecté quelques erreurs et va les corriger automatiquement. C’est ici que nous commençons à travailler avec l’IA. Je vais tester l’application, valider son fonctionnement, puis indiquer à Pythagora si elle fonctionne ou si quelque chose doit être corrigé.

Test des fonctionnalités d’authentification

Je commence par tester la page d’inscription en créant un compte. Après avoir soumis mes informations, je reçois un message de succès et suis redirigé vers la page de connexion, exactement comme prévu.

Ensuite, je teste la connexion avec mes identifiants. Après avoir cliqué sur « Se connecter », je suis connecté avec succès. L’authentification fonctionne maintenant.

Configuration des paramètres utilisateur

La tâche suivante consiste à ajouter les champs de clé API et de sélection du modèle LLM au modèle utilisateur et à implémenter un point de terminaison API pour enregistrer ces paramètres.

Je me connecte à l’application, navigue vers la page des paramètres du compte, saisis ma clé API OpenAI, sélectionne GPT-4 comme modèle LLM et enregistre ces paramètres. Tout fonctionne correctement.

Implémentation des fonctionnalités audio et d’upload

La prochaine tâche consiste à implémenter la fonctionnalité d’enregistrement et de téléchargement audio. Pythagora analyse l’implémentation actuelle et détermine ce qui doit être ajouté : points de terminaison API pour les téléchargements de fichiers, modèles de base de données pour stocker les métadonnées des fichiers, stockage de fichiers sur disque, et suppression des réponses simulées.

Je teste cette fonctionnalité en téléchargeant une capture d’écran de mon application Whoop. Le téléchargement est réussi, et je peux même vérifier que le fichier est correctement stocké sur le serveur.

Ensuite, je teste l’enregistrement vocal en enregistrant un message test. Le mémo vocal est traité avec succès, et je peux vérifier ses métadonnées dans la base de données.

Transcription audio et traitement d’image

La tâche suivante consiste à implémenter l’enregistrement audio et la transcription à l’aide d’OpenAI Whisper. Pythagora identifie ce qui doit être implémenté : transcription audio, traitement d’images, traitement de texte, modèles de base de données et intégration front-end.

Nous rencontrons quelques erreurs lors des tests, mais Pythagora les identifie et les corrige automatiquement. Après plusieurs itérations de correction, l’enregistrement vocal fonctionne correctement, et la transcription est précise.

Je teste également le téléchargement d’images pour voir si elles sont correctement traitées. Le système extrait avec succès les données de sommeil de ma capture d’écran : heure du coucher, sommeil profond, sommeil réparateur, sommeil paradoxal – exactement ce que je voulais.

Affichage des données et recommandations

Après avoir soumis mes données de sommeil, je rencontre un problème : les données ne s’affichent pas dans le graphique des modèles de sommeil. Je signale ce problème à Pythagora, qui ajoute des journaux pour identifier la cause.

Le problème est que la réponse traitée indique une date de 2023, ce qui n’est pas correct. Je suggère à Pythagora de supposer que si je télécharge une capture d’écran, elle concerne la nuit de sommeil précédente. Après cette correction, les données s’affichent correctement dans le graphique.

Je teste ensuite la fonctionnalité de recommandations IA en cliquant sur « Obtenir des recommandations ». Bien qu’il n’y ait pas beaucoup de données, l’IA me fournit quelques recommandations de base sur la durée de mon sommeil. Je pourrai affiner le prompt ultérieurement pour obtenir des recommandations plus concises ou plus détaillées.

Implémentation du coach de sommeil

La dernière tâche consiste à implémenter le coach de sommeil. Après quelques corrections d’erreurs, je teste cette fonctionnalité en envoyant un message « Bonjour » et reçois une réponse. Je vérifie également que les messages sont correctement stockés et persistent après le rechargement de la page.

Enfin, je pose une question sur une bonne routine avant de se coucher, et le coach me répond avec des conseils pertinents : établir un horaire cohérent, tamiser les lumières, etc.

Conclusion

Et voilà ! Des milliers de lignes de code, moins d’une heure et demie de travail, et une application entièrement fonctionnelle. Pythagora 2.0 offre une interface VS Code entièrement hébergée qui est très intuitive et facile à utiliser.

Dans une future mise à jour, j’aimerais donner à l’application l’accès à toutes mes données et m’assurer que je peux lui poser des questions spécifiques à moi et à mes données. Mais pour l’instant, l’application est terminée et fonctionne parfaitement.

Je vous recommande vivement d’essayer Pythagora.ai si vous souhaitez créer rapidement des applications complexes avec un minimum d’effort. C’est un excellent outil de « vibe coding » qui rend le développement d’applications accessible à tous.