Du prompt itératif à l’équipe d’agents : sites web, un an et demi plus tard

En mars 2025, j’avais raconté ici comment j’ai redéveloppé mon site avec React et CodeIgniter grâce à Grok 3, sans presque aucune expérience en React. La méthode tenait en quelques étapes : une poignée de prompts, puis des allers-retours quand quelque chose coinçait. Le résultat arrivait en quelques heures, même si « tout ne marchait pas du premier coup ».

Aujourd’hui, je travaille un autre site de domaine viticole (PHP, CodeIgniter, MariaDB), et la façon de travailler avec l’IA n’a plus grand-chose à voir. On n’enchaîne plus les prompts dans une fenêtre de chat. J’utilise Claude Code avec une configuration qui organise une petite équipe virtuelle : des rôles, des documents et des points de contrôle. Ce billet se veut une suite logique du premier : ce qui a changé, et pourquoi.

Mars 2025 contre aujourd’hui :

Mars 2025Aujourd’hui
OutilGrok 3 dans un chat, comparé à GPT-4o, Claude 3.5 et CopilotClaude Code dans l’éditeur, avec accès direct au code
MéthodePrompts itératifs : je demande, j’essaie, je relanceUn circuit : besoins, conception, plan, implémentation, revue
Qui piloteMoi, à chaque échangeUn agent chef d’orchestre, et moi aux points de validation
Contexte fourni à l’IACe que je colle dans le promptLe code, la configuration et des règles projet écrites une fois pour toutes
VérificationSurtout à l’œil, au fil des essaisTests automatiques, relecture du code et de la sécurité
Quand ça casseUn nouveau prompt avec l’erreurUne enquête, une contre-expertise, puis seulement une correction

La différence de fond : en 2025, la qualité dépendait surtout de la réponse du modèle. Aujourd’hui, elle dépend surtout du cadre dans lequel il travaille.

Un chef d’orchestre et des spécialistes

L’idée centrale : la session Claude principale ne code pas. Elle joue le chef de projet et confie chaque étape à un sous-agent spécialisé. Chaque sous-agent a un seul rôle, ses propres outils et un format de réponse imposé.

RôleCe qu’il fait
Analyste des besoinsMesure ce que la demande touche dans le code et ce qu’elle va coûter
Concepteur techniqueRédige le document de conception
PlanificateurDécoupe la conception en tâches
ExécutantImplémente une tâche, rien de plus
Contrôleur qualitéLance les tests et les vérifications, corrige ce qui casse
RelecteursRelisent le code et la sécurité à la fin

Le chef d’orchestre dit quoi faire et où, jamais comment. Il donne à l’exécutant un fichier de tâche, pas une liste de lignes à modifier. Chaque spécialiste repart d’un contexte propre, ce qui évite qu’une longue conversation finisse par tout mélanger.

Toutes les demandes ne méritent pas ce circuit complet. Le chef d’orchestre classe d’abord la demande : petite, moyenne ou grande. Une petite correction passe directement à l’implémentation ; une grosse fonctionnalité traverse toutes les étapes. Il existe aussi un mode « Lite », celui que j’utilise, qui réduit le nombre d’agents appelés sans supprimer les validations humaines.

Des documents comme garde-fous

Pour une demande moyenne ou grande, rien ne se code avant que trois documents soient écrits et validés par un humain :

  1. Le cahier des charges : ce que l’utilisateur doit pouvoir faire, et ce qui est explicitement exclu.
  2. Le document de conception : comment on s’y prend, avec des critères d’acceptation vérifiables.
  3. Le plan de travail : la liste ordonnée des tâches.

Chaque document est relu par un agent relecteur, puis confronté au code réel par un agent vérificateur. Celui-ci attrape les affirmations du type « la fonction X existe déjà » quand elle n’existe pas.

L’intérêt n’est pas la paperasse. C’est d’avoir des points d’arrêt où je peux dire « non, pas comme ça » avant que cinquante fichiers soient modifiés. Le deuxième bénéfice de cette approche, c’est la reprise du développement avec des mini-étapes, par exemple le lendemain ou après une attente sur un quota de token expiré.

Pour diagnostiquer un bug : l’avocat du diable

Le piège classique avec une IA qui débogue, c’est qu’elle trouve une cause plausible, s’y accroche et corrige le symptôme. Le framework Claude Code sépare donc le diagnostic en trois rôles :

  1. L’enquêteur suit le chemin que prend l’exécution et liste tous les endroits où ça peut casser, preuves à l’appui.
  2. Le vérificateur essaie de démonter ce travail.
  3. Le solveur propose des corrections seulement une fois les causes confirmées.

Sur mon projet, il a d’ailleurs démonté une hypothèse qui me paraissait évidente : je pensais que le problème venait du contrôleur alors que la cause était finalement dans la configuration d’un composant tiers.
Pour chaque cause supposée, il joue l’avocat du diable :

  • Et si ce comportement était en fait normal ?
  • Quelle preuve contraire a-t-on oubliée ?
  • Quelle hypothèse implicite est peut-être fausse ?

