Ça fait deux mois que je vibe-code, d’abord avec Claude Code puis avec Codex CLI. Ces dernières semaines, j’avais pas mal de tokens sous la main et peu de projets, alors je me suis lancée, juste pour le plaisir, dans la création d’un outil permettant d’écouter des documents en audio et les annoter en même temps (un mixte d’Audible et Kindle). Au final, il s’est révélé vraiment utile : mes parents, dont la vue a pas mal baissé, en ont bien besoin pour se faire lire des livres à voix haute grâce à l’IA. J’ai décidé de faire la version logiciel Windows (un simple .exe) pour qu’ils puissent l’installer sur leur ordinateur.
C’est la première fois que je crée un logiciel. Même si j’ai un peu d’expériences, je ne suis absolument pas développeur, je sais ce que c’est qu’un algorithme et j’ai codé pas mal de scripts pour automatiser mon travail (en marketing). Mais je n’ai jamais compilé quoi que ce soit et ne sais même pas ce qu’est Electron.
Quand je travaillais (en marketing) pour une entreprise de software, j’admirais particulièrement les équipes de Product Management (qui invente des fonctionnalités) et l’équipe QA (quality assurance dont le métier est juste de trouver des bugs et failles). Avec mon propre logiciel, j’ai enfin pu « jouer » au product management & QA. Yessss!!
J’entre ce prompt dans chatGPT.
Je voudrais créer un logiciel type audible qui fonctionne en web local sur windows. On peut y uploader des urls mais aussi des fichiers epub, html, txt, pdf. Une fois le fichier uploadé, les chapitres seront automatiquement repérés. Sur la colonne gauche, on a des boutons "upload un fichier", "upload url", "accéder à la bibliothèque", quand on clique sur accéder à la bibliothèque on voit sur la droite la liste des fichiers déjà uploadés; on peut les classer par date d'ajout ou A à Z, ou Z à A, on peut aussi modifier le titre du fichier, on peut supprimer facilement chaque fichier. Quand on veut lancer la lecture d'un fichier on clique sur le titre du fichier, le texte du fichier s'affiche + les boutons play, avancer d'un paragraphe/chapitre, la liste des chapitres, + choix de langues (EN, FR, VN) voix (homme/femme), types de voix, speed, pitch. Il faut que le logiciel affiche le paragraphe en cours de lecture et garde la position si on arrête ou ferme le logiciel. Propose moi l'UI adapté, as tu des ajouts ou suggestions d'amélioration ?
chatGPT me propose quelques améliorations, j’apporte quelques modifications, le challenge un peu. On arrive à un plan détaillé, puis il me sort des mock ups, qui me plaisent beaucoup :
Je les trouve vraiment pas mal et lui demande un prompt pour Claude Code pour effectivement coder le logiciel. On part sur du plan mode pour valider le plan technique, puis c’est parti !
Le projet est traité en plusieurs phases, Claude Code va coder chaque phase, s’arrêter, je vérifie, fais des feedbacks, il corrige et puis on continue une autre phase.
La squelette du logiciel est faite très vite et à chaque fois, je peux « toucher » le logiciel avant de suggérer des modifications.
J’aime beaucoup beaucoup le process, ça demande beaucoup de réflexion pour rendre l’UI facile à utiliser et logique, et ajouter des fonctionnalités auxquelles personne ne pense mais que tout le monde trouve utile ! Ce n’est pas parce qu’il y a peu de boutons qu’il y a peu de travail, parce que justement le travail a été fait en amont pour avoir le moins de boutons et de clics possible.
Ca me rappelle un déjeuner où mon ancien manager m’a dit, il y a 13 ans, qu’il me voyait bien faire un métier où je ferais le pont entre les experts et les développeurs, càd que je traduirais les besoins « métier » en specs pour les développeurs… une sorte de Product Manager interne. A cette époque, le timing n’était pas bon pour que je re-fasse une reconversion, mais cela montre qu’il était si visionnaire et intuitif qu’il voyait le bon chemin pour moi. Si vous avez dans votre entourage quelqu’un aussi visionnaire et intuitif, proposez-lui un déjeuner, ce sera plus efficace qu’un bilan de compétences.
Le risque avec ce genre de logiciels, c’est la sécurité. Les pdf & epub qu’on trouve en ligne risquent de comporter des scripts qui s’exécutent et peuvent ruiner un ordinateur, donc il faut demander à Claude Code de sécuriser un maximum.
Pour cela, j’ai créé un agent spécialisé en cybersécurité, un agent spécialisé en UX UI et un agent QA – qui auditent chaque phase du projet, trackent et corrigent les erreurs.
Pour les voix, j’utilise à la fois les voix d’Edge TTS (gratuit, nécessite une connexion Internet) et Microsoft (gratuit, offline mais moins naturel).
J’ai découvert que « compiler un logiciel » était au bout du prompt. Electron permet d’emballer une interface web avec Chromium et Node.js pour en faire une application Windows classique. Au bout du processus, on obtient bien un fichier d’installation en .exe, mais il reste ensuite à tester le logiciel sur un autre ordinateur (celui de mes parents), remonter les bugs automatiquement et gérer les mises à jour (bientôt).
Mes points préférés
- Découpage automatique du document en chapitres : c’était un point délicat et difficile car il faut couvrir un large éventail de formats et fichiers mal mis en page. J’ai utilisé plusieurs logiciels de lecture AI et ils ont tous beaucoup de mal avec les chapitres.
- Surlignage & annotation : j’adore surligner et annoter – et j’adore partir en mode « full surlignage », la souris se transforme en surligneur. C’est un point que j’ai amélioré par rapport à Kindle où il fallait 2 clics pour surligner le moindre truc. On peut exporter facilement les surlignages & annotations.
- Les voix vietnamiennes : je suis très contente de la qualité des voix vietnamiennes, j’ai testé d’autres apps et ça ne me plaisait pas autant que mon logiciel 🙂 j’espère que mes parents seront contents aussi
- Et à part les coûts de développement que j’ai payés à l’IA, ce logiciel sera GRATOS à utiliser
- Le design épuré, je suis pas pro en UX UI mais je trouve que l’IA et moi nous nous sommes bien débrouillés !
- Le logiciel gère la bibliothèque de livres sur ordi mais ouvre aussi un accès au smartphone via le réseau local (c’est parce que je n’ai pas envie de créer une app iPhone ni un site web). Sur smartphone, c’est une version light qui se comporte presque comme Audible. Mais avec la possibilité de suivre le texte en même temps que l’audio (si on le souhaite).
| Couche | Technologies et rôle |
|---|---|
| Application desktop | Electron 43 — transforme l’interface web en application Windows |
| Langage | TypeScript pour le processus principal, le preload, l’interface et le code partagé |
| Interface | React 19, React Router et CSS personnalisé, sans Tailwind |
| État de l’interface | Zustand |
| Validation des données | Zod pour les communications IPC, l’API locale et les schémas partagés |
| Compilation et build | Vite 7 et electron-vite |
| Tests automatisés | Vitest et jsdom — environ 210 tests |
| Qualité du code | ESLint et Prettier |
| Installateur Windows | electron-builder avec cible NSIS et script NSIS personnalisé pour le comportement de l’installateur (choix de la langue par défaut). |
| Base de données locale | SQLite via node-sqlite3-wasm, sans compilateur C++ |
| Import des documents | pdfjs-dist pour les PDF, node-html-parser pour le HTML et fflate pour les EPUB et archives ZIP |
| Synthèse vocale | Edge TTS avec msedge-tts et Web Speech API pour les voix Windows |
| Audio mobile sur le réseau local | Diffusion HLS, avec FFmpeg exécuté par un serveur local sur le port 8789 |
| Internationalisation | Interface disponible en français, anglais et vietnamien, avec les traductions regroupées dans messages.ts |
| Icônes | lucide-react |
Je ne connaissais aucune de ces technologies (sauf SQL et CSS) jusqu’à il y a 3 jours 😀 Le vibe coding ne consiste pas seulement à écrire un gros prompt et attendre que l’IA fasse tout. Il faut découper le projet en petites étapes, tester chaque fonctionnalité, repérer les comportements bizarres et reformuler précisément ce qu’on veut (on peut aussi changer d’avis entre temps).
Il manque encore des fonctionnalités avancées, mais je suis très satisfaite de la v1. Laissons les fonctionnalités plus avancées aux v1.1, 1.2… J’ai également prévu les bases nécessaires à la gestion future des rapports de bugs et des mises à jour, au cas où je déciderais de distribuer le logiciel à un public plus large.
