Créer une application avec la programmation par paires d'IA : leçons tirées de notre sprint

En tant que développeurs, nous recherchons toujours des moyens d'améliorer notre productivité et de rationaliser nos flux de travail. Avec les progrès récents de l'IA (et ma ferme conviction que ces technologies vont changer la donne), j'ai décidé de mettre ces outils à l'épreuve dans un scénario de développement réel.

• Mon objectif : créer une application PoC complète de suivi des aliments alimentée par l'IA en seulement 7 heures.

• Le résultat : ça a plutôt bien fonctionné ! Mais pas sans défis.

Voici ce que j'ai appris sur l'utilisation de l'IA en tant que partenaire de développement.

Le projet

L'objectif était ambitieux mais ciblé : créer une application mobile qui permet aux utilisateurs de photographier leurs aliments et de les enregistrer automatiquement sur un tracker alimentaire grâce à la reconnaissance de l'IA. La pile technologique comprenait mes incontournables : Quasar Framework (VueJS Framework), Google Firebase et Capacitor (Mobile Dev Framework), avec Google Gemini 2.0 Flash pour l'inférence IA.

Rien de super sophistiqué, mais suffisamment de complexité pour mettre l'assistance de l'IA à l'épreuve.

L'A.I. Outils

J'ai utilisé une combinaison d'outils d'IA pour m'aider sur différents aspects du projet :

1. ChatGPT (modèle o1) : pour la planification de haut niveau, la collecte des exigences et les conseils généraux
2. Claude 3.5 Sonnet via WindSurf/Cascade : Pour la génération de code et les tâches de développement spécifiques, j'ai utilisé un outil appelé WindSurf de Codeium. Il s'agit essentiellement d'un IDE construit à partir de Visual Studio Code avec une IA. rédacteur de code intégré. Il a un accès direct aux fichiers et peut rapidement écrire et modifier des fichiers entiers avec contrôle de version.
3. Google Gemini 2.0 Flash : Pour la reconnaissance d'images et la classification des aliments. Ce modèle est super puissant et super bon marché.

L'approche « IA en tant que développeur stagiaire »

L'une des informations les plus précieuses que j'ai acquises a été de considérer l'IA en tant que développeur junior ou stagiaire. Ce modèle mental a complètement changé ma façon d’aborder la collaboration. Tout comme on ne jetterait pas un projet entier sur le bureau d'un nouveau stagiaire en s'attendant à des résultats parfaits, j'ai appris à :

• Soyez explicite avec les instructions
• Divisez les tâches en morceaux gérables
• Examiner les résultats et fournir des commentaires
• Ne pas en attendre trop à la fois
• Donner des conseils et des orientations en cas de besoin

Cette approche a donné de meilleurs résultats et a mieux fonctionné que de traiter l'IA comme étant « omnisciente » ou « totalement peu fiable ».

Ce qui a bien fonctionné

Planification et exigences

L'IA s'est avérée exceptionnellement utile lors de la phase de planification. J'ai commencé avec une ébauche de projet et j'ai utilisé des invites itératives pour l'affiner. Par exemple, l'une de mes invites initiales était :

Can you help me plan out making the following app in 7 hours:

<information about the app>

Detail out how long I should spend on each section, 
and revise my overall plan as needed.

Cela a déclenché un va-et-vient qui a contribué à cristalliser la portée et le calendrier du projet, conduisant à un plan plus réaliste et détaillé.

Documentation

Les outils d'IA excellaient dans la génération et la maintenance de la documentation. Il pourrait rapidement créer des fichiers de démarques complets et les maintenir à jour au fur et à mesure de l'évolution du projet. Cela a libéré un temps précieux pour le travail de développement proprement dit.

Développement itératif

Décomposer le développement en invites plus petites et ciblées s'est avérée très efficace. Au lieu d'essayer de générer des composants entiers à la fois, j'ai utilisé une cascade d'invites, chacune s'appuyant sur la précédente. Par exemple :

1. Tout d'abord, configurer l'infrastructure backend Firebase
2. Ensuite, construire le passe-partout du frontend
3. Suivant avec des fonctionnalités spécifiques comme l'écran de capture de l'appareil photo
4. Enfin, ajout de fonctionnalités de traitement des données et d'affichage

Une astuce intéressante que j'ai trouvée était d'avoir l'IA. gardez des notes sur les progrès et les prochaines étapes, afin qu'il puisse avoir quelque chose à référencer entre les invites. Depuis que j'utilisais WindSurf, je pouvais utiliser une "invite principale" pour poursuivre la conversation. L'invite principale demanderait à l'A.I. pour se référer aux notes et y ajouter au fur et à mesure de l'écriture du code.

Corrections de bugs et post-développement

Un autre domaine où WindSurf a brillé était la correction de bugs et les tâches de post-développement.

Après avoir testé mon application et noté quelques bugs, j'ai transmis ma liste à WindSurf et celui-ci a pu rapidement identifier et corriger les problèmes, et même générer des cas de test pour garantir que les correctifs fonctionnaient. Cela m'a fait gagner beaucoup de temps et d'efforts.