Il va aussi chercher dans une source que l’enquêteur n’a pas consultée : l’historique Git, la configuration ou la documentation officielle. Si la doc officielle contredit une hypothèse, celle-ci est automatiquement affaiblie. Enfin, il ne désigne pas un coupable unique : chaque cause est jugée séparément, car un bug en a souvent plusieurs.

Choisir comment implémenter : le plus petit design possible

Avant d’écrire du code, le concepteur suit une méthode en sept étapes. Le cœur tient en une question : quel est le design le plus simple qui atteint le résultat, et qu’est-ce qui oblige à en faire plus ?

Concrètement :

  1. Partir de l’existant. On trace le chemin le plus court qui livre le résultat avec ce que le code sait déjà faire.
  2. Chercher ce qui manque. On ne garde que les besoins que ce chemin ne couvre pas.
  3. Combler au moindre coût. Pour chaque manque, on essaie d’abord de réutiliser, de déduire d’une donnée existante ou de calculer à la volée. On n’ajoute une table, une option ou une classe qu’en dernier recours.
  4. Le test de soustraction. On retire chaque ajout, un par un, et on regarde si le résultat tient encore. Si oui, l’ajout disparaît.

Ce dernier test est redoutable contre la tendance des IA à « bien faire » : un service, une interface et un fichier de config pour afficher trois lignes. Chaque élément qui reste dans le design doit pouvoir dire quelle exigence casserait sans lui.

Les étapes suivantes sont plus classiques : comparer au moins deux stratégies, lister les risques avec une parade pour chacun, vérifier les contraintes (version de PHP, hébergeur, délais), puis consigner le choix et ses raisons dans le document de conception.

Par tranches ou par couches ?

Une fois le design fixé, il reste à décider dans quel ordre le construire. Il y a trois options :

ApprochePrincipeQuand la choisir
VerticaleUne fonctionnalité complète à la fois, de la base de données à l’écranFonctionnalités peu dépendantes entre elles, utilisables dès qu’elles sont finies
HorizontaleUne couche à la fois : d’abord les données, puis la logique, puis l’affichagePlusieurs fonctionnalités reposent sur un socle commun qui doit être solide
HybrideUn mélange, phase par phaseBesoins encore flous, ou passage d’un prototype à la version finale

Le critère de choix n’est pas l’effort. C’est le risque le plus faible et la vérification la plus rapide.

Chaque tâche vise aussi un niveau de preuve, du plus fort au plus faible :

  • L1, ça marche pour de vrai : un visiteur peut utiliser la fonctionnalité.
  • L2, les tests passent : de nouveaux tests couvrent le comportement.
  • L3, ça compile : le code est valide, sans rien encore d’exécutable.

On vise toujours le niveau le plus haut possible. Une tâche validée seulement par « ça compile » doit avoir une bonne raison de l’être.

Ce que j’en retiens sur un petit site

Le site sur lequel j’ai travaillé est simple : des pages rendues côté serveur, un formulaire de contact et de commande, pas d’application front séparée. Dans ce contexte, la méthode aboutit presque toujours au même choix : une approche verticale, une page à la fois, vérifiée en L1 par un test qui charge la vraie page.

Le circuit complet peut sembler lourd pour un site vitrine, d’où le mode Lite et le classement par taille. Mais trois idées valent la peine même sans le framework Claude Code:

  • Séparer les rôles. Celui qui code n’est pas celui qui vérifie.
  • Jouer l’avocat du diable sur chaque diagnostic avant de corriger.
  • Faire le test de soustraction sur chaque ajout proposé par l’IA.

En 2025, l’IA m’avait permis d’aller vite sur une technologie que je ne maîtrisais pas. Un an et demi plus tard, elle n’est pas seulement plus intelligente : elle travaille dans un cadre qui la rend disciplinée. C’est exactement ce qui manquait à mes prompts itératifs.

Et au-delà du code ?

L’ingénierie logicielle est un terrain idéal pour ces méthodes agentiques. Le cadre y est déjà très carré : un langage strict, des tests automatisés, des standards partagés. Un agent peut y vérifier lui-même son travail, et un autre agent peut le contredire preuves à l’appui.

Quand on voit ce qu’on obtient dans ce cadre, on imagine sans peine le potentiel encore inexploité ailleurs. Je ne sais pas encore jusqu’où cette approche ira hors du développement logiciel, mais le parallèle me semble évident: dès qu’un métier dispose de règles explicites et de critères de validation clairs, on peut imaginer des agents spécialisés s’y répartir le travail.

Deux freins restent pourtant d’actualité :

  • La souveraineté et la protection des données. Confier des documents clients, des dossiers médicaux ou des données internes à un modèle hébergé ailleurs pose toujours la question de savoir où vont ces données et qui y a accès.
  • La perméabilité du domaine à l’IA. Un domaine sans règles écrites, sans moyen automatique de dire si un résultat est juste, ou peu disposé à changer ses pratiques, laisse peu de prise à ces méthodes.

Le code a eu de l’avance parce qu’il avait déjà fait ce travail de formalisation. Les autres domaines devront sans doute le faire à leur tour avant d’en tirer autant.

Catégorie : IA, Uncategorized | Tag , , | Laisser un commentaire

Agent IA avec recherche WEB sur n8n

