Construire des Logiciels RÉELS : L’Élément Manquant dans le Codage IA (Workflow Firebase)

Pensez à toutes les démonstrations de codage IA que vous avez vues. Maintenant, réfléchissez à combien d’entre elles vont réellement devenir des produits que les gens utiliseront et pour lesquels ils paieront. Vu sous cet angle, il n’est pas surprenant qu’il existe un élément crucial dont personne ne parle. Aujourd’hui, je vais vous montrer comment surmonter cette lacune et faire un pas de géant vers l’utilisation d’outils d’IA comme Gemini, Firebase et Windsurf pour construire de véritables logiciels. Des logiciels que les gens peuvent réellement utiliser et pour lesquels vous pouvez facturer de l’argent.

L’Expérience qui Change Tout

Lorsque je dirigeais mon agence de marketing, nous servions certaines des plus grandes entreprises de logiciels au monde, et c’était passionnant de travailler aux côtés d’équipes de développement talentueuses. J’étais impressionné par la façon dont ces magiciens pouvaient créer des logiciels qui généraient des millions de dollars. Je n’ai jamais pensé que j’aurais ce pouvoir jusqu’à l’arrivée de l’IA.

J’ai distillé le meilleur de mes expérimentations en un processus simple et étape par étape que n’importe qui peut suivre. Pas besoin d’un diplôme en informatique.

Pourquoi C’est Important

Dans la ruée vers l’or de l’IA actuelle, les non-codeurs sont vraiment limités à la construction de logiciels très basiques. Et bien que ces expériences puissent être amusantes, ce ne sont que des châteaux de sable numériques qui attendent d’être emportés par la marée.

Si vous avez déjà essayé le « vibe coding » (codage par intuition avec l’IA), vous savez à quel point c’est frustrant quand vous et l’IA commencez à tourner en rond. J’appelle cela le cercle infernal. C’est là où l’IA n’en sait pas assez pour avancer, et vous non plus.

Il est temps de dépasser cette frustration, d’aller au-delà de ces expériences, et de construire une base solide pour votre idée qui peut évoluer et s’adapter.

L’État d’Esprit d’Ingénieur

Une grande partie de cela tourne autour de l’adoption d’un état d’esprit d’ingénieur. Je ne dis pas que vous devez apprendre à coder à l’ancienne, mais comprendre comment fonctionne un logiciel sous le capot est assez nécessaire pour créer quelque chose de valeur.

Avoir une compréhension de base des bases de données, des API et de la façon dont le frontend interagit avec le backend vous sera très utile lors de la construction de votre outil logiciel. Ce qui est génial avec l’IA, c’est que vous pouvez apprendre tout en construisant des choses utiles.

Le Problème Fondamental des Démos IA

Le plus grand problème que je vois avec toutes ces démos de codage IA est qu’elles n’ont pas de base de données. Elles se contentent de maximiser ce qui est possible sur le frontend ou ce qui peut être fait dans le navigateur. Et puis les gens sont souvent confus quant à pourquoi ça ne fonctionne pas et pourquoi l’IA tourne en rond sans progresser.

C’est parce qu’il n’y a pas de base de données. Tout logiciel que vous utilisez a une base de données qui y est connectée. Et c’est ce dans quoi nous allons plonger aujourd’hui. La base de données finira par être le fondement de votre logiciel que vous pourrez ensuite construire et faire évoluer, et enfin obtenir de la traction avec l’idée que vous cherchez à créer.

Mise en Place avec l’Aide de Gemini

Je vais utiliser une feuille de triche que j’ai créée pour cette vidéo. J’en fais une pour chaque vidéo que je crée. Il y en a maintenant plus de 130, toutes instantanément accessibles à quiconque rejoint mon Patreon. Il y a un lien dans la description, alors consultez-le si vous êtes intéressé.

Le premier prompt que je vais utiliser nous aidera à utiliser Gemini pour réfléchir à ce que notre base de données devrait être, quel devrait être son schéma. Je le dépose directement dans Gemini.

Il y a quelques éléments dans ce prompt que je veux souligner car ils sont très précieux :