J'ai eu la liste de bugs suivante, et à quelques reprises seulement j'ai dû les corriger manuellement :

Can you help me plan out making the following app in 7 hours:

<information about the app>

Detail out how long I should spend on each section, 
and revise my overall plan as needed.

• [x] BUG> L'appareil photo devient vide après avoir pris une photo et cliqué sur Annuler (implémentation Web)
• [x] BUG> Dans la vue des aliments détectés Si aucun aliment n'est détecté, la liste est vide, ce qui est bien, mais nous devrions afficher une sorte d'icône et de texte pour expliquer qu'aucun aliment n'a été détecté. ajouté ou détecté
• [x] BUG> Dans la vue des aliments détectés, ce serait bien d'ajouter chaque élément (titre du texte, confiance, bouton de suppression, sélection de la liste déroulante des aliments correspondants) mieux regroupé pour indiquer clairement que tous ces éléments font partie de la même détection alimentaire. Cela peut être fait via une q-card, un meilleur style ou autre
• [ * ] BUG> Dans la vue des aliments détectés, la liste déroulante Sélectionner les aliments correspondants ne se rouvre pas correctement lorsque vous tentez d'ouvrir la liste déroulante pour quelque chose ajouté uniquement via la recherche (plutôt qu'un élément ajouté via la caméra )
• [x] BUG> Dans la vue des aliments détectés, le bouton Annuler devrait renvoyer l'utilisateur au tableau de bord debounceSearch ne devrait pas se déclencher si l'entrée est vide
• [-] FEATURE> Soumission d'entrée (Backend) - Prenez IMG et redimensionnez, recadrez, compressez, etc. pour que l'image s'adapte parfaitement à un carré de 128*128. Créez plusieurs tailles pour l'image et ajoutez des liens vers les images dans l'enregistrement pour soumission (à côté de l'imageUrl)
• [x] FEATURE> Tableau de bord - Afficher l'IMG pour chaque entrée de repas capturée, en chargeant la taille appropriée
• [x] FONCTION> Ajouter Voir la page des repas -> afficher tous les détails, les graphiques et tout ça
• [x] FONCTION> Ajouter une fonctionnalité de modification des repas -> Ramenez le modal depuis la vue de la page Caméra, mais utilisez uniquement le modal. Ne démarrez pas l'appareil photo.
• [x] FONCTION> Ajouter une fonctionnalité de suppression de repas
• [x] FONCTION> Historique Afficher les repas : possibilité d'afficher TOUTES les entrées de repas, paginées, par jour. Utiliser la chronologie Quasar -> avoir le bouton Repas dans le menu pour accéder à cette page. Cette page doit afficher le même type de cartes que celui présenté pour les entrées de repas sur IndexPage.vue
• [x] FONCTION> Historique Afficher l'eau : possibilité d'afficher TOUTES les entrées d'EAU, paginées, par jour, utiliser la chronologie Quasar -> avoir le bouton Eau dans le menu pour accéder à cette page. Cette page devrait afficher le même type de cartes que celui présenté pour les entrées d'eau sur IndexPage.vue
• [x] BUG> La modification de l'historique de l'eau ne fonctionne pas
• [x] BUG> Les données de l'historique de l'eau sont bizarres

Défis et pièges

Tout ne s’est pas déroulé sans heurts. Certains défis clés sont apparus :

Problèmes d'édition de fichiers

J'ai découvert plusieurs limitations en matière de modifications de fichiers :

• Les fichiers ouverts étaient parfois apparemment verrouillés/devenaient non modifiables par WindSurf
• Des conversations plus longues diminuaient absolument la qualité de l'édition du code

REMARQUE : Au moment d'écrire ces lignes, il semble que le bug de verrouillage de fichier/échec de l'édition de fichiers ait été corrigé dans la dernière version de WindSurf.

Gestion du contexte

La qualité de l'assistance de l'IA se dégrade au fil des conversations plus longues. J'ai appris à démarrer de nouvelles conversations pour de nouveaux composants et à fournir un contexte condensé plutôt que d'essayer de maintenir une longue session.

À mesure que le code devenait plus long et plus complexe, l'IA avait du mal à suivre. J'ai dû diviser les tâches en morceaux plus petits et plus faciles à gérer pour maintenir la qualité, ou j'ai dû fournir beaucoup de détails et de contexte pour garder l'IA sur la bonne voie.

Sortir de la piste impliquerait la suppression de fonctionnalités, l'effacement du code pertinent ou parfois la création d'une chose totalement erronée. Cela a été une perte de temps importante, et j'ai dû faire très attention pour garder l'IA sur la bonne voie ou décider de coder manuellement.

Savoir quand coder manuellement

Parfois, le faire soi-même est tout simplement plus rapide. Apprendre à reconnaître ces moments a permis d’économiser beaucoup de temps et de frustration. Comme indiqué dans mon journal de développement : "Quand ça marche, ça marche bien. Quand ça ne marche pas, ça peut être une perte de temps."

Meilleures pratiques qui ont émergé