Suite à mon précédent article avec l’utilisation d’une IA souveraine sur Infomaniak et à l’arrivée des agents dans la section « Chat » de n8n, doter mes agents de la capacité à rechercher sur le web.

Des solutions simples existent sous n8n, notamment avec l’intégration du noeud Tavily qui propose des crédits de recherche gratuits. J’ai voulu chercher des solutions plus ouvertes, sans limitation de crédits et réutilisables.

Mes recherches m’ont conduit à SearXNG, que j’ai installé sur mon NAS en suivant ce tuto. En quelques mots, SearXNG ne « parcours » pas le web directement mais utilise de multiples moteurs de recherche et les agrège. Son utilité dans mon cas est qu’il peut fournir du contenu json par API.

Une recherche sur SearXNG installé sur docker (réseau local)

En ajoutant le format ‘json’ à la recherche, il devient possible de requêter efficacement depuis un noeud n8n.

L’appel se fait depuis un noeud HTTP Request, avec les paramètres suivants:

  • format: json
  • q : définit par le model

Une fois connecté en tant que tool, nous voilà avec un AI Agent capable de rechercher des informations en ligne.


Il reste à ajuster le prompt de l’Agent pour avoir des résultats formatés correctement (lien hypertexte par exemple) et nous voilà avec un Agent IA de recherche basé sur l’API IA (mistral) chez Infomaniak.

Une prochaine étape pourrait être d’affiner la sélection des sources ou d’expérimenter le multi agents.

Catégorie : n8n | Tag , , , | Commentaires fermés sur Agent IA avec recherche WEB sur n8n

Synchronisation Joplin sur Infomaniak S3 (cloud OpenStack)

Joplin est une application libre et open source qui permet de prendre des notes et de gérer des tâches, le tout en Markdown, avec synchronisation et organisation par carnets et étiquettes.

Il est déjà possible de synchroniser Joplin par WebDAV avec kDrive, comme indiqué dans leur faq.

La version actuelle de kDrive que j’utilise ne permettant pas cette synchronisation, et dans un soucis de compatibilité plus large, j’ai opté pour un bucket S3.

Infomaniak propose une ressource « conteneur » S3 via son infrastructure OpenStack, ce qui permet d’utiliser leurs buckets comme n’importe quel service S3 classique. Sur le papier, tout est simple. Dans la pratique, quelques subtilités méritent d’être connues pour éviter de perdre du temps à débugger.

1. Créer un bucket compatible S3

Dans l’interface Infomaniak :

  • Créez un bucket (conteneur Swift).
  • Notez son nom, par exemple : mon-sc.
  • Laissez les ACL par défaut, puis ajustez-les ensuite si nécessaire.
  • Public Access : disabled (évite l’accès par URL sans auth)

2. Générer des credentials EC2 (S3)

Infomaniak ne fournit pas directement des clés S3 classiques. Il faut générer des EC2 credentials via OpenStack (commande:openstack ec2 credentials create) pour récupérer:

  • Une Access Key
  • Une Secret Key

Ces clés fonctionnent comme des credentials AWS classiques.

3. Configurer le bucket dans Joplin

URL S3https://s3.pub1.infomaniak.cloud
Seau S3 (bucket)mon-sc (ou votre nom de bucket)

Il ne faut jamais utiliser l’URL Swift dans le client S3. Seul l’endpoint S3 fonctionne.

Au besoin, il est possible de tester la connection avec la commande AWS:

aws –endpoint-url=https://s3.pub1.infomaniak.cloud s3 ls s3://mon-sc

4. Point d’attention : les espaces invisibles

Lors de la saisie des credentials, joplin n’affichent pas les espaces en fin de chaîne. Un simple espace après l’Access Key ou la Secret Key suffit à provoquer une erreur: SignatureDoesNotMatch

Ce type d’erreur peut faire perdre beaucoup de temps, car tout semble correct…

Une fois configuré sur PC et mobile, vous disposerez d’une synchronisation des notes Joplin avant ces différents clients applicatifs.

Une fois la synchronisation en place, les fichiers sont stockés sur le bucket

Catégorie : Uncategorized | Tag , | Commentaires fermés sur Synchronisation Joplin sur Infomaniak S3 (cloud OpenStack)

Classification du contenu de documents pdf avec n8n local et mistral sur Infomaniak

Contexte
Afin de classer numériquement mes documents, je les scan et je leur donne le pattern suivant: <TYPE>-<PREFIX>-<DATE>-<SUFFIX>.pdf. Le processus manuel s’avère fastidieux car l’affichage pour traitement manuel est lent et il faut parfois ouvrir le document pour trouver les informations.

L’idée
Il y a quelques mois, j’avais essayé de l’OCR via LLM pour automatiser ce traitement, mais les coûts potentiels pour un usage personnel, ainsi que la protection de mes données ont stoppé net mes ambitions.

