Comment Créer un SaaS de A à Z avec l’IA (Formation) — Transcript

Formation complète pour créer, déployer et monétiser un SaaS de A à Z avec l'aide de l'IA, même sans expérience en codage.

Key Takeaways

Il est possible de créer un SaaS complet sans aucune expérience en codage grâce à l'IA et au vibe coding.
La formation couvre tout le cycle de création, du design à la monétisation, avec un focus sur le marché africain.
La sécurité et l’intégration des paiements sont des étapes cruciales pour un SaaS viable.
Le marketing et la stratégie d’acquisition d’utilisateurs sont essentiels pour le succès du produit.
La méthode a déjà permis à plusieurs SaaS d’atteindre rapidement des milliers d’utilisateurs.

Summary

Introduction à la création de SaaS pour débutants sans connaissance préalable en codage ou infrastructure.
Utilisation du 'vibe coding' : interaction en français avec une IA pour générer le code automatiquement.
Présentation de 10 modules couvrant les bases, outils, création, sécurité, développement, intégration API, paiements, SaaS avancé et marketing.
Installation et prise en main des outils essentiels comme Winurf, Cloud Code, Git et configuration des modèles IA.
Création progressive d'applications SaaS, du simple site vitrine au SaaS full stack avec base de données et système de paiement.
Focus sur la sécurité des applications avec bonnes pratiques et audit pour éviter les pertes de données.
Intégration de systèmes de paiement adaptés au marché africain, notamment Stripe et mobile money.
Stratégies marketing et pricing pour acquérir les 1000 premiers utilisateurs rapidement et scaler son SaaS.
Témoignage concret d’un utilisateur ayant atteint plus de 6000 utilisateurs en moins de 30 jours grâce à la formation.
Approche pédagogique sans blabla, structurée pour un apprentissage efficace et autonome.

Chapters

Full Transcript — Download SRT & Markdown

Speaker A

Salut ! Et dans cette formation, je m'apprête à te prendre d'un parfait débutant dans la création de logiciel SaaS à quelqu'un qui est capable de créer, déployer et monétiser ses propres applications tout seul avec l'aide de l'intelligence artificielle. Et quand je

Speaker A

te dis parfait débutant, je te parle de zéro. Tu n'as jamais codé de ta vie, ce n'est pas grave. Tu ne sais pas ce que c'est un serveur, une base de données, une API. On va tout voir à la fin de

Speaker A

cette formation. Tu auras créé plusieurs SaaS fonctionnels avec de vrais systèmes de paiement déployés en ligne et accessibles par n'importe qui à travers le monde. Ce que tu vas apprendre à faire, ça s'appelle du vibe coding. En gros, tu parles à une intelligence

Speaker A

artificielle en français, tu lui expliques ce que tu veux et elle code le tout pour toi. Tu ne tapes pas une seule ligne de code, elle le fait pour toi.

Speaker A

Toi, tu ne fais que diriger. Moi-même qui te parle, j'ai créé et lancé plus de cinq SaaS en l'espace de 2 mois avec cette méthode-là. Pas avec une équipe de développeurs, pas avec un budget fou.

Speaker A

Tout seul depuis Dakar, j'ai réussi à le faire et un de ces SaaS-là a bientôt plus de 200 000 utilisateurs et il y en a un autre qui va bientôt atteindre les 50 000 utilisateurs et les trois autres sont

Speaker A

tous à plus de 10 000 utilisateurs et tout ça je l'ai fait en l'espace de 2 mois. Et dans cette formation, non seulement je vais te montrer comment créer des SaaS, mais ensuite je vais te montrer comment les marketer. C'est

Speaker A

comme ma méthode, comment est-ce que je me prends pour acquérir mes 1000 premiers utilisateurs assez facilement.

Speaker A

Donc c'est juste pour te dire que cette formation est complète. Une fois que tu la suis, tu n'as pas besoin de suivre une autre formation. Il m'a pris énormément de temps et de travail à mettre en place. J'ai essayé d'aligner

Speaker A

chaque module dans l'ordre parfait pour un débutant, l'ordre exact dans lequel j'aurais voulu apprendre les choses si je repartais de zéro aujourd'hui. Donc pas de remplissage, pas de blabla.

Speaker A

Chaque minute compte, donc reste bien focus jusqu'à la fin. On a 10 modules dans cette formation et laisse-moi te montrer rapidement ce qu'on va couvrir ensemble. Donc le module 1, c'est celui-ci, c'est les fondations. On va poser toutes les bases. C'est quoi SaaS ?

Speaker A

Comment ça marche, pourquoi c'est le meilleur business model, comment fonctionne le web, comment fonctionne l'intelligence artificielle, les agents.

Speaker A

C'est la fondation sur laquelle va reposer tout le reste. Ensuite, on va passer au module 2 qui est la prise en main des outils. Donc dans ce module-là, on va tout installer. On va installer Winurf, Cloud Code, les comptes, Git. Je

Speaker A

te montre l'interface, comment parler à l'agent, comment choisir le bon modèle IA selon la tâche, comment personnaliser le comportement de l'IA. À la fin de ce module, tu es déjà opérationnel et prêt à lancer ton premier SaaS, donc ton

Speaker A

premier projet. C'est ce qu'on va faire dans le module 3. Donc on va créer ensemble un site web simple type portfolio ou landing page. Tu vas voir comment l'IA génère un design, comment l'ajuster et surtout comment le déployer

Speaker A

en ligne. Ce sera ton premier outil en live, ton premier déclic. Ensuite, on passera au module 4. On va parler de la sécurité des applications. Avant d'aller plus loin, on parle de sécurité. Les bonnes pratiques, les erreurs à éviter.

Speaker A

Comment faire un audit de sécurité sur ton app ? Ce n'est pas le sujet le plus excitant, mais si tu sautes ça, tu risques de tout perdre plus tard. Et ensuite, on va passer au module 5, ton premier SaaS full stack. Là, on passe aux

Speaker A

choses sérieuses. On crée une vraie application complète avec front end, back end, base de données, un vrai SaaS, ce n'est pas juste un site vitrine. Je te montre le vibe coding loop, la stack complète et on construit tout ensemble.

Speaker A

Et si tu ne comprends pas ce que je viens de dire en termes de front end, back end, de base de données, ne t'inquiète pas, je vais tout te montrer.

Speaker A

Dans cette formation, tu n'as besoin de rien savoir, d'accord ? Juste suivre cette formation et tu sauras exactement comment faire tout cela. Ensuite, on va passer au module 6. Et dans ce module, on va comprendre le développement.

Speaker A

Maintenant qu'on a construit, on prend du recul pour comprendre ce qu'on a fait, les bases de données SQL, les frameworks, GitHub, le versioning et surtout les techniques avancées pour utiliser les agents de manière intelligente.

Speaker A

Ensuite, on va passer au module 7 où on va parler de SaaS avec API et intégration. On va créer un SaaS plus ambitieux, planification, design UX, intégration d'API externe, debugging, branding, déploiement. Tu vas vraiment avoir tout le cycle de création d'un

Speaker A

vrai produit. Et ensuite, on passera au module 8 où on va voir les paiements.

Speaker A

C'est le module le plus crucial pour nous. On intègre Stripe, les cartes bancaires, mais surtout le mobile money parce que c'est ça qui marche pour nous en Afrique. Parce que si ton SaaS n'accepte pas le mobile money, tu perds

Speaker A

la majorité des clients. On va aussi débloquer les problèmes de paiement parce qu'il y en aura, crois-moi qu'il y en aura. Ensuite, il y aura le module 9 où on va faire un SaaS avancé de l'idée au produit. On part d'une idée et on

Speaker A

construit un SaaS complet de A à Z avec idéation, fonctionnalité, intégration, tout. C'est le module où tu deviens vraiment autonome. D'accord ? Après ce module, tu pourras vraiment créer n'importe quel type de SaaS qui te vient à l'esprit. Ensuite, on va passer au

Speaker A

module 10 qui est le module marketing, pricing et lancement parce que le meilleur produit du monde ne sert à rien si personne ne le connaît. Donc, comment fixer tes prix ? Comment trouver tes 1000 premiers clients, tes 1000 premiers

Speaker A

utilisateurs ? Quelles sont les stratégies qui marchent en Afrique ? Je vais te partager dans ce module-là ma stratégie personnelle que j'utilise pour scaler mes SaaS. Comme je te l'ai dit, tous les SaaS que j'ai lancés ont tous

Speaker A

atteint 1000 premiers utilisateurs en moins de 48 heures, ça c'est certain. Mais toi, comme je te dis, si tu utilises ma stratégie que je vais te montrer dans ce module 10, tu pourras avoir tes 1000 premiers utilisateurs en

Speaker A

moins de 30 jours. Et cela importe au niveau de SaaS, parce qu'en plus de te donner une stratégie marketing, je te donnerai aussi le meilleur business model que tu peux mettre en place pour ton SaaS. Donc voici ce qui t'attend.

Speaker A

C'est vraiment plusieurs heures de formation. C'est du concret, c'est du pratique et des vrais résultats que tu auras. Et voici un témoignage de Gamaliel Tank, un créateur de contenu très connu sur les réseaux Instagram, TikTok. Il a plus de 200 000 abonnés sur

Speaker A

Instagram. Il m'a contacté il y a moins de 2 mois, il voulait créer son SaaS Révision AI. Donc, je l'ai aidé à trouver le nom, je l'ai aidé à construire l'outil lui-même et en moins d'un mois, il m'a contacté pour me dire

Speaker A

"Ramadou, je viens d'avoir plus de 6000 utilisateurs en moins de 30 jours." Donc voici son témoignage.

Speaker A

J'ai eu la chance d'avoir accès à cette formation avant vous et surtout accès à l'accompagnement d'Amadou qui m'a permis de lancer mon premier SaaS et mon premier s'appelle Révision AI. Vous pouvez aller taper ça sur Google. Je l'ai mis sur

Speaker A

pied grâce à l'accompagnement d'Amadou avec son programme Easy SaaS. Et donc du coup, je vais vous montrer quelques résultats. Il y a moins de 2 mois, je l'ai lancé et je suis déjà à plus de 7523 users qui sont inscrits sur mon outil.

Speaker A

Et le plus magnifique dans ça, ce sont les revenus récurrents. D'accord ? Ce sont les revenus récurrents. C'est lorsque tu as créé, tu ne crées que une fois. Quand quelqu'un s'abonne, il paye de façon récurrente, surtout si ça

Speaker A

résout une vraie problématique, je veux dire si ton SaaS résout vraiment un vrai problème. Prenez cette formation au sérieux parce que ça va réellement vous permettre d'atteindre vos objectifs. Si c'est, euh, celui de

Speaker A

lancer votre SaaS, vous pourriez également atteindre ces résultats-là. Ne doutez pas de la crédibilité.

Speaker A

m'accompagnait euh voilà, personnellement, je je veux pas parler d'autres personnes qui l' accompagné pour pouvoir lancer les projets. Il m'accompagna à pouvoir lancer mon tout premier SAS en 2026 en l'espace de quelques semaines seulement et du coup ça me donne des revenus récurrents comme

Speaker A

je t'ai montré dans cette vidéo. Et dis-toi que à la fin de cette formation toi aussi tu pourras faire comme Gamaliel. Donc voici ce que tuattends dans Isisas. C'est des heures de formation, c'est du concret, c'est du pratique et des vrais résultats basés

Speaker A

sur une vraie expérience. Donc maintenant, on va commencer, on va commencer par quelque chose qui est très important. Il faut se poser cette question là. Pourquoi le SAS et pourquoi maintenant ? Ça c'est très important.

Speaker A

Déjà, il faut comprendre c'est quoi le SAS. Le SAS, ça veut dire software as a service. En gros, c'est un logiciel que les gens utilisent en ligne et pour lequel ils payent un abonnement. Par exemple, Netflix, c'est un SAS, Notion,

Speaker A

c'est un SAS. WhatsApp IA qui est mon outil d'intelligence artificielle, c'est un SAS. Même WhatsApp Business avec ses fonctionnalités payantes, c'est un SAS.

Speaker A

Et maintenant, je vais te montrer pourquoi le SAS, c'est le business model à suivre aujourd'hui. Premièrement, on a le revenu récurrent. Tu ne vois pas une fois et c'est fini. Chaque mois, l'argent tombe avec ton SAS. Par exemple, si tu as 50 clients qui te

Speaker A

payent 5000 francs, c'est tout simplement 250000 francs que tu gagnes chaque mois de manière automatique. Même quand tu dors, tu gagnes de l'argent. Et c'est vraiment ça la magie du SAS.

Speaker A

Deuxième chose, on a la scalabilité. La scalabilité veut dire que tu es 10 ou 10000 clients, ton SAS fonctionnera pareil. Tu n'auras pas besoin d'embaucher plus de monde pour servir plus de monde. Ce n'est pas comme un restaurant où chaque nouveau client te

Speaker A

demande plus de serveurs, plus de tables, plus de matières premières. Troisièmement, nous avons les marges.

Speaker A

Une fois que ton ça s créé, tes coûts sont quasi nuls. On parle là de marge de 80 à 90 %. En fait, plus tu as d'utilisateur, plus tu deviens rentable.

Speaker A

trouve-moi d'autres business qui ont ces margeslà. Et quatrièmement, on a la valeur de revente. Il faut savoir que dans le monde des SAS, un SAS rentable se vend entre 24 et 48 fois son revenu mensel. Donc par exemple, si ton SAS

Speaker A

fait 500000 francs par mois, il vaut entre 12 et 24 millions. Tu n'as pas construit juste un job, tu as construit un actif, tu as construit du foncier digital. Et maintenant, on va parler de la vraie révolution de l'IA. Avant 2023,

Speaker A

créer un SAS, c'était 6 mois minimum de développement. Il fallait payer un développeur minimum 500000 francs ou plus par mois. C'était réservé à ceux qui avaient du capital ou des compétences techniques. Mais aujourd'hui, avec le Vipe coding, tu

Speaker A

peux créer un SAS fonctionnel en une semelle ou même moins sans écrire une seule ligne de code toi-même, il y a le fait pour toi. Et c'est ça le changement que je veux que tu a tête. Tu n'es plus

Speaker A

un consommateur de technologie. à partir de maintenant, tu es un créateur. Et je vais te montrer des exemples africains parce que ce que je te dis, c'est pas de la théorie. Regarde ce qui se passe déjà en Afrique. On a Flutter Wave créé au

Speaker A

Nigéria, valorisé à plus de 3 milliards de dollars. Il y a Paystack racheté par Straight pour 200 millions de dollars.

Speaker A

Il y a Chiper Cash Wave ici au Sénégal. Ces entreprises ont tous commencé à être des sas, des solutions simples pour résoudre des problèmes africains. Et c'est là ton avantage. Ton avantage, c'est que tu es africain. Tu vis en

Speaker A

Afrique ou bien tu as vécu en Afrique. Tu connais les vrais problèmes des Africains. Tu vis ces problèmes, tu sais ce qui manque, tu sais ce que les gens sont prêts à payer pour résoudre. Et c'est ça qui est ton vrai avantage.

Speaker A

Encore une fois, tu connais les problèmes des africains et ça ça doit être un déclic pour toi. Tu n'es plus un consommateur, tu es un créateur. Donc aujourd'hui, un s de facturation adapté à la TVA sénégalaise par exemple, ça

Speaker A

n'existe pas vraiment. Un outil de gestion de pour les boutiquers qui acceptent Orange Monie, pareil. Un CRM pour les tontines, ça n'existe pas encore ou bien en tout cas moi je le connais pas. Les opportunités sont là, ils sont sous ton nez et même s'ils

Speaker A

existent déjà, bah tu peux tout simplement concurrencer. D'accord ? Donc maintenant qu'on sait pourquoi on est là, on va poser les bases parce que sans fondation solide, tout le reste va s'effondrer. Dans la deuxième partie du module 1, on va prendre le temps de

Speaker A

maintenant comprendre c'est quoi un sas parce qu'on a eu la définition d'un sas. Maintenant il faut qu'on essaie de comprendre comment ça marche tout ça. On a vu que c'est important, on va rentrer dans le concret. C'est quoi exactement

Speaker A

un SAS ? Donc comme je l'ai dit tout à l'heure, ça veut dire software as a service, logiciel en tant que service.

Speaker A

Donc concrètement, c'est un logiciel qui est accessible en ligne via un navigateur ou une app qui fonctionne par abonnement mensuel ou annuel. Il y a même d'autres systèmes de monétisation que j'utilise dont je te parlerai tout à l'heure qui est hébergé sur des serveurs

Speaker A

et pas juste sur l'ordinateur du client et qui se met à jour automatiquement. Donc il faut penser par exemple à Netflix. Sur Netflix, tu ne télécharges pas les films sur ton ordinateur. Tu vas sur le site, tu te connectes et tout est

Speaker A

là. tu payes chaque mois et quand Netflix ajoute une nouvelle fonctionnalité, tu l'as automatiquement.

Speaker A

C'est la différence avec un logiciel classique comme par exemple Micro euh Microsoft Office version 2010 que tu achètes une fois et c'est sur un CD. Le SAS, c'est Microsoft 365 où tu payes chaque mois mais tu as toujours la

Speaker A

dernière version parce que ça se met à jour automatiquement vu que tout est en ligne. Et du coup pour ton client, c'est pratique parce que il n'y a pas d'installation compliquée, il a un accès partout et il est toujours à jour. Et

Speaker A

pour toi aussi, c'est génial parce que tu as des revenus prévisibles, une relation continue avec le client et une possibilité d'améliorer en permanence.

Speaker A

Maintenant, je vais te dire c'est quoi les trois composants d'un SAS. On va comprendre c'est quoi, qu'est-ce qu'il y a sous le capot, comment un SAS est construit. Il y a trois composants principaux. Donc on a le front end,

Speaker A

c'est ce que l'utilisateur voit, c'est les boutons, les formulaires, les couleurs. Quand tu rentres dans un site, tout ce que tu vois, c'est ça le front end, les boutons et cetera, les formulaires. Quand tu vas sur un site et

Speaker A

que tu cliques sur un bouton, ça c'est le front end. Ensuite, nous avons le backend. Donc le backend, c'est la logique qui est cachée. Quand tu cliques sur se connecter et que le site vérifie ton mot de passe, c'est le backend qui

Speaker A

travaille. C'est le cerveau du sas. D'accord ? Et on a la base de données, c'est où toutes les informations sont stockées, les comptes d'utilisateur, euh les données, les paramètres. Donc tout est là. Et je vais te donner une

Speaker A

analogie qui est très simple. Donc imagine par exemple un restaurant. Donc le front end, c'est la salle, c'est ce qu'on voit, c'est la déco, les tables, les menus que tu lis, c'est ce que le client il voiend c'est la cuisine. Le

Speaker A

client euh ne le voit pas mais c'est que c'est là que tout se passe. C'est là que on fait tous les plats, les recettes, la préparation, la logique. Ensuite, nous avons la base de données. Par exemple, c'est le frigo et le stock où sont

Speaker A

rangés tous les ingrédients. Et c'est là qu'il y a un 4è élément qui est très important, l'API. Donc l'API, c'est le serveur de restaurant, la personne qui fait le lien entre la salle et la cuisine. Le client passe la commande au

Speaker A

serveur, le serveur transmet à la cuisine puis rapporte le plat. Donc dans un sas, la pay front end de communiquer avec le backend. Donc maintenant qu'on a vu l'analogie, on va passer aux métriques importantes. Donc c'est vraiment ce que tu dois savoir. Avant

Speaker A

d'aller plus loin, on va voir les termes que tous les entrepreneurs SAS utilisent. Et il y a quatre métriques essentielles et même si tu ne retiens rien d'autre, retiens cela. On a le MR qui est le Monthfly Recuring Revenue,

Speaker A

donc c'est un revenu mensuel récurrent. Si tu as par exemple 100 clients qui paye 5000 francs par mois, donc ton MRR est de 5000 francs, 500000 francs CFA.

Speaker A

C'est le chiffre que tout le monde regarde dans les ça. C'est très important. Ensuite, on a le turn qui est le taux d'attition, le taux d'annulation. C'est le pourcentage de clients qui annulent chaque mois. Donc si tu as 100 clients et que 5 clients

Speaker A

annulent, ton turn est de 5 %. Un bon sas vise un turn inférieur à 5 %.

Speaker A

Au-dessus, tu as un problème à régler. D'accord ? Ensuite, on a le CAC, le customer Acquisition Cost, qui est très important. Combien ça te coûte d'acquérir un client ? Si tu dépenses par exemple 50000 francs en pub et que

Speaker A

tu obtiens 10 clients, ça veut dire que ton CAC est de 5000 francs par client.

Speaker A

Ensuite, on a le LTV, le lifetime value. Combien un client te rapporte au total pendant qu'il reste chez toi. Donc si un client paye 5000 francs par mois et qui reste en moyenne 20 mois, donc sa LTV est de 100000 francs CFA. Et la règle

Speaker A

d'or, c'est que ta LTV doit être au moins trois fois supérieure à ton CAC.

Speaker A

Donc si ça te coûte 5000 francs d'acquérir un client, il doit te rapporter au moins 15000 francs au total. Sinon, tu perds de l'argent et tu ne le sais même pas. Donc maintenant, il y a d'autres termes qui sont aussi

Speaker A

importants comme par exemple le AR qui est revenu récurrent annuel. Mais pour l'instant, on va rester sur ces quatre métriques qui sont les plus essentiels.

Speaker A

Et on va passer maintenant au sujet suivant qui est bas. Il est très important de savoir comment fonctionne le web. Donc je vais rester simple, pas de jargon unique, pas de truc trop compliqué. On va essayer de te

Speaker A

l'expliquer d'une manière aussi simple que possible. Maintenant, quand tu tapes une adresse comme par exemple google.com dans ton navigateur, voici ce qui se passe. Donc il y a ton navigateur qui va envoyer une demande à un serveur. Un

Speaker A

serveur, c'est juste un ordinateur qui est allumé 24 heures/ 24 quelque part dans le monde et qui attend juste des demandes. Donc ce serveur va recevoir ta demande et te renvoyer une page web. Et cette page qu'elle envoie, c'est du code

Speaker A

du HTML pour la structure et de CSS pour le style et de JavaScript pour les interaction. D'accord ? Donc ton navigateur reçoit ce code et l'affiche joliment à l'écran. Donc c'est tout.

Speaker A

C'est simplement ça. C'est aussi simple que cela. Si tu comprends ça, tu comprends comment fonctionne le web. Et quand tu crées un SAS, tu crées ces fichiers de code, tu les mets sur un serveur. Ensuite, n'importe qui dans le

Speaker A

monde peut y accéder en tapant ton adresse. Donc maintenant que tu comprends ça, on va passer aux technologies de base dans la création de SAS. On va parler des technologies que tu vas rencontrer dans ton chemin de création. Donc on a le HTML. Donc le

Speaker A

HTML c'est la structure de ton site, c'est le squelette. C'est comme le la fondation et les le squelette d'une maison. D'accord ? Ça définit où sont les titres, les paragraphes, les boutons et cetera. Ensuite, nous avons le CSS.

Speaker A

Le CSS, c'est le style, c'est la peinture, la déco, les couleurs. Ça va rendre le HTML joli. Ensuite, nous avons le JavaScript. Le JavaScript gère l'interactivité. Par exemple, c'est ce qui fait que quand tu cliques sur un bouton, il y a quelque chose qui se

Speaker A

passe. Maintenant, dans la vraie vie, on n'écrit plus de HTML, CSS, JavaScript pur. On utilise des framework, donc des outils qui simplifient le travail. Et dans ces framework là, il y a des frameworks qui sont très connus. Par

Speaker A

exemple, nous avons React qui est le framework JavaScript le plus populaire. Il a été créé par Facebook. C'est ce que utilise la majeure partie des SAS moderne. Au-dessus de React, on a des méta frameworks comme par exemple NextJS

Speaker A

ou Next JS qui ajoute encore plus de fonctionnalités utile. Mais ne t'inquiète pas si tout cela te sont compliqué. tu en fait vraiment on est dans une partie où tu dois juste comprendre ce qui se passe. Rappelle-toi le vibe coding c'est Lia qui va écrire

Speaker A

le code pour toi. Toi tu dois juste comprendre les concepts pour savoir quoi demander. D'accord ? Donc n'ai pas peur quand je t'explique tout cela et que ça te semble trop compliqué. Maintenant on va parler d'un sujet qui est tout aussi

Speaker A

important, c'est l'hébergement et le déploiement de ton sas. Une fois que tu l'as créé, il faut bien que tu le mettes en ligne, il faut que tu le mettes sur un serveur pour que les gens puissent accéder. Donc le fait de mettre ton code

Speaker A

en ligne une fois qu'il est en ligne, c'est ça qu'on appelle le déploiement. Et pour déployer, tu as besoin de trois choses. Tu as besoin d'un nom de domaine. Donc par exemple, c'est comme easisas.com, monas.com. Ça coûte à peu

Speaker A

près entre 5 et 10000 francs par an. Ça dépend aussi du ça du nom de domaine. Il y a des noms de domaines qui coûtent des millions de dollars. D'accord ? Donc ça dépend. Ensuite, on a l'hébergement.

Speaker A

L'hébergement, c'est l'endroit où ton code va vivre. c'est le serveur. Et pour finir, tu as besoin d'un service de déploiement. Le service de déploiement, c'est ce qui va prendre ton code et le mettre sur un serveur. Maintenant, la

Speaker A

bonne nouvelle, c'est qu'aujourd'hui, des services comme Versel font tout ça gratuitement pour les petits projets.

Speaker A

Donc, tu connectes ton code, tu cliques sur déployer et en 2 minutes ton SAS est en ligne. C'est vraiment devenu très simple de déployer sans SAS. Donc, plus besoin de configurer des serveurs compliqués. On a Versel, on a Netlify,

Speaker A

on a Railways. Ce sont tous des services qui s'occupent de tout pour toi. Maintenant qu'on a compris ça, on va passer à un autre sujet. Comment est-ce qu'on va utiliser LIA pour créer du code ? On va parler de l'IA parce que c'est

Speaker A

le cœur de ce qui rend tout cela possible. D'accord ? On va commencer par voir c'est quoi un LLM. Donc un LLM, ça veut dire large language model. C'est un grand modèle de langage. C'est le type DI qui est derrière chat GPT, Cloud et

Speaker A

tous les autres. que tu vois actuellement sur internet. Comment ça marche ? En simplifiant beaucoup plus, ces IA ont lu des milliards de textes, tout internet, pratiquement tous les livres, tout le code sur GitHub et elles ont appris les patterns, les règles, les

Speaker A

structures. Tout leur système est basé sur la prédiction du caractère suivant. Donc quand tu leur poses une question, elles prédisent la réponse la plus probable mot par mot et même caractère par caractère. Et ce qui fait que le

Speaker A

résultat c'est qu'elles peuvent écrire texte, traduire, résumé et surtout elles peuvent écrire du code, du bon code et du code qui fonctionne très sécurisé.

Speaker A

D'accord ? Parce que avant beaucoup de gens pensaient que quand tu fais du vibe coding, euh tu tu vas pas avoir quelque chose de sécurisé. Aujourd'hui, ce n'est vraiment plus une réalité. Beaucoup de de modèles, ces modèlesl ils ont lu des

Speaker A

centaines de milliards de fichiers pour apprendre par exemple comment sécuriser un site web. Aujourd'hui vraiment si tu te prends bien, tu peux on va dire en tout cas à 98 % sécuriser ton site parce que il n'existe pas un site qu'on ne

Speaker A

peut pas hacker dans le monde, d'accord ? Même Facebook peut se faire hacker les gars. C'est un peu comment ça se passe.

Speaker A

On va y parler un peu plus quand on va passer au module sur la sécurité.

Speaker A

Maintenant voici les principaux que tu dois connaître. Donc on a JPT4 et aussi JPT5 d'open AI. C'est ce qui est derrière chat JPT. On a Cloudropique et il y a plusieurs modèles. Cloud Sonet, Cloud Opus. C'est celui que je préfère

Speaker A

en tout cas pour le code personnellement. On a Gemini de Google. Il y a aussi des modèles open source comme Yamaha de Meta et cetera. Et pour le développement de SAS, Cloud Opus en tout cas, c'est actuellement le meilleur

Speaker A

modèle pour moi que je que je conseille à n'importe qui. Il comprend mieux le contexte et fait beaucoup moins d'erreurs que les autres modèles. Donc Opus 4.6, c'est le modèle que j'utilise et je vais te montrer comment l'utiliser

Speaker A

toi aussi dans cette vidéo. Maintenant, pour discuter avec ces I là, on utilise des prompts et ces I pour fonctionner utilisent des tokens. Donc c'est deux concepts importants, les prompt et les tokens. et on va voir un peu c'est quoi

Speaker A

l'anatomie d'un bon prompte. Donc un bon prompt, c'est ce que tu donnes à LIA, c'est ta demande, c'est tes instructions. C'est comme passer une commande au restaurant. Plus ta commande est claire et précise, mieux tu seras servi. Donc un bon prompte contient le

Speaker A

contexte, donc par exemple qui tu es, qu'est-ce que tu veux faire, contient la tâche, par exemple ce que tu veux que Li fasse, contient les contraintes, les limites, par exemple le format souhaité et le format de sortie. Donc comment tu

Speaker A

veux que la réponse soit structurée ? Par exemple, au lieu de dire juste crée-moi un site, tu dis crée-moi une landing page pour un SAS de facturation avec trois futurs et formulaire en utilisant React plus t css par exemple

Speaker A

et par exemple tu lui dis commente le code en français si tu veux tu ajoutes ça. C'est ça la différence. Le premier prompt Lia fait ce qu'elle veut le deuxème prompt elle fait toi ce que tu veux parce que tu lui as donné assez de

Speaker A

contexte. Maintenant l pour fonctionner utilise les token. Donc c'est quoi un token ? Un token, c'est juste l'unité de mesure des ll. Donc un token, c'est environ quatre caractères ou 3/4 d'un mot en moyenne. Et pourquoi c'est important le coût ? D'accord ? Tu payes

Speaker A

souvent par token utilisé. Donc plus tu écris, plus l' répond longuement, plus ça te coûte. Ensuite, il y a la limite des contextes. Donc chaque Ll, donc chaque IA a une limite de combien de tokens il peut traiter en une fois. Par

Speaker A

exemple, Cloud peut gérer jusqu'à 200000 token, ce qui est énorme. Ça veut dire qu'il peut garder en tête beaucoup plus de codes. En même temps, il peut avoir beaucoup plus d'instructions. Ensuite, nous avons la vitesse. Donc, plus de

Speaker A

token, ça veut dire une réponse beaucoup plus lente parce qu'il y a beaucoup plus d'éléments à prendre en compte euh dans ton prompte. D'accord ? Maintenant, nous allons avancer pour comprendre quoi la différence entre une IA simple et un

Speaker A

agent IA. C'est vraiment la distinction la plus importante de cette formation. D'accord ? Donc écoute bien. Donc une IA simple, c'est un peu comme chat GPT en mode conversation basique. Donc tu lui poses une question, elle te répond une

Speaker A

seule réponse et c'est fini. Donc si tu lui demandes de créer un SAS, ce qu'elle va faire c'est qu'elle va te donner du code. Mais c'est à toi de prendre ce code, de le copier, de le mettre dans

Speaker A

les bons fichiers, de le tester, de trouver les erreurs et ensuite de revenir lui demander des corrections.

Speaker A

Donc c'est fastidieux, c'est lent et ça demande quand même des connaissances techniques parce que tu vas rencontrer énormément d'erreur. Par contre, c'est quoi un agent IA ? Un agent IA, c'est complètement différent. C'est une IA qui peut faire des actions pas juste parler.

Speaker A

Donc, un agent peut lire et écrire dans les fichiers de ton ordinateur. Il peut exécuter des commandes dans le terminal.

Speaker A

Il peut créer des dossiers et organiser ton projet. Donc, il peut tester le code lui-même, corriger les erreurs lui-même, il peut naviguer sur internet pour chercher de l'information. Vraiment, il est très autonome et c'est pour ça qu'il réussit à créer ce que tu veux sans que

Speaker A

tu n'écrives aucune ligne de code. Donc, en gros, tu lui donnes un objectif et il fait le travail. pour atteindre ses objectifs, il planifie, il exécute, il teste, il corrige et ça recommence jusqu'à ce que ça marche. Et c'est ça le

Speaker A

Vibe coding. Tu ne copies plus du code manuellement. Tu donnes des instructions à un agent comme si tu parlais à un développeur et il va tout simplement le construire pour toi. Et maintenant, on va voir les principaux outils qui

Speaker A

utilisent des agents. Donc, on a un Winserf par exemple. Winserf, c'est un IDE, c'est un éditeur de code avec un agent IA intégré. tu ouvres ton projet, tu parles à l'agent en français, il code pour toi directement dans les fichiers.

Speaker A

Ensuite, on a gravity qui est aussi un IDE créé par Google qui est en train de vraiment prendre beaucoup de place. Il est très facile à utiliser exactement comme Winsurf. Donc si tu maîtrises Winsurf, tu maîtrises antigravity.

Speaker A

Ensuite, nous avons Cloud Code qui est un peu plus différent. C'est Cloud mais en mode agent, il peut exécuter des commandes sur ton ordinateur mais il est extrêmement puissant. On a aussi Cursor qui est aussi un IDE avec IA très

Speaker A

populaire. Après, on a les outils aussi en ligne. On a Bolt, Visero, Lovable, ce c'est c'est aussi des agents mais qui fonctionnent dans le navigateur. Et c'est là qu'on arrive à un choix qui est très important, donc qui est en ligne vs

Speaker A

le local. Est-ce que tu dois utiliser par exemple Loveable pour créer ton SAS ou bien utiliser Winsurf ou bien Cloud Code ou bien antigravity sur ton ordinateur en local pour créer ton SAS ?

Speaker A

Maintenant, moi je vais te dire mon choix et pourquoi. J'ai créé plein de SK qui scale et je vais te dire exactement qu'est-ce que tu dois choisir. Donc il existe deux grandes catégories d'outils pour créer des SAS avec Lia. Donc on a

Speaker A

les OT en ligne et les OT locaux. Donc les OT en ligne comme je l'ai dit c'est Bolt, c'est Visero, c'est Lovable et on a réplique, il y en a plein. Tu vas sur leur site web, tu décris ce que tu veux

Speaker A

et ça crée le code directement dans ton navigateur. C'est très séduisant surtout si tu es débutant. Il y a pas d'installation, c'est rapide pour prototyper une idée. L'interface est jolie et le déploiement est facile. Mais il y a des inconvénients qui sont très

Speaker A

sérieux surtout si tu veux créer quelque chose à long terme, quelque chose que tu peux réellement scaler et monétiser.

Speaker A

Donc pour commencer, on a les limites. Donc les limites, c'est que ces outilsl ils ont des quotas. Vu que c'est sur le web. après un certain nombre de messages ou de projets, tu dois payer et les prix montrent extrêmement vite comparé au aux

Speaker A

outils que tu vas utiliser localement sur ton ordi. Ensuite, tu as le manque de contrôle. Tu n'as pas vraiment accès à ton code. Si l'outil fait une erreur, c'est parfois galère de corriger manuellement. Troisièmement, on a la dépendance. Demain, si bol ferme demain,

Speaker A

qu'est-ce qui se passe ? Ton projet est bloqué. Et enfin, la raison la plus importante pour moi, c'est les projets complexes. Ces outils-là sont bien pour des trucs qui sont très simples, mais quand tu veux faire quelque chose de

Speaker A

vraiment avancé, tu vas te heurter à des murs. C'est il y a des choses que tu peux pas, il y a des types de projets que tu ne pourras jamais construire avec des outils de vibe coding en ligne.

Speaker A

D'accord ? Donc selon moi, ces outils sont bien pour apprendre ou bien pour prototyper rapidement. Mais pour un vrai sas que tu veux lancer et maintenir, je ne te le recommande pas du tout. Donc c'est quoi ma recommandation ? utiliser

Speaker A

les outils locaux et il y en a principalement deux que j'aime bien. Il y a Winf et Antigravity. Ce sont tous les deux des IDE comme je te l'ai expliqué tout à l'heure. Tu vas les installer sur ton ordinateur, tu ouvres

Speaker A

ton projet, tu parles à l'agent directement et il va coder directement sur ton ordinateur. Quand il y a un problème, tu le règles et ensuite on va pusher ça. C'està-dire qu'on va le déployer en ligne. Donc l'agent peut

Speaker A

créer des fichiers, modifier le code, exécuter des commandes, tester, débugger et tout ça de manière autonome. Tu vas juste lui dire "Crée-moi une page d'authentification avec email et mot de passe." Et il va le faire. il crée les

Speaker A

fichiers, il écrit le code, il configure ce qu'il faut. Donc c'est pas parce que c'est en local que tu devras peut-être te connaître ou bien ça va être plus compliqué. Pas du tout. Et à côté, on a aussi Cloud Code qui est euh qui n'est

Speaker A

pas un IDE mais qui qu'on peut utiliser en mode agent directement dans le terminal et je te montrerai comment utiliser ces deux-là. Et Claude est particulièrement puissant parce que c'est le meilleur Llm pour le code actuellement. Et pourquoi

Speaker A

personnellement je préfère ces OTI là ? Déjà l'expérience, j'ai construit pas mal de sas et je sais que c'est les meilleurs outils que tu peux utiliser pour créer ton SAS avec Li ensuite tu as le contrôle total, donc le code est sur

Speaker A

ton ordinateur, tu peux le modifier quand tu veux, comme tu veux. Il y a pas de limite artificielle. Tu payes pour utiliser de l'IA, mais il y a pas de limite comme par exemple, vous avez atteint votre limite de projet parce que

Speaker A

c'est ton ordinateur, tu n'as pas de limite et sur le long terme, c'est aussi moins cher. Les abonnements aux outils en ligne coûtent entre 20 et 50 dollars par mois. Ensuite, quand tu travailles en local, les projets complexes

Speaker A

deviennent possibles. Tu n'as pas de restrictions sur ce que tu peux réellement créer. Et on a aussi l'apprentissage parce que en utilisant tes outils locaux, tu comprends comment fonctionne le développement et c'est une compétence qui va rester que tu vas

Speaker A

aussi développer et ça aussi c'est très important. Et c'est pourquoi dans cette formation on va principalement utiliser anti gravity, winsurf et cloud code pour créer non sas. Et ne t'inquiète pas, même si tu ne te connais pas, tu vas

Speaker A

voir, c'est vraiment simple à utiliser. Donc maintenant, on va parler du stack technique. Donc la stack, c'est tout simplement l'ensemble des technologies qu'on va utiliser pour créer nos IA.

Speaker A

Donc pour le front end, il y a deux choix populaires. On a React JS et NextJs qui est basé sur du React. C'est le plus populaire. C'est ce que utilise par exemple Noten, Netflix, TikTok. Tous ces apps utilisent NextJs et la

Speaker A

communauté est très énorme. Les ressources sont partout. Donc personnellement sur cette formation là, on va utiliser NextJS. Mais sache que les concepts sont les mêmes, hein. Si tu apprends NextJS, tu peux passer par exemple à Next JS assez facilement parce

Speaker A

que Next et Next c'est aussi c'est pas pareil. On va rester sur du Next JS qui est le plus connu et le plus populaire.

Speaker A

Ensuite, on va on va voir la base de données, l'authentification. Pour la base de données, on va utiliser Superbase, mais on peut aussi utiliser Néon. Donc on va voir selon les projets, d'accord ? Superbase, c'est comme Firebase de Google mais en open source,

Speaker A

ça te donne une base de données postgress SQL, l'authentification intégrée. Donc on a l'inscription, connexion, mot de passe oublié, le stockage des fichiers et les API en automatique. Et c'est gratuit pour commencer, largement suffisant pour tes premiers milliers d'utilisateurs. Donc

Speaker A

pour l'authentification, on va utiliser Super Base off qui est très bien, mais il y a aussi Next Off que j'aime bien.

Speaker A

Next off, c'est ce que j'utilise dans tous mes projets. Euh pratiquement, ça supporte plein de providers. Il y a aussi Clerc qui est très facile à intégrer. On a H Zero qui est beaucoup plus orienté entreprise. Donc là, je te

Speaker A

parle juste d'outils qui existent hein mais tu n'as pas besoin même de les comprendre ou bien de les retenir. Juste dis-toi que pour commencer Superbase suffit, c'est intégré, c'est simple et ça marche. Donc pour le déploiement, on va utiliser Versel. Donc Versel, c'est

Speaker A

les créateurs de NextJs. Donc l'intégration est parfaite. Tu vas juste connecter ton GitHub. Une fois que tu mets à jour ton code, ça se déploie automatiquement. Et si tu sais pas c'est quoi un Github, t'inquiète pas aussi.

Speaker A

Donc pour les paiements, on a deux options principales. On a Stripe pour les paiements internationaux, cartes bancaire, c'est le standard mondial. Et pour l'Afrique, on a les mobile moneyes.

Speaker A

Donc on a MTN, Wave, Mobile, Orange Monnaie, ça dépendra des agrégateurs. Il y a plein d'agrégateurs qui existent. Le plus complet qui existe selon moi étant Power Pay, mais il y a aussi des agrégateurs d'agrégateurs comme par exemple Monero. Tu peux avoir ton Monero

Speaker A

et connecter ton Paytech, connecter ton Cet Pay, connecter ton Power Pay, ton Stripe, ton PayPal et il va te créer un seul checkout. Donc euh bon, après c'est pas c'est pas grave si tu comprends pas aussi ce que je te dis. L'idée c'est

Speaker A

qu'il y a plein de choix aussi si tu veux euh facturer en mobile money en Afrique, mais ça va plutôt dépendre des agrégateurs de paiement qui existent et dans quel pays ils sont. D'accord ? Et si tu n'utilises pas le Mobile Money, tu

Speaker A

vas perdre une grosse partie du marché, surtout si tu fais un SAS pour l'Afrique. Donc on verra dans un module ultérieur comment intégrer ces moyens de paiement là. OK ? Donc maintenant qu'on a vu ça, on va passer à la prochaine

Speaker A

étape qui est la préparation de ton environnement. Je vais te montrer tous les outils que tu dois télécharger, installer sur ta machine avant de passer au prochain module. Donc tout à l'heure, je t'ai montré deux IDE, donc des outils

Speaker A

qui te permettent de créer des sas. Donc c'est là-bas que va se passer tout le code. Je t'ai montré Winds surf et je t'ai montré antigravity. Donc l'idée c'est de te montrer ce que j'ai eu à utiliser. Mais personnellement, selon

Speaker A

mon expérience aujourd'hui Antigravity est sans nul doute le meilleur outil. Déjà, c'est le plus facile à utiliser, même si lui et unef ont vraiment des euh des interfaces très similaires, mais je te conseille quand même d'utiliser Antigravity, c'est le moins cher et il y

Speaker A

a beaucoup plus de possibilités et tu peux vraiment créer énormément d'outils très qualitatifs avec Antigravity. Donc pour cette formation là, on va juste utiliser Anti Gravity et Cloud Cloud.

Speaker A

Après, si on veut par exemple créer des choses beaucoup plus puissantes, on va je vais te montrer comment combiner antiravity et cloud code dans ton éditeur, dans ton IDE. Et vraiment si tu as ces deuxlà, tu as tout ce dont tu as

Speaker A

besoin pour créer n'importe quel type de sas. Donc après, une fois que tu seras bien avancé dans ton parcours de création de SAS, tu pourras explorer d'autres idées. Il y en a beaucoup. Il y a Z, il y a Cursor, il y a en fait il y

Speaker A

en a trop. D'accord ? Mais je te dis prends un et focus dessus. Et anti gravité aujourd'hui déjà il est très puissant, il est pas cher et il est par Google. Donc laisse-moi te dire que en terme de technologie, ils sont déjà très

Speaker A

loin. Personnellement, c'est ça que j'utilise. Au début, j'utilisais Win Surf. Maintenant, j'ai changé, je suis passé sur antiravity et je dis je regrette même de l'avoir fait un peu trop tard. Donc je vais te montrer comment installer Anti Gravity sans plus

Speaker A

tarder. Donc pour installer Anti Gravity, ce que tu vas faire, tu vas aller sur Google, tu tapes Anti Gravity ou bien tu vas directement sur antiravity.google, Google, tu vas télécharger l'outil, tu vas l'installer comme n'importe quel logiciel, tu vas

Speaker A

ouvrir et créer un compte et tu auras des crédits gratuits pour commencer juste pour commencer. Mais après, il te faudra forcément prendre l'abonnement pour créer tes sens. Donc, je vais te montrer comment faire cela. Donc là, je suis sur mon PC. Donc, je vais aller sur

Speaker A

Google et je vais taper tout simplement antiravity, d'accord ? Et je vais cliquer sur le premier lien antigravity.google ou bien tu vas tout simplement cliquer sur antigravity.google. De toute façon, tous les liens seront sur le fichier qui sera dans la description de cette

Speaker A

formation. Ensuite, une fois que je suis ici, je vais juste cliquer sur download. D'accord ? Une fois que tu cliques sur download, ici tu vas choisir ton système d'exploitation, que tu sois sur macOS, que tu sois sur Windows ou bien sur

Speaker A

Linux. Tu vas choisir quel est le système d'exploitation que tu as et tu vas tout simplement télécharger le logiciel. Et une fois que c'est téléchargé, c'est gratuit. Tu le télécharges gratuitement. tu vas tout simplement l'installer sur ton ordinateur. Donc une fois téléchargé et

Speaker A

installé, tu vas ouvrir Antigravity et tu verras une interface comme ça. Et comme tu peux le voir, il y a pas mal de choses qui sont ici. Et ne t'inquiète pas, sur le deuxème module, on va prendre le temps d'explorer un peu

Speaker A

l'interface d'antigravity pour pouvoir bien comprendre ce qu'on fait et comment naviguer dessus. Mais pour l'instant, tout ce que tu as à faire, c'est de l'installer et ensuite devoir passer au prochain compte que tu dois créer. Tu vas créer des comptes sur plusieurs

Speaker A

services. Donc tout est gratuit pour commencer. Le premier service qui en a des plus importants, c'est GitHub. Donc tu vas aller sur Google, tu vas taper GitHub, d'accord ? Et il y a le lien qui est là, github.com. Tu as juste à

Speaker A

cliquer dessus, d'accord ? Et une fois que tu arrives là, tu vas cliquer sur sign là, tu vas peut-être créer un compte avec ton Google si tu veux.

Speaker A

L'idée, c'est que tu dois t'inscrire sur Github. Donc GitHub, c'est quoi ? C'est où tu vas stocker ton code parce que ton code de base, tu vas travailler en local mais une fois que tu voudras le mettre en ligne, il faut que tu le stockes

Speaker A

quelque part et Github sert exactement à ça et il est totalement gratuit. Donc va sur github.com et créer un compte. ton GitHub, c'est comme un Google Drive mais pour le code. Et en fait, comme je l'ai dit, dans le fichier en bas, je te

Speaker A

mettrai tous les liens que je suis en train de te montrer. Ensuite, après avoir créé notre compte Github, on va aller sur Superbase. Donc va sur Superbase.com ou tu viens juste sur Google, tu tapes Superbase, tu cliques sur le premier lien, ça va t'amener sur

Speaker A

superbase.com. Et une fois que tu es là, tout ce que tu as à faire, tu vas cliquer sur start your project, d'accord ? Et là, il va te demander de sign in ou sign up. Tu vas cliquer sur sign up et

Speaker A

tu vas créer ton compte. Et là, comme tu peux le voir, tu peux même créer, tu peux même te connecter avec Github.

Speaker A

D'accord ? C'est vraiment intéressant. C'est pourquoi il te faut d'abord créer ton GitHub et ensuite tu peux même créer ton compte Superbase grâce à ton compte GitHub. GitHub, ils ont un plan gratuit que tu pourras utiliser, d'accord ?

Speaker A

C'est ici qu'on va mettre notre base de données, l'authentification et cetera. C'est vraiment important d'avoir ton Soup base. Donc vas-y, tu crées ce compte-là. Et pour terminer, en tout cas pour ce premier module là, va sur verel.com. Donc tu peux aller aussi sur

Speaker A

Google, tu tapes Versel, tu cliques sur le premier lien et ici tu vas aller sur Signup et tu vas créer ton compte Versel. Donc ici tu vas faire I'm working or personal print. Tu fais OB, d'accord ? Je tape ton nom, je mets par

Speaker A

exemple Amadou et je fais continuer. Et ici, tu peux par exemple créer ton compte avec Google ou bien avec Github.

Speaker A

Donc comme tu peux le voir, Github est vraiment très important surtout dans le monde du code. Donc crée-moi ces trois comptes là avant de passer au second module. Donc maintenant, normalement tu as installé Ant Gravity, tu as créé ton

Speaker A

compte sur GitHub, tu as créé ton compte sur Versel et tu as créé ton compte sur Superbase. Donc pour t'aider à te situer, je t'ai créé une petite checklist que tu pourras utiliser pour savoir qu'est-ce que tu as créé et

Speaker A

qu'est-ce qui te reste à faire. Et une fois que tu as installé Antigravity et créé ces comptes là, tu es prêt à passer au module 2. Mais avant, on va faire un petit récapitulatif de ce que tu sais

Speaker A

déjà. Donc maintenant, tu sais pourquoi le SAS est le business model à suivre, surtout avec la révolution IA et le vibe coding. Et tu sais c'est quoi le vibe coding ? Tu comprends c'est quoi un SAS, le front end, le back end, la base de

Speaker A

données et comment tout cela sassemble. Tu connais les métriques clés, tu connais c'est quoi un MR, un ch, un CAC, un LTV, les chiffres que je dois suivre donc les KPI, les K Performance indicateur. Tu sais comment fonctionne

Speaker A

le web, les technologies de base et où ton code va vivre. Tu comprends la différence entre une IA simple et un agent IA et pourquoi les agents changent tout aujourd'hui dans notre manière de travailler et de créer des outils ? Tu

Speaker A

as fait ton choix d'outil, donc on va utiliser Antigravity pour cette formation avec l'option cloud code pour les projets avancés. Donc tu peux aussi utiliser Winurf mais personnellement je vais utiliser Antigravity. Et ensuite on a préparé ton environnement. Donc, tu as

Speaker A

téléchargé Antigravity, tu as créé ton compte sur Versel, tu as créé ton compte sur Superbase, ton compte sur GitHub. Tu n'as pas encore créé de ça bien évidemment, mais actuellement tu as toutes les bases et c'était le but de ce

Speaker A

module. Donc dans le module 2, on va prendre en main les outils. Tu vas découvrir l'interface de antigravity en profondeur. Tu vas apprendre à parler à l'agent IA pour qu'il fasse exactement ce que tu veux. Tu vas choisir le bon

Speaker A

modèle selon la tâche. Il y a plusieurs modèles d'IA. Tu vas personnaliser le comportement de l'a. On va aussi voir Cloud Code et comment l'utiliser en combinaison avec ton antigravité. Donc à la fin du module 2, tu seras à l'aise

Speaker A

avec ces outils-là. Et dans le module 3, on va créer ton premier projet ensemble.

Speaker A

Donc on se retrouve dans le prochain module à tout de suite. Alors bienvenue dans le module 2 de la formation Easis.

Speaker A

Et dans ce module, on va faire la prise en main des outils qu'on va utiliser tout au long de cette formation pour créer NSAS. Donc, il est très important de savoir comment fonctionnent ces outils là pour ne pas te perdre tant que

Speaker A

dès que tu vas les installer parce que à première vue leur interface peut te faire un peu peur. Mais ne t'inquiète pas, on va voir ensemble tout ce qu'il y a à savoir sur ces outils là. Donc on a

Speaker A

installé Anti Gravity, on a installé Cloud Cloud. Donc comme je te l'ai dit, Anti Gravity, c'est vraiment le choix pour cette formation au-dessus de Winsf.

Speaker A

Tout simplement parce qu'il est vraiment flexible. Il y a la dicté vocale, il y a les workflows, il y a les rules.

Speaker A

D'accord ? Tout ça c'est des choses que je vais te montrer quand on va ouvrir anti gravity tout à l'heure, mais aussi c'est parce qu'il est beaucoup moins cher que par exemple un Winsurf. Et ensuite on va utiliser Cloud Code

Speaker A

d'accord, qui est aussi disponible dans Antigravity. Mais je vais t'expliquer ensuite pourquoi je préfère utiliser Cloud Cloud en combinaison avec antigravité. Donc comme je te l'ai dit, anti gravity c'est confort et c'est flexible. Et cloud cloud c'est vraiment

Speaker A

très puissant. Donc tout à l'heure je t'ai montré comment installer antigravity. Donc maintenant ce qu'on va faire c'est qu'on va aller ouvrir le logiciel et on va faire un tour ensemble de l'outil en question. OK, donc voilà, on t gravity. Donc une fois que tu vas

Speaker A

ouvrir euh le logiciel, tu verras une interface un peu comme ça. Donc à première vue, ça peut te faire un peu peur mais ne t'inquiète pas. Donc il faut savoir quelque chose sur Antegravity. Antigravity, c'est un fork de VS Code. Donc un fork, c'est quoi ?

Speaker A

C'est tout simplement le code d'antigravity. C'està-dire que l'outil de base qu'on a utilisé pour créer Anti Gravity, ça a été euh, on va dire inspiré ou bien copié ou bien tiré d'un autre projet qui existe déjà qui s'appelle VS Code. Donc tous les

Speaker A

développeurs savent c'est quoi VS Code. C'est un éditeur de code, d'accord ? un environnement qui te permet de coder.

Speaker A

Donc tous les développeurs ont déjà une fois utilisé VS Code. Donc Google, les créateurs de anti Gravity, ils vont ils ont tout simplement fait un fork de VS Code et ils ont ajouté leur propre fonctionnalité de dessus, les IA et

Speaker A

cetera, leur système tout simplement. Donc euh généralement tous ces outils là sont des forques de VS Code. D'accord ?

Speaker A

Donc antigravity, Windsurf, en fait Cursor, ils sont tous c'est tous des forques de VSCOD. Et c'est de la culture générale, mais c'est très bon à savoir tout simplement parce que vu que c'est tous ces outils-là sont des for de

Speaker A

VS Code, ils ont à peu près tous la même configuration et la même manière de fonctionner. Donc on va faire un peu une exploration de antigravité. Donc une fois que tu as ouvert ton antaravity, tu verras trois euh panels distinct dans

Speaker A

ton dans ton ordinateur. Donc ici, on a le panel tout à gauche. Donc ici, tu peux vraiment ouvrir un panel ici. Donc là, par exemple, quand je clique ici dessus, j'ai accès à l'explorateur de fichiers. Donc par exemple, là je n'ai

Speaker A

aucun dossier qui est ouvert. Mais si je veux ouvrir par exemple un dossier, je peux juste cliquer sur open folder.

Speaker A

Quand je clique dessus, tu vas voir, ça va m'ouvrir l'explorateur des fichiers. Donc là, c'est un peu les fichiers qui sont sur mon ordinateur. Par exemple, disons que je veux ouvrir euh un des dossiers sur lesquels je travaille ou

Speaker A

bien un des fichiers. Là, je vais cliquer sur ouvrir. Et là, comme tu peux le voir, donc ça c'est par exemple un dossier d'un projet. Donc là, tu peux voir qu'il y a plein de dossiers, plein de documents, plein de choses que tu ne

Speaker A

vas pas comprendre au début, mais je te rassure, tu n'as même pas besoin de comprendre parce que encore une fois, c'est du VIP coding. C'est pas toi qui fait le code, c'est ton NIA qui le fait.

Speaker A

Mais il est très important en tout cas de connaître ce que tu fais et de comprendre un peu ce qui se passe. Mais ne t'inquiète pas, au fur et à mesure qu'on va créer des des des apps, au fur

Speaker A

et à mesure qu'on va créer des outils, tu vas à peu près comprendre chaque outil et euh chaque fichier euh à à quoi cela sert. D'accord ? Donc ici, on a l'explorateur de fichiers. Donc ça ça va être le répertoire sur lequel vont être

Speaker A

tous les fichiers de ton de ton projet. Donc par exemple, comme tu le sais, ton projet c'est des lignes de code et tes lignes de code là sont écrites sur des fichiers et ces fichiers sont mis dans des documents et ces documents là sont

Speaker A

classé ici. Donc par exemple ici si je vais sur app et que je vais par exemple sur API, là je vais voir par exemple chat, je vais cliquer sur route ici je vais voir un fichier. Donc par exemple

Speaker A

ce fichier là c'est un fichier backend d'accord qui gère tout simplement la gestion d'un chat d'accord donc ici c'est le backend et en fait c'est c'est assez simple ici on a des skills. Donc par exemple, ça c'est un skills. MD.

Speaker A

Donc tu vas voir qu'on va beaucoup utiliser les points MD. Donc c'est les points markdown. Donc point MD c'est tout simplement un type de fichier qui permet qui nous permet de communiquer des des connaissances ou bien des instructions à l'intelligence

Speaker A

artificielle. Et en fait on on généralement on utilise des points MD parce que c'est les types de fichiers que Lia peut comprendre le plus rapidement possible et le plus facilement possible. D'accord ? Mieux vaut le donner à Liia un point MD pour

Speaker A

qu'il le lise qu'un point texte ou bien qu'un point HTML même si il peut lire ça ou bien un PDF mais c'est beaucoup plus facile ça va te consommer beaucoup moins de token et il va plus rapidement comprendre ce que tu veux qu'il fasse.

Speaker A

Donc ça je vais te le montrer tout à l'heure. Donc ici comme tu peux le voir on a l'explorateur de fichiers et ici sur chaque fichier tu peux faire des choses. Donc si je viens sur le sur par

Speaker A

exemple un des fichiers par exemple ça c'est un skill. Donc je vais te t'expliquer tout à l'heure c'est quoi un skill. Je je fais par exemple clic droit. Tu peux voir que j'ai plein euh de possibilités. Je peux le renommer, je

Speaker A

peux le modifier, je peux le supprimer. D'accord ? Généralement, tu n'auras pas besoin de le faire manuellement. C'est Li qui le fait pour toi. Mais juste pour que tu puisses savoir que tu as accès à ton code. Ça, c'est ton code. C'est le

Speaker A

code de chaque projet que tu vas faire. Tu auras vraiment accès dessus. Et ça c'est un des avantages de travailler en local. Comme je te l'ai dit, tu as une totale maîtrise sur ton projet et ça n'a pas de prix, je te le dis. et tu t'en

Speaker A

rendras bien assez très vite compte hein, de toute façon quand tu commenceras à créer des projets qui scalent des projets euh qui qui valent de l'argent, tu vas vraiment vouloir maîtriser ton code. Ici, tu peux créer par exemple un nouveau fichier. Par

Speaker A

exemple, je peux venir créer un nouveau fichier. Si je veux créer un nouveau fichier, par exemple au niveau de la racine. Donc je peux tout fermer, venir cliquer au niveau de de la racine, cliquer sur nouveau fichier et là, comme

Speaker A

tu peux le voir, il va le créer au niveau de la racine. Je peux l'appeler amadou.mmd.

Speaker A

Et là ici ça m'a créé un tout nouveau fichier. Et tu peux le considérer comme un document Word ou bien comme un éditeur de texte. Je peux venir ici écrire tout ce que je veux. Amado et un créateur de contenu par exemple.

Speaker A

D'accord ? Et en fait l'idée c'est que tu peux tout simplement écrire tout ce que tu veux ici dans ton fichier point md. D'accord ? Ensuite ici on peut ajouter des dossiers. Donc c'est la même chose. Tu peux créer un dossier et

Speaker A

l'appeler euh Amadoufal. D'accord ? Tu peux l'appeler Amadoufal. Et là je peux tout simplement euh même prendre Amadou.md et le mettre dans le dans le dossier amadoufal. D'accord. Là ça va me demander de confirmer. J'ai confirmé.

Speaker A

Là, j'ai créé un dossier et j'ai mis le fichier dedans. Et ça, ça fait maintenant partie de ma code base. Donc la code base, c'est tout simplement la base de tout ton code. Donc tout l'ensemble des fichiers et des documents

Speaker A

qui constituent ton code. Donc c'est ça que tu auras ici. Et ce bouton-là te permet d'ouvrir l'explorateur de fichiers, donc l'explorateur de ton code. Donc ça c'est la première chose.

Speaker A

Ensuite ici on a la barre de recherche. Donc ici tu peux faire des recherches sur ton code. Donc par exemple ici, je viens ici et je tape Amadou. Tu vas voir que ça va me sortir le fichier Amadou.m

Speaker A

que je viens de créer. Donc c'est assez simple, c'est juste une barre de recherche. Ici on a la contrôle de source de guide. Donc tu n'as pas besoin de comprendre pour l'instant ça. On va y arriver une fois qu'on aura connecté

Speaker A

notre guide. Je t'expliquerai c'est quoi guide et que ça et ça sert à quoi beaucoup plus tard dans la formation.

Speaker A

Donc là, on a les extensions. Donc les extensions, c'est tout simplement un peu comme des super pouvoirs qui vont venir s'ajouter à ton IDE, à ton éditeur de code. Donc ça va permettre par exemple à ton antiravity de faire des choses

Speaker A

beaucoup plus facilement, beaucoup plus rapidement. Donc pour faire simple, une extension, c'est tout simplement un bout de code qui sait faire quelque chose de très précis et une fois que tu l'installes sur ton IDE, bah ça va t'aider tout simplement à faire cette

Speaker A

chose là beaucoup plus facilement. C'est comme quand tu installes une extension sur ton site WordPress par exemple, c'est à peu près la même chose. Donc là, on a les extensions. Donc ici, tout en tout à gauche, on a les explorateurs de

Speaker A

fichiers. Donc là, c'est la première partie. On va dire que c'est la partie 1. Généralement, tu vas passer peut-être 10 % de ton temps ici lorsque tu vas créer euh ton SAS. D'accord ? Ensuite, ici euh je pense que on je te l'ai

Speaker A

montré, c'est tout simplement la view, donc c'est le panel central. Donc ici généralement tu vas voir en fait quand tu cliques sur un fichier, quand tu cliques sur un dossier ou bien quand Li fait quelque chose, c'est ici que que tu

Speaker A

verras à peu près ce qui se passe. Donc généralement tu passes quand même pratiquement 20 20 % du temps ici parce que tu vas voir un peu ce qu'il y a fait. Si jamais tu lui demandes de te

Speaker A

faire des feedback, c'est ici qui va te les faire. Tu pourras lire à peu près ce qui se passe dans la création de ton projet. Et ici c'est le panel tout à gauche. Vraiment, c'est le panel le plus

Speaker A

important dans la création de SAS. Donc moi généralement je l'agrandi même parce que c'est vraiment le plus important. Tu vas passer pratiquement on va dire 70 % à 80 % de ton temps ici. Et je vais te montrer un peu comment ça se passe.

Speaker A

Maintenant, la première chose à faire, c'est de te connecter. Donc comme je te l'ai dit, antiigravity te permet de tester gratuitement son outil. D'accord ? Mais une fois que tu voudras créer des SAS et et les monétiser, il te faudra

Speaker A

prendre l'abonnement dans t révit. Mais au début, tu peux utiliser leur outil avec leur modèle Gemini gratuitement, tester, te faire la main, voir un peu comment ça marche. Donc on va se connecter. Une fois que tu as installé

Speaker A

Antigravity, c'est au niveau de Anti Gravity que tu te connectes. Donc je vais venir ici tout en haut, je vais cliquer sur login tout simplement et là ça va me dire sign in avec Google. Donc je vais cliquer dessus et ensuite ici ça

Speaker A

va me demander de tout simplement confirmer. Donc je vais cliquer sur sign in et une fois que la connexion est faite, ça va me demander d'ouvrir Anti Gravity. Je vais cliquer sur ouvrir. Ça va me remettre, je vais repartir dans

Speaker A

Anti Gravity. Et là tu peux voir que je me suis connecté. Donc une fois que je me suis connecté, tu vas voir apparaître un chatbox. Donc c'est là donc c'est ça que je vais utiliser pour discuter avec mon modèle. D'accord ? Mais avant ça, on

Speaker A

va voir un peu ce qui se passe tout en haut. Donc ici, tu as la possibilité de créer une nouvelle conversation. Donc là, c'est des conversations. Donc là, c'est une conversation par exemple que j'avais avec mon un modèle antigravity.

Speaker A

Donc je peux tout simplement venir ici sur plus et ça va créer une nouvelle conversation. C'est aussi simple que cela. Ici, tu peux voir les conversations passées. Donc si tu cliques dessus, ça va te montrer les conversations passées que tu as eu à

Speaker A

avoir. Donc par exemple, ça c'est des conversations que j'ai eu à avoir avec euh Antigravity sur d'autres projets sur lesquels je travaillais. Donc ici, sur les trois points, quand tu cliques dessus, ça te permet tout simplement d'ajouter des options. Donc il y a

Speaker A

plusieurs types d'options. Donc là, je vais cliquer sur customisation. Et là, au niveau du customisation, tu vas voir deux choses. Tu vas voir rules et tu vas voir workflows. Donc c'est quoi une roule ? Une rôle, c'est tout simplement

Speaker A

un fichier qui te permet de contrôler le comportement de ton agent. Donc par exemple, tu peux lui dire, je peux créer une rôle par exemple pour forcer l'agent à me poser une question ou bien à me notifier à chaque fois qu'il veut euh

Speaker A

publier quelque chose en ligne. D'accord, je peux faire ça. Ça c'est une règle quoi. Donc la règle, je peux la rendre globale ou bien je peux la rendre locale dans le workspace ou bien ça le le workspace, c'est tout simplement le

Speaker A

document ou bien le code sur lequel je suis en train de travailler. Donc si je crée un un document global, je peux le faire par exemple. Je vais cliquer sur global, d'accord ? ici, je lui dis par exemple ce que je veux. À chaque fois

Speaker A

que tu voudras publier un site, demande-moi d'abord est-ce que tu peux le faire ? Donc si je fais ça là, comme tu peux le voir, il a créé un document global. D'accord ? Je vais cliquer dessus, je vais l'enregistrer. Mais tu

Speaker A

vas voir quelque chose d'assez intéressant. En fait, qu'est-ce qu'il a fait ? Il a créé un document Gemini.m.

Speaker A

Donc Gemini.m, c'est quoi ? le fichier de règle globale, d'accord, que le Gemini qui est l'agent principal de antigravity, l'agent IA va toujours regarder avant de faire une tâche. Donc si je lui dis de faire quelque chose, d'accord, avant de faire une tâche, il

Speaker A

va toujours regarder dans Gemini. Donc par exemple ici, je vais lui je vais lui dire euh à chaque fois que tu me parles, dis-moi d'abord Assalam alkum Amadou.

Speaker A

Donc là par exemple, je lui dis à chaque fois que tu me parles, dis-moi d'abord Assalam alekum amadou. Donc bon là, je vais mettre Amadou. D'accord. L'idée c'est quoi maintenant ? À chaque fois qu'il va me parler, il va me dire

Speaker A

Assalam alekum amadou. Et on va tester ça tout de suite. Je vais venir ici, je vais lui dire salut. L'idée c'est que maintenant il doit me dire assalam alekum amadou. Tout simplement tu as vu assalam alkoum amadou salut comment tu

Speaker A

vas ? Pourquoi il m'a dit ça ? tout simplement parce que je contrôle son comportement au niveau des règles. Donc les règles te permettent comme je te l'ai dit de contrôler le comportement de ton de ton nia pour que il n'aille pas

Speaker A

dans tous les sens. Donc c'est très important d'établir des règles surtout quand tu veux créer des outils qui sont très qualitatifs et ça va beaucoup te servir lors de la sécurisation de tes données. On arrivera à cette étape là.

Speaker A

Je vais revenir ici dans la dans les customisations au niveau des roules. Donc là je pense que tu comprends maintenant c'est quoi une règle. Donc là, c'est une règle qui est globale et là on a les règles au niveau du

Speaker A

workspace. Donc si je veux créer une règle qui va être encapsulée dans ce projet-là en particulier, qui va être une règle par exemple très précise pour un dossier ou bien pour un projet qui est bien précis, tu vas cliquer sur

Speaker A

workspace et là le la règle que tu vas créer va être tout simplement disponible ici mais pas disponible dans un autre fichier. D'accord ? Mais si tu crées une règle globale comme par exemple cette règle là, elle va être disponible dans

Speaker A

tous les autres projets que tu vas créer. Tu n'as pas besoin de le créer et de le recréer tout le temps. D'accord ?

Speaker A

Donc ça c'est les rules. Ensuite, on a les workflows. Et les workflows aujourd'hui, ils sont beaucoup plus connus sous le nom de skills. Donc les workflow, c'est tout simplement euh une liste d'étapes que l'agent doit suivre pour faire quelque chose ou bien une

Speaker A

tâche en particulier. Par exemple, si je veux connecter le Mobile Money, disons disons que je veux connecter par exemple un Monero ou bien un Paytech, il y a des étapes bien précises à suivre. Donc au lieu de que Lia aille dans tous les

Speaker A

sens, tu lui donnes un fichier qui s'appelle un skills ou bien un workflow. Et dans ce fichier-là, il va tu lui dis si tu lui dis par exemple, je vais installer Paytech, va voir dans les workflows et va aller regarder et c'est

Speaker A

ah ok, je dois mettre ça, ensuite je fais ça, ensuite je fais ça et comme ça j'auraiis connecté le mobile money africain. Donc moi, par exemple, dans tous mes s pour connecter les mobile money, j'ai j'ai une liste de workflows

Speaker A

que j'utilise, d'accord, qui me permettent de plus rapidement euh connecter mes à des mobile money par exemple. Donc c'est les fichiers qui m'ont pris des des recherches, vous n'imaginez pas, mais avec la formation, vous aurez aussi accès à ça. Donc ça

Speaker A

c'est les workflows. Donc c'est un peu pareil, c'est aussi des fichiers, d'accord ? C'est des fichiers point MD.

Speaker A

Donc quand je clique sur global, encore une fois, c'est ça veut dire que c'est un fichier euh qui va être disponible dans tous les projets que je vais créer.

Speaker A

Donc par exemple, je vais créer un fichier qui ça va qui va s'appeler QA.

Speaker A

D'accord ? Et je vais je vais lui dire par exemple euh la description. Ça c'est un fichier qui me permet de pouvoir créer un agent qui va vérifier mes applications et les tester pour moi. Et ici le contenu, je vais lui dire. Donc

Speaker A

maintenant, je veux que tu suives exactement toutes les instructions que je vais te donner qui vont suivre dans ce fichier là. Et à chaque fois que je vais t'invoquer, tu vas tout simplement faire une review de mon app en terme de

Speaker A

UX, de UI, de sécurité, de responsivité et me poser des questions et me faire un retour complet et un plan d'action à suivre pour corriger les failles que tu as aperçu. Et et une fois que je lui dis

Speaker A

ça, ici en bas, qu'est-ce que je vais faire ? Je vais tout simplement euh lui donner des instructions qu'il devra suivre et ensuite il va me faire un retour. Maintenant, tu vas tu vois que je n'écris pas, je dicte, d'accord ?

Speaker A

Parce que j'utilise un un outil qui me permet d'aller beaucoup plus rapidement, d'accord ? Euh je vais te le montrer tout à l'heure, ça s'appelle Whisper Flow, mais euh Antigravity a aussi un outil euh de de dictation vocale

Speaker A

intégrée parce que whisperflow, c'est quand même payant. Euh mais euh moi je je l'utilise en terme de productivité, ça me permet d'aller beaucoup plus rapidement parce que tu sais que en euh comme être humain bah on va euh parler

Speaker A

beaucoup plus rapidement qu'on ne tape euh si on doit écrire. Donc si tu veux aller beaucoup plus rapidement, moi j'utilise des outils qui me permettent de de faire des vocaux euh et il va tout simplement les transcrire en texte.

Speaker A

Sinon, tu peux tu peux les écrire, il y a pas de souci. Donc là, par exemple, ça c'est un c'est un fichier Q donc et je l'ai mis en global. D'accord. Donc c'est un peu ça, c'est ça la différence entre

Speaker A

les rules et les workflows. Donc les rules, c'est tout simplement des règles qui te permettent de contrôler euh le comportement de ton agent et les workflows, c'est des prompts que avec des étapes bien précises que ton agent va suivre. Pour par exemple faire

Speaker A

quelque chose de bien précis, je vais te montrer comment activer des workflows dans gravity si jamais tu en as besoin.

Speaker A

Donc là, on va revenir au niveau de l'argent. Donc là, je pense que tu connais par exemple exactement à quoi sertent tous ces boutons là. Ce bouton là, ça sert tout simplement à fermer le panel. D'accord ? Et si tu veux le

Speaker A

réouvrir, tu as cliqué sur ce bouton là, d'accord ? Tu as cliqué dessus et ça va réouvrir le panel. Donc ici, on a le chat et sur le chat, je t'ai fait une petite démonstration tout à l'heure.

Speaker A

C'est juste ici, tu viens et et tu parles à ton agent. Donc, je peux lui dire salut et il va me dire "Salam alkoum amadou parce que il c'est dans les roules, c'est d'accord ? C'est une règle qu'il doit suivre tout le temps.

Speaker A

Tu as vu Assalam alkoum amadou ? Donc là, tu vois un peu euh la règle en en on va dire en action. Donc ça c'est les le texte qu'il me donne, d'accord ? C'est le c'est c'est en fait c'est sa manière

Speaker A

de communiquer avec moi. Et ici on peut voir les pensées. Donc et il peut en fait on peut voir ce que l'agent pense, ce que Lia pense avant de me répondre.

Speaker A

Donc ici qu'est-ce qu'il a pensé ? The user just said salut. This is a simple greeting, no task needed. Il a dit, l'utilisateur m'a juste dit salut en français, c'est juste une salutation simple, pas besoin d'effectuer une tâche

Speaker A

et il m'a juste répondu. Donc après quand je lui ai demandé de faire des tâches beaucoup plus complexes, je vais pouvoir suivre comment il réfléchit sa chaîne de pensée. Et ça me sert à quelque chose. Ça me sert euh par

Speaker A

exemple, ça c'est très utile parce que si l'agent fait quelque chose et il ne le fait pas de la manière dont tu veux, tu peux aller sur sa pensée et voir peut-être où est-ce qu'il s'est perdu.

Speaker A

Peut-être qu'il a confondu quelque chose et là tu pourras lui dire dans ton promte euh écoute, je pense que tu t'es trompé au lieu de ça, c'est ça que je voulais dire. Donc fais-moi ça de cette manière-là. Donc c'est très important.

Speaker A

Donc c'est un peu les écritures grisées là qui te permettent tout simplement de savoir à quoi pense LIA. C'est juste quelque chose qui est très utile. Ici tu peux copier le texte la réponse de Lia.

Speaker A

Là tu peux dire que c'est une bonne réponse ou bien une mauvaise réponse. Ça permet tout simplement à Antigravity de mieux entraîner leur agent. Donc c'est pas obligatoire. Tu peux le faire si tu veux tu ne le fais pas. C'est juste un

Speaker A

feedback. Ici en bas, on a le chat. Donc je te l'ai montrer ici. Euh et dans le chat, on peut faire beaucoup de choses.

Speaker A

Donc on peut par exemple référencer des fichiers ou bien des dossiers. Donc par exemple pour référencer là j'écris juste arobas. Donc quand j'écris arobas, ça va m'ouvrir un sélecteur en haut. Et dans ce sélecteur là, je peux sélectionner

Speaker A

des files, donc des fichiers. Je peux sélectionner des directories, donc des dossiers. Je peux sélectionner des contextes de code. Je peux sélectionner des rules, donc des règles. Par exemple, j'écris, je clique sur rule, tu vas voir que là ça va montrer les rules qui sont

Speaker A

disponibles. Donc par exemple, ça c'est un rôle que j'ai. Donc c'est le user global euh qui est à chaque fois que je te je te dis quelque chose, tu me réponds salam alkummadou. Là, je lui ai dit par exemple, ça c'est un rôle et euh

Speaker A

je je peux je peux référencer cette règle-là en particulier et lui demander de faire quelque chose. Donc par exemple, je lui dis maintenant je veux que tu modifies cette roule-là au lieu de me dire assalam alkum amadou, tu me

Speaker A

dis bonjour. Donc voilà. Bonjour Amadou. Donc l'idée c'est quoi ? Je veux qu'il modifie la roule. D'accord ? Au lieu de me dire assalam alkoum Amadou euh il va me dire bonjour Amadou. Maintenant qu'est-ce qu'il fait ? Tu vas voir queil va

Speaker A

réfléchir. Donc qu'est-ce qu'il a réfléchi de l'utilisateur veut que je modifie la règle globale dans le Gemini.m.

Speaker A

D'accord. Il va laisse-moi d'abord lire le fichier en premier et voir son contenu et je vais le mettre à jour tout simplement. Et une fois qu'il qu'il a pensé ça, il sait ce qu'il doit faire et là il me dit quoi ? Bonjour Amadou. Et

Speaker A

il va dire je vais modifier la règle. Il est parti dans le fichier. Donc ça c'est le Gemini.md. Donc comme je te l'ai dit, c'est le fichier global des règles que Gemini anti Gravity va regarder à chaque fois avant que tu quand tu lui envoies

Speaker A

un message, il va toujours regarder le fichier global des instructions pour savoir comment il doit interagir, ce qu'il doit faire. Et là, qu'est-ce qu'il a fait ? Euh, il a tout simplement modifié le fichier. Mais regarde ce qu'il ce qu'il fait. En fait, il a

Speaker A

modifié le fichier mais il me demande l'autorisation. Ça c'est un peu un comportement que je peux changer. Je peux lui je peux mettre en place un un comportement qui fait qu'il va pas me demander l'autorisation pour modifier les fichiers. Donc euh ça par exemple

Speaker A

euh pour les gens qui vont s'y connaître, d'accord, euh qui sont beaucoup plus avancés, ils veulent à chaque fois que l'intelligence artificielle leur pose une question et leur demande l'autorisation de modifier un fichier. Mais surtout pour les débutants, vous n'avez pas vraiment

Speaker A

besoin de vous casser la tête à ça parce que aujourd'hui, les intelligences artificiales sont surtout les modèles d'agent, ils sont tellement intelligents, rarement, ils font des erreurs. D'accord ? Donc je vais juste faire allowers. Donc ça veut dire que à

Speaker A

chaque fois qu'il voudra modifier des fichiers dans cette conversation là, il va plus me demander l'autorisation. Et là tu vas voir que ça c'est le fichier pointmd. D'accord ? Moi j'ai mis assalam alkumadou. Quand je vais lui donner

Speaker A

l'autorisation, regarde ce qu'il va faire. Donc là il est en train il sait que maintenant je lui ai donné je lui ai donné l'autorisation. Je vais voir que bientôt il va modifier. Tu as vu là il a modifié euh le texte au lieu de assalam

Speaker A

alkum amadou il a mis bonne journée Amadou. Et là je peux accepter. D'accord. et il m'a dit maintenant une fois qu'il l'a fait, il me dit c'est fait, la règle a été mise à jour.

Speaker A

Désormais, je te dirai bonne journo à Modou à chaque fois que je te parle.

Speaker A

Donc je pense que tu comprends un peu maintenant comment on interagit avec l'argent et comment il est intelligent, il est capable d'aller voir toute ma code base, donc mon fichier de code, voir le fichier qu'il doit modifier, savoir ce qu'il doit modifier dedans, me

Speaker A

demander même l'autorisation et ensuite le modifier. Et une fois qu'il a fini, il me fait un retour pour me dire "OK, j'ai fait ça, j'ai fait ça, j'ai fait ça." Donc c'est un peu ça la base du vibe coding. C'est ça le vibe coding,

Speaker A

c'est donner des instructions à l'agent, le laisser faire le travail, voir ce qu'il a fait, lui dire soit modifie, soit c'est bon, soit c'est pas bon.

Speaker A

C'est aussi simple que cela. Et disons que par exemple, il a fait j'ai fait une erreur ou bien je lui ai donné je lui ai donné un message, il a fait quelque chose que je ne voulais pas qu'il fasse.

Speaker A

D'accord ? C'est très simple pour moi. J'ai juste à venir ici au niveau de ce message là. Tu vas voir qu'il y a le bouton revert. Donc je clique sur cette flèche là. Une fois que je clique sur

Speaker A

cette flèche là, ça va ça va enlever c'estàdire ça va annuler la modification qu'il a fait sur ce dossier. Donc là on est dans le dossier Gemini qui vient d'être modifié. Quand je vais cliquer sur confirmer, tu vas voir que ça va

Speaker A

revenir à Assalam alkum amadou. Donc c'est aussi simple. Même si tu fais des erreurs, même si l'agent fait des erreurs sur ton code, tu peux facilement revenir en arrière. Mais après, on aura une méthode qui est beaucoup plus euh

Speaker A

robuste de faire cela, qui c'est avec Git, mais on parlera de cela tout à l'heure. Donc l'idée, c'est de tout simplement avoir la capacité d'avoir une nom prise sur ton code base, une nom prise sur ton code, sur ton projet en

Speaker A

général et c'est ça la raison principale de travailler en local au lieu d'utiliser des outils en ligne. Donc là, je vais par exemple lui dire au lieu de me dire "Bonne journo Amadou, dis-moi euh salam tout simplement." Et là, tu

Speaker A

vas voir que maintenant il va toujours refaire la même chose. D'accord ? Je vais lui donner l'autorisation et là il va faire la modification du fichier.

Speaker A

D'accord ? Euh et une fois qu'il l'a fait, il a modifié Salam Amadou et je vais tout simplement pouvoir accepter les modifications. Et là, il va faire la règle a été mise à jour. Désormais, je te dirai salut Amadou. Donc ça c'est

Speaker A

aussi simple que cela. Maintenant ici on a quoi ? Au-dessus de l'interface de chat, on a l'explorateur de fichiers.

Speaker A

Donc tout à l'heure, tu as vu en fait à chaque fois qu'il fait un changement de fichier, tu vas pouvoir voir ici quels sont les fichiers qui sont euh changés.

Speaker A

D'accord ? À chaque fois qu'il change des choses, tu pourras voir exactement ce qu'il est en train de changer sur chaque fichier comme j'ai pu le voir ici. Donc on va refaire un test. Donc je vais lui dire par exemple euh crée-moi

Speaker A

un fichier amado.txt et dans ce fichierlà euh écris-moi juste le mot hello. Donc l'idée c'est quoi ? Je vais te montrer ici. Tu vas voir à chaque fois qu'il va créer quelque chose ou bien il va modifier un fichier. Tu vas

Speaker A

voir ici dans les dans l'overview des changements. D'accord ? Donc tu vas voir qu'il y a un fichier qui a changé. Donc quand je clique dessus, d'accord ? Tu vas voir que c'est ce fichierlà amadou.

Speaker A

Et il a mis hello dedans. D'accord ? Et je peux lui dire mets le fichier que tu par exemple mets le fichier que tu viens de créer, je veux que tu le mettes dans le dossier Amadofal. Et tu vas voir qui

Speaker A

va le faire. Maintenant le fichier que tu viens de créer, je veux que tu le mettes dans le dossier Amadofal. Donc je vais le dossier Amadoufal. Donc là tu vas voir que maintenant on a le dossier Amadoufal. D'accord ? Il va voir, tu vas

Speaker A

voir qu'il va prendre le dossier amadou.t txt et il va me demander donc ça qu'est-ce qu'il est en train de faire ? Il est en train de run c'estàdire il est en train d'exécuter une commande terminale. Donc les commandes terminales

Speaker A

c'est tout simplement on appelle ça aussi les commandes shell. C'est des commandes qui permettent d'invoquer les capacités de la machine, les API de base de la machine pour faire des choses.

Speaker A

Donc par exemple, supprimer un fichier euh par exemple pour euh euh transporter ou bien euh déplacer un fichier. Par exemple, il y a des commandes bien précises comme c'est move MV. C'est pour ça il a mis MVAD.txt TXT dans Amadoufal.

Speaker A

Donc ça c'est une commande, c'est une invocation et quand je il va me demander l'autorisation et si je veux qu'il le fasse, je vais faire juste run. Et tu vas voir que maintenant ici dans le dossier Amadoufal, dans le dossier

Speaker A

Amadodoufal, il y a le fichier Amodu.txt qui vient d'être créé, qui a été euh tout simplement placé dedans. Et c'est aussi simple que cela. L'idée c'est tu lui dis quelque chose, tu lui dis de faire quelque chose et il va le faire

Speaker A

pour toi. Maintenant là, il me demande l'autorisation mais tout à l'heure je te vais te montrer. Tu vas activer un simple réglage comme ça, il va plus te te casser la tête. Il va juste faire ce qu'il a à faire et après il te dit "J'ai

Speaker A

fini." Donc là c'est cool. Là c'est bon. Donc là ici comme tu l'as dit, c'est l'explorateur des changements sur les fichiers. D'accord ? Ici, tu peux faire une revue des changements qui ont été faits. Donc là, si je clique dessus, tu

Speaker A

vas voir que il y a eu un changement sur par exemple Gemini.m. Donc à chaque fois que je lui dis au lieu de me dire salam alkoum, il me dit salamadou. Donc ça c'est une modification qu'il a fait.

Speaker A

Ensuite, il a fait cette modification là. Donc + 1. Donc c'est plus une modification. On a créé amodu.txt et on a mis hello. Donc ici, tu peux voir l'arborescence, tu peux voir euh l'historique des changements qui sont faites dans ton projet. Ensuite, ici en

Speaker A

bas, on a un bouton plus qui nous permet d'ajouter du contexte à nos messages.

Speaker A

Donc par exemple, quand je clique sur plus, tu peux voir que sur mon message, je peux ajouter soit un média, donc par exemple une image. Donc disons que il y a un bouton qui est qui est mal fait que

Speaker A

je veux changer, je peux prendre une capture de ce boutonlà et je vais l'ajouter en tant que image dans mon message pour lui donner beaucoup plus de contexte. Ensuite, je peux faire des mentions. Les mentions, je te l'ai dit

Speaker A

tout à l'heure. Donc, tu peux tout simplement faire arobas. Donc, par exemple, je peux référencier des dossiers. je peux référencer des fichiers. Donc ici, disons que je peux je peux je peux référencer par exemple des dossiers comme le dossier principal,

Speaker A

comme le dossier Open Make, d'accord ? Qui est le dossier principal. Je peux te référencer par exemple le dossier app.

Speaker A

Donc par exemple, je peux faire arobas et je fais directory et je fais app si par exemple je veux qu'il fasse quelque chose dans ce dossierlà en principal.

Speaker A

mais aussi je peux référencer des files, donc des fichiers, je peux référencer des règles. Donc l'idée c'est ça permet tout simplement d'ajouter du contexte à notre message. Ensuite, on peut aussi référencer des workflows. Donc pour les workflows, c'est simple. Par exemple,

Speaker A

tout à l'heure pour les règles, on mettait. Pour les workflows, on va faire un forward slash. Donc on va faire un slash tout simple et ça va te montrer les workflows, donc les skills qu'on a et tu pourras tout simplement référencer

Speaker A

un skills et tu lui dis regarde dans ce skills là par exemple et fais ce qu' par exemple je lui là j'ai référencé un skills donc je lui dis regarde dans ce skills et fais exactement ce qu'il y a

Speaker A

dedans. Et une fois que je lui dis ça, tu vas voir que il va aller regarder dans ce skills là en particulier. Donc dans ce skills, qu'est-ce que je lui ai dit maintenant ? Je veux que tu suives

Speaker A

exactement toutes les inscriptions. Tu vas tout simplement faire une review dans mon Donc ce skill c'est le skills qu'on a créé tout à l'heure, donc le workflow. Donc c'est juste une manière de référencer cela. Donc je vais tout

Speaker A

effacer. Et ici à côté du bouton, on a le les le bouton planning. Donc c'est quoi ? C'est c'est tout simplement un bouton qui nous permet de changer le mode de réflexion de l'IA. Donc par exemple là on est en mode planning. Donc

Speaker A

le mode planning comme tu peux le voir, ça permet à Lien de réfléchir longuement à ce qu'il va faire, me poser la question, me montrer ce qu'il doit faire et avant de le faire. D'accord ? Donc c'est si tu veux faire des tâches qui

Speaker A

sont beaucoup plus lourdes ou bien que tu veuxilles que Lia fasse le travail à ta place, qu'il fasse le planning et tout. Donc il va faire le planning. Donc ça c'est le mode planning. Mais des fois, tu n'as pas besoin de ça. Tu as

Speaker A

juste besoin de changer quelque chose. Par exemple, tout à l'heure quand je lui disais euh crée-moi un fichier Amodu. Et mets-le dans le dossier modo fille, c'est des c'est des choses qui sont très simples ou par exemple change le fichier

Speaker A

amodu. En amodu.txt. Donc ça c'est des tâches qui sont très simples. Si je veux faire des choses qui sont assez simples, je peux tout simplement utiliser le mode fast. Donc avec le mode fast, euh l'agent va s'exécuter directement euh

Speaker A

parce que c'est des tâches qui sont simples. Tu l'utilises pour les tâches simples et pour les tâches qui sont complexe, tu vas rester en mode planning. Et généralement surtout pour les débutants, je vous conseille toujours le jours de rester en mode

Speaker A

planning comme ça même si vous vous savez pas ce que vous faites, en tout cas lié à lui, il va réfléchir et il va faire ce qu'il doit faire. Donc euh ensuite à côté, on a le sélecteur de

Speaker A

modèles. Il faut savoir qu'il y a plein de modèles disponibles dans le monde de des agents. Il y a il y en a je sais pas moi, je connais même pas tous les modèles qui existentin. Il y a euh il y

Speaker A

a les Kimi, il y a il y en a trop, tu vois. Pas la peine vraiment de te casser la tête à ça. Moi, par exemple, je ne sais pas combien de ça j'ai eu à lancer, mais je n'utilise que Jemini et

Speaker A

Enthopique, donc Claude. D'accord. Et je te dis, tu n'as besoin que de ça. Tu n'as besoin que des modèles Google et de Cloud pour faire n'importe quel type de SAS ou de produits. Donc ici, tu peux voir que tu as accès à Gemini 3.1 Pro

Speaker A

High. Donc c'est c'est le nouveau modèle de Gemini, donc le nouveau modèle de Google. Et ce qui est cool, c'est qu'à chaque fois qu'il y aura un nouveau modèle, tu pourras le venir le voir ici.

Speaker A

Donc par exemple là, tu peux voir que le modèle sélectionné, c'est Cloud Opus 4.6 qui est actuellement le meilleur modèle de Opus au moment où je fais cette formation. Peut-être que dans quelques temps, il y aura le Opus 4.7 et si ça

Speaker A

sort, tu pourras le voir ici tout simplement. D'accord ? Donc généralement, moi j'utilise dans tous mes SAS, c'est Gemini 3.1 et Cloud Opus.

Speaker A

D'accord ? J'utilise Cloud Opus pour tout ce qui est backend, pour tout ce qui est tâch complexe et Geminite 3.1, généralement, je l'utilise pour tout ce qui est front end, d'accord ? Donc tout ce qui est design et cetera. T'inquiète

Speaker A

pas si tu comprends même pas ce que je dis. Normalement là, tu comprends ce que je dis, mais même si tu le comprends pas ne t'inquiète pas, on va faire tout simplement on va inviter la pratique, d'accord ? On va faire la pratique et tu

Speaker A

comprendras bien assez facilement tout cela. Donc là, ici, tu vas voir que le c'est le modèle Cloud Office qui est sélectionné. Donc tous ces messages que j'ai eu à faire, il ne ces messages là ne sont pas destinés à tous ces modèles

Speaker A

là. D'accord ? C'est le modèle qui est sélectionné qui va recevoir les messages et qui va me répondre. Et ce qui est cool, c'est que je peux interchanger les modèles euh comme je le veux. Donc là, par exemple, si je veux utiliser Gemini

Speaker A

3.1, je clique dessus et c'est bon. Là, si je si je j'envoie un message, si j'envoie un message, c'est tout simplement Jemini qui va me répondre, d'accord ? Et si je veux repartir sur cloud, je viens, je fais cloud et c'est

Speaker A

aussi simple que cela. Donc l'idée c'est ça. Maintenant euh là, on a un vocal, d'accord ? C'est c'est une fonctionnalité intégrée de de Gemini.

Speaker A

Pour ceux qui veulent ne qui ne veulent pas écrire, qui veulent faire des vocaux, par exemple, tu peux cliquer ici et ça va te demander l'autorisation. Tu lui donnes et là je vais lui dire je ve juste que tu ailles dans le dossier

Speaker A

amadou.md et que tu m'affiches ce qu'il y a dedans. Donc par exemple, je fais ça et je lui envoie. Et là qu'est-ce qu'il va faire ? Il va transcrire. Il va comprendre ce que je lui ai dit dans mon

Speaker A

vocal. D'accord ? Et il va tout simplement me répondre. Donc là, comme tu as, je vais tout de suite lire le contenu du fichier amodou.mmd euh pour moi. Donc là, dans le fichet amodou.md, c'est juste ça qui est dedans. D'accord

Speaker A

? Et là, il l'a lu et il me l'a affiché. Donc aussi, tu peux faire des voca.

Speaker A

D'accord. Euh, bon par contre les vocaux, la différence entre utiliser ça et ce que j'utilise moi personnellement qui est Whisper Flow, euh quand tu fais des vocau ici, tu ne peux l'utiliser que dans cette dans ce chat là. Alors que

Speaker A

ici par exemple, tu peux pas l'utiliser ici. Si tu veux l'utiliser dans le terminal, tu peux pas. Si tu veux l'utiliser ici dans euh dans un fichier, tu peux pas. D'accord ? Si tu veux l'utiliser même sur ton navigateur, tu

Speaker A

peux pas. Whortflow, tu peux l'utiliser partout sur ton ordinateur. C'est juste ça la différence. Mais euh je sais pas moi, j'ai j'ai développé pendant 2 mois sans sans sans avoir sans acheter de visport flow. Donc tu n'en as vraiment

Speaker A

pas besoin. Tu peux juste écrire ici si tu veux et utiliser ça qui est gratuit, qui est intégré déjà à ton gravité. Donc c'est un peu ça. Ensuite, on a les settings de d'antigravity. D'accord ?

Speaker A

Donc ici, comme tu peux le voir, on a l'agent. D'accord ? Agent Autofix Linked. D'accord ? Si tu fais ça, l'agent va corriger lui-même des erreurs de syntaxe et cetera. Donc, tu mets juste on. Tu n'as même pas besoin de de

Speaker A

savoir. Ici, on a le auto execution. Donc c'est ça que je te disais tout à l'heure, le auto execution c'est quoi ?

Speaker A

L'agent à chaque fois qu'il va faire une modification ou bien qu'il veut faire quelque chose, il va te demander la confirmation. Donc tout à l'heure à chaque fois qu'il voulait modifier quelque chose, il me demandait toujours la confirmation. Là c'est il y a request

Speaker A

review. Donc ça veut dire que lui il va toujours me demander. D'accord ? Mais mais si je veux que il fasse quelque chose sans me demander, tu viens juste je fais ici et je fais always proceed.

Speaker A

Si je fais always proc, il va toujours bombarder. C'estàd avant de me avant de me poser la question et moi je je mets toujours always proced. D'accord ? J'ai pas le temps de de rester là tout le temps parce que sinon tu vas être bloqué

Speaker A

parce que tu vas lui dire de faire une tâche, tu tu vas être occupé autre part, il va être bloqué sur ça, d'accord ?

Speaker A

parce que tu dois cliquer. Alors si tu fais los proced, tu peux lancer une tâche, aller faire autre chose. Tu reviens, il a terminé la tâche et tu as tu fais juste un review. Et si c'est pas bon, tu fais un tu fais un retour en

Speaker A

arrière. C'est aussi simple que cela. Donc là, j'ai fait un always proceed. Maintenant, vu que j'ai fait always proceed, on va retester. Je vais lui dire euh je veux que tu modifies euh ce qu'il y a dans le fichier amado. Et

Speaker A

mets-y une présentation complète de Amadoufale. Donc je fais ça et l'idée c'est maintenant que il va modifier le contenu du fichier. Donc on a c'est là amodo.md qui est ouvert. Ça c'est le contenu amodu. MD. L'idée maintenant, c'est qu'il va changer le contenu sans

Speaker A

même me demander la permission parce que je lui ai je lui ai je lui je l'ai mis en mode always proceed, d'accord, pour qu'il bombarde tout le temps. Donc on va voir. Donc là, il a mis un m de fois un

Speaker A

créateur de contenu créatif et dynamique à travers ses devant devant vision. Donc c'est cool. Donc là regarde, il m'a même pas demandé la la l'autorisation. Elle a juste il m'a juste dit c'est fait, j'ai remplacé le contenu du fichier Amadou

Speaker A

par une présentation complète d'Amadoufale. Et si tu souhaites y ajouter d'autres détails spécifique, n'hésite pas à me le dire. Donc là, c'est cool parce que je l'ai mis en mode en mode always proceed et je te conseille de faire ça aussi. Je pense

Speaker A

que là, on a un peu une vision globale de ce qui de ce qui se passe avec Antigravity. À quoi sert ce panel là, le panel central et le panel tout à droite.

Speaker A

Ici, on a le terminal en bas. Après, tu comprendras euh à quoi ça sert. Donc l'idée c'est c'est un terminal intégré qui te permet de faire des choses. Tout à l'heure quand il a fait euh euh disons et quand il a déplacé le fichier dans ce

Speaker A

dossierlà, c'est une commande de terminal. Donc le terminal permet juste de faire des actions bien précises. Mais tu n'as même pas besoin de de faire ces ces choses-là parce que Lia va le faire à ta place. Mais disons que je vais

Speaker A

afficher tous les documents sur ce terminal. Il y a des il y a des commandes spécifiques. Par exemple, il y a ls. LS, ça veut dire liste. Quand je fais ls et va et que je clique sur entrer, il va m'afficher tous les

Speaker A

documents sur cette liste. Donc tu peux voir, il m'a tout affiché. Si je fais par exemple, si je veux afficher les documents, mais je veux aussi les afficher, afficher leur taille et les informations, je fais ls.Lla-la et tu vas voir qu'il va me les afficher

Speaker A

sous forme de liste avec la taille, avec la date et cetera. Donc il y a c'est c'est vraiment quand je veux voir par exemple le directory euh par exemple le le fichier sur lequel je suis, je faiswd et il m'affiche que je suis sur le

Speaker A

dossier Open Make qui est là avec euh le chemin du dossier. Donc ça c'est des choses que tu que tu après tu pourras apprendre et tu n'as pas besoin de de comprendre cela. C'est juste pour t'expliquer que ça c'est tout simplement

Speaker A

le le terminal. D'accord ? Et après au fur et à mesure qu'on va avancer, tu vas un peu commencer à comprendre c'est quoi son utilité. Ça nous permet d'installer des packages, ça nous permet d'installer des des C'est-à-dire que des fois pour

Speaker A

connecter notre application à quelque chose, il nous faudra installer un package qui est un peu différent d'une extension, d'accord ? Parce que l'extension, il est encapsulé dans l'éditeur qui est anti Gravity, mais le package, on l'installe directement dans

Speaker A

notre code. Dans notre code, il y a un dossier qui s'appelle Node modules. D'accord ? Et dans ce modus là, on installe des packages et on les fait grâce au terminal. Donc pour l'instant, en terme de overview, on va dire, tu as

Speaker A

juste besoin de de savoir ça. C'est des choses que je t'explique mais que ça ne te fasse pas peur parce que c'est pas des choses que tu vas faire toi-même, d'accord ? Toi, tu vas peut-être passer la majeure partie de ton temps ici à

Speaker A

droite, d'accord ? À juste parler avec les a et il va faire le changement pour toi. Donc voici ce qu'il y a à savoir avec Antigravity. Ensuite, maintenant qu'on a installé Antravity, je vais te montrer comment installer cloud code qui

Speaker A

est beaucoup et qui est très important. D'accord ? Moi, c'est vraiment le comment dire la fondation de tous les sages que j'ai eu à lancer. C'est vraiment quelque chose que j'adore. Mais après, tu vas me poser la question, tu

Speaker A

vas me dire "Mais Amadou, pourquoi j'ai besoin d'installer Cloud Code à côté alors que ici, j'ai déjà accès à Cloud Opus, d'accord ? qui est qui qui c'est c'est l'outil qui est utilisé derrière Cloud Code. C'est tout simplement parce

Speaker A

que selon mon expérience, j'ai déjà utilisé Cloud Opus dans Antigravity mais je trouve qu'il est pas assez fort, qu'il est pas assez qualitatif parce que bon après il faut dire que c'est des concurrents entre Gravity c'est Google et Claude c'est Anthopique ça. Chacun a

Speaker A

à son agent, chacun a son outil. Donc je sais pas ici euh vu que c'est l'outil de Google anti Gravity, généralement je l'utilise juste pour avec Gemini, d'accord ? Et quand je veux utiliser Cloud Opus, Cloud Sonnet, tout ce qui

Speaker A

est en rapport avec Cloud, j'utilise directement Cloud Code que je trouve beaucoup plus fort et beaucoup plus puissant. D'accord ? Donc c'est un peu un choix mais si tu veux, tu peux utiliser directement Cloud Opus ici si tu veux si tu veux utiliser Cloud Opus.

Speaker A

D'autant plus que l'abonnement de Cloud Code, il est payant. Mais je te dis personnellement je je n'ai pas de collaboration avec eux. Euh mais je te conseille en tout cas par exemple si tu veux le faire de le faire parce que

Speaker A

personnellement je le fais et en terme de retour sur investissement c'est incroyable. Tu vas voir que pour avant pour avoir un développeur du niveau de cloud opus de cloud code peut-être qu'il te fallait payer des millions par mois

Speaker A

mais aujourd'hui avec l'intelligence artificielle c'est ça la magie de l'intelligence artificielle. Donc là, je vais revenir sur mon navigateur et on va installer cloud code. Donc je vais venir, je vais taper tout simplement Cloud code. Une fois que tu tapes Cloud

Speaker A

code, tu vas voir ici dans les résultats Cloud Code by Anthopic. Je vais cliquer dessus. Je mettrai aussi le lien dans le fichier. Donc ici, comme tu peux le voir, il y a get, d'accord ? Et tu asas

Speaker A

juste par exemple ce que je vais faire, je vais faire try, d'accord ? Et là, je vais tout simplement créer ton compte avec Google. tu vas te connecter avec Google. Donc je peux je peux me connecteras. Je vais faire continuer.

Speaker A

Donc une fois que je me suis connecté, je vais faire je vais faire Amadou, je vais mettre mon nom, accepter les conditions. C'est un peu le processus général. Donc une fois que tu reçois ton code, d'accord, tu vas cliquer sur

Speaker A

vérifier le code et c'est bon, tu as créé ton compte cloud. D'accord ? Tu vas faire continuer et ici euh il va te poser des questions. Bon, tu vas juste répondre pas vraiment à à trop. à trop réfléchir. Maintenant, ici, tu vas

Speaker A

arriver au niveau de l'abonnement. Donc là, c'est l'abonnement mensuel. D'accord ? Donc il faut savoir que Cloud Code n'est pas disponible pour les comptes qui sont gratuits. Donc si tu es gratuit, tu peux utiliser Clode hein, dans le navigateur avec poser des

Speaker A

questions, chatter et tout. Mais si tu veux utiliser Cloud Code, il te va falloir prendre un abonnement. Donc il y a deux types d'abonnement. Il y a l'abonnement Pro et à l'abonnement max.

Speaker A

Par exemple, moi je suis à l'abonnement max, d'accord ? Mais au début, tu peux juste faire l'abonnement pro, d'accord ?

Speaker A

créer tes tes premiers outils et quand tu voudras vraiment lancer des business ou bien que tu commences à à voir vraiment l'apport de cloud, tu vas passer en mode max. D'accord ? Euh comme je te l'ai dit tout à l'heure, c'est pas

Speaker A

obligé. Si tu veux, tu restes juste sur antegravity avec Opus intégré dans Antegravity. Mais si tu veux suivre personnellement comment je fais euh mes ma méthode, en tout cas ma méthode personnelle pour créer des outils de qualité, je te conseille de prendre

Speaker A

Cloud. Et comme je dit, c'est pas c'est pas un sponsoring, c'est juste que c'est aujourd'hui actuellement le meilleur modèle de code qui existe au moment où je fais cette formation là. Et vraiment si tu veux faire un truc de qualité,

Speaker A

utilise les meilleurs outils. Donc là, tu vas tout simplement obtenir le plan pro et ensuite on va revenir sur gravity. Donc une fois que tu as pris ton abonnement cloud, tu reviens sur Anti Gravity. On va aller maintenant

Speaker A

dans les extensions d'antigravity, d'accord ? Et ici, je vais taper tout simplement euh cloud code. D'accord ? Et là ça va rechercher dans les extations.

Speaker A

Et là ici tu vas voir code fors code. D'accord ? Ici tu vas l'installer. Tu vas faire installer. D'accord ? Et on va attendre l'installation. D'accord ? Et une fois que c'est installé, tu vas voir ici un bouton ici, tu vas cliquer sur

Speaker A

cloud code open. Et en fait, qu'est-ce que ça fait ? Ça ouvre un autre chat, d'accord ? Similaire au chat qu'on a là.

Speaker A

Mais ce chat- làà c'est tout simplement uniquement pour Cloud Code. Donc c'est ici que tu vas pouvoir euh discuter avec Cloud Code pour qu'il fasse la même chose sur ton projet. Donc ici pour te connecter, tu vas faire slash login,

Speaker A

d'accord ? Je vais faire slashlogin et là il va te demander de te connecter à ton inscription cloud IA. Tu vas cliquer dessus, je vais faire open. D'accord ?

Speaker A

Et ensuite, je vais faire autorize. D'accord ? Sur mon compte, je suis déjà connecté. Donc une fois que je fais ça, je reviens sur antigravité et ici, comme tu peux le voir, je suis maintenant connecté. Et euh là, si je lui dis

Speaker A

salut, tu vas voir que il va me répondre de la même manière que l'agent ici de Opus ou bien de Gemini. D'accord ? Donc euh c'est un peu ça. C'est un peu de la même manière dont on utilise CL code.

Speaker A

Donc ici, on a le chat. Ici c'est le bouton plus pour permettre d'ajouter du contexte. D'accord ? Là, tu peux même lui demander de faire des recherches sur le web. CL code, c'est vraiment trop trop puissant. D'accord ? Tu peux

Speaker A

uploader des fichiers, tu peux ajouter du contexte, c'estàd fichiers. Euh ici, quand tu cliques sur ce cette icône là, ça va t'ouvrir un une un panel et sur ce panel là, tu peux voir par exemple le modèle qui est actuellement utilisé par

Speaker A

Cloud. D'accord ? Donc quand je clique dessus, tu vas voir que il y a plusieurs modèles. On a le défaut, d'accord, qui est sonné. On a son 1 million de tokens par contexte. On a Opus Opus 1 million

Speaker A

de tokens par contexte, on a IQ. Donc je pense que je t'avais expliqué c'est quoi token. Donc forcément si tu prends 1 million de tokens, ça va être beaucoup plus cher parce que de base les modèles de base ils utilisent 200000 tokens et

Speaker A

pour nous pour nos tâches pour le moment c'est largement suffisant. Donc on va revenir ici. Ici tu peux switcher le modèle si tu veux. Donc tu peux changer de modèle si tu veux. Je te conseille de rester sur Opus 4.6 pour le moment. Là

Speaker A

euh au niveau de l'effort, d'accord ? l'effort de penser, donc à quel point ton IA va réfléchir avant de faire quelque chose. Moi généralement, je le mets toujours au max, d'accord ? Moi, je veux que tu réfléchisses bien avant de

Speaker A

faire n'importe quelle modification dans mon code. D'accord ? Donc là, tu peux faire un clear conversation. Donc tu peux euh comment dire nettoyer la conversation. Quand je clique sur clear conversation, tu vas voir que tu as vu ça nettoyer la conversation. Ça tu peux

Speaker A

faire un rewind. Donc quand tu fais un rewind euh bon là vu que la conversation elle est vide, l'idée c'est quand tu veux faire un rewind, c'est comme la même chose ici que tu veux faire un und donc par exemple tu veux revenir à un

Speaker A

message antérieur. Donc ici tu peux voir euh ton ton compte et ton usage. Donc par exemple là tu vas voir que c'est mon c'est mon compte tout simplement.

Speaker A

Donc j'utilise cloud API. Donc là, c'est mes UG, c'est tout simplement quota d'utilisation de cloud dans la semaine.

Speaker A

Donc c'est un peu comme ça que ça marche. Une fois que tu prends ton abonnement, tu auras accès à tout ça.

Speaker A

Donc ici, on a le mode ask before edits. Donc c'est un peu euh la même chose ici que antigravity, donc euh autoexécution.

Speaker A

D'accord ? C'est tout simplement est-ce que l'agent te demande avant de faire des changements ou bien est-ce qu'il fait des changements automatiquement.

Speaker A

Donc là, il est en mode ask before edit. Donc à chaque fois qu'il va faire des changements, il va d'abord te demander.

Speaker A

Donc si tu veux changer ça, tu cliques juste dessus, d'accord ? Et tu fais edit automatiquement. Et si tu fais ça, il bombarde. Donc il bombarde, il te demande pas, il bombarde. Et là, on a le mode plan qui est euh similaire au mode

Speaker A

planning ici. C'està-dire que il va réfléchir, il va te dire ce qu'il va faire, tu valides et là il va exécuter.

Speaker A

Donc moi, j'aime beaucoup aussi le mode plan ici et effort. Tu peux mettre max si tu veux. Bon là tu peux laisser à high. D'accord. Et généralement, c'est un peu comme ça qu'on utilise cloud code. Donc ici, tu auras ton cloud code.

Speaker A

Ici, tu auras ton antigravity. Pour fermer cloud code, tu peux tout simplement euh fermer les fenêtres.

Speaker A

D'accord ? Et pour fermer euh ce ce panel là, tu peux aussi le togel comme ça et peut-être même ouvrir euh juste cloud code si tu veux et ouvrir les deux. Généralement, j'ouvre les deux et c'est comme ça que je travaille. Donc

Speaker A

c'est un peu comme ça qu'on installe Antigravity euh et qu'on installe Cloud Code. Euh ici en bas euh j'ai aussi oublié ces deux boutons. Donc ici tu peux ajouter une nouvelle conversation.

Speaker A

Donc c'est c'est self explanatory, je pense. Ça s'explique tout seul. Et là on a tout simplement les l'historique des conversations qu'on a eu à avoir avec Cloud Code. Donc une fois que tu comprends un des outils, les autres

Speaker A

deviennent beaucoup plus faciles à comprendre parce que c'est plus ou moins la même manière de fonctionner. C'est juste les icônes qui changent, les textes, les titres qui changent, mais c'est tous la même mentalité derrière, c'est la même logique derrière. Donc

Speaker A

voilà comment fonctionne un peu Cloud Code et Antigrafiti. Donc maintenant le dernier point que je vais te montrer dans cette dans ce module là, c'est les MCP. Donc les MCP c'est quoi ? C'est tout simplement comme les workflows,

Speaker A

d'accord ? Donc comme des skills mais qui ont été faits par d'autres personnes que sur lesquelles tu peux tout simplement te connecter pour faire quelque chose de très précis. Donc par exemple, tout à l'heure, je t'ai parlé d'un workflow euh ou bien d'un skill

Speaker A

pour faire euh par exemple l'intégration de de stripe pour par exemple pour les cartes bancaires, tu peux le faire toi-même ou bien il y a déjà des MCP, donc des skills qui existent déjà sur lesquels tu peux tout simplement te

Speaker A

connecter et ton agent va aller chercher ça et les faire toi-même. Donc par exemple, disons pour connecter Stripe, je dois j'ai besoin de la PII privée, de l'API public. Ensuite, c'est comme ça que j'intègre Stripe. Ensuite, c'est comme ça que je fais un web hook. Bon,

Speaker A

même si ça te fait peur, t'inquiète pas, c'est assez simple à faire. Donc ça, je sais que je dois le faire. Donc je je peux créer un un workflow euh ici, venir ici directement, aller dans customisation, aller dans workflow et

Speaker A

l'ajouter tout simplement personnellement. D'accord ? Ou bien je peux venir ici et je fais MCP serveur.

Speaker A

D'accord ? Et au niveau des MCP, je vais tout simplement faire des recherches et là il y a Stripe. D'accord ? Je clique dessus, je fais install, je fais save et là tout simplement connecter mon site à un MCP qui lui apprend comment connecter

Speaker A

Stripe. Donc les MCP, c'est aussi simple que cela. Donc il y a des MCP pour Github, il y a des MCP pour Neon, il y a des MCP pour Ras, pour Mongo DB, pour Notion. Donc l'idée tout simplement

Speaker A

c'est de savoir comment euh connecter des MCP. Donc là, il me dit tout simplement que je dois ajouter le Stripe API key. Je dois le mettre ici et sauvegarder. C'est tout simplement ça.

Speaker A

Mais là, je peux aussi connecter mon Netly en MCP. Je clique dessus, je fais install. Donc une fois que tu fais MCP serve là, tu peux voir à peu près les MCP qui sont disponibles. Par exemple, moi j'ai installé le MCP de Stitch qui

Speaker A

est un outil qu'on va beaucoup utiliser avec Antigravity. Je vais t'expliquer tout à l'heure. Stitch, c'est aussi un outil de Google. Donc euh il y a plein de par exemple PayPal, si tu veux installer PayPal sur ton outil, sur ton

Speaker A

SAS pour pouvoir facturer par PayPal, tu peux soit aller faire tes recherches toi-même pour savoir comment installer intégrer PayPal ou moins demander à l'agent de le faire ou bien installer tout simplement le MCP de PayPal et comme ça tu lui diras "Regarde le MCP de

Speaker A

PayPal et intègre-moi PayPal dans mon app." Donc c'est un peu ça de la manière dont ça marche. Donc maintenant on va faire un petit récapitulatif de ce que tu sais faire maintenant. Donc aujourd'hui on a installé Antigravity, on a fait le tour d'antigravity de Cloud

Speaker A

Code. D'accord ? Donc là tu sais comment installer et configurer Anti Gravity, comment installer et configurer Cloud Code. On a fait un tour sur l'interface d'antigravity donc les chats, les modèles, les workflows, la dicté donc la dicté tout simplement les audios. le

Speaker A

mode conversationnel le mode agent donner du contexte donc glisser des des documents, nommer des fichiers et cetera. Euh on sait maintenant comment euh créer des workflows qui sont les skills, les règles de projet donc euh cloud.md. Donc cloud.md c'est la même

Speaker A

chose que gemini.m d'accord c'est tout simplement les règles globales de cloud.md. De la même manière que gravity va aller toujours regarder dans gemini.md s'il veut faire quelque chose cloud.md va toujours aller regarder dans cloud.md. Donc c'est pareil. Donc euh on

Speaker A

sait maintenant choisir le bon modèle. Donc par défaut c'est sonné mais nous on va utiliser Opus et on sait euh c'est quoi les MCP serveur ce qui nous permet de détendre les capacités de nos outils.

Speaker A

Donc ce qu'on va faire maintenant c'est qu'on va passer au module 3. Et avec le module 3, on va maintenant un peu quitter la partie théorique et commencer à mettre les mains dans le cambouille.

Speaker A

Passer sur la partie pratique. On va générer un design de zéro. Un simple design mais un joli design. D'accord. Je vais te on va voir euh comment on va vraiment générer notre premier truc, d'accord ? Notre premier tu vois, tu vas

Speaker A

vraiment avoir cette joie là d'avoir créé ton premier outil tout en étant un débutant. voir à quel point c'est intéressant avec du code et on va l'ajuster, le personnaliser, on va le déployer en ligne et tu auras ton

Speaker A

premier lien que tu peux partager avec tes amis, avec ta famille pour leur dire les gars, faites attention, je vais bientôt devenir un vibe coder expert.

Speaker A

Donc on se revoit bientôt dans le module 3. Bienvenue maintenant dans le module 3 de la formation Easy SAS. Donc dans ce module, on va passer à l'action.

Speaker A

Jusqu'ici, on a posé les bases et installer les outils. Maintenant, on va créer des choses concrètes. Dans ce module, tu vas créer deux projets avec antigravity. Donc une landing page pour une entreprise et un CV en ligne et à la

Speaker A

fin on va mettre en ligne ces projets. Donc tu auras finalement un lien accessible, quelque chose en ligne que tu pourras partager avec tout le monde, que tout le monde pourra voir sur internet. Et c'est ça qui est

Speaker A

intéressant. C'est là que le Vibe Coding prend tout son sens. Tu vas voir à quel point c'est rapide de créer quelque chose de pro avec l'intelligence artificielle. Donc on commence. Donc avant de commencer de à créer, il faut

Speaker A

d'abord définir ce qu'on veut. Avant de parler à La, il faut savoir ce qu'on veut. C'est la règle numéro 1 du VIP coding. Si tu ne sais pas ce que tu veux, LIA ne peut pas le devenir pour

Speaker A

toi. Lia, c'est en fait, il faut considérer Lia comme un génie, un développeur incroyable mais qui vient tout juste d'intégrer ton entreprise.

Speaker A

D'accord ? Il peut faire les tâches mais il ne connaît rien à à ton entreprise, à ce que tu veux, ce que tu veux réaliser.

Speaker A

C'est à toi de lui donner le plus de détails possible et plus tu lui donnes de détails, plus il va être un expert, d'accord ? plus il va te en tout cas il va te donner un résultat qualitatif.

Speaker A

Donc pour notre landing page, on va imaginer une entreprise fictive euh une entreprise de livraison à Dakar. Disons qu'elle s'appelle Livre Express, elle livre des colis en 2 heures d'entour Dakar. Ces clients sont des commerçants et des particuliers. C'est ça qu'on veut

Speaker A

sur le sur la landing page. Donc avec un hero title et un bouton CTA, un section comment ça marche en trois étapes, une section tarif euh en trois offres, une section témoignage avec trois avis dedans et un fauteur avec un contact et

Speaker A

et les réseaux sociaux. Donc tu vois, avant même d'ouvrir antigravity, j'ai déjà une idée claire de ce que je veux et c'est ça qui fait la différence. Donc vraiment il faut il te faut avoir une idée claire de ce que tu veux faire.

Speaker A

D'accord ? Maintenant ce qu'on va faire c'est qu'on va ouvrir anti gravity et on va lui donner ce prompte là. Donc c'est un prompt qui est assez simple. Après je te montrerai comment moi je fais pour avoir meilleurs résultats avec

Speaker A

antigravity. Mais on va commencer avec ce prompt qui est hyper simple. Donc on va aller sur antigravity. Donc là on est sur antiravity. Donc je pense que normalement tu sais maintenant comment on ouvre anti gravity. D'accord. Ça, on

Speaker A

l'a déjà vu. Et ici, une fois qu'on est là, on va tout simplement ouvrir un nouveau dossier. Donc là, tu vas voir qu'il y a pas de dossier ouvert. Donc tu peux soit venir sur l'arborescence, l'explorateur ou bien venir ici. Tu vas

Speaker A

juste cliquer sur open folder. Et là, ce qu'on va faire, c'est qu'on va cliquer sur nouveau dossier. On va créer un nouveau dossier. Euh, je vais l'appeler Easy Landing Page tout simplement. Donc Easy Landing Page, ça va être le nom euh

Speaker A

du dossier. D'accord ? Donc je vais cliquer sur créer et je vais faire ouvrir. Donc une fois que j'ai fait ça, donc ça va ouvrir an gravité. Je vais faire oui I trust the et là comme tu peux le voir ce que ça fait c'est que ça

Speaker A

ouvre un nouveau dossier et sur ce dossierl d'accord donc on peut créer notre fichier Gemini.md pour les rules et cetera. Donc ce que je fais généralement, je crée d'abord le fichier de rules et les workflows, mais on va

Speaker A

commencer par le plus simple, d'accord ? On va commencer par le plus simple et ensuite je te montrerai. Donc j'ai copié euh un prompt, d'accord ? Donc le prompt que je t'ai montré tout à l'heure, je viens ici. Donc j'ai juste à venir sur

Speaker A

le chat à droite et je vais le coller tout simplement. Donc je lui dis "Crée-moi une landing page pour livre express entreprise de livraison à Dakar.

Speaker A

La page doit avoir un hero avec title sur bouton CTA. section comment ça marche. Donc voilà tout ce dont on a besoin. Donc HTML, CSS, JavaScript, design modèle bleu et blanc mobile responsive. Donc quand on parle de mobile responsive, ça veut dire tout

Speaker A

simplement que le site va bien s'afficher sur mobile. D'accord ? Parce que la taille d'un écran sur mobile à la taille d'un écran desktop, c'est pas pareil. Donc il faut que le site soit codé avec le responsive en en tête pour

Speaker A

que ce soit vraiment adapté à tous les appareils. Donc là, on est en mode planning. Je vais faire euh bon, je vais rester en mode planning et ici sur les gravity setting comme tu as vu autoexécution, j'ai fait request review.

Speaker A

Donc euh je vais faire euh always proceed. D'accord. Donc je pense queon a on a vu tout ça, ça sert à quoi ? Et je vais faire je vais utiliser Gemini 3.1 je vais tout simplement cliquer sur S.

Speaker A

Donc là ce que ça fait d'accord c'est que ça commence à voir un peu ce que je lui demande de faire. Donc ici, comme tu peux le voir, il va réfléchir, d'accord ? Il va voir un peu ce que je lui

Speaker A

demande de faire. Il voit que il voit que je lui demande de faire de l'HTML, CSS JavaScript. Donc en fait, il va opter pour ça. Et là, il va tout simplement faire une analyse. Ensuite, il est en train là, comme tu peux le

Speaker A

voir, de créer les fichiers index.html euh index.css, d'accord ? Styles.ccss. Donc c'est pour le CSS. Euh en fait là, il est en train de tout simplement créer les fichiers. Donc ça c'est tout simplement en fait si tu veux savoir

Speaker A

qu'est-ce que la est en train de faire, à quoi il pense en fait généralement quand tu utilises surtout quand tu utilise des OT en ligne lorsque L est en train de créer, tu peux pas savoir ce qu'il est en train de faire. Tu peux pas

Speaker A

savoir ce que en fait qu'est-ce qu'il est en train de penser au moment où il fait des choses. Et c'est ça qui fait que des fois tu peux te retrouver avec un code ou bien un bug ou bien quelque

Speaker A

chose qui ne marche pas sur ton code et tu ne sais pas en fait où est-ce que l'a c'est perdu. Et c'est ça qui est cool aujourd'hui. Si tu utilises antigravity, tu peux aller tout simplement voir dans ses pensées et voir en fait quel est la

Speaker A

le raisonnement logique qu'il a suivi pour arriver à cees résultats-là. Donc là, il est en train de d'ajouter les détails, les contacts de détails comme tu peux le voir, addic cont adding contact details. Donc il est en train

Speaker A

d'ajouter les contacts euh les les détails de contact. Et une fois qu'il l'aura fait, normalement les fichiers, tu les verras ici maintenant dans notre explorateur de fichiers et on pourra tester cela en ligne. Et là, comme tu peux le voir, je viens de créer le

Speaker A

fichier index. Donc index.html. Ça va être le point d'entrée de notre page. Donc en tout cas, en fait, quand je dis point d'entrée, c'est tout simplement le le fichier qui va servir notre site en quelque sorte. Donc là, on a le

Speaker A

squelette de notre site. Donc quand on parle d'un fichier index, c'est ça à peu près. Tu as vu ? Euh quand on parle de fichier HTML, tu vas voir que ça commence avec la balise HTML. Là, on a

Speaker A

le head. Donc dans la dans le head, on trouve le header. Donc tout ce qui est balisa, quand je te parle de balisa, c'est tout simplement les en fait toutes les informations cachées de cette page là. C'est généralement utilisé par les

Speaker A

bottes, les crawlers, les bottes de Google. Par exemple, les robots de Google quand ils entrent sur ta page, ils peuvent savoir exactement à quoi servent par exemple ta page. Ils vont aller généralement dans les badis méta mais tu tu mets aussi des links. Donc si

Speaker A

tu veux connecter par exemple les Google fonts, donc par exemple ça c'est un HRF, c'est un link pour connecter les fonts Google, donc les polic d'écriture. Ça c'est un link pour connecter le styles sheet, donc ça connecte le CSS. D'accord

Speaker A

? Donc ça c'est le fichier styles.css et là on a le nom. Donc c'est les métadescription. Donc on a la description, le contenu. D'accord ? Donc par exemple ça c'est quelque chose qui ne s'affiche pas vraiment sur la page

Speaker A

sur le front mais c'est pour les BS. Donc là je t'explique juste, tu n'as pas besoin de le comprendre de base mais je t'explique juste. Donc ça c'est le title. Le title c'est ce que tu vas voir sur la table. D'accord ? Donc par

Speaker A

exemple quand tu ouvres un un fichier sur ton navigateur, tu vois en haut au niveau de la table, il y a il y a une petite icône, on appelle ça le fabricant. Et à côté du fabricant, on a

Speaker A

le titre. Donc c'est ça, c'est le title et voilà. Donc ici euh comme je te dis, c'est les bases métal. Là on a le body.

Speaker A

Donc au niveau du body c'est ici que va tout ce que tu vois sur ton site.

Speaker A

Généralement c'est dans le body et le footer. Donc là on a le header, on a les sections. Donc tu vois ça c'est la c'est la hero section. Donc c'est la c'est la plus grande section en fait. Ça c'est

Speaker A

l'HTML. Là on a le CSS. Donc ça, comme tu peux le voir, un fichier CSS, ça s'affiche un peu comme ça. Donc on a des couleurs.

Speaker A

Donc ça c'est la la couleur primaire, donc la couleur de base primary dark, donc la couleur de base mais en thème sombre, la couleur de base en thème clair. Tu vois le texte main, donc le le texte principal, ça c'est la couleur de

Speaker A

texte principal. Text muted, ça veut dire un texte un peu barré, tu vois, un peu transparent. Voilà. Donc ça c'est des couleurs, des animations et cetera.

Speaker A

Et ici, on a script.js JS qui a un fichier JavaScript. Donc on a parlé de ça. On a parlé de l'HTML, du CSS et de JavaScript. Donc tous ces trois-là sont interconnectés. Il faut un peu visualiser le index.html comme comme un

Speaker A

peu le squelette, d'accord ? Le CSS de comme le maquillage, d'accord ? Et le JavaScript comme la pensée, le brain.

Speaker A

Donc c'est ça, c'est lui qui gère les interactions. Quand tu cliques sur un bouton, il y a quelque chose qui s'affiche et cetera. Ça c'est le CSS qui est fait. Et tout se connecte ici au niveau de l'HTML. Donc au niveau de de

Speaker A

HTML, si tu descends juste jusqu'en bas, normalement tu verras un script. D'accord ? Donc ce script là, tu vas voir cet élément là. C'est ça qui fait la connexion entre cet HTML là et script.js qui est là. Donc c'est comme

Speaker A

ça que ton fichier HTML peut prendre en fait en tout cas c'est comme ça que le fichier JS peut interagir avec ton fichier HTML. Et ensuite, nous avons la connexion avec le style sheet euh tout simplement ton ton CSS. D'accord ? Donc

Speaker A

ce qu'on va faire, c'est qu'on va ouvrir index.html avec notre navigateur. Et ici, comme tu je tu peux le voir au niveau de de Antigravity, tu as automatiquement ton browser qui est là. Donc je clique dessus et une fois que je clique dessus,

Speaker A

ça va ouvrir un un browser. D'accord ? Donc au niveau de ce browser là, je vais faire fichier euh ouvrir le fichier.

Speaker A

Donc je vais aller dans Easylanding page et je vais ouvrir le html.css. Et là en fait tu peux voir ça c'est le c'est la page qu'il a créé pour moi.

Speaker A

Donc voilà. Donc tu as vu juste à partir de d'un simple texte, il m'a créé tout cela. Donc on va voir un peu par rapport à ce que je lui ai demandé. Qu'est-ce qu'il m'a fait ? Donc ici ici je le

Speaker A

compare à mon prom. Je lui dis créé une landing page pour Livre Express. Donc avec un hero title sous-titre bouton CTA. Donc ça c'est le hero title. Donc quand on parle de hero title, c'est la première section qui s'affiche sur un

Speaker A

site. Donc on appelle ça généralement le héros. Donc là ça c'est le hero title.

Speaker A

Donc c'est le titre qui est sur le hero. D'accord ? Un sous-titre qui est là et un CTA. Donc CTA c'est tout simplement un call to action. Donc un bouton généralement si ici tu vends de l'abonnement, tu vas faire euh par

Speaker A

exemple s'abonner gratuitement, découvrir maintenant, créer mon compte et cetera. Donc c'est le bouton généralement qui est que tu vois en haut. Donc on appelle ça un CTA mais même les autres boutons sont aussi des des CTA. Je essayer de demander une

Speaker A

section comment ça marche. Donc là tu as vu ça c'est la section comment ça marche. Il l'a fait exactement comme je le veux. La section tarif avec trois offres. D'accord. Donc là c'est la section tarif avec trois offres. Je ne

Speaker A

lui ai pas donné exactement de spécification sur les offres mais comme tu peux le voir il a pu juste imaginer des prix. Mais si je veux le modifier, je peux le faire. je vais te montrer tout à l'heure est euh une

Speaker A

section témoignage donc avec des témoignages et euh voilà exactement ce qu'il a fait et il a mis un bouton nous contacter quand je clique dessus bon voilà je pense qu'il n'a pas il n'a pas ajouté de section contact parce que je

Speaker A

lui ai pas demandé de le faire tout simplement mais ça c'est déjà euh on va dire que c'est ton premier test, c'est ton premier essai. Bon, après, généralement, c'est pas ça. C'est pas de l'HTML, CSS, JavaScript que tu vas

Speaker A

créer. On va plutôt créer des projets NextJs, d'accord, avec euh beaucoup plus de fonctionnalité, beaucoup plus de puissance. Mais voilà, c'est notre premier test, c'est notre premier essai.

Speaker A

On va dire que c'est la base de tout. Et euh c'est intéressant parce que ici dans le prom, si je lui avais pas dit de faire HTMLCS JavaScript, il aurait fait quoi ? il aurait tout simplement créé un

Speaker A

un projet NextJs parce que de base tous ces créateurs, tous ces agents IA codent la majeure partie du temps avec du NJS.

Speaker A

Et ici pour le design, je lui avais demandé du moderne bleu et blanc et comme tu as vu, il a totalement respecté les consignes. Donc c'est un peu ça. Euh on va dire que c'est notre premier test pour créer quelque chose de d'assez

Speaker A

potable, d'accord avec l'intelligence artificielle. Maintenant pour modifier, c'est assez simple. Donc par exemple, disons que je veux modifier le prix standard à 1500, le prix express à 2500 et je veux que quand on clique sur nous contacter, ça ouvre un formulaire de

Speaker A

contact. C'est simple, je viens ici et je lui dis je je vais je vais lui dire ça. Donc je veux que tu changes les prix pour le pour les pour le standard.

Speaker A

D'accord ? Donc par exemple pour le pour le standard, au lieu de 1500, je veux qu'on mette 6500. Pour le Express, on va mettre 10500. Pour le business, on laisse sur devis. Mais quand je clique sur le bouton nous contacter, que ce

Speaker A

soit sur au niveau du du euh du tarif sur devis business ou bien sur le header, donc sur le menu en haut, quand je clique sur nous contacter, ça doit ouvrir un formulaire de contact euh pour que la personne puisse me contacter.

Speaker A

Donc c'est ça que je lui dis ici. Donc comme je te l'ai dit, moi j'utilise un outil pour dicter. Ça s'appelle Whisper Flow. Euh, il y aura aussi les liens que du de l'outil que j'utilise dans la description si tu veux l'utiliser. Ou

Speaker A

bien tu peux tout simplement utiliser le le vocal qui est ici directement directement chez euh entre Ravity et il est gratuit, il vient avec l'outil. Donc tu peux l'utiliser pour faire tes vocals, c'est pareil. Donc là, je vais

Speaker A

lui donner ça et on va attendre qu'il va tout simplement faire des modifications. Donc et ensuite une fois qu'on fait ça, on va créer une deuxième variation de notre outil. D'accord ? Mais cette fois-ci, on va la créer un peu de la

Speaker A

manière dont je l'aurais créé, donc d'une manière beaucoup plus professionnelle parce que je vais utiliser un un peu comme les super skills, les super pouvoir d'antigravity, une manière de vraiment pousser à donner son maximum. Donc on attend un peu qu'il

Speaker A

finisse. Et là en fait, tu vas voir qu'il va modifier euh il va faire toutes les modifications euh que je lui ai demandé. Il va mettre ici 6500, il va mettre ici 10500 et il va faire que quand tu cliques sur ce boutonlà, ça va

Speaker A

ouvrir un un formulaire de contact tout simplement. Donc là, comme tu peux le voir, il est en train de modifier. Donc il a il a déjà modifié tout. Donc là, normalement, si j'actualise et que je reviens, tu vas voir, il a mis 6500, il

Speaker A

a mis 10500. Donc pour est-ce qu'il a fini de faire le formulaire de contact ?

Speaker A

Je ne pense pas là. Si je clique ici, tu as vu, il y a encore rien qui se passe.

Speaker A

D'accord ? Donc il est en train de travailler sur ça. Donc déjà, comme tu peux le voir, il a déjà changer les prix. Donc ça, en fait, pour changer quelque chose, c'est simple. Tu viens, tu écris ici ou bien tu le lui dis et il

Speaker A

le fait. C'est aussi simple que cela de travailler. C'est ça le vibe coding les gars. C'est ça le vibe coding. Donc tout ce que je suis en train de vous expliquer sur les fichiers HTML, CSS, JavaScript, c'est juste pour que vous

Speaker A

compreniez ce qui se passe sous le capot. Mais de base, vous êtes même pas obligé de comprendre tout ça. L'idée, c'est que si vous le comprenez, vous pourrez faire de meilleurs promptes et avoir de meilleurs résultats. Euh c'est

Speaker A

la c'est la différence entre faire quelque chose euh faire quelque chose en sachant ce que tu fais et juste partir où le vent te porte. D'accord ? Donc là, je pense qu'il a terminé. Quand je vais cliquer sur nous contacter, tu vas voir,

Speaker A

il m'a maintenant créé un formulaire de contact. C'est aussi simple que cela. Euh moi de base, j'étais développeur les gars. Euh en fait ça c'était au moins 1 heure de travail. C'était 1 heure de travail à l'époque tu vois. Donc euh là

Speaker A

je vais venir sur mobile. Donc je vais faire inspecter sur le navigateur et je vais ouvrir euh sur mobile. D'accord ?

Speaker A

Je vais l'ouvrir par exemple sur un iPhone 12 Pro. Tu vas voir que le le site s'affiche très bien sur mobile. Et là il y a déjà le mod menu qui est là.

Speaker A

D'accord ? Le menu hamburger qui est là. Et comme tu peux le voir, c'est pas mal.

Speaker A

C'est vraiment une très jolie page que que qu'une entreprise peut peut utiliser. Si cette entreprise existait, ben elle aurait pu utiliser cela et avoir des clients, se faire contacter par les clients. Mais on va aller plus loin parce que ça, je trouve que c'est

Speaker A

assez simple. On va aller beaucoup plus loin. Maintenant, ce qu'on va faire c'est que on va ouvrir un nouveau un nouveau dossier. Donc je vais ouvrir un nouveau dossier. Je vais l'appeler Easy Landing Pro. D'accord ?

Speaker A

Donc on va l'appeler Easy Landing Pro. Créer. Tac. Yes. OK. Et dans Easy Landing Pro. Donc la première chose que je vais lui donner, c'est que je vais lui donner une règle. D'accord ? Pour cette règle, comme je l'ai dit, je peux

Speaker A

venir ici dans les customisations et l'amener tout simplement dans les rules. Écrire, je faire soit une règle globale ou bien une règle dans le workspace. Ou bien je viens ici, d'accord, sur l'explorateur, je clique sur ajouter un fichier. Je vais appeler ce fichier

Speaker A

gemini.mmd. D'accord ? Et je vais coller ceci dessus. Donc ça c'est un gros prompt.

Speaker A

D'accord ? Euh je il sera aussi disponible dans le fichier qui sera en description. Ne vous inquiétez pas, vous pourrez avoir ça. Donc ici en fait je lui donne beaucoup plus de contexte. Je donne beaucoup plus de contexte dans ce

Speaker A

que je veux réaliser, dans ce que je veux faire. Donc ici je lui dis agis comme un technologue créatif seigneor de classe mondiale et élite ingénieur front end. Tu construis des landing page haute fidélité cinématographique, un sur un

Speaker A

pixel perfect. Chaque site que tu produis doit ressembler à un instrument digital. Chaque scroll est intentionnel.

Speaker A

Chaque animation est pondérée, professionnelle. Éradique tous les patterns génériques d'IA. D'accord ? En fait, l'idée c'est quoi ? Et et ici, je lui dis le flux de l'argent à suivre obligatoirement. Quand un utilisateur te demande de construire un site ou que ce

Speaker A

fichier est chargé dans un nouveau projet, pose immédiatement exactement ces questions en utilisant voilà en excuseer question, c'est tout simplement une fonctionnalité. Donc l'idée c'est qu'à chaque fois que je viens et je lui dis crée-moi une landing page, il va

Speaker A

tout le temps me poser ces questions-là. Donc quel est le nom de la marque et son objectif en une phrase ? Choisis une direction esthétique. Euh quels sont tes arguments de vente clé ? Que doivent faire les visiteurs ? D'accord ? à

Speaker A

chaque fois que je viendrai construire une landing page, il va me poser ces questions. Donc maintenant qu'il a ça en contexte, je viens ici et je lui dis construis-moi une landing page. Donc là on va attendre qu'il va me poser

Speaker A

certaines questions. Donc comme tu as vu, il m'a dit pour que je puisse construire cette landing page de manière optimale, Pixel Perfect, merci de répondre à ces questions. Quel est le nom de la marque et son objectif ? Donc

Speaker A

là, je vais faire par exemple un, je réponds à la première question. Donc c'est Livre Express. Donc je vais juste supprimer ça. Donc livre express entreprise de livraison rapide à Dakar.

Speaker A

Donc je fais ça. D'accord ? Donc ça c'est l'entreprise. D'accord ? Euh de choisis euh une direction esthétique.

Speaker A

Donc je vais faire deux. Je vais lui dire euh parmi les suivants : tech organique luxe de minuit signal Bretagne. Bon allez, je vais lui dire on va dire tech organique d'accord. Euh tr quels sont tes arguments de vente ?

Speaker A

Trois arguments de vente clés. Je vais lui dire trois. On va lui dire euh livraison rapide, service professionnel disponible 24h sur 24. Et à la 4e question, il m'a demandé que doivent faire les visiteurs ? Euh réserver une

Speaker A

consultation, je vais lui dire euh demander un devis. Euh ceux qui revisitent ma page doivent demander un devis. Donc une fois que je lui ai dit ça, d'accord, je vais tout simplement lui répondre cela. Maintenant regarde, il va pas créer un fichier HTML, CSC,

Speaker A

JavaScript. Non, ce qu'il va faire, c'est qu'il va créer un véritable projet NextJs avec beaucoup de fichiers. Tu vas avoir beaucoup plus de fichiers et ça c'est la différence d'architecture entre un simple fichier fichier HTML CSS JavaScript et un projet euh NextJs. Donc

Speaker A

là, il est en train de réfléchir encore une fois et il va tout simplement suivre tout ce que je lui ai dit ici. Donc comme tu peux le voir, c'est vraiment un prompt très élaboré pour créer des landing page de meilleure qualité. Donc

Speaker A

euh ce sera un prompt qui sera aussi disponible dans le fichier, ne t'inquiète pas. Et en fait, il faut comprendre que c'est pas vraiment des prompts qui sont nécessaires forcément, mais si plus tu donnes de détails et de

Speaker A

contexte, plus tu auras euh une meilleure qualité. Donc ici, il est en train de faire des commandes terminales.

Speaker A

D'accord, comme tu peux le voir, il est en train de de d'installer des choses dans le terminal. Donc ça c'est c'est le terminal. À chaque fois que tu lui vois que tu le vois faire des choses comme ça

Speaker A

avec cette icône là. Donc ça c'est l'icône du terminal. Ça veut dire qu'il est en train de faire des choses dans le terminal. Donc je t'avais montré le terminal, c'est là. Donc ça c'est le terminal mais c'est la même chose. C'est

Speaker A

juste qu'il a ouvert une fenêtre de terminal et qu'il est en train de d'installer du projet, de faire des choses. Donc là il est en train comme tu as vu, d'installer des fichiers et cetera. Donc là dans le dossier, tu peux

Speaker A

voir qu'il y a un dossier source, il y a un dossier public. Ici tu vas avoir un favicon, tu vas avoir une icône. Ça c'est le dossier source. Donc on a le dossier a.css css qui correspond un peu

Speaker A

à index.css de tout à l'heure, app.jsx donc et ça c'est c'est l'app. Donc dans NextJs, il y a pas de HTML à vrai dire.

Speaker A

D'accord ? En fait, il y a du JSX. C'est un peu une combinaison d'HTML et de JavaScript, d'accord ? Donc c'est comme si on avait combiné le JavaScript et l'HTML dans un nouveau type de en fait de nouveau type de document. D'accord ?

Speaker A

Donc c'est un peu ça. Donc si tu si je veux vraiment te l'expliquer, je veux dire ça parce que là ça c'est de l'HTML, d'accord ? Mais ça c'est du JavaScript parce que c'est une fonction. Euh donc je t'explique un peu ce qui se passe

Speaker A

hein. Encore une fois là je suis plus dans une dans une logique d'explication mais tu n'as pas vraiment besoin de comprendre tout cela. Donc l'idée c'est que lui c'est lui qui a besoin de de comprendre et il comprend, il est en

Speaker A

train de faire il est en train de me créer ma landing page tout simplement.

Speaker A

Donc on attend qu'il finisse, d'accord ? et on va voir un peu le résultat. Et ici aussi, il faut pas te perdre. Donc quand tu vas voir par exemple index.hthtml par exemple, ça en fait il faut comprendre ce qui se passe. L'idée c'est que NextJs

Speaker A

il va prendre, il va juste créer un fichier index.hthtml de base, mais il va injecter du code gxx. Par exemple, là quand on regarde le fichier index.html, tu vas voir que là on a juste un peu de code. Mais ici en bas, qu'est-ce qu'il y

Speaker A

a ? Il y a un script, d'accord, qui injecte un fichier qui s'appelle main.gsx, d'accord ? Donc attends, je fais une petite erreur. Voilà, main.x et main.gsx, il est là. D'accord ? Donc quand je viens ici euh quand je viens

Speaker A

dans src là, on a main. Et main.X, il intègre ce qu'on appelle app. Donc quand on va ouvrir app, d'accord ? Donc tu vas voir que c'est euh app.gxx qui est là.

Speaker A

Donc c'est ce que je te vais montrer euh tout à l'heure tout simplement. L'idée c'est qu'en fait dans index.html, tout ce qui se passe c'est qu'on injecte euh du GSX dedans. Mais bon euh peut-être là si je te dis tout ça, ça va un peu te te

Speaker A

perdre. Donc euh l'idée c'est que faut pas je faut faut pas trop te casser la tête avec euh juste pour que tu ne te perdes pas. En fait, il faut savoir que c'est deux types de projets très différents quand quand on parle de HTML,

Speaker A

CSS, JavaScript et de NextJS. C'est deux technologies différents, mais c'est basé en fait tout ce que tu vois sur le web, c'est basé sur de HTML, CSS, JavaScript parce que à la base c'était ça. Et là, c'est très bien ce qui se passe parce

Speaker A

que regarde ce qui se passe. On a une erreur, d'accord ? Mais en fait, il faut savoir que Lia n'a pas encore terminé.

Speaker A

Donc à chaque fois que tu vois qu'il y a quelque chose qui s'écrit ici, c'est qu'il n'a pas encore terminé. Donc ne panique pas quand tu vois des erreurs et cetera. Mais s'il avait terminé et qu'on voit toujours ces erreurs là, tout ce

Speaker A

qu'on aura à faire, c'est soit on va faire une capture d'écran ou bien on va copier tout ça. On va le lui coller ici.

Speaker A

On va lui dire "Regarde, il y a un souci, c'est aussi simple que cela." Donc on attend qu'il termine et on va voir un peu qu'est-ce qui nous a produit. Mais bon là, si je devais t'expliquer l'erreur, c'est assez

Speaker A

simple. C'est juste que il y a un module euh en tout cas un module c'est un peu comme une extension d'accord qui qui n'est pas importé tout simplement parce qu'elle n'est pas encore installé. Je juste qu'il doit l'installer et après ça

Speaker A

va ça va ça va se régler. Donc on attend qu'il termine. Donc là il est en train d'avancer. On voit déjà que l'erreur a disparu. Il est il a pas encore fini donc on le laisse terminer. D'accord.

Speaker A

Mais déjà ça c'est la héros section. D'accord. Ça c'est les sections en bas. Donc livraison rapide service professionnel. En fait, c'est totalement incroyable. Ça n'a rien à voir avec la page qu'on avait tout à l'heure. Et en fait, il faut que tu comprennes quelque

Speaker A

chose. Donc là, en fait, la différence de qualité entre la page qu'on avait tout à l'heure et cette page là, c'est de jour et la nuit tout simplement. Euh tout ce qui est texte, on peut le changer très facilement mais le design

Speaker A

en fait, il faut juste que tu vois, regarde même le logo qu'il a fait, regarde le menu en haut. Ça c'est des c'est c'est des très high quality. Et pourquoi on a réussi à avoir quelque chose comme ça ? plutôt sympa parce

Speaker A

qu'on lui a donné un prompt beaucoup plus élaboré, beaucoup plus structuré. Donc là, il a pas encore terminé parce que là, c'est lui-même qui ouvre le navigateur pour voir ce qu'il est en train de faire. C'est pas moi. D'accord,

Speaker A

on le laisse terminer et ensuite on va voir un peu euh qu'est-ce qu'il nous a proposé. Donc là, il a dit la landing page Livre Express a été entièrement réalisée selon les précepts tech organique. D'accord ? Avec toutes les

Speaker A

micro interaction. Donc on va venir donc ici je suis sur le le navigateur de de anti d'antigraffiti tout simplement.

Speaker A

Donc là je vais voir comme tu as vu, il y a une petite animation euh il y a le texte demander une expédition. D'accord, c'est incroyable. Donc là quand je coulisse, tu peux voir que il y a livraison rapide, déploiement optimisé.

Speaker A

Donc là en fait il y a un petit souci ici. On peut le régler, c'est facile mais là regarde tr tracking actif, service de qualité garantie, livraison certifié disponible 24h sur 24, 7 jours sur 7. C'est incroyable. Euh là on va

Speaker A

voir la plupart des gens se concentrent sur un transit hasard 2. Nous nous concentrons sur la précision absolue, d'accord ? Remise certifiée, d'accord ?

Speaker A

On on descend en bas, euh on te demande prêt à accélérer vos opérations, demander un dévis maintenant. Et quand je mets la souris sur le bouton, regarde, il y a une petite animation.

Speaker A

Vraiment, c'est incroyable. Et en fait, tous ceux qui connaissent le design savent que ça c'est vraiment un design de qualité. Maintenant, on peut améliorer, on peut améliorer et et là, on va je vais te montrer un peu ce que

Speaker A

je vais lui demander. Donc là, avec la page que tu m'as faite, on est déjà sur le bon chemin. J'aime bien le menu en haut. Euh cependant l'image que tu as choisie pour euh la hérosection, donc l'image de fond, on voit des arbres, des

Speaker A

feuilles, c'est pas trop en relation, en adéquation avec euh notre service. On fait de la livraison à Dakar. Donc euh essayez de voir une image qui correspond beaucoup plus à notre service, à ce qu'on fait. D'accord ? Euh aussi sur la

Speaker A

section suivante, il y a livraison rapide. Donc sur les euh les pills, d'accord, de de livraison rapide, on voit déploiement immédiat, livraison éclair, euh euh routage optimisé. En fait, il faudrait un peu espacer les pills pour que l'animation se fasse euh

Speaker A

de manière plus jolie. D'accord ? Ensuite sur la section remise certifié donc je pense que c'est une section qui peut être améliorée et aussi quand je scrollle sur cette section je peux scroller pendant pendant deux ou trois fois avant de de pouvoir voir le footur.

Speaker A

Il faut améliorer cela. Et quand je clique sur demander un devis ou bien quand je clique sur le CTA demander une expédition, rien ne se passe. Je veux que quand je clique dessus euh tu vas me créer un formulaire et sur ce formulaire

Speaker A

on va demander à la personne où est-ce qu'il se trouve euh à Dakar. où est-ce qu'il veut livrer, comment il s'appelle, c'est quoi son nom, son numéro de téléphone, euh par exemple, qu'est-ce qu'il veut livrer ? C'est quoi son

Speaker A

budget ? D'accord ? Et essaie de styliser le formulaire au maximum. Si tu veux si tu peux même ajouter une map, tu l'ajoutes euh ça va rendre la chose encore plus esthétique, encore plus jolie. Euh côté design mobile, on va

Speaker A

voir. Ouais. Euh côté design mobile, il faut améliorer la respons. Donc sur mobile, tu on peut voir que le logo Livre Express et le bouton demander un devis sont trop collés, ils sont pas très responsifs. Le header n'est pas

Speaker A

très responsible, donc il faut gérer cela. Euh mais sinon, le reste de la page est bien responsive. Donc euh faut juste régler le la section remise certifiée et la section qui su après parce qu'elle est trop longue. Donc là,

Speaker A

en fait, je lui ai tout simplement fait un feedback euh complet, d'accord, de tout ce que j'ai vu. D'accord. et je vais tout simplement lui donner ça. Et l'idée c'est que lui il va aller me me régler tout ça. Donc les gars, voilà,

Speaker A

c'est un peu ça la base du vibe coding, d'accord ? Donc tu as une idée, tu la structures. Plus tu donnes de détails dans ton prompt, plus tu auras une qualité dans ton output, donc dans ce que l'IA va te proposer. Ça c'est

Speaker A

vraiment un site de qualité professionnelle tout simplement. Donc l'idée c'est quoi ? Imagine la différence de qualité entre le prompt qu'on a eu tout à l'heure, d'accord ? Le site qu'on a eu tout à l'heure et ce site-là. Et c'est ça un peu la

Speaker A

différence. Et là, je lui ai encore donné beaucoup plus de détails dans ce que je veux. Donc normalement pour une landing page entre 2 3 4 à 5 promes, donc à cinq itérations, tu peux avoir vraiment une landing page

Speaker A

professionnelle qui autrement aurait pu vraiment te coûter extrêmement cher. Donc rien que ça c'est c'est même un business. D'accord ? Donc l'idée c'est on va attendre de voir qu' fasse les modifications. Ici comme tu peux le voir, il est en train de réfléchir.

Speaker A

D'accord ? il est en train de réfléchir tout simplement et une fois qu'il aura fini, il va tout simplement te dire que j'ai fini. Donc à chaque fois que tu vois qu'il y a une petite animation ici, ça veut dire que Lia est en train de

Speaker A

travailler. Donc tu le laisses terminer et ensuite tu vas voir un peu ce qu'il a fait. Et à chaque fois qu'il finit, il te fait un walkthrough. Donc ça je te je pense que je te l'avais présenté. À

Speaker A

chaque fois qu'il fini une tâche, il te montre il te le montre ici sur la section centrale. D'accord ? Tu vas voir qu'est-ce qu'il a fait. Livre Express landing page terminé. Euh la landing page a été construite de zéro suivant

Speaker A

strictement les exigences one to one pixel perfect et le design system tech organique socle technique. Donc ça c'est un peu les éléments qu'il a utilisé. il a utilisé du React euh esthétique tech organique, donc euh le plan d'ouverture,

Speaker A

les artefacts interactif. Euh donc l'idée c'est en fait tu peux voir exactement ce qu'il a fait et il te montre même des euh des captures pour que tu vois un peu le résultat. Donc là il m'a dit qu'il a terminé. On va

Speaker A

revenir sur le site, on va actualiser et on va voir. Donc là comme tu peux le voir, il m'a changé l'image. C'est déjà beaucoup mieux que les plantes. D'accord ? Mais on peut aussi si tu vois que l'image euh ne te plaît pas, tu peux

Speaker A

aller chercher ta propre image et lui donner pour qu'il mette ici. Et on va faire ça. Je vais te le montrer. Donc là, comme tu peux le voir, il a un peu plus géré l'animation. C'est un peu moins euh collé donc c'est déjà pas mal.

Speaker A

Euh ici en bas, tu vas voir la cette section prise en charge a été réglée. Et quand je quand je scroll, regarde cette jolie animation qu'il a fait. Waouh ! Tu as vu ? trajectoire optimale. Donc tu as

Speaker A

vu euh remise certifié. Non, c'est incroyable. Donc je sais pas si vous vous rendez compte de la différence de qualité entre cette landing page et l'autre. Maintenant, on va aller plus loin. Donc je vais venir, je vais aller sur Google, je vais taper

Speaker A

donc Pixel, c'est tout simplement une bibliothèque d'image libre de droit. Donc ici, on va rechercher quelque chose comme Africa Delivery. On va essayer de rechercher une image qu'on peut utiliser dans notre herosection si on trouve une image de qualité. Je vais te montrer

Speaker A

comment tu peux donner une image à Lia euh pour qu'elle puisse le mettre sur ton site. D'accord ? Donc l'idée c'est juste qu'on cherche une image une image libre de droit. Donc je vais venir ici sur Pixabay. On va voir un peu

Speaker A

si on a un peu plus de chance. OK, donc ici je tape Delivery Africa et on va voir. Donc on n pas vraiment trop de choix ici. Il y a juste ça qui est un peu pas mal mais c'est pas ça

Speaker A

qu'on recherche. Donc je vais venir ici dans les images. Donc je vais rechercher dely.

Speaker A

D'accord. Ouais. Donc on a quelque chose comme ça. Si on avait quelque chose comme ça, ça serait cool. Ça aussi c'est pas mal. Donc je vais ouvrir l'image dans un nouvel onglet. Voilà. Donc je vais enregistrer cette image là. Donc

Speaker A

maintenant que j'ai mon image, je reviens sur mon anti gravity. L'idée c'est qu'on va utiliser cette image là dans la herosection. Donc je vais venir ici, je vais cliquer sur plus, je vais cliquer sur média, je vais lui donner

Speaker A

cette image là en contexte. Donc elle est là. Donc je lui dis "Voici l'image que je veux qu'on utilise en fond. de sur la header, donc en image de fond sur la header section. L'idée c'est qu'il prenne cette image là et on va remplacer

Speaker A

cette image là, d'accord ? Par cette image. Et là, une fois qu'on a ça, on a quelque chose d'assez qualitatif, on va dire. Ça va être très cool. Donc là, moi j'aime bien surtout cette ces animations là. Je sais pas si vous voyez, mais ça

Speaker A

c'est vraiment un type de landing page très qualitatif. Donc ici, on attend qu'il termine. Une fois qu'il a terminé, on va voir un peu ce qu'il nous a proposé. Donc là, en fait, il vient de terminer mais comme tu peux le voir, on

Speaker A

n' pas d'image ici. Et la raison, elle est simple en fait, il a pas accès à l'image parce que l'image n'est pas dans ce dossier. L'image est sur mon bureau.

Speaker A

Donc, je l'ai capturé, je l'ai mis sur mon bureau. Il peut lire l'image mais il n'y a pas accès. Donc ce qu'on va faire, c'est que je vais faire juste faire un retour, d'accord ? Je vais confirmer le

Speaker A

retour. Ça va annuler tous les changements qu'il a fait. avant de lui dire de de faire un changement, d'accord ? Je vais même enlever le texte que je lui ai dit. Donc c'est comme ça qu'on annule un changement de lia. Ici quand

Speaker A

on revient, tu peux voir que le code est revenu à l'état initial avant le changement. D'accord ? L'idée c'est que je dois ajouter l'image ici. D'accord ?

Speaker A

Donc je vais aller donc ça c'est l'image que je viens de de de de créer. Donc ici je vais ouvrir le dossier. Donc là c'est le dossier de de ce fichier là. Donc bon, j'utilise le terminal hein. Donc ça

Speaker A

c'est un peu une invocation. C'est simple, tu fais open espace point, ça va ouvrir dans le dans ton explorateur le dossier que tu as ouvert actuellement.

Speaker A

Donc je clique juste entrer et ça va ouvrir le dossier qui est là. Une fois que j'ouvre ce dossier-là, je vais dans public, d'accord ? Qui est là. Donc ici, on a public, on a le fabricant SVG, c'est la même chose. Et je vais tout

Speaker A

simplement glisser l'image ici et je vais le déplacer. Donc maintenant, l'image, il est là, il est disponible.

Speaker A

D'accord ? Et ce que je vais faire, je vais tout simplement cliquer sur l'image. D'accord ? Je vais pas relâcher, je clique dessus et je le coulisse dans le chat. Et une fois que je fais ça, maintenant il a vraiment

Speaker A

accès à l'image et je lui dis voici l'image qu'on veut que je veux qu'on utilise en fond de la header. Donc en image de fond sur la header section, donc je vais dire sur la hero section ou de la hero section. Aussi simple que

Speaker A

cela. Maintenant il a vraiment accès à l'image tout simplement parce que l'image il est dans le projet, il est pas sur mon ordinateur d'accord parce que Lia a accès à mon projet mais il va pas pouvoir aller prendre quelque chose

Speaker A

dans mon ordinateur à moins que je lui dise de le faire. D'accord ? J'aurais pu lui dire prends l'image qui est dans mon bureau et euh déplace-le dans mon projet. Mais si je le fais manuellement, c'est tu vas beaucoup mieux comprendre.

Speaker A

Donc là, il a modifié et ici, on a notre résultat. Donc ça, c'est vraiment incroyable. C'est vraiment une landing page. Je digne d'une entreprise qu'on pourrait vraiment vendre. Maintenant, quand je clique sur demander un devis, tac, ça ouvre tout simplement un

Speaker A

formulaire. Et tu as vu à quel point le formulaire il est stylé les gars ? mon gars, regarde la le point de collecte, le point de livraison, le nom de l'entreprise, le téléphone, la nature du colis, le budget estimé et confirmer la

Speaker A

demande. Et je peux même dire après, c'est c'est à moi de choisir une fois qu'il confirme la demande, qu'est-ce que je veux que ça se passe. Donc euh mais bon, vu qu'on est en train juste de construire une landing page, on va

Speaker A

s'arrêter ici. Mais tu peux voir maintenant la qualité et on va voir maintenant sur mobile ce que ça donne.

Speaker A

Tac, je vais aller sur téléphone. Et là, comme tu peux le voir sur mobile, ça a réglé le problème de la header du bouton et du et du logo qui s'overlapé, c'està-dire que qui s'entre chevaucher.

Speaker A

Là, ça a été réglé. Et ici, comme tu peux le voir quand je quand je coulisse maintenant, on a une landing page extrêmement qualitative mon gars, extrêmement qualitative. Donc ça c'est du vibe coding. Imagine, on a pu réaliser cela tout simplement avec du

Speaker A

texte. on a pu faire nos changements. Donc c'est un peu comme ça qu'on fait du vibe coding. D'accord ? Donc ça c'est le premier projet qu'on a fait. Donc la création d'une landing page pour une entreprise de livraison. On va faire le

Speaker A

deuxième projet assez simple. Donc ce sera un projet aussi très simple. On va créer un un CV en ligne. D'accord ? On va créer un CV en ligne euh et on va voir un peu ce que ça va donner. OK.

Speaker A

Donc maintenant on va passer au second projet. Donc là on va ouvrir un nouveau projet. Donc je vais faire file et je vais faire open folder. Je vais faire le nouveau dossier et je vais l'appeler CV EasyS Pro. Je vais créer et je vais

Speaker A

l'ouvrir. Donc ici aussi euh ce qui se passe c'est euh on va tout simplement je vais faire yes. Donc là on a un tout nouveau dossier. Il y a rien dedans.

Speaker A

Comme tu peux le voir. Je vais faire la même chose. Je vais faire je vais créer un fichier gemini.mmd MD et je vais mettre la roule dedans. Donc ici, si tu viens dans customisation, tu vas voir que la roule, ce que je viens de faire

Speaker A

ici, c'est juste une roule, hein. D'accord ? Donc tu j'aurais pu juste venir ici cliquer sur workspace si je veux que la roule s'applique juste à ce projet-là ou global si je veux que cette roule là, donc cette règle s'applique à

Speaker A

tous les projets que je vais créer. Donc là, je lui dis constructeur de CV en ligne cinématographique, agis comme un technologue créatif, seigneor classe mondiale. Tu construis des CV en ligne, haute fidélité. D'accord. flux de l'agent à suivre obligatoirement. Donc

Speaker A

il me il me pose des questions, choisis une direction artistique, décris ton parcours, bref, liste tes trois expériences principales, cinq compétences clé. Donc là, je vais juste revenir ici. Une fois que je lui donne ça, ça aussi ce sera disponible dans le

Speaker A

fichier les gars. Ne vous inquiétez pas. Tous les éléments que je vais utiliser dans cette dans ce tutoriel seront disponibles dans le fichier. Et je vais lui dire "Crée-moi un CV en ligne.

Speaker A

Crée-moi un CV." Euh non, je vais annuler et je vais plutôt lui dire crée-moi mon un CV euh mon CV en ligne site web. D'accord. Bon euh donc ça ça fait pas de mal de préciser encore là. Qu'est-ce que

Speaker A

qu'est-ce qu'il va faire ? Il va tout simplement encore une fois lire ici. C'est des instructions très précises, très claires. D'accord ? Donc j'ai un peu on va dire que il m'a posé ces questions de quel est ton nom complet et

Speaker A

ton titre professionnel ? D'accord. Donc modo file créateur de contenu, c'est pas mal. Donc là, je vais répondre à ces questions. File, créateur de contenu et développeur. Donc deuxièmement, choisis une direction artistique. Euh là, je vais lui dire a digital. Aa digital 3,

Speaker A

décris ton parcours. Là, je vais lui dire donc j'ai fait j'ai eu le bac G, le bac de gestion. Ensuite, je suis parti en école de commerce au Maroc à l'ENCG, école nationale de commerce et de gestion en 2015. En 2017, je suis parti

Speaker A

à l'école de code 1337. Euh ensuite, je suis revenu à Dakar en 2020. J'ai créé ma chaîne YouTube euh depuis lor. J'ai euh en 2021, j'ai créé ma chaîne YouTube. Ensuite, j'ai lancé plusieurs entreprises. J'ai créé WhatsApp IA en

Speaker A

2025, j'ai créé Easymententor en 2025, j'ai créé easilo.com en 2025. Donc c'est des sites, tu peux faire des recherches en ligne pour voir un peu ça sert à quoi. Donc voilà.

Speaker A

Donc ici c'est un peu la question 3 et la dernière question liste trois compétences principales et cinq compétences clé. Donc trois compétences principales. Donc je fais du vibe coding, je fais de la création de contenu et je fais

Speaker A

qu'est-ce que je fais d'autre ? Je joue bien à FIFA. Je suis un grand joueur de FIFA donc je joue bien à la Play. C'est les compétences donc je dois ajouter encore cinq autres compétences. Donc on va dire que je j'écris les livres,

Speaker A

d'accord ? J'ai écrit le livre 50 jours pour réussir en Afrique et je suis développeur, je crée des sites web. Euh quoi d'autre ? Ouais, je suis formateur aussi, je forme des gens. Donc les les trois expériences principales, euh j'ai

Speaker A

travaillé dans une multinationale en tant que développeur mobile. Euh j'ai travaillé en tant que freelancer sur des projets. Euh quoi d'autre ? J'ai lancé mes propres boîes, mes propres entreprises. Mais tu peux tu peux tout simplement créer des expériences si tu

Speaker A

veux. Donc voilà. Ici je vais un peu voir. Donc easy mow. Ça ça s'écrit pas comme ça. C'est I z M E. Voilà. Donc là, je lui ai un peu expliqué mon parcours.

Speaker A

Euh bon voilà, je vais lui je vais lui donner tout ça et euh voilà, je lui dis de créer euh certains détails, euh pas trop le temps de tout l'expliquer, mais déjà c'est une bonne base. On va voir un

Speaker A

peu qu'est-ce qu'il va nous proposer. Comme d'habitude, ce qu'il va faire c'est qu'il va réfléchir. Il va aller faire des recherches. Donc regarde, il fait des recherches sur WhatsApp I, sur Easy Mentor, sur Easy Below. Donc tu as

Speaker A

vu Sorching Web tellement il est intelligent intelligent. Et pourquoi, comment il arrive à faire ça ? C'est qu'il a des tools, donc il a des à sa disposition, il peut aller faire des recherches, il peut réfléchir, cogjeter.

Speaker A

Et en fait à chaque fois qu'est-ce qui se passe ? C'est que c'est comme une chaîne de pensée. Il il fait sa première pensée, il se donne lui-même des tâches.

Speaker A

Donc ça c'est les tasques, tu as vu ? Donc les tasques qui s'est donné donc planification et recherche pour WhatsApp. I initialisation du projet.

Speaker A

Une fois qu'il finit ça, il va initialiser le projet, il va configurer le design, il va créer la nave bar, créer le la herosection et cetera et cetera. Donc en fait ça c'est cette tâche qui s'est donné lui-même.

Speaker A

Maintenant il va faire une série d'actions. À chaque fois il va faire une tâche, il va se dire il va dire "OK, ça je l'ai fait, je passe au suivant. OK, ça je l'ai fait, je passe au suivant."

Speaker A

Et c'est ça la différence entre un simple chat euh IA chat et un agent. un agent a des a des tools à sa disposition, a des capacités à sa disposition et c'est pourquoi c'est tellement intéressant. Donc là, on va

Speaker A

attendre qu'il termine et on va voir le résultat. Donc maintenant, il a terminé. Et pour voir le résultat, c'est pas comme tout à l'heure parce que tout à l'heure quand j'ai ouvert ici le navigateur, j'ai automatiquement vu le

Speaker A

résultat mais il faut te dire que c'est lui-même qui avait lancé le projet. Il avait automatiquement lancé le projet.

Speaker A

Mais généralement pour lancer un projet, d'accord, ce type de projetlà, il faut lancer une commande sur le terminal.

Speaker A

Donc pour ouvrir le terminal, tu peux faire ça. Donc tu tu viens ici en bas, d'accord ? Tu vas voir cette fois que la ta flèche se transforme, tu cliques, tu ne lâches pas et tu ouvres. D'accord ?

Speaker A

Donc tu ouvres le terminal et ici tu peux faire cette commande là npm run dev. Mais sinon, tu peux aussi lui dire ici juste lance le projet. Donc si je lui dis lance le projet, il va faire ça

Speaker A

pour moi. D'accord ? Mais c'est c'est juste pour conserver les crédits. Ne te casse pas la tête. Dis-lui juste lance le projet. Et tu vas voir en fait ici, tu vas voir qu'il va ouvrir un terminal et il va faire npm run dev. Donc npm run

Speaker A

dev, c'est juste une commande pour lancer le projet. Donc tu as vu là, il a ouvert un terminal. Donc ça c'est le terminal, je vais l'ouvrir. Quand je clique sur relocate, il va l'ouvrir ici.

Speaker A

Et qu'est-ce qu'il a fait ? Il a juste fait un npm run dev comme tu peux le voir. Une fois qu'il a fait npm rev, il m'a dit le projet est maintenant lancé.

Speaker A

Donc là, je clique sur le lien, d'accord ? Et ça va ouvrir le projet. Donc le projet qu'il a créé, c'est ça. Donc à modif, entrepreneur, créateur de contenu et développeur. Donc là, en fait, tu as vu en fait vision et parcours, mon

Speaker A

parcours avec un bac gestion, expérience manquante. C'est incroyable. Développeur freelance, développeur mobile, arsenal créatif euh créant l'avenir, me contacter. Quand je clique sur me contacter, ça ouvre juste une adresse email, mais on va essayer de faire un peu plus joli. Donc là déjà, c'est c'est

Speaker A

cool, c'est bien, sauf que je trouve que c'est un peu trop sombre à mon goût.

Speaker A

C'està-dire que déjà le fond, il est sombre et le les écritures sont violets. J'aurais bien aimé que la couleur d'accent soit plutôt euh orange, golden.

Speaker A

D'accord. Et ici, quand on va cliquer sur mobile, je vais voir ce que ça va donner. Ouais, sur mobile, c'est pas mal mais on peut encore faire mieux. Ça en fait sur mobile, ça tous ces trois là soit ils sont sur une ligne, soit on

Speaker A

trouve un moyen de les rendre un peu plus responsive. Le menu en haut, tu as vu ça c'est le menu, c'est le header.

Speaker A

Donc quand on parle de header, donc c'est tout ce qui est ce qui est en haut là, il n'est pas très optimisé sur mobile donc il est pas centré. Donc je vais lui faire un petit vocal, d'accord ? Ici, donc cette fois-ci, je vais

Speaker A

utiliser la compétence vocale directement au lieu d'utiliser mon outil euh de dictation, je vais lui dire c'est bien. D'accord ?

Speaker A

Maintenant, ce que je veux, c'est que au lieu d'utiliser la couleur violette comme couleur des icônes et des d'accent, d'accord, on va plus utiliser du golden, quelque chose de comme comme de l'or doré parce que je trouve que le

Speaker A

site est un peu trop sombre, il faut rendre certains éléments beaucoup plus visibles. Donc, essayez de faire un mariage très joli avec des animations.

Speaker A

D'accord ? Ensuite, quand on clique sur le CTA pour me contacter, je veux que ça ouvre un formulaire, un très joli formulaire avec le nom de l'entreprise ou bien le nom de la personne, la mission qu'il veut me confier et son

Speaker A

budget. Et je veux que sur mobile que tu corriges la response. Donc la le menu sur le header n'est pas très responsif. Donc il faut le centrer et sur la herosexion, donc les éléments qui sont tout en bas de la herosexion.

Speaker A

D'accord ? Sont mal stackés, ils sont mal organisés. Je veux qu'ils soit vraiment très bien organisés de manière assez responsive. Donc ensuite corrige si tu vois d'autres problèmes de responsivité sur la page, tu peux aussi corriger cela. Tac. Donc là, je lui ai

Speaker A

fait un vocal et je lui envoie ce vocal tout simplement. Donc comme je t'ai dit, tu peux aussi utiliser cette fonctionnalité là dans antigravity. Et là, qu'est-ce qu'il va faire ? Il va transcrire, d'accord, ce que j'ai dit,

Speaker A

comprendre mes requêtes, créer un plan de correction et ensuite corriger tout cela et me faire un résumé. Donc ça, comme tu as vu, mise à jour, formulaire responsivité, ça c'est le plan d'implémentation. Donc quand je clique sur le plan d'implémentation, euh tu

Speaker A

peux voir que là, on va dire euh passage à la couleur dorée euh à du modal de contact. Euh donc en fait, il est en train de tout simplement modifier le plan d'implémentation. Là, tu as vu, il a modifié la couleur d'accent, il a mis

Speaker A

hors premium. D'accord ? Et là, il est en train de modifier le index.jgjgs. Donc, tu as vu, il a enlevé la couleur violette et il a ajouté la couleur gold aa. Il a appelé la couleur couleur aura gold, tu vois ? Donc là, en fait, il est

Speaker A

juste en train de faire son taf quoi quoi, tout simplement. Donc tu n'as même pas besoin de voir ce qu'il fait. tu juste tu attends juste qu'il termine et qu'il te disent qu'il a terminé. Donc c'est ça qu'on va faire et on va voir le

Speaker A

résultat ensemble. Donc là il a terminé les modification et comme je te l'ai dit à chaque fois qu'il termine il me donne un walkthrough. Je peux open. D'accord et là tu vas voir les modifications apportées. Donc thème or premium

Speaker A

formulaire de contact responsivité avancé. Donc là on va ouvrir l'élément. Et là comme tu peux le voir il m'a fait un thème golden. Je trouve que c'est beaucoup plus intéressant que le violet qu'on avait là. C'est beaucoup plus

Speaker A

visible. Et tu as vu en fait le choix des polices d'écriture. C'est intéressant tout ça parce que je lui ai donné un master prompt dans le gemini.

Speaker A

Donc tout ce prompt là ça le transforme en un expert de du design. D'accord ?

Speaker A

Donc là les expériences marquantes fondateur et CEO, développeur freelance, développeur mobile, tu vois Arsenal créatif.

Speaker A

Euh donc si je fais me contacter, tu as vu, ça ouvre le un formulaire, votre nom, votre mission et un budget, d'accord ? Et tu fais envoyer la demande. Et là, il a même mis un bouton découvrirapp.

Speaker A

Et c'est incroyable. Et là, je pourrais juste ajouter mes mes différentes réseaux. D'accord ? Donc en fait, l'idée c'est quoi ? En fait, c'est tellement intéressant et c'est tellement facile de créer si tu sais comment te prendre avec

Speaker A

la bonne formule. C'est hyper facile de créer des sites de qualité. Donc maintenant, on a créé deux projets. Donc on a créé le premier projet qui est donc là je vais arrêter le terminal. Donc pour le faire, je fais juste contrôle C

Speaker A

et ça termine le terminal. tu n'as pas besoin de le faire toi-même. Toi, tu peux juste cliquer sur fermer et ça va se fermer. Il y a pas de souci. Donc maintenant, comme je t dit, on va travailler à mettre tout ça en ligne.

Speaker A

D'accord ? Ce sera euh l'objectif de ce 3è module, donc créer une première réalisation avec le webcoding et le mettre en ligne. Maintenant, pour le mettre en ligne, il y a une manière très simple, une manière débutante et une

Speaker A

manière professionnelle. Et j'ai décidé de t'apprendre directement la manière professionnelle. D'accord ? Qu'est-ce qu'on comment est-ce qu'on fait ? Il y a deux manières. Il y a des gens, ils vont tout simplement copier le dossier, prendre tout le code, le mettre en zip

Speaker A

et aller le téléverser sur l'hébergeur, par exemple Netlifi ou bien Versel. Je pense que tu as déjà créé ton compte Versel, d'accord ? Mais c'est pas vraiment la bonne manière de le faire.

Speaker A

Il faut faire ce qu'on appelle du développement continu et de l'intégration contenu. C'est-à-dire que on va utiliser GitHub, d'accord ? Et je pense que tu as déjà ton compte Github.

Speaker A

On a fait ça au niveau du module 1. Maintenant, on va parler de GitHub. Il faut que tu comprennes c'est toi quoi GitHub pour que tu puisses comprendre à quoi ça va nous servir. Donc GitHub en terme simple, c'est un endroit où tu

Speaker A

stockes ton code sur internet. Donc c'est comme un Google Drive mais pour le code et c'est important pour plusieurs raisons. Donc déjà pour la sauvegarde donc ton code le code de ton site est en sécurité. Si ton ordinateur tombe en

Speaker A

panne, tu te fais voler, ton code va toujours être stocké sur GitHub. Deuxièmement, il y a la collaboration.

Speaker A

Donc si un jour tu travailles avec d'autres développeurs, tout le monde accède au même code GitHub parce qu'actuellement le code que tu as, il est il est juste sur ta machine, d'accord ? Mais si tu veux l'envoyer à

Speaker A

quelqu'un pour qu'il t'aide ou bien pour qu'il travaille sur ton projet, si tu veux qu'il ajoute des améliorations des fonctionnalités, bah tu peux pas tout simplement à chaque fois copier tout ton projet et l'envoyer par je sais pas par

Speaker A

drive ou c'est pas comme ça que ça marche. Il faut le mettre sur Github.

Speaker A

D'accord ? Comme ça, même s'il y a des changements de mises à jour, tous les gens qui ont accès au GitHub pourront avoir accès aux mises à jour. Et troisième mot, ce qui nous intéresse le plus, c'est le déploiement. D'accord ?

Speaker A

C'est GitHub qui va nous permettre de connecter le code qu'on a à Versel pour le mettre en ligne. Donc c'est le pont entre ton ordinateur et internet. Donc maintenant, GitHub fonctionne avec un système qu'on appelle Git. Donc git,

Speaker A

c'est un outil qui suit les modifications de ton code. À chaque fois que qu'il y aura un changement, une modification euh sur ton code et que tu vas le sauvegarder avec Git, ça va s'appeler un commit. C'est comme un

Speaker A

point de sauvegarde dans un jeu vidéo. À chaque fois qu'il y aura un gros problème, tu pourras toujours revenir en arrière à n'importe quel moment. Euh comme par exemple le la fonctionnalité de retour en arrière qu'on a au niveau

Speaker A

de Anté Gravity. Donc ici sur antigravity, si je veux revenir en arrière, je peux juste venir ici et je vais cliquer sur revenir en arrière.

Speaker A

D'accord ? Mais disons que je sais pas, il y a une erreur qui se passe, je perds le contexte ou bien je veux revenir à une étape qui est beaucoup trop éloignée. C'està-dire que j'ai fait un message, j'ai fait je sais pas moi 20 30

Speaker A

40 autres messages et je veux revenir en arrière. Ça va être très compliqué de de de on sait même pas si Lia va garder tout ce contexte là. C'est pourquoi généralement on te conseille que à chaque modification que tu fais,

Speaker A

sauvegarde-le dans ton répertoire à distance, donc sur ton guide. C'est comme à chaque fois que tu fais une modification sur ton code, tu l'envoies sur ton drive, sur ton drive, d'accord ?

Speaker A

Euh guit, tu vas un peu l'imaginer comme un drive comme ça tu pourras jamais perdre tes changements. Et vu que lui, il va répertorier ton code en changement, d'accord ? À chaque fois que tu voudras un changement bien précis, ce

Speaker A

qu'on appelle un commit, tu pourras tout simplement accéder à un à ce commit là.

Speaker A

Donc je t'ai parlé du répertoire distant, d'accord ? Donc c'est on appelle ça un repository ou bien un repo. Donc c'est un dossier sur GitHub et chaque projet aura son propre repo.

Speaker A

Donc tout ce projet là d'accord si CVS Pro c'est un repo. Si on veut par exemple mettre aussi en ligne la landing page qu'on a fait tout à l'heure pour livre expresso.

Speaker A

Donc chaque projet a son repo. Maintenant il y a des commandes que tu utilises pour interagir avec Git. Donc t'inquiète pas, l'agent va souvent les exécuter à ta place mais c'est bien de les comprendre pour comprendre ils servent à quoi et qu'est-ce qui se

Speaker A

passe. Donc on a déjà git init. Donc Git initct, ça initialise Git dans ton projet. C'est la première commande que tu fais dans un nouveau projet et c'est et ça dit à Git de commencer à suivre les modifications sur ton code. Ensuite

Speaker A

on a Git Ad. Donc ça prend, ça prépare les fichiers pour la sauvegarde. Tu dis à Git quel fichier tu veux inclure dans ton projet prochain point de sauvegarde.

Speaker A

Donc Git add avec un point, ça prépare tous les fichiers. D'accord ? Donc point ça veut dire tout ce qui est dans le document sur lequel je suis. Donc tout à l'heure comme tu as vu, j'ai fait open

Speaker A

point, ça a ouvert le dossier lui-même. Donc quand tu fais git ad, c'est comme tu dis git ajoute tous les documents qui sont actuellement dans mon dans mon workspace, donc dans mon projet.

Speaker A

Ensuite, on a git commit. M. Donc euh on a git commit. Donc git commit, ça crée le point de sauvegarde.

Speaker A

Donc tu ajoutes un message pour décrire ce que tu as fait. Par exemple git commit-m prer commit landing page terminé. Donc en fait euh disons que git commit c'est tout simplement euh tu tu crées le la sauvegarde et m c'est tir,

Speaker A

ça veut juste dire message et ensuite après tu écris ce que tu as fait. par exemple git commit- m euh changement de la couleur de de landing page. D'accord ? Ensuite, une fois que j'ajoute un nouveau bouton, par

Speaker A

exemple, j'ajoute le formulaire, je fais un autre guit commit- m ajout du formulaire. Tu comprends un peu ? C'est comme ça que ça se passe. Donc quand tu vas aller sur Git, tu vas voir un peu le l'historique de tes changements et comme

Speaker A

ça si tu veux un changement en particulier, tu pourras tout simplement y accéder. Ensuite, on a le guit push.

Speaker A

Le guit push, c'est simple, ça pousse ton code, d'accord ? Ça envoie ton code sur GitHub. Donc c'est la commande qui va transférer tout ton code du local vers Internet, donc vers ton repository sur GitHub. Donc en gros, le workflow,

Speaker A

il est simple. Donc tu codes, tu fais git ad, git commit et git push et ton code va être automatiquement sur Github.

Speaker A

D'accord ? C'est un peu comme ça que ça se passe. Donc ça te semble peut-être compliqué, pas de stress. L'agent peut faire tout ça pour toi. Tu lui dis juste pousse-moi ce code sur GitHRUP ou bien mets-moi le code sur GitHRub et il va

Speaker A

faire toutes ces commandes là pour toi. D'accord ? Il va exécuter lui-même les commandes mais au moins maintenant tu comprends un peu ce qui se passe derrière. Donc à chaque fois qu'il pousse quelque chose, il va faire git

Speaker A

ad, il va ajouter tous tes changements, il va faire git commit, il va faire un message et il va faire guit push pour pousser ton code sur ton repository Github. OK. Donc maintenant tu comprends un peu à quoi sert Git. On va prendre

Speaker A

notre CV qu'on vient de créer et on va le mettre sur GitHub. Donc on va le mettre en ligne sur GitHub. Donc la première étape, si tu n'as pas encore de GitHub, va sur github.com et créer un Github. C'est gratuit. Donc je t'avais

Speaker A

montré comment on fait cela, mais on va quand même le on va quand même le refaire, d'accord ? Ça fait pas de mal.

Speaker A

Donc tu vas aller sur github.com, le lien sera aussi dans le document. Tu vas faire tout simplement sign up, d'accord ? Et là, tu peux te connecter. Donc tu peux créer ton compte avec tout simplement ton email. Donc je vais

Speaker A

utiliser cet email là et je vais créer un nouveau gitub. D'accord ? Ici dans mon pays, je vais pas mettre France, je vais mettre Sénégal, je vais faire créer mon compte. Et là, il est en train tout simplement, je vais il va me demander de

Speaker A

solve un puzzle. Donc là, il me demande de de créer un puzzle. Je fais ça. Donc là, le puzzle, c'est simple. Il me dit de déplacer cette personne jusqu'à ce que il soit sur cette sur cette icône.

Speaker A

Donc cette icône, elle est là. Donc si je vois, voilà. Donc c'est ça la bonne réponse. Je fais submit. D'accord ? Et ça va être la même chose. Voilà, c'est bon. Je fais submit il va rester un 3è. Donc c'est un peu

Speaker A

comme des capchas hein pour vérifier euh que tu es bien un humain. Et là voilà, normalement ton compte GitHub va être créé. Donc c'est aussi simple que ça de créer son GitHub. D'accord ? Maintenant pour connecter notre GitHub à notre

Speaker A

Antigravity, j'ai une technique qui est très simple. Donc tu vas aller sur ton sur ton anti Gravity. Donc tu ouvres ton an gravity et tu vas faire commande shift et P. D'accord ? Et ça va t'ouvrir quelque chose comme ça. Donc si tu es

Speaker A

sur Windows, tu vas faire contrôle shift P. D'accord ? Et si tu es sur MacBook Mac OS, tu fais commande Shift et P. Et ça va t'ouvrir quelque chose comme ça.

Speaker A

Et tu vas voir ici dans les commandes, tu vas écrire git de points, d'accord ?

Speaker A

et tu vas écrire clone. Et tu vas voir même quand j'ai écris git tout simplement, il y a des commandes qui qui s'affichent là. Donc tu vas juste cliquer sur git clone. Et quand tu cliques sur Git Clone, tu vas cliquer

Speaker A

sur clone from GitHub, d'accord ? Tu vas faire ça et là il va te demander de te connecter à GitHub. Tu vas faire allow, d'accord ? Et tu vas faire copie et continue to GitHub. Donc là il va

Speaker A

t'ouvrir un il va t'ouvrir une fenêtre sur GitHub comme tu peux le voir. D'accord ? Et là, il va te donner un code. Donc tu vas copier ce code là.

Speaker A

Donc tu copies ce code, tu ouvres GitHub qui est là. D'accord ? Tu fais continuer. On va donner l'autorisation à notre PC de se connecter sur notre gitub. Je vais faire continuer. D'accord ? Là, il va me demander des

Speaker A

autorisations. Je fais autorize Google anti Gravity. Et là, c'est bon. D'accord ? Là, si je reviens ici, il va tout simplement me connecter à Github. Et là, comme tu peux le voir, il n'y a pas de repository qui a été trouvé. D'accord ?

Speaker A

parce qu'on n pas encore créé de repop. Maintenant, pour créer un repository sur GitHRP, c'est très simple parce que à chaque fois que tu voudras pousser ce projet là sur GitHRUP, il faut qu'il soit quelque part. Donc tu crées ce

Speaker A

dossier là. Un repo, tu le considères juste comme un dossier. Donc ici, on a un dossier EASIS CV EASSAS Pro. Je vais aller sur mon GitHub, je vais faire create repository. Le repository, je vais l'appeler CV Easyas Pro. D'accord ?

Speaker A

et je vais tout simplement cliquer sur create repository. Et là, c'est bon, je viens de créer le repo. D'accord ? Donc là, je peux tout simplement venir ici, je vais revenir sur mon antiravity et je vais lui dire euh push le code. D'accord

Speaker A

? Ou bien je vais lui dire pousse, c'est pareil. Pousse ou push, c'est pareil.

Speaker A

Pousse le code sur mon GitHub sur ce ripo. D'accord ? et je lui donne le nom du repo. D'accord ? Ici, normalement, je l'ai appelé comment ? Ouais, je l'ai appelé cvasisas.pro.

Speaker A

Donc c'est bon. Donc qu'est-ce qu'il va faire ? Lui-même ? Il va faire les commandes. D'accord ? Donc sinon, j'aurais juste pu venir ici et je vais faire git git ad, git commit, git push.

Speaker A

Mais je dois aussi faire git ad origine. Donc ça c'est des choses que qui sont un peu comme laisse-le faire le travail.

Speaker A

D'accord ? Et on va voir un peu donc git init. Donc tu as vu, il a fait un guit init, il a fait un git ad. Donc ici, comme tu as vu en fait, il a échoué, il a pas pu pousser le code tout simplement

Speaker A

parce qu'il y a eu un conflit entre le mon guitub que j'utilise généralement, mon guitub que j'utilise pour mes projets et le nouveau guitub que je viens de créer parce que lui il est en train de pousser ça comme tu as vu sur

Speaker A

euh Amadoufal, d'accord ? Alors que moi sur le guitub que j'ai créé, l'identifiant du GitHub, comme tu peux le voir, c'est BAPS Amado Z0. D'accord ?

Speaker A

Donc je vais lui dire tout simplement donc je vais même faire un vocal plus rapide. Donc l'identifiant du GitHub que je viens de créer c'est pas Amadoufal, c'est ça.

Speaker A

Et là je vais lui dire Baps Amado0 P. Donc là il va un peu trouver le l'identifiant qu'il doit utiliser pour faire le le push. Voilà. Donc là ce qu'il est en train de faire, il est en train de pousser le code. Comme tu peux

Speaker A

le voir, il a poussé sur une branche main. Donc bon, la branche c'est tout simplement en fait, on va dire que ton dossier c'est un arbre et il y a plusieurs branches. Donc la main c'est la branche principale où il y a le code.

Speaker A

Donc il y a pas vraiment besoin de comprendre tout cela. Mais là l'a fait pour toi, il a posté ton code avec succès sur Github. Donc là quand je reviens sur mon GitHub, d'accord, je vais actualiser. Ici, on a notre

Speaker A

repository. Je clique dessus CV Easis SAS Pro. Donc tu peux voir que le code, il est maintenant là. Donc tous ces codes que tu vois là, c'est le même code qu'il y a ici. D'accord ? Donc c'est ce

Speaker A

même code qui a été poussé sur internet sur mon répertoire Github. D'accord ? Et maintenant c'est ce GitHub là que je vais connecter à mon versel. D'accord ?

Speaker A

Pour pouvoir faire le déploiement du site. Donc maintenant je vais aller sur Versel et je vais ouvrir un compte Versel. Donc là je suis surel.com.

Speaker A

D'accord ? Donc c'est ici qu'on va mettre notre site pour qu'il soit maintenant disponible en ligne une fois que notre code est sur GitHub. D'accord, je vais venir, je vais faire signup pour créer un compte. D'accord, je vais faire

Speaker A

I'm working as a personal assistant. Donc tout ça, on l'a déjà fait hein. Donc c'était déjà fait dans dans le module 1. Donc là, je vais me connecter avec Google. Donc là, je me connecte avec Google. Je fais continuer et

Speaker A

normalement, j'aurai accès à mon compte Versel. Donc ici, il me demande un code de de validation. Donc là, il va vouloir valider mon numéro de téléphone. Donc là euh j' mets juste mon numéro de téléphone. Bon, que je vais flouter. Et

Speaker A

là, je vais recevoir un un code. D'accord ? Je mets le code. D'accord ?

Speaker A

Donc tu mets le code et là on va avoir accès à notre versel. Donc là, on a créé un compte Versel. D'accord ?

Speaker A

Ici, donc j'actualise. Donc, c'est bon là. Donc là, comme tu as vu, je suis connecté. D'accord ? Maintenant, ce que je vais faire, je vais faire euh ajouter un nouveau projet. D'accord ? Je fais ajouter un nouveau projet et ici, en

Speaker A

fait, le projet, je peux l'importer directement de mot GitHub. D'accord ? Donc, il y a GitHub, il y a GitLab, il y a Bitbcket, c'est pareil, c'est des c'est des concurrents de GitHub. Ils font à peu près tous la même chose.

Speaker A

Donc, je vais faire continue with GitHub. Donc, je vais importer le code qu'on a sur mon GitHub. D'accord ? Ici ça va me demander l'autorisation. Je fais autoriser Versel à être connecté à mon GitHub. Donc une fois qu'on fait ça,

Speaker A

ce qui se passe c'est que ici je peux sélectionner un un repository. D'accord ? Donc une fois que j'ai fait ça, ce que je vais faire, c'est que je vais cliquer sur install. D'accord ? Ici je vais venir

Speaker A

ici, je vais faire install. Ça va installer verel sur mon GitHub. Et là, tu peux voir ça, c'est le projet que j'ai sur mon GitHub. Donc c'est ce projet-là, CV Easy SAS Pro. Maintenant, il est là. Je vais tout simplement faire

Speaker A

import. D'accord ? et je vais faire deploy. Donc une fois que je fais deploy, qu'est-ce qui se passe ? Versel va aller prendre ce projet là. D'accord ? Il va faire un build. Donc il va créer comment dit ? Il va prendre le projet et

Speaker A

il va construire le site qui sera en ligne. Maintenant Versel, ils ont ce qu'on appelle un plan gratuit. Donc ça c'est gratuit, il te donne un lien gratuit que tu peux partager. Je vais faire continuer to dashboard. D'accord ?

Speaker A

Et là, normalement il est en ligne. Donc quand je clique sur ce lien là, cisasisas.pro.versel.appap.

Speaker A

D'accord. Là maintenant, il est en ligne. D'accord ? Et en fait, ça c'est mon lien que tu peux c'est le lien que tu peux partager avec qui tu veux, d'accord ? Si tu le partages avec tes amis ou bien tu le mets sur ton

Speaker A

Facebook, ton WhatsApp, ton Instagram, peu importe. Quand les gens cliquent dessus, ils vont arriver sur ton site.

Speaker A

Donc c'est un peu comme ça qu'on met son site en ligne. Maintenant, pourquoi il est intéressant de passer par GitHub pour le connecter à mon Versel au lieu de prendre directement mon code et de le mettre sur Versel ? Déjà, comme je t'ai

Speaker A

dit, les avantages de GitHub, je te l'ai déjà expliqué, mais en plus de cela, je peux mettre en place ce qu'on appelle un CICD, donc un continuous continuous integration et continuous development, donc du développement continu et de l'intégration continue. Ce qui fait que

Speaker A

quand tu fais un changement sur ton code, d'accord, quand tu mets à jour ton site, tu n'es pas obligé de repasser par toutes ces étapes là, d'accord ? Je vais te montrer. Donc disons que ça c'est mon site qui est actuellement en ligne. Ici

Speaker A

en haut, on a Open for Ventures. Donc je je veux pas de Open for ventures. Je veux faire par exemple disponible pour partenariat et ça je veux changer cette icône là. Donc je reviens sur mon projet hein, sur mon anti Gravity et je lui

Speaker A

fais juste un message. Je lui dis donc sur la herosection, d'accord ? Sur la pil en haut, la pilse principale de la aérosection, tu peux voir qu'on a du texte open. Euh on a mis le texte open for new ventures. Je veux pas de ça. Je

Speaker A

veux qu'on mette par exemple disponible pour nouvelle opportunité. Et il y a le l'icône sparkle. Je veux pas de cette icône-là, mais par exemple euh une icône d'une mallette de travail, d'une valise et cetera. Donc euh fais-moi ça, s'il te

Speaker A

plaît. Donc ici, je lui demande de me faire un changement comme d'habitude. D'accord ?

Speaker A

Donc on attend qu'il fasse le changement et on va voir un peu s'il a bien changé en local, d'accord ? Sur notre ordinateur. Donc là, il a dit que c'est fait. Donc je vais lui dire de démarrer le projet. Donc démarre le projet pour

Speaker A

que je puisse voir cela en local s'il te plaît. Donc quand quand on dit en local, c'est vraiment voir les changements directement sur mon ordinateur avant de les mettre en ligne. Il faut toujours vérifier quand tu fais une nouvelle

Speaker A

modification avant de le mettre sur ton GitHub. D'accord ? Bien vrai que même si tu le mets sur ton GitHub, tu pourras revenir en arrière, mais c'est toujours bien de le faire. Et là, tu as vu, il a

Speaker A

fait juste un npm run dev. Donc là euh on attend qu'il termine et là il va nous donner un lien. On va juste cliquer dessus et on va voir le résultat. Donc voici le résultat. Comme tu as vu, il a

Speaker A

mis disponible pour nouvelle opportunité. D'accord. Donc ça c'est cool. Maintenant, on a fait ces changements là. Je veux mettre cela en ligne parce que ça c'est la version qui est en ligne actuellement. La version qui est en ligne, il y a new ventures,

Speaker A

d'accord ? Alors que la version que j'ai sur ma machine euh elle elle est elle est, on va dire, elle est beaucoup plus élaborée parce que la version qui est sur ma machine, on a changé cela.

Speaker A

D'accord ? Ce qu'on va faire, on va mettre cela sur GitHub. Donc je vais lui dire mets les mets à jour le GitHub tout simplement. Mets à jour le GitHub. Ce qu'il va faire, il va faire un git ad

Speaker A

point, il va faire un git commit avec un message et il va faire un git push pour pousser nos changements sur le git hub.

Speaker A

Donc regarde un peu ce qui se passe. Il fait un git ad, tu as vu ? Git commit.

Speaker A

Le message c'est style update error badge, icon and text et git push. Et là, il l'a mis sur mon GitHub. Et là, si je reviens ici sur mon GitHub, d'accord, tu as vu le dernier commit, c'était il y a

Speaker A

15 minutes. Quand je vais actualiser, tu vas voir que maintenant le dernier commit date de maintenant. D'accord ? Et ça c'est les deux commits qui ont été faits quand je clique dessus. Donc ça c'est les deux commits. Donc le style,

Speaker A

update, errow, badge, icon and text. C'est ça que je viens de faire aujourd'hui. Donc c'est ça un commit.

Speaker A

D'accord ? Et ici maintenant quand je reviens sur mon SAS, d'accord ? Tu vas voir que qu'est-ce qui s'est passé. En fait, j'ai juste mis à jour le GitHub, mais le site en ligne il est déjà à jour. Quand je vais actualiser, tu vas

Speaker A

avoir disponible pour nouvelle opportunité tout simplement. Pourquoi ? Parce que ton Versel il watch c'està-dire qu'il regarde toujours ton Ripo, ton GitHub. Une fois que tu les as connectés, à chaque fois que tu vas faire un changement sur ton GitHub, ton

Speaker A

site va automatiquement se mettre à jour. Ce qui fait que quand tu fais des changements maintenant, tu as juste à dire à l'ordinateur "Mets à jour le GitHub." Il va mettre tes changements sur le GitHub et euh Versel va regarder

Speaker A

qu'il y a eu un changement, un nouveau commit. Il va faire un build, d'accord ?

Speaker A

Il va faire un nouveau déploiement comme tu as vu ça. Ça, c'est le nouveau déploiement il y a eu il y a 8 secondes et il va mettre à jour ton site. Donc c'est un peu comme ça qu'on crée un site

Speaker A

et qu'on le met à jour avec GitHub. Donc félicitations, ta première application, ton premier site est en ligne et on a mis en place un environnement de continuous integration et de continuous développement. D'accord ? Tu as vu, c'est un peu fancy. D'accord, c'est un

Speaker A

peu pro, tu vois geek quand on le dit comme ça. Mais c'est c'est ça qu'on a fait, c'est du CICD et le site maintenant, il est disponible par n'importe qui dans le monde entier. Tu peux ouvrir cees liens sur ton

Speaker A

téléphone, l'envoyer par WhatsApp, partager sur LinkedIn, ça marche. Tu viens de déployer ton premier projet sur internet avec le Vipe coding sans écrire une seule ligne de code toi-même. Et maintenant, ça c'est un nom euh que nous a donné Versel, mais on peut mettre

Speaker A

notre propre nom de domaine. D'accord ? Si tu veux mettre si je voulais par exemple utiliser amadofal.com, je peux acheter ce nom de domaine là. Je vais sur Versel. D'accord ? Ensuite donc je peux aller sur le projet, d'accord ? Il

Speaker A

y a ici domains, je peux cliquer sur le plus ici. D'accord ? Et je peux tout simplement cliquer sur buy pour acheter un nouveau nom de domaine. Je vais voir si amadou F par exemple amadoufil.com par exemple amadufal.com il existe, il

Speaker A

coûte 12 dollars, c'est moins de 10000 francs. Je vais pouvoir l'acheter directement avec Versel avec ma carte bancaire et il sera directement connecté à mon projet et comme ça quand les gens vont taper à modoufal.com, ils seront redirigés sur mon projet là, d'accord ?

Speaker A

en ligne. Donc c'est un peu comme ça que cela se passe. Donc voilà, on arrive à la fin du module 3. Et là, tu peux vraiment être fier de toi. Tu as créé une landing page complète pour une

Speaker A

entreprise fictive en partant de zéro avec juste un prompt. Tu as appris le vibe coding loop, donc créer, regarder, ajuster et répéter. Donc on a fait des modifications et cetera. Tu as créé un CV en ligne professionnelle personnalisé. Tu as compris GitHub ce

Speaker A

que c'est, pourquoi c'est important les commandes de base, donc git ad, git commit, git push. D'accord ? tu as connecté ton projet à GitHub et tu as poussé ton code. Donc tu as pushé ton code, tu as déployé ton CV en ligne avec

Speaker A

Versel et tu as un vrai lien accessible que tu peux partager avec tes amis et tu as vu le déploiement automatique. Donc tu modifies, tu pousses et c'est à jour.

Speaker A

Donc c'est le CCD en ligne, c'est réel, tu n'es plus un consommateur, tu es un créateur de fonctionnalité de de solution. D'accord ? Maintenant pour le module 4, on va parler de sécurité.

Speaker A

Avant d'aller plus loin dans la création des s avec des utilisateurs et des données, il faut qu'on parle des bonnes pratiques de sécurité. On va voir les erreurs à éviter. Comment protéger ton application et comment faire un audit de

Speaker A

sécurité. C'est pas le sujet le plus exécutant mais c'est ce qui va séparer un projet amateur d'un projet professionnel. Donc on va bientôt se retrouver dans le prochain module de Easis. Bravo à toi si tu as suivi la

Speaker A

formation jusque- là. Regarde ce que tu viens de faire. tu as un CV en ligne, une landing page en ligne et tu as pas écrit une seule ligne de code.

Speaker A

Maintenant, tout ce que tu vois dans cette formation gratuite, ce n'est que le début dans le programme pro de Easis.

Speaker A

C'est là où on construit de vrais business, les paiements mobile money, les API, le marketing pour trouver tes 1000 premiers clients en l'espace de 30 jours et tu as aussi accès au logiciel Easy SAS que j'ai développé pour t'aider

Speaker A

à trouver ton idée de SAS, valider si ça va marcher et générer tous les documents pour lancer vite ton projet. Donc tout est dans la description si tu es intéressé. Je te laisse continuer ta vidéo. Alors salut et bienvenue dans le

Speaker A

module 4 de cette formation. Donc avec un bon petit café, on va parler d'un sujet très important. Donc aujourd'hui, on va parler de sécurité. Et je sais que c'est pas le sujet le plus excitant. Toi ce que tu veux, c'est que tu veux créer

Speaker A

des s, lancer des s, tu veux lancer des produits, tu veux gagner de l'argent.

Speaker A

Mais la sécurité c'est la base. Ça semble être un truc de technicien paranoïque et cetera, mais laisse-moi te dire un truc. Si tu lances un sas sans sécurité, c'est comme si tu ouvrais une boutique et que tu laissais la porte

Speaker A

grande ouverte la nuit. Tes clients te font confiance quand tu crées un ça. Tes utilisateurs te font confiance et te donnent leur email, leur mot de passe, parfois même leurs informations de paiement. Et si quelqu'un accède à tout

Speaker A

ça, s'il est mal intentionné, déjà c'est fini. Tes clients perdent la confiance, tu perds ta réputation et dans certains pays, tu peux même avoir des problèmes légaux. En Afrique, c'est encore plus sensible. Donc si ton ça gère du mobile

Speaker A

money et que quelqu'un accède aux transactions de tes clients, bah c'est l'argent des gens et c'est pas un jeu.

Speaker A

Maintenant la bonne nouvelle c'est quoi ? 80 % des problèmes de sécurité dans les apps créées avec le vibe coding viennent généralement de cinq erreurs.

Speaker A

Donc cinq instoute facile à corriger. Et si tu corriges ces cinq choses, tu es déjà en avant sur la majeure partie des gens qui font du vibe coding. Maintenant je dis il y a aucune app n'est pas à

Speaker A

câble. Tous les apps, touses les applications que tu vois, que ce soit les grandes applications YouTube, Facebook, il y a aucune application qu'on ne peut pas hacker. La seule chose à faire, c'est de tellement protéger ton application que la personne qui voudrait

Speaker A

hacker ça ne vraiment en fait, il va pas se fatiguer parce que ce serait tellement difficile de pénétrer et de hacker ton architecture. Donc nous, c'est ça qu'on va faire avec nos appoding et on va voir généralement quelles sont ces cinq erreurs. Donc

Speaker A

premièrement, on a les variables d'environnement et les clés à pays exposées. Deuxièmement, on a ce qu'on appelle le row level security que qui manque sur les bases de données.

Speaker A

D'accord ? Troisièmement, on a la validation uniquement côté front et pas côté serveur. Ça aussi c'est une faille.

Speaker A

4è faille, on a les packages inventés ou obsolè lorsque tu crées ton app. et cinquèmement, on a une authentification incomplète sur les routes. Donc généralement, si tu corriges ces cinq choses là, d'accord, tu es quand même en avance sur les gens. Et on va couvrir

Speaker A

chacune de ces erreurs en détail. Mais d'abord, il faut comprendre comment les différentes parties de ton application communiquent entre elles, parce que c'est là souvent que les failles se trouvent. Donc, comment le front, le back et la base de données

Speaker A

? Donc, on a parlé de ça tout à l'heure, d'accord ? Donc le front end, c'est tout simplement ton navigateur. D'accord ? Le back end c'est ton serveur, c'est là où se fait le traitement de données et cetera. Et la base de données, c'est là

Speaker A

où est stocké toutes tes données. Donc avant de parler de faille, il faut comprendre comment tout cela se parle.

Speaker A

C'est fondamental. Donc rappelle-toi de l'analogie de du restaurant du module E que je t'avais donné du module 1. Le front end c'est la salle, le back end c'est la cuisine et la base donné le frigo et la PI c'est le serveur qui fait

Speaker A

les liens entre tous ces ces gens-là. D'accord ? Donc quand un utilisateur clique sur un bouton sur ton SAS, voici ce qui se passe concrètement. Donc le navigateur euh de l'utilisateur, donc le front end, envoie une requête au serveur

Speaker A

qui est le back end. Cette requête passe par internet, donc n'importe qui peut potentiellement intercepter cette requête-là. Donc deuxème chose, le serveur reçoit la requête, la traite et parle à la base de données pour lire ou écrire des informations. Donc le serveur

Speaker A

a besoin de credentials d'identifiant pour accéder à la base de données. C'est un peu comme la clé du frigo. Donc le serveur ne peut pas tout simplement aller dans n'importe quelle base de données, écrire. Sinon bah n'importe quel serveur pourrait écrire dans

Speaker A

n'importe quelle base de données. Donc il faut un peu une clé que le serveur ouvre utilise pour pouvoir ouvrir ton frigo par exemple qui est la base de données pour mettre des informations dedans. Ensuite la base de données va

Speaker A

répondre au serveur d'accord en lui donnant des informations et le serveur envoie la réponse au navigateur et ensuite le navigateur va tout simplement afficher le résultat à l'utilisateur. Et chaque étape de ce processus est un point potentiel d'attaque. Chaque

Speaker A

communication a besoin de ce qu'on appelle des clés, des tokens, des autorisation. Si une de ces clés est exposée, c'est comme si tu laissais la clé du frigo sur la table du restaurant.

Speaker A

N'importe servir. Donc maintenant, on va parler des clés, surtout des clés que tu vas utiliser dans ton sas. Tu vas avoir plusieurs types de clés. Ça dépend de la taille de ton projet. Moi, j'ai des projets avec, je sais pas moi, une

Speaker A

trentaine de clés différentes pour différents services. Donc, d'abord, on a la clé API Superbase parce que on a dit qu'on va utiliser Superbase dans nos applications. On aurait pu utiliser autre chose. On aurait pu utiliser Neon, on aurait pu utiliser Railways database.

Speaker A

En fait, il y a plein d'alternatives. Il y a on aurait même pu utiliser Firebase.

Speaker A

C'est juste que je trouve que Superbase, c'est l'un des outils quand même assez gratuits, facile à connecter. Il est plus complet surtout pour les débutants, mais il ne reste pas moins très puissant. Il y a de grosses sasses qui

Speaker A

génèrent des millions chaque mois, ils utilisent Superbase. Donc la clé à payer SP base, c'est ce qui permet, c'est la clé qui permet à ton application de parler à ta base de données qui est sur SUbase. Et il y a deux types de clés.

Speaker A

Donc il y a la clé anon qui est une clé publique. D'accord ? C'est c'est une clé que le navigateur voit, d'accord ? C'est par design. Par design, c'est comme ça, tu ne peux rien. C'est des choses qui

Speaker A

sont publiques par défaut, d'accord ? Et il y a ce qu'on appelle la clé service rôle. et c'est une clé privée qui donne accès à tout. Donc si quelqu'un a accès à ta clé service rôle, il peut lire, il

Speaker A

peut modifier et il peut supprimer tous les éléments de ta base de données. D'accord ? Ensuite, on a les tokens d'authentification.

Speaker A

Donc quand un utilisateur se connecte, il reçoit ce qu'on appelle un token. C'est comme un bracelet dans un club, d'accord ? Quand tu rentres dans un club, on te donne un bracelet et tant qu'il a le bracelet, il peut accéder à

Speaker A

des zones autorisées. Donc si quelqu'un vole le bracelet, il accède au compte de l'utilisateur tout simplement. Euh je sais pas si tu as remarqué, des fois tu tu te connectes sur un site, d'accord, sur ton navigateur. Euh même si tu

Speaker A

fermes ton navigateur, tu pars faire autre chose quand tu reviens sur le site, généralement il te demande pas de te reconnecter automatiquement. D'accord ? Pourquoi ? Et comment il fait ça ? Il fait ça grâce à ce token là. D'accord ?

Speaker A

Parce que lorsque tu te connectes, le site envoie sur ton navigateur ce qu'on appelle un token. Et ça, ça te permet de toujours avoir accès sur le site, d'avoir accès à ton compte, d'avoir accès à certains services même mais et

Speaker A

il te déconnecte pas automatiquement. D'accord ? Si tu n'avais pas ce token là, bah dis-toi que chaque fois que tu viendrais, tu devrais te reconnecter.

Speaker A

Mais après, comment il réussit à faire ça ? Il fait ce qu'on appelle de la persistance. Donc il persiste le token.

Speaker A

Et il y a plusieurs manières de le de persister en token. D'accord ? on peut persister un token sur du redis, d'accord ? Donc sur euh bon après on va parler de redis plus tard, il peut le persister sur ton navigateur directement

Speaker A

parce que les navigateurs, ils ont des mémoires. Donc il y a plein de manières.

Speaker A

Donc dis-toi qu'en fait ton token, c'est tout simplement que disons que tu vas dans un club, tu tu payes, on te donne la carte d'accès. Ton token c'est la carte d'accès pour accéder au site. Donc si quelqu'un vole ta carte d'accès, bah

Speaker A

il pourra accéder là où tu devrais normalement pouvoir accéder. C'est pour ça, il est très important de sécuriser cela. Ensuite, on a les différents API, d'accord ? Donc on a des API, des services externe que tu utilises. Par

Speaker A

exemple, si euh sur ton app, tu veux mettre de l'IA, d'accord ? Tu veux le connecter à chat GPT, il y a une clé chatt. Par exemple, si tu veux connecter ton site à Stripe, il y a une clé Stripe

Speaker A

pour les paiements. Euh, il y a une clé pour envoyer des emails. D'accord ? Si tu utilises un service qui envoie des emails, il y a une clé pour envoyer des SMS. Donc chaque service généralement que tu vas utiliser et que tu veux

Speaker A

connecter à ton site va utiliser ce qu'on appelle une clé, une API key. D'accord ? Donc et si quelqu'un a ta clé stripe par exemple, il peut potentiellement accéder à tes transactions. Et c'est pour ça qu'on a ce qu'on appelle les variables

Speaker A

d'environnement. Donc les variables d'environnement, c'est un système qu'on met en place pour garder toutes ces clés là en sécurité loin du code visible. Et c'est là la première erreur qu'on va corriger. Tant que tu utilises des variables d'environnement, aucun je dis

Speaker A

aucun hackeur, peu importe à quel point il est fort, ne pourra jamais accéder à tes clés à pays, à tes clés de de services et cetera. D'accord ? Donc c'est la première chose qu'on va corriger. Donc le variable

Speaker A

d'environnement généralement c'est tout simplement un fichier. Maintenant je vais t'expliquer le problème exact et comment le la variable d'environnement résout ce problème. D'accord ? La première heure, généralement ce que ce que les gens qui font des du coding

Speaker A

font, c'est que leurs variables d'environnement sont exposées dans le code. Donc beaucoup de gens, surtout des débutants en Vipe coding, ils vont mettre leur clé d'API directement dans le code. Et il y a même le fait souvent elle écrit quelque chose comme constase

Speaker A

qui escl Donc ça par exemple ça peut être ta clé super base. va être directement disponible dans un fichier JavaScript sur ton navigateur et c'est comme si tu écrivais ton mot de passe sur le la le pare-brise de ta voiture et

Speaker A

que tu sortais dehors le mot de passe de ton appart de ton téléphone, je sais pas quoi, les gens auront le mot de passe de ton téléphone. Et c'est la même chose si tu mets par exemple tes clés à payer

Speaker A

directement dans le code. C'est une très mauvaise idée. Et pourquoi c'est dangereux ? C'est parce que ton code front-end est visible par tout le monde.

Speaker A

N'importe qui peut ouvrir les outils développeurs de son navigateur et aller directement dans l'onglet source. Il peut lire tout ton code JavaScript, il peut voir si ta clé API est là, si elle est exposée et même pire. Les hackeurs

Speaker A

savent que beaucoup de gens utilisent NextJs. Donc ils vont chercher dans le code des variables qui commencent par Next Public. En fait, c'est un préfix standard quand tu crées un site avec NextJs qu'on utilise nous dans le dans

Speaker A

le code qui va générer, il y a ce qu'on appelle le Next public, d'accord ? Et le next public, c'est c'est généralement c'est un préfix standard, d'accord ? Et généralement ta clé sensible, des certaines I ils font ça, ils mettent ta

Speaker A

clé à côté d'une ex public et elle est visible par le monde entier. Maintenant, je vais je vais te je vais te montrer un peu ça en action. Donc disons que là, moi je suis sur un navigateur. D'accord

Speaker A

? Je vais aller tout simplement sur google.com. D'accord ? Tu vas voir quelque chose. En fait, si je vais sur google.com, même google.com, si j'ouvre le navigateur là, d'accord, je fais inspecter. Là, c'est le code de Google tout simplement, mais c'est du code

Speaker A

front end, d'accord ? Et je peux faire énormément de choses dessus. Donc, disons que je vienne sur Google et au lieu de faire par exemple mode IA, je veux qu'il écrive par exemple mode Amadou. Donc, généralement directement dans mon extension, je vois le texte, il

Speaker A

est là. Bah, je fais euh par exemple mode Amado, d'accord ? Et là, comme tu peux le voir, je suis sur google.com mais j'ai quand même fait une petite modification du bouton Google. D'accord ? Bon, je t'explique, c'est pas aussi

Speaker A

simple que ça. On va dire que ça ça n'existe juste que dans sur ma machine.

Speaker A

Mais en fait, en ouvrant ici, en faisant inspecter, les gens recherchent ici les clés de ton API parce que généralement certains il y a de vibe coding, ils vont mettre cela ici. Par exemple, ils vont venir au niveau de ton site ici, ils

Speaker A

vont rechercher quelque chose, ils vont voir quelque chose comme par exemple next public, d'accord ? Et après, il y aura par exemple un code, d'accord ? et ils savent qu'ils peuvent tout simplement copier ça. C'est ce sera la

Speaker A

clé de tes API ou bien la clé de ta base de données et ils pourront accéder à ta base de données directement juste en faisant un simple clic droit inspecter.

Speaker A

Ça c'est une des erreurs de débutants que beaucoup de gens ils font et et que l'IA a fait tout simplement. Mais si tu ne lui dis pas de le de de ne pas le faire et certains le font et ça c'est

Speaker A

quelque chose à vraiment gérer dès le départ. Deuxième chose, il y a par exemple les clés API, les clés API qu'on utilise euh directement dans les actions. Par exemple ici, quand je clique sur ce bouton là, il y a

Speaker A

généralement une action qui se fait. Généralement sur NextJs, quand tu cliques sur un bouton, il y a forcément quelque chose qui se passe. D'accord ?

Speaker A

Donc par exemple, là on a un bouton. Donc ça c'est le bouton de Google.

Speaker A

D'accord ? Et on clique. D'accord ? Par exemple ici, il y a JS action mais généralement sur Nextgs, on a par exemple un onclick. Et après sur ce on click, ça veut dire quand tu cliques dessus, qu'est-ce qui se passe ?

Speaker A

Généralement, on donne par exemple, je fais on click, je fais égal. Généralement, il y a il y a une fonction. D'accord ? Donc généralement il y a une fonction et dans cette fonction là on aura quelque chose qui

Speaker A

fait par exemple on on va lui dire par exemple fais quelque chose et derrière il y aura ta base de données. Donc par exemple envoie cela à euh à à l'IA pour qu'il gère ça mais tu tu dois lui donner

Speaker A

ton code IA et généralement il va le mettre directement ici sur le front et chacun n'importe qui peut venir et regarder ce que tu fais. Et je te dis, il y a aucun site au monde qui peut cacher son front end. C'est pas

Speaker A

possible. D'accord ? Après, il y a un technique qui permet d'un peu cacher ça, mais tu pourras jamais le cacher à 100 %. Les gens pourront toujours voir ton front end. Et ça, c'est pas vraiment grave, d'accord ? Parce que ce qu'il

Speaker A

faut vraiment sécuriser, c'est le back end parce que généralement tout ce qui est clé, variable d'environnement et cetera, on ne les stock jamais dans le front end. Donc ça c'est une des premières erreurs. Donc j'espère que tu comprends un peu, d'accord, ce que je

Speaker A

viens de t'expliquer. Maintenant là, on est tout simplement dans la théorie. Vraiment fixer ça, ce sera très facile, ne t'inquiète pas. Juste que j'aimerais que tu comprennes exactement ce que tu fais, ce qui se passe. D'accord ? Donc

Speaker A

ça c'est une des failles. Donc quand tu mets directement ton code ici, d'accord ? Tes clés à payer ici. Mais il y en a des gens qui font encore pire. Par exemple dans le module dernier, qu'est-ce qu'on a fait ? On a écrit

Speaker A

notre code et on a poussé notre code sur GitHub. Bah dis-toi que si tu pousses ton code sur GitHub sans faire attention, tu vas en même temps pousser tes clés qui sont dans le code et seront visible sur ton GitHub. Et même si tu

Speaker A

les supprimes après, l'historique de Git garde tout. Donc des bottes vont scanner ton GitHub en permanence à la recherche des clés exposées. Qu'est-ce que je veux dire par là ? Donc là, il faut savoir que GitHub de base, d'accord, c'est un

Speaker A

repository. Donc en fait, GitHub, on va dire que c'est euh une librairie géante de code et de projet. et il y a des projets qui sont euh et il y a des projets qui sont publics et il y a des

Speaker A

projets qui sont privés. Donc ici par exemple, lui il a un projet qui est public. D'accord ? Donc quand je clique ici, donc là je peux voir tout le code de son projet tout simplement parce qu'il l'a mis en public. D'accord ? Donc

Speaker A

généralement ici dans le code, s'il ne fait pas attention, il va mettre ici en même temps ses mot de passe. Et s'il met ici ses mot de passe, je peux venir ouvrir n'importe quel fichier. D'accord ? voir que ah ok, ce mot de passe c'est

Speaker A

ça, bah je vais tout simplement copier son mot de passe et je pourrais avoir accès à ces données, à ses à à sa base de données, à ses API et cetera.

Speaker A

Généralement, c'est très facile à régler. C'est il faut juste que lorsque tu vas par exemple créer une nouvelle repository, au lieu de la mettre en public ici, tu la mets en privé.

Speaker A

D'accord ? Si tu la mets en privé, seulement toi pour avoir par exemple ton code et ce que contient ton code.

Speaker A

D'accord ? Et si tu le mets en public, bah n'importe qui pourra avoir accès à ça. Mais même si tu le mets en public, tu peux utiliser ce qu'on appelle le git ignore. Donc le git ignore, c'est tout

Speaker A

simplement un fichier qui permet de dire à Git quand tu pousses mon code, pousse ça mais ne pousse pas ça. Donc là, on va je vais te montrer un peu. Donc là, je vais revenir sur le le code qu'on avait.

Speaker A

Donc ça c'est un peu le projet qu'on avait, donc le site de CV qu'on avait fait. D'accord ? Tu peux voir que il y a un fichier ici qui s'appelle git ignore.

Speaker A

Et quand je clique sur git ignore, en fait, il lui dit d'ignorer plein de choses. D'accord ? Il lui dit d'ignorer les logs, il lui dit d'ignorer les node modules. Donc les node modules, c'est quoi ? C'est un dossier avec plein en

Speaker A

fait ça c'est les packages. Donc on on parlera de package tout à l'heure. Donc dans le dossier de notre module, tu vas voir tous les outils qu'utilisent ton site pour fonctionner, d'accord ? Pour avoir des capacités. Mais ça, tu n'as

Speaker A

pas besoin de l'avoir, d'accord ? Ça c'est des packages déjà installés et généralement ça ça c'est ça pèse très lourd. D'accord ? Donc pour régler ce problème-là, ce qu'on a fait, on va on a créé ce qu'on appelle un package. Donc

Speaker A

dans le package. Jason, c'est un peu comme une carte d'identité de ton projet. Donc ça va dire comment s'appelle ton projet ? Est-ce que ce projet il est privé ? Donc oui, il est il est privé. C'est quoi le type de

Speaker A

projet ? Quels sont les scripts pour pour faire marcher le projet ? et quels sont les dependencies ? Donc de quoi dépend ton projet ? Donc on peut voir que mon projet actuellement, il dépend de ça, de GSAB, de Tailwin, CSS, de ça.

Speaker A

D'accord ? Et par exemple celui-là, je l'ai installé à cette version là. D'accord ? Donc généralement, quand je donne mon code à quelqu'un, je n'ai pas besoin de lui donner les node modules.

Speaker A

Si ça, les pag.json, il va juste faire une commande qui s'appelle npm install. Donc il vient ici, il fait npm install et fait entrer. Et tu verras qu'en fait il aura. Bon après moi je les ai déjà déjà installés c'est pourquoi tu vas

Speaker A

voir que il t'as dit les packages sont déjà à jour mais si tu n'as pas les notre modus il va tout simplement les installer. Donc pas besoin de mettre ça.

Speaker A

C'est pourquoi on le met dans le git ignore qui est là. Donc le dis c'est quoi ? Le dis c'est tout simplement le fichier qui a ton code qui a été buildé.

Speaker A

Donc tout ce code-là quand tu l'envoies sur internet dans D'accord, c'est pas ça que en fait c'est pas ça que tu vois sur le navigateur, c'est ça en fait on va prendre ça, on va le builder donc on va

Speaker A

en faire une application. C'est comme quand tu vas par exemple sur Windows que tu ouvres un un un une application, tu vas voir c'est euh x.exe.

Speaker A

D'accord ? Donc ça par exemple c'est parce que c'est c'est c'est du code binaire. D'accord ? C'est une c'est une application. Donc généralement euh ici sur NextJs quand ton code il va être compressé, il va être buildé. D'accord ?

Speaker A

On va on appelle ça le build tout simplement le fait de transformer tout ce code-là en en un fichier en un en un fichier exécutable. Donc ça ça s'appelle le dis qui est là. Donc ça aussi on ne

Speaker A

le pousse pas. Généralement ça on le fait juste pour tester en local pour voir notre site en local voir si tout se passe bien et cetera. Maintenant généralement ce qu'on fait d'accord je vais te montrer la solution. Donc ça,

Speaker A

comme je te l'ai dit, c'est le guit ignorant. Tout ce que tu vois ici, c'est des choses qui ne seront pas poussées par Git lors d'un push. Donc quand je lui dis fais un push, il va poucher ça,

Speaker A

il va poucher ça, tous ces documents là. D'accord ? Mais si je veux par exemple, si je ne veux pas qu'il push le index.html, ben je vais aller dans git ignore, je vais venir ici en bas et je

Speaker A

vais écrire index.html. Donc c'est aussi simple que cela et si je fais ça, bah la prochaine fois qu'il fait un pouce, il va jamais pousser index.hthtml. Donc si tu comprends ça, tu vas comprendre un peu la solution qu'on a apporté à ça. Donc la solution

Speaker A

s'appelle le fichier inval. Donc le fichier local, c'est tout simplement un fichier que je vais utiliser en local.

Speaker A

Et dans ce fichier là, c'est dans ce fichier que tu vas mettre toutes tes clés. Donc la clé de ta base de données.

Speaker A

Donc tu vas la mettre dans ce qu'on appelle une variable. Donc disons que ta base de données, c'est sur Superbase. Tu vas appeler par exemple Superbase service r key. Tu peux l'appeler ce que tu veux hein, ça c'est juste une manière

Speaker A

de nommer mais tu peux l'appeler comme tu veux. Tu fais égal et là tu mets ton ton ta clé. Pour le stripe aussi c'est pareil, tu fais Stripe secret key par exemple, tu fais égal et là tu mets ta

Speaker A

clé. Et ce que ça fait ça veut dire que en fait ce fichier là il ne sera disponible qu'en local, d'accord ? Et généralement le fichier pointf, on l'ajoute dans le guit ignore donc il ne sera jamais poussé. D'accord ? Donc il

Speaker A

ne sera jamais visible côté public. Maintenant, les seules clés qui seront publiques, d'accord, qui seront visibles, c'est le Next public Superbase URL. Donc ça, par exemple, quand tu vois next public, ça veut dire que c'est une clé qui sera visible sur le front et

Speaker A

c'est normal. C'est comme ça que ces applications il marchent. Ici, tu peux voir que cette clé-là où il y a public et cette clé-là, ils seront visibles sur le web. D'accord ? Mais ces deux clés là où il n'y a pas de préfix, il y a pas de

Speaker A

préfixe next public, ils ne seront jamais visibles sur le web. D'accord ? Et ici, on te dit dans git ignore, tu vas ajouter n. Et dans le code, tu vas bon, ça c'est pas très grave. C'est ça veut juste dire dans le process de

Speaker A

l'environnement parce qu'il y a deux types d'environnement. Il y a l'environnement de développement et l'environnement de production. Donc quand on dit environnement de développement, c'est tout simplement quand tu développes ton application, tu es dans l'environnement de développement et une fois que ton application il est

Speaker A

en ligne, il est dans l'environnement de production. Donc là, ce que tu fais généralement, tu viens ici sur ton projet, tu fais ajouter un fichier et tu tapes point ENV. D'accord ? Donc généralement le point ENV, c'est le

Speaker A

fichier dans lequel tu vas écrire euh tes tes codes, tes clés, tes mot de passe et cetera. Donc par exemple, il y a ici le next public URL. D'accord ?

Speaker A

Donc par exemple, ça on va dire que ça c'est l'URL de notre site. On va dire quelque chose comme ça. D'accord ? Donc on va faire par exemple easysas.com. Je dis n'importe quoi. Et là j'aurai par exemple open AI euh key. Et ici je mettrai par

Speaker A

exemple une clé. D'accord ? Et ça c'est cette clé là d'accord que mon code va utiliser généralement parce que cette clé va être stockée dans cette variable.

Speaker A

Donc généralement maintenant dans le code au lieu de voir la clé, d'accord ? Tu vas juste voir disons que ici je viens dans dans un fichier, d'accord ?

Speaker A

Donc ici, je vais mettre par exemple qui je vais mettre par exemple la clé égale la clé égale process donc le processin in d'accord donc d'environnement point open tu as vu, il l'a récupéré directement donc ça par exemple c'est la

Speaker A

clé openia qui va être stockée directement dans la clé et je pourrais l'utiliser dans mon code. Après ça, je te l'explique. C'est pas quelque chose que tu vas faire toi-même he t'inquiète pas. Juste je t'explique en fait comment

Speaker A

tu fais pour injecter tes clés et ton et et tes et tes mots de passe dans ton code sans qu'il ne soit jamais visible sur ton le navigateur. Si quelqu'un cherche, il va voir peut-être open AI key mais il ne va jamais voir par

Speaker A

exemple cette variable et c'est ça que tu veux protéger. Et même ça, si tu le mets sur ton serveur, au lieu de le mettre sur ton front, si tu utilises un serveur, tu tu le mets là-bas, bah il ne

Speaker A

sera aussi jamais visible. Donc c'est un peu comme ça qu'on utilise le le fichier d'environnement. Il est très puissant.

Speaker A

Donc généralement, lorsqu'on a un projet et qu'on veut protéger nos nos nos accès à notre base de données, on veut protéger nos clés API, parce que disons que j'ai une clé API de Open AI pour utiliser des LIA, bah si quelqu'un

Speaker A

d'autre il là, il va pouvoir l'utiliser dans son propre projet et ma facture va monter en flèche et c'est moi qui paye.

Speaker A

D'accord ? Tout simplement parce que j'ai pas pris le temps de protéger mes clés d'environnement. Donc c'est un peu ça. Donc un fichier d'environnement, c'est tout simplement un fichier spécial qui contient toutes tes clés secrées. Il n'est jamais inclus dans ton code quand

Speaker A

tu le pousses sur Github. Donc ça c'est une des premières failles et les failles les plus simples à régler. Ne t'inquiète pas, tu n'auras pas besoin de faire tout ce que je t'ai montré là, mais je veux juste que tu comprennes exactement c'est

Speaker A

quoi la faille exactement. D'accord ? Donc maintenant qu'on a vu la première faille générale que les gens font quand ils font du vibe coding, on va passer à la deuxième faille. surtout pour ceux qui utilisent Superbase, la majeure

Speaker A

partie des gens utilisent Superbase, il y a une faille qu'on appelle la faille du row level security. Donc ça c'est une faille que je vais t'expliquer. Par exemple, Superbase par design, il expose ta base de données via une API publique.

Speaker A

D'accord ? Donc il y a une API, on va dire que c'est une route, donc c'est un lien sur lequel on va pour parler à ta base de données. Il expose ça et il expose aussi une clé qu'on appelle la

Speaker A

clé annon. Donc c'est une clé publique donc c'est normal par design il est comme ça. D'accord ? Il y a pas de souci. Mais le problème c'est que si tu n'as pas le raw level security juste avec ces deux ces deux outils là

Speaker A

n'importe qui avec une URL et fait ce qu'elle veut. Elle peut lire tes données de toutes les elle peut modifier tes données, elle peut supprimer les données. En fait elle peut tout faire.

Speaker A

Donc imagine ton sas de facturation par exemple sans le road level security. Donc l'utilisateur A par exemple pour avoir toutes les factures de l'utilisateur B, il peut les modifier, il peut les supprimer en fait sans le rôle en fait le rôle level security en

Speaker A

fait ce qu'il fait c'est que il fait en sorte que chaque utilisateur ne pourra voir et ne pourra interagir qu'avec ses propres données. Si moi j'ai mon compte, je ne devrais pas pouvoir voir les informations de ton compte par exemple.

Speaker A

D'accord ? Donc ça en fait il faut savoir qu'une base de données c'est tout simplement des row, c'est tout simplement une liste et chaque liste c'est une ligne. D'accord ? Donc c'est une sécurité qu'on qu'on met en place

Speaker A

sur cette ligne là. Et ça va faire en sorte de s'assurer que toi sur ta ligne, tu pourras accéder aux éléments de ta ligne. Donc si je devais le simplifier, ça va être un peu comme ça. Mais si tu

Speaker A

n'as pas ça, bah moi je peux aller sur n'importe quelle ligne, voir ce que je veux, faire ce que je veux. et 83 % des bases de données Superbase sont exposées et ils ont un problème de row level

Speaker A

security et les outils dia créent souvent des tables d'accord des bases de données sans activer le row level security ou bien s'il l'active il n'ajoute pas de policies d'accord ce qui fait que toutes les requêtes retournent des résultats videes et ça ressemble à

Speaker A

un bug mais ça en fait c'est pas un bug c'est la sécurité qui va tout bloquer donc on va faire ça aussi d'accord je vais te montrer comment régler ça c'est juste un bouton Donc tu actives, en fait, il y a rien de compliqué. D'accord

Speaker A

? Donc le R level security, c'est le système qui dit l'utilisateur A ne peut voir que les données, d'accord ? Et ne peut supprimer que les données de l'utilisateur A. Tu vas juste sur Superbase et tu vas activer le row level

Speaker A

security sur chaque table. Et ensuite, on va juste créer des policies, d'accord, qui va définir qui peut faire quoi. Donc par exemple, pour une table facture, donc disons que sur ma base de données, j'ai plusieurs tables. Donc j'ai la table users qui montre tous les

Speaker A

utilisateurs. J'ai la table facture qui va montrer toutes les factures. Par exemple, disons que pour la table facture, tu crées une policie qui dit un utilisateur, il ne peut lire uniquement que les factures de sa table. D'accord ?

Speaker A

Donc les factures qui ont son propre de identifiant utilisateur. Donc quand l'utilisateur A demande les factures, il ne reçoit que les C et l'utilisateur B ne peut pas y accéder. Donc pour activer la roll level security, on va juste

Speaker A

aller dans notre table de bord de Superbase, sélectionner une table et cliquer sur enable errorless. Ensuite, tu crées les policies. Rien de bien compliqué. On verra cela lorsqu'on va créer une base de données. D'accord ?

Speaker A

vraiment très facile. Mais si tu ne l'actives pas, bah ça peut tout simplement mettre à l'eau tout ton travail, tout ton sas. D'accord ? Et généralement, il y avait une manière plus facile de le faire. Tu vas juste

Speaker A

dire à Lia, d'accord ? Quand il va créer une base de données, active la row level security sur toutes les tables, créer des policiers pour que chaque utilisateur ne puisse lire, modifier et supprimer que ses propres données.

Speaker A

Utilise l'authentification, l'utilisateur ID pour identifier l'utilisateur connecté. Bon bref, en fait c'est juste des choses que tu dis Al et il peut les faire pour toi mais si tu ne les pas bah et ta ton application ne sera pas sécurisée. Mais il peut pas

Speaker A

le savoir si tu ne les luidis pas. C'est pourquoi je prends le temps de t'expliquer tout ça c'est très important. Il faut ajouter ces règles là à tous tes projets. C'est non négociable. Ensuite maintenant qu'on a parlé de row level security, on va

Speaker A

passer à la faille suivante qui est la validation côté serveur. D'accord ? Donc la validation côté serveur, elle est hyper importante. Donc je vais t'expliquer un peu qu'est-ce que cela veut dire. Quand il y a créé un formulaire, par exemple, disons que il y

Speaker A

a un formulaire sur ton site, d'accord ? Et ce site sur ce site le client doit te contacter, il doit te dire quelque chose ou bien les gens qui veulent te faire un partenariat, peu importe, d'accord ?

Speaker A

Quand il y a un formulaire par exemple, d'accord ? Ou un bouton ou bien quelque chose où quelqu'un va écrire quelque chose sur ton site, elle met souvent la validation sur le front. Donc quand je dis sur le front, ça va être disons sur

Speaker A

la sur la partie front end. Donc on a parlé du front, du back et de la base de données. Donc il va mettre la validation sur le front. Donc disons que la personne doivent écrire un email.

Speaker A

D'accord ? C'est sur le front qui va se dire "OK, je vais essayer de voir si ça ce qu'il a écrit c'est un email." C'est généralement quand tu vas sur certains sites, tu veux t'inscrire, au lieu de mettre ton email par exemple

Speaker A

[email protected], tu vas mettre amodofinance.com. Il va te dire ça c'est pas un email. il a fait de la validation. D'accord ? Donc cette validation-là, tu peux le faire sur le front, tu peux le faire sur le back, mais quand tu le fais sur le front et si

Speaker A

tu le fais sur le front uniquement, il y a une faille. Donc le problème c'est que le code front end tourne dans le navigateur de l'utilisateur. Donc n'importe qui peut ouvrir la console comme je t'ai montré tout à l'heure et

Speaker A

contourner cette validation. Je te l'ai montré tout à l'heure. Et il peut même contourner ton API directement. Donc là, je t'explique par exemple, disons que je vienne ici sur Google. Donc là, je vais un peu zoomer. D'accord ? J'ouvre la

Speaker A

console. D'accord. Quand je fais une requête, généralement, d'accord, je peux aller dans euh je peux aller dans réseau et si je vais ici dans réseau, ça va me montrer tous les appels que font ce site-là quand je fais une recherche.

Speaker A

Donc par exemple, disons que euh quand quelqu'un m'envoie un message ou bien euh quand quelqu'un euh veut venir travailler avec moi, peu importe ce qu'il fait ou bien qui se connecte, qui crée un compte, ça doit envoyer cela

Speaker A

directement à ma base de données. D'accord ? Donc disons que je vienne ici, je recherche par exemple Amadoufal et que je dise entrer. Tu vas voir que ça fait des appels. D'accord ? Donc ces appels là c'est tout simplement tu as

Speaker A

ici tu as vu ici en fait ça en montre les les requêtes que font par exemple Google et ici je peux voir l'URL de la requête. Donc par exemple tu peux voir que c'est c'est ça euh c'est ça par

Speaker A

exemple c'est une URL de requête. D'accord ? Donc c'est un lien que Google utilise pour faire les recherches. Et ça en fait bon après eux c'est Google quoi, tu vois. Mais l'idée, ce que je vais t'expliquer, c'est que chaque site a ça.

Speaker A

Tu peux pas cacher ça. Et généralement ça, ça va aller directement parler par exemple à ta à ton serveur. D'accord ?

Speaker A

Généralement, si tu ne fais pas de la validation directement sur le serveur, d'accord ? Au lieu de passer sur ton front, je vais juste ouvrir ici dans la console, je vais récupérer en fait l'URL, d'accord ? Et je vais envoyer, il

Speaker A

y a des outils qui me permettent d'envoyer directement des données directement sur ton serveur sans même passer sur ton site, sans même passer sur ton front end. Donc la solution c'est de faire de la validation sur le front mais aussi sur le serveur parce

Speaker A

que si ton serveur il fait confiance à tout ce qui arrive sans vérifier c'est une faille bayante. Donc la solution est simple c'est de toujours valider côté serveur. La validation front end, tu la gardes pour l'expérience utilisateur parce que disons que moi je veille faire

Speaker A

par exemple de la validation valider un email, je vais pas tout le temps envoyer des requêtes à mon serveur parce que même ça c'est du c'est du gaspillage de gaspillage de de ressources parce que moi je te dis c'est des choses que tu

Speaker A

payes hein, d'accord ? À chaque fois qu'il y a une appel, une requête à payer bah s'il y en a beaucoup bah tu vas payer. Donc tu peux faire une validation sur ton site. Tu vas dire que ça ça

Speaker A

ressemble à un email. Donc il y a par exemple l'identifiant par exemple à modo finance, il y a l'ar@AS et il y a le suffix. Donc par exemple gmail.com, hotmail.com, live.fr. Donc si tu mets tout ça en collé, d'accord, il y a ce

Speaker A

qu'on appelle reject. D'accord ? Donc c'est un outil qui permet donc c'est un peu une fonction qui permet de checker ça ressemble à un email, ça ça ne ressemble pas à un email. D'accord ? Ça tu peux le faire sur le front mais il

Speaker A

faudra toujours vérifier aussi sur ton serveur, d'accord ? comme ça, tu vas pas avoir de mauvaises surprises. Donc tu vérifies le format de l'email, la taille du mot de passe, le type de données et cetera. Si quelque chose ne va pas, tu

Speaker A

rejettes la requête. Donc tu fais ça au niveau de ton serveur. Et il y a un prom par exemple, tu peux dire très simplement à ton par exemple, ajoute la validation côté serveur pour tous les API, toutes les routes. Ne fais pas

Speaker A

confiance aux données du front end par exemple. tu lui dis ça, il va faire de la validation côté serveur. Donc là, j'aurais juste pu venir te dire dis çaa mais derrière toi, tu ne comprendrais pas ce que tu fais. Et généralement

Speaker A

quand tu vas commencer à construire des apps de plus en plus complexes, il te faut savoir exactement ce que tu fais, d'accord ? Dans une certaine mesure. Tu n'as pas besoin d'être un expert parce que c'est pas toi qui va les faire

Speaker A

manuellement, mais il faut quand même avoir un minimum de compréhension dans ce que tu fais. Donc par exemple un cas concret, je te donne un exemple, les inscriptions avec des emails bidons, n'importe qui peut venir tap par exemple

Speaker A

taper n'importe [email protected] et il va créer un compte, tu vois ? Parce que ton front end, il va se dire "Oui, ça ça ressemble à à un email, je vais laisser passer." Donc si j'ai jamais sur sur ton back end, tu n'as pas

Speaker A

fait une vraie vérification pour voir si cet email existe vraiment, bah beaucoup de gens vont venir et ils vont écrire n'importe quoi, d'accord ? Ils vont juste créer des des emails sur euh des des comptes sur ton site. Et

Speaker A

généralement, comment les gens font pour contourner cela ? Quand tu viens sur un site et que tu écris ton email et que tu écris son ton mot de passe, par exemple pour créer un compte, qu'est-ce qu'il fait ? Il t'envoie un code sur ton

Speaker A

email. Donc tu vas aller chercher ce code, tu viens le mettre pour prouver que c'est ton email, que cet email c'est vrai. Ce type de validation là, bah ça se fait au niveau du serveur. Et par exemple, quand on va commencer à créer

Speaker A

des sites, on va on va faire cela, d'accord ? On va toujours vérifier côté serveur que l'email existe et que c'est un email qui est bon. Donc ça c'est pour éviter que beaucoup de gens ils viennent pour créer un compte, ils vont juste

Speaker A

écrire n'importe quoi et le front end va dire "Ouais, ça ressemble à un email, je laisse passer." Donc si jamais au niveau du serveur il y a pas une vraie validation qui valide que c'est vraiment des emails, bah écoute, tu vas avoir des

Speaker A

des faux comptes, des comptes bidon, des arnaques et cetera. Donc la solution, tu vas valider tout simplement au niveau du front et au niveau du bac, d'accord ? Et c'est assez simple de faire ça. OK, maintenant qu'on a parlé de validation,

Speaker A

d'accord, on va passer à la faille suivante qui est une faille qui peut se passer tout le temps. C'est la faille au niveau de la sécurité des packages et des dépendances. D'accord ? Surtout si c'est des packages non sécurisés ou bien

Speaker A

qui n'existent pas. En fait, il faut te dire que des fois Lia, il hallucine et il va inventer des packages qui n'existent pas. Il va halluciner euh un nom crédible et te dire que par exemple ça existe. D'accord ? Sauf que par

Speaker A

exemple un package par exemple, il va te dire ce package existe, tu peux le mettre dans ton projet sauf que ça n'a jamais existé. Et c'est là que ça devient très dangereux parce que ceux qui attaquent ton site, les hackeurs,

Speaker A

ils connaissent généralement ce phénomène. Donc ils vont créer des packages malveillants. Donc ils vont créer des choses malveillantes. Et si jamais tu l'installes sur ton projet, d'accord, si jamais tu l'installes, il y aura tout simplement un malware, donc un

Speaker A

logiciel malveillant qui va voler tes clés à payer et pouvoir faire ce qu'il veut sur ton site. Et ça arrive moins souvent avec les bons modèles comme par exemple Cloud Opus et cetera, mais environ 5 % du code généré par Lia

Speaker A

contient généralement des références à des packages inexistants. Donc l'autre problème aussi c'est des versions. Donc LIA va référencer souvent des versions anciennes de librairies avec des failles de sécurité connues. Donc je vais je vais te montrer un peu de quoi je parle.

Speaker A

Donc ici quand je viens sur mon code tout à l'heure je t'ai dit quoi ? Je te dis que ici dans le notre module notre module j'ai des packages. Donc ça c'est des packages sur lequels mon code se

Speaker A

base pour bien marcher. Donc chaque package a quelque chose qui qui fait quelque chose de bien spécifique. Don par exemple là on a un package par exemple ES Lint. Donc ça c'est un code que j'installe sur mon sur mon sur mon

Speaker A

outil que j'installe sur mon sur mon app tout simplement qui me permet de faire quoi ? De vérifier que mon code est bien écrit et cetera. Donc au lieu d'essayer d'écrire un code qui fait ça moi-même, bah je vais tout simplement euh

Speaker A

installer un code qui qui existe déjà et qui le fait. Au lieu de recréer la la roue, on utilise des codes qui existent déjà, on les installe sous forme de package dans notre app comme ça on va avancer beaucoup plus rapidement. Donc

Speaker A

par exemple, là on a le site React, c'est un package par exemple généralement qui est utilisé pour télécharger des icônes, d'accord ?

Speaker A

mettre des icônes. Donc tu as vu SVG element circle ellipse. D'accord ? Donc c'est généralement du code qui me permet d'ajouter des icônes sur mon site. Donc au lieu de créer mes icônes à moi de de zéro, bah j'utilise tout simplement des

Speaker A

icônes qui existent déjà. Maintenant là le problème c'est quoi ? Si jamais j'installe ici un package qui a une faille, donc un package qui n'existe pas ou bien un malware, donc un package qui a été fait dans le seul but de voler mes

Speaker A

données et cetera, bah je j'expose mon code, j'expose mon projet. Et ici si je j'installe aussi une version de ce package ancienne, par exemple ici si je viens sur le package Jason, donc tout à l'heure je t'ai parlé du package Jason.

Speaker A

Tu as vu que tous ces éléments qui sont dans le note modules, ils sont ici dans le package Jason. D'accord ? Donc là par exemple, il y a le site React que je t' que je t'avais montré tout de suite. Bah

Speaker A

là moi j'ai le site React version 1.7.0. Ben disons que Liam m'installe la version 1.2.0 et par malchance cette version là 1.2 de Lucid React avait une faille. Bah écoute, je me mets euh je me mets un peu

Speaker A

dans la mise quoi. C'est pas pour rien que quand tu utilises quelque chose comme WordPress, d'accord, WordPress va tout le temps généralement faire des mises à jour parce qu'il peut avoir des versions qui vont avoir des failles et

Speaker A

ils vont tous tout de suite faire une mise à jour. Et si tu ne mets pas à jour et que tu montes à la version supérieure, bah la version dans laquelle tu es, bah tu restes tu es un risque

Speaker A

parce que des hackeurs peuvent exploiter une faille et venir tout simplement euh bah ton site. Donc maintenant, comment tu peux te prémunir de ça ?

Speaker A

Premièrement, tu peux faire quelque chose de très simple. Tu peux aller sur npmjs. D'accord ? Donc npmjs.com.

Speaker A

Donc c'est tout simplement une bibliothèque de package. Donc ça te montre tous les packages qui existent.

Speaker A

D'accord ? Et ici je peux rechercher par exemple lucid React, donc le le package que je viens de te montrer. Je peux voir que voilà, là il existe, il est bien à la version 1.7, d'accord ? Ici, tu as la

Speaker A

version actuelle, c'est la version 1.7. Donc ça tombe bien parce que moi aussi j'ai lucide React à la version 1.7. Donc ici ça te montre aussi comment installer le package. Donc il te dit tu mets tu fais juste PNPM add ou bien npm install

Speaker A

le site React. Ça c'est des commandes que tu mets dans le terminal comme je t'ai expliqué. Donc tu viens ici et tu colles npm installe le site React et c'est comme ça que tu installes un package. C'est aussi simple que ça. Et

Speaker A

là en fait tu peux voir le nombre de téléchargement. Tu peux voir qu'il y a 55 millions de téléchargements. En fait il y a 55 millions de projets à travers le monde qui utilise le site React. Donc on peut dire que vraiment il est très

Speaker A

sûr parce que s'il n'était pas sûr, il y a personne qui allait l'utiliser. Ça c'est sûr. Donc généralement si tu viens ici et que tu trouves que le package il a je sais pas moi deux téléchargements, man, méfie-toi, d'accord ? Méfie-toi un

Speaker A

peu. Euh dis-toi que si en fait il y a forcément quelque chose qui ne va pas bien, surtout si tu es débutant, utilise généralement les packages qui sont assez connus, qui sont assez utilisés.

Speaker A

Deuxième chose que tu peux faire, tu peux lancer des audits, des audits de temps en temps sur tes packages, d'accord ? Tu viens ici et tu fais ce qu'on appelle npm audit. Donc qu'est-ce que ça fait npm audit ? Ça va tout

Speaker A

simplement auditer tous les packages qui sont là et voir s'il y a des packages qui ont des failles et cetera. Donc là, tu as vu, il a trouvé, il n'a pas trouvé de vulnérabilité. Mais s'il y avait une

Speaker A

vulnérabilité, il va te dire "OK, sur ce package là, j'ai vu ça, j'ai vu ça, j'ai vu ça." et tu vas faire ce qu'on appelle un npm audit fix. Et quand tu fais npm audit fix, donc il va tout simplement

Speaker A

fixer, régler les failles qu'il y a sur tes packages. Ou bien tu viens directement dans l'IA et tu lui dit euh fais-moi un audit de mes packages et fixe fixe si jamais tu vois des problèmes. Donc ou bien tu viens, tu lui

Speaker A

dis ça tout simplement et lui tu vas voir qu'il va tout simplement faire la même chose. Il va lancer un npm audit et il va faire un npm audit fix si jamais il voit des problèmes. Sinon il va tout

Speaker A

simplement te dire queil y a pas de souci. D'accord ? Donc ici, normalement il va lancer une commande terminale. Tu as vu ? Ça c'est la commande terminale qu'elle a lancé npm audit. C'est la même chose que je viens de faire. Je vais

Speaker A

faire run et il va trouver qu'il n'y a pas de chat, zéro vulnérabilité. Donc là, il va tout simplement me dire il y a aucun problème d'accord avec mes mon audit. Donc npm outdated, il va voir s'il y a un package qui est outdated,

Speaker A

donc qui est qui est ancien. Donc donc là si si il en trouve aussi, il va te dire que ça c'est ancien, mets-le à jour. ou bien npm install. Donc là, qu'est-ce qu'il fait ? Il fait un npm

Speaker A

install. Donc peut-être qu'il a trouvé des euh des packages qui sont anciens ou bien qu'il y a une nouvelle version. Il va installer une nouvelle version. On attend un qui finit et il va te dire exactement ce qu'il a trouvé. Donc là,

Speaker A

tu as vu, j'ai bien audité vos packages avec la commande npm audit. Zéro vulnérabilité. Euh voilà, seul IS Link dispose d'une nouvelle version mais vous êtes à la dernière version à jour de la V9. Il est plus prudent de rester sur

Speaker A

cette version. Aucun fix n'est nécessaire. Donc tu as vu, c'est en fait c'est la même chose que j'ai fait ici.

Speaker A

C'est juste que quand je vais faire ça, peut-être ça va me consommer des crédits, d'accord ? Donc euh si tu sais comment le faire toi-même, bon tu le fais quoi, tu vois ? Au lieu de lui dire de le faire. Mais bon, si tu es si tu ne

Speaker A

veux pas te casser la tête, viens ici et tu lui dis "Fais-moi unit de mes packages. Vois s'il y a pas de package qui où il y a des failles ou bien un package qui est qui est outdated,

Speaker A

d'accord ? Qui est ancien et fixe-moi tout cela et il va faire ça pour toi." OK ? Ensuite maintenant on va parler de la 5è faille générale que la majeure partie des app Vibe CD ils ont. C'est le

Speaker A

problème d'authentification et de protection des routes. Donc c'est quoi une route ? D'accord ? Donc une route c'est tout simplement dans ton serveur d'accord ? Il y a différentes entrées.

Speaker A

D'accord ? Donc on va dire que une entrée, on appelle ça une route. Donc disons il va y avoir une entrée pour avoir le le nom d'un utilisateur ou bien les informations d'un utilisateur. Donc ça c'est une route. Il y aura une autre

Speaker A

entrée pour voir par exemple le nombre d'utilisateurs. Donc ça aussi c'est une route. Donc en fait il faut vraiment authentifier et protéger ces routes parce que dans système de connexion marche, les utilisateurs s'inscrivent, se connectent tout marche. Mais est-ce

Speaker A

que chaque page vérifie que l'utilisateur est connecté ? Est-ce que chaque route de ton API, donc chaque entrée de ton API vérifie le token ?

Speaker A

Tout à l'heure, on a parlé du token. Je te'ai dit que quand vraiment on le token, c'est comme si tu entrais dans un club et que tu payais, on te donne un bracelet ou bien une carte, ça c'est ton

Speaker A

token. Mais est-ce que à chaque fois que la personne va venir pour entrer dans le club, est-ce qu'on va vérifier qu'il a le token avant de le laisser rentrer ?

Speaker A

C'est ça la vérification de la route. D'accord ? Parce que sinon bah écoute, n'importe qui peut venir sur ta base de données et faire sur ton serveur et faire n'importe quoi. D'accord ?

Speaker A

Beaucoup d'APS surtout Vibe Codit ne font pas ça. Donc le dashboard vérifie l'authentification mais les la page paramètres par exemple ne le vérifie pas. Tu vas entrer dans une application, d'accord ? Tu vas te connecter, tout marche. Mais quand tu vas aller sur la

Speaker A

page paramètres, au lieu de euh quand tu vas vouloir changer quelque chose, il va pas vérifier si tu es bien l'utilisateur qui est qui est propriétaire de ces données-là. En fait, c'est pas parce que tu es tu t'es authentifié, ça veut dire

Speaker A

que tu es venu, tu t'es connecté, que chaque page ou bien chaque bouton de l'application, chaque action vérifie que est-ce que c'est toi vraiment euh l'utilisateur. Donc ça aussi c'est très important. Je te montre un exemple dans une de mes applications. Donc ça par

Speaker A

exemple, c'est mon application farata.net. Donc Farata.net, c'est une app que j'ai lancé. C'est un site de rencontre. Donc là, ici, on vérifie tout le temps si la personne, elle est premium. D'accord ? Donc si une personne est premium, il peut faire des choses.

Speaker A

Donc il peut envoyer des messages vocaux et cetera et cetera. Donc pour savoir tout le temps si la personne est premium ou pas, bah écoute, on va tout le temps faire cette validation là. C'est pas parce que tu t'es connecté que tu es

Speaker A

forcément premium ou bien c'est pas parce que tu t'es connecté en étant premium que tu es toujours premium parce que tu peux te connecter en étant premium et je sais pas moi une heure de temps après ton abonnement premium a

Speaker A

expiré. Bah si si on fait pas de la vérification, ça veut dire que tant que tu ne te déconnectes pas, tu vas toujours avoir accès à tes avantages premium, tu comprends ? Donc généralement ce qu'on fait quand on veut

Speaker A

sécuriser cela, à chaque fois qu'il y a une requête, à chaque fois qu'il y a une action, ce qu'on fait c'est qu'on vérifie si la personne est bien authentifiée et est-ce qu'elle a les accès, est-ce qu'elle est autorisée,

Speaker A

est-ce qu'elle a toujours le token, est-ce que cette personnelà qui veut faire cette action là, il a les autorisations pour faire ce qu'il veut faire. C'est aussi simple que cela. Et techniquement, comment ça se fait ? En fait, ce qu'on fait, c'est qu'on

Speaker A

installe un middleware. Donc un middleware, c'est tout simplement un bout de code, d'accord, qu'on met dans tes routes, dans ton dans ton backend.

Speaker A

Donc chaque route, chaque entrée, il aura un middleware. Donc le middleware, c'est comme un videur que tu vas mettre devant chaque porte avant que une requête ne passe, il va vérifier si cette personne-là c'est bien celle qu'elle prétend être ou bien si cette

Speaker A

personne ce qu'elle fait, elle a les autorisations pour le faire. Donc c'est un peu comme ça qu'on met euh qu'on met à jour. Donc en fait le middleware c'est comme si il va se mettre entre l'entrée de ton serveur et ton front,

Speaker A

c'est-à-dire que et le site. Donc quand le front va envoyer une requête avant que la requête n'arrive dans le serveur, il va passer ou bien n'arrive dans une route, il va passer par le middleware et le middleware son travail c'est de tout

Speaker A

simplement checker. Il va tout protéger. il va vérifier le token et si la personne n'est pas par exemple connectée, il va le rediriger vers login. Et si cette personne n'est pas par exemple un membre premium ou bien il

Speaker A

n'a pas payé un abonnement à ton SAS, bah il va lui dire tu n'as pas accès à cette fonctionnalité là. Généralement on utilise un quelque chose qui s'appelle le middleware. Tu n'as pas besoin de techniquement savoir comment il fait ce

Speaker A

qu'il fait. D'accord ? Mais sache que il te faudra dire à Lia de faire des choses bien précises pour que ton app soit vraiment très sécurisé. Ensuite, une chose que beaucoup de gens ne font pas ça, moi je dirais peut-être 95 % des

Speaker A

gens qui font du vibe coding n'ajoutent pas ça dans leur site et ils s'exposent man, ils ne savent pas à quel point ils s'exposent, c'est qu'ils ne font pas de rate limiting. Donc le rate limiting, c'est tout simplement en fait, disons

Speaker A

que je te donne un exemple. Si quelqu'un vient sur ton site, il met un email, d'accord, et il fait 100 mot de passe, 1000 mot de passe, ou bien il peut même utiliser un logiciel qui va forcer et

Speaker A

qui va essayer plusieurs mot de passe ou bien il va faire du bred force. on appelle du bruit force par exemple un logiciel qui va venir qui va venir essayer 100000 combinaisons de mot de passe possibl si tu ne fais pas du rate limiting. Donc

Speaker A

le rate limiting c'est tout simplement quand tu mets une règle sur ton site qui dit que chaque utilisateur il ne peut faire que cinq essais de mot de passe chaque 10 minutes par exemple. Ce qui fait que ce logiciel là, il peut venir

Speaker A

faire un essai, deux essais, 3 essais, 4 essais, 5e essai au 6e essai et lui dit euh tu as fait trop de tentatives, attends dans 10 minutes. La majeure partie des sites si tu te si tu si tu si

Speaker A

tu te rends compte quand tu vas là-bas et que tu fais trop de d'essè par exemple envoyer un email et cetera, ils te disent attends dans 1 minute, dans dans 2 minutes avant de redemander ton code parce que tu as déjà fait ça. Donc

Speaker A

ça c'est des rate limiting. Donc ça c'est vraiment très hyper important surtout si tu utilises des API que tu payes comme par exemple si tu utilises une API open IA ou tu utilise de l'IA ou tu payes si tu ne fais pas de rate

Speaker A

limiting les gens vont abuser de ton de ton de de tes de tes de tes de tes API vont abuser de tes services et c'est toi qui paye la facture. Donc il faudra toujours ajouter du R limiting et tu

Speaker A

n'as pas besoin de savoir techniquement comment ça se fait. Tu dis juste à ajoute du red limiting sur toutes les routes d'authentification. Par exemple, tu lui dis maximum 5 tentatives par minute par adresse IP. Ce qui fait que

Speaker A

chaque ordinateur qui se connecte, bah euh quand il se connecte, il peut pas faire plus de cinq tentatives de connexion. S'il le fait, il lui dit par exemple "Attends une minute avant de refaire euh une tentative". Donc c'est

Speaker A

un peu comme ça que ça se passe. Maintenant, pour régler tout ça, ce que j'ai fait c'est que tu peux faire un audi sécurité avec Lia. D'accord ? Donc dans cette dernière section, on va voir comment utiliser Lia pour vérifier la

Speaker A

sécurité de ton projet. Et comment on va faire ça ? C'est tout simple, j'ai créer un prompt. C'est un vraiment un gros prompt, d'accord ? Que sera aussi dans le document. Donc je vais venir ici jusqu'en bas, on va retrouver le prompt

Speaker A

et tu donnes juste ce prompt là à L. Et une fois que tu lui donnes ça, tu as vu ça c'est le prompt sécurité. Tu as juste à copier tout ce que tu vas trouver ici.

Speaker A

D'accord ? Je vais te le mettre donner dans le dans le fichier. D'accord ? Donc je copie tout ça. Tu as vu, c'est hyper long. Donc je lui donne ça et je copie.

Speaker A

Je viens ici. D'accord. Je lui donne. Tac. Et en fait bah maintenant une fois que je lui donne tout ça, Lia va regarder toutes ces failles là dont on a parlé. Donc le row level security, le rate limiting, la validation backend, la

Speaker A

validation front end. Euh tout ça en fait tous ces éléments en tout cas toutes ces failles que je t'ai présenté ici, il va aller les checker. Il va te faire un rapport d'audit et si jamais il trouve des failles, tu lui dis juste

Speaker A

fixe tout ou bien règle tout et il va tout régler pour toi. J'aurais pu juste venir te dire si tu veux faire de la sécurité juste donne ça, mais ça ne serait pas assez complet parce que là on

Speaker A

a parlé que je te dis de 80 % des failles mais il y a d'autres d'autres failles qui sont beaucoup plus complexes. D'accord ? Et si tu ne peux même pas comprendre ces là dont je te parle, si jamais tu as ces problèmes là,

Speaker A

tu ne pourras jamais le savoir. Donc là, quand on va créer peut-être des app beaucoup plus complexe, une app beaucoup plus complète, on va faire quelque chose de on va faire un Audi encore plus complet. Mais déjà si tu as ces

Speaker A

sécurités là sur ton application, bah ton application est quand même hyper sécurisée. Elle est très sécurisée.

Speaker A

Vraiment, il te faudrait un accordur très fort pour pouvoir accéder à tes données. Et ça aussi euh comme je te dis, c'est c'est vraiment pas mal. Donc tu commences par faire ça. Après il y a d'autres types de de choses que tu peux

Speaker A

faire pour encore plus sécuriser ton application. Et ça, on va en parler lorsqu'on va créer une app. D'accord ?

Speaker A

Une app stack, ça veut dire une application avec du front end, du back end. Et là, on verra comment on peut sécuriser cela parce qu'on doit sécuriser pas mal de trucs. Donc là, regarde ce qu'il est en train de faire.

Speaker A

Il est en train de faire l'audio. Bon là, on a on a rien. On a même pas de backend, c'est juste le site qu'on avait créé, le site du CV. D'accord. Il y a même pas de backend. C'est un site hyper

Speaker A

simple, donc il y a pas grand-chose. D'accord ? Donc là, il regarde un peu la checklist, il te dit ce qui est déjà bien. Résumé de la checklist, il te dit est-ce qu'il y a du code vulnérable ?

Speaker A

Donc par exemple ça, il te dit que ça c'est vulnérable. Il te dit ça c'est la connexion, la correction. Donc tu dois faire cette commande là. Donc au lieu de me casser la tête, je lui dis juste fixe

Speaker A

tout. C'est bon. Tu as vu ? Et là en fait c'est lui qui qui se gère de de de régler ces éléments là. Donc en fait ce prompt là sera aussi disponible dans le fichier. Donc tu vas venir, il va te

Speaker A

demander la l'autorisation. Bah il me demande toujours l'autorisation tout simplement parce que dans les settings, je lui ai demandé, je vais faire request review mais si j'avais fait always proceed il avait il a il a juste venir et le faire. Mais là, je vais juste

Speaker A

faire run et tu vas voir que il va faire le il va faire le en fait, il est en train de désinstaller un un package quoi. Tu vois, il a dit j'ai fait l'udit sécurité configuration nettoyage des dépendances. Votre projet est maintenant

Speaker A

parfaitement propre et sécurisé à 100 % et puis c'est bon. D'accord. Donc il a aussi modifié le git ignore et tu as vu, il a moi j'avais ajouté juste le variable d'environnement mais il a ajouté le variable donc le c'est-à-dire

Speaker A

que euh j'ai j'ai ajouté ce fichierlà point inv mais il est parti plus loin, il a ajouté point tout ce qui suit.

Speaker A

Après par exemple si j'avais un fichier généralement on a d'autres types de fichiers qui s'appellent par exemple point inv.local local. D'accord ?

Speaker A

Généralement, il y a des fichiers d'environnement qui s'appellent comme ça. Et si je ne fais si je ne fais pas ça, d'accord, ça va pousser ce fichierlà sur mon guit. Peut-être que j'ai des codes ici. Donc qu'est-ce qu'il a fait ?

Speaker A

Il a dit ici point et point et et quand point en inv et tout ce qui suit après.

Speaker A

Ça ça veut dire c'est un wild card. Ça veut dire tout ce qui peut suivre après le point. S'il y a quelque chose qui a qui est après, juste cache-le. Donc tu as vu point.local.

Speaker A

peu importe ce que tu mets ici, il va il va il va compter sur cette ligne là et il ne sera ce fichier là ne sera jamais poussé sur ton GitHub. Donc là on a un peu parlé de sécurité, on a parlé des

Speaker A

cinq failles fréquentes, on a même donné une 6e faille qui est le rate limiting.

Speaker A

Donc avant de mettre en ligne un SAS, il faut toujours passer cette checklist là.

Speaker A

Donc c'est des choses que tu dois obligatoirement vérifier avant de mettre ton site en ligne. Donc tu vérifies si les clés API sont bien dans le environnement.lle local ou bien dans le fichier d'environnement. Est-ce que ce fichier environnement ou bien

Speaker A

environnement pointlocal ou même les deux, ils sont dans le guide ignore ? Est-ce que tu as activé la row level security ? Est-ce que tu as activé les policies en ravel security ? Est-ce que tu as fait une validation côté serveur

Speaker A

et même côté front end ? Est-ce que tu as vérifié tes packages ? Tu peux lancer npm audit ou bien tu dis à ton il a juste faire de l'audit. Est-ce que tu as fait des middleware comme je t'ai dit un

Speaker A

middleware qui va toujours vérifier les requêtes qui arrivent et vérifier si cette personne là il est authentifié, est-ce que tu as fait de la vérification email et est-ce que tu as un rate limit en place ? Une fois que tu as ça, ton

Speaker A

application est quand même pas mal sécurisée, crois-moi. Donc là, on est un peu à la fin du module 4. Donc qu'est-ce que tu as compris ? Tu as compris comment le front, le back et la base de données communiquent et où se trouvent

Speaker A

les points d'attaque général que les hackeurs vont exploiter si jamais tu redonnes l'opportunité. Donc tu gères tes variables d'environnement et plus jamais tu mets de clés en dur sur ton code, d'accord ? Tu le mets toujours dans le fichier d'environnement, donc le

Speaker A

point N ou bien le point. NV.lle local comme je te l'ai montré. Maintenant, tu comprends c'est quoi le row level security, le RLS. Chaque utilisateur ne verra que ses propres données et ne pourra interagir qu'avec ses propres données. Tu valides côté serveur, pas

Speaker A

uniquement côté front. Donc chaque euh information qui va venir, tu vas faire de la validation. Il y a même des bibliothèques qui existent comme par exemple ZOD pour faire la validation. Tu as même tu dis juste à L valide avec

Speaker A

Zod, d'accord ? Z O D et il va faire la validation. Mais sinon, tu lui dis juste fais la validation quand tes serveur et peut-être que lui-même il va automatiquement installer Zod. D'accord ? Tu vérifies tes packages avant de les

Speaker A

installer. Tu protèges toutes tes routes avec un middleware et tu sais faire un audi de sécurité avec l'a en utilisant le prompt qui sera dans le fichier bien évidemment. Et tout cela peut-être ça va ça a été un peu long et ce n'est pas

Speaker A

excitant mais croit-moi c'est professionnel. Et si tu veux vraiment créer des s qui vont scaler, ça veut dire avoir plein d'utilisateurs, tuas rapporter plein d'argent et que tu peux même revendre, il faut que ce soit sécurisé. Et qu'est-ce qu'on va voir

Speaker A

dans le module 5 ? Dans le module 5, on va créer un un sas full stack. Donc le premier sas full stack qui sera créé.

Speaker A

Donc un sas où il y aura le front end, le back end, une base de données, un vrai produit avec authentification, dashboard, gestion de données et la sécurité sera intégrée dès le départ. À tout de suite. Alors, bienvenue dans le

Speaker A

module 5 de la formation Easis. Donc, dans ce module là, on va dire que c'est the module, d'accord ? C'est à partir de maintenant qu'on va commencer à voir les choses sérieuses. C'est là qu'on va commencer à créer de vraies app parce

Speaker A

que justeici on n pas vraiment créé des app, on a créé des sites web, on a créé une page, une landing page, un CV en ligne. Donc c'est bien pour apprendre mais c'est des sites statiques. Il y a

Speaker A

pas de base de données, pas d'utilisateur, pas de logique, pas de création de compte et cetera. Maintenant à partir de ce module là, on va commencer à construire des appes beaucoup plus complètes. Donc ce qu'on va construire dans ce module 5 là, c'est

Speaker A

un outil de facturation. Donc un une vraie app, d'accord ? Avec un front end, un back end. Des utilisateurs pourront s'inscrire, se connecter, créer des factures, suivre les paiement et on va déployer tout cela en ligne pour que ce

Speaker A

soit accessible partout dans le monde. Mais avant de de se lancer, je vais t'expliquer un peu le processus qu'on va suivre parce que quand tu construis un SAS, tu ne fais pas tout en même temps, d'accord ? Il y a un ordre précis en

Speaker A

tout cas que moi je suis. Et cet ordre là, c'est ce que j'appelle le Viboding design loop. D'accord ? Donc c'est un peu les étapes sur par lesquelles je passe quand je veux créer un SAS. Donc le Vibe Coding Design Loop, c'est un

Speaker A

parcours qu'on suit à chaque fois qu'on crée une application, quel que soit le projet, c'est toujours le même ordre en tout cas que moi j'utilise. Il y a pas vraiment de vérité universelle, c'est juste que moi c'est ce que je trouve qui

Speaker A

marche le mieux. Donc je t'explique. Donc l'étape 1, je fais ce qu'on appelle de l'inspiration design. D'accord ? Dans cette étape, tu commences par le visuel.

Speaker A

tu vas sur des sites comme par exemple Dribble ou Behinds, c'est des sites où il y a juste plusieurs designs qui sont là-bas sur lesquels tu peux t'inspirer.

Speaker A

Donc je cherche des designs qui ressemblent un peu à ce que je veux faire. Je prends des captures d'écran et l'objectif en fait en faisant ça, c'est juste d'avoir une référence visuelle claire avant de demander à Li de faire

Speaker A

quoi que ce soit. Il faut d'abord que toi-même tu saches ce que tu veux réaliser. Maintenant à l'étape 2, je vais faire ce que je je trouve, c'est l'animation. Donc c'est optionnel hein, tu n'es pas obligé de le faire mais ça

Speaker A

rend quand même tes app beaucoup plus pro. Donc tu ajoutes des transitions, des animations survol quand la souris par exemple arrive sur un bouton, il y a un petit effet. D'accord ? Des c'est ce type de changement qu'on va faire et

Speaker A

c'est ça qui va donner une sensation d'avoir un produit fini. C'est très subtil, mais la différence qu'elle fait en terme de comment les gens vont percevoir ton app et ton site, elle est vraiment colossale. Donc euh l'étape 3,

Speaker A

je commence à voir les fonctionnalités principales. Donc là, je vais construire la logique. Donc le dashboard, les widgets, le crud. Donc quand je te dis cre, C rud. Donc c'est tout simplement un sigle qui veut dire créer, read,

Speaker A

update, delete, donc créer, lire, mettre à jour et supprimer. Généralement, tous les sites au monde que tu vois, c'est basé sur du crud. Par exemple, quand tu vas sur Facebook, tu peux créer un post, tu peux lire les post des gens, tu peux

Speaker A

mettre à jour un post et tu peux par exemple supprimer un post. Quand tu vas sur ta chaîne YouTube que tu publies une vidéo, tu peux créer une vidéo, tu peux lire une vidéo, tu peux mettre à jour

Speaker A

une vidéo et tu peux supprimer une vidéo. En fait, la base de de en fait, c'est la base de tout. C'est-à-dire que tous les sites que tu vois au monde, même euh PayPal, tu peux créer une transaction, tu peux voir une

Speaker A

transaction, tu peux peut-être mettre à jour annuler une transaction et tu peux supprimer une transaction. Donc c'est un peu comme ça que ça se passe. Donc une fois que ton app ces quatre fonctionnalités, on peut dire que elle a

Speaker A

elle a le creux, c'est-à-dire que elle a des fonctionnalités qu'un utilisateur aura besoin pour par exemple interagir avec ton site. Donc on va faire ça. On va connecter cela avec la base de données et c'est là où l'application

Speaker A

fait les choses pour de vrais, d'accord ? Pas juste afficher du texte. par exemple sur les sites qu'on a eu à faire. Donc on a fait un site pour une entreprise, on a fait un un CV en ligne,

Speaker A

on a fait juste des informations, il y a rien de vraiment exceptionnel. D'accord ? Mais là, on va commencer à vraiment faire des choses avec de la logique. Une fois qu'on fait ça, la 4ème étape, on va faire un test local et itération. Donc

Speaker A

quand je dis test local, c'est simple, c'est juste que tu testes sur ta machine, tu cliques un peu partout, tu essayes de casser des choses pour voir si ça marche et chaque bug que tu trouves, tu le corriges, tu itères

Speaker A

jusqu'à ce que ça marche. En fait, il n'y a pas de de prompte miracle que tu vas donner et qui va te donner un produit fini sans bug. C'est pas possible. D'accord ? C'est juste qu' te li te crée quelque chose, tu vois, tu

Speaker A

testes, tu lui dis "Ah, OK, là j'ai testé, ça marche pas." Il le règle. Tu testes, tu trouves encore autre chose et tu tournes. C'est une boucle que tu fais. tu testes, tu corriges, tu testes, tu corriges jusqu'à ce que tu es quand

Speaker A

même fait un test où tu te dis que voilà là les fonctionnalités en tout cas qui sont très critiques pour mon app marche bien et là tu passes à l'étape suivante qui est la base de données. Donc quand

Speaker A

je te parle de base de données, c'est tout simplement on va connecter une base de données. Donc il y a plusieurs types de bases de données mais comme je t dit pour les débutants, je conseille toujours Superbase. Donc Superbase c'est

Speaker A

c'est en fait c'est un outil. Il y a la base de données, tu pourras aussi faire de l'authentification. C'està-dire en fait on va y arriver mais l'idée c'est que euh quand quelqu'un vient et qui crée des moi en fait j'ai des amis qui

Speaker A

ont plusieurs s qui marchent. Ils ont des milliers d'utilisateurs, ils ont toujours sur Super base, d'accord ? Il est très puissant et hyper simple. Donc on va utiliser Superbase. Avec Superbase, on va remplacer les données fictives par des vraies données. Quand

Speaker A

on va créer notre apput design, on verra des données, c'est des fausses données, des faux noms de clients, des fausses factures et cetera. Mais une fois qu'on va tester, on voit que tout ça c'est bon, on va connecter maintenant à notre

Speaker A

vraie base de données. Comme ça, notre app ne va afficher que des données réelles. Et on va tester que quand on crée par exemple un client, il se sauvegarde. Quand on crée une facture, il se sauvegarde, il se lit, il se

Speaker A

modifie correctement. Donc qui a le full crud. Ensuite l'étape 6, on fera l'authentification. Donc on va ajouter un système de connexion, d'inscription, de déconnexion et cetera. Donc et le middleware, d'accord ? On va avoir aussi les row level security. On a parlé de ça

Speaker A

sur le le module de sécurité. Ensuite, l'étape 7, euh on va déployer tout simplement euh on va mettre sur GitHub et ensuite on va mettre sur Versel. Donc je pense que ça on l'a déjà fait. Euh c'est juste la mise en ligne de notre de

Speaker A

notre site et euh l'étape 8, je fais des tests finaux end to end, c'est-à-dire de bout à bout. Je vais tester en production, je vais faire les derniers ajustements et je vais faire des tests.

Speaker A

En fait, je vais juste vérifier mon app. Et c'est ce parcours qu'on va suivre maintenant, étape par étape. Et une fois que tu veux créer une autre app, tout ce que tu fais, bah tu tu reviens ici, tu

Speaker A

vois là euh des inspirations de design, tu trouves ton idée d'abord, il faut d'abord savoir ce que tu veux faire. tu vas aller te t'inspirer, tu trouves des designs, tu fais des petites animations si tu veux, c'est optionnel, tu gères

Speaker A

les fonctionnalités principales, en tout cas au niveau de ton de ton design, tu fais des tests en local, tu connectes une base de données, tu fais l'authentification, tu déploies en ligne et tu fais des tests. Donc vraiment, c'est la loupe que je suis

Speaker A

personnellement pour faire mes designs. Mais après, il y a une version améliorée de ce loop là. D'accord ? Mais c'est une version pour l'instant que je ne vais pas te montrer parce que je trouve que ça va juste complexifier. Par exemple,

Speaker A

ici, au lieu de faire euh des inspirations design, j'utilise ce qu'on appelle des MCP. Donc, il y a plusieurs outils. Il y a Stitch, il y a Banani euh qui me permettent de personnellement designer mes app. D'accord ? Avec de

Speaker A

l'IA, d'accord ? Euh on fera ça et euh là, en fait, tu auras une plus grosse maîtrise sur ton design. Mais au début, ça c'est bien. D'accord ? et on va utiliser Gemini 3.1 Pro High qui est l'un des modèles les en tout cas que je

Speaker A

trouve qu'ils sont beaucoup plus forts pour euh pour faire des designs. D'accord ? Et pour tout ce qui est la logique, on va commencer à voir un peu euh le plan d'implémentation. On va on va utiliser Cloud code. Donc on va voir

Speaker A

un peu comment on va utiliser Cloud Clode à partir de ce module là. Donc voici un peu la Vibe Coding, le Vipe Coding Design Loop. Et euh on va on va maintenant passer à l'outil qu'on va créer qui est tout simplement un outil

Speaker A

de facturation que j'appelle Easy Facture. Donc ceux qui me connaissent savent bien que j'aime bien Easy. Donc pourquoi un outil de facturation c'est simple, c'est parce que c'est un problème africain, d'accord, que tous les entraîneurs africains, ils ont la

Speaker A

majeure partie. Donc je me suis juste dit euh c'est ça qu'on va faire, d'accord ? Comme ça, on va construire un outil que les gens euh vont se dire "Ouais, ça c'est un truc que j'aurais lancé ou bien que j'aurais utilisé."

Speaker A

Donc voici ce qu'on va construire concrètement. Donc on aura un dashboard avec des stats. Donc total facture payé et et montant en attente. Par exemple la création de facture avec nom du client, d'accord ? Liste des articles, quantité,

Speaker A

prix TVA 18 %. Au Sénégal par exemple, la TVA c'est à 18 % et le total qui se calcule automatiquement, d'accord ? La liste des factures avec les statuts donc bruyant, envoyé, payé, en retard et cetera. La modification et la

Speaker A

suppression de facture. D'accord ? et l'authentification pour que chaque user ne voit et ne puisse interagir qu'avec ses données. Donc là, on parle encore de row level security. Donc c'est un vrai produit que les gens peuvent utiliser et

Speaker A

c'est ce qu'on va construire en utilisant la loupe dont je viens de te parler. Maintenant, quels sont les outils qu'on va utiliser ? Donc, quelle est la stack technique ? Donc, on a parlé de stack technique. Comme je t'ai

Speaker A

dit, il y a plusieurs outils que tu peux utiliser pour créer des des des sassces et tout. Mais nous avant de coder, d'accord, je vais te rappeler les briques qu'on utilise et comment elles se connectent. Donc on a quatre briques

Speaker A

principales. D'accord ? Donc on a NextJs qui est notre front end et notre back ends. Donc c'est ça une particularité et une des forces de NextJs, c'est qu'il te permet de créer en même temps le front et le back grâce à un mécanisme que je

Speaker A

vais t'expliquer tout à l'heure. Donc c'est un framework qui gère ce que l'utilisateur voit et en même temps la logique serveur. Donc c'est là qu'on va écrire notre code. Ensuite on a Superbase qui est une base de données.

Speaker A

Donc on a parlé de ça. C'est notre base de données. C'est là que tous les données vont être utilisé stockées. les utilisateurs, les clients, les factures et cetera. On a aussi Superbase off, donc l'authentification, c'est notre système d'authentification. C'est ce qui

Speaker A

va gérer l'inscription, la connexion, les tokens et cetera. Et on a Versel qui est notre hébergeur. Donc c'est ce qui met notre application en ligne. Elle la rend accessible au monde entier.

Speaker A

Maintenant, comment ces briques là se parlent entre eux ? Donc on a le front end NextJs d'accord qui envoie des requêtes à Superbase pour lire et écrire des données. Donc il parle aussi à Superbase off pour vérifier les

Speaker A

connexions et tout est hébergé sur Versel. Donc il y a des alternatives, il existe des alternatives à Superbase, on en a parlé, il y a Firebase de Google ou bien il y a même Apprght mais Superbase est open source et gratuit pour

Speaker A

commencer. il utilise Postgress SQL qui est le standard, c'est pour ça qu'on l'a choisi. Donc Postgress SQL, c'est juste on va dire, c'est juste une manière d'organiser les données dans une base de données. D'accord ? C'est aussi simple

Speaker A

que cela. Donc maintenant, il y a un concept important que je veux te présenter, c'est le serve. Donc traditionnellement quand tu crées une application à tu as besoin d'un serveur.

Speaker A

Donc un serveur comme je t'ai dit c'est juste un ordinateur qui tourne 24h sur 24 7 jours/ 7 il est là allumé en permanence en train d'attendre des requêtes. Même si personne n'utilise ton apph quand même tourner et tu payes pour ça.

Speaker A

Donc ça peut te coûter 6000, 10000 50000 500000. Ça dépend selon la taille de ton serveur et la taille de ton trafic. la taille des requêtes, c'estàdire le nombre de requêtes que le serveur il gère et cela même si personne ne

Speaker A

l'utilise. Donc le serveurless, c'est tout simplement l'inverse. Donc le serveurless d'accord, il n'y a pas vraiment de serveur qui tourne en permanence. Donc ton code backend tourne dans ce qu'on appelle des fonctions serverless. Donc ce sont des petits

Speaker A

morceaux de code qui s'activent uniquement quand quelqu'un fait une requête. Une fois qu'ils font leur travail, ils s'éteignent immédiatement après. Donc en fait, c'est comme si tu as un serveur à la demande, d'accord ?

Speaker A

il ne fonctionne que lorsqu'il y a du travail à faire. Donc c'est comme une lumière avec un détecteur de mouvement.

Speaker A

Quand quelqu'un passe, la lumière s'allume. S'il y a personne, la lumière s'atteint. Et le résultat bah c'est que si tu as zéro utilisateur, tu payes 0é franc. À 10 utilisateurs, tu payes presque rien. À 10000 utilisateurs, tu payes un peu plus. Mais c'est toujours

Speaker A

proportionnel à ton usage. Donc il y a des avantages, il y a des inconvénients, mais surtout si tu commences et tu es tu crées de nouvelles applications, c'est vraiment intéressant et c'est pour ça que Versel est parfait pour nous. NextJS

Speaker A

sur Verel, c'est du serverless par défaut. D'accord ? Donc tu lances sans rien payer et tu ne gères aucun serveur.

Speaker A

Donc pas de machine à configurer, pas de Linux à maintenir, pas de Le serveur plante à 3h du matin, d'accord ? Tu déploies juste ton code et ça marche.

Speaker A

Ensuite, on a Superbase qui fonctionne aussi en serveurlesseless pour nous. Donc la base de données est hébergée sur Superbase. Donc tu n'as rien à gérer de ce côté-là. Donc en gros, avec notre stack. Donc quand je dis stack, c'est

Speaker A

tout simplement le groupe d'outils qu'on va utiliser qui est NextJs, Superbase et Versel. On peut lancer un sas sans dépenser un seul franc en hébergement au début parce que c'est gratuit jusqu'à ce que tu a assez d'utilisateur pour que ça

Speaker A

te coûte quelque chose et à ce moment-là bah tu génères déjà des revenus et tu payes tout simplement. Maintenant, on va passer à la première étape du loop qui est l'inspiration et le design, d'accord ? Euh l'inspiration design et la

Speaker A

planification. Donc on va pas demander à Lia de créer un design à partir de rien.

Speaker A

On va lui donner une direction. D'accord ? On va lui donner une direction. Et pour cela, on va aller chercher de l'inspiration. Donc on peut aller sur Dribble. Donc c'est un site où les designers du monde entier partagent leur

Speaker A

création. D'accord ? Et euh je vais te montrer un peu comment ça marche. Donc on va aller là-bas, on va juste voir des des designs et on va choisir quelques captures d'écran. OK, donc là je suis sur dribble. Donc là, je vais rechercher

Speaker A

plusieurs choses. Donc ici, comme tu peux le voir, je fais quand même pas mal de recherches ici. Donc moi, je fais une application de facturation. Je vais rechercher par exemple Invoice website.

Speaker A

Et là, tu peux voir que il y a pas mal de de dashboard. D'accord ? Je vais juste mettre invoice dashboard. Donc, un dashboard pour la facturation. Et je peux voir en fait, je vais juste voir un peu s'il y a quelque chose qui

Speaker A

m'intéresse, si je trouve un design qui m'intéresse. Euh par exemple ça, on va dire que ça c'est pas mal.

Speaker A

D'accord ? Ça c'est un design qui est pas mal. Donc ce que je fais, moi je suis sur Mac. Euh je peux faire une une capture assez facilement. Je fais commande shift 4 et là je peux faire tout simplement une capture d'écran de

Speaker A

de ce dashbard là. Donc et je peux voir si j'ai d'autres d'autres inspirations. Donc ça c'est pas mal. D'accord ? On va juste s'inspirer. On va pas voler les design mais on s'inspire de ça pour pour avoir une base assez assez on va dire

Speaker A

assez mature pour créer notre app. Ensuite, une fois que je fais ça, je vais faire invoice landing page, c'est-à-dire pour avoir une inspiration pour notre landing page. Donc un peu la page d'accueil. Donc je vais voir un peu

Speaker A

ce qui se propose ici. Donc on a ça, invoice build for business. Ouais. Donc ça c'est pas mal. Donc ce que je vais faire, je vais voir si je peux l'ouvrir ouvrir l'image dans un autre onglet.

Speaker A

Donc là, on a on a une image. Je vais tout simplement enregistrer l'image. Je vais l'appeler easy facture inspiration. Bon, allez, inspiration. Et je vais le sauvegarder dans mon bureau. Voilà, c'est bon. H donc là j'ai des inspirations. Donc

Speaker A

c'est un peu comme ça. Disons que je veux faire une application de je sais pas moi de vente. Donc je vais faire je vais faire store dashboard. D'accord. Tu peux rechercher aussi en français si tu veux. Donc l'idée tu as donc ça me j'ai

Speaker A

j'ai des inspirations d'app. Donc par exemple ça c'est une app où tu peux voir tes tes tes orders. Donc ça veut dire tes commandes et tes produits. Euh la la balance report. Donc c'est c'est juste voir ta balance quoi. Donc en fait

Speaker A

l'idée l'idée c'est ça. On vient ici juste pour s'inspirer. Maintenant moi je je viens de moins en moins sur ces sites là parce que j'ai un autre système que je trouve que il est beaucoup plus efficace d'accord et je maîtrise

Speaker A

beaucoup mieux le design mais il faut commencer quelque part. Donc je te conseille de commencer par là d'abord et de laisser Liat t'aider à faire la majeure partie du travail. OK, maintenant qu'on a nos designs, qu'on a nos inspirations, on va faire quelque

Speaker A

chose de malin. On va pas vraiment demander à Lia de coder directement. Ce serait très bête de faire cela. Nous, on va faire les choses de manière professionnelle. Donc, on va d'abord lui demander de planifier. Pourquoi on lui

Speaker A

demande de planifier ? Parce que un plan de de de travail, un plan de développement bienfait, c'est 80 % du travail. Donc, s'il y a un plan détaillé, elle va mieux coder, elle fait moins d'erreurs et elle a le un résultat

Speaker A

beaucoup plus cohérent. Elle sait ce qu'elle fait. Donc moi ce que je fais, j'ouvre, j'utilise Cloud Code généralement pour tout ce qui est planification parce que en fait selon mon expérience Cloud Code il est beaucoup plus intelligent pour ça. Donc

Speaker A

sur les premiers modules, je t'ai déjà montré comment installer Cloud Code antigravity et cetera, mais je t'explique généralement les différents modèles et selon moi quel modèle fait quelle tâche le mieux. Donc j'ai généralement j'utilise Cloud Code pour tout ce qui est planification parce que

Speaker A

je trouve qu'il est qu'il est beaucoup plus fort d'accord pour ça. Donc je lui donne un prompt genre tu es seigneur hashtag réfléchis et génère un plan d'implémentation. Je vais lui donner un prompte beaucoup plus complet que ça.

Speaker A

D'accord ? Je et dans ce prompt je lui donne aussi mon design loop. Je vais te donner le prompt que je vais utiliser dans le document encore une fois ne t'inquiète pas. Et pour tout ce qui est le UI, d'accord ? Pour tout ce qui est

Speaker A

le front end, j'utilise généralement Gemini euh sur anti gravity directement parce que je trouve que Gemini est beaucoup plus fort aussi pour ça. Bien vrai que on a un cloud code qui est aussi disponible directement sur Gemini mais comme je t'ai dit selon mon

Speaker A

expérience euh je sais pas si c'est par design ou bien Google a fait exprès mais je trouve que les modèles Cloud Opus Cloud Cloud qu'on utilise directement dans Géini ils sont pas trop intelligents. C'est c'est vraiment c'est juste mon expérience et je trouve que je

Speaker A

gagne beaucoup plus de qualité au niveau du code quand j'utilise directement Cloud chez chez et que quand j'utilise directement Gemini chez Google. D'accord ? Parce que j'utilise le modèle de chacun, d'accord ? et voilà sur leurs propres outils et moi tout simplement

Speaker A

derrière je me positionne comme un chef d' d'orchestre et je dis au zya quoi faire et ils le font et c'est aussi simple que ça. Donc ce que je vais faire c'est que je vais tout simplement aller sur antigravity et je vais te montrer

Speaker A

comment je fais tout ça. Donc ça c'est juste un exemple de probl que tu peux utiliser. Il marche bien mais je trouve qu'il y a pas assez de détails. Donc moi sur mon prompt il y a beaucoup plus de

Speaker A

détails et tu vas le voir tout de suite. OK donc là on est sur antigravity.

Speaker A

D'accord. Donc on va ouvrir un petit gravity. Et une une fois que je suis là, la première chose que je fais toujours comme tu l'as vu, c'est que je je crée un nouveau un nouveau dossier. Donc je vais faire tout simplement open folder

Speaker A

et là je vais faire nouveau dossier et ce dossierlà je vais l'appeler Easy Facture. D'accord ? Et je vais ouvrir le dossier. Donc là on a tout nouveau dossier et tout le travail qu'on va faire sera fait sur le dossier easy

Speaker A

facture. C'est ici que sera le code et cetera. Maintenant ici on a Gemini. D'accord. Donc en fait ici on a tout simplement l'agent de antigravity et ici sur le modèle sélectionné, tu peux voir que j'ai il y a Gemini 3.1 high et là je

Speaker A

peux utiliser Cloud directement ici avec Clode opus mais comme je t'ai dit ce modèle là je le trouve pas trop intelligent donc moi ce que je fais je j'ai j'installe Cloud donc je l'ai déjà fait hein donc dans le dans les premiers

Speaker A

modules donc je viens ici je clique sur l'icône cloud une fois que tu l'installes c'est bon donc je fais nouvelle session et là ça m'ouvre cloud ici. D'accord ? Donc là, j'ai Clou d'ouvert. D'accord. Donc je vais un peu

Speaker A

rétrécir le terminal. Là, ce que je vais faire, c'est que je vais déjà uploader, lui donner les captures que j'ai fait, d'accord ? Donc les deux captures d'écran qui sont là. Donc là, tu peux voir, il y a euh Easy Facture, euh il y

Speaker A

a le la landing page et ici, on a le dashboard. Donc, je vais lui donner ça juste comme référence et je vais lui donner ce prompt là. Donc euh ici, je m'efforce de voir quel est le modèle que

Speaker A

j'utilise. Donc moi, j'utilise le modèle par défaut, d'accord ? Donc c'est le opus 4.6 avec 1 million de contextes.

Speaker A

Donc euh voilà, c'est ça que j'utilise. Donc là, je lui donne ce prompt. Donc je lui dis "Tu es un architecte logiciel et designer seigneor de classe mondiale avec plus de 15 ans d'expérience dans la conception d'application de SAS de haute

Speaker A

qualité. Tu as conçu des produits pour des entreprises de premier plan." Donc ça c'est un peu tu lui donnes un rôle, c'est très important. Généralement quand tu fais ça, tu as beaucoup plus de qualité dans ton output. On va

Speaker A

construire un SAS full stack de facturation pour les entrepreneurs africains. C'est très important que tu fasses bien. C'est un produit que de vrais utilisateurs vont utiliser pour gérer leur argent. Et en tant qu'utilisateur, on veut pouvoir euh voir

Speaker A

toutes les factures et les statistiques dans un beau beau dashboard. D'accord ? créer de nouvelles factures, euh gérer une liste de clients, suivre les statuts des factures, donc brouillon, envoyer, payer en retard, configurer les paramètres de l'entreprise, euh tout ce

Speaker A

que une application de SAS de facturation classique inclurait. Donc le SAS doit utiliser NextJS, Superbase pour la base de données, l'authentification et Telwin CSS. Euh et on va déployer sur Verset. Donc je lui dis ici, je définirai l'Ux via des captures d'écran.

Speaker A

Don ne t'inquiète pas euh des détails de design pour l'instant. Le flux sera d'abord on construit les fonctionnalités principales en utilisant les capture d'écran comme inspiration design. Tu prendras le style de design de captures et tu l'utiliseras pour construire

Speaker A

toutes les pages connectées. Ensuite, on rendra le dashboard interactif avec des données locales et on s'assurera que les routes fonctionnent bien. Donc ça c'est la deuxième phase. Ensuite, on ajoutera la base de données et les tests avec Superbase. Ensuite, on va ajouter

Speaker A

l'authentification. Ensuite, on fera une landing page et finalement, on fera un passage de bout en bout pour s'assurer que tout fonctionne bien. Donc là, euh ici, je lui dis réfléchis fort. Exact.

Speaker A

Bon, en fait, tu peux voir que c'est vraiment un prompt qui est assez assez solide. Euh généralement, vu que là on va juste faire de le dashboard, je ne vais pas lui donner la landing page, je vais juste lui donner le dashboard. Et

Speaker A

là, je lui demande d'entrer en mode plan mode, d'accord ? plein mode. Ici, il va créer le plan et c'est ce plan là dont j'ai besoin. Donc, je fais entrer. Et là, on va juste attendre qu'il termine.

Speaker A

Il va nous créer un plan d'implémentation de notre sas et c'est avec ce plan d'implémentation là qu'on va passer à la création de notre OT.

Speaker A

Donc là, il va me demander, il va juste te poser des questions et à chaque fois tu fais juste yes. Tu fais juste yes et là, tu veux voir il y a plein de trucs qui t'écrit. il est en train de de

Speaker A

réfléchir, il est en train d'utiliser ses ses outils et il va tout simplement commencer à créer le plan d'implémentation. Donc on attend qu'il termine. Généralement, si tu fais ça, tu peux tout simplement te lever, aller te faire un café en attendant qu'il

Speaker A

termine. Ça peut prendre plus ou moins du temps. Ça dépendra de de la en fait de la lourdeur de la tâche. Et vu que tu lui dis de bien réfléchir, il va aussi prendre ton temps. Donc on attend qu'il

Speaker A

termine et on va voir ce qu'il va nous proposer. Donc là, comme tu peux le voir, il m'a fait un plan d'implémentation complet. Donc là, il a le contexte, d'accord ? il te donne la structure du projet. En fait, c'est pour

Speaker A

ça qu'il faut toujours faire le plan parce que là, tu peux même voir quelle sera la structure du projet. Et du coup, Liana n'a en fait la liravité, il va pas en fait, il va pas avoir le choix, il va suivre exactement ce qu'on

Speaker A

lui demande de suivre. Donc, il va pas halluciner et cetera. C'est tu as vu là, c'est les composants. Donc là, on aura les tout ce qui est UI. Donc là, il y aura aussi les composants pour tout ce

Speaker A

qui est les invoice, les clients dashboard et cetera. Là, il lui donne des tables à utiliser dans la base de données. Donc comme tu peux le voir, donc comme je t'ai dit, une base de données, c'est juste des tables.

Speaker A

D'accord ? Et chaque table, il y a une table qui va gérer les profils, une table qui va gérer les compagnies, une table qui va gérer les clients et ils vont tous être reliés en fait conn interconnectés par l'ID, d'accord ? un

Speaker A

utilisateur sur la table de profil, un utilisateur avec un UI ID, d'accord ? On saura exactement quelles sont ces compagnies parce qu'on va juste chercher le le UI ID, le le user ID, d'accord, qui est là. Donc la logique métier et

Speaker A

cetera. Donc là, tu peux tu peux lire hein et voir un peu ce ce qui te ce qui propose. Tu as vu là, il y a les phases.

Speaker A

D'accord. Donc c'est cool ça c'est les phases. Maintenant euh ici il te pose des questions. Donc là tu vas juste presser escape parce que là si tu lui dis yes en fait Claude code lui euh cloud lui-même va se mettre à coder.

Speaker A

D'accord ? On va utiliser antigravity pour ça. Donc là je vais juste cliquer sur escape. D'accord ? Et ce que je vais faire maintenant c'est que je vais je vais tout simplement copier tout ce plan là. D'accord ? Donc je copie tout le

Speaker A

plan d'intégration qu'il m'a donné. Donc une fois que j'ai copié le plan d'implémentation, maintenant ce que je vais faire c'est que je vais aller dans Antigravity, je vais aller dans le chat et je vais coller le plan d'implémentation qui est là et je vais

Speaker A

aller jus en haut, d'accord ? Je vais copier un prompt et je vais lui dire ça ici. Avant de lui donner ça, je vais mettre ça en haut. Je lui dis "Che un designer et développeur front end de

Speaker A

classe mondiale avec plus de 15 ans d'expérience dans la création d'interface. Voici le plan d'implémentation pour notre sas de facturation. Donc je lui donne tout simplement le plan. D'accord ? Je vérifie ici que je j'utilise Gemini 3.1 High. Ensuite ce que je vais faire, bon

Speaker A

je laisse ici planning, je laisse Gemini et là je lui donne je lui donne aussi une la capture d'écran. Donc je lui donne aussi la capture d'écran pour qu'il puisse s'inspirer de la capture.

Speaker A

Et à la fin du prompt, je lui dis je t'ai aussi donné une capture d'écran d'inspiration pour le design. Donc tu vas t'inspirer de cela pour créer notre dashboard. OK, maintenant ce que je fais, voici une astuce. Euh, je lui dis

Speaker A

exactement ce qu'il doit faire en premier, genre quelles sont les pages qu'il doit créer en premier. D'accord ?

Speaker A

Euh par exemple, moi je lui donne ce promte là qui sera aussi disponible. Donc euh euh par rapport à à mon design.

Speaker A

D'accord ? Donc ici, je lui dis commence d'abord par construire le dashboard et la sidebar de navigation. Ensuite, en suivant le plan d'implémentation et en t'inspirant du style. D'accord ? Donc tu lui il y a les visuels de capture. Voici

Speaker A

et je lui donne les règles à suivre. Euh, prends le style de design captures, d'accord ? Typographie et applique-les à toutes les pages. Pour l'instant, utilise les données fictives codées en dur. Pas de données encore. Pas de base

Speaker A

de données encore. Les montants doivent être affichés en francfa. Euh, d'accord ? En fait, tu lui donnes juste des détails et là je fais entrer. Et ici, une fois que je lui donne ça, d'accord, ce que je fais, bah j'attends. Donc

Speaker A

comme je t'ai dit, tu peux aller faire autre chose, mais tu attends qu'il te donne le plan d'implémentation parce que en fait Gemini, une fois que il vu qu'il est en mode planning, bah ce qu'il va faire, il va d'abord te donner un plan

Speaker A

d'implémentation. Il va d'abord analyser ce que je veux faire. Ensuite, il va me proposer un plan d'implémentation. Il va me dire "OK, maintenant c'est ça que je veux faire, ça, ça". Et après moi je vais lui dire OK, vas-y. Et il va

Speaker A

commencer à faire le code. Donc on attend. Yes. Donc comme tu peux le voir basé sur notre prompt, il nous a proposé un plan d'implémentation. Donc initialisation des effectures et construction du dashboard. Donc euh des système et couleur. Je m'inspirerai des

Speaker A

couleurs de la capture d'écran. Euh données de démarrage. Comme demandé, aucune base de données ne sera initiée pour le moment. nous utiliserons des mo data donc de des données juste que mis en dur comme ça afin de valider purement

Speaker A

le design. Donc ensuite proposer change. Donc là il te propose d'accord warning. Souhaitez-vous que nous suppriions les fichiers existants de NextJs comme le contenu global et tac tac. Voilà donc de toute façon on a même pas de fichiers.

Speaker A

Donc là, je dis juste procede et il va commencer à faire euh le code. Donc là, il a réellement commencé maintenant à faire le il va commencer à réfléchir pour faire le le l'application pour commencer à coder en tout cas le front,

Speaker A

c'est-à-dire le euh la partie visible de l'application. Et ensuite, on va juste voir ce qu'il fait. On lui fait des retours, on lui dit modifie ça, on lui fait des retours. Donc c'est une loupe qu'on fait comme je t'ai dit. Donc on

Speaker A

teste et on fait une review et c'est très important. Donc là, tu as vu, il m'a proposé ça. D'accord ? Je fais run tout simplement. Et pourquoi je vois cela tout simplement ? C'est parce que ici au niveau de autoexécution, il y a

Speaker A

request review. D'accord ? Si je fais always proced. D'accord. Maintenant euh il va always proced. D'accord ? L'idée c'est que tu as vu maintenant il a commencé à créer le code, il a initialisé un dossier. Donc là tu peux voir il y a

Speaker A

src, il y a Link, git ignore. Donc on a déjà parlé de ce fichier là, les git ignore. Euh il y a les fichiers de configuration de Next, il y a le fichier Tailwin. Donc Tailwin c'est tout simplement euh une bibliothèque qui nous

Speaker A

permet d'écrire du CSS plus rapidement. Donc on a parlé de CSS euh c'est ce qui nous permet d'avoir des designs jolis.

Speaker A

on va dire sur notre site qui nous permet de designer nos sites. Donc on a les next config, Next PH package. Donc c'est tout simplement des configurations de NextJs. Là il a fait les note modules, donc il a installé les

Speaker A

packages. En fait ce qu'il a fait c'est queil a euh enlevé Cloud et il a tout simplement fait un npm install. Mais bon c'est pas grave. Euh il a pas enlevé cloud, il a juste enlevé le fichier pointcloude. D'accord. Après ça on

Speaker A

pourra le remettre. C'est pas c'est pas très compliqué. Donc c'est un peu la guerre des agents. Donc c'est pourquoi toi tu dois bien orchestrer. Mais on a le plan d'implémentation pour l'instant.

Speaker A

Donc pour ce projet là on va plus réutiliser code Claud. Donc c'est pas grave. Après quand on va vouloir les faire cohabiter, coexister, je te montrerai dans un prochain projet. Quand tu as des on va dire des euh des

Speaker A

fenêtres comme ça, d'accord ? et il te pose une question, tu fais juste accepte tout simplement parce que là il te demande l'autorisation de tout simplement installer quelque chose. Et vu que tout à l'heure j'ai fait Always Proceed mais j'ai pas encore en fait

Speaker A

Always Proceed ne peut pas être appliqué à ce projet cette tasque cette tâche en tout cours parce que j'ai lancé cette tâche là avant de changer les configurations. Donc ça va se mettre ça va se mettre à jour une fois que j'aurai

Speaker A

une fois que cette tâche là sera terminée. Sinon, je peux tout simplement le couper ici et après lui dire continue et il va se il va redémarrer. Mais bon, c'est pas grave. Je le laisse terminer d'abord et j'attends qu'il termine. OK,

Speaker A

donc là il a terminé. Il m'a même créé un walkthough. Donc je pense qu'on a parlé des walkthrough, donc c'est les parcours. Donc à chaque fois qu'il termine une tâche, il va te donner les parcours, il va te dire ce qui a été

Speaker A

construit et cetera. Donc ce qu'on va faire, c'est qu'on va tout simplement h aller voir ce qui nous a proposé.

Speaker A

Généralement ce que je fais c'est que j'ouvre le le local host. Donc je clique juste sur le lien. D'accord ? Il va ouvrir le local host et là waouh !

Speaker A

Qu'est-ce qu'on voit ? Une erreur. C'est une réalité du coding. Donc si tu as peur des erreurs, mon gars, tu vas être euh tu vas avoir les problèmes. Donc et c'est cool que j'arrive à avoir des erreurs comme ça. Comme ça, je te montre

Speaker A

comment les fixer. C'est très simple. tout ce que je fais, soit je fais une capture d'écran, soit je copie tout ça.

Speaker A

Je copie tout ça, je viens et je lui dis "Bon, j'ai essayé de voir là, voici l'erreur que j'ai." Et là, je colle tout simplement. En fait, c'est aussi simple que cela. C'est juste qu'il y a un problème euh de package qui a été

Speaker A

installé et qui n'est pas à jour. C'est ça qui t'excrit. Il y a rien d' Il y a rien d'extraordinaire. Mais à chaque fois que tu auras un problème, d'accord, tu copies le problème et tu peux même faire une capture d'écran pour qu'il y

Speaker A

ait un peu plus de contexte et tu lui les renvoies. Par exemple, là, il est en train de de voir un peu, il va faire les modifications. D'accord ? Et une fois qu'il fait les modifications, peut-être qu'on aura un 2è ou un troisème problème

Speaker A

et on verra encore. Donc là, je fais recharger. Je vois que j'ai toujours ce problème, un autre problème. Donc ça, c'est un autre problème différent. Bah, je copie, je colle, je lui donne. Donc c'est un peu ça le on va dire le test

Speaker A

loop. Et c'est pourquoi c'est très important de toujours tester en local. En fait, c'est très simple. Soit il oublie d'installer les packages, soit il y a un petit problème. En fait, n'essaie même pas de comprendre. Juste copie le

Speaker A

le comment dire, copie l'erreur et donne-lui. Et il va tout simplement voir c'est quoi le souci et il va le faire.

Speaker A

parce que ces erreurslà en fait il y a en fait c'est un problème de CSS parce que là si je lis dans le fichier global.cs il y a Taelwid base qui est là. D'accord ? Donc euh il y a voilà, il a utilisé

Speaker A

une classe qui n'existe pas, donc border border euh qui n'existe pas dans Global CSS. Donc il va faire les modifications.

Speaker A

Donc là, ça fait deux fois que par exemple il a tout simplement dit que il a réglé le problème, mais tu peux voir que le problème il est toujours là. Donc cette fois-ci ce que je vais faire, je

Speaker A

vais tout simplement faire une capture d'écran. D'accord ? Je lui donne la capture et je lui dis ceci. Donc là, c'est la deuxième fois que tu dis avoir réglé le problème, mais tu peux voir toujours que je je n'arrive même pas à

Speaker A

voir le dashboard. Donc euh règle, fixe le problème. Essaie de voir c'est quoi exactement le problème, règle-le et tu peux ouvrir ton propre navigateur pour vérifier avant de me faire un feedback.

Speaker A

Donc comme je te l'ai dit, Antigravity, il a son propre navigateur. Donc normalement, il devrait avoir la capacité de d'ouvrir son navigateur et de voir ce qu'il est en train de faire avant de te dire qu'il a réglé ou pas.

Speaker A

Donc ça c'est un peu les réalités du vibe coding. Ça me rappelle un peu cette image là. D'accord ? Donc là quand tu es en train sur cette phase là, quand la phase dans laquelle je suis, disons qu'on est dans cette phase là, d'accord

Speaker A

? On creuse, on creuse, on creuse, on ne voit pas de résultat, on se dit est-ce que ce qu'on fait c'est bien ? Alors que peut-être que en fait on est en train d'avancer et une fois que tu vas

Speaker A

dépasser cette phase là, que tu auras quelque chose qui marche là, tu pourras déjà tu vas atteindre c'est-à-dire ton objectif. Donc c'est un peu la mentalité à avoir lorsque tu fais du vibe coding.

Speaker A

T lors que il y a des erreurs, c'est pas grave. D'accord ? Tu prends juste le temps de lire, tu donnes à Lia, tu lui demandes de bien vérifier et tout simplement euh tu attends que il te il

Speaker A

te propose des solutions. Donc là, comme tu peux le voir, qu'est-ce qu'il fait ?

Speaker A

En fait, il va ouvrir son propre navigateur. Donc ça, c'est son navigateur qu'il a ouvert. Moi, mon navigateur, il est là. Donc, il va ouvrir son navigateur, il va ouvrir le local host. Donc, par exemple, il va ouvrir le site et là, il va voir qu'il y

Speaker A

a un souci, d'accord ? Et il va checker d'abord avant de te dire que c'est bon.

Speaker A

Donc là, tu as vu, il a ouvert le l'éditeur, il voit que il va voir lui-même qu'il y a un problème, d'accord ? Et il va le régler. Donc ça aussi c'est une des forces de d'antigravity qui fait que tu ne tu vas pas être

Speaker A

coincé un peu dans ce loop tout le temps. Donc là, il a pris une un screenshot, tu as vu ? T screenshot, d'accord ? Et là, il dit un malheureusement le dashboard ne se montre pas parce qu'il y a un problème

Speaker A

de build error. D'accord ? et là il va savoir qu'est-ce qu'il doit faire. Donc ça aussi, on va dire, c'est une des tricks. C'est un c'est c'est une astuce.

Speaker A

Tu peux juste lui dire ouvre ton navigateur et vérifie par toi-même si ça marche avant de me dire que ça marche.

Speaker A

Donc là finalement elle a réussi à vérifier le problème. J'étais en train de manger moi. Tu vois le vibe cing l a boss pour toi et toi tu manges. C'est aussi simple que cela. Il a vérifié que c'est bon et là il te dit ouais là j'ai

Speaker A

vérifié et je suis sûr que j'ai vérifié et je suis sûr maintenant que c'est bon.

Speaker A

Et là aussi maintenant sur notre dashboard, on peut voir que c'est pas mal. Il y a des pages qui n'existent pas tout simplement parce que il ne les a pas encore créé. C'est normal, je lui ai pas encore dit de créer ces pages-là.

Speaker A

Maintenant, on va voir un peu ce qu'il nous a proposé comme design. Donc là, on a la barre de recherche. Ici, on a le total encaissé, facture en attente, en retard et là, on a nos factures récentes. Bon là, je vois quand même pas

Speaker A

mal de soucis à régler. Donc ce que je vais faire, je vais tout simplement prendre une capture. D'accord ? Déjà un très bon début. Je vais prendre une capture, je vais lui donner en contexte et je vais je vais aussi lui donner la

Speaker A

capture de de l'image de référence. D'accord ? Et ici, je vais lui dire, je vais faire un vocal. Je lui dis OK, déjà c'est pas mal. Euh on voit bien qu'il y a un début, mais ici je ne comprends pas

Speaker A

pourquoi par exemple au niveau des cardes, il y a un contour bleu. D'accord. Euh je pense qu'il faudrait s'inspirer fortement pour les composants aussi de de l'image de base dont on a parlé. Je t'ai donné un image d'inspiration. Le bouton tout voir, tu

Speaker A

peux voir que le bouton il n'est pas fini. D'accord ? Il faut vraiment regarder euh tout cela. Il faut que ce soit euh très euh il faut il faut que ce soit très très professionnel. Ensuite euh les icônes en haut total encaissé,

Speaker A

facture en attente. Donc il y a des icônes vert, orange, rouge, bleu, il y a trop de couleur. Donc nous on part un peu sur un un un notion style. D'accord ? Donc l'idée c'est d'y aller un peu

Speaker A

comme Notion. Donc vu que tu as vu sur notre sidebar, je j'aime bien les icônes que tu as utilisé. C'est un peu comme du gris, du noir et du blanc. Un truc vraiment très léché, très bien fini.

Speaker A

Donc euh il faut que tu regardes composant par composant comment tu vas régler cela. Et ensuite une fois quand tu crées des composants, assure-toi toujours de créer un skeleton loader pour ce composant-là parce qu'on va utiliser que du skeleton loader et

Speaker A

assure-toi aussi de la responsivité des éléments que tu crées. J'attends qu'il fasse ce travail et entre-temps, moi je vais manger mes pistaches. Donc super là il vient que il dit qu'il a terminé.

Speaker A

Donc qu'est-ce qu'il a fait ? Première chose, il a euh changé les icônes ici.

Speaker A

Il a changé, il a amélioré le bouton mais il n'a pas changé le contour des éléments que je lui avais demandé de faire. Donc là, ce que je vais lui dire, c'est ça. Donc c'est bien là, on a un

Speaker A

bon départ sauf que je vois que tu n'as pas tu n'as toujours pas euh changé les composants et les contours des composants. Ils sont toujours bleus. Je je ne vois pas l'intérêt. Le bouton tout voir, il peut adopter la le même style

Speaker A

Notion L comme des boutons sur notion. La barre de recherche en haut, elle est pas elle est très simple. Peut-être qu'on peut l'optimiser avec une animation sur l'icône de loop on focus quand je clique sur pour faire une

Speaker A

recherche. Ensuite, euh surtout concentre-toi bien sur les composants et les contours des composants. Je veux un style de design flat. Donc on part sur du flat design et aussi pour les factures récentes, tu vois, au niveau des statuts payer, envoyer et cetera, je

Speaker A

veux que ce soit arrondi sous forme de pills. D'accord ? Donc fais-moi ça. Donc encore une fois, ce qu'on fait, c'est juste on attend que termine. OK. Donc là, il vient de dire qu'il a terminé et là, on se rend compte que c'est encore

Speaker A

pire que ce qu'on voulait. Déjà, il a changé le menu latéral parce que c'est sûrement parce que je lui ai dit de faire du flat design mais en plus regarde, il y a des choses qu'il a bien fait. Je regarde le bouton tout voir,

Speaker A

maintenant il est bien. Euh quand je clique sur rechercher une facture, il y a une petite animation. Tu as vu, c'est pas mal. Mais il y a toujours ce contour là. Et je pense que je vais te montrer

Speaker A

une astuce que je fais généralement pour aller très rapidement. Je fais contrôle, clic droit et je fais inspecter. Et là, ce que je fais généralement, c'est je vais aller voir, je vais cliquer sur un composant pour voir qu'est-ce qui cause

Speaker A

cela. D'accord ? Donc, tu n'as même pas besoin de trop comprendre. Écoute, regarde bien ce que je fais. Je clique quand je je suis sur Google Chrome.

Speaker A

D'accord ? Donc je clique sur un élément. D'accord ? Je clique ici sur ce sur cette icône. Maintenant je clique sur un élément par exemple. Je clique sur cet élément là. D'accord ? Je clique dessus. Une fois que je clique dessus,

Speaker A

automatiquement ça c'est tout le CSS de cet élément là. Donc si je veux voir le CSS de cet élément, je fais je clique dessus comme ça. Et là je vais voir le CSS de cet élément. Donc le CSS c'est le

Speaker A

style quoi parce que tout ça c'est du style, le bouton, la les couleurs, les contours et cetera. Donc je clique dessus et ça va me montrer les CSS ici.

Speaker A

Maintenant tu as vu je peux activer le navigateur me donne la possibilité d'activer et de désactiver euh de le style de d'un élément, tu vois, pour voir un peu à quoi ça ressemble. Donc par exemple, disons que je désactive

Speaker A

cela. Tu as vu euh ça ? Ce texte là, il devrait être plus petit mais vu que je l'ai désactivé bah c'est parti.

Speaker A

Maintenant, je le réactive. Tu as vu là il est retourner. D'accord ? Parce que ce style là s'applique à tous ces éléments. Maintenant moi ce que ce qui m'intéresse, c'est ce contour là. Donc là, je vais voir il y a un truc que qui

Speaker A

s'appelle ici ring 1. Donc je vais désactiver. Je désactive. Ah voilà. Tu as vu ? Donc là on sait exactement maintenant quelle est la cause. Donc la cause c'est cet élément là. Donc c'est ce style-là W ring Shadow. D'accord ?

Speaker A

Donc maintenant ce que ce que je vais faire, je vais copier ça et je vais tout simplement lui dire "OK, le menu latéral, tu l'as changé, remets-le exactement comme il était." Et en plus, voici l'élément qui fait que euh voici

Speaker A

l'élément que tu dois désactiver sur le CSS. Je vais te le coller. Et là, je colle l'élément. D'accord ?

Speaker A

Généralement, tu n'as pas besoin de faire euh tout ça, d'accord ? Mais des fois, il arrive que tu as besoin quand même d'ouvrir et d'inspecter. Donc là, je t'apprends un peu comment on débug pour aller plus rapidement. Sinon, si tu

Speaker A

insistis, d'accord, il allait le voir tôt ou tard. Mais je moi personnellement, c'est un peu avec l'expérience, ça vient. Tu sais comment c'est facile, tu fais juste clic droit, tu fais inspecter. D'accord ? Et là, tu fais tu sélectionnes cette icône là pour

Speaker A

pouvoir sélectionner des éléments. Et là, c'est visuel hein. Tu sélectionnes juste un élément. Et une fois que tu sélectionnes par exemple cet élément-là, tu viens ici sur STS et tu désactives.

Speaker A

Tu actives jusqu'à ce que tu vois c'est quoi le souci, d'accord ? Tu peux jouer avec pour voir en fait euh chaque chose il fait quoi. D'accord ? Et tu peux même euh bon après si tu es s'il est

Speaker A

développeur, si tu es développeur, tu sais exactement de quoi de quoi je parle. Donc là, je vais attendre qu'il termine. Donc là, tu as vu, il a remis le dashboard exactement comme il était.

Speaker A

Et maintenant, il a désactiver cette couleur làà trop forte qui euh voilà qui qui faisait que notre design n'était pas assez joli. Là, je pense qu'on a quelque chose d'assez slick, comment on dirait ?

Speaker A

On a quelque chose d'assez professionnel. Ça c'est un dashboard très professionnel. Il y a rien à dire.

Speaker A

Ça ça donne toutes les informations et ça marche. D'accord ? Donc là, si on voit est-ce que c'est responsif, c'està-dire que sur mobile comment ça va s'afficher. Tac. Tu as vu ? C'est aussi responsif sur mobile. Là, quand j'ouvre

Speaker A

le menu, voilà, donc là il y a un problème avec le menu sur mobile. Donc je vais juste faire une capture.

Speaker A

D'accord, je fais une capture. Donc, tu as vu le le menu, il y a un problème de spacing.

Speaker A

Euh voilà, c'est pas assez pro, c'est c'est pas assez bien fait. Donc là, je je j'attends qu'il termine. D'accord.

Speaker A

Là, il a pas encore fini. Mais en attendant, je prépare mon prochain message. Je lui donne la capture que je viens de faire qui est la capture du mobile et je lui dis "OK, maintenant il faut que tu vois le menu mobile parce

Speaker A

que le menu mobile, il y a beaucoup de problèmes. Il y a des problèmes de spacing, il n'est pas très bien géré.

Speaker A

Donc corrige-moi cela." Donc là, elle a terminé. Ce que je vais faire, je vais tout simplement lui envoyer ce message là. D'accord ? et j'attends qu'il va me régler le le menu mobile. Sinon, le menu sur desktop, sur ordinateur, il marche

Speaker A

très bien. OK. Là, il vient de dire qu'il a terminé. Ce qu'on va faire, c'est on va en fait soit tu peux rétrécir ici, soit pour avoir une meille meilleur aperçu, on va faire encore clic droit, on va faire inspecter. D'accord ?

Speaker A

Je te donne une astuce et ici tu peux simuler un appareil mobile. Donc je fais ça. Je vais par exemple simuler euh si tu vois rien et si tu vois pas tous ces tous ces appareils là, tu fais juste

Speaker A

modifier et là tu vas sélectionner les appareils. D'accord ? Tu sélectionnes les appareils que tu ne vois pas, ils sont tous ici directement disponibles dans ton navigateur. Donc une fois que je fais ça, je vais venir je vais

Speaker A

choisir par exemple, on va dire allez, je vais choisir un iPhone 12 Pro. OK.

Speaker A

Tac. Donc sur iPhone 12 Pro, notre site va s'afficher comme ça. C'est bien. Et le menu tac. Voilà, tu as vu ? C'est bon. C'est maintenant c'est bien spacé, c'est bien fait. La seule chose qui change, c'est le logo parce que le logo

Speaker A

principal, il est noir et ici il est bleu. Mais bon, ça c'est pas grave. Ça c'est rapidement gérable parce que là, tu as vu le même logo, il est là. Donc je peux lui dire juste utilise le même

Speaker A

logo sur le menu euh desktop, donc sur le menu ordinateur que sur le menu mobile. Et ça, ça sera géré. Mais là, on a euh tout simplement bien fait le dashboard. Les autres pages n'existent pas encore, c'est normal, on les a pas

Speaker A

encore créé parce que comme je t'ai dit dans mon prompt, je lui ai dit de créer juste le dashboard et c'est sur ce dashboard qu'on va se baser pour créer les autres pages. Généralement, je déconseille de dire à Lia de créer toute

Speaker A

l'AB d'un coup, d'accord ? Parce que là, il va se perdre. Tu as vu tout le travail qu'on a dû faire pour avoir le design qu'on veut sur rien que sur ce sur le dashboard, il faut faire page par

Speaker A

page. Maintenant, une fois qu'on a une page qui ressemble bien à ce qu'on veut, on va créer ce qu'on appelle un design système. Donc des règles de design. Et c'est sur ces règles qu'on va se baser pour les autres pages. Donc c'est une

Speaker A

astuce de de Vibe Coder Pro. D'accord ? Donc maintenant que j'ai ça, je vais lui dire maintenant fais quelque chose. Je vais lui dire OK maintenant c'est bien pour le mobile juste que le le logo sur le navigateur mobile il est bleu alors

Speaker A

que le le logo sur le desktop il est il est noir. Donc il faut uniformiser les couleurs des logos. D'accord. Et ensuite, je veux que tu ajoutes de petites animations. Euh euh déjà, par exemple sur le bouton tout voir, quand

Speaker A

je fais un hover dessus, je veux que on va inverser les couleurs. Par exemple, le texte va devenir blanc et le fond va devenir noir. Par exemple, sur ce bouton là. Et maintenant sur mobile, tu peux voir que le bouton tout voir, d'accord,

Speaker A

il est il est pas très adapté, il est trop il est trop large parce que le texte n'est pas n'a pas été bien géré de manière responsive. D'accord ? Donc je veux aussi que tu me gères cela et

Speaker A

ensuite une fois que c'est bon, tu me dis et et si tu vois aussi de petites animations qui devraient être ajoutées sur le dashboard, tu le fais aussi. Donc là voilà, il va nous gérer en fait cees derniers réglages là. D'accord ? Donc il

Speaker A

va régler ce bouton là parce que je trouve que ce bouton en fait il est pas bien géré. Sur desktop. Je veux que quand je mets ma souris dessus, je veux que le fond devienne noir et le texte

Speaker A

devient blanc, genre que ça inverse les couleurs. Donc il va faire ça aussi. Et ensuite voilà, on va voir comment on va gérer les pages suivantes une fois qu'il termine. Donc pendant qu'il le fasses, tu peux prendre une petite, tu veux

Speaker A

boire de l'eau, tu veux faire ce que tu veux. En fait, le vibe coding c'est ce qui ce qui est cool, c'est que ça t'empêche pas de faire quelque chose à côté aussi, tu vois ? parce que tu

Speaker A

donnes à un travail, il le fait en attendant toi tu peux faire autre chose.

Speaker A

Donc l'idée c'est tu te vois un peu comme un product manager, tu vois, tu manages une équipe, tu as tu as des développeurs à ta disposition juste que toi tu dois savoir exactement qu'est-ce que tu dois leur dire comme comme promte

Speaker A

d' comme tâche à exécuter et ils vont le faire. Donc là on attend qu'il termine.

Speaker A

Tac. Et on va voir ce qu'il nous a proposé. Donc là, je reviens. Tu vois, il a presque fini. Mais on va voir déjà s'il a fait ce que je veux ici. Donc si je viens, je mets ma souris. Tac. Tu

Speaker A

vois déjà ça c'est cool. Moi, j'aime bien. D'accord. Ça c'est pas mal. Euh et tu as vu, il a il a fait de petites animations aussi sur les cartes. Quand je mets ma souris sur les cartes.

Speaker A

D'accord. Ça ça fait euh ça fait un petit effet de hover euh d'animation comme s'il s'est levé. Tu vois, ça c'est des petits trucs qui font que tu vois ton design est beaucoup plus professionnel, on va dire. Donc moi,

Speaker A

j'aime bien. On va voir maintenant sur mobile le bouton. Tu as vu tout voir ?

Speaker A

Tu as vu la la manière dont il l'a géré ? En fait, il est trop intelligent. Euh c'est pour ça que j'aime bien utiliser Gemini 3.1. C'est-à-dire que au lieu d'essayer de de voir de complexifier, il a tout simplement fait un redesign de de

Speaker A

cette partie là pour que le bouton soit bien aligné. Et là on a quand même quelque chose de très propre. Tu vois, il a changé le logo, il a uniformisé les logos ici et là je pense qu'on est bon.

Speaker A

Là on a un dashboard qui est, on va dire qui est pas mal. On a un dashboard qui est pas mal. Maintenant, ce que je vais faire, une fois que j'ai un design qui me plaît bien, je vais te donner une

Speaker A

astuce que je fais pour ne pas avoir à refaire tout tout le temps la même chose sur toutes les autres pages, genre change la la bordure, la couleur et cetera. En fait, il a il sait déjà en fait ce que je veux parce que sur le

Speaker A

dashboard, on a conçu quelque chose. Ce que je vais faire, c'est que je vais lui dire maintenant ce que je veux, c'est que tu regardes ce qu'on a fait sur le dashboard, d'accord ? Tu me construis une rules, d'accord ? une règle an

Speaker A

gravité dans dans le dans l'é construit une règle qui va forcer euh que toutes les autres composants qui vont être créés vont suivre le même design système. Donc tu vas créer un design système qui va inclure euh les éléments,

Speaker A

le le animations qu'on a, les bordures, les couleurs de bordure, le style de design, euh les alignements, la respons dashboard. Inspire-toi du dashboard, tu peux explorer tout le code et le CSS du dashboard qu'on vient de créer. Et tu

Speaker A

crées un design une règle avec un design système très précis qu'on va suivre pour toutes les autres pages qu'on va créer sur cette application. Donc là, en fait, qu'est-ce que je lui demande de faire ?

Speaker A

Je lui demande de voir ce qu'on vient de créer, d'accord ? Et de créer une règle qu'on va réutiliser pour toutes les autres pages. Et de cette manière, ça c'est une astuce que j'utilise pour avoir quelque chose d'uniforme, d'accord

Speaker A

? Une uniformisation de mon design. C'est pour pas c'est pour éviter que une page soit noire et une autre page est grise, une autre page est violette. Euh en fait, généralement si tu dis faire ce qu'il veut, il va tout simplement faire

Speaker A

ce qu'il veut. Donc ça c'est des choses que tu fais pour en fait le contraindre à faire toi ce que tu veux. Donc l'idée c'est comme je te dis, c'est toi qui te dirige. C'est pas L qui te dirige, c'est

Speaker A

toi qui te dirige. Et c'est pour ça que je prends la peine de t'expliquer beaucoup de choses, beaucoup de concepts pour que tu saches euh exactement ce qui se passe et que tu saches exactement qu'est-ce que tu dois demander. Et tu as

Speaker A

vu en fait moi-même je suis assez expérimenté dans la création de ça, mais je tombe sur des erreurs. Tout le monde tombe sur des erreurs. C'est pas une que peu importe à quel point ton prompt il est bon, tu auras des erreurs, d'accord

Speaker A

? C'est juste que quand il y a une erreur, comment tu le gères ? Donc je t'ai montré plusieurs manières de gérer une erreur. D'accord ? Et plus on va créer d'autres sasses, plus tu verras on va avancer et toi-même tu prendras en tu

Speaker A

prendras en compétence. D'accord ? Donc l'idée c'est tu vas apprendre en faisant. Donc on attend qu'il termine qu'il me crée le Tu as vu là il est en train de créer une règle. D'accord. Euh j'attends qu'il finisse cette règle là.

Speaker A

Donc là il vient de créer cette règle. On va voir si il l'a mis dans les règles. Tu as vu, il ne l'a pas mis dans les règles. Ce que je vais faire, c'est que je vais accepter. Je vais copier,

Speaker A

d'accord ? Je vais tout simplement copier tout ce qu'il vient de faire, d'accord ? Donc tu peux faire clic droit, copie aussi. Je viens dans rules, je viens dans workspace parce que c'est tout simplement une règle que je veux

Speaker A

activer juste dans ce projet là. Je vais faire always on. D'accord ? Always on, ça veut dire que cette règle sera, il va toujours regarder cette règle avant de faire quoi que ce soit. Et je colle, d'accord ? Je colle la règle. Et une

Speaker A

fois que c'est bon, d'accord, je fais commande ou bien contrôle S pour sauvegarder. Et là, la règle, il est là.

Speaker A

Le design system, il est là. Donc on vient de créer notre design système qu'on pourra réutiliser sur toutes les autres pages qu'on va créer. Donc maintenant qu'on a créé notre dashboard et maintenant qu'on a créé notre design system, donc je vais lui donner un autre

Speaker A

prompt, d'accord ? Euh je vais lui dire de créer de construire les autres pages.

Speaker A

Donc là je lui ai dit le dashboard est valide. Maintenant construit les pages suivantes en gardant exactement le même style de design. Donc page créer une facture, formulaire avec sélection du client, liste déroulante. Date d'émission, section ligne de facture sur

Speaker A

chaque ligne, quantité prix, bouton ajouter en bas et cetera. Page liste de factures, euh une page pour voir les factures, page détail facture, afficher complet avec toutes les lignes, bouton changer le statut. Donc là, je lui donne exactement les pages que je veux.

Speaker A

D'accord ? Je lui dis aussi donc sur la page de de nouvelles factures création de factures. Donc il faudra un peu t'inspirer de du design que je te donne là. Tu peux voir que à droite euh on a

Speaker A

le le preview de la facture et ça doit être un preview en temps réel. Et à gauche, on a les éléments de création de facture. Et ça doit être aussi bien aligné euh comme je viens de te le

Speaker A

montrer et il faut que ce soit aussi responsif. Donc là c'est bon et je lui donne ce prompt là. Donc tous ces prompts-là, ils seront dans le document euh que je vais te donner euh dans euh dans la description. Et euh l'idée

Speaker A

maintenant, c'est que vu que j'ai déjà créé le dashboard et que j'ai un design système, j'ai pas besoin de lui dire "Regarde dans design" parce que vu que c'est always on, il va toujours passer par là, il va toujours regarder ça. Et

Speaker A

maintenant, je lui demande de créer les pages restantes, donc les pages suivantes. Donc on a facture, client, paramètres. D'accord ? Tout ce qu'on a à faire comme d'habitude, on attend qu'il termine, on va voir s'il y a besoin de

Speaker A

refaire un passage. On va refaire un passage jusqu'à ce qu'on ait un design qui correspond à ce qu'on veut réaliser.

Speaker A

OK, donc là, il m'a fait un walkthrough, mais en lisant le walkthough, je vois qu'est-ce qu'il dit. Design système. Je m'inspirerai des couleurs de la capture d'écran dominante accent bleu pour bouton. Donc, je vais faire une note ici, d'accord ? et je vais lui dire, il

Speaker A

faut uniquement te baser sur le le design système qui est dans les rules, dans les règles. Donc ici, je vais tout simplement ajouter ce commentaire là.

Speaker A

D'accord ? Euh et là, ce que je vais faire, c'est que je vais tout simplement lui dire "OK, tu peux passer au plan d'implémentation, mais aussi tant qu'on y est, on va créer aussi les pages mon compte." Donc, il y a la page

Speaker A

paramètres, d'accord ? Et aussi la page aide et support. Donc euh tant qu'on y est, créons ces pages-là aussi. On va aussi euh et les pages facture et clients comme je te l'ai donné. Donc on va tout implémenter un seul coup et

Speaker A

regarde dans les règles euh les rules et suis exactement le design système qui est dans le rules pour l'implémentation de toutes les pages. Généralement, il va passer par comme je t'ai dit, il va passer par les rules parce que la rules,

Speaker A

je l'ai mis always on. Donc il il s'active toujours. Mais voilà comme on dit, il veut bien frapper pour s'assurer que le clou est est bien enfoncé. Donc là on attend qu'il termine. OK. Donc là il vient de me dire qu'il a terminé.

Speaker A

D'accord. Donc euh il a dit voilà, il m'a il m'a fait les pages et cetera.

Speaker A

Bon, tu peux lire hein. Donc euh moi ce que je vais faire c'est que je vais tout simplement aller directement sur le site et on va voir ce qu'il m'a fait. Donc là je vais aller sur facture. Tac. Donc là

Speaker A

tu peux voir que c'est pas mal. Voilà, il y a quelque chose qui marche pas ici.

Speaker A

Donc ça c'est normal. Je pense qu'on l'a pas encore géré. C'est le fait de gérer les options. D'accord. On ne l'a pas encore fait parce que je lui ai pas donné ça. D' bouton créer une facture.

Speaker A

Donc je vais cliquer dessus. Je vais aller je vais cliquer sur créer une facture. On va voir. Tac. Ah voilà. Là on est bien. Tu as vu, je peux sélectionner les clients qui sont là. Si j'ai des clients. Donc ça c'est des

Speaker A

c'est J'ai pas encore ces clients là et c'est pas encore fait. Mais t'inquiète ça on va gérer ça. Là c'est les calendriers. Ça aussi, je vais modifier ça. Je peux ajouter une ligne. Donc déjà là, ça marche bien. Tu vois quand

Speaker A

j'écris ça vient ici. D'accord ? Quand je fais un prix, tac, le prix s'affiche ici. Donc déjà, c'est pas mal. Euh je vais voir les clients. Donc ça, c'est mes clients. Ça aussi, ça va pas marcher normalement. Tu as vu ? Ouais, ça marche

Speaker A

pas. C'est normal. Donc je vais actualiser la page paramètres. Elle marche bien. Entreprise référence.

Speaker A

D'accord. Donc il y a un souci ici. On va voir ça. Aide et support. Ça c'est les informations du créateur du SAS quoi pour que les gens puissent le contacter.

Speaker A

Et une documentation qu'on peut ajouter ici. Donc là c'est pas mal. Donc là on peut voir déjà que le design qu'on a, tu vois, il est constant. Tu vois ça c'est très important comme je t'ai dit que le

Speaker A

design soit constant. Il est constant. Ici tu peux voir que sur le dashboard, tu as vu comment les composants ils sont. Bah c'est de la même manière dont ils sont ici et pareillement ici aussi.

Speaker A

Et ça c'est très important pour la constance. Donc maintenant ce que je vais faire c'est que je vais lui faire un retour pour lui demander de me faire certains détails.

Speaker A

Donc là euh j'ai vu que tu as euh fait les pages donc facture et client. Euh par contre les boutons d'option donc lorsque je clique sur les trois points pour voir les options d'une facture, ça ne marche pas. Ça fait cracher l'app.

Speaker A

Parément aussi pour les clients, les boutons d'option ne marchent pas. Donc il faut régler cela. Ensuite les filtres, il faut voir que les filtres marche bien. Donc ouais, les filtres marchent bien. Ensuite, sur les factures, il faut euh afficher, comme on

Speaker A

a dit, il faut afficher au moins une vingtaine d'éléments par page avec de la pagination. Un bon élément de pagination. Pareillement pour les clients, la barre de recherche doit bien marcher, d'accord ? Facture et client.

Speaker A

La barre de recherche doit fonctionner aussi. Au niveau des paramètres, tu peux voir qu'il y a un problème. Tu peux utiliser ton navigateur pour voir sur desktop et même sur mobile. Il y a un gros souci au niveau du sélecteur

Speaker A

entreprise et préférence. Il faut régler cela. Et euh pour la page a de support, pour l'instant, on ne va rien faire dessus mais il me faut régler tous ces éléments-là. D'accord ? Euh aussi sur la page créer une facture, c'est pas mal.

Speaker A

D'accord. Mais le l'élément sélectionné un client, donc le dropdown le dropdown n'est pas du tout optimisé. D'accord ?

Speaker A

Donc il faut gérer l'optim, il faut créer un composant dropdown qui sert à réutilisé sur tous les autres dropdown.

Speaker A

Donc ça c'est un dropdown, donc c'est un menu déroulant tout simplement. Et ici tu peux voir que le calendrier, d'accord ? C'est un calendrier classique. Donc je veux qu'on crée notre propre composant calendrier qui va être utilisé aussi réutilisé partout dans

Speaker A

l'app. Quand j'ajoute une ligne, c'est bien. Euh sur la le preview de la facture, tu peux voir que en fait, regarde, je vais te montrer sur la facture euh tout en bas, tu peux voir que le total est gêné par le texte en

Speaker A

bas. Donc, il faut régler cela. On va voir sur mobile comment c'est implémenté. Donc sur mobile, ici on a les factures, on peut ajouter et là on a l'aperçu.

Speaker A

Donc ouais, c'est pas mal. Et aussi sur mobile, sur mobile, on a le même problème. Tu pourras voir le grand total, il est euh il est gêné par les autres textes. Donc corrige-moi tous ces éléments-l et les boutons d'option

Speaker A

doivent bien marcher. Donc comme tu vois quand j'écris sur le bouton pour voir les options d'action, ça marche pas. Euh le bouton brouillon aussi doit bien marcher, le bouton envoyer aussi doit bien marcher. Par exemple, envoyer une facture et cetera. Donc là, je lui donne

Speaker A

ça et ensuite je viens et j'ajoute les euh captures que j'ai prises. Là, j'ai prise quelques factures et je lui envoie ça. Donc là, on attend qu'il termine et on va voir les changements qu'il a fait.

Speaker A

OK, donc là, il dit avoir terminé. Ça a pris quand même pas mal de temps. Je pense ça a pris une quinzaine de minutes pour qu'il règle tout ça. Donc, tu restes patient, tu attends juste qu'il se termine. D'accord ? Donc là, on

Speaker A

revient sur le dashboard. Donc là, on est sur le dashboard. C'est pas mal. D'accord ? Ici, je vais voir les factures. Donc là, normalement, si je clique sur les toit point, tu vois maintenant, ça marche bien. Euh ici, il

Speaker A

nous a mis une jolie petite pagination. Tu vois, page précédente, page suivante. Là, je peux soit par exemple, si je fais voir le détail, là, il me montre les détails d'une facture. Sachant que voilà, il y a des boutons, il y a des

Speaker A

actions qui ne qui manquent encore. C'est normal. D'accord. Mais là, je peux vraiment venir jusqu'à faire ça. Euh, c'est pas mal. C'est vraiment cool. Pour les clients, c'est pareil aussi. J'ai la liste des clients. Je peux rechercher.

Speaker A

Disons que je recherche à Mina. Tu as vu la barre de recherche marche bien. Je peux voir, je peux pas modifier. J'ai pas encore ça. Ah ouais, je peux modifier. C'est cool. Tu as vu, il a il a même créé ça. Tu vois, c'est vraiment

Speaker A

bien pour l'instant. Donc euh et quand je modifie le bon même si c'est pas encore sauvegardé en base de données parce qu'on a pas de base de données mais on peut voir que ça marche bien les paramètres. Il a pas bien compris je

Speaker A

pense ce que je voulais faire mais bon ça on va le régler. Euh et de support je lui ai pas donné de consigne ici. Donc là en fait déjà on est bon.

Speaker A

Maintenant je vais aller voir sur créer une facture. D'accord ? Tu peux voir que maintenant tu vois le grand total et le texte il les a séparé. C'est bien pour le dropdown. Tu vois, il a créé un dropdown mais je trouve que bon, ça peut

Speaker A

quand même être optimisé. Mais bon, il a créé un composant dropdown pour le calendrier. Il a créé aussi un composant mais je trouve qu' aussi ça peut être optimisé.

Speaker A

Donc là, il nous reste à optimiser le les dropdown, donc les menus déroulants. Il nous reste à optimiser le les dropdown calendrier. Donc les menus déroulants de calendrier. Ensuite le bouton d'action.

Speaker A

Je pense changer de statut. D'accord. Quand je veux changer le statut de d'une facture ou bien modifier une facture, j'ai une page 404. Euh quand je veux faire autre chose, voilà, quand je veux supprimer un client, euh il y a il y a

Speaker A

un problème. La modale quand je veux supprimer un client. Ensuite alors on va faire ça après. La page paramètres je la ferai en dernier. Je reviens. Et ce que j'ai fait c'est que je suis allé sur drible tu vois, j'ai rechercher

Speaker A

calendrier. J'ai juste recherché calendar dropdown. Ça m'a montré des designs et je vois des designs et je fais des captures tout simplement. Et j'ai fait la même chose pour les dropdown normal par exemple, tu vois ?

Speaker A

Comme ça, je peux lui donner des exemples pour que ça aille plus rapidement. Donc là, je viens, je vais lui donner les captures que j'ai fait.

Speaker A

OK. Maintenant, pour les composants que tu as créé pour le calendrier euh pour le dropdown calendrier et le dropdown normal, euh en fait, ils sont pas très bien optimisés. Donc là, je t'ai donné des exemples de design. Il faudra faire

Speaker A

quelque chose de similaire mais en gardant nos couleurs, tu vois les outlines c'est en noir comme comme notre design système. Euh pour le calendrier aussi, un élément sélectionné, il va tout simplement être fond fond noir, tu vois, écriture blanche. Mais l'idée

Speaker A

c'est que on on va tout simplement euh refactoriser ces composants là pour qu'il soi euh pour qu'il soi bien géré.

Speaker A

Ensuite euh au niveau d'une facture, par exemple, quand j'entre dans une facture en particulier, je ne peux pas changer le statut ni modifier la facture. Donc quand je clique sur modifier la facture, ça doit me ça doit m'ouvrir cette

Speaker A

facture-là dans le formulaire par exemple de création de facture mais avec les euh pour que je puisse modifier la facture. Donc il va prérer ce formulaire là avec les informations qui sont dessus pour que je puisse modifier. Et je dois

Speaker A

aussi pouvoir changer le statut. Donc quand je clique sur changer le statut, peut-être ça me montre un euh bon essayer de voir en terme de UX, peut-être ça doit me montrer un dropdown euh ou bien des options pour que je

Speaker A

puisse changer une facture. Sur la page client, lorsque je fais à partir des des boutons d'option que je veux supprimer un client, il en fait il ne me montre pas la modale de confirmation. Donc on doit avoir une modale de confirmation

Speaker A

qu'on va utiliser qui va me dire est-ce que vous voulez vraiment supprimer oui ou non. Donc ça doit je dois pouvoir avoir cette modal là qui sera un composant qu'on va réutiliser sur tous les cas où on a besoin de de

Speaker A

confirmation. D'accord ? Ensuite au niveau des paramètres, je veux qu'on refasse un design complet de la page paramètres.

Speaker A

D'accord ? Fais-moi un refais-moi un design complet de la page de paramètres total. Donc je lui donne ça et on attend de voir qu'est-ce qu' va nous donner.

Speaker A

Donc c'est un peu ça. Tu vas voir que quand tu vas lui donner des tâches, il va il va en faire certaines. Peut-être que d'autres il va peut-être mal les faire. C'est ça ce qu'on appelle le test local. Donc c'est une deux phases que je

Speaker A

t'ai montré. Tu testes en local, tues. Tu testes en local, tuèes jusqu'à ce que tu a quelque chose qui fait vraiment sens, d'accord ? Qui ressemble vraiment à ce que tu veux réaliser. Et là tu passes à l'étape suivante. Donc c'est

Speaker A

étape par étape. Donc tous ceux qui viennent vous dire "Ouais, tu peux venir faire un one shot, d'accord ? tu viens, tu fais juste un prompt et il y a la qui va tout te générer. Soit il va te

Speaker A

générer du AI slop, c'est-à-dire quelque chose qui est truffé de bug, d'accord, qui ne marche pas, la manière dont il devrait marcher et qu'il y aura un design éclaté. D'accord ? Là, nous on a quand même une constance au niveau de

Speaker A

notre design et ça en fait c'est ça, c'est ce travail là qu'on est en train de faire et c'est le même travail que tu vas refaire à chaque fois que tu voudras créer quelque chose. Donc là, il m'a

Speaker A

montré un plan d'implémentation. Je vais lui dire proceed et il va passer au plan d'implémentation. Et si tu veux regarder le plan, je clique dessus. Donc voilà.

Speaker A

Voilà un peu le plan. Donc modify refactorisation du style calendrier pour ressembler au maquette fourni, clean, bordure arrondi, euh date sélectionnée, date d'aujourd'hui, suppression des contours avec application d'icône simple. Donc il veut refaire le calendrier, refaire le select des

Speaker A

clients, modification du dropdown select pour ressembler à l'image que je lui ai donné. Modèle fléo facturation. Donc ce que je lui ai dit, je veux pouvoir par exemple modifier une facture modify remplacement du simple supprimé par des déclenchements de confirme modale. Seule

Speaker A

l'action sur oui supprimera euh le client du tableau. Changer le statut. En fait, tout ce que je lui ai demandé hein, en fait tout ce que je lui ai demandé c'est ça qu'il veut faire. Donc on attend qu'il termine. OK. Donc là il

Speaker A

a terminé. Donc quand je viens sur client et que je fais ça et que je fais supprimer maintenant tac. Tu vois là, il me donne ce qu'on c'est ça qu'on appelle une modale, d'accord ? Donc c'est un composant qui s'affiche euh au-dessus de

Speaker A

notre site, d'accord ? Au-dessus de du du contenu de notre site. Et il nous donne une dialog. Ça c'est en fait ce type de modèle là s'appelle généralement une dialogue box. Donc on te donne on te donne juste des choix annulés, oui ou

Speaker A

non. Donc tu fais ça. Ça c'est très bien à avoir. C'est un très bon UX aussi. la page paramètres. Tu as vu maintenant il a fait une refonte de la page paramètres là maintenant là on discute. Là on a

Speaker A

quelque chose de professionnel c'est très bien joli. C'est du style notion stripe. Donc on a une très belle page.

Speaker A

Euh ensuite ici c'est bon pour le bouton ajouter client. Au niveau des factures. Maintenant quand je clique sur une facture et que je veux changer le statut voilà il y a marqué comme envoyer marqué comme payer. Donc voilà. Bon déjà c'est

Speaker A

pas mal. C'est pas mal pour le moment. Donc euh le bouton modifier, tac, voilà, il ouvre l'élément et sur la page facture avec euh la possibilité de modifier. D'accord ? Donc et le bouton mettre à jour, le dropdown. En fait, il

Speaker A

y avait un problème au niveau du dropdown. Donc je te montre un peu le dropdown. Quand je l'ai testé, il était comme ça. Tu as vu, il était trop grand, il y avait un problème. Donc aussi le calendrier

Speaker A

calendrier aussi avec un problème. Donc je lui ai dit au niveau du dropdown et il n'a pas changé. Le dropdown client ne s'affiche pas là où il devrait s'afficher euh et il est trop grand et je en fait je lui ai juste dit de

Speaker A

corriger cela. Donc là je pense qu'il est en train de faire cela. On va voir le calendrier. Bon, le calendrier, il reste toujours le même.

Speaker A

Voilà, le calendrier, je trouve qu'il est trop étroit. D'accord, il est trop étroit, trop petit. Donc s'il ne le règle pas, je vais comme je vais être obligé de lui demander de refaire le calendrier. Ici, on va voir si la

Speaker A

recherche marche. Tu as vu ? La recherche marche bien. Donc déjà, on a ça de fait. C'est pas mal. D'accord ? On a ça de fait. C'est bien. C'est bien fait, je trouve. sur mobile, on va voir.

Speaker A

Tu as vu ? Voilà, c'est très bien fait sur mobile. C'est juste le calendrier qui euh qui reste. D'accord. Et là, je pense qu'on pourra avancer sur notre design. Ah, date picker. Je pense que là, il est en train de faire le date

Speaker A

picker. Donc, on attend qu'il termine. Donc, des fois, si tu vois des choses comme ça, c'est normal. C'est juste que le c'est le CSS, c'est le CSS qui a sauté ou bien qui s'est déconnecté. Tu attends juste qu'il

Speaker A

termine. D'accord ? On attend qu'il termine et au final si on voit qu'il y a toujours des SIS, on va quand même lui dire. Donc on attend qu'il termine et après on va voir. Donc là il va faire

Speaker A

son walkthrough. Donc lui il va dire qu'il a terminé mais on voit qu'il y a quand même un problème avec le CSS. Donc généralement si tu tombes sur ce type de problème là, tu fais juste une capture comme je suis en train de faire. Donc tu

Speaker A

fais une capture et là je vais tout simplement lui donner la capture et je vais lui dire actuellement c'est ça que je vois. On dirait que le CSS genre les styles ont été déconnectés. Donc regarde le souci. Voilà. Donc là l'idée

Speaker A

maintenant c'est que il va voir d'où vient le souci, pourquoi le CSS ne s'affiche plus comme il devrait. En fait ce que tu vois là, voilà, ça c'est un bon exemple. Ça c'est le HTML. Quand on parle d'HTML, c'est ça, d'accord ? Quand

Speaker A

tu écris ton code en HTML, c'est ça que tu as. Maintenant, c'est avec le CSS qu'on va transformer ça en design terminé. Donc c'est c'est c'est un bon exemple, d'accord, pour que tu puisses savoir c'est quoi le rôle du CSS. Si

Speaker A

s'il y avait pas de CSS, tu aurais des sites comme ça. Ça va marcher mais ça va être très très très joli du tout à voir.

Speaker A

D'accord. Donc là euh on va attendre qu'il règle le problème de style et on va voir un peu ce qu'il nous a fait. OK.

Speaker A

Donc là il me dit quoi ? Il me dit "Va dans ton terminal ou ton serveur il tourne." Bon, comme je t'ai dit, c'est comme ça qu'on ouvre le terminal. Donc ça c'est le terminal. Il me dit euh

Speaker A

"Fais contrôle C." Bon le terminal dans lequel le cont le serveur il tourne, il n'est pas ici. Donc je vais tout simplement lui dire euh "S'il te plaît, fais-le toi-même." Voilà, comme je te dis, des fois, faut pas trop te casser la tête. Si tu

Speaker A

comprends pas, dis-lui juste de le faire lui-même et il va le faire. Et une fois qu'il va réouvrir le terminal, je vais l'ouvrir ici. Comme ça, on aura accès au terminal. Là, je viens, je clique sur relocate et là, ça l'ouvre ici. C'est

Speaker A

ici que le terminal il tourne. Je fais relocate. Donc là, on a notre terminal.

Speaker A

Donc c'est là notre app qui est en train de tourner. Tu as vu ? Il est en train de tourner sur le port local host.

Speaker A

Donc on actualise et si tout se passe bien, si on a de la chance, le souci là c'est bon, le souci a été réglé. Là, on va voir le calendrier. Tu as vu ? Je pense que c'est le calendrier notre

Speaker A

dernier souci ici. Donc je vais prendre une capture du calendrier et là je vais lui dire je vais lui donner les le calendrier mon calendrier ensuite et le calendrier comment j'aimerais qu'il soit d'accord sur la capture que j'ai pris sur dribble et je

Speaker A

vais lui dire donc tu peux voir que notre calendrier a pas mal de soucis étroit les éléments ne sont pas bien alignés ils ne ressemblent en rien au design que je t'ai donné d'accord donc je t'ai donné un design Donc je te le

Speaker A

redonne aussi pour que tu puisses t'inspirer dessus. Je veux que notre calendrier soit similaire à ce design là, qui soit responsif, qui s'affiche bien au-dessus au-dessous des éléments et que euh en tout cas que ce soit quelque chose un composant très bien

Speaker A

fait selon l'image que je t'ai donné. Donc je vais voir aussi s'il y a quelque chose d'autre que je veux qu'il fasse.

Speaker A

Là on peut voir que ici ça marche bien au niveau des factures aussi les clients. OK les paramètres. paramètres aussi c'est pas mal. Bon et des supports. Bon après on pourra voir ça après. C'est pas vraiment urgent. Euh

Speaker A

ouais donc je pense que il nous reste juste ça les gars. En tout cas au niveau du design si on arrive à gérer ça. Voilà ici aussi quand je suis sur sur le sur le menu latéral lorsque je suis sur une

Speaker A

page je voudrais que ça vienne sur cette page là. aussi sur le menu latéral.

Speaker A

Lorsque je suis par exemple sur client ou bien sur une autre page, c'est toujours le dashboard qui est qui qui est qui est sélectionné on focus, c'est-à-dire c'est toujours le dashboard qui a le fond euh gris comme s'il était

Speaker A

sélectionné. Euh il faut que ce soit dynamique lorsque je suis sur une page, c'est cette page là qui est sélectionnée. Comme ça, je peux savoir exactement sur la page la page sur laquelle je suis. Voilà. Donc on règle

Speaker A

ces deux dernières choses. On règle le fait que si je suis sur facture, je veux que ça soit sur facture, le même style là. Et on a le calendrier. Et ce que tu vois là, ça c'est le front end, d'accord

Speaker A

? Ça c'est le UI. Donc il y a pas vraiment encore de logique, il y a pas encore de base de données. Euh mais c'est tout simplement la base de notre application. Et une fois qu'on aura connecté à notre base de données à

Speaker A

Superbase, là on aura quelque chose qui marche. Et quand je dis qu'il marche, je veux dire qu'il marche pour de vrai. OK, donc là il dit qu'il a terminé. On va repartir. On va voir. Donc là, si je

Speaker A

vais par exemple sur la page de création, je clique sur un calendrier. Voilà, tu vois, là c'est beaucoup mieux.

Speaker A

Là, on a un joli calendrier bien fait, tu vois. Donc là, c'est c'est c'est beaucoup mieux. Donc on a notre composant calendrier, on a notre composant dropdown. Là, tu as vu, ça marche bien. Lorsque je vais dans client, c'est client qui est

Speaker A

sélectionné. Lorsque je suis dans dashboard, c'est dashboard qui est sélectionné et facture. Donc c'est cool.

Speaker A

On a vraiment un peu ce qu'on voulait sur mobile. On va voir quand je vais sur créer une facture. Donc là euh ce que je pourrais améliorer ici, c'est juste le fait de faire que en fait la date

Speaker A

d'échéance et la date d'émission soit sur la même ligne. Tu vois, on va faire que ça va être notre dernière modification. Donc je vais faire une capture. D'accord. Je vais aller voir peut-être sur le dashboard. Ici sur mobile, il y a rien. Ah voilà. Tu as vu

Speaker A

lorsque sur mobile, lorsque je navig ça se ferme automatiquement. Je ne devrais pas cliquer et ensuite fermer.

Speaker A

Quand je navigue, ça doit se fermer automatiquement. Et on va voir. Voilà. Donc ça c'est vraiment bien ici. J'aime j'aime trop comment c'est fait ici. Donc je fais une capture et je lui donne ça.

Speaker A

Je lui donne la capture que je viens de faire et je lui dis OK. Ici dans euh dans le formulaire de création de nouvelles factures sur mobile, je veux que la date d'émission et la date d'échéance soi mis sur la même ligne et

Speaker A

qu' gère le spacing. Et aussi, lorsque je fais une navigation au niveau du menu mobile, quand je clique sur une autre page, le menu doit automatiquement se fermer une fois que la navigation est faite. Sinon là, il navigue et le truc

Speaker A

reste toujours ouvert. Le menu reste toujours ouvert sur mobile. Donc je lui donne ça et on attend de voir les dernières modifications si Dieu le veut.

Speaker A

OK, donc là c'est bon. Il a dit qu'il a terminé. Donc on va vérifier déjà pour la navigation. Donc là, c'est bon. Tu as vu ? Lorsque je navigue, l'élément se ferme. Je vais aller dans facture et ici, je vais faire créer une facture. On

Speaker A

peut voir qu'on a les deux éléments côte à côte et on a les calendriers qui s'ouvrent comme ça. Donc là, c'est bien, c'est pas mal. On a en fait un très bon UI pour le début de notre SAS.

Speaker A

Maintenant, ce qu'on va faire, c'est qu'on va faire quelques vérifications logiques, d'accord ? De logique et ensuite on va passer à la connexion de notre base de données. Donc, on va commencer à travailler sur le backend et à partir de là, on a quelque chose de

Speaker A

full stack parce que là, on a le UI, donc on a l'application, comment ça s'affiche ? Mais les données qui s'affichent là, c'est pas de vraies données. Ça ne vient pas d'une base de données. On n pas d'authentification.

Speaker A

C'est beaucoup de choses qu'on doit faire. Mais au final, ne t'inquiète pas, on aura un SAS full stack. Et j'espère que là, tu auras compris les détails et les astuces que je t'ai donné. OK, donc maintenant on va faire quelques

Speaker A

vérifications logiques, d'accord, avant de connecter notre application à la base de données. Donc la première vérification ici, c'est lors de la création d'une facture. D'accord ?

Speaker A

Donc je vais aller dans facture, je vais aller dans créer une facture. Maintenant ici l'idée c'est quoi ? C'est lorsque je crée une facture, des fois quand je fais envoyer, c'est pas forcément par email.

Speaker A

Là par exemple, si on est en Afrique, bon les gens envoient généralement les factures par WhatsApp et tout. Moi ce que j'aimerais faire c'est quand je crée une facture, je vais juste faire enregistrer. D'accord ? Je vais faire

Speaker A

enregistrer. Et quand j'enregistre la facture, la facture sera disponible ici au niveau des factures. Mais quand je fais enregistrer directement ici, ça me donne la possibilité, ça m'affiche un bouton ou bien une modale pour télécharger la facture ou bien retourner

Speaker A

aux factures. Comme ça, je peux la télécharger et il va télécharger la facture telle qu'elle normalement. Donc deuxième chose dans les paramètres quand je mets mes informations, est-ce que ce sont ces informations là qui sont disponibles dans la facture ? Par

Speaker A

exemple ici maintenant j'ai mis 60. On va enregistrer. Donc déjà est-ce que ça s'enregistre ?

Speaker A

Voilà, ça s'enregistre pas. Bon, ça c'est la deuxième modification. La TVA, je veux la mettre comment dire euh variable. Ici, c'est 18 %, dans d'autres pays peut-être c'est 24 % 25 %. D'accord ? Voilà. Donc c'est quelques modifications. Donc ça c'est vraiment le

Speaker A

cœur de la fon de l'app, c'est la création de factures et que les factures nouveaux nouvelles euh factures créées s'affiche ici. Et ici dans le dashboard, ça doit aussi refléter les nouvelles factures créées. Euh on va faire ça.

Speaker A

Donc je vais venir ici et je vais lui dire OK. Maintenant ce que je veux c'est qu'on revoit un peu une certaine logique. D'accord ? Par exemple, en commençant par le formulaire de création de facture. Lorsque je crée ma facture,

Speaker A

là le bouton final c'est envoyer. Je ne veux pas d'envoyer, je veux le bouton enregistrer, sauvegarder ou bien créer.

Speaker A

Et lorsque je crée la facture, ça va me montrer une modale euh où ça va me proposer de télécharger la facture ou de retourner aux factures, toujours en utilisant le style qu'on a. Ensuite, quand je repars sur la liste de mes

Speaker A

factures, euh je dois voir la nouvelle facture que je viens de créer. La barre de recherche aussi euh sur la liste des factures. Bon, elle marche bien.

Speaker A

D'accord. Donc au niveau du dashboard aussi, je dois voir la nouvelle facture là-bas. Ensuite, dans mes paramètres euh là où j'ai euh le nom légal RC Ninea, plateau, email de facture pour facturation, téléphone pro. Ces informations, lorsque je les modifie, je

Speaker A

dois pouvoir enregistrer et elles vont se répercuter euh directement sur euh les factures, d'accord ? Sur les factures, sur la création de factures.

Speaker A

Donc euh fais-moi ça, s'il te plaît. Donc là, voilà, l'idée c'est euh je vais lui je vais lui dire entrer et euh il va faire il va faire le travail comme d'habitude et on attend qu'il termine.

Speaker A

OK. Donc là, comme tu as vu, il me propose un plan d'implémentation. Euh je vais juste voir le plan. Donc euh ça c'est ce qui compte faire, les modifications proposées, donc gestion de l'état global avec React, contexte et

Speaker A

local. Bon après voilà, l'idée c'est queil va il va faire ce que je lui ai demandé. Je vais lui dire OK juste OK donc et là il va commencer à travailler.

Speaker A

Il va commencer à travailler pour faire les modifications. Donc en attendant qu'il termine, on va revenir ici. Donc le flux d'une facture, c'est ça qu'on a fait. on a on va changer le flux d'une facture. Donc au lieu d'envoyer

Speaker A

directement la facture, on va la créer, on va la sauvegarder et ensuite on pourra le la télécharger par exemple.

Speaker A

D'accord ? Ensuite le temps qu'il termine, voilà. Donc là, il est en train de travailler. Donc le temps qu'il termine, je t'explique quelque chose qu'on va faire. Donc une fois qu'il aura terminé avant de passer à la connexion

Speaker A

de notre application avec Superbase, il faudra qu'on fasse quelque chose d'assez intéressant. On va lui donner ce prompt là, d'accord ? On va lui dire de créer un fichier gemini.mmd. MD qui résume ce que l'application fait, toutes les

Speaker A

fonctionnalités implémentées, la structure de fichiers, les technologies utilisées, les décisions de design et des instructions pour un futur modèle IA. Ça c'est très important parce qu'en fait il faut que tu comprennes que les IA travaillent selon ce qu'on appelle un

Speaker A

contexte. Donc c'est un peu comme une mémoire qu'ils ont du projet et des fois s'ils se perdent ou bien s'il commencent à dérailler, ils pourront toujours aller voir dans le fichier Gemini.m MD pour savoir euh ce que fait le projet, quel

Speaker A

est l'objectif du projet ou si jamais tu passes d'un modèle à un autre, l'autre modèle pourra tout simplement lire ce fichierlà et rapidement comprendre le projet et ce que le projet est fait.

Speaker A

D'accord ? Donc c'est quelque chose d'assez intéressant. C'est un c'est un peu une astuce que j'utilise tout le temps pour sauvegarder un peu la mémoire des agents euh sur le le l'application sur lesquelles on travaille. Donc tu peux faire une capture ou bien recopier

Speaker A

ce prompt là. De toute façon, je le donnerai aussi dans le fichier en description. Et une fois qu'il aura on aura fait cette certaine vérification logique, on va on va faire ça tout juste avant de connecter notre application à

Speaker A

Superbase. Donc là, il est en train de créer le walkthrough. D'accord, il me dit c'est fait, tu as désormais un système complet et persistant. D'accord, donc on va aller tout simplement revoir ce qu'il nous a fait. Donc pour vérifier

Speaker A

ça, donc là le numéro de téléphone, on va tout simplement aller dans paramètres, on va modifier le numéro de téléphone. Je vais mettre 99 ici, je vais enregistrer. D'accord ? Il m'a dit paramètres enregistrer avec succès. Ça, ce qu'on appelle ça, c'est un une boîte

Speaker A

alerte. D'accord ? C'est une boîte qui qui tout simplement te te te t'informe de quelque chose. Mais ça c'est on va dire la boîte classique du navigateur.

Speaker A

Et ça on veut pas ça. Nous ce qu'on veut c'est avoir notre propre boîte, notre propre alerte box, on va dire dialog quelque chose de de customisé. Donc je vais faire une capture de ça. Maintenant ici j'ai mis 99. Donc je reviens dans

Speaker A

facture. Je vais créer une facture et tu vas voir 99. Donc c'est bon là, c'est logique. Là je vais juste créer quelque chose de générique. Je vais faire quantité 1. Je vais faire un prix par exemple à 2000. D'accord. Donc là c'est

Speaker A

bon avec la TVA. Je fais enregistrer. Et là tu as vu facture créée avec succès retourner télécharger. Donc fonctionnalité téléchargement PDF à venir. Donc le téléchargement de PDF ne marche pas encore. Ça c'est bon. C'est pas c'est pas grave. Normalement j'ai

Speaker A

créé la facture. D'accord. Quand je reviens ici dans les factures, donc tu peux voir voilà la facture elle est là.

Speaker A

Là je peux tu peux voir que la facture a été créée deux fois parce que j'ai j'ai cliqué sur enregistrer deux fois. Donc c'est pourquoi la facture a été créée deux fois. Euh donc ça on pourra régler ça une fois qu'on aura créé on aura

Speaker A

connecté notre application à la base de données. D'accord ? Quand je change le statut, marqué comme payer. Tu as vu, le statut, il change. Et ici aussi le statut doit changer. Euh, il ne change pas. Donc je vais lui dire cette détail

Speaker A

là. H donc lorsque je change le statut d'une facture au niveau des de la liste des factures du dashboard, là où les factures sont envoyées, le statut doit doit changer. Et lorsqueune facture est déjà créée euh au niveau du formulaire,

Speaker A

même si je clique enregistrer deux fois, tout ce que ça fait c'est que ça met à jour la facture. Euh ça va pas créer une nouvelle facture. Ensuite vérifie que le la fonctionnalité de téléchargement de d'une facture. D'accord. Est-ce qu'on

Speaker A

peut le faire maintenant ou bien est-ce est-ce qu'il faut qu'on attende connecter euh notre base de données Superbase pour faire cela ? Dernière chose euh lorsque j'essaie par exemple d'enregistrer ou bien lorsque j'enregistre quelque chose dans les paramètres, ça me montre une dialogue

Speaker A

box. D'accord ? Euh il faut pas qu'on ait une dialogue box classique du navigateur. Il faudrait qu'on ait notre composant euh notre composant qu'on a créé. D'accord ? Donc une modale personnalisée pour alerter la personne euh est-ce que les paramètres ont été

Speaker A

enregistrés et cetera. Donc fais-moi ça s'il te plaît. Donc voilà, l'idée c'est on va attendre qu'il fasse certains derniers réglages euh et ensuite on va avancer. Donc je pense que tu comprends un peu ce que je lui ai demandé de

Speaker A

faire. L'idée maintenant, c'est de faire en sorte que lorsque je clique sur euh lorsque je crée une facture et même lorsque je clique enregistrer plusieurs fois, ça va pas créer plusieurs fois la même facture. Ça n'a pas de sens. L'idée c'est qu'il va tout

Speaker A

simplement mettre à jour la facture existante. Ça c'est la première chose. Deuxième chose, lorsque je mets à jour le statut d'une facture, par exemple ici je le marque comme payer, d'accord ?

Speaker A

Ici, ça devrait être payé parce que je l'ai marqué comme payé mais le statut ne change ne change pas ici. Donc normalement avec la base de données tout ça va changer mais l'idée c'est de te montrer un peu comment changer certains

Speaker A

comportements logiques euh de ton application. Donc peu importe le type d'application que tu peux faire, tu as quand même cette même mise là, ce contrôle sur comment ton appreque.

Speaker A

Donc c'est pour ça que je dis toujours quand tu crées euh de un sas avec Lia, euh dis-toi que tu es un peu dans cette cave comme j'ai mis comme j'ai donné l'image euh au début d'une personne qui

Speaker A

est dans la cave et qui creuse et qui creuse au fond, il y a de l'or. Donc il faut toujours creuser, il faut toujours tourner, tester, venir lui dire de de revoir, tester encore jusqu'à ce que tu es exactement ce que tu veux. Donc là,

Speaker A

il est en train de faire les modifications. Donc une fois qu'il termine, on va on va lui donner le prompt dont je t'ai parlé et ensuite on pourra avancer. OK. Donc là, il m'a dit au sujet du PDF pour ta question, voici

Speaker A

maintenant front uniquement, on peut très rapidement activer combiné à CSS. cela isolera ton composant. Donc en fait, on peut faire la génération de PDF mais il m'a dit que avec le backend, c'est la bonne option pour un SAS

Speaker A

mature. Donc on attend de connecter superbase la base de données pour faire ça. On peut rajouter l'option d'impression front endoire de dépinterface bouclée dès le branchement de superp nous remplacerons. OK, d'accord. Donc s'il me propose ça, je vais lui dire

Speaker A

"OK, faisons ça." Donc on va faire on va faire ça. Il va nous proposer, on pourra utiliser juste le front end pour générer les factures. Une fois qu'on aura connecté à Superbase, on aura quelque chose d'un peu plus intéressant. Donc

Speaker A

c'est ça qui est cool. Lui, il te il te propose généralement des options. C'est ça. C'est à toi de voir si tu lui dis oui ou non et après il va avancer. OK.

Speaker A

Donc là, il m'a dit qu'il a terminé. Donc euh lorsque je cliquerai maintenant sur télécharger dans la modale consécutive à l'enregistrement d'une facture, le gestionnaire d'impression de ton navigateur va s'ouvrir. OK. Ensuite, il a dit il a géré le changement de

Speaker A

statut, donc prévenir la création de doublon dont on a parlé. Modal personnalisé pour les paramètres.

Speaker A

D'accord ? Donc on va venir, on va tester tout ça. Donc on part d'abord dans les paramètres, je fais enregistrer. Voilà, paramètres mise à jour. Donc ça c'est tu as vu que c'est beaucoup mieux que ce qu'on avait tout à

Speaker A

l'heure. Donc 2uxè chose, je vais dans les factures, j'entre dans une facture, je fais changer le statut envoyer. Ah ouais, je fais par exemple payer. Voilà, tu as vu, c'est changé en payer. Je viens ici, je fais en retard, je

Speaker A

reviens. Il a pas marqué en retard. C'est juste ici qui prend en compte, on va dire le le changement de de statut.

Speaker A

D'accord. Mais et ici aussi, c'est bien, il le prend en compte, c'est pas mal.

Speaker A

Donc euh on va on va gérer ça une fois qu'on aura connecté la base de données.

Speaker A

Ensuite ce que je vais faire, je vais aller je vais faire création créer une facture. Je vais faire je vais créer n'importe quoi. D'accord ? Je vais enregistrer. Je vais faire télécharger et voilà. Donc bon, il a fait

Speaker A

télécharger mais par contre je vois pas la facture. Donc c'est pas grave. Ce qu'on va faire, c'est on va passer à connecter la base de données et une fois qu'on aura ça, on va pouvoir régler tous ces détail là. Donc ici, je viens avant

Speaker A

de passer à la connexion, je lui dis ça. Donc euh crémoi un fichier gemini.md qui résume ce que l'application fait, toutes les fonctionnalités implémentées, la structure des fichiers, les technologies utilisées, les décisions de design et des instructions pour un futur modèle

Speaker A

IA. L'idée, c'est d'avoir un fichier euh que tu pourras revoir tout le temps pour comprendre le projet. Donc là, je le prompt que je t'ai le que je t'ai donné tout à l'heure.

Speaker A

D'accord ? Donc, tu peux juste le copier, le prendre dans le dans le document ou bien tout simplement capturer l'écran et le copier. Ou bien tu mets en pause la vidéo, tu copies tout simplement, tu lui donnes. L'idée

Speaker A

c'est qu'on va créer un fichier gemini.md dans lequel il va se rappeler du projet et cetera. En attendant qu'il fasse cela, ce qu'on va faire nous, c'est qu'on va aller sur Superbase. Donc là euh superbase.com, on avait déjà créé

Speaker A

un compte Superbase, hein. Donc euh soit tu tu crées ton compte ou bien tu fais tu viens, tu fais signup et tu te connectes. Moi généralement, je me connecte juste avec mon GUP. Donc je t'avais montré comment euh tout

Speaker A

simplement créer ton gitub et le connecter à Superbase. Donc voilà, on va tout simplement euh se connecter avec notre GitHub directement dans Super Base. Donc le temps qu'il termine la création du fichier, normalement il l'a même terminé. Donc le fichier, il est

Speaker A

là. Donc tu as vu, c'est un fichier dans lequel tout simplement il parle de easy facture à propos qu'est-ce que ça fait les technologies utilisées et cetera.

Speaker A

comme ça si tu passes ça même à un autre à un autre agent, il va savoir exactement ce qui se passe. Donc là, on crée une nouvelle organisation une fois qu'on est connecté sur Super Base type personnel free. D'accord ? Pour

Speaker A

commencer, comme je t'ai dit, c'est gratuit, on va cliquer sur créer organisation. D'accord ? Et une fois qu'on crée notre organisation, on aura d'autres détails à régler. Donc comme ça ici, c'est ici. Donc tu il va te demander de mettre un mot de passe, je

Speaker A

vais faire generate. D'accord ? Donc généralement, une fois que tu crées ton password, je te conseille de le copier donc parce que tu risques de le perdre sinon euh donc je fais juste enable automatic RLS donc créer. Tu as vu, on a

Speaker A

parlé de row level security. Donc on va tout simplement l'activer comme ça. C'est c'est créé de bases de c'est il va être activé. Je vais faire créer un projet comme ça à chaque fois qu'il va créer un un une table dans la database,

Speaker A

il va activer la le row level security. Là, qu'est-ce qu'il est en train de faire ? Il est en train de créer le projet. Donc là, ce qu'on va faire, c'est qu'on va juste attendre qu'il termine, d'accord ? Une fois que il a

Speaker A

créé notre base de données, tu verras le changement ici. OK ? Donc là, il a créé le projet. Comme tu peux le voir, une fois que c'est prêt, il te met healthy.

Speaker A

Donc tout est bon. Ici, une fois que c'est bon, ce que je vais faire, je vais aller ici sur mes paramètres, d'accord ?

Speaker A

Je vais aller dans les préférences du compte et je vais aller dans access token. Donc ici, ce qu'on va faire, donc tu vas cliquer sur générer un nouveau token. Tu vas lui donner par exemple une date d'expiration. Moi, je vais faire

Speaker A

never. Et là au niveau du nom, je vais juste mettre easy facture par exemple et je génère mon token. Ça va te générer un token. D'accord ? Donc ici ce que je vais faire c'est que je vais tout

Speaker A

simplement cliquer sur copier. D'accord ? Encore une fois je vais revenir sur mon antiravity. Donc je vais aller ici dans additional option, je clique dessus et je vais cliquer sur MCP serveur. Donc l'idée c'est de connecter notre app avec

Speaker A

Superbase via les MCP serveur. Donc euh je clique sur Superbase. D'accord. Je vais faire install save. Et ici ça va me demander cet accès ce token là que je viens de copier sur mon SPB. Je le colle et je fais save.

Speaker A

Donc ici il me ramène sur cette cet écran, cette page là. Je descends ici en bas, je mets mon access token, je fais save. D'accord ? Et là, c'est bon. Comme tu peux le voir, je viens de créer et de

Speaker A

connecter Superbase. Et ici, vérifie bien que ici c'est enabled. D'accord ? Donc là, une fois que c'est bon, je viens ici et je lui dis OK, donc je viens de connecter par MCP Super Base et l'idée maintenant, c'est que je veux

Speaker A

rendre mon app. Donc tous les éléments, toute la toutes les fonctionnalités création de factures, euh tout ce qui est création de factures, enregistrement de factures, enregistrement des clients, les informations de l'entreprise. D'accord ?

Speaker A

Je veux que tout maintenant que toute l'application soit full stack sur Superbase. Quels sont les les étapes à suivre ? Quand on parle de full stack, c'est tout simplement le fait que maintenant les informations ne seront plus enregistrées sur ma machine en

Speaker A

local ou bien ce ne sera plus des informations de fausses informations parce que ça c'est des informations qui n'existent pas. D'accord ? L'idée maintenant c'est que quand on va connecter notre appes, ce sera une vraie application qui va refléter des vraies

Speaker A

données. D'accord ? Donc ça c'est juste, on va dire que ça c'est juste du design.

Speaker A

Et donc ça c'est le front, d'accord ? Vu que maintenant on va le connecter à une base de données à travers un backend, bah ça devient une application full stack. Donc c'est ça que ça veut dire full stack. Donc une application où il y

Speaker A

a un front end, un E et un back end tout simplement. Donc là il m'a dit j'ai analysé notre architecture actuelle et les projets sur ton interface Superbase.

Speaker A

J'ai rédigé un plan de mise en œuvre. D'accord ? En résumé, la migration se fera en quatre grands étapes. Il va créer les tables et les schémas avec une protection de leur level security.

Speaker A

D'accord ? installation de l'authentification et protection des pages. Donc il va faire l'authentification. Donc l'authentification tout simplement la création et la connexion. Il va pivoter notre apptexte et il ira désormais récupérer et modifier les données sur ton backend superbase au lieu d'utiliser

Speaker A

le cash local. Donc c'est tout simplement de remplacer le fait que les données sont sauvegardées sur mon ordinateur local et de les sauvegarder directement dans la base de données en ligne. Et génération du client T script pour ta base de données. OK. Euh donc ça

Speaker A

c'est le plan d'implémentation. Donc ici je lui je clique tout simplement sur procede ou bien tu lui dis go OK et cetera vas-y. Et il va commencer à faire le travail. Et toi tout ce que tu as à

Speaker A

faire c'est d'attendre qu'il termine. Tu vas faire des tests. D'accord ? Et une fois qu'on voit que tout est bon là on passe à l'étape suivante. Et ici comme tu peux le voir à chaque fois qu'il va te poser une question euh tu cliques

Speaker A

juste sur OK, run et cetera. D'accord ? C'est juste qu'il aura besoin peut-être d'autorisation pour faire certaines actions. Chaque fois qu'il te demande juste fais OK, run et attends qu'il te dise que j'ai terminé, qu'il te fasse un

Speaker A

walkthrough. Donc le parcours le fichier parcours. Et aussi le temps qui continue, je vais te donner une astuce.

Speaker A

Là je vois que par exemple ça fait 2 minutes qu'il est sur ce fichier là et je ne vois pas de changement. Peut-être que il est bloqué ou bien quelque chose qui se passe. Donc moi ce que je fais

Speaker A

généralement, je je clique sur ce bouton là, d'accord ? Je l'arrête et ensuite je lui dis tout simplement continue.

Speaker A

D'accord ? comme ça ça le pousse à continuer. D'accord ? Au lieu de le laisser tourner en rond sur un fichier, peut-être qu'il est bloqué peut-être que voilà, il y a eu un souci, on sait pas l'idée. Moi généralement, à chaque fois

Speaker A

que je vois qu'il prend trop de temps et je ne vois aucune modification qui est faite, j'arrête le processus et je lui dis tout simplement continuer. OK, donc là il dit avoir terminé, il dit j'ai terminé l'exécution de toutes les

Speaker A

étapes. Easy Facture est maintenant devenue une application vraiment full stack. les données ne s'effaceront plus si vous changez de navigateur, j'ai résumé l'ensemble des travaux, des vérifications techniques et cetera. Donc là, voici un peu ce qu'il a fait. Euh

Speaker A

donc ce qu'on va faire, donc je vais faire juste npm run dev. Je te je t'ai dit que c'est la commande pour lancer ton application ou bien tout simplement tu lui dis lance l'application que je vérifie.

Speaker A

Euh, on revient ici. Normalement, quand on actualise, on devrait plus voir ces donnéeslà parce que ça c'est des anciennes données. C'est des c'est pas des vraies données. D'accord ? Donc, j'actualise. Et si on les voit toujours, tu as vu là, il m'a mis connexion mot de

Speaker A

passe. Donc, il a implémenté la connexion et le mot de passe. Je vais faire créer un compte. Se connecter, créer un compte. OK. Donc là, ce que je vais faire plutôt, euh je je vois que par exemple quand je clique sur me

Speaker A

connecter ou créer un compte, il n'y a rien qui se passe. Euh je vais lui dire, on dirait que tu as implémenté le la connexion, la création de compte et la connexion, mais que là, par exemple, quand j'essaie de me connecter, il n'y a

Speaker A

rien qui se passe. Donc vérifie que ça marche bien. Le formulaire de connexion aussi, il est pas assez designé. Donc là, je l'idée c'est de partir sur dribble. On va rechercher par exemple connexion. On va voir une page de

Speaker A

connexion et d'inscription. OK. Donc je vois que hm la page de connexion actuellement n'est pas fonctionnelle.

Speaker A

Refais la page, rendla fonctionnel et ensuite profitons aussi pour auditer tous les changements que tu as fait.

Speaker A

vérifie que l'app actuellement, il ne va afficher que des vraies données et qu'il ne va modifier que des vraies données euh et que h tu as tout remplacé, que ce soit la création, la sauvegarde de facture en PDF, le téléchargement de

Speaker A

facture en PDF, euh le changement d'état d'une facture, les informations des clients, les informations d'une entreprise, euh tout est vraiment synchronisé avec la base de données et totalement full stack. Donc là, actuellement, en fait, je lui dis de

Speaker A

regarder pourquoi je n'arrive pas à me connecter ni à créer de comptes, d'accord ? Et qu'il en profite pour auditer ce qu'il a fait pour voir si l'app est vraiment bien connectée à à Fireb à Superbase. D'accord ? Donc là,

Speaker A

quand je viens sur mon dashboard, je peux voir qu'il a créé lui-même une organisation. Donc et quand j'entre dans cette organisation, je vais venir dans database. D'accord ? Et là, je peux voir que il a créé les tables. Donc ça c'est

Speaker A

les tables. Donc ça en fait ce que tu vois là, ça c'est une base de données.

Speaker A

D'accord ? Donc c'est ça un peu comment marche une base de données. D'accord ?

Speaker A

Donc on a par exemple la table des invoice items, la table des invoice, la table des clients, des profils. Donc par exemple là, il m'a donné un plan d'implémentation. Je vais juste faire proced. Il va commencer et là je vais

Speaker A

revenir ici. Donc par exemple ça c'est la table de client. Donc disons que un client, il va avoir un user ID, un nom, un email. Donc c'est les informations du client et il va avoir un identifiant.

Speaker A

D'accord ? Euh et le user ID, je pense que ça va être par exemple le propriétaire. Par exemple, si c'est ton client, il doit il va être relié à ton à ton identifiant utilisateur à toi. Tu n'es pas obligé de comprendre tout cela.

Speaker A

Juste je t'explique. D'accord ? Euh ici aussi les profiles. D'accord. Donc euh c'est tout simplement les informations de l'entreprise je pense. Donc nom de compagnie adresse email phone currency. Donc c'est un peu dans les réglages. Par exemple, quand tu changes

Speaker A

le la devise, donc c'est ici que ça va être sauvegardé. En fait, ça c'est une base de données. Donc quand tu entends base de données, base de données, c'est tout simplement on va c'est tout simplement une table avec des

Speaker A

information et chaque information euh va être sauvegardée euh avec un comment dire avec une nature par exemple. Ça c'est une la quantité et c'est c'est un nombre donc c'est numérique. Par exemple, created ad c'est par exemple la date de création d'un élément. Par

Speaker A

exemple, quand tu crées un une facture, la date de création de la facture, donc c'est un c'est un time stamp, c'est une on va dire comment on appelle ça ? C'est un tampon temporel. D'accord ? Donc voilà. Donc là, c'est juste pour que tu

Speaker A

comprennes, je t'explique juste hein. Mais tu n'as pas besoin de comprendre. Donc dis-toi que juste que ça c'est la base de données de notre application.

Speaker A

Donc on a les invoice, les clients, les profils euh et les invoice items. Donc il l'a bien créé. D'accord. Euh et là, on dirait qu'il a terminé. Donc il a dit quoi ? La page de connexion use client.

Speaker A

J'ai jeté l'ancien composant non fonctionnel. Tac tac tac. Le formulaire est désormais dynamique avec application de spiner son interface audit des données. J'ai vérifié de A à Z.

Speaker A

L'application n'utilise officiellement plus aucune fausse donnée, ni l'utilisation n'est pas loguée à une base vide. La base de données retourne bien rien et n'essaie pas d'injecter des favoris par défaut. OK, donc on revient sur notre app, on va actualiser. Oh, et

Speaker A

euh tu peux même voir que il a un peu améliorer le design, c'est pas mal. OK, donc je vais faire email mot de passe.

Speaker A

Je vais faire par exemple créer un compte. D'accord ? Là, on va voir ce qu'il va faire pour la création de compte. Donc là, il y a rien qui se passe. D'accord ? Donc ce que je vais faire, je vais tout simplement capturer.

Speaker A

D'accord ? Je vais venir ici et je vais lui donner la capture et je vais lui dire ceci. Donc là le formulaire déjà, il n'est pas assez bien optimisé. Je veux qu'on que ce soit un formulaire avec on va dire un sélecteur sous forme de

Speaker A

tabulation entre création de compte et connexion. D'accord ? Et sur la page connexion, il y a en bas est-ce que si tu n'as pas de compte signup, ça va te ramener sur le formulaire d'inscription.

Speaker A

Et pour le formulaire d'inscription, pareil, ça te ramène sur le formulaire de connexion. Et on a aussi sur le formulaire de connexion mot de passe oublié. Vérifie que les champs sont bien gérés. Et là, en fait, quand je clique

Speaker A

sur par exemple créer un compte, le formulaire devient tout juste gris, il y a rien qui se passe. Donc je veux que tu corriges toute la on va dire le comportement, tout le comportement de formulaire d'inscription et de connexion

Speaker A

pour qu'il soit totalement fonctionnel. Donc là, en fait, je lui demande juste de revoir un peu. Donc signup, c'est tout simplement création de compte. Sign in, c'est ce la connection. Donc, tu peux juste lui dire quand j'essaie de me

Speaker A

de créer un compte, ça passe pas. C'est c'est on dirait que l'écran est bloqué.

Speaker A

Tu lui donnes une capture et puis c'est bon. Lui, il va analyser et il va régler le problème. Donc, on attend qu'il termine et on va une fois de plus essayer de nous connecter. Il m'a dit que c'est corrigé maintenant, que il a

Speaker A

fait ce que je lui ai demandé. OK, donc là il a fait connexion inscription d'accord mais il a mal géré le style. Donc je vais tout simplement faire une faire une capture. Donc je vais lui donner la capture et je vais

Speaker A

lui dire OK donc tu as mal géré le style comme tu peux le voir connexion et inscription d'accord ils doivent être en haut du formulaire d'accord euh horizontal. Donc le switch se fait horizontalement. Donc c'est en haut du

Speaker A

formulaire très petit. Là en fait c'est très c'est pas bien placé, c'est mal placé. Ensuite pour la l'inscription, je devrais aussi avoir le nom de la personne, d'accord ? Son nom, son on va dire son nom, son adresse email, mot de

Speaker A

passe et confirmation de mot de passe pour pouvoir se connecter. Ensuite, une fois qu'il est connecté, c'est son nom qui qu'il a donné qu'on va utiliser pour sur le dashboard. On va lui dire salut par exemple son nom. Si c'est Amado,

Speaker A

salut Amado et cetera. Mais euh revois le design euh de ça. Donc euh si tu veux, tu le tu te mets à la place d'un d'un expert UX UI designer et fais-moi un très bon formulaire euh fonctionnel.

Speaker A

OK, donc là il a fait quelques modifications, on revient. Voilà, là c'est beaucoup mieux, tu as vu ? Donc là, le switch se fait super. Donc là, quand je m'inscris, il me demande mon nom, mon entreprise, mon adresse email.

Speaker A

D'accord ? mot de passe et confirmation. Donc ici, je mets en mode file, ici je mets ça, mon mot de passe. D'accord, je fais créer mon compte. Tac. Et voilà, le lien de confirmation vous a été envoyé dans votre boîte email. OK, dans ma

Speaker A

boîte email, c'est bien que je c'est vrai, je viens de recevoir un email. D'accord ? Donc l'email, il est là. Je confirme. Donc je clique et c'est bon.

Speaker A

Euh j'ai confirmé mon compte. D'accord. Je reviens, je vais me connecter avec mon mot de passe. Donc là, quand j'essaie de me connecter, ça ne passe pas. D'accord ? Je pense que j'ai fait plusieurs essais. Euh, il m'a dit

Speaker A

identifiant incorrect inexistant. Donc ça aussi, c'est un problème. Attends, je reviens, je lui dis. OK, donc là, je me suis inscrit, j'ai créé mon compte, j'ai confirmé mon compte par email, mais de retour sur le formulaire de connexion,

Speaker A

il me dit ce compte est inexistant ou bien le mot de passe n'est pas bon.

Speaker A

D'accord. Et euh même lorsque je clique sur mot de passe, oublié, rien ne se passe. Je ne suis pas redirigé sur le formulaire pour récupérer mon mot de passe. Donc essayez de voir est-ce que c'est le bon email et le bon mot de

Speaker A

passe qui sont sauvegardés. Euh il y a aussi un rate limit qui se fait, d'accord ? Euh essayez de rendre le rate limit un peu moins strict. On avait parlé de rate limit. Donc le Rid limit, c'est tout simplement le fait d'empêcher

Speaker A

une personne d'abuser de ton système. Par exemple là par exemple, j'ai essayé de me connecter trois quatre fois, c fois d'affilé. Il a en fait il m'a fait un rate limite et je dois attendre peut-être 5 minutes, 10 minutes avant de

Speaker A

pouvoir me connecter. Donc mais là bon quand je je suis en mode test, je veux tester rapidement donc ça m'arrange pas trop. Euh généralement j'attends de terminer à la fin, je dis de faire un R limit. Mais là, il faut d'abord qu'on

Speaker A

s'assure que le formulaire de connexion et description marche bien parce que c'est très critique. Si les gens ne peuvent pas se connecter, bah ça sert à rien. Donc on va attendre qu'il vérifie tout ça. Et puis en attendant qu'il

Speaker A

règle ça, euh pose-toi la question si je devais écrire à la main tout ce que je dis là. En fait, tu as vu le temps que ça me fait gagner juste d'avoir cet outil ? Donc c'est cet outil là qui

Speaker A

s'appelle Visper Flow. Donc euh moi je suis au plan pro hein. Donc si tu veux tu le prends, ça dépend de toi. Ou bien tu utilises les vocaux ici directement.

Speaker A

Donc là il m'a dit quoi ? Superbase par mesure antispam applique un blocage script seulement trois emails envoyés par heure par utilisateur. Comme vous avez le superb, je ne peux pas manipuler ces quotas de sécurité. Vous pouvez débloquer la limite aller sur le tableau

Speaker A

de bord alle authentification rate limit. OK, donc je vais aller dans Superbase, je vais aller dans authentification, je vais aller dans rate limit ici on va voir rate limit for sending image number of 4 par hour. Donc ici je

Speaker A

vais redim sending SMS, limit for token refresh, limit for token verification limit for anonymous number. Donc ça c'est un peu les rate limit par exemple c'est ces rate limit je ne peux pas les changer si je suis en mode

Speaker A

gratuit on dirait. Donc ils ont fait exprès de faire en sorte que je dois prendre un plan payant pour pour pouvoir envoyer plus de deux emails par heure par utilisateur. Donc c'est un peu ça comment ils ont fait ça. Rate limit

Speaker A

for sign up and sign in. Donc là, il y a 30 requests par pour chaque 5 minutes.

Speaker A

Ici, c'est 30 pour chaque 5 minutes. Euh ouais. Donc ici, c'est bon, ça va. Mais si tu veux envoyer plus de deux emails par utilisateur, il te faudra prendre leur plan payant. Donc ça, on y peut rien. Donc email recovery astuce. OK,

Speaker A

donc maintenant je reviens ici. Mot de passe oublié. Payz indiquer votre adress email avant de demander la réinitialisation. Je fais mot de passe oublier. Ah, OK. Donc là en fait quand je fais mot de passe oublié, il peut pas

Speaker A

m'envoyer l'email tout simplement parce qu'il m'a déjà envoyé deux emails qui sont là. D'accord ? Donc ça c'est les deux emails que j'ai reçu il y a 6 minutes, il y a 13 minutes quand j'ai créé mon compte et vu que je suis sur le

Speaker A

plan gratuit, bah je peux pas. Donc là j'ai retrouvé mon mot de passe. J'ai retrouvé mon mot de passe. Donc c'est bon. Je pense que j'avais utilisé le mauvais mot de passe. Ensuite, une fois que je suis connecté, ce que je vais

Speaker A

faire donc déjà ici en haut, tu vois que ça m'affiche toujours les anciens euh on va dire informations. Ça c'est pas les vraies informations. Je n'ai pas la possibilité de me déconnecter. Ça c'est pas c'est pas bon ça. Il ne m'affiche

Speaker A

pas mon véritable email ici. Donc quand je vais dans paramètres Ouais. Donc ici c'est bon. Euh ça c'est bon. J'ai pas parce que j'ai pas encore de clients, j'ai pas encore de facture. Ah, tu as vu client, il m'a il m'affiche toujours les

Speaker A

faux clients. Donc là, je me suis connecté. Maintenant, au niveau des clients, on on affiche toujours une fausse liste de clients. Donc, il faudrait que ce soit aussi tiré de la base de données et que les recherches soient faites. Euh, les barres de

Speaker A

recherche, toutes les barres de recherche du site, les résultats doivent provenir de la base de données. D'accord ? les factures. Quand je crée une facture, on vérifie que il est bien créé en base de données. D'accord ? Encore

Speaker A

une fois, enregistré. Lorsque je change l'état d'une facture en brouillon et cetera, il est enregistré en base de données et il est reflété automatiquement sur le dashboard, les factures et cetera. Pour l'instant, au niveau des paramètres, on n' rien à

Speaker A

faire là-bas. Mais au niveau des clients, des factures, au niveau du dashboard, les éléments principaux, donc total encaissé, facture en attente, en retard, nouveaux clients, bon, sont tous des fausses données, ils doivent être tirés de la base de données et être bien

Speaker A

calculés. Je voudrais aussi avoir à côté de Bonjour Amadou euh sur le dashboard, je voudrais aussi avoir un sélecteur de dates. Donc on va utiliser le même composant calendrier qu'on a dropdown pour pouvoir sélectionner d'une date à une autre et filtrer les transactions

Speaker A

par période. Et ensuite sur le sur le dashboard sur le menu latéral tout en bas, d'accord ? Là où il y a mon nom et mon email. Donc là il y a [email protected].

Speaker A

Donc il n'a pas pris mon mon véritable email que j'ai utilisé lors de la création ni mon nom. D'ailleurs, si on peut ajouter aussi l'option de se déconnecter. Donc tu fais un joli composant pour la déconnexion euh et

Speaker A

même pour profil de users euh à ce niveau-là, ce serait bien. Donc là, on teste encore une fois. Là, on voit très bien que euh il y a beaucoup de données qui ont disparu. C'est normal parce que dans notre base de données, pour

Speaker A

l'instant, on a rien. Mais au niveau des clients ici par exemple, on devrait aussi ne rien avoir parce qu'on a toujours pas créé de clients ici. Euh donc, on attend qu'il euh qu'il règle tout ça. OK, donc comme d'habitude, il

Speaker A

me propose un plan d'implémentation. Euh, je vais tout simplement faire procede comme d'habitude. Si tu veux, tu cliques dessus et tu vas lire le plan d'implémentation. Puis voilà. Donc on attend qu'il termine comme d'habitude.

Speaker A

OK. Donc là il dit avoir terminé. Donc il m'a dit qu'il a fait le sélecteur de date dynamique. Donc il est là. Donc voici le sélecteur de date. Bon je pense que le sélecteur de date, il y a un

Speaker A

petit problème de logique qui ne marche pas normalement. Euh on va voir sur mobile est-ce que le sélecteur de date est bien responsif. Voilà, il est pas assez responsif à mon goût. Donc on va on va voir cela tout de suite pour les

Speaker A

clients. Donc normalement tous les clients sont partis. C'est cool. Ici il a mis mes informations utilisateur, il a pas mis mon nom euh tout simplement euh parce que je pense que lorsque je me je créais mon compte au début euh j'avais

Speaker A

pas mis de nom. Mais euh c'est bon, c'est pas grave. Là, je peux me déconnecter. Là, ce qu'on va faire d'abord, c'est on va d'abord tester la création d'une facture. Donc, je viens euh je je vais je vais juste mettre un

Speaker A

texte, je crée enregistrer, télécharger. Voilà. Donc là, il y a ceci au niveau de la facture qui va être qui est créée.

Speaker A

Donc et là quand je viens ici, donc la facture est envoyée, je vais cliquer sur la facture.

Speaker A

Je fais changer le statut, marquer comme payer. Je viens ici la facture a disparu.

Speaker A

Donc il y a pas mal de soucis à régler. Donc première chose, lorsque je crée une facture, on dirait que la facture ne se crée pas directement base de données parce que moi, j'ai créé une facture quand je suis revenu sur euh la liste

Speaker A

des factures, la facture s'est affichée, mais il a fallu que j'actualise, la facture a disparu. Donc c'est soit un problème de création de facture qui ne va pas être ajouté dans la base de données ou bien un problème de

Speaker A

récupération des factures de la base de données et de les afficher sur la liste facture. Pour la liste des clients aussi, lorsque je crée un client et que j'actualise le client, il disparaît tout simplement. Donc aussi dans le dashboard

Speaker A

pour le sélecteur de date que tu as mis, déjà il n'est pas responsive. En plus, on devrait avoir quelque chose de beaucoup plus clean. Donc mieux vaut avoir par exemple deux composants, un pour sélectionner la date de départ et

Speaker A

un autre pour sélectionner la date d'arrivée. Comme ça, on a un sélecteur de période beaucoup plus cohérent parce que là euh le sélecteur qu'on a, il y a un gros problème de logique. Et aussi vérifie que sur le dashboard aussi que

Speaker A

les informations s'affichent normalement qu'il va tirer que en fait on va on va afficher en real time les les les informations. Donc là, on continue de tester. Euh on est un peu dans cette phase là. où une fois qu'on a fait la le

Speaker A

la connexion de la base de données, comme je t'ai expliqué dans ma phase, on fait un test end to end. Donc on teste que tout est bien intégré, que tout marche bien, les fonctionnalités de base, les fonctionnalités principales et

Speaker A

peu importe le type de projet que tu vas faire, tu vas devoir passer par là, d'accord ? parce que li peut-être il va te dire tout marche bien mais en fait il te faut que toi-même que tu puisses que

Speaker A

tu puisse tester et voir que tout marche bien avant de de valider et de passer à l'étape suivante. Donc on le laisse corriger ça et après on va avancer. OK.

Speaker A

Donc là il m'a dit que il a réglé. Qu'est-ce qu'il m'a dit ? Le bug des factures qui disparaissent au rafraîchissement. Euh la base de données rejetez brutalement vos créations pour une raison cachée. Les identifiants générés localement étaient faits avec

Speaker A

Math random. Or la base de données attend de vrais identifiants. Tu remplacé tous les anciens. OK, c'est bon. Le sélecteur de date. OK, il a refait ça. On va voir.

Speaker A

Donc là, le sélecteur de date, on a date de départ par exemple 10 et date d'arrivée 19. Euh on a non pas de date.

Speaker A

OK. Date de départ 10 et on clique sur date d'arrivée 19. Voilà. Là, là c'est mieux. Là c'est mieux. Euh ensuite facture, je vais y aller créer une nouvelle facture euh l'appeler comme ça enregistrer.

Speaker A

Euh là par contre lorsque je clique sur enregistrer, on dirait que la facture n'est pas vraiment créée ou bien ouais on dirait qu'elle est créée parce que là quand j'actualise elle est là quand je reviens ici la facture aussi elle est là.

Speaker A

Donc quand je fais, j'entre dans la facture, je change le statut, je marque comme payer, je reviens. Le statut n'est pas changer mais au moins la facture elle est créée. OK, c'est bon.

Speaker A

Donc maintenant, lorsque je crée une facture, je vois qu'elle est bien poussée en base de données et que lorsque je crée un client aussi et que j'actualise, le client est là. Donc, il est aussi bien créé. Maintenant, l'idée

Speaker A

c'est que lorsque je change le statut d'une facture, d'accord ? Lorsque je change le statut d'une facture, euh le statut euh par exemple, si je le change directement au niveau de la colonne facture, là c'est bon. D'accord ? Mais

Speaker A

si j'entre dans le la facture, d'accord ? sur la page de la facture en question.

Speaker A

Euh là-bas, on voit que il ne récupère pas le statut de la facture et même quand je change le statut là-bas, il ne il ne prend pas en compte, d'accord, lorsque je sors. Et ensuite, il me faudrait un bouton aussi télécharger la

Speaker A

facture sur cette page là, d'accord ? parce que sinon j'ai il y a pas d'autres moyens de télécharger la facture euh à part ici et une fois que la facture elle est créée. Maintenant quand je clique pour télécharger la facture en PDF, la

Speaker A

facture dans son style et le PDF qui me génère sont diamétralement opposé. Je veux que la la facture qui va être téléchargée soit identique euh vraiment euh totalement identique à la facture que j'ai dans le PUV.

Speaker A

Donc euh fais-moi ça, s'il te plaît. Donc là, normalement encore quelques messages, deux trois messages et on a on a régler, on va dire nos fonctionnalités de base. Donc la création d'une facture, le le fait de télécharger une facture,

Speaker A

le fait de modifier une facture. Quand je clique sur modifier la facture, ça me fait 404. Ça c'est pas bon.

Speaker A

Je devrais pouvoir modifier une facture euh voir les détails. Ça marche. Lorsque je clique sur une facture, je devrais pouvoir euh comment dire relier la facture à un client. D'accord ? Donc si je ne si je ne le relie pas à un client,

Speaker A

la facture ne devrait pas être créée. Et ici aussi, tu as vu sur la liste des clients dans le formulaire de création de facture, il ne il ne m'affiche pas les vrais clients parce que moi ici je n'ai qu'un seul client à modal mais là

Speaker A

il me ça c'est les les faux clients qu'on avait créé tout à l'heure. Donc on va régler tout cela, on attend qu'il termine et on va lui dire de gérer ça.

Speaker A

OK. Donc là, je lui ai expliqué ça. Le problème sur la création de facture. Là où on do sélectionner les clients, il m'affiche pas les vrais clients. Le bouton télécharger sur la page d'une facture. Tout à l'heure, quand j'ai cliqué sur les trois

Speaker A

points d'une facture pour par exemple modifier la facture, ça me ramène sur un 400, donc sur une page qui n'existe pas.

Speaker A

Donc on lui demande de régler ces derniers détails là. OK, donc là avoir terminé, on va faire un roundup. Donc on va faire quelques vérifications.

Speaker A

Donc ici quand je clique sur le bouton encore une fois modifier là c'est bon.

Speaker A

Ça me ramène sur la page de modification. Ici lorsque je clique, tu as vu, il me montre maintenant la liste des clients. Pour vérifier, on va aller créer un deuxième client qu'on va appeler euh Ousman. Donc on a créé un

Speaker A

deuxième client qui s'appelle maintenant Ousman. L'idée c'est que si on vient ici, on va rechercher là. Tu as vu, ça m'affiche Ousman avec ces informations.

Speaker A

Donc là, on est bien. Maintenant, je crée une prestation quantité 1. Euh, je mets par exemple ça coûte ça, j'ajoute une autre quantité. D'accord ? J'ajoute autre chose, je mets le tarif. Donc là, c'est bon. OK, je fais enregistrer.

Speaker A

Ensuite, je fais télécharger. Et là, ça me fait une page blanche. OK. D'accord. Maintenant, on va retourner aux factures. Je clique sur la facture elle-même. Je fais télécharger.

Speaker A

Et là, tu as vu, il m'affiche bien la facture. Donc ici, ça marche. Je vais cliquer sur euh enregistrer. Je télécharger la facture dans le dans mon bureau. OK. Et là, c'est la facture que je viens de télécharger. Donc, c'est pas

Speaker A

mal. Donc c'est juste que il faut que il on ait le même comportement euh sur le composant après la après la facture créée. Mais ici déjà ça marche très bien. Donc ça c'est bien. Ensuite, quoi d'autre ? Lorsque je change le statut,

Speaker A

je mets payé ici et que je reviens, je sors. Voilà, la facture maintenant, elle est payée. Quand je vais dans mon dashboard, la facture elle est payée.

Speaker A

Maintenant, une facture payée, elle devrait être euh comment dire reflétée dans le total encaissé parce que la facture est payée. Euh voilà, c'est ça, c'est bon. Donc il est là dans le total encaissé. Et là quand je fais un filtre

Speaker A

parce que ces deux opérations, je les ai fait le 2. Donc si je fais le filtre, je vais faire par exemple 1. Voilà, là je vois rien et c'est bon.

Speaker A

Donc si je fais par exemple, je veux savoir combien j'ai gagné à partir du 2.

Speaker A

Je fais ça. Voilà. Donc on est bon, on peut optimiser, on peut avoir beaucoup mieux. Mais là déjà, on a réglé la majeure partie des problèmes. Donc on il reste à régler le bouton de téléchargement. Ici quand je fais

Speaker A

brouillon, ça se met en brouillon. C'est bien. Donc je reviens et je lui dis le bouton juste après la création d'une facture pour enregistrer et télécharger la facture, ce boutonlà ne me montre juste une facture blanche. Donc il faut

Speaker A

mettre dans ce bouton là le même la même fonctionnalité, le même comportement que le bouton téléchargé qui se trouve dans la page euh de détail d'une facture.

Speaker A

D'accord ? parce que sur cette sur ce bouton là, j'arrive à bien télécharger le PDF mais sur le composant qui s'affiche juste après la création d'une facture, ça me fait juste une page blanche alors que ça devrait afficher la

Speaker A

facture exactement comme sur le PDF, comme sur le l'aperçu. OK, donc maintenant il dit avoir réglé. Ce que je vais faire, on va faire un dernier test.

Speaker A

Je reviens dans une facture. Je sélectionne un client. Je fais le nom de la prestation, je fais le prix. Je fais enregistrer. Télécharger.

Speaker A

Et voilà, c'est bon. Donc là, je peux télécharger ma facture ou bien je mets un autre nom et je télécharge ma facture en PDF. Et puis le tour est joué. Euh l'idée maintenant, c'est de tout simplement vérifier. Donc en fait, c'est

Speaker A

aussi simple que ça. Tu continues à vérifier. Là, c'est la facture en attente parce que c'est la facture que je viens d'envoyer. D'accord ? Elle est en attente. Donc l'idée maintenant c'est que je quand je vais dessus et que je

Speaker A

change en payé. D'accord ? Quand je reviens ici, tu as vu total encaissé. Et ça c'est vraiment même si je me déconnecte et que je me reconnecte, c'est pareil tout simplement parce que c'est maintenant des information sauvegardé en base de données. Donc là,

Speaker A

il va charger euh et là il y a un petit on va dire un petit tu as vu, il faut actualiser pour voir ça. Donc c'est une petite astuce que je vais te donner euh pour éviter de faire cela. on va

Speaker A

utiliser ce qu'on appelle des skeleton loaders, donc des euh des éléments de chargement squelette. Donc en fait, les éléments ne vont pas s'afficher tant que les données ne sont pas présents. Donc ce que je vais lui dire, OK, donc là je

Speaker A

me suis déconnecté, je me suis reconnecté, les composants affichés zéro, il a fallu que j'actualise pour voir les bons éléments qui viennent de la base de données. Donc ce que je veux, c'est qu'on utilise pour chaque composant de chaque page dashboard,

Speaker A

facture client, on va utiliser des skeleton loaders, d'accord ? On va utiliser des skeleton loader et on va afficher directement les informations. Donc on ne fait pas on ne fait pas de on ne on n'affiche pas les éléments les composants tant qu'on a

Speaker A

pas tiré les informations de la base de données. Comme ça, on va les afficher directement au lieu de forcer la personne à actualiser tout le temps pour voir les informations. Et là une fois que il va terminer ça, tu vas voir le

Speaker A

changement que ça va faire au niveau de l'expérience de l'utilisateur. Donc un skeleton loader, c'est comme si en fait tu as vu la taille de la forme du composant, tu as vu les rectangles, tu vas voir quelque chose qui s'affiche de

Speaker A

cette forme là mais tu ne verras pas de texte. Donc ça va faire une an comme si ça chargeait et une fois que il a il a récupéré ces informations à partir de là il va afficher. Donc tu normalement sur

Speaker A

beaucoup de sites que tu vas aller quand ça charge tu vas voir comme s'il y avait des éléments qui euh qui remplaçaient un peu les composants, donc les boutons, les textes et cetera. Donc c'est ça qu'on va faire. Je vais me déconnecter.

Speaker A

Je vais attendre qu' qu'il termine et je vais me reconnecter. Si tu te poses la question comment on va ajouter se connecter avec Google et d'autres éléments, ça on le fera on le fera bien plus tard sur la prochaine application

Speaker A

qui va être beaucoup plus complète. Donc celle-ci c'est l'objectif de cette application, c'est vraiment créer quelque chose full stack avec création de comptes, avec raw level security, inscription, euh connexion à la base de données. On met ça en ligne, on crée une

Speaker A

landing page vraiment pour que tu puisses connaître à peu près le processus. Donc là, on se reconnecte pour voir. L'idée, c'est de voir les données directement. Voilà, tu as vu ?

Speaker A

Donc c'est un peu subtil, c'est pas rapide mais tu vois c'est c'est très rapide et tu vois que maintenant il s'affiche directement les données. Je n'ai pas besoin d'actualiser pour voir directement les données. Donc là déjà c'est pas mal. On a on a quelque chose

Speaker A

qui marche. On va dire qu'on a quelque chose de fonctionnel. Donc là vraiment on a quelque chose de on va dire qu'on a quelque chose qui marche. Maintenant ce qu'on va faire c'est qu'on va mettre notre outil en ligne. D'accord ? on va

Speaker A

le mettre en ligne et ensuite nous allons tout simplement euh passer à la création de la landing page. D'accord ?

Speaker A

Donc la page d'accueil de notre site. Donc pour mettre notre site en ligne euh c'est simple comme je t'avais dit, on va mettre tout cela sur GitHub et ensuite on va euh passer directement sur Versel.

Speaker A

Donc ce qu'on va faire c'est qu'on va se rendre sur Github. D'accord ? On se rend sur GitHub. Ici on va créer un nouveau repos, d'accord ? un nouveau dossier, je vais l'appeler Easy Facture tout simplement. Je fais euh create et une

Speaker A

fois que c'est fait, je viens ici et je lui dis "OK, donc maintenant je veux que tu mettes le code sur Github. Je viens de créer un dossier là-bas qui s'appelle Easy Facture." Donc je lui donne le nom.

Speaker A

L'idée c'est que maintenant lui, il va tout simplement se charger euh de mettre le code directement sur GitHRB, vu que je l'ai déjà connecté à GitHRB. Donc on a déjà fait ça sur les modules précédents. Donc on attend qu'il fasse

Speaker A

ça. Tu as vu ? Donc ça c'est les commandes que je t'avais appris lorsqu'on parlait de guit donc git ad et git commit. Euh il est en train de faire git h status pour voir si je suis bien

Speaker A

connecté. Et une fois que je suis connecté il va faire un guit push, tu vois guit branche git 7 origine URL. OK donc là il l'a mis sur GitHub. Donc comme tu peux le voir ça c'est notre projet Easy Facture qui a été mis sur

Speaker A

GitHub. euh avec euh nos derniers euh nos dernières modifications. D'accord ? Donc maintenant, ce qu'on va faire, on va aller dans Versel comme d'habitude.

Speaker A

D'accord ? Et ce qu'on va faire c'est on va tout simplement aller dans All project ici et on va cliquer sur créer projet. Donc le projet, on va venir, on va cliquer sur Easy Facture, on va faire importer. D'accord ? et le projet

Speaker A

s'appelle Easy Facture. Je fais deploy. Et comme d'habitude, Versel va automatiquement récupérer le code qu'on a mis ici dans notre GitHub et il va le builder, c'est-à-dire qu'il va construire le site et il va le mettre en ligne. Normalement après, on aura un

Speaker A

site, tu auras un lien que tu pourras partager, un site full stack avec euh base de données, avec front end et cetera. Donc on met ça d'abord en ligne.

Speaker A

Ensuite on va passer à la création de la landing page. Et comme ça tu seras encore un peu plus habitué au fait de mettre à jour des sites qui existent déjà qui sont déjà en ligne parce que ce

Speaker A

site là une fois qu'on le met en ligne, il est en ligne mais après l'idée c'est de c'est de tout simplement créer une landing page et mettre à jour mettre à jour le site. Donc on attend qu'il finisse de déployer et normalement une

Speaker A

fois qu'il termine son déploiement on aura quelque chose on aura un site en ligne. Et si jamais il y a une erreur aussi, je te montrerai comment régler cela. Donc ici, tu peux voir que voilà, tu as vu, il y a il y a eu une erreur de

Speaker A

déploiement lors du build. D'accord. Euh l'erreur, il m'a dit, il a dit npm deprecated. Donc l'idée c'est en fait n'essaie même pas de de comprendre, juste on va copier cela. D'accord ? Une fois qu'on copie, je le redonne à

Speaker A

antigravité et lui une fois qu'il lit, il va savoir à peu près c'est quoi le souci et il va le régler. OK ? Donc là, il a il a découvert c'est quoi le problème en fait. En fait, même toi, tu

Speaker A

aurais eu ce problème là parce que tu sais que ici, on a des variables d'environnement, d'accord ? Donc les variables d'environnement donc on a on en a parlé, c'est le point NV. Donc c'est ça qui nous permet de nous

Speaker A

connecter au super base. Le problème c'est que ça on ne lui a pas donné. Et si on lui donne pas, bah il peut pas se connecter à à Superabase sur le site qui sera en ligne. Donc ce qu'on fait,

Speaker A

d'accord, ici avant de lancer le build, on va cliquer sur environnement variable et là on va tout simplement coller euh ce qu'on a dans le fichier point qui est là. D'accord ? Donc on colle ici. On fait la même chose, on fait admor, on

Speaker A

vient, on copie ce qu'on a dans le variable d'environnement et on le colle. C'est ça qui permet à notre application en ligne d'avoir accès, d'être connecté à notre base de données. D'accord ? Et là, on peut cliquer sur deploy. Euh sans

Speaker A

ça, on aurait fait 10000 fois le deploy, ça ça n'aurait jamais marché. Donc c'est pour ça en fait, dès que tu as une erreur, lorsque tu veux faire un build, euh juste copie tout. En fait, le log, ça c'est les logs, en fait. Ça c'est en

Speaker A

fait la machine qui est en train de mettre ton site en ligne pour faire simple. Euh il va te dire s'il rencontre un problème et tu as juste à copier ça, à le donner à ton projet et il saura

Speaker A

exactement c'est c'est quoi le souci. Donc là on attend qu'il termine et normalement on aura notre site en ligne cette fois-ci. OK. Donc là le déploiement a été fait et notre site est bien en ligne. Donc là si je vais sur

Speaker A

easyfacture.versel.apparapapp. Donc là, je clique sur le domaine. Tu vas voir que mon site, il est là en ligne. C'est tout simplement le domaine gratuit que Versel t'offre. Donc quand tu mets ton site en ligne, donc Versel t'offre un domaine gratuit. Donc là,

Speaker A

notre site, il est en ligne. C'est quelque chose que on peut lancer, d'accord ? Il ne s il nous suffirait de connecter un nom de domaine. Et sur les prochains projets, je te montrerai comment connecter un nom de domaine. En

Speaker A

fait, c'est très facile de de de connecter un nom de domaine. Par exemple, ici, je vais aller sur domain, je vais cliquer sur plus. D'accord ?

Speaker A

Tout simplement. Et ici, je fais euh et là je cherche mon nom de domaine, par exemple euh amadas.com, peu importe. D'accord ? Je l'achète.

Speaker A

D'accord ? Je fais comme ça. Euh je l'ajoute au panier. Euh ensuite je viens ici, je l'achète et une fois que tu l'achètes, il se connecte directement à ton projet. C'est aussi simple que ça.

Speaker A

Donc il y a rien de complexe et on le fera sur notre dernier projet, le gros projet qu'on va qu'on va faire en fin de formation. Mais là actuellement, je clique ici. D'accord ? Ça me ramène sur euh les projets euh sur tous les projets

Speaker A

en cours. Donc je vais actualiser. Donc ici, tu peux voir, il y a Easy Facture. Là, c'est le c'est le CV en ligne qu'on qu'on avait créé. D'accord ?

Speaker A

Et là, on est parti de très loin. De base, on avait créé juste une simple page comme ça avec un CV très joli. Mais là, on est passé à toute une application avec système d'authentification et cetera. Maintenant, je vais t'expliquer

Speaker A

quelle est l'erreur qu'on a eu tout à l'heure lors du build parce que c'est très important de t'expliquer qu'est-ce qui s'est passé exactement, pourquoi lorsqu'on a essayé de mettre notre site en ligne, il y a eu une erreur. Donc, je

Speaker A

t'avais expliqué la dernière fois quand on parlait de sécurité, je t'avais parlé du fichier ENV, donc du fichier ENV.lal ou bien du fichier d'environnement. Je te dis que c'est sur ce fichierlà qu'on va mettre toutes les clés de connexion

Speaker A

de notre app. Donc si notre app se connecte à Superbase, il nous faut un ce qu'on appelle une API key ou bien un token. Donc on peut pas le mettre dans le code sinon euh ça peut exposer ces

Speaker A

clés là et les gens peuvent y accéder. Donc on le met dans un fichier qu'on appelle le fichier euh point inv ou bien point.lal. Donc c'est un fichier de variable d'environnement. Donc c'est ce fichier là que tu vois avec par exemple

Speaker A

Superbase URL = Superbase K ég donc celui qu'on a utilisé tout à l'heure. Donc ces valeurs là ils ne sont pas poussées dans le GitHub, ils ne vont jamais dans le GitHub parce que on a utilisé le Git ignore. Donc on a aussi

Speaker A

parlé de git ignore. Donc si tu n'as pas bien regardé ou bien si tu as sauté la partie, on parlait de sécurité, je te conseille d'aller revoir ce module là.

Speaker A

C'est très important. Ça permet de comprendre tout ce que je suis en train d'expliquer. Vu qu'on l'a met dans le git ignore, il n'est pas parti dans le Git Hub. Donc dans le Git Hub, on avait tous les applications mais on avait pas

Speaker A

les éléments qui nous permettaient de nous de de tout simplement nous connecter à Superbased. D'accord ?

Speaker A

Maintenant, vu que GitHub, c'est avec GitHub qu'on va connecter Versel, d'accord ? et que Versel va prendre le code qui est sur GitHub pour mettre le site en ligne. Bah Versel, il va venir, il va dire "OK, je cherche le code, OK,

Speaker A

j'ai trouvé le code." Les dépendances, les packages. OK, j'ai trouvé. Je cherche la configuration, j'ai trouvé.

Speaker A

OK, maintenant Ah, je vois que le site utilise Super Base. Donc, il faut que je le connecte à Superbase. Donc, je vais aller prendre le variable d'environnement. Mais le variable d'environnement, il n'est pas sur GitHub. On l'a pas poussé parce qu'on

Speaker A

l'a mis dans le git ignore. Donc, il va échouer parce qu'il va te dire je ne vois pas les variables. D'accord ? Et c'est très normal. parce que eux-mêmes ils te donnent la possibilité en fait eux ils savent que les gens ne mettent

Speaker A

jamais leur variable d'environnement dans leur code. Ils vont te donner la possibilité lors du build de coller directement sur Versel tes variables d'environnement. Comme ça, eux ils vont toujours l'injecter euh lors du build en et en en sous forme de variable et ils

Speaker A

vont le récupérer à chaque fois que ton site en en a besoin. Il ne sera jamais exposé et ça c'est très sécurisé et c'est pourquoi le build avait échoué.

Speaker A

Donc là ce qu'on a fait, on a mis le code sur Github et on a mis sur versiel, on a mis nos variables d'environnement et maintenant on a le code et les variables et le site est maintenant en

Speaker A

ligne. Donc c'est tout simplement ça qui faisait que le build avait échoué. Et en fait l'idée c'est de toujours t'expliquer qu'est-ce qui se passe, d'accord ? Pour que tu puisses comprendre parce qu'on est dans cette on est dans cette dynamique là de

Speaker A

compréhension, d'accord ? Pour pouvoir créer n'importe quel type de site que tu veux, il faut d'abord comprendre les bases. À chaque fois que tu as une erreur, ne t'inquiète pas, ne panique pas, prends le code, donne-le à ton

Speaker A

éditeur et il va fixer pour toi. Donc maintenant qu'on a nos sites en ligne, on va passer à la phase suivante. Et pour cela, on va retourner sur anti gravity sur notre éditeur de code. Donc là, ce qu'on a pour l'instant, c'est on

Speaker A

a notre site qui marche bien en local. D'accord ? On l'a aussi mis en ligne, mais on a toujours le code en local.

Speaker A

C'est à chaque fois qu'on veut faire des mises à jour, on va modifier le code qui est en qui est euh dans notre local et ensuite on va faire tout simplement un guit push, d'accord ? On va mettre le

Speaker A

code sur notre GitHub et Versel va voir automatiquement que le code a changé et il va mettre à jour notre site. Donc c'est aussi simple que cela. Donc maintenant ce qu'on va faire c'est qu'on va se déconnecter, d'accord ? Et là, je

Speaker A

vais aller sur la landing page. Donc la landing page, c'est tout simplement le site, le point d'atterrissage. Donc quand une personne va cliquer par exemple sur ton site que ceci easyfacture.com, on va pas directement le rediriger sur la partie de connexion.

Speaker A

Il faut qu'il voit une landing page qui sache quoi ? Easy easy easy facture.

Speaker A

Donc la landing page, c'est tout simplement la page de présentation de ton site et il est très important sur ton SAS. Plus tu vas travailler sur ta page de présentation, mieux tu auras des chances de convertir les visiteurs en utilisateur. Et c'est

Speaker A

pourquoi je l'ai mis en dernier recours parce que depuis le départ, depuis le début de cette formation, on utilise que les promptes, d'accord ? Donc je vais sur dribble, je prends un design, d'accord ? Euh et je vais directement

Speaker A

dans antiravity et je lui dis "Fais-moi ce design de cette manière-là." Et ça marche. Vous avez vu depuis tout à l'heure, on crée quand même pas mal de choses. On y arrive. Maintenant, j'ai une méthode que j'utilise moi

Speaker A

personnellement, d'accord ? Une méthode un peu plus avancée mais qui me permet d'avoir plus une main mise sur ce que je je produis, d'accord ? Plus une main mise sur mes créations. Donc ce que je fais c'est j'utilise un outil de Google

Speaker A

qui s'appelle Stitch. D'accord ? Donc ce sera aussi dans le document ou bien vous allez tout simplement sur Google et vous tapez stitch espace Google et vous verrez le design c'est le l'icône rose d'accord vous cliquez dessus et vous

Speaker A

allez être redirigé ici. Donc vous vous az accédé avec votre compte Google, vous payez pas. Dès lors où vous êtes abonné sur gravity, vous pouvez utiliser Stitch, d'accord ? Et Stitch c'est quoi ? Stitch c'est un designer IA, d'accord

Speaker A

? C'est une IA qui va designer tes sites pour toi. Et je l'utilise personnellement pour plein de projets que je créé. Donc comme tu peux le voir ici, depuis 2025, moi j'utilise Stitch.

Speaker A

Tout ça c'est des projets que j'ai testé ou bien que j'ai lancé et je les ai design avec Stitch tout simplement.

Speaker A

Maintenant, je vais t'expliquer comment je travaille avec Stitch. Donc, disons que je vais créer euh une landing page ou ou même le site, hein, je peux le faire directement sur Stitch, mais je vais t'expliquer. Donc là, je viens et

Speaker A

je vais essayer d'avoir une inspiration. Donc là, je vais rechercher une landing page. Je vais faire invoice euh website landing page par exemple. Donc, on va voir un peu qu'est-ce qu'il y a ici.

Speaker A

Donc, l'idée c'est de voir un peu un design qui me plaît, un design qui me parle, d'accord ? Et on va pas tout simplement copier ce design pixel par pixel, on va juste s'en inspirer. C'est ça le plus important, c'est

Speaker A

l'inspiration. Là je vais voir disons ça. Ça, par exemple, c'est c'est pas mal. D'accord ? Donc ça c'est par exemple une landing page qui me qui me parle. D'accord ? Moi, j'aime bien tout ce qui est minimaliste, tout ce qui est

Speaker A

simple. Euh j'aime pas trop des designs où ça part dans tous les sens. Mais ça aussi, j'aime bien. Donc disons qu'on va partir euh sur ça, on va partir sur quelque chose de similaire à ça. Donc ce que je vais faire, c'est que je vais

Speaker A

tout simplement euh faire une capture. D'accord ? Je fais une capture de ça. Ensuite, je vais dans Stitch, d'accord ?

Speaker A

Et je vais tout simplement lui donner le design, d'accord ? Et ensuite, accompagné de la capture d'écran, je lui donne un prompt. Et voici le promte que je lui dis. Tu es un designer et développeur de classe mondiale. Tu as

Speaker A

plus de 15 ans d'expérience. Je te fournis une capture d'écran qui m'inspire. Je veux que tu t'inspires du style visuel de cette capture. Que tu t'inspires du style pour créer une land page originale pour mon produit. Ne copie pas le contenu, inspire-toi

Speaker A

uniquement du style. Et mon produit c'est Easy Facture. Easy Facture est un de facturation simple et moderne pour les entraîneurs africains. Donc comme tu as vu, en fait, je lui donne un prompt assez détaillé et je te le mettrai euh

Speaker A

pour que tu puisses t'en inspirer, d'accord ? Si tu veux. Et ici au niveau du modèle, je vais choisir thinking 3.1 Pro et je vais faire ici. Tu as vu en fait ici c'est un design pour l'appli et

Speaker A

ici c'est un design pour le web. Moi je design pour le web. Donc je vais faire web et je vais l'envoyer. Maintenant ce qui va ce que tu vas faire c'est que tu vas juste patienter. Donc Stitch ce

Speaker A

qu'il va faire c'est qu'il va tout simplement prendre en compte mes éléments d'accord ce que je lui ai demandé de faire et il va me proposer une landing page et je pourrais faire autant de modifications que je veux avec

Speaker A

le design. D'accord. jusqu'à ce que je sois satisfait. Et à partir de là, on va directement aller créer notre landing page sur Antigravity. Donc euh dis-toi que tu peux designer toute ton application ici, que ce soit version mobile, version desktop, d'accord ?

Speaker A

Toutes les pages, tu peux les sur Stitch et il y en a un autre que j' que j'utilise personnellement, un autre outil que je vais te montrer dans les prochaines s qu'on va créer et tu vas voir que c'est un outil que je trouve

Speaker A

même beaucoup plus puissant. Mais Stitch déjà c'est si tu l'utilises dès le départ, c'est gratuit parce que ça vient avec ton abonnement Google. Donc généralement Stitch aussi c'est pas mal.

Speaker A

Ça crée de très bons très jolis designs. Tu as vu, ça te crée le système de design et il s'inspire de ça pour te pour te faire quelque chose de très professionnel. Et ensuite, je vais te montrer comment tu vas prendre ce design

Speaker A

là et tu vas l'amener, tu vas en faire du code et tu vas l'amener directement sur ton site. Donc là, tu peux voir qu'il est en train de commencer à faire la génération de l'écran. Donc là, tu attends, ça peut prendre 2 3 minutes, ça

Speaker A

dépend de la complexité de l'image qui doit générer, qui doit développer et ensuite une fois qu'il finit, on pourra voir le résultat ensemble. Donc là, il a terminé mais comme tu peux voir, je trouve que ça ne ressemble pas trop. En

Speaker A

tout cas, surtout sur ces premières section là, ça ne ressemble pas trop à l'image que je lui ai donné, d'accord, en terme de comment les choses sont alignées. Donc je vais tout simplement cliquer dessus et je vais lui faire un

Speaker A

message. Je vais lui dire donc là je peux voir que la herosection donc la première section sur le site est très différente de l'image que j'ai été donné déjà au niveau du menu. Tu peux voir que le menu qu'on a nous, c'est un menu avec

Speaker A

arrondi, d'accord, sous forme de pills. le le la phrase principale, elle est centrée, le le sous-titre est centré, il y a un seul CTA qui est centré et autour, il y a de petites icônes d'images, de billets, euh tout ce qui

Speaker A

est en rapport avec l'argent. D'accord ? Donc regarde bien la capture d'écran que je t'ai donné et refais-moi quelque chose de très similaire sur ma sur ma heroosection, s'il te plaît. Donc là, je regarde, ça c'est le design qui m'a fait

Speaker A

le design. Il est pas mal hein. Je trouve que le design il est bien mais l'idée c'est est-ce que c'est ça qui t'arrange ? D'accord. C'est ça qui est intéressant avec Stitch, c'est que avant même de commencer à coder ton landing

Speaker A

page, tu auras une vision globale de ce que tu es en train de faire et ça c'est très important. OK, donc là il m'a fait une deuxième version et comme tu peux le voir là c'est beaucoup mieux. Là, on a

Speaker A

quelque chose qui se rapproche beaucoup plus de ce qu'on recherche. C'est pour ça, en fait, il faut être toujours euh patient et prendre la peine de lui dire exactement ce que tu veux. Là, tu peux voir que le menu en haut, il l'a fait un

Speaker A

peu comme je voulais. Euh, par contre, je voudrais qu'il y ait un peu plus de shadow, un peu plus d'ombre autour du menu en haut. D'accord. Et ensuite le texte ici euh il est assez gros mais je trouve que c'est bien. Euh ouais, je

Speaker A

trouve que c'est bien. Je trouve que c'est bien. Euh les autres sections, je trouve qu'ils sont bien. D'accord. Ça va bien avec la hero. Donc je vais Bon là, j'aurais pu utiliser ça, d'accord, mais on va essayer de de le pousser un peu un

Speaker A

peu plus. Donc là, ça se rapproche beaucoup plus de de ce que je recherche.

Speaker A

D'accord. Maintenant, ce que j'aimerais c'est en fait que le bouton soit un peu plus petit. Donc le bouton CTA, donc le bouton principal, là où tu as mis créer une facture en quelques secondes, c'est trop long. On va mettre commencer

Speaker A

gratuitement. D'accord ? On va juste mettre commencer gratuitement. Ensuite, faites-vous payer immédiatement. Ouais, on peut faire quelque chose comme ça. Ou bien essayer de voir si on peut avoir un texte qui est beaucoup plus punchy. Tout en bas, là où tu as mis Fresh Works,

Speaker A

outchip Drive. Donc là, ajoute des logos de créer juste des logos d'entreprise et ajoute là-bas des logos. Et au niveau des icônes, d'accord, qui sont autour, par exemple, ajoute de de vraies icônes, donc de vraies images. Par exemple, la

Speaker A

trombone, tu as juste mis une icône de trombone, mais j'aimerais une vraie image de trombone. Et si tu peux même ajouter d'autres éléments, euh ce serait cool. Sur les autres sections, j'aime bien. Par contre, le footer, le footer

Speaker A

donc la dernière section du site, je trouve qu'il peut être beaucoup amélioré. D'accord. Donc améliore-moi le footer et le fond du footer doit ne doit pas être similaire au fond de la section qui vient avant le footer. Donc on va

Speaker A

utiliser pour le footer, on va utiliser le même la même couleur de fond que la deuxième section, donc la couleur grise.

Speaker A

Donc voilà, tu as tu as vu j'ai j'ai quand même beaucoup parlé. D'accord, donc je lui je lui donne je lui ai donné pas mal de détails. Donc l'idée c'est on va attendre de voir qu'il nous fasse une

Speaker A

prochaine version. D'accord ? Et si ça correspond à ce qu'on recherche euh là, on va on va on va prendre ça. Donc l'idée maintenant, c'est euh de voir, tu as vu la différence entre cette landing page et cette landing page. Moi, je

Speaker A

trouve que celle-là est beaucoup mieux. Euh mais on va essayer de voir la troisème option et peut-être que là, ça sera aussi encore beaucoup mieux. OK, donc là, il vient de terminer. Donc on va essayer de comparer un peu les deux.

Speaker A

Et là par exemple euh je trouve que celle-ci est beaucoup mieux au niveau de du bouton. C'est beaucoup Tu as vu le fait juste de changer le texte comment c'est comment c'est beaucoup mieux. Le footer ici tu as vu le footer ici il est

Speaker A

beaucoup plus élaboré. Par contre les icônes ça ne le fait pas du tout. Donc il y a des icônes que je trouve qui sont pas très bien faits. Donc là, je vais lui dire donc euh remets les icônes qui

Speaker A

étaient sur par exemple pour les icônes, les images que tu as mis sur la hero section, remets les icônes qu'on avait sur l'ancienne version, d'accord, de de l'image. Donc et tu peux aussi regarder l'image que je t'ai donné en contexte

Speaker A

donc et tu peux faire quelque chose de d'assez similaire. OK. Donc là, c'est un peu le design qu'il m'a fait. Je trouve que c'est pas mal. Donc c'est un peu l'itération que j'ai eu. Donc si je compare ça à la première version et

Speaker A

peut-être qu'il y en a qui vont préférer cette version là sinon si si oui vous prenez ça. Mais moi je préfère cette version là même si je la trouve perfectible d'accord mais on a déjà une très bonne base. On sait exactement à

Speaker A

quoi va ressembler notre landing page. Donc une fois qu'on a ça, ce qu'on va faire, on va l'exporter. Maintenant il y a plusieurs manières de l'exporter. On peut l'exporter en utilisant le MCP.

Speaker A

Donc la connexion MCP, on peut l'exporter en utilisant le code. D'accord ? Euh on en fait il y a plusieurs manières de d'exporter ce design là. On peut l'exporter par exemple sur Figma. On peut faire le copier le code dans le presse papier.

Speaker A

Donc euh pour ce qui est MCP, on le fera plus tard, d'accord ? Quand on aura plusieurs pages à exporter. Mais là, vu que c'est juste une seule page, je vais juste copier le code dans le press papier. Donc je vais juste copier le

Speaker A

code et le donner directement à mon éditeur. Donc là, je reviens ici. D'accord ? Si tu veux, tu peux ouvrir l'ancienne discussion. Donc là, par exemple, c'est l'ancienne discussion.

Speaker A

Donc je viens ici. Ce que je fais, c'est euh je lui donne directement le code, d'accord ? le code de la page qu'on qu'on vient de copier tout simplement qu'on a eu le design qu'on a eu sur Banani et je lui dis donc voici le code

Speaker A

du design que je veux pour la landing page. Maintenant je veux que tu l'intègres bien, que tu crées des composants de vrais composants, tu mettes en avant la réutilisabilité des composants. Ensuite pour le design, je ne veux pas de design inline, je veux

Speaker A

des fichiers CSS séparés. Donc il nous faut intégrer ça d'une très bonne manière, surtout mobile first que ce soit responsive, d'accord ? Que ça s'affiche bien sur tous les écrans. Et si tu veux, tu ajoutes des micro animations, surtout au niveau de la de

Speaker A

la header, au niveau des icônes flottants. Si tu veux si tu veux changer les icônes, tu les changes. Si tu as des idées d'icônes ou bien d'images de meilleure qualité. Ensuite, le CTA principal, donc le bouton principal sur

Speaker A

la herosection, je veux une animation dessus euh on hover and click. Donc quand le la souris passe dessus et quand la souris clique dessus, euh pour le menu, le menu euh qui est en haut, d'accord ? On garde le même menu, sauf

Speaker A

qu'on le rend aussi responsive. Donc fais-moi ça. Et une fois que c'est bon, tu crées la landing page parce que pour l'instant, notre site n'a pas de landing page. Ça te redirige directement sur la page de connexion. Donc on crée la

Speaker A

landing page, d'accord, qui sera le point d'entrée maintenant de notre application. Donc voilà, je lui ai donné le code, ensuite je lui ai donné mes recommandations, ce que je ce que je veux et on va attendre qu'il fasse le

Speaker A

travail. Maintenant, il y a certains termes que j'ai utilisé. Peut-être qu'ils vont euh le temps qu'il termine, je vais t'expliquer certains termes que j'ai utilisé. Donc, je lui dit mobile first. Mobile first, c'est quoi ? Quand on dit mobile first, c'est un site qui

Speaker A

est optimisé pour mobile d'abord avant même d'être optimisé pour les ordinateurs. Parce que je te dis ça c'est vraiment le point critique qui fera si ton va marcher surtout en Afrique parce que dis-toi que ici 90 % au minimum du trafic que tu vas avoir

Speaker A

sur ton site, les gens vont utiliser leur téléphone portable pour entrer sur ton site. Donc ton site doit être mobile first, il doit être responsif, il doit bien s'afficher surtout sur les mobiles.

Speaker A

Donc note ça bien, c'est un terme que tu dois utiliser tout le temps. Donc mobile first est responsive. Responsive c'est pareil. Responsive c'est tout simplement faire en sorte que l'élément ait une un bon affichage et utilisable soit sur

Speaker A

tous les écrans. D'accord ? C'est aussi simple que cela, que ce soit sur écran de téléphone ou bien écran d'ordinateur, écran de tablette, peu importe. Peu importe l'écran, il va bien s'afficher.

Speaker A

Ça c'est la responsivité de l'écran. Donc tu peux lui dire "Je veux juste que ce soit responsive, je veux que ce soit mobile first." Et tout simplement lui, il saura quoi faire. D'accord ? Je j'ai parlé de CTA. CTA, je pense qu'on a déjà

Speaker A

parlé de ça. Le CTA, c'est tout simplement ça veut dire call to action. Ça veut dire un bouton qui permet de faire quelque chose. Par exemple là, ici on revient sur notre design, ça c'est un CTA. Donc le bouton là, le bouton

Speaker A

commencer gratuitement, c'est un CTA. Le bouton essai gratuit, c'est un CTA. D'accord ? Le bouton choisir, c'est un CTA. Le bouton commencer gratuitement, c'est un CTA. Donc c'est un bouton qui incite une personne à faire quelque chose. Donc quand je lui dis le CTA sur

Speaker A

la herosection, ça veut tout simplement dire ce boutonlà parce que la hérosection c'est tout simplement la première section que tu vois quand tu entres sur une landing page. On appelle ça généralement la hello section.

Speaker A

D'accord ? Donc quand je lui dis je veux que tu ajoutes des des animations sur le CTA de la landing page et que tu rendes ça mobile first. Maintenant je pense que tu comprends exactement ce que je veux

Speaker A

lui dire. Donc ici, il m'a proposé un plan d'implémentation comme d'habitude. D'accord ? Il me dit exactement ce qu'il va faire. Euh je lui dis juste proceed.

Speaker A

Et là on attend qu'il termine la tâche. OK, donc là il a terminé, il m'a fait le walkthrough. Donc euh ici on va tout simplement repartir sur notre site. Euh donc là on est sur easy Facture.

Speaker A

Normalement là si on repart sur la page d'accueil. Voilà. Donc là, on a notre landing page. Donc tu peux voir euh comment on est parti du design. Et là, on a le site. C'est même que cela. Donc les personnes quand ils vont taper Easy

Speaker A

Facture, ils vont venir ici, ils vont cliquer sur se connecter et ils vont venir ici pour se connecter. Et là, en fait, l'idée maintenant, c'est de faire en sorte que quand ils sont ici, ils peuvent cliquer sur ce logo là pour

Speaker A

repartir sur la landing page ou bien essayer de voir comment on peut améliorer cette page là. Il y a plein de choses qu'on peut faire mais l'idée c'est euh voilà. En fait, je pense que maintenant vous avez un peu une idée de

Speaker A

comment maintenant on va voir comment ça s'affiche sur mobile. Donc là euh tu as vu sur mobile c'est pas mal. C'est pas mal. Il y a quelques détails à régler.

Speaker A

Tu as vu, il a rendu le menu responsive. Wou, c'est très joli ça. C'est juste ici le texte là qui doit être bien géré. Je pense que ce cette icône là, il doit disparaître sur mobile. D'accord. il doit disparaître sur mobile et ici aussi

Speaker A

ça doit être bien géré. Donc je vais lui demander de faire cela. Donc c'est bon, c'est c'est c'est pas mal exécuté.

Speaker A

Maintenant ce que je veux c'est que sur la page de login et de signup, la page d'inscription et de connexion qu'elle soit connectée à la landing page du fait que si je clique par exemple sur le logo qui est sur la page de connexion que ça

Speaker A

me ramène sur la landing page et essaie de voir si tu peux améliorer le design de ces pages-là. inscription et connexion pour faire en sorte qu' s'adapte au design de la landing page.

Speaker A

Ensuite ensuite lorsque j'entre sur la landing page versions mobile euh on a un problème sur la hero section. Le texte n'est pas centré, il est trop grand, le texte n'est pas responsive. D'accord ?

Speaker A

Les autres éléments ne sont pas assez centrés, pas assez responsifes. Les icônes animées ne vont pas s'afficher sur mobile. D'accord ? Comme ça, il y aura pas de souci. Et en bas du CTA, tu as vu là où on a les entreprises avec

Speaker A

lesquelles on travaille, je veux que ce soit une seule ligne qui défile, d'accord ? Avec une animation qui défile une liste qui défile de la droite vers la gauche avec une jolie animation et qui montre ces ces éléments-l

Speaker A

aussi améliorer le spacing, donc les espacements et ouais, je pense que on peut partir sur ça et le bouton commencer gratuitement. Donc les boutons, les CTA ne sont pas assez responsifes, les textes et tout. Donc améliore-moi ça. Bon voilà. Donc là, je

Speaker A

lui ai donné le texte pour lui expliquer un peu ce que je voulais qu'on améliore.

Speaker A

Donc euh je lui donne ça et normalement là, ça devrait le faire. OK, donc là il a terminé et comme tu peux le voir, il m'a réglé cela. Là le bouton, il est beaucoup plus joli sur mobile. Le texte

Speaker A

il est maintenant responsive. Il est bien aligné. Tu vois comment les ces ces icônes là, ils étaient les uns sur les autres. Là, on a réglé cela avec une jolie animation. Donc ça va sur mobile, on a un on a on a une responsivité sur

Speaker A

desktop. Donc là, on revient sur desktop. Tu as vu, c'est pas mal. Là, je vais cliquer sur se connecter. Tu as vu, il a même amélioré la page de connexion et la page d'inscription. Je clique sur ce bouton là, ça me ramène sur la

Speaker A

landing page. Donc là, on est bon. On a notre landing page assez simple, d'accord ? Mais c'est un bon départ. D'accord. Elle peut être beaucoup améliorée mais pour quelque chose qu'on a eu avec deux trois promptes, on a quelque chose qui est pas

Speaker A

mal. Donc maintenant ce qu'on va faire c'est que je vais on va mettre notre site qui est en ligne, on va le mettre à jour, d'accord ? Parce que on a mis notre site en ligne, il est là. Donc là

Speaker A

c'est le site qui est en ligne. Donc easyfacture.versel.appa.appap. Là si je me déconnecte, tu peux voir que ici il y a pas de il y a pas de landing page hein. Il y a rien. Même si je clique ici, il y a rien qui se passe. Le

Speaker A

site n'est pas encore mis à jour. D'accord ? Pour mettre les sites à jour, on va tout simplement mettre le code qui est sur le GitHub à jour. Donc c'est aussi simple, je viens ici et je lui dis

Speaker A

"OK, maintenant qu'on a fait nos modifications, pousse fais un push sur le GitHub." D'accord, pousse nos modifications sur le GitHub. Donc tu fais ça et lui il va faire le git ad, git commit, git push. Donc toutes ces

Speaker A

commandes là que je t'ai montré lorsqu'on parlait de guit. Donc là, il va il va tout simplement faire le push et une fois que c'est fini, on va aller euh on va aller tout simplement voir comment Versel prend la mise à jour et

Speaker A

met notre site à jour tout simplement. Donc là, il a fait le push. On va revenir sur notre euh Versel. Donc une fois que le site est en push, tu viens sur Versel, on va aller dans déployement. Et tu as vu, tu as il a

Speaker A

automatiquement vu que euh le push a été fait, d'accord ? et il va tout simplement euh prendre à partir de là et euh créer une nouvelle version de notre site parce que là c'est la version qui est en ligne. Donc tu as vu current

Speaker A

c'est la c'est notre version du site qui est en ligne. D'accord ? Ça c'est la version qu'il est en train de faire. Et là il y a eu un build error. D'accord ?

Speaker A

Donc le build error ça veut dire que il n'a pas réussi à créer cette nouvelle version. Et ça c'est les c'est les erreurs. Je vais tout simplement copier les erreurs. D'accord ? Donc je vais tout simplement copier là où c'est en

Speaker A

rouge. D'accord ? Je copie ça. Je reviens sur mon éditeur et je lui donne ça. D'accord ? Donc lui, il va comprendre directement c'est quoi le souci, il va régler et il va refaire un autre pouche. Donc des fois ça arrive

Speaker A

hein parce que une fois que le code se modifie, il peut y avoir que il y ait certains soucis d'accord ou bien certains éléments qui ne sont pas synchronisés. Donc ça arrive la majeure partie du temps. Une fois que tu c'est

Speaker A

réglé une fois, deux fois, tu n'auras plus ces problèmes là. Mais dis-toi que ça arrive. Tu as juste à faire ce que je viens de faire. Tu copies, tu colles. Et là, tu as vu, il est en train de régler

Speaker A

les problèmes et ensuite on aura notre site en ligne une fois qu'il termine. OK. Donc là, il vient de refaire un push et automatiquement en fait, tu as vu, automatiquement quand le push il est fait sur GitHub. Donc quand le code sur

Speaker A

GitHub est mis à jour, donc là tu vas voir si je j'actualise, tu vas voir que le code a été mis à jour juste maintenant. D'accord ? C'est le dernier push qu'on vient de faire. Donc résolution finale des erreurs et

Speaker A

déploiement. Et là il est en train de tu vois il y a 23 secondes, il a vu que le code a changé et il a commencé à créer une nouvelle version du site. Mais en fait ce qui est cool c'est que tant

Speaker A

queil n'a pas déployé une nouvelle version jusqu'à cette version là soit bien, il va jamais changer la version actuelle. Donc ton site reste stable.

Speaker A

D'accord ? Si tu as un une version en ligne, d'accord ? tant que le nouveau déploiement n'est pas fait et et que voilà là il est bon, il est ready, tu vas voir que Curen va quitter de ici et

Speaker A

il va venir sur cette version là. Tu as vu maintenant c'est cette nouvelle version là qui est en ligne. Ça veut dire que là si on va sur easy facture, donc là on est dans Easy Facture. Tu as

Speaker A

vu ça ? C'est l'ancienne version. Je vais actualiser. Tac. Tu as vu ? Là on a la nouvelle version. Je clique ici et on a notre landing page qui est là. Donc quand les gens vont aller sur Easy

Speaker A

Facture maintenant, c'est ça qu'ils vont voir. Ils vont pouvoir venir se connecter, créer des comptes et cetera.

Speaker A

Maintenant, sûrement, tu te poses la question comment est-ce qu'on va ajouter la connexion avec Google et même améliorer beaucoup plus euh la qualité des sas qu'on va créer. On va voir cela sur le prochain sas qu'on va créer. Mais

Speaker A

aujourd'hui, on est passé de quelqu'un qui ne savait peut-être même pas comment on créé des landing page. Ah, tu as créé un sas full stack. Ça c'est un c'est pas encore un SAS parce que pour que ce soit

Speaker A

vraiment un SAS, il faudrait qu'il y ait un système d'abonnement, système de connexion et cetera. Il y a pas il y a pas encore le dashboard d'administrateur, ça on le verra sur la prochaine sur la prochaine grosse app

Speaker A

qu'on va faire. Mais là en fait l'idée c'est que on a une application full stack, donc une application avec front end, back end, base de données, on l'a déployé en ligne. Donc ça c'est la base de tous les SAS. Si tu sais faire ça, tu

Speaker A

peux construire de base n'importe quelle idée que tu veux faire. Donc nous voilà au terme de ce module numéro 5.

Speaker A

Qu'est-ce que tu as accompli ? Donc tu as utilisé le Vibe Coding Design Loop, donc les étapes dont je t'ai montré de l'inspiration jusqu'à la mise en ligne avec les tests. D'accord ? On a mis en place un système serverless. On a

Speaker A

utilisé Versel pour cela avec les capacités de NextJs. On a utilisé euh une technique de deux modèles. C'est pour c'est la première fois qu'on va qu'on a combiné les deux modèles. Par exemple Cloud code de d'une partie pour

Speaker A

la planification et on a utilisé exclusivement Gemini pour la construction du site. On a pris des inspirations de drible au lieu de juste deviner. On a sauvegardé dans le context. MD donc c'était plus gemini.m.

Speaker A

On a fait un sas fag. Bon, c'est pas encore un SAS. On va dire queon a créé une app et après on va créer un SAS.

Speaker A

Mais la différence entre une app full stack et un SAS full stack, c'est tout simplement le système de facturation qui est très important. On en parlera lorsqu'on va aborder les paiements. On a mis en place une un système

Speaker A

d'authentification avec un R level security et un système de sécurité vu queon envoie des codes par email. Il y a même du rate limiting, tu l'as vu tout à l'heure. Et ensuite on a déployé en lien sur Versel. Si tu sais faire ça mal, tu

Speaker A

es un créateur de sas. Il te suffit just de savoir comment ajouter la facturation et tu es un créateur de sas. Et maintenant, avant de passer à quelque chose de beaucoup plus costaud, de beaucoup plus consistant, on va aller un

Speaker A

peu plus profondément dans la compréhension. Donc dans le module 6, ce sera un module où notre objectif sera de comprendre le développement. Il faut qu'on comprenne les bases de données en profondeur. Il faut qu'on comprenne c'est quoi un SQL, c'est quoi un no SQL,

Speaker A

c'est quoi les requêtes, c'est quoi les framework et les architectures et les techniques avancées pour les agents. Il faut qu'on comprenne ce qu'on vient de faire, d'accord ? Il faut qu'on essaie de le comprendre sous le capot, d'accord

Speaker A

? Si c'est ça que sera la différence entre un vrai vibe coder et quelqu'un qui va créer des choses qui vont à chaque fois qu'il aura un bug, ce sera la fin de son business. D'accord ?

Speaker A

L'idée maintenant, c'est qu'on va prendre le module 6, on va tout simplement aller encore beaucoup plus en profondeur dans la compréhension et à partir de là, on pourra commencer à créer des applications beaucoup plus performantes et beaucoup plus

Speaker A

professionnelles. Donc à bientôt dans le module 6. Bravo à toi, tu viens de construire une vraie application avec un dashboard, une base de données, de l'authentification. Mais soyons honnête, pour en faire un business, il te manque les paiements, il te manque les clients.

Speaker A

Et dans le programme Easis, c'est exactement cela qu'on va couvrir. Comment intégrer les paiements mobile money, cartes bancair et cetera. Comment trouver tes 1000 premiers clients en moins de 30 jours ? Comment marketer ton produit ? Comment te positionner ? Et

Speaker A

surtout avec le logiciel Easis auquel tu auras accès, tu ne perds pas de temps à chercher une idée pendant des semaines.

Speaker A

Le logiciel va te guider de l'idée à l'étude de marché jusqu'au document de lancement. Donc si tu es intéressé, le lien est en description. Salut et bienvenue dans le module 6. Et dans ce module là, l'objectif c'est de prendre

Speaker A

du recul. Car dans les modules précédents, on a construit on a construit des choses, une landing page, un CV, une app de facturation. Tu as déjà utilisé des outils comme NextJs, Superbase, Versel, GitHub et cetera sans forcément comprendre comment il marche

Speaker A

sous le capot. Et dans ce module, on va comprendre, d'accord ? pas pour devenir développeur mais pour être un meilleur vibe codeur parce que plus tu comprends comment ça marche meilleur seront tes promptes et plus vite tu trouveras les

Speaker A

bugs et plus efficace tu seras avec l'intelligence artificielle et bien évidemment tu auras de meilleurs résultats. Donc on va commencer par les bases. Ce qui est le plus important selon moi, j'ai nommé les bases de données. C'est quoi une base de données

Speaker A

? En fait dans ta tête, je veux que tu visualises ça de manière très simple.

Speaker A

Une base de données, c'est comme Google Sheet. C'est en fait c'est la meilleure analogie. tu as des colonnes, des lignes et des entêtes. La colonne nom contient par exemple tous les noms. La colonne email contient tous les emails. Chaque

Speaker A

ligne, c'est un enregistrement et un client, une facture et cetera. Et euh je vais te montrer par exemple, donc là je suis sur mon ordinateur, je vais aller sur Google Sheet. Donc disons que ça par exemple, c'est une base de données tout

Speaker A

simplement. Donc là par exemple, disons que ça c'est la colonne nom. Ça c'est la colonne par exemple ID, ça c'est la colonne montant par exemple. D'accord ?

Speaker A

Donc là, on aura Amadou. Là, on aura 1 2 3 ou bien quelque chose comme ça. Et le montant, on aura par exemple 28500.

Speaker A

Et on aura quelque chose de similaire pour les autres colonnes. Par exemple, au lieu de Amadou, ici on aura Fatou, ici on aura euh Amena, ici on aura par exemple Awa. D'accord ? Et les idées, vu que un identifiant est il est toujours

Speaker A

unique, on aura des identifiants différents. D'accord ? Ici, je peux mettre désidentifiant. Et ça, en fait, ce que tu vois là, la base de données, elle est elle est comme ça. D'accord ?

Speaker A

Donc là, on peut faire quelque chose comme ça. Donc ça, c'est une base de données tout simplement. Les en fait dans par exemple, nous on a utilisé Superbase pour notre base de données et dans Superbase, il y a des tables et ça

Speaker A

tu peux considérer que par exemple ça, c'est la table client, d'accord ? Et il y aura une autre table qui est la table par exemple facture, quelque chose comme ça. D'accord ? Maintenant, quelle est la différence entre Google Sheet et une

Speaker A

base de données ? Pourquoi on utilise pas directement Google Sheet ? Donc premièrement, Google Sheet Rame à 10000 lignes. Donc une base de données gère des millions de lignes sans brancher.

Speaker A

Euh ici, tu peux voir que déjà on a 1000 lignes sur Google Sheet. Bah si j'ai une si j'ai par exemple plus de 10000 éléments que je veux enregistrer avec Google Sheet, ça va être très compliqué.

Speaker A

Donc deuxièmement, la programmation. Donc dans Google Sheet, tu filtres avec des menus et des clics. Et dans une base de données, tu vas filtrer avec du code et on appelle ça des requêtes. Et le langage pour écrire des requêtes, c'est

Speaker A

le SQL. Donc ici, si je veux par exemple euh retrouver euh le montant que me doit Amici, je dois venir euh soit je fais comme ça ou bien je fais euh je fais un filtre. D'accord ? Donc par exemple sur

Speaker A

cette base de données, si je dois retrouver une opération par exemple combien me doit amen par exemple, je dois le retrouver par clic ou bien faire des filtres directement sur Excel. Alors que dans une base de données, je peux

Speaker A

pas tout le temps à chaque fois venir regarder manuellement parce que j'ai peut-être des milliers d'opérations que je dois faire en simultanée. Donc ça, tu peux pas le faire avec Excel. Pour ça qu'on a besoin d'une base de données et

Speaker A

comme on a dit, on écrit des requêtes pour discuter avec ces bases de données.

Speaker A

Donc par exemple sur notre SAS Easy Facture, quand tu crées une facture, d'accord ? Ce qui se passe dans en coulis, c'est que l'application envoie une requête SQL à Superbase pour insérer une nouvelle ligne dans la table facture. D'accord ? Donc disons que ça,

Speaker A

on a une table, donc c'est une autre table. La table s'appelle par exemple facture. Ici on aura euh facture ID euh montant, prix, client et cetera. Donc il va tout simplement insérer une nouvelle facture ici dans la dans la table des

Speaker A

factures quand tu vas faire une requête pour créer ta nouvelle facture. Donc dans dans les coulisses en fait, c'est ça qui se passe. D'accord ? Et si tu veux lire aussi une nouvelle facture, c'est pareil, il va envoyer une requête

Speaker A

pour chercher cette facture en particulier et te retourner les informations, le données offront. et le front end va tout simplement les afficher. D'accord ? Donc comme on a dit, Google Sheet est la base de données. La seul les différences, il y

Speaker A

en a, d'accord ? Mais si tu dois les visualiser de manière euh de manière euh pratique, on va dire que c'est un peu la même forme, c'est des tables, sauf que voilà, avec Google Sheet, tu pourras pas infiltrer avec du codes, tu pourras pas

Speaker A

gérer des millions de lignes et c'est pas automatisé. C'est pourquoi on utilise des bases de données.

Speaker A

Maintenant, il existe deux grandes familles de bases de données. Donc, on a tout ce qui est SQL based, d'accord ? Et tout ce qui est no SQL. Donc en fait, tout ce qui est SQL, je vais te l'écrire, je vais te le montrer pour que

Speaker A

tu sois beaucoup plus facile à comprendre. Donc disons ça, c'est une table dans la base de données. D'accord ? Et cette table là, on va dire que c'est SQL. Quand on dit que c'est SQL, ça veut dire que tous les éléments qui

Speaker A

vont venir s'ajouter à cette table là auront forcément tous les mêmes valeur. Donc ils auront un nom, un idée et un montant. Donc si je dois ajouter par exemple Marem, d'accord, Marem aura forcément un nom et elle aura forcément

Speaker A

un idée, elle aura forcément un montant. Donc si tu dois le comprendre en fait SQL c'est tout simplement ça. Elle quand tu utilises SQL, il s'assure que chaque nouveau élément qui va être inséré dans la base de données, il aura forcément

Speaker A

tous les éléments qui existent dans cette base de données. Et si il en manque un, par exemple, si j'essaie d'insérer dans la base de données euh une nouvelle écriture, mais avec juste ma rêve et l'idée, ben qu'est-ce qui se

Speaker A

passe ? la base de données va rejeter la requête et te dire que il manque par exemple montant. Donc c'est ça SQL, c'est aussi simple que cela. Maintenant on a nom SQL et par exemple dans mon nom SQL dans les noms SQL les plus connus

Speaker A

les bases de données non SQL on a MongodB, on a Cassandra et pour les SQL on a My SQL, Post Grèce et SQL Lite.

Speaker A

D'accord ? Donc par exemple Superab, je pense qu'ils utilisent Post Grèce. Donc ici qu'est-ce qui se passe ? Qu'est-ce qui est la différence entre SQL et non SQL ? En fait, non SQL, bah cette écriture là, elle va rentrer dans la

Speaker A

table parce que dans no SQL, chaque nouvelle écriture, c'est son propre objet. En fait, chaque nouvelle écriture a son propre ses propres en tête. Disons que ça, je vais t'expliquer. Disons que ça c'est le tableau non SQL. Donc Amadou

Speaker A

a son nom, idé, montant. D'accord ? En fait, quand je vais ajouter une autre écriture, cette écriture, elle aura aussi son nom idée et ici, au lieu d'avoir montant, il va avoir par exemple valeur. D'accord ? Je vais ajouter une

Speaker A

autre table, une autre un autre élément dans la table. Elle peut avoir nom, idées, montant et ici elle va avoir âge par exemple. D'accord ? Et tous ces éléments là vont être dans le même tableau. Mais le tableau en fait comme

Speaker A

je t dit, il ne va pas forcer les nouveaux éléments que tu vas intégrer à tous avoir le mêmes éléments parce qu'il ne le partage pas. Donc chaque élément a son propre ses propres entêtes, ses propres valeurs. D'accord ? En fait, le

Speaker A

nom SQL et le SQL, chacun a ses forces et ses faiblesses. Donc le nom SQL donne des avantages mais a aussi des inconvénients. C'està-dire que il te donne l'avantage de savoir que chaque nouveau élément dans ta base de données

Speaker A

aura toujours les valeurs que tu attends. D'accord ? Mais de l'autre côté, il y a des cas dans lesquels tu ne pourras pas les utiliser parce qu'ils sont très contraignants, ils sont très stricts. Le SQL en fait c'est si tu

Speaker A

utilises du no SQL, bah il y a aussi des avantages, il y a aussi des inconvéniances, c'est beaucoup plus flexible mais là tu te tu t'ouvres peut-être à des erreurs que tu pourrais par exemple que tu que tu n'aurais pas

Speaker A

eu si tu utilisais du SQL. Maintenant toi en fait l'idée c'est de juste comprendre comment ça marche derrière.

Speaker A

C'est quoi la différence entre SQL et non SQL ? Mais euh c'est pas à toi de le faire manuellement. L'idée c'est que c'est Lia qui va lui faire et tu pourras tout simplement euh lui demander quel est le meilleur type de base de données

Speaker A

à utiliser pour ton app. Généralement le SQL fait le travail parce que pour le web coding, la majeure partie des SAS utilise principalement le SQL. Pourquoi ? parce que Superbase utilise Postgress comme je t'ai dit qui est du SQL et que

Speaker A

la majeure partie des outils de vibe coding sont construits autour du SQL. Tu n'as pas besoin de choisir entre le SQL et le nom SQL maintenant, mais retiens juste que SQL c'est des tables avec des colonnes. Non SQL, c'est des documents

Speaker A

flexibles. Donc c'est des tables flexibles et nous on va utiliser SQL pour notre euh pour notre outil.

Speaker A

Maintenant pour aller plus en profondeur, dans SQL, on a quatre commandes principales. D'accord ? Donc comme je t'ai dit, on fait des requêtes SQL pour faire des opérations dans la base de données. Maintenant, chaque requête a par exemple un objectif. Donc

Speaker A

il y a une requête pour insérer quelque chose dans le tableau, une requête pour euh regarder, donc lire quelque chose dans le tableau, une requête pour modifier un élément, une requête pour supprimer. Je te donne un exemple. Quand

Speaker A

tu crées une facture, donc tu utilises euh le la requête insérée, donc elle permet d'ajouter donc insert facture, insert into facture. Donc en fait derrière c'est ça que Lia va envoyer à ta base de données. Donc ça c'est la

Speaker A

méthode insère, d'accord ? Elle permet d'insérer, donc d'ajouter dans la base de données. Deuxième requête, disons que tu veux lire une facture. Donc je vais utiliser select. Donc je vais aller dans la base de données, je vais sélectionner

Speaker A

cette facture en euh elle va elle va sélectionner cette facture en particulier, l'envoyer au front et le front va tout simplement pouvoir lire la facture et te l'afficher. Maintenant, update, ça permet de modifier une facture. Donc, disons que tu as créé une

Speaker A

facture, mais tu veux la modifier, bah si tu veux le faire le derrière la requête va utiliser update et delete. Je pense que ça comprend, tu comprends parfaitement ça sert à quoi. D'accord ?

Speaker A

Et pourquoi il est important de comprendre le SQL ? C'est très important. Et pourquoi je prends la peine de te de t'expliquer tout cela ?

Speaker A

D'accord ? Donc premièrement, c'est pour débugger. Donc si tes factures ne s'affichent pas, par exemple, tu peux aller dans SQL éditor de Superbase, taper select from et voir ce qu'il y a dedans. Ou bien tu dis Alia, regarde la

Speaker A

requête. D'accord ? Regarde la requête SQL. Est-ce que elle est bien faite ? Est-ce que elle est bien euh tout simplement exécuté ? Euh en fait, ça te permet de de savoir exactement d'où le bug vient, où tu peux vraiment euh guider l'IA

Speaker A

parce que si tu lui dis ça marche pas, il va aller dans tous les sens. Alors que si tu lui dis regarde la requête SQL, il va aller vérifier directement là-bas et ça peut te faire gagner énormément de temps. Donc deuxièmement,

Speaker A

en ce qui concerne les rabel security, donc on a parlé des rabel security, donc les sécurités au niveau des lignes.

Speaker A

D'accord ? Donc quand on écrit euh par exemple une row level security, c'est une condition SQL qui filtre les lignes. Donc la R level security c'est de base c'est une condition SQL. D'accord ? Troisièmement pour parler à si tu dis Alia la requête

Speaker A

select qui filtre les factures de statut ne marche pas, elle comprend instantanément le problème comme je t'ai dit et c'est plus précis que tout simplement de lui dire les factures ne marchent pas. Donc je pense que ça je te

Speaker A

l'ai dit aussi au niveau de tes buggés. Et ensuite, une fois que je pense qu'on a on a fait le tour de ça, on va pas trop s'attarder parce qu'il y a quand même pas mal de trucs à comprendre au

Speaker A

niveau des base de données. On n'est pas là pour refaire une formation ou bien un cours d'informatique. L'idée c'est d'expliquer tout simplement comment ça marche. Donc là, on va passer au framework. D'accord ? Donc il faut savoir que le web de base c'est trois

Speaker A

langages. Donc on a le HTML qui est la structure, le squelette. D'accord ? Ensuite, on a le CSS qui est le style, le maquillage et cetera. Et on a tout simplement le JavaScript qui est la logique. Donc quand tu cliques sur un

Speaker A

bouton et qu' se passe quelque chose, c'est JavaScript. Quand les chiffres du dashboard comptent de zéro à la valeur finale, par exemple de 0 à 100, c'est du JavaScript tout simplement. Maintenant, HTML, on l'utilise pour la structure, CSS, on l'utilise pour le style et

Speaker A

JavaScript pour la logique. Donc on refait encore un petit recap parce qu'on avait vu ça dans les modules précédents.

Speaker A

D'accord ? Donc ça c'est la pyramide du web. Tout ce que tu vois sur le web est basé sur ces trois pierres là. HTML, CSS, JavaScript. Maintenant, c'est quoi les framework et ça sert à quoi ?

Speaker A

D'accord ? Pourquoi on n'utilise pas directement HTML, CSS, JavaScript au lieu d'utiliser du NextJs par exemple ?

Speaker A

Le problème c'est que coder un site web avec juste HTML, CSS et JavaScript, c'est très long et répétitif. Tu dois tout gérer toi-même. Tu dois gérer les routes, l'état de l'application, le rendu, les requêtes au serveur et cetera. Tu dois tout gérer et c'est là

Speaker A

que les framework entrent un jeu. Donc un framework, c'est de la standardisation. C'est un ensemble de règles et d'outils qui ont été déjà construits, qui ont qui sont préconstruits qui te permettent de coder plus vite et de manière plus organisé.

Speaker A

Donc au niveau des framework, il y en a trois qui sont les principaux. Donc on a NextJS et c'est celui qu'on utilise, d'accord ? Il y a vite une alternative beaucoup plus légère et il y a Vu JS qui

Speaker A

est euh avec Nex JS et c'est une c'est une autre approche, d'accord euh qui qui qui est un peu différente de NextJS, mais au final ils te font le même le même le même travail. Maintenant, pourquoi nous on utilise Next JS ?

Speaker A

D'accord ? Spécifiquement au lieu des autres, tout simplement parce que NextJs est le plus complet. Next js gère tout dans un seul endroit. Donc le hosting.

Speaker A

Et il faut savoir que Versel euh c'est eux qui ont créé NextJS. D'accord ? Donc Versel possède NextJS et NextJS est optimisé pour Versel et le serverless.

Speaker A

Deuxièmement, les routes. Donc chaque fichier dans le dossier app par exemple devient automatiquement une page. Donc pas besoin de configurer quoi que ce soit. Là si on va par exemple dans notre app le projet de Easy Facture. Donc tout

Speaker A

ce que tu vois là c'est des choses qui viennent avec NextJS. D'accord ? quand je crée mon nouveau projet INJs, même si je n'ai je n'ai rien fait dedans, il m'a créé un src, il m'a créé le dossier app,

Speaker A

il m'a créé par exemple les Node modules. Bon après les notes modules, ça vient avec ce qu'il y a dans le package Jason, d'accord ? Mais c'est des choses que NextJs va gérer pour moi. Et dans le dossier source, on a un dossier app.

Speaker A

D'accord ? et dis-toi que dans le dossier app, chaque élément que tu vois une route. Par exemple, si je vais sur mon site et que je veux me connecter, je vais aller par exemple surlogin. Donc par exemple amado.com/login,

Speaker A

c'est là que je par exemple que je me connecte. Bah disons que toutes les pages qui sont sur slashlogin, ils sont ici. Donc quand je clique ici sur login, cette page là c'est la page de connexion. Donc c'est la page de login.

Speaker A

Si je veux par exemple faire du reset password, donc je veux reset mon password. Donc euh comment on dit ça ?

Speaker A

Mettre à jour mon password. Donc c'est cette page-là. Et ici en fait il y a aussi un système de groupage de pages.

Speaker A

Donc là quand tu vois dashboard mais entre parenthèses, ça veut dire toutes les pages qui sont dans le dashboard, ils sont dans ce dossier-là. Donc dans le dashboard, on a la page client, d'accord ? On a la page dashboard

Speaker A

elle-même, on a la page invoice, c'est la page settings, la page support. D'accord ? Et tout ça est groupé sous le le document dashboard qui est dans le dossier app. Donc tout ce qui est route, donc quand on dit route, c'est tout

Speaker A

simplement tous les points d'entrée qui nous permettent d'accéder à nos pages. Ils sont bien organisé dans NextJs et ça c'est moi je te dis pour quelqu'un qui a créé plusieurs projets, NextJS nous fait vraiment une fleur en faisant cela parce

Speaker A

que elle nous permet de nous concentrer et de savoir exactement où se trouve quoi très rapidement. Et ça mon gars, c'est non négligeable et très important.

Speaker A

Donc ensuite en plus des routes, on a aussi le middle. Donc le middel, on en a déjà parlé, c'est le fichier qu'on utilise pour gérer l'authentification.

Speaker A

Donc il faut un peu le visualiser comme un gardien devant ta maison. Donc à chaque à chaque personne qui passe devant ta maison, avant de rentrer, le gardien va vérifier cette personne s identité pour savoir est-ce que cette

Speaker A

personne-là elle est invitée, elle a le droit d'entrer dans la maison. Et en fait les middleware font tous en fait ils font le même travail, ils se mettent devant tes routes. Donc par exemple si quelqu'un veut accéder à la page

Speaker A

dashboard, avant d'accéder à la page dashboard, il va d'abord passer par le middleware d'authentification par exemple qui va vérifier si cette personne-là s'est connectée, elle est authentifiée et est-ce que elle a le droit d'accéder à cette page là. Et les

Speaker A

middle, c'est très important parce que c'est même ça qui va te permettre de pouvoir limiter certaines fonctionnalités quand tu vas créer des sas pour certains utilisateurs. Donc, tu peux dire si cette personne-là n'a pas payé, elle va pas voir cette

Speaker A

fonctionnalité-là. Si cette personne-là n'a pas payé, on va lui on va désactiver l'IA pour cette personne-là. Donc tout ça, c'est des middleware qui vont checker tout le temps à chaque fois est-ce que cette personne-là a ce qu'il faut et tout ce qui est requis pour

Speaker A

pouvoir accéder à telle fonctionnalité ou bien tel service. Et ça, NextJS le gère. euh ils ont déjà une fonction euh une fonctionnalité middleware qu'on va utiliser. D'accord ? Et ensuite, on a la base de données. Donc nextj te permet de

Speaker A

parler à superbase à la fois depuis le front end et le back end. D'accord ? Et c'est pour ça qu'on l'a choisi. Donc rien qu'avec ton front end, tu peux communiquer avec Superbase, mais aussi le back end peut le faire. Et en fait,

Speaker A

un seul framework qui fait tout ça, c'est le framework le plus populaire du moment. Ce qui veut dire que Lia le connaît très bien et génère du code de meilleure qualité parce que plus quelque chose est utilisé dans la communauté du

Speaker A

code, plus il y a de solutions. Parce que en fait quand tout le monde utilise quelque chose, quand quelqu'un a un problème, d'accord, il va automatiquement trouver une solution parce que il y a forcément une autre personne qui a vu le même problème.

Speaker A

C'est pour ça que de base tous les agents que tu vas utiliser de base quand tu vas leur dire de créer un site, ils vont automatiquement la majeur en fait à plus de 95 % tous utiliser du Next JS.

Speaker A

D'accord ? Donc ça c'est très important. Maintenant je viens de te le montrer mais on va revenir dessus parce que il est très important de comprendre la structure d'un projet NextJs parce que après le module 5 on a on a eu un projet

Speaker A

par exemple avec des dizaines de fichiers. Donc par exemple, ça c'est le projet de Easy Facture. Beaucoup de beaucoup de fichiers, beaucoup de dossiers et cetera et il faut qu'on comprenne un peu ce que chacun fait.

Speaker A

D'accord ? Donc ça c'est le dossier app, je te l'ai montré. Donc c'est le dossier le plus important. C'est là où sont toutes tes pages. Donc chaque dossier dans app est une route. Donc j'ai déjà parlé de ça, j'ai déjà expliqué c'est

Speaker A

quoi une route. C'est très important, c'est les points d'entrée de ta page. D'accord ? Donc c'est aussi simple que cela. C'est l'enveloppe, on va dire.

Speaker A

Ensuite, on a les dossiers euh composants. Donc ça c'est les components, d'accord ? C'est là où tu mets tes morceaux réutilisables. Donc un bouton, une carte de statistique, un tableau. Donc au lieu de recopier le même code à cinq endroits cinq fois, on

Speaker A

va le créer une fois, on va le mettre dans composant et on va tout simplement l'importer et le réutiliser à chaque fois qu'on veut l'utiliser. Par exemple, ici dans le dossier composant, on a le dossier UI et ici par exemple, on a le

Speaker A

bouton. Donc ça c'est un bouton, d'accord, qu'on a créé une fois. Tout ce code là que tu vois, c'est un seul bouton. Imagine si on devait à chaque fois qu'on a besoin de créer un seul bouton dans notre code écrire tout cela.

Speaker A

D'accord ? Ça va être très compliqué. C'est pour ça que NextJS nous permet de créer ce bouton là une fois et de l'exporter. Donc ici en bas, tu vas voir export bouton. Donc on va exporter bouton. D'accord ? et dans d'autres

Speaker A

pages. Par exemple dans login, on va aller dans page ici en haut, tu vas voir qu'on a importé bouton depuis le dossier composant UI bouton. On est composant UI bouton. Donc c'est ce bouton là qu'on a importé, d'accord ? Et on va tout

Speaker A

simplement le réutiliser dans le code. Tu vois, ici, on l'a utilisé plusieurs fois. C'est le même composant qu'on utilise plusieurs fois. Et ça, c'est une des euh des concepts du code de qualité, euh la réutilisabilité. Donc faire des

Speaker A

choses et les réutiliser autant de fois que possible. Ne pas euh recopier le même code 10 fois ou bien recréer le même composant plusieurs fois parce que ça sert à rien et c'est pas efficace. Et le fait d'avoir une seule source de

Speaker A

vérité fait que si jamais demain il y a un problème avec le bouton, on sait exactement où on doit aller, on le règle une fois et ça va se répercuter dans toute la code base. C'est-à-dire qu'on règle le problème de toute la code base.

Speaker A

Alors que imagine j'avais 10 boutons différents, bah si je règle un problème, il y a d'autres d'autres problèmes que je vais régler et je sais même pas exactement où ils sont si j'ai un très gros code base. Donc ça c'est un des

Speaker A

avantages. Donc ça c'est donc on a parlé des composants. Ensuite, on a le dossier Lip. Donc Lip, c'est là où tu mets toutes tes fonctions utilitaires. Donc la connexion à Superbase. Donc là par exemple, on a Lip, tu as vu Superbase,

Speaker A

il est là. Donc là, on a le client, le middleware, les serveurs, donc la connexion à Superways, les fonctions de calcul, les helper. En fait, c'est ta boîte à outil du projet. à chaque fois tu vas ajouter une fonctionnalité qui

Speaker A

fait quelque chose. disons que je vais acheter une fonctionnalité qui va calculer la météo par exemple ou bien calculer bon allez je dis n'importe quoi la date de nouvel an et sera forcément dans lib donc c'est au c'est c'est c'est

Speaker A

sur libre tous nos fonctions helper d'accord des fonctions qui nous aident à ajouter des des fonctionnalités et cetera donc par exemple ça c'est la fonction mo data tu te rappelles lorsqu'on créait la première version de de l'app de

Speaker A

facturation au début on avait avait des fausses informations, on avait des fausses des fausses clients, des faux clients, des fausses factures et cetera.

Speaker A

Bah c'est cette fonction là qui nous avait permis de le faire. D'accord ? Cette fonction elle va, tu as vu tous ces éléments que tu vois là, Techdakar SRL en retard. Ici on a Soc Bahra payer et cetera. Ça c'est des fausses

Speaker A

informations et en fait c'est cette fonction là qui a permis de faire du s-à-dire de mettre assez d' des informations dans la base de données pour qu'on puisse visualiser notre site savoir que ah s'il y a des données,

Speaker A

c'est à ça que ça va ressembler. Donc cette fonctionl elle est là. Ça c'est une fonction qui permet justement tout simplement de faire du formattage. Elle va tout simplement prendre un montant et changer la devise, d'accord ? Exo franc

Speaker A

cfa. Donc c'est c'est aussi simple que cela. Donc ensuite, on a le dossier public. Donc le dossier public, c'est là où on va mettre tous les fichiers statiques donc qui ne changent pas ou bien qui changent très rarement. Donc

Speaker A

les images, les logos, le favicon, les icônes, donc tout ce qui ne change pas, on le met dans le dossier public.

Speaker A

Ensuite, on a le fichier middleware. Donc on en a parlé qui est à la racine du projet, c'est le gardien. D'accord ?

Speaker A

Il va s'exécuter avant chaque requête et il va vérifier l'authentification. On en a déjà parlé. Ensuite, on a le fichierinfo.lle.

Speaker A

la racine de tes projets aussi, tu mets là-bas tes variables d'environnement, tes clés à payer, ils vont jamais être poussés sur Github. Donc si tu as bien suivi la formation, jusque-là, tu comprends aussi. Et ensuite, on a package.jonjon. On en a aussi parlé,

Speaker A

c'est la liste de tous les packages installés et les commandes disponibles. Donc quand tu fais npm install, c'est ce fichier qui sait quoi installer. Donc par exemple ici, on a package.jonjon et là en fait tu vois ça c'est tous les

Speaker A

dependency, donc tous les packages utilisés par mon projet. D'accord ? Donc donc si je par exemple je donne ça à mon à mon à mon et c'est exactement qu'est-ce qu'il doit installer. Donc ça c'est pas à toi de le faire hein comme

Speaker A

je dis mais l'idée c'est de comprendre exactement l'arborescence d'un projet Ner il est très important. Donc quand tu demandes à Li de modifier quelque chose tu peux être plus précis. Donc au lieu de lui dire par exemple juste modifier

Speaker A

le dashboard, tu vas lui dire va modifier le le fichier ou bien le fichier page.tx qui se retrouve dans le dans le dossier dashboard qui est dans le dossier app. D'accord ? Là en fait, tu vas être beaucoup plus précis. ila

Speaker A

comprend exactement où aller. Donc ensuite une fois qu'on a vu ça, qu'on a vu un peu l'arborescence des dossiers et des fichiers dans projet NextJs, on va voir un peu le sujet suivant qui est les environnements. Donc on a plusieurs

Speaker A

environnements. Quand tu développes, tu travailles dans des environnements. Donc un environnement, c'est tout simplement un concept, mais c'est un concept qui est très important. Donc on a l'environnement local, c'est un machine.

Speaker A

Donc quand on fait des tests, quand on crée des choses et qu'on teste dans notre machine, d'accord ? On est en local, d'accord ? On va faire npm run dev et on va ouvrir le local host 3000.

Speaker A

C'est le local, d'accord ? Toi seul, tu peux voir ton application et si tu casses quelque chose, personne n'est affecté. C'est ton bac à sable, on va dire. On appelle aussi ça une soundbox.

Speaker A

D'accord ? L'environnement de staging, c'est une copie de ton application en ligne mais pas accessible au public.

Speaker A

C'est pour tester avant de mettre en production. Par exemple, tu déploies sur une URL staging. App et cetera et tu testes tout. Et si ça marche, tu passes en production. Pour les petits projets, on saute souvent cette étape mais si tu

Speaker A

as une si tu as un projet qui devient de plus en plus grand, tu vas vraiment avoir besoin d'un d'un environnement de staging de de test. D'accord ? Et l'environnement de production, c'est ton vrai site, d'accord ? C'est c'est la

Speaker A

vraie app, c'est le vrai SAS, c'est là que c'est là que tes utilisateurs vont, c'est là qu'ils vont tout simplement créer des comptes, payer et cetera. Donc généralement au début, tu n'as pas besoin de faire du staging, mais plus

Speaker A

ton projet va devenir grand, plus je te conseillerai de demander à ton de t'aider à mettre en place un environnement de staging. Donc le flux professionnel, c'est tu travailles en local, tu testes, tu vérifies. Tu pousses en staging, tu testes, tu

Speaker A

vérifies. Tu pousses en production, tu testes et tu vérifies. C'est ça en fait le flux de de déploiement général.

Speaker A

Ensuite, lire et corriger les erreurs. D'accord ? Donc c'est probablement le skill, la compétence le plus important de ce module. Savoir lire et corriger les erreurs. Donc quand ton application plante pas si elle plante, quand elle va planter, elle va forcément planter. Même

Speaker A

moi je fais des app je ça plante tout le temps. Tu l'as vu plusieurs fois et c'est pour ça que je l'ai laissé dans la formation pour que tu puisses savoir que c'est une réalité du web coding et même

Speaker A

du coding en général. Tu vois un mur de texte rouge dans ton terminal ou dans le navigateur, ça va te faire peur. La première réaction c'est la panique. La deuxième c'est de tout simplement tout copier et de donner à Lia. Et souvent ça

Speaker A

marche. D'accord ? Mais si tu apprends à lire l'erreur, tu deviens beaucoup plus rapide et beaucoup plus autonome.

Speaker A

D'accord ? Par exemple, tu as vu des fois ça me donne des erreurs. Je vais le donner à La, mais je vais quand même te dire OK, cette erreur là c'est juste ça parce qu'il te suffit juste de lire,

Speaker A

d'accord ? et une erreur typique à trois parties. Donc on a le type d'erreur.

Speaker A

Donc première ligne de l'erreur, c'est type error, référence error ou par exemple syntax error. Donc type error signifie juste que tu veux essayer de tu essayes de faire quelque chose, d'accord, mais avec le mauvais type de données. Disons que tu essayes de de

Speaker A

d'enregistrer un montant, mais au lieu de mettre un chiffre, tu as mis un nom, par exemple. D'accord ? Référence error veut dire que tu utilises quelque chose qui n'existe pas. Par exemple, tu dis à ajoute ça dans la base de données ou

Speaker A

bien ajoute ça euh prends cette fonction là et ajoute-le à ce montant-là alors que l'autre montant auquel tu parles n'existe pas. Référence error. D'accord ? Et troisème chose, il y a syntaxe error. Veut dire tout simplement dire que tu as fait une faute de syntaxe. Au

Speaker A

lieu de mettre point virgule, tu as mis virgule, tu as mis quelque chose d'autre. D'accord ? Mais généralement ça c'est pas ton problème. C'est pas toi qui fait ça. D'accord ? L'idée c'est que tu comprennes. Ensuite après le type, on

Speaker A

a le message, d'accord ? la description du problème. Donc par exemple, il y a des messages comme cannot read propriety of undefined, d'accord ? Des choses comme ça. D'accord ? Ça veut dire que tu essayes d'utiliser un map, donc c'est

Speaker A

une fonction sur quelque chose qui n'est pas défini et qui n'existe pas. D'accord ? Ensuite, il y a la trace donc c'est la pile d'appel. D'accord ? Et te dit dans quel fichier on a l'erreur, d'accord ?

Speaker A

dans quelle ligne dans quel fichier exactement l'erreur s'est produite. Donc généralement quand on a une erreur, on a toujours ces trois éléments. Donc on a le type, on a le message et on a la trace. Donc là, si on va dans notre code

Speaker A

ici, il y a pas vraiment d'erreur mais ce que je vais essayer de faire déjà, on va run le code, d'accord ? On va faire npm run dev, on va tout simplement lancer le code. Donc tu peux dire à ton

Speaker A

lance le code si tu veux, mais généralement si tu écris ça ici, ça le lance et tu économises des crédits, on va dire. Donc là, j'ai lancé le code.

Speaker A

Maintenant, disons que je vais aller dans le layout ou bien ouais, je vais aller dans login, d'accord ? Et je vais casser quelque chose. Donc disons que je vais dans login et je vais faire ça. Je vais casser le code. D'accord ? Donc là,

Speaker A

il y a un code, il y a un problème. D'accord ? Donc je vais aller dans local host. Donc ici, normalement tout va bien, mais vu que j'ai cassé la page login, regarde, si je passe, je vais dans me connecter et tu as vu, il y a un

Speaker A

problème. Donc le problème, il est là tout simplement parce que j'ai euh j'ai j'ai cassé la page login, il y a quelque chose que j'ai fait dedans. Donc là, si on monte en haut, d'accord, il y a des

Speaker A

types d'erreur, d'accord, qu'on va voir. Donc, tu as vu syntax error. Syntaxe, error parce qu'il y a une erreur de syntaxe tout simplement. euh la l'élément la phrase euh je l'ai coupé en en plein milieu. Donc il y a il y a une

Speaker A

erreur de syntaxe. D'accord ? Là ça te donne euh ça te donne c'est la trace.

Speaker A

D'accord ? Donc ça c'est la trace. Donc et te dit que OK, l'erreur se trouve dans le dossier source, le dossier app, le dossier login et la page point tsx.

Speaker A

D'accord ? Donc c'est cette page là qui se retrouve exactement là où il l'a dit.

Speaker A

Ça c'est la trace. D'accord ? Et là, c'est l'erreur elle-même, donc le message. Donc c'est quoi l'erreur ? Un terminated string constant. Donc en fait c'est une c'est un string. Donc c'est une chaîne de caractère qui n'est pas

Speaker A

terminée. Un terminated. C'est pour ça que là en fait je viens, je fais juste contrôle Z, je remets exactement ce qui se passait. D'accord ? Et là, d'accord, tu vas voir que si je reviens sur la page, ben écoute, si je reviens sur la

Speaker A

page, tout se passe bien. La page maintenant se charge. Donc ça, c'est une erreur. Et ça, c'est comme ça qu'on lit les erreurs. Tu vois, tu lis, tu comprends et c'est vraiment pas, il faut pas avoir peur du code, d'accord ? Faut

Speaker A

pas avoir peur de ton code. C'est ton code, c'est toi qui est au moment, c'est toi qui maîtrise. Et même si tu comprenais pas, prends le code, va le coller sur ton, il va t'expliquer et il va t'aider à 95 % des cas. Donc ensuite,

Speaker A

on va parler des erreurs courantes, d'accord ? Les erreurs que tu verras le plus souvent. Donc on a par exemple le module note found. Donc module not found, c'est tout simplement quand tu importes un fichier ou un package qui

Speaker A

n'existe pas. Donc soit le chemin est faux, soit le package n'est pas installé. Donc tu vas tout simplement demander à Lia de corriger le chemin ou de faire un npm. Je t'explique, sur notre appacture, on a des modules. Donc

Speaker A

tout ça quand tu vois ça c'est un fichier qui est très lourd parce que ça installe tous ces éléments là. C'est des choses queon app. D'accord ? Maintenant, imagine ici euh on essaie euh de de d'importer par exemple tous ces fichiers que tu vois,

Speaker A

tous ces dossiers que tu vois, ils exportent quelque chose, d'accord ? Ils vont tous exporter quelque chose. Euh tu as aller dans on va aller dans index, d'accord ? tu as vu, il va exporter quelque chose. Donc tous ces éléments

Speaker A

que tu vois, ils exportent quelque chose. Donc et ce qu'il exporte, c'est nous, c'est ça qu'on va importer dans notre code pour euh pour utiliser la fonctionnalité qu'il qu'il propose tout simplement. Maintenant, disons qu'on essaie d'importer quelque chose qui

Speaker A

n'existe pas ici dans ce dossier node modules. D'accord ? Donc généralement, ça va ça va te créer une erreur euh que ces modules not fond. Donc la le ce que tu essayes de d'importer n'a pas été trouvé. Soit il n'existe pas. Soit tu as

Speaker A

mal écrit le nom, soit le par exemple le chemin d'importation a changé et cetera.

Speaker A

Donc c'est ça que veut dire module not. Ensuite on a cannot read properties on and off and defined. Donc c'est un type d'erreur que tu vas peut-être voir des fois. Donc ça veut dire que tu essayes d'accéder à quelque chose qui est vide.

Speaker A

Souvent les données base n'ont pas encore chargé. par exemple, tu essayes de les afficher. Donc la solution c'est de tout simplement toujours ajouter une vérification de voir si les données existent alors afficher. Donc ça tu dis juste à La, tu lui dis quand tu vas

Speaker A

montrer par exemple les factures ou les clients, vérifie qu'existe déjà. Ne ne ne charge rien tant que les données ne sont pas là. D'accord ? Donc c'est ça.

Speaker A

Ensuite, on a le l'erreur hydration error. Donc c'est un problème spécifique à NextJs. Donc NextJs a aussi ses problèmes, on va dire. Donc ça veut dire que le serveur et le navigateur ne sont pas d'accord sur ce qu'il faut afficher

Speaker A

et c'est souvent lié à des extensions de navigateur ou à du contenu dynamique. Donc on va pas trop rentrer dans le naviguer, dans le hydration error.

Speaker A

Dis-toi juste que si tu as ce problème là, copie-le et colle-le dans dans ton IA, il va t'aider. Et peu importe même le type de problème que tu as là. Notre objectif, c'est de te faire comprendre exactement quel est le type de problème

Speaker A

pour que tu puisses savoir qu'est-ce qui se passe. Ensuite, on a le next redirect. Donc c'est pas vraiment une erreur, c'est next js qui fait une redirection et ça arrive souvent avec le middleware d'authentification et c'est très normal. Donc il a ce qu'on appelle

Speaker A

les logs de production. D'accord ? Donc là si on va dans notre versel, donc ça par exemple c'est notre versel. Là on a easy facture. Donc je vais cliquer dans easy facture. D'accord ? Euh je vais aller dans logs. D'accord ? Et ici au au

Speaker A

niveau de logs, bon là il y a pas vraiment de logs parce que c'est un site assez nouveau. D'accord. Mais généralement, il y a il y a des logs de production si ton site est en activité.

Speaker A

Et là, tu pourras voir s'il y a des erreurs qui se passent en temps réel une fois que tu as euh mis ton site en ligne. Maintenant, il restait à parler de guit et de version contrôle. Mais je

Speaker A

pense qu'on a qu'on a déjà parlé de Git, hein. On a beaucoup parlé de Git, euh, on l'a utilisé. Je pense que tu sais exactement comment utiliser Git.

Speaker A

Maintenant, il y a rien de compliqué. Donc, on va tout simplement passer au recap. D'accord ? Donc, on va dire que c'est la fin du module 6. Donc c'est un module qui était purement théorique mais nécessaire parce que là tu comprends

Speaker A

maintenant ce qu'est une base de données. Tu comprends maintenant ce qui le SQL et le nom SQL. Pourquoi on utilise Postgress SQL ? D'accord ? Tu connais les quatre commandes SQL donc select, insert, update, delete. Tu peux débugger tes données directement dans SB

Speaker A

si tu veux. Tu comprends les framework HTML, CS, JavaScript comme fondation NXJS qui gère tout par-dessus. Tu connais la structure de ton projet NextJs, tu sais quel fichier fait quoi, tu sais c'est quoi le dossier composant, le dossier app et cetera, le dossier

Speaker A

lib. D'accord ? Tu comprends les environnements local, staging, production et pourquoi ça marche sur ma machine n'est pas suffisant. D'accord ?

Speaker A

Donc il faut toujours passer euh par le test en local et en production si c'est une petite app. Mais si ça ton app commence à grandir, il te faut un environnement de staging là où tu testes. Ensuite, on a appris à lire les

Speaker A

erreurs. Donc quelle est l'erreur que j'ai ? C'est quoi le type ? C'est quoi le message ? C'est quoi la trace ? Tu sais quoi donner à Léa pour qu'elle corrige vite et on a déjà parlé de GitHub et en fait ça te permet de tout

Speaker A

simplement devenir un Vibecoder plus intelligent, un Vibe Coder qui sait ce qu'il est en train de faire. Donc maintenant dans le module 7, on crée un nouveau SAS mais cette fois-ci avec des API et des intégrations externes. On va

Speaker A

connecter notre SAS à des services tir par exemple envoyer des emails, générer des des PDF et bien plus. D'accord ?

Speaker A

C'est là que le vibe coding va devenir vraiment puissant. Donc à tout de suite dans le module 7. Et voilà, c'est la fin de la partie gratuite de la formation.

Speaker A

Donc on a eu six modules et maintenant tu sais comment utiliser les outils, comment créer des sites, comment sécuriser une app et comment construire une application full stack. Et vraiment pour gratuit, c'est pas mal du tout.

Speaker A

Mais la question c'est est-ce que tu vas t'arrêter là ou est-ce que tu vas aller jusqu'au bout ? Donc tu peux rejoindre le programme Easy SAS car là-bas c'est les modules sur les paiements, mobile money, cartes bancaires, c'est les API,

Speaker A

c'est le SAS avancé et surtout c'est le marketing et le pricing pour avoir de vrais clients qui payent. Tu as aussi le logiciel Easy SAS que j'ai personnellement créé qui va t'aider à trouver et valider ton idée de SAS. Et

Speaker A

en plus de cela, les 100 premières personnes qui vont intégrer le programme auront un coaching de groupe avec moi, un coaching gratuit dans lequel je vais les guider et les aider à créer ou bien lancer leur sas ou répondre à leurs

Speaker A

questions si jamais ils sont bloqués. Donc si tu es intéressé, tu peux rejoindre rapidement le programme EasySAS. Le lien est en description.

Topics:SaaSintelligence artificiellevibe codingcréation logicieldéveloppement webformation SaaSmonétisationmobile moneymarketing SaaSdéploiement application

Faut-il savoir coder pour suivre cette formation ?

Non, la formation est conçue pour des débutants complets. L'IA génère le code à partir de vos instructions en français, vous n'avez pas besoin de coder vous-même.

Quels types de paiements sont intégrés dans la formation ?

La formation couvre l'intégration de Stripe, les cartes bancaires classiques ainsi que le mobile money, particulièrement adapté au marché africain.

Combien de modules comporte la formation et que couvrent-ils ?

La formation comprend 10 modules allant des bases du SaaS et IA, à la création, sécurité, intégration API, paiement, jusqu’au marketing et acquisition des premiers utilisateurs.

Get More with the Söz AI App

Transcribe recordings, audio files, and YouTube videos — with AI summaries, speaker detection, and unlimited transcriptions.

App Store Google Play

Or transcribe another YouTube video here →

Free tools: TXT to SRT · SRT Validator · Merge SRT · Subtitle to Text · All tools