La première moitié donne simplement un rôle et un objectif à l’IA, lui disant qu’elle est un architecte de base de données expérimenté et lui demandant de l’aide pour concevoir la base de données d’un nouveau produit logiciel.

La deuxième partie est là où se trouve la magie : « Veuillez me poser des questions une par une jusqu’à ce que vous ayez suffisamment d’informations pour fournir des commentaires. Veuillez fournir des options avec vos commentaires dans la mesure du possible. »

En demandant des questions une par une, nous ne sommes pas submergés par une multitude de questions, et nous lui demandons de nous donner un retour sur nos options à chaque étape.

Création d’un Schéma de Base de Données

Je travaille toujours sur cette idée de startup pour stocker et partager vos propres informations d’analyses sanguines, car j’ai récemment eu des problèmes de santé qui m’ont montré à quel point il est frustrant d’accéder à ces analyses et de les partager avec différentes personnes.

L’IA me demande plus d’informations sur ces données. Ce que j’ai trouvé vraiment utile, c’est que si vous avez des données réelles comme moi, cela peut être très utile pour créer ces bases de données. Et même si vous n’avez pas ces données, vous pouvez demander à l’IA de créer des données synthétiques pour vous.

J’ai mes données réelles, donc je vais simplement les télécharger ici. Je les dépose ici en disant « Voici un exemple des données que je devrai stocker dans la base de données ». Souvent, il est beaucoup plus facile de montrer que de dire.

Au fait, vous voudrez probablement utiliser Gemini 2.5 Pro pour cela si vous y avez accès.

L’IA me pose de bonnes questions, et j’aime comment elle me donne l’option A ou l’option B, conformément au premier prompt que nous avons entré. Nous pouvons simplement dire « option A ».

Souvent, elle présente un tas d’options que je ne comprends pas complètement. À ce stade, je dis simplement quelque chose comme : « Que recommandez-vous ? Allons-y avec ça. »

Vous pouvez suivre un processus similaire pour n’importe quelle pile technologique que vous prévoyez d’utiliser et toutes les API et autres choses que vous prévoyez d’utiliser en coulisses avec votre logiciel. Plus vous commencez à comprendre cela, plus vous aurez de contrôle sur ce que vous construisez.

Vous pouvez avoir beaucoup d’allers-retours avec l’IA et cela peut devenir assez compliqué. À un moment donné, il peut être judicieux de simplement la pousser un peu et de dire : « Hé, donnez-moi juste un schéma », qui est vraiment juste une feuille de route de la façon dont les données doivent être stockées.

Et c’est parfait. Elle nous donne maintenant un schéma de base de données initial avec deux tables. Vous pouvez considérer ces tables comme deux feuilles différentes dans un tableur. Et chacune de ces tables est essentiellement comme un tableur avec des colonnes, le type de données et toutes les contraintes sur les données qui s’y trouvent.

Vous pouvez voir la table deux, les résultats de laboratoire ici aussi. Donc juste avec cela, nous avons maintenant construit la structure de données de base de notre produit logiciel.

Mise en Place de Firebase

Maintenant que nous avons cela, nous pouvons passer à Firebase Studio et commencer à construire. Si vous êtes nouveau dans ce domaine, Firebase Studio et Firebase sont deux choses différentes. Firebase Studio est l’endroit où vous construisez le logiciel. C’est ce qu’on appelle un IDE. Et Firebase lui-même est juste un moyen de stocker des informations. Il offre diverses bases de données et autres outils.

Nous voici dans Firebase Studio. Je clique simplement sur « Essayer Firebase Studio ». Vous pouvez prototyper l’application ici, mais j’aime commencer avec un nouvel espace de travail vide pour m’assurer que rien de supplémentaire ne s’y glisse qui pourrait nous causer des problèmes plus tard.

En fait, j’aime même commencer avec un espace de travail vide, pas un qui est déjà rempli d’un tas de choses. Cela va prendre une seconde pour démarrer.