Il y a quelques semaines, j’ai eu l’idée de changer d’approche après avoir validé manuellement deux options:

  1. Avec une méthode traditionnelle d’OCR, il est possible d’extraire le contenu text de documents PDF scanné.
  2. Avec les AI Tools d’Infomaniak (https://ai-tools.infomaniak.com/), j’ai pu confirmer qu’avec un prompt adapté, mistral 3 est capable de répondre à mon besoin, à savoir, donner le nom du fichier souhaité à partir d’un extrait de la première page du PDF OCRisé. Ceci à un coût défiant toutes concurrences: après une centaine de documents traités, j’ai une facture de 2 centimes !

Automatiser ?

Il fallait maintenant assembler ces briques pour un premier traitement simple: renommer automatiquement mes fichiers selon le pattern souhaité.

Après avoir effectué quelques recherche, n8n community m’a semblé adapté car disponible gratuitement pour utilisation dans une image docker et devrait supporter l’appel à des LLM respectant l’API ChatGPT.

J’ai donc commencé à faire quelques tests pour vérifier qu’il était bien possible d’appeler un modèle chez Infomaniak depuis n8n. Et ça fonctionne :

S’en est suivie l’exploration de la conception de workflows sur n8n: ce n’est pas très complexe et on trouve énormément d’exemples et d’explications.


Ce qui a le plus posé de problèmes, c’est le traitement de fichiers locaux ainsi que l’exécution de mon script python d’OCR.

1. Script d’OCR

Le script fonctionnant sans problème en local, a pris beaucoup de temps pour être fonctionnel sur l’image docker n8n. J’ai rapidement créé une image personnalisée avec les librairies requises: pdf2image, pytesseract, spacy… mais impossible de faire fonctionner mon script.

Après plusieurs recherches, j’ai constaté que la fonctionnalité d’exécution de code python proposée sur n8n ne permettait pas d’installer n’importe quel module car il repose sur Pyodide: https://pyodide.org/en/stable/

Restait alors l’option d’exécuter directement le script python via un noeud ‘Execute Command’:

Une fois cette étape réglée, l’appel au modèle mistral 3 chez Infomaniak est une formalité:

Exemple de résultats du traitement par mistral :

2. Fichiers locaux
Le traitement de fichiers locaux s’est avéré plus compliqué qu’attendu à cause de l’environnement Docker sur lequel n8n tourne: l’image n8n tourne avec l’utilisateur node(1000) qu’il faut « répliquer » sur l’hôte où tourne l’image.

Le résultat, un workflow manuel (pour l’instant) qui scan les fichier à traiter, itère par lot de 5 pour ocr-iser les pdf et les nommer avec l’aide de mistral 3 sur Infomaniak et un rapport fichierSource->fichierRenommé dans un CSV.

Conclusion

Si n8n peut être moins « user-friendly » que d’autres solutions similaires, il propose un grand nombre de « noeuds » et supporte surtout des LLM autres que Claude ou ChatGPT sur OpenAI.

J’avais accumulé pas mal d’idées d’automatisation par LLM, certaines floues, d’autres plus nettes, mais aucune ne répondait vraiment à un besoin concret chez moi. Maintenant, j’en ai trouvé une.
Ce workflow va certainement encore évoluer maintenant que j’ai pris en main l’outil.

Lien vers l’image n8n utilisée: https://github.com/fludo/n8n-py-addons/tree/main / https://hub.docker.com/repository/docker/swissmountain/n8n-py-addons/general

Catégorie : IA, n8n | Tag , , | Commentaires fermés sur Classification du contenu de documents pdf avec n8n local et mistral sur Infomaniak

Structurer et piloter un projet avec Copilot sur Excel: du WBS au planning interactif

Dans le cadre d’un projet fictif, j’ai testé l’approche d’un découpage sous forme de Work Breakdown Structure (WBS) des tâches dans Excel. L’objectif est d’apporter une démarche rigoureuse de planification et de suivi, en partant d’une WBS (ou OTP en français) jusqu’à la génération d’un diagramme de Gantt interactif voire de tâches dans Jira. Cette approche a été grandement facilitée par l’utilisation de Copilot dans Excel, qui atteint maintenant un niveau de maturité satisfaisant pour cette utilisation.


Voici un aperçu de la démarche complète, de la WBS initiale jusqu’au diagramme de Gantt final.

1. Construction de la WBS

La WBS a été créée avec de simples « formes » dans Excel (voir figure ci-dessous). Cet outil nous permet de décomposer le projet en phases, modules et tâches simples / activités. Cette approche structurée et visuelle réduit notamment les risques d’oubli et offre une vue d’ensemble claire du projet pour toutes les parties prenantes.

Comme illustré dans la structure ci-dessus, voici des exemple d’activités structurées :

  • Préparation (analyse, contacts fournisseurs, planification…)
  • Conception (modules, validation…)
  • Développement (codage, tests unitaires…)
  • Déploiement (scripts, formation…)

2. Passage au planning dynamique avec Copilot sur Excel

A partir de la WBS, j’ai réalisé différents traitements, dont certains purement dans le but de compléter les données pour l’exercices :

  • Lister les activités de la WBS, dans l’ordre, avec l’ajout de description, responsable, estimation et dépendance. Le tableau obtenu ressemble à ceci:
  • Remplir les cases vides pour mon projet exemple:

  • Créer et ajuster un diagramme de Gantt interactif à partir des données du tableau, pour une date des début donnée. Il s’agit d’un document html dans mon cas, n’ayant pas réussi à générer un contenu Excel satisfaisant.

A partir de ce tableau, générer un code permettant de créer les tickets correspondant dans Jira (code non testé)


3. Bénéfices

Comme le montrent les visuels précédents, cette approche apporte plusieurs bénéfices concrets.

L’intelligence de Copilot devrait permettre de gagner un temps précieux sur la structuration, la vérification des dépendances et la génération du planning, tout en limitant les erreurs humaines.

L’avantage de cette approche est qu’il est possible d’ajuster les activités depuis la WBS directement, Copilot se chargeant, à la demande, de mettre à jour la liste des activités (ou le delta).

Concrètement :

  • Vision claire et partagée de l’ensemble du projet,
  • Anticipation des points de blocage grâce à la gestion automatisée des dépendances,
  • Communication facilitée avec les parties prenantes,

Et en pour le PM, en terme d’utilisation:

  • La liste des activités se fait en quelques secondes à partir d’un WBS visuel (formes dans Excel)
  • La mise à jour se fait également via Copilot en lui demandant de sortir les différences pour ne pas écraser la feuille des activités

Limites et points d’attention :

  • Il y a une taille maximale de projet gérable de cette façon
  • Format Excel moins robuste que les outils dédiés pour les très grands projets

4. Conclusion

Cette démarche, de la WBS au Gantt interactif et aux tickets JIRA, offre un cadre solide pour piloter efficacement un projet.
L’intégration de Copilot dans Excel fait office de véritable accélérateur, rendant la planification plus fiable, plus rapide et plus collaborative en libérant du temps pour des activités à forte valeur ajoutée pour le PM.

Bien que la majorité des livrables décrits: WBS, planning, dépendances, tickets, … soient réalisables avec des outils comme Microsoft Project, cette expérience démontre qu’il est tout à fait possible d’obtenir des résultats comparables avec Excel et Copilot, tout en bénéficiant d’un format plus accessible et lisible pour l’ensemble des parties prenantes.

Cela permet de démocratiser la planification projet, en rendant la WBS compréhensible et partageable sans nécessiter de formation spécifique sur des outils complexes.

Remarque :
Toute les opérations ci-dessous ont été réalisées avec Office 365 Personnal, canal Insider Preview.

La version entreprise permet en plus, d’après mon expérience:

  • D’avoir un prompt système personnalisé pour Copilot, ce qui facilite le travail s’il est configuré comme « assistant PM »
  • De lire directement les formes / images de la feuille excel, ce que la version « Personnal » ne semble pas capable de faire. J’ai du lui joindre une capture du WBS pour l’exercice mais la version entreprise y accède directement.
Catégorie : Gestion projet, IA | Tag , , , , , | Commentaires fermés sur Structurer et piloter un projet avec Copilot sur Excel: du WBS au planning interactif

Importation des vols du vario Flytec 6015 sous Windows 11

Datant de 2009-2010, ce vario du fabricant Suisse Flytec reste un instrument fiable et robuste même après une quinzaine d’années.

Seul bémol, la puce qu’il intègre, notamment pour le chargement des vols et la communication avec un PC sont dépassés et peuvent poser problème. Il s’agit du Prolific PL2303 dont le pilote n’est plus supporté sous Windows 11. Un message d’erreur est même affiché avec les dernières versions du pilote/windows 11: « PL2303HXA Phased out since 2012. Please Contact your supplier« .

Il est possible, pour ~45 CHF de l’envoyer à Naviter (actuel propriétaire de la marque) pour upgrade du chip. Cependant il existe une solution encore plus rapide qui permet de faire reconnaître correctement le vario sous Windows 11.

La solution consiste à installer le pilote de 2008 (3.3.2.105). Pour le sélectionner, aller sur le périphérique et choisir: Mise à jour du pilote-> Recherche des pilotes sur votre ordinateur -> Choisir parmi une liste de pilotes disponibles sur mon ordinateur.

Depuis la dernière version de Windows 11, il semble impossible de choisir un pilote différent sur l’ordinateur (lié au message: « PL2303HXA PHASED OUT… ». Pour régler le problème, il faut choisir un port COM différent (chez moi, le passage du COM4 à COM6 a permis de régler le problème).

Le pilote 3.3.2.105 est disponible ici:


Catégorie : Uncategorized | Commentaires fermés sur Importation des vols du vario Flytec 6015 sous Windows 11

J’ai redéveloppé mon site avec React et CodeIgniter grâce à Grok 3, sans presque aucune expérience en React.

Il y a peu, j’ai été forcé de mettre à jour mon site basé sur une version obsolète d’un Framework, Twig/Symfony 3. En débutant l’implémentation avec CodeIgniter, j’ai vite compris que le portage des templates allait être compliqué. Je me suis donc orienté vers quelque chose de plus dynamique et moderne : un frontend en React avec un backend allégé par CodeIgniter. Le hic ? Je n’avais pratiquement aucune expérience en React. Pourtant, en quelques heures et grâce à une poignée de prompts à Grok 3, l’IA de xAI, j’ai réussi cette refonte. Voici comment ça s’est passé.

Une refonte en quelques étapes

J’ai d’abord repensé l’organisation de mon projet. Fini le mélange frontend-backend : j’ai créé deux espaces distincts, un pour le backend et un pour le frontend. Le challenge était de configurer mon serveur local pour que les requêtes API et les pages React aillent là où il faut. J’ai demandé conseil à Grok 3, et en une réponse, il m’a orienté vers une solution simple pour gérer ces redirections, sans que j’aie à me perdre dans des détails techniques.

Pour le backend, migrer de Symfony à CodeIgniter a été assez naturel. J’ai simplifié mes anciennes routes en endpoints légers, et Grok m’a aidé à m’assurer que tout restait cohérent et prêt à alimenter mon futur frontend.

Le frontend React, un défi relevé avec Grok

C’est là que les choses auraient pu se compliquer. Avec presque zéro expérience en React, je partais de loin. Mais Grok 3 a permis de relever le défi. Je lui ai demandé comment démarrer un projet React de zéro et comment en faire une version statique pour mon site. Ses réponses étaient claires, étape par étape, comme un guide patient qui ne me laissait jamais dans le flou. En un rien de temps, j’avais un frontend fonctionnel. Quand j’ai buté sur une erreur où mes données ne s’affichaient pas, Grok a tout de suite compris et m’a donné une astuce simple pour connecter React à mon backend.
Grok a même réussi là où les autres LLM (GPT 4o, Claude 3.5) avaient échoués: calculer le rendu, en React, de mon menu hiérarchique venant d’un json retourné par API. A prompt égal, c’est le seul à avoir réussi.

Quelques ajustements et un résultat bluffant

Tout n’a pas marché du premier coup. A plusieurs reprises j’ai confronté les résultats de Github Copilot, une recherche Google classique et Grok, Grok donne en général la meilleure des réponses avec le moins d’informations. C’est assez bluffant sachant que Github Copilot est totalement intégré à l’IDE contrairement à Grok qui n’a qu’un minimum d’information.

Une transformation éclair malgré mon inexpérience

En quelques heures et une poignée d’échanges avec Grok 3, j’ai métamorphosé mon vieux site Twig/Symfony en une application moderne React + CodeIgniter. Le frontend, presque entièrement conçu avec l’aide de Grok malgré mon manque d’expérience en React, est fluide et réactif. Le backend, lui, reste léger et efficace.

Si vous envisagez de moderniser votre site, même sans être un pro de React ou d’un autre outil, je ne peux que vous encourager à tester Grok 3. Attention toutefois à ce que vous lui transmettez comme information, Grok n’est pas connu pour protéger vos données, exit donc les mots de passe, données privées, etc.

Le site est disponible ici: https://ludovicfavre.ch/

Catégorie : Uncategorized | Commentaires fermés sur J’ai redéveloppé mon site avec React et CodeIgniter grâce à Grok 3, sans presque aucune expérience en React.

Symfony, c’est fini. Vive CodeIgniter !

Pourquoi je quitte Symfony pour CodeIgniter
Après des années à travailler avec Symfony, j’ai pris une décision radicale : abandonner ce framework pour migrer mon site vers CodeIgniter. Mon site actuel repose sur Symfony 3.4, une version qui commence sérieusement à dater. Avec la dernière mise à jour PHP imposée par mon hébergeur, je n’avais plus le choix : il fallait porter le projet vers Symfony 7 pour rester compatible. Mais ce qui devait être une simple mise à jour s’est transformé en galère…

Une migration qui tourne au fiasco
Initialement, je me suis dit : « Faisons simple ». J’ai tenté de migrer un seul composant – une page, un menu ou une API – pour voir comment ça se passait. Spoiler : ça s’est mal passé. Très mal passé. Le gros problème ? L’absence de procédure claire pour passer de Symfony 3.4 à Symfony 7. Les guides officiels sont flous, les étapes manquent de précision, et quand une méthode est dépréciée, on ne te dit pas toujours par quoi la remplacer. Résultat : on se retrouve à tâtonner pour des choses pourtant simples.

Avec les versions 6 et 7, Symfony introduit plusieurs manières de faire la même chose. Génial sur le papier, mais en pratique, ça complique tout. La documentation, qui devrait être une boussole, est devenue une source de confusion. Trop d’options, pas assez de clarté. J’ai passé des heures durant un week-end à essayer de faire fonctionner ne serait-ce qu’une petite partie de mon site. À bout de patience, j’ai décidé de tester une alternative.

Un test pour une solution alternative
Sur un coup de tête, j’ai configuré CodeIgniter dans un nouveau répertoire et l’ai connecté à la base de données pour voir ce que ça donnait. En moins de 30 minutes, j’avais une page fonctionnelle qui servait mes données exactement comme je le voulais. Trente minutes ! Là où Symfony me faisait tourner en rond depuis des heures, CodeIgniter m’a offert simplicité et efficacité. Pas de configuration interminable, pas de documentation alambiquée : juste un framework qui fait le job.

Pourquoi CodeIgniter et pas Laravel ?
CodeIgniter n’est pas nouveau pour moi. J’ai déjà développé plusieurs sites avec, et je connais sa légèreté et sa flexibilité. C’est exactement ce qu’il me faut pour mon site. Laravel, qui est souvent cité comme une alternative moderne à Symfony. Mais pour le type de site que je développe Laravel me semblait « overkill »: Trop de fonctionnalités dont je n’ai pas besoin, alors que CodeIgniter va droit au but.

Symfony n’est pas pour autant un mauvais framework
Ce framework reste une alternative solide pour des projets conséquents, mais il nécessite un suivi régulier avec les mises à jour et des refactorings. Il est possible que je rencontre des problèmes de mises à jour avec CodeIgniter, mais comme ce framework est plus « simple », il sera plus rapide à adapter.


Bye Symfony !
Symfony m’a accompagné pendant longtemps, et j’apprécie sa puissance pour des projets d’envergure. Mais pour mon cas d’usage, il est devenu un frein plus qu’un allié. La migration vers Symfony 7 m’a fait réaliser que je perdais trop à adapter le code au framework, au lieu de construire avec lui. CodeIgniter, lui, répond à mon besoin : simplicité, rapidité, efficacité.

Je tourne la page, mon site va renaître sous CodeIgniter, et je suis impatient de retrouver le faire évoluer une fois la migration effectuée.

Catégorie : Coding, PHP, Uncategorized | Tag | Commentaires fermés sur Symfony, c’est fini. Vive CodeIgniter !

Dashboard d’énergie sous Home Assistant avec coûts journaliers

Cet article présente la configuration de senseurs de type « pince » (dans le cas présent: via une gateway envoy d’Enphase) afin de calculer:

  • La production journalière
  • La consommation (import et/ou solaire) journalière
  • L’exportation journalière d’énergie (production solaire)

Cette configuration se faisant de manière relativement simple sous Home Assistant, je voulais également calculer le coût quotidien de l’électricité.

Enphase propose déjà la gestion de tarif sur enlighten (leur portail online) mais je voulais avoir la même chose sur Home Assistant afin de ne pas dépendre d’Enphase pour stocker et consulter ces données.

Cet article traite le cas où les pinces sont branchées en consommation et en production. Il faut donc calculer la puissance produite et consommer. A cet effet, il faut déclarer deux senseurs dans configuration.yaml :


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
template:
  - sensor:
        name: Grid Import Power
        state_class: measurement
        icon: mdi:transmission-tower
        unit_of_measurement: W
        state: &gt;
            {{ &#91;0, states('sensor.envoy_&lt;id&gt;_current_power_consumption') | int(0) - states('sensor.envoy_&lt;id&gt;_current_power_production') | int(0) ] | max }}
  - sensor:
        name: Grid Export Power
        state_class: measurement
        icon: mdi:transmission-tower
        unit_of_measurement: W
        state: &gt;
            {{ &#91;0, states('sensor.envoy_&lt;id&gt;_current_power_production') | int(0) - states('sensor.envoy_&lt;id&gt;_current_power_consumption') | int(0) ] | max }}

Nous allons également déclarer un senseur pour le tarif heure pleine / heure creuse de la Romande Energie.


1
2
3
4
5
6
7
8
9
10
11
  - sensor:
        name: Tariff Price
        unit_of_measurement: CHF/kWh
        state: &gt;
            {% if is_state('select.energy_meter_tarif', 'hp') %}
                {{ 0.3675}}
            {% elif is_state('select.energy_meter_tarif', 'hc') %}
                {{ 0.2323}}
            {% else %}
                {{ 0 }}
            {% endif %}

Il s’agit du tarif horaire, ne comprenant pas la taxe d’abonnement de 9CHF / mois mais comprenant : Electricité + acheminement + taxe Swissgrid+ Taxe valais + TVA.

Il est ensuite possible de configurer les senseur pour l’import / export d’énergie:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
sensor:
  - platform: integration
    name: Grid Import Energy
    source: sensor.grid_import_power
    unit_prefix: k
    unit_time: h
    method: left

  - platform: integration
    name: Grid Export Energy
    source: sensor.grid_export_power
    unit_prefix: k
    unit_time: h
    method: left

ainsi qu’un « utility_meter » pour le tarif:


1
2
3
4
5
6
7
8
utility_meter:
  daily_energy:
    source: sensor.grid_import_energy
    name: Daily Import Meter
    cycle: daily
    tariffs:
      - hp
      - hc

ainsi que l’automatisation pour la bascule du tarif (dans automations.yaml)

En 2024, le tarif heure creuse est valable de 22h à 7h en semaine ainsi que les week-end.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
- id: '&lt;random>'
  alias: HP/HC Romange Energie
  description: ''
  trigger:
  - platform: time
    at: 06:00:00
    variables:
      tariff: hp
  - platform: time
    at: '22:00:00'
    variables:
      tariff: hc
  condition:
  - condition: time
    weekday:
    - mon
    - tue
    - wed
    - thu
    - fri
  action:
  - action: select.select_option
    target:
      entity_id: select.energy_meter_tarif
    data:
      option: '{{ tariff }}'
  mode: single

Sur un tableau de bord simple, cela donne :

Il faut ensuite configurer ces entités dans le module Energie de Home Assistant :

En particulier, préciser le tarif pour la consommation du réseau et l’énergie retournée au réseau:

Résultat (un jour pluvieux):

Nous avons maintenant un coût journalier (actualisé plusieurs fois par jour) qui peut être consolidé par période (semaine, mois, année).

Source: Enphase Envoy with Energy Dashboard – Share your Projects! – Home Assistant Community (home-assistant.io)

Catégorie : Home Assistant | Tag , , | Commentaires fermés sur Dashboard d’énergie sous Home Assistant avec coûts journaliers

Configurer Starship avec WSL pour booster sa productivité

Starship est un prompt « cross-shell », amélioré, ultra-rapide et personnalisable.

En cherchant comment personnaliser l’affichage de mon shell dans différente conditions, je suis tombé sur starship qui présente de nombreux avantages:

  • multi-shell
  • compatible avec WSL
  • personnalisable
  • performant, avec un faible impact sur les ressources

L’installation est on ne peut plus simple et est décrite sur la page de documentation. Ci-après, je décris comment l’installer sous n’importe quelle distribution Linux WSL (Debian dans mon cas):

  1. Lancer le script d’installation :
    1
    curl -sS https://starship.rs/install.sh | sh
  2. Ajouter la ligne suivante à la fin de ~/.bashrc
    1
    eval "$(starship init bash)"
  3. Recharge la config bash:
    1
    source ~/.bashrc

Starship est maintenant installé. Vous l’aurez remarqué, l’affichage est un peu « buggé ». C’est normal, il faut encore ajouter une Font supportant les icones. Pour ça, il y a l’excellent site nerdfonts.com. Dans mon cas j’ai choisi le « Hack Nerd Font ». L’installation est on ne peut plus simple:

  1. Télécharger le font (sous Windows)
  2. Ouvrir les fichiers polices souhaités et clicker sur « Installer

Il reste deux étapes importantes à effectuer pour avoir un prompte hyper pratique:

La première, il faut configurer la police installée dans le Terminal Windows: Paramètre -> Debian -> Apparence

La deuxième étape, il faut customiser starship. Ca s’effectuer en éditant le fichier ~/.config/starship.toml.

Exemple de ma configuration (attention, les icônes ne seront pas reprise correctement car la police n’est pas installée sur ce site, il faut les adapter selon votre besoin. Ce fichier se trouve également sur mon repo Github


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
# ~/.config/starship.toml

add_newline = false
command_timeout = 1000
format = """$os$username$hostname$kubernetes$directory$git_branch$git_status"""

# Drop ugly default prompt characters
&#91;character]
success_symbol = ''
error_symbol = ''

# ---

&#91;os]
format = '&#91;$symbol](bold white)'
disabled = false

&#91;os.symbols]
Windows = ''
Arch = '󰣇'
Ubuntu = ''
Macos = '󰀵'

# ---

# Shows the username
&#91;username]
style_user = 'white bold'
style_root = 'black bold'
format = '&#91;$user]($style)'
disabled = false
show_always = true

# Shows the hostname
&#91;hostname]
ssh_only = false
format = '@&#91;$hostname](bold yellow):'
disabled = false

# Shows current directory
&#91;directory]
truncation_length = 10
truncation_symbol = '…/'
home_symbol = '󰋜 ~'
read_only_style = '197'
read_only = '  '
format = '&#91;$path]($style)&#91;$read_only]($read_only_style)&gt; '
truncate_to_repo = true
# Shows current git branch
&#91;git_branch]
symbol = ' '
format = '\(&#91;$symbol$branch]($style)\)'
# truncation_length = 4
truncation_symbol = '…/'
style = 'bold green'

# Shows current git status
&#91;git_status]
format = '&#91;$all_status$ahead_behind]($style) '
style = 'bold green'
conflicted = '🏳'
up_to_date = ''
untracked = ' '
ahead = '⇡${count}'
diverged = '⇕⇡${ahead_count}⇣${behind_count}'
behind = '⇣${count}'
stashed = '$ '
modified = ' '
staged = '&#91;++\($count\)](green)'
renamed = '» '
deleted = '✘ '

# Shows kubernetes context and namespace
&#91;kubernetes]
format = 'via &#91;󱃾 $context\($namespace\)](bold purple) '
disabled = true

# ---

&#91;vagrant]
disabled = true

&#91;docker_context]
disabled = true

&#91;helm]
disabled = true

&#91;python]
disabled = true

&#91;nodejs]
disabled = true

&#91;ruby]
disabled = true

&#91;terraform]
disabled = true

Une fois le fichier starship.toml, la prochaine ligne de shell sera directement à jour avec la configuration.

Quelques exemples du résultat dans le Terminal (j’ai masqué mes info host/machine):

La dernière étape consiste à configurer VSCode pour supporter l’affichage. Comme pour le Terminal, il faut lui préciser la police à utiliser, sans quoi, les icônes ne seront pas affichées:

Dans settings.json, ajouter les configurations suivante, selon vos préférences :


1
2
"terminal.integrated.fontFamily": "Hack Nerd Font Mono",
"terminal.integrated.fontSize": 12

Voilà VSCode configurer avec starship dans le terminal WSL. La méthode s’applique dans d’autres terminaux également ce qui permet de retrouver une uniformité entre différents shell avec un niveau élevé de personnalisation assurance un gain en productivité

Catégorie : Windows | Tag , , | Commentaires fermés sur Configurer Starship avec WSL pour booster sa productivité