1. Git Commit fréquemment : avant que l'IA apporte des modifications significatives, validez votre état actuel. Cela constitue une solution de repli facile en cas de problème.

2. Préparer le code standard : configurez la structure de votre projet et les configurations de base avant d'engager l'assistance de l'IA. Dans mon cas, cela signifiait :

   • Configuration de Quasar/Vue CLI
   • Configuration de Firebase CLI et des composants
   • Établir la structure de base du projet

3. Invites claires et détaillées : Soyez aussi précis que possible avec vos exigences. Incluez un contexte et des exemples pertinents. Passez autant de temps que possible dans vos exigences et dans la phase de conception, et fournissez autant de détails que possible. Ces notes et instructions vous aideront non seulement à mieux exécuter votre projet, mais amélioreront considérablement la qualité du code généré par l'IA.

4. Retour itératif : N'hésitez pas à corriger ou guider l'IA. Par exemple, lorsque j'ai reçu un résultat qui ne correspondait pas tout à fait aux exigences, j'ai fourni des commentaires spécifiques :
   

Can you help me plan out making the following app in 7 hours:

<information about the app>

Detail out how long I should spend on each section, 
and revise my overall plan as needed.

Ce type de retour spécifique conduisait généralement à des corrections rapides et précises.

Le verdict

L'utilisation de l'IA a absolument accéléré le développement. Même si cela nécessitait des conseils et des corrections occasionnelles, la combinaison de ChatGPT et Claude avec WindSurf m'a permis de progresser beaucoup plus loin que ce que j'aurais pu faire seul dans le même laps de temps.

Cela dit, pour réussir, il fallait comprendre à la fois les capacités et les limites de ces outils. La clé était de trouver le bon équilibre entre l’assistance de l’IA et l’expertise humaine, en utilisant chacune là où elles excellent.

Avoir hâte de

Cette expérience suggère un avenir dans lequel les outils d'IA deviendront une partie intégrante du flux de travail de développement - pour l'instant, ne remplaçant pas les développeurs, mais augmentant leurs capacités. La clé est d'apprendre à travailler efficacement avec ces outils, de comprendre leurs forces et leurs limites et de développer des flux de travail qui maximisent leurs avantages tout en minimisant leurs inconvénients.

Pour les développeurs souhaitant intégrer l'IA dans leur flux de travail, je recommande de commencer petit, d'établir des modèles d'interaction clairs et d'élargir progressivement le rôle de l'IA à mesure que vous vous familiarisez avec ses capacités et ses limites.

Les outils sont au niveau d'un développeur junior, et bientôt avec suffisamment de données de formation et d'itérations, ils pourront faire bien plus. Je peux voir ces outils écrire des applications entières et gérer la majorité du processus de développement. Jusqu'à ce que les modèles puissent simuler un développeur senior, nous aurons toujours besoin d'une surveillance et de conseils humains.

Points forts :

• Documentation : Générer et maintenir la documentation
• Corrections de bugs mineurs / Dépannage : Identification et correction des bugs
• Tests unitaires : Générer des cas de tests et garantir la qualité du code
• Génération de code / petits composants : écriture de code passe-partout et de composants de base pour vous aider à démarrer
• Planification et collecte des exigences : Décrire la portée et le calendrier du projet
• Configuration de l'infrastructure : configuration de la structure et de la configuration de base du projet, avec Terraform, Dockerfiles, etc.
• Apprentissage rapide et génération de prototypes : apprendre rapidement de nouveaux frameworks et générer des prototypes

Faiblesses :

• Logique complexe : Gestion d'une logique métier complexe ou d'algorithmes complexes
• Design et UX : Créer des interfaces ou des expériences utilisateur visuellement attrayantes
• Écriture de composants plus volumineux : écriture de modules complexes ou de composants plus volumineux de bout en bout
• Contexte/Mémoire : Maintenir le contexte sur de longues conversations ou sur plusieurs composants
• Débogage complexe : Dépannage de problèmes complexes ou de cas extrêmes, nécessite souvent des conseils pour être utile
• À jour avec les dernières technologies : rester au courant des derniers frameworks, bibliothèques et meilleures pratiques

Je suis impatient de voir où va cette technologie et comment elle façonnera l'avenir du développement logiciel.

Les photos !!!

Voici quelques captures d'écran rapides de l'application que j'ai pu créer en 7 heures. Ce n'est pas parfait, mais c'est un bon début !

(Utiliser un appareil photo pour capturer de la nourriture)

(Envoi d'une image à l'IA pour la reconnaissance des aliments)

(Affichage des résultats - Ajout de nourriture au suivi)

(Confirmation de l'entrée des aliments)

(Vue du tableau de bord)

(Vue d'entrée des aliments)

Plug sans vergogne, mais pertinent :

Alors que je travaille encore sur l'application alimentaire mentionnée dans cet article, j'ai pu terminer un autre projet assez rapidement en utilisant WindSurf et l'IA

Si vous êtes intéressé par un assistant Git CLI basé sur l'IA pour faciliter la maintenance des messages de validation et des notes de version, consultez eGit

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!