Et voici à quoi ressemble un beau projet nouveau et vide. Vous pouvez voir ici, ce sont vos dossiers. Et c’est ici que vous interagissez avec Gemini pour construire votre logiciel. Ce dossier initial est vraiment juste lié à l’IA elle-même. C’est aussi simple que possible, ce que j’apprécie vraiment.

Ensuite, je veux passer de ce modèle Gemini intégré par défaut à Gemini 2.5 Pro. Et pour cela, nous aurons besoin d’une clé API. Ce qui est vraiment cool, c’est qu’il vous donne un lien ici où vous pouvez obtenir cette clé API et vous devez cliquer sur « Créer une clé API ». Vous devrez peut-être configurer un projet dans Google AI Studio si vous ne l’avez pas déjà fait.

Nous allons créer une nouvelle clé API. Une fois que vous l’avez, vous devriez pouvoir accéder à Gemini 2.5 Pro. Vous devrez peut-être également configurer une facturation ici. Je peux vous dire que c’est assez peu coûteux pour commencer à expérimenter avec tout cela.

Configuration de la Base de Données Firebase

Ensuite, nous devons aller sur Firebase pour configurer cette base de données. C’est simplement firebase.google.com. Nous allons faire défiler jusqu’à la section de construction et nous allons aller à la base de données en temps réel. C’est la base de données la plus simple qu’ils offrent et c’est un bon point de départ.

Vous pouvez voir que j’ai déjà expérimenté avec quelques-unes d’entre elles. Nous allons en commencer une nouvelle. Nous allons créer une base de données. Nous allons commencer en mode test, ce qui est plus facile pour la construction.

Et maintenant nous avons ce lien vers notre base de données. Nous allons le copier. Et maintenant, je vais prendre ce prompt et nous allons le déposer directement dans Firebase Studio. Nous allons remplacer ce lien par le lien que nous venons de construire.

Nous allons copier tout ce schéma que nous venons de construire à partir de Gemini. Rappelez-vous, le schéma n’est qu’un mot sophistiqué pour une description de la base de données. Et nous allons le déposer ici et voir ce qui se passe.

Gestion des Limites de Taux et de la Facturation

Il dit que je dois payer. Je dois augmenter mes limites de taux. Les trucs de facturation de Google sont si déroutants. Mais quand vous cliquez ici et suivez ces liens, vous devriez pouvoir mettre à niveau votre facturation et la financer un peu.

Nous y voilà. Je le lie à mon compte de facturation. Et comme je l’ai dit, j’ai beaucoup utilisé cela. Je n’ai dépensé que 1,29 $ jusqu’à présent. Donc, espérons que vous pourrez emprunter quelques dollars à quelqu’un pour commencer à financer votre empire logiciel.

Ok, essayons à nouveau. Et voilà. Ça commence à fonctionner.

Comprendre la Pile Technologique

Maintenant, je veux expliquer la pile technologique que j’utilise. Je m’en tiens à une pile technologique Node React complète. C’est une pile JavaScript assez standard. Si vous n’avez aucune idée de ce que cela signifie, ne vous inquiétez pas. Vous voudrez peut-être, dans votre temps libre, commencer à apprendre ce que sont ces outils un peu à l’intérieur de votre grand modèle de langage préféré comme Gemini peut vous enseigner tout sur cette pile technologique.

J’ai choisi celle-là parce qu’elle est si populaire et semble être nativement ce que l’IA aime créer. Et au fur et à mesure que vous construisez votre produit, ce que j’ai trouvé vraiment cool, c’est de simplement basculer d’avant en arrière. Donc, avoir une autre instance de Gemini ouverte où vous pouvez simplement lui poser des questions.

Par exemple, en ce moment, il crée ce package.json. Vous savez, laissez-le faire. Laissez-le faire son truc. Mais pendant tout ce temps qu’il travaille, vous pourriez être en mesure de lui demander ici, qu’est-ce que ce package JSON ? Qu’est-ce que cela signifie ? Pourquoi en ai-je besoin ? Car cela reviendra encore et encore au fur et à mesure que vous construirez ces projets.

Et vous seriez surpris de la rapidité avec laquelle vous pouvez commencer à assimiler ces choses, surtout lorsque vous n’avez pas à écrire chaque petit bout de code. Vous apprenez simplement ce que fait l’IA. Ce sera très utile une fois que l’IA se perd, vous pouvez la remettre sur la bonne voie.

Installation et Configuration

Nous allons installer Node. C’est tout ce que cela signifie. Et je ne savais pas ce que cela signifiait il y a longtemps, mais cela installe le logiciel que nous allons utiliser comme backend pour se connecter à cette base de données. Et cela vous guide exactement sur ce que vous devez faire ici.

Donc, nous allons dans les paramètres, les paramètres du projet, les comptes de service, générer une nouvelle clé privée, la télécharger sur le bureau.

Souvent, l’IA vous demandera de faire des choses qu’elle peut faire elle-même. Je trouve que Windsurf est un peu meilleur pour cela et globalement Windsurf est un peu plus facile à utiliser. Donc, si vous avez du mal avec certaines de ces choses, essayez Windsurf et assurez-vous d’utiliser Gemini 2.5 Pro à l’intérieur.

Il y a beaucoup de choses qui semblent simplement mieux fonctionner à l’intérieur de Windsurf sans trop entrer dans les détails. Il semble avoir une plus grande conscience contextuelle de ce qui se passe.

Apprentissage par l’Expérience

Ok, donc cela nous a dit, vous savez, que nous devrions créer ce fichier, créer ce dossier. J’ai juste dit : « Hé, pourquoi ne le fais-tu pas ? » Et voilà, il l’a fait pour nous, ce qui serait vraiment bien s’il savait qu’il pouvait le faire.

Je lui dis simplement de continuer. Et encore une fois, je ne suis pas vraiment sûr de ce qu’il fait ici. J’en apprends plus chaque fois que je passe par là. Et de cette façon, j’aime l’appeler « apprentissage par intuition » où nous ne lui disons pas simplement, vous savez, quoi faire.

Vous savez, ces personnes sophistiquées qui codent depuis un moment peuvent réellement coder par intuition parce qu’elles savent quoi lui dire quand elle se bloque. Elles savent comment configurer ces petites choses d’abord. Alors que les personnes tout à fait nouvelles qui ne sont pas des codeurs, elles ne peuvent pas coder par intuition simplement en disant, vous savez, créez-moi cette incroyable application qui fait XYZ. Elle n’aura tout simplement pas assez d’informations pour le faire avec succès.

Résolution de Bugs et Persistance

Et encore une fois, elle nous dit d’exécuter ces commandes. Mais si vous la poussez simplement, dites, donnez-moi cette commande, elle va vous donner quelque chose sur lequel vous pouvez simplement cliquer ok. Boom.

Et bien sûr, la correction de bugs, c’est 90% du codage. Donc, vous savez, ne soyez pas surpris si vous rencontrez des problèmes comme celui-ci où elle génère des erreurs. Vous allez simplement devoir les résoudre.

Et si vous vous retrouvez dans ce cercle infernal, souvent cela aide de simplement faire une pause, de faire une promenade, de demander à une autre IA dans une autre fenêtre. Hé, voici ce que je vis. Que puis-je faire pour résoudre ce problème ? Essayez Windsurf. Windsurf peut souvent résoudre beaucoup de ces choses beaucoup plus rapidement que Firebase Studio. En ce moment, il semble être le plus facile pour faire les choses pour un non-codeur comme moi.

Population de la Base de Données

Maintenant, j’aimerais peupler la base de données avec les données d’exemple que nous avons créées. Et je lui demande, vous savez, de créer un dossier. J’ai juste dit : « Hé, dans quel dossier devrais-je déposer ceci ? » Et elle m’a donné une petite commande pour un dossier de données, qu’elle a créé. J’ai déposé mon fichier directement là-dedans.

Elle détermine comment charger ces données de test dans la base de données. Elle construit maintenant la base de données de départ à partir de ces informations. Génial. Il semble qu’elle ait extrait toutes ces données.

Construction des Points de Terminaison API

Maintenant que la base de données a été peuplée, nous allons commencer à nous déplacer vers le milieu de la pile ici et travailler de la base de données backend vers le frontend, qui est l’application réelle que vous voyez sur votre navigateur.

Nous allons utiliser ce prompt qui dit simplement, commençons à construire les points de terminaison API afin que nous puissions lire ces données sur le frontend. Et encore une fois, ne soyez pas intimidé si vous ne savez pas ce que tout cela signifie. Allez-y simplement, suivez le courant, essayez, vous savez, encore et encore et vous commencerez à comprendre.

Surtout si vous continuez à poser des questions et à apprendre ces choses et à être curieux de la façon dont ces choses s’assemblent parce qu’il n’y a vraiment pas tant de composants une fois que vous commencez à comprendre ce qui se passe pour que cela fonctionne.

Test des Points de Terminaison API

Bien, nous avons construit ces points de terminaison API. Ensuite, il s’agit de les tester en utilisant curl, ce que j’ai déjà fait, mais vous pouvez utiliser ce prompt pour cela.

Il existe un autre outil fantastique appelé Postman que vous voudrez peut-être consulter, qui est vraiment utile pour explorer toutes sortes d’API différentes, car une grande partie des logiciels que nous utilisons n’est vraiment qu’une API connectée à une autre. Donc, comprendre comment obtenir des informations de ces API peut être vraiment utile. Postman aide à cela.

Il y a beaucoup de buzz autour de ces différents MCP qui sont en cours de développement. Donc, vous savez, beaucoup d’entre eux ne font que se connecter à différents points de terminaison API.

Et même en disant cela, je réalise que je n’avais aucune idée de ce que tout cela signifiait il y a seulement une semaine ou deux. Donc, je suis dans le même bateau que vous. J’apprends à faire cela. Je n’apprends pas à coder de la manière traditionnelle, mais j’essaie simplement d’en apprendre assez pour être dangereux, assez pour construire réellement quelque chose de valeur.

Construction du Frontend React

Donc, j’ai testé ces points de terminaison API en utilisant cela et maintenant il est temps de construire le frontend React, que nous pouvons utiliser pour afficher les données et être vraiment sur notre chemin pour commencer à les manipuler et à ajouter des fonctionnalités et à construire notre logiciel. Alors, déposons simplement ceci.

Bien, nous commençons avec ce frontend ici. Nous avons créé un répertoire ici appelé frontend. Une fois que nous l’aurons mis en marche, il vous donnera du code pour démarrer ce frontend. Et nous pouvons voir ici tous mes beaux résultats de laboratoire.

Conclusion et Perspectives

Et je sais que cela ne semble pas impressionnant par rapport à beaucoup d’autres démos là-bas, mais nous sommes bien sur notre chemin pour créer quelque chose qui est très précieux parce que nous avons vraiment créé un véritable morceau de logiciel ici avec un backend, avec une base de données, avec un frontend.

Et à partir de là, nous pouvons commencer à dire, d’accord, maintenant nous voulons juste mettre en évidence les analyses sanguines anormales ici. Ou nous voulons commencer à manipuler cela de différentes manières. Nous voulons commencer à rendre cela plus joli ou ajouter des fonctionnalités. Beaucoup de directions que nous pouvons prendre à partir d’ici maintenant que nous avons cette base solide.

Je peux vous dire que j’ai déjà construit des outils qui me fournissent beaucoup de valeur, différentes façons de suivre mes supporters Patreon et différentes façons de suivre, vous savez, les engagements par e-mail que j’obtiens avec mon public.

Il y a beaucoup plus dans la feuille de triche sur tout cela, approfondissant ma pile technologique particulière dont j’ai parlé ici. Il y a un lien vers cette feuille de triche dans la description. Quiconque me soutient sur Patreon y aura accès immédiatement ainsi qu’à plus de 130 autres feuilles de triche là-dedans. Il y a aussi des options de coaching là-dedans.

Et j’ai une autre vidéo sur la création d’une startup unipersonnelle qui va très bien avec celle-ci. Alors jetez un œil à cette vidéo. Je vous verrai là-bas.