YT YouTube2Text

YouTube2Text → Transcripts → Comment Créer un SaaS de A à Z avec l’IA (Formation)

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

by Amadou Fall · 77,755 words · 10,998 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00Salut ! Et dans cette formation, je
0:01m'apprête à te prendre d'un parfait
0:03débutant dans la création de logiciel
0:04SAS à quelqu'un qui est capable de
0:06créer, déployer et monétiser ses propres
0:09applications tout seul avec l'aide de
0:11l'intelligence artificielle. Et quand je
0:13te dis parfait débutant, je te parle de
0:15zéro. Tu n'as jamais codé de ta vie, ce
0:17n'est pas grave. Tu ne sais pas ce que
0:18c'est un serveur, une base de données,
0:20une API. On va tout voir à la fin de
0:22cette formation. Tu auras créé plusieurs
0:24sces fonctionnels avec de vrais systèmes
0:26de paiement déployés en ligne et
0:28accessible par n'importe qui à travers
0:30le monde. Ce que tu vas apprendre à
0:31faire, ça s'appelle du vibe coding. En
0:33gros, tu parles à une intelligence
0:35artificielle en français, tu lui
0:37expliques ce que tu veux et elle code le
0:39tout pour toi. Tu ne tapes pas une seule
0:41ligne de code, il a le fait pour toi.
0:43Toi, tu ne fais que diriger. Moi-même
0:45qui te parle, j'ai créé et lancé plus de
0:47cinq sasses en l'espace de 2 mois avec
0:49cette méthode là. pas avec une équipe de
0:51développeurs, pas avec un budget fou.
0:53Tout seul depuis Dakar, j'ai réussi à le
0:54faire et un de ces SAS là a bientôt plus
0:56de 200000 utilisateurs et il y en a un
0:59autre qui va bientôt atteindre les 50000
1:00utilisateurs et les trois autres sont
1:02tous à plus de 10000 utilisateurs et
1:04tout ça je l'ai fait en l'espace de 2
1:06mois. Et dans cette formation non
1:07seulement je vais te montrer comment
1:08créer des s mais ensuite je vais te
1:10montrer comment les marketer. C'est
1:11comme ma méthode comment est-ce que je
1:13me prends pour acquérir mes 1000
1:15premiers utilisateurs assez facilement.
1:17Donc c'est juste pour te dire que cette
1:18formation est complète. Une fois que tu
1:20la suis, tu n'as pas besoin de suivre
1:21une autre formation. Il m'a pris
1:23énormément de temps et de travail à
1:24mettre en place. J'ai essayé d'aligner
1:26chaque module dans l'ordre parfait pour
1:28un débutant, l'ordre exact dans lequel
1:30j'aurais voulu apprendre les choses si
1:32je repartais de zéro aujourd'hui. Donc
1:34pas de remplissage, pas de blabla.
1:36Chaque minute compte donc reste bien
1:38focus jusqu'à la fin. On a 10 modules
1:40dans cette formation et laisse-moi te
1:42montrer rapidement ce qu'on va couvrir
1:44ensemble. Donc le module 1, c'est
1:45celui-ci, c'est les fondations. On va
1:47poser toutes les bases. C'est quoi SAS ?
1:50Comment ça marche, pourquoi c'est le
1:51meilleur business model, comment
1:52fonctionne le web, comment fonctionne
1:54l'intelligence artificielle, les agents.
1:56C'est la fondation sur laquelle va
1:57reposer tout le reste. Ensuite, on va
1:59passer au module 2 qui est la prise en
2:01main des outils. Donc dans ce module là,
2:03on va tout installer. On va installer
2:05Winurf, Cloud Code, les comptes, Git. Je
2:07te montre l'interface, comment parler à
2:09l'agent, comment choisir le bon modèle
2:11IA selon la tâche, comment personnaliser
2:13le comportement de l'IA. À la fin de ce
2:15module, tu es déjà opérationnel et prêt
2:18à lancer ton premier SAS, donc ton
2:20premier projet. C'est ce qu'on va faire
2:21dans le module 3. Donc on va créer
2:23ensemble un site web simple type
2:25portfolio ou landing page. Tu vas voir
2:27comment l'IA génère un design, comment
2:29l'ajuster et surtout comment le déployer
2:31en ligne. Ce sera ton premier outil en
2:33live, ton premier déclic. Ensuite, on
2:35passera au module 4. On va parler de la
2:37sécurité des applications. Avant d'aller
2:39plus loin, on parle de sécurité. Les
2:41bonnes pratiques, les erreurs à éviter.
2:43Comment faire un Audi de sécurité sur
2:45ton app ? Ce n'est pas le sujet le plus
2:47excitant, mais si tu sautes ça, tu
2:48risques de tout perdre plus tard. Et
2:50ensuite, on va passer au module 5, ton
2:53premier sas full stack. Là, on passe aux
2:54choses sérieuses. On crée une vraie
2:56application complète avec front end,
2:58back end, base de données, un vrai ça,
3:01c'est pas juste un site vitrine. Je te
3:02montre le Vibe coding loop, la stack
3:04complet et on construit tout ensemble.
3:06Et si tu ne comprends pas ce que je
3:08viens de dire en terme de front end,
3:09back end, de base de données, ne
3:10t'inquiète pas, je vais tout te montrer.
3:12Dans cette formation, tu n'as besoin de
3:14rien savoir, d'accord ? Juste sur cette
3:16formation et tu sauras exactement
3:18comment faire tout cela. Ensuite, on va
3:19passer au module 6. Et dans ce module,
3:21on va comprendre le développement.
3:23Maintenant qu'on a construit, on prend
3:24du recul pour comprendre ce qu'on a
3:26fait, les bases de données SQL, les
3:28framework, GitHub, le Virgen et surtout
3:31les techniques avancées pour utiliser
3:32les agents de manière intelligente.
3:35Ensuite, on va passer au module 7 où on
3:36va parler de SAS avec API et
3:39intégration. On va créer un SAS plus
3:41ambitieux, planification, design UX,
3:43intégration d'API externe, debugging,
3:46branding, déploiement. Tu vas vraiment
3:48avoir tout le cycle de création d'un
3:50vrai produit. Et ensuite, on passera au
3:52module 8 où on va voir les paiements.
3:54C'est le module le plus crucial pour
3:56nous. On intègre Stripe, les cartes
3:58bancaires, mais surtout le mobile money
4:00parce que c'est ça qui marche pour nous
4:02en Afrique. Parce que si ton SAS
4:03n'accepte pas le mobile money, tu perds
4:05la majorité des clients. On va aussi
4:07débloquer les problèmes de paiement
4:09parce qu'il y en aura, crois-moi qu'il y
4:10en aura. Ensuite, il y aura le module 9
4:12où on va faire un sas avancé de l'idée
4:15au produit. On part d'une idée et on
4:17construit un sas complet de A à Z avec
4:20idéation, fonctionnalité, intégration,
4:22tout c'est le module où tu deviens
4:25vraiment autonome. D'accord ? Après ce
4:26module, tu pourras vraiment créer
4:28n'importe quel type de ça qui te vient à
4:30l'esprit. Ensuite, on va passer au
4:31module 10 qui est le module marketing,
4:33pricing et lancement parce que le
4:35meilleur produit du monde ne sert à rien
4:37si personne ne le connaît. Donc, comment
4:39fixer tes prix ? Comment trouver tes
4:401000 premiers clients, tes 1000 premiers
4:42utilisateurs ? Quelles sont les
4:43stratégies qui marchent en Afrique ? Je
4:44vais te partager dans ce module là ma
4:46stratégie personnelle que j'utilise pour
4:48scaler mes sces. Comme je te l'ai dit,
4:50tous les sas que j'ai lancé ont tous
4:52atteint 1000 premiers utilisateurs en
4:54moins de 48 heures, ça c'est certain.
4:56Mais toi, comme je te dis, si tu
4:58utilises ma stratégie que je vais te
5:00montrer dans ce module 10, tu pourras
5:01avoir tes 1000 premiers utilisateurs en
5:03moins de 30 jours. Et cela importe au
5:06niveau de ça, parce que en plus de te
5:07donner une stratégie marketing, je te
5:09donnerai aussi le meilleur business
5:11model que tu peux mettre en place pour
5:13ton SAS. Donc voici ce qui t'attends.
5:15C'est vraiment plusieurs heures de
5:16formation. C'est du concret, c'est du
5:18pratique et des vrais résultats que tu
5:20auras. Et voici un témoignage de
5:22Gamaliel tank, un créateur de contenu
5:23très connu sur les réseaux Instagram,
5:25TikTok. Il a plus de 200000 abonnés sur
5:27Instagram. Il m'a contacté il y a moins
5:29de 2 mois, il voulait créer son sas
5:31révision IAD. Donc, je l'ai aidé à
5:33trouver le nom, je l'ai aidé à
5:34construire l'outil lui-même et en moins
5:36de un mois, il m'a contacté pour me dire
5:38" Ramadou, je viens d'avoir plus de 6000
5:40utilisateur en moins de 30 jours." Donc
5:42voici son témoignage.
5:44J'ai eu la chance d'avoir accès à cette
5:45formation avant vous et surtout accès à
5:47l'accompagnement d'Amadou qui m'a permis
5:49de lancer mon premier SAS et mon premier
5:52S'appelle révision AI. Vous pouvez aller
5:54taper ça sur Google. Je l'ai mis sur
5:56pied grâce à l'accompagnement de Amadou
5:59avec son programme Easy SAS. Et donc du
6:01coup, je vais vous montrer quelques
6:02résultats. Il y a moins de 2 mois, je
6:05l'ai lancé et je suis déjà à plus de
6:077523
6:09users qui sont inscrits sur mon outil.
6:11Et le plus magnifique dans ça, c'est que
6:13sont les revenus récurrents. D'accord ?
6:15Sont les revenus récurrents. C'est
6:17lorsque tu as créé, tu ne crées que une
6:18fois. Quand quelqu'un s'abonne, il paye
6:20de façon récurrente, surtout si ça
6:22résout une vraie pas si c'est un vraie
6:25solution, je veux dire si ton ça se
6:27résout vraiment un vrai problème, prenez
6:29cette formation sérieux parce que ça va
6:30réellement vous permettre d'atteindre
6:31vos objectifs. Si c'est euh celui de
6:34lancer votre sas, vous pourriez
6:35également atteindre ces résultats là. Ne
6:37doutez pas de la crédibilité de cette
6:39formation. Amadou, c'est un excellent du
6:41moins c'est un excellent enseignant dans
6:44en la matière. il maîtrise son sujet, il
6:47a développé plusieurs projets, il
6:48m'accompagnait euh voilà,
6:50personnellement, je je veux pas parler
6:52d'autres personnes qui l' accompagné
6:53pour pouvoir lancer les projets. Il
6:54m'accompagna à pouvoir lancer mon tout
6:56premier SAS en 2026 en l'espace de
6:58quelques semaines seulement et du coup
7:00ça me donne des revenus récurrents comme
7:02je t'ai montré dans cette vidéo.
7:03Et dis-toi que à la fin de cette
7:05formation toi aussi tu pourras faire
7:06comme Gamaliel. Donc voici ce que
7:08tuattends dans Isisas. C'est des heures
7:10de formation, c'est du concret, c'est du
7:12pratique et des vrais résultats basés
7:14sur une vraie expérience. Donc
7:15maintenant, on va commencer, on va
7:17commencer par quelque chose qui est très
7:19important. Il faut se poser cette
7:20question là. Pourquoi le SAS et pourquoi
7:23maintenant ? Ça c'est très important.
7:25Déjà, il faut comprendre c'est quoi le
7:27SAS. Le SAS, ça veut dire software as a
7:29service. En gros, c'est un logiciel que
7:31les gens utilisent en ligne et pour
7:33lequel ils payent un abonnement. Par
7:34exemple, Netflix, c'est un SAS, Notion,
7:37c'est un SAS. WhatsApp IA qui est mon
7:38outil d'intelligence artificielle, c'est
7:40un SAS. Même WhatsApp Business avec ses
7:42fonctionnalités payantes, c'est
7:43[musique] un SAS. Et maintenant, je vais
7:44te montrer pourquoi le SAS, c'est le
7:46business model à suivre aujourd'hui.
7:48Premièrement, on a le revenu récurrent.
7:50Tu ne vois pas une fois et c'est fini.
7:52Chaque mois, l'argent tombe avec ton
7:53SAS. Par exemple, si tu as 50 clients
7:55qui te payent 5000 francs, c'est tout
7:56simplement 250000 francs que tu gagnes
7:59chaque mois de manière automatique. Même
8:01quand tu dors, tu gagnes de l'argent. Et
8:03c'est vraiment ça la magie du SAS.
8:06Deuxième chose, on a la scalabilité. La
8:08scalabilité veut dire que tu es 10 ou
8:1110000 clients, ton SAS fonctionnera
8:13pareil. Tu n'auras pas besoin
8:14d'embaucher plus de monde pour servir
8:16plus de monde. Ce n'est pas comme un
8:18restaurant où chaque nouveau client te
8:19demande plus de serveurs, plus de
8:21tables, plus de matières premières.
8:23Troisièmement, nous avons les marges.
8:25Une fois que ton ça s créé, tes coûts
8:27sont quasi nuls. On parle là de marge de
8:2980 à 90 %. En fait, plus tu as
8:32d'utilisateur, plus tu deviens rentable.
8:34trouve-moi d'autres business qui ont ces
8:35margeslà. Et quatrièmement, on a la
8:38valeur de revente. Il faut savoir que
8:40dans le monde des SAS, un SAS rentable
8:42se vend entre 24 et 48 fois son revenu
8:45mensel. Donc par exemple, si ton SAS
8:46fait 500000 francs par mois, il vaut
8:49entre 12 et 24 millions. Tu n'as pas
8:51construit juste un job, tu as construit
8:53un actif, tu as construit du foncier
8:55digital. Et maintenant, on va parler de
8:57la vraie révolution de l'IA. Avant 2023,
9:00créer un SAS, c'était 6 mois minimum de
9:03développement. Il fallait payer un
9:04développeur minimum 500000 francs ou
9:06plus par mois. C'était réservé à ceux
9:08qui avaient du capital ou des
9:10compétences techniques. Mais
9:12aujourd'hui, avec le Vipe coding, tu
9:13peux créer un SAS fonctionnel en une
9:15semelle ou même moins sans écrire une
9:17seule ligne de code toi-même, il y a le
9:19fait pour toi. Et c'est ça le changement
9:22que je veux que tu a tête. Tu n'es plus
9:24un consommateur de technologie. à partir
9:26de maintenant, tu es un créateur. Et je
9:29vais te montrer des exemples africains
9:30parce que ce que je te dis, c'est pas de
9:31la théorie. Regarde ce qui se passe déjà
9:33en Afrique. On a Flutter Wave créé au
9:36Nigéria, valorisé à plus de 3 milliards
9:38de dollars. Il y a Paystack racheté par
9:41Straight pour 200 millions de dollars.
9:43Il y a Chiper Cash Wave ici au Sénégal.
9:46Ces entreprises ont tous commencé à être
9:48des sas, des solutions simples pour
9:49résoudre des problèmes africains. Et
9:51c'est là ton avantage. Ton avantage,
9:53c'est que tu es africain. Tu vis en
9:55Afrique ou bien tu as vécu en Afrique.
9:56Tu connais les vrais problèmes des
9:58Africains. Tu vis ces problèmes, tu sais
10:00ce qui manque, tu sais ce que les gens
10:02sont prêts à payer pour résoudre. Et
10:04c'est ça qui est ton vrai avantage.
10:05Encore une fois, tu connais les
10:08problèmes des africains et ça ça doit
10:10être un déclic pour toi. Tu n'es plus un
10:11consommateur, tu es un créateur. Donc
10:13aujourd'hui, un s de facturation adapté
10:15à la TVA sénégalaise par exemple, ça
10:17n'existe pas vraiment. Un outil de
10:19gestion de pour les boutiquers qui
10:20acceptent Orange Monie, pareil. Un CRM
10:23pour les tontines, ça n'existe pas
10:25encore ou bien en tout cas moi je le
10:26connais pas. Les opportunités sont là,
10:29ils sont sous ton nez et même s'ils
10:30existent déjà, bah tu peux tout
10:31simplement concurrencer. D'accord ? Donc
10:33maintenant qu'on sait pourquoi on est
10:34là, on va poser les bases parce que sans
10:36fondation solide, tout le reste va
10:39s'effondrer. Dans la deuxième partie du
10:41module 1, on va prendre le temps de
10:42maintenant comprendre c'est quoi un sas
10:44parce qu'on a eu la définition d'un sas.
10:46Maintenant il faut qu'on essaie de
10:47comprendre comment ça marche tout ça. On
10:48a vu que c'est important, on va rentrer
10:50dans le concret. C'est quoi exactement
10:53un SAS ? Donc comme je l'ai dit tout à
10:55l'heure, ça veut dire software as a
10:57service, logiciel en tant que service.
10:59Donc concrètement, c'est un logiciel qui
11:01est accessible en ligne via un
11:03navigateur ou une app qui fonctionne par
11:05abonnement mensuel ou annuel. Il y a
11:06même d'autres systèmes de monétisation
11:08que j'utilise dont je te parlerai tout à
11:10l'heure qui est hébergé sur des serveurs
11:12et pas juste sur l'ordinateur du client
11:14et qui se met à jour automatiquement.
11:16Donc il faut penser par exemple à
11:17Netflix. Sur Netflix, tu ne télécharges
11:19pas les films sur ton ordinateur. Tu vas
11:21sur le site, tu te connectes et tout est
11:23là. tu payes chaque mois et quand
11:25Netflix ajoute une nouvelle
11:26fonctionnalité, tu l'as automatiquement.
11:28C'est la différence avec un logiciel
11:30classique comme par exemple micro euh
11:31Microsoft Office version 2010 que tu
11:34achètes une fois et c'est sur un CD. Le
11:37SAS, c'est Microsoft 365 où tu payes
11:40chaque mois mais tu as toujours la
11:42dernière version parce que ça se met à
11:44jour automatiquement vu que tout est en
11:46ligne. Et du coup pour ton client, c'est
11:48pratique parce que il n'y a pas
11:49d'installation compliquée, il a un accès
11:51partout et il est toujours à jour. Et
11:54pour toi aussi, c'est génial parce que
11:55tu as des revenus prévisibles, une
11:57relation continue avec le client et une
11:59possibilité d'améliorer en permanence.
12:02[musique] Maintenant, je vais te dire
12:03c'est quoi les trois composants d'un
12:06SAS. On va comprendre c'est quoi,
12:07qu'est-ce qu'il y a sous le capot,
12:09comment un SAS est construit. Il y a
12:10trois composants principaux. Donc on a
12:13le front end, c'est ce que l'utilisateur
12:15voit, c'est les boutons, les
12:17formulaires, les couleurs. Quand tu
12:18rentres dans un site, tout ce que tu
12:19vois, c'est ça le front end, les boutons
12:21et cetera, les formulaires. Quand tu vas
12:23sur un site et que tu cliques sur un
12:25bouton, ça c'est le front end. Ensuite,
12:27[grognement] nous avons le backend. Donc
12:29le backend, c'est la logique qui est
12:30cachée. Quand tu cliques sur se
12:32connecter et que le site vérifie ton mot
12:34de passe, c'est le backend qui
12:36travaille. C'est le cerveau du sas.
12:37D'accord ? Et on a la base de données,
12:40c'est où toutes les informations sont
12:42stockées, les comptes d'utilisateur, euh
12:46les données, les paramètres. Donc tout
12:48est là. Et je vais te donner une
12:50analogie qui est très simple. Donc
12:52imagine par exemple un restaurant. Donc
12:54le front end, c'est la salle, c'est ce
12:56qu'on voit, c'est la déco, les tables,
12:58les menus que tu lis, c'est ce que le
13:00client il voiend c'est la cuisine. Le
13:03client euh ne le voit pas mais c'est que
13:06c'est là que tout se passe. C'est là que
13:07on fait tous les plats, les recettes, la
13:09préparation, la logique. Ensuite, nous
13:11avons la base de données. Par exemple,
13:13c'est le frigo et le stock où sont
13:16rangés tous les ingrédients. Et c'est là
13:18qu'il y a un 4è élément qui est très
13:20important, l'API. Donc l'API, c'est le
13:23serveur de restaurant, la personne qui
13:25fait le lien entre la salle et la
13:27cuisine. Le client passe la commande au
13:28serveur, le serveur transmet à la
13:30cuisine puis rapporte le plat. Donc dans
13:33un sas, la pay front end de communiquer
13:36avec le backend. Donc maintenant qu'on a
13:38vu l'analogie, on va passer aux
13:40métriques importantes. Donc c'est
13:42vraiment ce que tu dois savoir. Avant
13:44d'aller plus loin, on va voir les termes
13:46que tous les entrepreneurs SAS
13:47utilisent. Et il y a quatre métriques
13:49essentielles et même si tu ne retiens
13:51rien d'autre, retiens cela. On a le MR
13:54qui est le Monthfly Recuring Revenue,
13:56donc c'est un revenu mensuel récurrent.
13:58Si tu as par exemple 100 clients qui
13:59paye 5000 francs par mois, donc ton MRR
14:02est de 5000 francs, 500000 francs CFA.
14:05C'est le chiffre que tout le monde
14:06regarde dans les ça. SAS, c'est très
14:08important. Ensuite, on a le turn qui est
14:10le taux d'attition, le taux
14:11d'annulation. C'est le pourcentage de
14:13clients qui annulent chaque mois. Donc
14:15si tu as 100 clients et que 5 clients
14:17annulent, ton turn est de 5 %. Un bon
14:20sas vise un turn inférieur à 5 %.
14:23Au-dessus, tu as un problème à régler.
14:25D'accord ? Ensuite, on a le CAC, le
14:28customer Acquisition Cost, qui est très
14:30important. Combien ça te coûte
14:32d'acquérir un client ? Si tu dépenses
14:34par exemple 50000 francs en pub et que
14:36tu obtiens 10 clients, ça veut dire que
14:37ton CAC est de 5000 francs par client.
14:40Ensuite, on a le LTV, le lifetime
14:42[musique] value. Combien un client te
14:46rapporte au total pendant qu'il reste
14:47chez toi. Donc si un client paye 5000
14:49francs par mois et qui reste en moyenne
14:5120 mois, donc sa LTV est de 100000
14:54francs CFA. Et la règle d'or, c'est que
14:57ta LTV doit être au moins trois fois
15:00supérieure à ton CAC. Donc si ça te
15:02coûte 5000 francs d'acquérir un client,
15:04il doit te rapporter au moins 15000
15:06francs au total. Sinon, tu perds de
15:08l'argent et tu ne le sais même pas. Donc
15:10maintenant, il y a d'autres termes qui
15:11sont aussi importants comme par exemple
15:12le AR qui est revenu récurrent annuel.
15:15Mais pour l'instant, on va rester sur
15:17ces quatre métriques qui sont les plus
15:19essentiels. Et on va passer maintenant
15:20au sujet suivant qui est bas. Il est
15:23très important de savoir comment
15:25fonctionne le web. Donc je vais rester
15:27simple, pas de jargon unique, pas de
15:29truc trop compliqué. On va essayer de te
15:31l'expliquer d'une manière aussi simple
15:33que possible. Maintenant, quand tu tapes
15:35une adresse comme par exemple google.com
15:37dans ton navigateur, voici ce qui se
15:39passe. Donc il y a ton navigateur qui va
15:41envoyer une demande à un serveur. Un
15:44serveur, c'est juste un ordinateur qui
15:46est allumé 24 heures/ 24 quelque part
15:48dans le monde et qui attend juste des
15:50demandes. Donc ce serveur va recevoir ta
15:53demande et te renvoyer une page web. Et
15:56cette page qu'elle envoie, c'est du code
15:58du HTML pour la structure et de CSS pour
16:01le style et de JavaScript pour les
16:04interaction. D'accord ? Donc ton
16:06navigateur reçoit ce code et l'affiche
16:08joliment à l'écran. Donc c'est tout.
16:11C'est simplement ça. C'est aussi simple
16:13que cela. Si tu comprends ça, tu
16:14comprends comment fonctionne le web. Et
16:16quand tu crées un SAS, tu crées ces
16:18fichiers de code, tu les mets sur un
16:20serveur. Ensuite, n'importe qui dans le
16:22monde peut y accéder en tapant ton
16:24adresse. Donc maintenant que tu
16:25comprends ça, on va passer aux
16:26technologies de base dans la création de
16:28SAS. On va parler des technologies que
16:30tu vas rencontrer dans ton chemin de
16:32création. Donc on a le HTML. Donc le
16:34HTML c'est la structure de ton site,
16:36c'est le squelette. C'est comme le la
16:39fondation et les le squelette d'une
16:41maison. D'accord ? Ça définit où sont
16:43les titres, les paragraphes, les boutons
16:45et cetera. Ensuite, nous avons le CSS.
16:47Le CSS, c'est le style, c'est la
16:49peinture, la déco, les couleurs. Ça va
16:52rendre le HTML joli. Ensuite, nous avons
16:54le JavaScript. Le JavaScript gère
16:56l'interactivité. Par exemple, c'est ce
16:58qui fait que quand tu cliques sur un
16:59bouton, il y a quelque chose qui se
17:01passe. Maintenant, dans la vraie vie, on
17:02n'écrit plus de HTML, CSS, JavaScript
17:05pur. On utilise des framework, donc des
17:07outils qui simplifient le travail. Et
17:09dans ces framework là, il y a des
17:11frameworks qui sont très connus. Par
17:12exemple, nous avons React qui est le
17:13framework JavaScript le plus populaire.
17:16Il a été créé par Facebook. C'est ce que
17:18utilise la majeure partie des SAS
17:20moderne. Au-dessus de React, on a des
17:22méta frameworks comme par exemple NextJS
17:25ou Next JS qui ajoute encore plus de
17:28fonctionnalités utile. Mais ne
17:30t'inquiète pas si tout cela te sent
17:32compliqué. tu en fait vraiment on est
17:34dans une partie où tu dois juste
17:35comprendre ce qui se passe. Rappelle-toi
17:36le vibe coding c'est Lia qui va écrire
17:38le code pour toi. Toi tu dois juste
17:40comprendre les concepts pour savoir quoi
17:43demander. D'accord ? Donc n'ai pas peur
17:45quand je t'explique tout cela et que ça
17:46te semble trop compliqué. Maintenant on
17:48va parler d'un sujet qui est tout aussi
17:50important, c'est l'hébergement et le
17:52déploiement de ton sas. Une fois que tu
17:53l'as créé, il faut bien que tu le mettes
17:55en ligne, il faut que tu le mettes sur
17:56un serveur pour que les gens puissent
17:58accéder. Donc le fait de mettre ton code
18:00en ligne une fois qu'il est en ligne,
18:01c'est ça qu'on appelle le déploiement.
18:03Et pour déployer, tu as besoin de trois
18:05choses. Tu as besoin d'un nom de
18:07domaine. Donc par exemple, c'est comme
18:09easisas.com, monas.com. Ça coûte à peu
18:12près entre 5 et 10000 francs par an. Ça
18:15dépend aussi du ça du nom de domaine. Il
18:17y a des noms de domaines qui coûtent des
18:18millions de dollars. D'accord ? Donc ça
18:19dépend. Ensuite, on a l'hébergement.
18:22L'hébergement, c'est l'endroit où ton
18:24code va vivre. c'est le serveur. Et pour
18:27finir, tu as besoin d'un service de
18:28déploiement. Le service de déploiement,
18:30c'est ce qui va prendre ton code et le
18:32mettre sur un serveur. Maintenant, la
18:34bonne nouvelle, c'est qu'aujourd'hui,
18:35des services comme Versel font tout ça
18:38gratuitement pour les petits projets.
18:39Donc, tu connectes ton code, tu cliques
18:41sur déployer et en 2 minutes ton SAS est
18:44en ligne. C'est vraiment devenu très
18:46simple de déployer sans SAS. Donc, plus
18:48besoin de configurer des serveurs
18:49compliqués. On a Versel, on a Netlify,
18:52on a Railways. Ce sont tous des services
18:54qui s'occupent de tout pour toi.
18:55Maintenant qu'on a compris ça, on va
18:57passer à un autre sujet. Comment est-ce
18:59qu'on va utiliser LIA pour créer du code
19:02? On va parler de l'IA parce que c'est
19:04le cœur de ce qui rend tout cela
19:06possible. D'accord ? On va commencer par
19:08voir c'est quoi un LLM. Donc un LLM, ça
19:11veut dire large language model. C'est un
19:14grand modèle de langage. C'est le type
19:16DI qui est derrière chat GPT, Cloud et
19:19tous les autres. que tu vois
19:20actuellement sur internet. Comment ça
19:22marche ? En simplifiant beaucoup plus,
19:25ces IA ont lu des milliards de textes,
19:28tout internet, pratiquement tous les
19:29livres, tout le code sur GitHub et elles
19:32ont appris les patterns, les règles, les
19:34structures. Tout leur système est basé
19:36sur la prédiction du caractère suivant.
19:38Donc quand tu leur poses une question,
19:40elles prédisent la réponse la plus
19:42probable mot par mot et même caractère
19:44par caractère. Et ce qui fait que le
19:46résultat c'est qu'elles peuvent écrire
19:48texte, traduire, résumé et surtout elles
19:51peuvent écrire du code, du bon code et
19:53du code qui fonctionne très sécurisé.
19:55D'accord ? Parce que avant beaucoup de
19:57gens pensaient que quand tu fais du vibe
19:59coding, euh tu tu vas pas avoir quelque
20:01chose de sécurisé. Aujourd'hui, ce n'est
20:02vraiment plus une réalité. Beaucoup de
20:05de modèles, ces modèlesl ils ont lu des
20:07centaines de milliards de fichiers pour
20:09apprendre par exemple comment sécuriser
20:11un site web. Aujourd'hui vraiment si tu
20:13te prends bien, tu peux on va dire en
20:15tout cas à 98 % sécuriser ton site parce
20:19que il n'existe pas un site qu'on ne
20:20peut pas hacker dans le monde, d'accord
20:22? Même Facebook peut se faire hacker les
20:23gars. C'est un peu comment ça se passe.
20:25On va y parler un peu plus quand on va
20:26passer au module sur la sécurité.
20:28Maintenant voici les principaux que tu
20:31dois connaître. Donc on a JPT4 et aussi
20:33JPT5 d'open AI. C'est ce qui est
20:35derrière chat JPT. On a Cloudropique et
20:39il y a plusieurs modèles. Cloud Sonet,
20:40Cloud Opus. C'est celui que je préfère
20:43en tout cas pour le code
20:43personnellement. On a Gemini de Google.
20:46Il y a aussi des modèles open source
20:48comme Yamaha de Meta et cetera. Et pour
20:50le développement de SAS, Cloud Opus en
20:53tout cas, c'est actuellement le meilleur
20:55modèle pour moi que je que je conseille
20:57à n'importe qui. Il comprend mieux le
20:59contexte et fait beaucoup moins
21:01d'erreurs que les autres modèles. Donc
21:02Opus 4. C'est le modèle que j'utilise et
21:05je vais te montrer comment l'utiliser
21:06toi aussi dans cette vidéo. Maintenant,
21:09pour discuter avec ces I là, on utilise
21:11des prompts et ces I pour fonctionner
21:12utilisent des tokens. Donc c'est deux
21:14concepts importants, les prompt et les
21:17tokens. et on va voir un peu c'est quoi
21:19l'anatomie d'un bon prompte. Donc un bon
21:21prompt, c'est ce que tu donnes à LIA,
21:23c'est ta demande, c'est tes
21:24instructions. C'est comme passer une
21:25commande au restaurant. Plus ta commande
21:27est claire et précise, mieux tu seras
21:30servi. Donc un bon prompte contient le
21:32contexte, donc par exemple qui tu es,
21:34qu'est-ce que tu veux faire, contient la
21:36tâche, par exemple ce que tu veux que Li
21:37fasse, contient les contraintes, les
21:40limites, par exemple le format souhaité
21:42et le format de sortie. Donc comment tu
21:45veux que la réponse soit structurée ?
21:47Par exemple, au lieu de dire juste
21:48crée-moi un site, tu dis crée-moi une
21:51landing page pour un sas de facturation
21:53avec trois futurs et formulaire en
21:56utilisant React plus tw CSS par exemple
21:59et par exemple tu lui dis commente le
22:01code en français si tu veux tu ajoutes
22:03ça. C'est ça la différence. Le premier
22:05prompt Lia fait ce qu'elle veut le
22:07deuxème prompt elle fait toi ce que tu
22:09veux parce que tu lui as donné assez de
22:10contexte. Maintenant l pour fonctionner
22:12utilise les token. Donc c'est quoi un
22:14token ? Un token, c'est juste l'unité de
22:16mesure des ll. Donc un token, c'est
22:19environ quatre caractères ou 3/4 d'un
22:22mot en moyenne. Et pourquoi c'est
22:23important le coût ? D'accord ? Tu payes
22:26souvent par token utilisé. Donc plus tu
22:29écris, plus l' répond longuement, plus
22:32ça te coûte. Ensuite, il y a la limite
22:33des contextes. Donc chaque Ll, donc
22:35chaque IA a une limite de combien de
22:38tokens il peut traiter en une fois. Par
22:40exemple, Cloud peut gérer jusqu'à 200000
22:43token, ce qui est énorme. Ça veut dire
22:45qu'il peut garder en tête beaucoup plus
22:47de codes. En même temps, il peut avoir
22:49beaucoup plus d'instructions. Ensuite,
22:50nous avons la vitesse. Donc, plus de
22:52token, ça veut dire une réponse beaucoup
22:54plus lente parce qu'il y a beaucoup plus
22:55d'éléments à prendre en compte euh dans
22:58ton prompte. D'accord ? Maintenant, nous
23:00allons avancer pour comprendre quoi la
23:01différence entre une IA simple et un
23:05agent IA. [musique] C'est vraiment la
23:07distinction la plus importante de cette
23:08formation. D'accord ? Donc écoute bien.
23:10Donc une IA simple, c'est un peu comme
23:12chat GPT en mode conversation basique.
23:14Donc tu lui poses une question, elle te
23:17répond une seule réponse et c'est fini.
23:19Donc si tu lui demandes de créer un SAS,
23:21ce qu'elle va faire c'est qu'elle va te
23:23donner du code. Mais c'est à toi de
23:24prendre ce code, de le copier, de le
23:26mettre dans les bons fichiers, de le
23:28tester, de trouver les erreurs et
23:30ensuite de revenir lui demander des
23:32corrections. Donc c'est fastidieux,
23:34c'est lent et ça demande quand même des
23:35connaissances techniques parce que tu
23:37vas rencontrer énormément d'erreur.
23:39[musique]
23:40[grognement] Par contre, c'est quoi un
23:41agent IA ? Un agent IA, c'est
23:43complètement différent. C'est une IA qui
23:44peut faire des actions pas juste parler.
23:47Donc, un agent peut lire et écrire dans
23:49les fichiers de ton ordinateur. Il peut
23:51exécuter des commandes dans le terminal.
23:53Il peut créer des dossiers et organiser
23:55ton projet. Donc, il peut tester le code
23:58lui-même, corriger les erreurs lui-même,
24:00il peut naviguer sur internet pour
24:01chercher de l'information. Vraiment, il
24:03est très autonome et c'est pour ça qu'il
24:05réussit à créer ce que tu veux sans que
24:07tu n'écrives aucune ligne de code. Donc,
24:09en gros, tu lui donnes un objectif et il
24:12fait le travail. pour atteindre ses
24:13objectifs, il planifie, il exécute, il
24:15teste, il corrige et ça recommence
24:18jusqu'à ce que ça marche. Et c'est ça le
24:20vibe coding. Tu ne copies plus du code
24:22manuellement. Tu donnes des instructions
24:24à un agent comme si tu parlais à un
24:26développeur et il va tout simplement le
24:28construire pour toi. Et maintenant, on
24:30va voir les principaux outils qui
24:31utilisent des agents. Donc, on a un
24:34Winserf. Winserf, c'est un IDE, c'est un
24:36éditeur de code avec un agent IA
24:38intégré. tu ouvres ton projet, tu parles
24:40à l'agent en français, il code pour toi
24:42directement dans les fichiers. Ensuite,
24:44on a gravity qui est aussi un IDE créé
24:47par Google qui est en train de vraiment
24:49prendre beaucoup de place. Il est très
24:50facile à utiliser exactement comme
24:52Winsurf. Donc si tu maîtrises Winsurf,
24:54tu maîtrises antigravity. Ensuite, nous
24:56avons Cloud Code qui est un peu plus
24:57différent. C'est Cloud mais en mode
24:59agent, il peut exécuter des commandes
25:01sur ton ordinateur mais il est
25:03extrêmement puissant. On a aussi Cursor
25:06qui est aussi un IDE avec IA très
25:08populaire. Après, on a les outils aussi
25:09en ligne. On a Bolt, Visero, Lovable, ce
25:13c'est c'est aussi des agents mais qui
25:14fonctionnent dans le navigateur. Et
25:16c'est là qu'on arrive à un choix qui est
25:18très important, donc qui est en ligne vs
25:21le local. Est-ce que tu dois utiliser
25:24par exemple Loveable pour créer ton SAS
25:26ou bien utiliser Winsurf ou bien Cloud
25:29Code ou bien antigravity sur ton
25:31ordinateur en local pour créer ton SAS ?
25:33Maintenant, moi je vais te dire mon
25:34choix et pourquoi. J'ai créé plein de SK
25:36qui scale et je vais te dire exactement
25:39qu'est-ce que tu dois choisir. Donc il
25:41existe deux grandes catégories d'outils
25:43pour créer des SAS avec Lia. Donc on a
25:45les OT en ligne et les OT locaux. Donc
25:48les OT en ligne comme je l'ai dit c'est
25:49Bolt, c'est Visero, c'est Lovable et on
25:51a réplique, il y en a plein. Tu vas sur
25:53leur site web, tu décris ce que tu veux
25:55et ça crée le code directement dans ton
25:57navigateur. C'est très séduisant surtout
25:59si tu es débutant. Il y a pas
26:01d'installation, c'est rapide pour
26:02prototyper une idée. L'interface est
26:04jolie et le déploiement est facile. Mais
26:07il y a des inconvénients qui sont très
26:09sérieux surtout si tu veux créer quelque
26:11chose à long terme, quelque chose que tu
26:13peux réellement scaler et monétiser.
26:15Donc pour commencer, on a les limites.
26:17Donc les limites, c'est que ces outilsl
26:18ils ont des quotas. Vu que c'est sur le
26:20web. après un certain nombre de messages
26:21ou de projets, tu dois payer et les prix
26:24montrent extrêmement vite comparé au aux
26:26outils que tu vas utiliser localement
26:28sur ton ordi. Ensuite, tu as le manque
26:30de contrôle. Tu n'as pas vraiment accès
26:31à ton code. Si l'outil fait une erreur,
26:33c'est parfois galère de corriger
26:35manuellement. Troisièmement, on a la
26:37dépendance. Demain, si bol ferme demain,
26:39qu'est-ce qui se passe ? Ton projet est
26:41bloqué. Et enfin, la raison la plus
26:43importante pour moi, c'est les projets
26:44complexes. Ces outils-là sont bien pour
26:46des trucs qui sont très simples, mais
26:48quand tu veux faire quelque chose de
26:50vraiment avancé, tu vas te heurter à des
26:52murs. C'est il y a des choses que tu
26:53peux pas, il y a des types de projets
26:55que tu ne pourras jamais construire avec
26:57des outils de vibe coding en ligne.
26:59D'accord ? Donc selon moi, ces outils
27:01sont bien pour apprendre ou bien pour
27:03prototyper rapidement. Mais pour un vrai
27:06sas que tu veux lancer et maintenir, je
27:08ne te le recommande pas du tout. Donc
27:10c'est quoi ma recommandation ?
27:11d'utiliser les outils locaux et il y en
27:13a principalement deux que j'aime bien.
27:15Il y a Winf et Antigravity. Ce sont tous
27:17les deux des IDE comme je te l'ai
27:19expliqué tout à l'heure. Tu vas les
27:20installer sur ton ordinateur, tu ouvres
27:22ton projet, tu parles à l'agent
27:24directement et il va coder directement
27:26sur ton ordinateur. Quand il y a un
27:27problème, tu le règles et ensuite on va
27:30pusher ça. C'està-dire qu'on va le
27:31déployer en ligne. Donc l'agent peut
27:33créer des fichiers, modifier le code,
27:36exécuter des commandes, tester, débugger
27:38et tout ça de manière autonome. Tu vas
27:40juste lui dire "Crée-moi une page
27:41d'authentification avec email et mot de
27:43passe." Et il va le faire. il crée les
27:45fichiers, il écrit le code, il configure
27:47ce qu'il faut. Donc c'est pas parce que
27:49c'est en local que tu devras peut-être
27:51te connaître ou bien ça va être plus
27:52compliqué. Pas du tout. Et à côté, on a
27:54aussi Cloud Code qui est euh qui n'est
27:56pas un IDE mais qui qu'on peut utiliser
27:58en mode agent directement dans le
28:00terminal et je te montrerai comment
28:02utiliser ces deux-là. Et Claude est
28:04particulièrement puissant parce que
28:05c'est le meilleur Llm pour le code
28:08actuellement. Et pourquoi
28:09personnellement je préfère ces OTI là ?
28:11Déjà l'expérience, j'ai construit pas
28:13mal de sas et je sais que c'est les
28:15meilleurs outils que tu peux utiliser
28:16pour créer ton SAS avec Li ensuite tu as
28:19le contrôle total, donc le code est sur
28:21ton ordinateur, tu peux le modifier
28:22quand tu veux, comme tu veux. Il y a pas
28:24de limite artificielle. Tu payes pour
28:26utiliser de l'IA, mais il y a pas de
28:28limite comme par exemple, vous avez
28:29atteint votre limite de projet parce que
28:31c'est ton ordinateur, tu n'as pas de
28:32limite et sur le long terme, c'est aussi
28:35moins cher. Les abonnements aux outils
28:37en ligne coûtent entre 20 et 50 dollars
28:39par mois. Ensuite, quand tu travailles
28:40en local, les projets complexes
28:42deviennent possibles. Tu n'as pas de
28:43restriction sur ce que tu peux
28:45réellement créer. Et on a aussi
28:47l'apprentissage parce que en utilisant
28:49tes outils locaux, tu comprends comment
28:51fonctionne le développement et c'est une
28:53compétence qui va rester que tu vas
28:54aussi développer et ça aussi c'est très
28:57important. Et c'est pourquoi dans cette
28:58formation on va principalement utiliser
29:00an gravity, winsurf et cloud code pour
29:03créer non sas. Et ne t'inquiète pas,
29:05même si tu ne te connais pas, tu vas
29:07voir, c'est vraiment simple à utiliser.
29:09Donc maintenant, on va parler du stack
29:11technique. Donc la stack, c'est tout
29:12simplement l'ensemble des technologies
29:14qu'on va utiliser pour créer nos IA.
29:17Donc pour le front end, il y a deux
29:19choix populaires. On a React JS et
29:22NextJs qui est basé sur du React. C'est
29:25le plus populaire. C'est ce que utilise
29:27par exemple Noten, Netflix, TikTok. Tous
29:30ces apps utilisent NextJs et la
29:32communauté est très énorme. Les
29:33ressources sont partout. Donc
29:35personnellement sur cette formation là,
29:37on va utiliser NextJS. Mais sache que
29:39les concepts sont les mêmes, hein. Si tu
29:41apprends NextJS, tu peux passer par
29:43exemple à Next JS assez facilement parce
29:45que Next et Next c'est aussi c'est pas
29:47pareil. On va rester sur du Next JS qui
29:50est le plus connu et le plus populaire.
29:52Ensuite, on va on va voir la base de
29:54données, l'authentification. Pour la
29:55base de données, on va utiliser
29:57Superbase, mais on peut aussi utiliser
29:58Néon. Donc on va voir selon les projets,
30:01d'accord ? Superbase, c'est comme
30:02Firebase de Google mais en open source,
30:04ça te donne une base de données
30:06postgress SQL, l'authentification
30:08intégrée. Donc on a l'inscription,
30:10connexion, mot de passe oublié, le
30:11stockage des fichiers et les API en
30:13automatique. Et c'est gratuit pour
30:15commencer, largement suffisant pour tes
30:17premiers milliers d'utilisateurs. Donc
30:19pour l'authentification, on va utiliser
30:21Super Base off qui est très bien, mais
30:23il y a aussi Next Off que j'aime bien.
30:25Next off, c'est ce que j'utilise dans
30:26tous mes projets. Euh pratiquement, ça
30:28supporte plein de providers. Il y a
30:30aussi Clerc qui est très facile à
30:32intégrer. On a H Zero qui est beaucoup
30:34plus orienté entreprise. Donc là, je te
30:36parle juste d'outils qui existent hein
30:37mais tu n'as pas besoin même de les
30:39comprendre ou bien de les retenir. Juste
30:40dis-toi que pour commencer Superbase
30:43suffit, c'est intégré, c'est simple et
30:45ça marche. Donc pour le déploiement, on
30:46va utiliser Versel. Donc Versel, c'est
30:49les créateurs de NextJs. Donc
30:50l'intégration est parfaite. Tu vas juste
30:53connecter ton GitHub. Une fois que tu
30:55mets à jour ton code, ça se déploie
30:56automatiquement. Et si tu sais pas c'est
30:58quoi un Github, t'inquiète pas aussi.
31:00Donc pour les paiements, on a deux
31:01options principales. On a Stripe pour
31:03les paiements internationaux, cartes
31:04bancaire, c'est le standard mondial. Et
31:06pour l'Afrique, on a les mobile moneyes.
31:08Donc on a MTN, Wave, Mobile, Orange
31:10Monnaie, ça dépendra des agrégateurs. Il
31:12y a plein d'agrégateurs qui existent. Le
31:14plus complet qui existe selon moi étant
31:16Power Pay, mais il y a aussi des
31:17agrégateurs d'agrégateurs comme par
31:19exemple Monero. Tu peux avoir ton Monero
31:21et connecter ton Paytech, connecter ton
31:24Cet Pay, connecter ton Power Pay, ton
31:26Stripe, ton PayPal et il va te créer un
31:28seul checkout. Donc euh bon, après c'est
31:30pas c'est pas grave si tu comprends pas
31:32aussi ce que je te dis. L'idée c'est
31:33qu'il y a plein de choix aussi si tu
31:35veux euh facturer en mobile money en
31:39Afrique, mais ça va plutôt dépendre des
31:41agrégateurs de paiement qui existent et
31:42dans quel pays ils sont. D'accord ? Et
31:45si tu n'utilises pas le Mobile Money, tu
31:46vas perdre une grosse partie du marché,
31:48surtout si tu fais un SAS pour
31:49l'Afrique. Donc on verra dans un module
31:51ultérieur comment intégrer ces moyens de
31:54paiement là. OK ? Donc maintenant qu'on
31:55a vu ça, on va passer à la prochaine
31:57étape qui est la préparation de ton
31:59environnement. Je vais te montrer tous
32:01les outils que tu dois télécharger,
32:02installer sur ta machine avant de passer
32:04au prochain module. Donc tout à l'heure,
32:07je t'ai montré deux IDE, donc des outils
32:09qui te permettent de créer des sas. Donc
32:11c'est là-bas que va se passer tout le
32:12code. Je t'ai montré Winds surf et je
32:14t'ai montré antigravity. Donc l'idée
32:16c'est de te montrer ce que j'ai eu à
32:18utiliser. Mais personnellement selon mon
32:20expérience aujourd'hui Antigravity est
32:22sans nul doute le meilleur outil. Déjà,
32:25c'est le plus facile à utiliser, même si
32:27lui et unef ont vraiment des euh des
32:30interfaces très similaires, mais je te
32:32conseille quand même d'utiliser
32:33Antigravity, c'est le moins cher et il y
32:35a beaucoup plus de possibilités et tu
32:37peux vraiment créer énormément d'outils
32:40très qualitatifs avec Antigravity. Donc
32:42pour cette formation là, on va juste
32:44utiliser Anti Gravity et Cloud Cloud.
32:46Après, si on veut par exemple créer des
32:48choses beaucoup plus puissantes, on va
32:50je vais te montrer comment combiner
32:52antiravity et cloud code dans ton
32:54éditeur, dans ton IDE. Et vraiment si tu
32:56as ces deuxlà, tu as tout ce dont tu as
32:58besoin pour créer n'importe quel type de
33:01sas. Donc après, une fois que tu seras
33:03bien avancé dans ton parcours de
33:05création de SAS, tu pourras explorer
33:06d'autres idées. Il y en a beaucoup. Il y
33:08a Z, il y a Cursor, il y a en fait il y
33:10en a trop. D'accord ? Mais je te dis
33:13prends un et focus dessus. Et anti
33:15gravité aujourd'hui déjà il est très
33:17puissant, il est pas cher et il est par
33:20Google. Donc laisse-moi te dire que en
33:21terme de technologie, ils sont déjà très
33:23loin. Personnellement, c'est ça que
33:25j'utilise. Au début, j'utilisais Win
33:27Surf. Maintenant, j'ai changé, je suis
33:28passé sur antiravity et je dis je
33:30regrette même de l'avoir fait un peu
33:32trop tard. Donc je vais te montrer
33:33comment installer Anti Gravity sans plus
33:35tarder. Donc pour installer Anti
33:37Gravity, ce que tu vas faire, tu vas
33:38aller sur Google, tu tapes Anti Gravity
33:39ou bien tu vas directement sur
33:41antiravity.google, Google, tu vas
33:43télécharger l'outil, tu vas l'installer
33:44comme n'importe quel logiciel, tu vas
33:46ouvrir et créer un compte et tu auras
33:48des crédits gratuits pour commencer
33:50juste pour commencer. Mais après, il te
33:51faudra forcément prendre l'abonnement
33:53pour créer tes sens. Donc, je vais te
33:54montrer comment faire cela. Donc là, je
33:56suis sur mon PC. Donc, je vais aller sur
33:57Google et je vais taper tout simplement
33:59antiravity, d'accord ? Et je vais
34:00cliquer sur le premier lien
34:02antigravity.google
34:03ou bien tu vas tout simplement cliquer
34:05sur antigravity.google. De toute façon,
34:07tous les liens seront sur le fichier qui
34:08sera dans la description de cette
34:10formation. Ensuite, une fois que je suis
34:12ici, je vais juste cliquer sur download.
34:15D'accord ? Une fois que tu cliques sur
34:16download, ici tu vas choisir ton système
34:18d'exploitation, que tu sois sur macOS,
34:20que tu sois sur Windows ou bien sur
34:22Linux. Tu vas choisir quel est le
34:24système d'exploitation que tu as et tu
34:25vas tout simplement télécharger le
34:27logiciel. Et une fois que c'est
34:29téléchargé, c'est gratuit, tu le
34:30télécharges gratuitement. tu vas tout
34:32simplement l'installer sur ton
34:33ordinateur. Donc une fois téléchargé et
34:35installé, tu vas ouvrir Antigravity et
34:38tu verras une interface comme ça. Et
34:40comme tu peux le voir, il y a pas mal de
34:42choses qui sont ici. Et ne t'inquiète
34:44pas, sur le deuxème module, on va
34:45prendre le temps d'explorer un peu
34:47l'interface d'antigravity pour pouvoir
34:49bien comprendre ce qu'on fait et comment
34:51naviguer dessus. Mais pour l'instant,
34:52tout ce que tu as à faire, c'est de
34:54l'installer et ensuite devoir passer au
34:56prochain compte que tu dois créer. Tu
34:58vas créer des comptes sur plusieurs
35:00services. Donc tout est gratuit pour
35:01commencer. Le premier service qui en a
35:03des plus importants, c'est GitHub. Donc
35:05tu vas aller sur Google, tu vas taper
35:07GitHub, d'accord ? Et il y a le lien qui
35:09est là, github.com. Tu as juste à
35:11cliquer dessus, d'accord ? Et une fois
35:12que tu arrives là, tu vas cliquer sur
35:14sign là, tu vas peut-être créer un
35:17compte avec ton Google si tu veux.
35:19L'idée, c'est que tu dois t'inscrire sur
35:21Github. Donc GitHub, c'est quoi ? C'est
35:22où tu vas stocker ton code parce que ton
35:24code de base, tu vas travailler en local
35:26mais une fois que tu voudras le mettre
35:27en ligne, il faut que tu le stockes
35:29quelque part et Github sert exactement à
35:31ça et il est totalement gratuit. Donc va
35:32sur github.com et créer un compte. ton
35:34GitHub, c'est comme un Google Drive mais
35:36pour le code. Et en fait, comme je l'ai
35:38dit, dans le fichier en bas, je te
35:40mettrai tous les liens que je suis en
35:41train de te montrer. Ensuite, après
35:43avoir créé notre compte Github, on va
35:45aller sur Superbase. Donc va sur
35:48Superbase.com ou tu viens juste sur
35:50Google, tu tapes Superbase, tu cliques
35:51sur le premier lien, ça va t'amener sur
35:53superbase.com. Et une fois que tu es là,
35:55tout ce que tu as à faire, tu vas
35:57cliquer sur start your project, d'accord
35:59? Et là, il va te demander de sign in ou
36:01sign up. Tu vas cliquer sur sign up et
36:03tu vas créer ton compte. Et là, comme tu
36:05peux le voir, tu peux même créer, tu
36:06peux même te connecter avec Github.
36:08D'accord ? C'est vraiment intéressant.
36:10C'est pourquoi il te faut d'abord créer
36:11ton GitHub et ensuite tu peux même créer
36:13ton compte Superbase grâce à ton compte
36:15GitHub. GitHub, ils ont un plan gratuit
36:18que tu pourras utiliser, d'accord ?
36:20C'est ici qu'on va mettre notre base de
36:22données, l'authentification et cetera.
36:25C'est vraiment important d'avoir ton
36:28Soup base. Donc vas-y, tu crées ce
36:29compte-là. Et pour terminer, en tout cas
36:32pour ce premier module là, va sur
36:33verel.com. Donc tu peux aller aussi sur
36:36Google, tu tapes Versel, tu cliques sur
36:37le premier lien et ici tu vas aller sur
36:40Signup et tu vas créer ton compte
36:42Versel. Donc ici tu vas faire I'm
36:44working or personal print. Tu fais OB,
36:46d'accord ? Je tape ton nom, je mets par
36:48exemple Amadou et je fais continuer. Et
36:52ici, tu peux par exemple créer ton
36:54compte avec Google ou bien avec Github.
36:56Donc comme tu peux le voir, Github est
36:58vraiment très important surtout dans le
37:00monde du code. Donc crée-moi ces trois
37:02comptes là avant de passer au second
37:04module. Donc maintenant, normalement, tu
37:06as installé Antigravity, tu as créé ton
37:08compte sur GitHub, tu as créé ton compte
37:10sur Versel et tu as créé ton compte sur
37:12Superbase. Donc pour t'aider à te
37:14situer, je t'ai créé une petite
37:15checklist que tu pourras utiliser pour
37:17savoir qu'est-ce que tu as créé et
37:19qu'est-ce qui te reste à faire. Et une
37:20fois que tu as installé Antigravity et
37:22créé ces comptes là, tu es prêt à passer
37:24au module 2. Mais avant, on va faire un
37:26petit récapitulatif de ce que tu sais
37:28déjà. Donc maintenant, tu sais pourquoi
37:30le SAS est le business model à suivre,
37:32surtout avec la révolution IA et le vibe
37:35coding. Et tu sais c'est quoi le vibe
37:36coding ? Tu comprends c'est quoi un SAS,
37:37le front end, le back end, la base de
37:39données et comment tout cela sassemble.
37:42Tu connais les métriques clés, tu
37:43connais c'est quoi un MR, un ch, un CAC,
37:46un LTV, les chiffres que tu dois suivre
37:49donc les KPI, les K Performance
37:51indicateur. Tu sais comment fonctionne
37:53le web, les technologies de base et où
37:55ton code va vivre. Tu comprends la
37:57différence entre une IA simple et un
38:00agent IA et pourquoi les agents changent
38:03tout aujourd'hui dans notre manière de
38:04travailler et de créer des outils ? Tu
38:06as fait ton choix d'outil, donc on va
38:08utiliser Antigravity pour cette
38:09formation avec l'option cloud code pour
38:12les projets avancés. Donc tu peux aussi
38:13utiliser Winurf mais personnellement je
38:15vais utiliser Antigravity. Et ensuite on
38:18a préparé ton environnement. Donc, tu as
38:20téléchargé Antigravity, tu as créé ton
38:23compte sur Versel, tu as créé ton compte
38:25sur Superbase, ton compte sur GitHub. Tu
38:27n'as pas encore créé de ça bien
38:29évidemment, mais actuellement tu as
38:31toutes les bases et c'était le but de ce
38:34module. Donc dans le module 2, on va
38:36prendre en main les outils. Tu vas
38:37découvrir l'interface de antigravity en
38:39profondeur. Tu vas apprendre à parler à
38:42l'agent IA pour qu'il fasse exactement
38:44ce que tu veux. Tu vas choisir le bon
38:45modèle selon la tâche. Il y a plusieurs
38:47modèles d'IA. Tu vas personnaliser le
38:49comportement de l'a. On va aussi voir
38:51Cloud Code et comment l'utiliser en
38:54combinaison avec ton antigravité. Donc à
38:56la fin du module 2, tu seras à l'aise
38:58avec ces outils-là. Et dans le module 3,
39:00on va créer ton premier projet ensemble.
39:03Donc on se retrouve dans le prochain
39:04module à tout de suite. Alors bienvenue
39:06dans le module 2 de la formation Easis.
39:08Et dans ce module, on va faire la prise
39:09en main des outils qu'on va utiliser
39:11tout au long de cette formation pour
39:13créer NSAS. Donc, il est très important
39:15de savoir comment fonctionnent ces
39:16outils là pour ne pas te perdre tant que
39:19dès que tu vas les installer parce que à
39:20première vue leur interface peut te
39:22faire un peu peur. Mais ne t'inquiète
39:23pas, on va voir ensemble tout ce qu'il y
39:26a à savoir sur ces outils là. Donc on a
39:29installé Anti Gravity, on a installé
39:31Cloud Cloud. Donc comme je te l'ai dit,
39:33Anti Gravity, c'est vraiment le choix
39:35pour cette formation au-dessus de Winsf.
39:36Tout simplement parce qu'il est vraiment
39:38flexible. Il y a la dicté vocale, il y a
39:40les workflows, il y a les rules.
39:42D'accord ? Tout ça c'est des choses que
39:43je vais te montrer quand on va ouvrir
39:45anti gravity tout à l'heure, mais aussi
39:47c'est parce qu'il est beaucoup moins
39:48cher que par exemple un Winsurf. Et
39:51ensuite on va utiliser Cloud Code
39:52d'accord, qui est aussi disponible dans
39:54Antigravity. Mais je vais t'expliquer
39:55ensuite pourquoi je préfère utiliser
39:57Cloud Cloud en combinaison avec
39:59antigravité. Donc comme je te l'ai dit,
40:01anti gravity c'est confort et c'est
40:03flexible. Et cloud cloud c'est vraiment
40:05très puissant. Donc tout à l'heure je
40:07t'ai montré comment installer
40:08antigravity. Donc maintenant ce qu'on va
40:10faire c'est qu'on va aller ouvrir le
40:12logiciel et on va faire un tour ensemble
40:15de l'outil en question. OK, donc voilà,
40:17on t gravity. Donc une fois que tu vas
40:19ouvrir euh le logiciel, tu verras une
40:22interface un peu comme ça. Donc à
40:23première vue, ça peut te faire un peu
40:25peur mais ne t'inquiète pas. Donc il
40:26faut savoir quelque chose sur
40:27Antegravity. Antegravity c'est un fork
40:30de VS Code. Donc un fork c'est quoi ?
40:32C'est tout simplement le code
40:33d'antigravity. C'est-à-dire que l'outil
40:35de base qu'on a utilisé pour créer
40:37Gravity, ça a été euh on va dire inspiré
40:40ou bien copié ou bien tiré d'un autre
40:43projet qui existe déjà qui s'appelle VS
40:45Code. Donc tous les développeurs ça
40:46savent c'est quoi VS Code. C'est un
40:48éditeur de code, d'accord ? un
40:49environnement qui te permet de coder.
40:51Donc tous les développeurs ont déjà une
40:53fois utilisé VS Code. Donc Google, les
40:55créateurs de anti Gravity, ils vont ils
40:57ont tout simplement fait un fork de VS
41:00Code et ils ont ajouté leur propre
41:02fonctionnalité de dessus, les IA et
41:04cetera, leur système tout simplement.
41:06Donc euh généralement tous ces outils là
41:08sont des forques de VS Code. D'accord ?
41:10Donc antigravity, Windsurf,
41:14en fait Cursor, ils sont tous c'est tous
41:16des forques de VSCOD. Et c'est de la
41:18culture générale, mais c'est très bon à
41:19savoir tout simplement parce que vu que
41:21c'est tous ces outils-là sont des for de
41:23VS Code, ils ont à peu près tous la même
41:26configuration et la même manière de
41:28fonctionner. Donc on va faire un peu une
41:31exploration de antigravité. Donc une
41:33fois que tu as ouvert ton antaravity, tu
41:34verras trois euh panels distinct dans
41:39ton dans ton ordinateur. Donc ici, on a
41:42le panel tout à gauche. Donc ici, tu
41:43peux vraiment ouvrir un panel ici. Donc
41:46là, par exemple, quand je clique ici
41:47dessus, j'ai accès à l'explorateur de
41:50fichiers. Donc par exemple, là je n'ai
41:51aucun dossier qui est ouvert. Mais si je
41:53veux ouvrir par exemple un dossier, je
41:55peux juste cliquer sur open folder.
41:57Quand je clique dessus, tu vas voir, ça
41:59va m'ouvrir l'explorateur des fichiers.
42:01Donc là, c'est un peu les fichiers qui
42:02sont sur mon ordinateur. Par exemple,
42:04disons que je veux ouvrir euh un des
42:07dossiers sur lesquels je travaille ou
42:08bien un des fichiers. Là, je vais
42:10cliquer sur ouvrir. Et là, comme tu peux
42:12le voir, donc ça c'est par exemple un
42:14dossier d'un projet. Donc là, tu peux
42:16voir qu'il y a plein de dossiers, plein
42:18de documents, plein de choses que tu ne
42:20vas pas comprendre au début, mais je te
42:21rassure, tu n'as même pas besoin de
42:23comprendre parce que encore une fois,
42:24c'est du VIP coding. C'est pas toi qui
42:25fait le code, c'est ton NIA qui le fait.
42:27Mais il est très important en tout cas
42:29de connaître ce que tu fais et de
42:31comprendre un peu ce qui se passe. Mais
42:32ne t'inquiète pas, au fur et à mesure
42:34qu'on va créer des des des apps, au fur
42:37et à mesure qu'on va créer des outils,
42:39tu vas à peu près comprendre chaque
42:40outil et euh chaque fichier euh à à quoi
42:44cela sert. D'accord ? Donc ici, on a
42:45l'explorateur de fichiers. Donc ça ça va
42:48être le répertoire sur lequel vont être
42:50tous les fichiers de ton de ton projet.
42:52Donc par exemple, comme tu le sais, ton
42:53projet c'est des lignes de code et tes
42:55lignes de code là sont écrites sur des
42:57fichiers et ces fichiers sont mis dans
42:59des documents et ces documents là sont
43:00classé ici. Donc par exemple ici si je
43:02vais sur app et que je vais par exemple
43:04sur API, là je vais voir par exemple
43:06chat, je vais cliquer sur route ici je
43:08vais voir un fichier. Donc par exemple
43:11ce fichier là c'est un fichier backend
43:12d'accord qui gère tout simplement la
43:15gestion d'un chat d'accord donc ici
43:17c'est le backend et en fait c'est c'est
43:20assez simple ici on a des skills. Donc
43:22par exemple, ça c'est un skills. MD.
43:24Donc tu vas voir qu'on va beaucoup
43:25utiliser les points MD. Donc c'est les
43:27points markdown. Donc point MD c'est
43:29tout simplement un type de fichier qui
43:32permet qui nous permet de communiquer
43:34des des connaissances ou bien des
43:36instructions à l'intelligence
43:37artificielle. Et en fait on on
43:39généralement on utilise des points MD
43:40parce que c'est les types de fichiers
43:42que Lia peut comprendre le plus
43:43rapidement possible et le plus
43:45facilement possible. D'accord ? Mieux
43:46vaut le donner à Liia un point MD pour
43:49qu'il le lis qu'un point texte ou bien
43:50qu'un point HTML même si il peut lire ça
43:53ou bien un PDF mais c'est beaucoup plus
43:54facile ça va te consommer beaucoup moins
43:55de token et il va plus rapidement
43:58comprendre ce que tu veux qu'il fasse.
44:00Donc ça je vais te le montrer tout à
44:01l'heure. Donc ici comme tu peux le voir
44:02on a l'explorateur de fichiers et ici
44:06sur chaque fichier tu peux faire des
44:07choses. Donc si je viens sur le sur par
44:09exemple un des fichiers par exemple ça
44:10c'est un skill. Donc je vais te
44:12t'expliquer tout à l'heure c'est quoi un
44:13skill. Je je fais par exemple clic
44:15droit. Tu peux voir que j'ai plein euh
44:18de possibilités. Je peux le renommer, je
44:20peux le modifier, je peux le supprimer.
44:22D'accord ? Généralement, tu n'auras pas
44:24besoin de le faire manuellement. C'est
44:25Li qui le fait pour toi. Mais juste pour
44:28que tu puisses savoir que tu as accès à
44:29ton code. Ça, c'est ton code. C'est le
44:31code de chaque projet que tu vas faire.
44:33Tu auras vraiment accès dessus. Et ça
44:35c'est un des avantages de travailler en
44:37local. Comme je te l'ai dit, tu as une
44:38totale maîtrise sur ton projet et ça n'a
44:42pas de prix, je te le dis. et [musique]
44:44tu t'en rendras bien assez très vite
44:46compte hein, de toute façon quand tu
44:47commenceras à créer des projets qui
44:49scalent des projets euh qui qui valent
44:51de l'argent, tu vas vraiment vouloir
44:53maîtriser ton code. Ici, tu peux créer
44:56par exemple un nouveau fichier. Par
44:58exemple, je peux venir créer un nouveau
44:59fichier. Si je veux créer un nouveau
45:00fichier, par exemple au niveau de la
45:03racine. Donc je peux tout fermer, venir
45:05cliquer au niveau de de la racine,
45:07cliquer sur nouveau fichier et là, comme
45:09tu peux le voir, il va le créer au
45:10niveau de la racine. Je peux l'appeler
45:12amadou.mmd.
45:14Et là ici ça m'a créé un tout nouveau
45:15fichier et tu peux le considérer comme
45:17un document Word ou bien comme un
45:19éditeur de texte. Je peux venir ici
45:21écrire tout ce que je veux Amadou et un
45:24créateur de contenu par exemple.
45:26D'accord ? Et en fait l'idée c'est que
45:28tu peux tout simplement écrire tout ce
45:30que tu veux ici dans ton fichier point
45:33MD. D'accord ? Ensuite ici on peut
45:36ajouter des dossiers. Donc c'est la même
45:38chose, tu peux créer un dossier et
45:40l'appeler amadoufal. D'accord, tu peux
45:43l'appeler Amadofal et là je peux tout
45:46simplement même prendre Amadou.md et le
45:49mettre dans le dans le dossier
45:51Amadoufal. D'accord ? Là, ça va me
45:52demander de confirmer. J'ai confirmé.
45:54Là, j'ai créé un dossier et j'ai mis le
45:56fichier dedans. Et ça, ça fait
45:58maintenant partie de ma code base. Donc
46:00la code base, c'est tout simplement la
46:02base de tout ton code. Donc tout
46:04l'ensemble des fichiers et des documents
46:06qui constituent ton code. Donc c'est ça
46:08que tu auras ici. Et ce bouton-là te
46:10permet d'ouvrir l'explorateur de
46:12fichiers, donc l'explorateur de ton
46:15code. Donc ça c'est la première chose.
46:17Ensuite ici on a la barre de recherche.
46:19Donc ici tu peux faire des recherches
46:20sur ton code. Donc par exemple ici, je
46:22viens ici et je tape Amadou. Tu vas voir
46:24que ça va me sortir le fichier Amadou.md
46:27que je viens de créer. Donc c'est assez
46:28simple, c'est juste une barre de
46:29recherche. Ici on a la contrôle de
46:32source de guide. Donc tu n'as pas besoin
46:34de comprendre pour l'instant ça. On va y
46:36arriver une fois qu'on aura connecté
46:38notre guide. Je t'expliquerai c'est quoi
46:39guide et que ça et ça sert à quoi
46:41beaucoup plus tard dans la formation.
46:43Donc là, on a les extensions. Donc les
46:44extensions, c'est tout simplement un peu
46:46comme des super pouvoirs qui vont venir
46:48s'ajouter à ton IDE, à ton éditeur de
46:51code. Donc ça va permettre par exemple à
46:53ton antiravity de faire des choses
46:55beaucoup plus facilement, beaucoup plus
46:57rapidement. Donc pour faire simple, une
46:59extension, c'est tout simplement un bout
47:01de code qui sait faire quelque chose de
47:02très précis et une fois que tu
47:04l'installes sur ton IDE, bah ça va
47:06t'aider tout simplement à faire cette
47:08chose là beaucoup plus facilement. C'est
47:09comme quand tu installes une extension
47:12sur ton site WordPress par exemple,
47:13c'est à peu près la même chose. Donc là,
47:15on a les extensions. Donc ici, tout en
47:17tout à gauche, on a les explorateurs de
47:19fichiers. Donc là, c'est la première
47:21partie. On va dire que c'est la partie
47:221. Généralement, tu vas passer peut-être
47:2410 % de ton temps ici lorsque tu vas
47:27créer euh ton SAS. D'accord ? Ensuite,
47:30ici euh je pense que on je te l'ai
47:32montré, c'est tout simplement la view,
47:34donc c'est le panel central. Donc ici,
47:36généralement tu vas voir en fait quand
47:38tu cliques sur un fichier, quand tu
47:39cliques sur un dossier ou bien quand Li
47:41fait quelque chose, c'est ici que tu
47:44verras à peu près ce qui se passe. Donc
47:45généralement tu passes quand même euh
47:47pratiquement 20 20 % du temps ici parce
47:49que tu vas voir un peu ce qu'il y a
47:51fait. Si jamais tu lui demandes de te
47:54faire des feedback, c'est ici qui va te
47:55les faire. Tu pourras lire à peu près ce
47:57qui se passe dans la création de ton
47:59projet. Et ici c'est le panel tout à
48:02gauche. Vraiment, c'est le panel le plus
48:04important dans la création de SAS. Donc
48:06moi généralement je l'agrandi même parce
48:09que c'est vraiment le plus important. Tu
48:10vas passer pratiquement on va dire 70 %
48:13à 80 % de ton temps ici. Et je vais te
48:15montrer un peu comment ça se passe.
48:17Maintenant, la première chose à faire,
48:18c'est de te connecter. Donc comme je te
48:20l'ai dit, antiigravity te permet de
48:23tester gratuitement son outil. D'accord
48:26? Mais une fois que tu voudras créer des
48:28SAS et et les monétiser, il te faudra
48:30prendre l'abonnement dans t révit. Mais
48:32au début, tu peux utiliser euh leur
48:34outil avec leur modèle Gemini
48:36gratuitement, tester, te faire la main,
48:38voir un peu comment ça marche. Donc on
48:40va se connecter. Une fois que tu as
48:42installé Antigravity, c'est au niveau de
48:44Anti Gravity que tu te connectes. Donc
48:46je vais venir ici tout en haut, je vais
48:47cliquer sur login tout simplement et là
48:50ça va me dire sign in avec Google. Donc
48:52je vais cliquer dessus et ensuite ici ça
48:54va me demander de tout simplement
48:55confirmer. Donc je vais cliquer sur sign
48:57in et une fois que la connexion est
48:59faite, ça va me demander d'ouvrir Anti
49:02Gravity. Je vais cliquer sur ouvrir. Ça
49:03va me remettre, je vais repartir dans
49:06Anti Gravity. Et là tu peux voir que je
49:08me suis connecté. Donc une fois que je
49:10me suis connecté, tu vas voir apparaître
49:12un chatbox. Donc c'est là donc c'est ça
49:14que je vais utiliser pour discuter avec
49:17mon modèle. D'accord ? Mais avant ça, on
49:20va voir un peu ce qui se passe tout en
49:21haut. Donc ici, tu as la possibilité de
49:23créer une nouvelle conversation. Donc
49:25là, c'est des conversations. Donc là,
49:26c'est une conversation par exemple que
49:28j'avais avec mon un modèle antigravity.
49:31Donc je peux tout simplement venir ici
49:32sur plus et ça va créer une nouvelle
49:35conversation. C'est aussi simple que
49:36cela. Ici, tu peux voir les
49:39conversations passées. Donc si tu
49:40cliques dessus, ça va te montrer les
49:41conversations passées que tu as eu à
49:43avoir. Donc par exemple, ça c'est des
49:45conversations que j'ai eu à avoir avec
49:47euh Antigravity sur d'autres projets sur
49:50lesquels je travaillais. Donc ici, sur
49:52les trois points, quand tu cliques
49:53dessus, ça te permet tout simplement
49:55d'ajouter des options. Donc il y a
49:57plusieurs types d'options. Donc là, je
49:59vais cliquer sur customisation. Et là,
50:00au niveau du customisation, tu vas voir
50:02deux choses. Tu vas voir rules et tu vas
50:04voir workflows. Donc c'est quoi une
50:06roule ? Une rôle, c'est tout simplement
50:08un fichier qui te permet de contrôler le
50:10comportement de ton agent. Donc par
50:12exemple, tu peux lui dire, je peux créer
50:14une rôle par exemple pour forcer l'agent
50:16à me poser une question ou bien à me
50:18notifier à chaque fois qu'il veut euh
50:21publier quelque chose en ligne.
50:23D'accord, je peux faire ça. Ça c'est une
50:24règle quoi. Donc la règle, je peux la
50:27rendre globale ou bien je peux la rendre
50:29locale dans le workspace ou bien ça le
50:31le workspace, c'est tout simplement le
50:33document ou bien le code sur lequel je
50:35suis en train de travailler. Donc si je
50:37crée un un document global, je peux le
50:39faire par exemple. Je vais cliquer sur
50:40global, d'accord ? ici, je lui dis par
50:43exemple ce que je veux. À chaque fois
50:45que tu voudras publier un site,
50:47demande-moi d'abord est-ce que tu peux
50:49le faire ? Donc si je fais ça là, comme
50:51tu peux le voir, il a créé un document
50:54global. D'accord ? Je vais cliquer
50:56dessus, je vais l'enregistrer. Mais tu
50:58vas voir quelque chose d'assez
50:59intéressant. En fait, qu'est-ce qu'il a
51:00fait ? Il a créé un document Gemini.m.
51:04Donc Gemini.md, c'est quoi ? le fichier
51:07de règle globale, d'accord, que le
51:11Gemini qui est l'agent principal de
51:14antigravity, l'agent IA va toujours
51:16regarder avant de faire une tâche. Donc
51:18si je lui dis de faire quelque chose,
51:20d'accord, avant de faire une tâche, il
51:22va toujours regarder dans Gemini. Donc
51:23par exemple ici, je vais lui je vais lui
51:25dire euh à chaque fois que tu me parles,
51:28dis-moi d'abord Assalam alkum Amadou.
51:30Donc là par exemple, je lui dis à chaque
51:32fois que tu me parles, dis-moi d'abord
51:34Assalam alekum amadou. Donc bon là, je
51:36vais mettre Amadou. D'accord. L'idée
51:39c'est quoi maintenant ? À chaque fois
51:40qu'il va me parler, il va me dire
51:42Assalam alekum amadou. Et on va tester
51:44ça tout de suite. Je vais venir ici, je
51:46vais lui dire salut. L'idée c'est que
51:48maintenant il doit me dire assalam
51:49alekum amadou. Tout simplement tu as vu
51:52assalam alkoum amadou salut comment tu
51:54vas ? Pourquoi il m'a dit ça ? tout
51:55simplement parce que je contrôle son
51:57comportement au niveau des règles. Donc
51:59les règles te permettent comme je te
52:01l'ai dit de contrôler le comportement de
52:02ton de ton nia pour que il n'aille pas
52:05dans tous les sens. Donc c'est très
52:07important d'établir des règles surtout
52:09quand tu veux créer des outils qui sont
52:11très qualitatifs et ça va beaucoup te
52:13servir lors de la sécurisation de tes
52:15données. On arrivera à cette étape là.
52:17Je vais revenir ici dans la dans les
52:19customisations au niveau des roules.
52:20Donc là je pense que tu comprends
52:22maintenant c'est quoi une règle. Donc
52:23là, c'est une règle qui est globale et
52:25là on a les règles au niveau du
52:27workspace. Donc si je veux créer une
52:29règle qui va être encapsulée dans ce
52:31projet-là en particulier, qui va être
52:33une règle par exemple très précise pour
52:36un dossier ou bien pour un projet qui
52:37est bien précis, tu vas cliquer sur
52:39workspace et là le la règle que tu vas
52:42créer va être tout simplement disponible
52:44ici mais pas disponible dans un autre
52:46fichier. D'accord ? Mais si tu crées une
52:48règle globale comme par exemple cette
52:50règle là, elle va être disponible dans
52:52tous les autres projets que tu vas
52:53créer. Tu n'as pas besoin de le créer et
52:55de le recréer tout le temps. D'accord ?
52:58Donc ça c'est les rules. Ensuite, on a
52:59les workflows. Et les workflows
53:01aujourd'hui, ils sont beaucoup plus
53:02connus sous le nom de skills. Donc les
53:04workflow, c'est tout simplement euh
53:06[musique] une liste d'étapes que l'agent
53:08doit suivre pour faire quelque chose ou
53:10bien une tâche en particulier. Par
53:12exemple, si je veux connecter le Mobile
53:15Money, disons disons que je veux
53:16connecter par exemple un Monero ou bien
53:18un Paytech, il y a des étapes bien
53:21précises à suivre. Donc au lieu de que
53:24Lia aille dans tous les sens, tu lui
53:25donnes un fichier qui s'appelle un
53:27skills ou bien un workflow. Et dans ce
53:29fichier-là, il va tu lui dis si tu lui
53:31dis par exemple, je vais installer
53:32Paytech, va voir dans les workflows et
53:34va aller regarder et c'est ah ok, je
53:36dois mettre ça, ensuite je fais ça,
53:38ensuite je fais ça et comme ça j'aurai
53:39connecté le mobile money africain. Donc
53:41moi, par exemple, dans tous mes s pour
53:43connecter les mobile money, j'ai j'ai
53:45une liste de workflows que j'utilise,
53:47d'accord, qui me permettent de plus
53:50rapidement euh connecter mes s à des
53:54mobile money par exemple. Donc c'est les
53:55fichiers qui m'ont pris des des
53:57recherches, vous n'imaginez pas, mais
54:00avec la formation, vous aurez aussi
54:02accès à ça. Donc ça c'est les workflows.
54:04Donc c'est un peu pareil, c'est aussi
54:06des fichiers, d'accord ? C'est des
54:07fichiers point MD. Donc quand je clique
54:09sur global, encore une fois, c'est ça
54:11veut dire que c'est un fichier qui va
54:14être disponible dans tous les projets
54:15que je vais créer. Donc par exemple, je
54:17vais créer un fichier qui ça va qui va
54:18s'appeler QA. D'accord ? Et je vais je
54:21vais lui dire par exemple euh la
54:23description. Ça c'est un fichier qui me
54:25permet de pouvoir créer un agent qui va
54:29vérifier mes applications et les tester
54:30pour moi. Et ici le contenu, je vais lui
54:33dire. Donc maintenant, je veux que tu
54:35suives exactement toutes les
54:37instructions que je vais te donner qui
54:38vont suivre dans ce fichier là. Et à
54:41chaque fois que je vais t'invoquer, tu
54:42vas tout simplement faire une review de
54:44mon app en terme de UX, de UI, de
54:47sécurité, de responsivité et me poser
54:49des questions et me faire un retour
54:51complet et un plan d'action à suivre
54:53pour corriger les failles que tu as
54:55aperçu. Et et une fois que je lui dis
54:57ça, ici en bas, qu'est-ce que je vais
54:59faire ? Je vais tout simplement euh lui
55:02donner des instructions qu'il devra
55:03suivre et ensuite il va me faire un
55:05retour. Maintenant, tu vas tu vois que
55:07je n'écris pas, je dicte, d'accord ?
55:09Parce que j'utilise un un outil qui me
55:11permet d'aller beaucoup plus rapidement,
55:12d'accord ? Euh je vais te le montrer
55:14tout à l'heure, ça s'appelle Whisper
55:16Flow. Mais euh Antigravity a aussi un
55:19outil euh de de dictation vocale
55:22intégrée parce que whisperflow, c'est
55:23quand même payant. Euh mais euh moi je
55:25je l'utilise en terme de productivité,
55:27ça me permet d'aller beaucoup plus
55:28rapidement parce que tu sais que en euh
55:30comme être humain bah on va euh parler
55:33beaucoup plus rapidement qu'on ne tape
55:35euh si on doit écrire. Donc si tu veux
55:38aller beaucoup plus rapidement, moi
55:39j'utilise des outils qui me permettent
55:41de de faire des vocaux euh et il va tout
55:44simplement les transcrire en texte.
55:45Sinon, tu peux tu peux les écrire, il y
55:47a pas de souci. Donc là, par exemple, ça
55:49c'est un c'est un fichier Q donc et je
55:52l'ai mis en global. D'accord. Donc c'est
55:54un peu ça, c'est ça la différence entre
55:56les rules et les workflows. Donc les
55:58rules, c'est tout simplement des règles
56:00qui te permettent de contrôler euh le
56:02comportement de ton agent et les
56:04workflows, c'est des prompts que avec
56:07des étapes bien précises que ton agent
56:09va suivre. Pour par exemple faire
56:11quelque chose de bien précis, je vais te
56:13montrer comment activer des workflows
56:15dans an gravity si jamais tu en as
56:17besoin. Donc là, on va revenir au niveau
56:19de l'argent. Donc là, je pense que tu
56:21connais par exemple exactement à quoi
56:23sertent tous ces boutons là. Ce bouton
56:24là, ça sert tout simplement à fermer le
56:27panel. D'accord ? Et si tu veux le
56:28réouvrir, tu as cliqué sur ce bouton là,
56:30d'accord ? Tu as cliqué dessus et ça va
56:32réouvrir le panel. Donc ici, on a le
56:35chat et sur le chat, je t'ai fait une
56:37petite démonstration tout à l'heure.
56:39C'est juste ici, tu viens et et tu
56:41parles à ton agent. Donc, je peux lui
56:42dire salut et il va me dire "Salam
56:44alkoum amadou parce que il c'est dans
56:46les roules, d'accord ? C'est une règle
56:48qu'il doit suivre tout le temps. Tu as
56:49vu Assalam alkoum amadou ? Donc là, tu
56:52vois un peu euh la règle en en on va
56:55dire en action. Donc ça c'est les le
56:59texte qu'il me donne, d'accord ? C'est
57:01le c'est c'est en fait c'est sa manière
57:03de communiquer avec moi. Et ici on peut
57:06voir les pensées. Donc et il peut en
57:08fait on peut voir ce que l'agent pense,
57:10ce que Lia pense avant de me répondre.
57:12Donc ici qu'est-ce qu'il a pensé ? The
57:14user just said salut. This is a simple
57:17greeting, no task needed. Il a dit,
57:18l'utilisateur m'a juste dit salut en
57:20français, c'est juste une salutation
57:23simple, pas besoin d'effectuer une tâche
57:24et il m'a juste répondu. Donc après
57:27quand je lui ai demandé de faire des
57:28tâches beaucoup plus complexes, je vais
57:30pouvoir suivre comment il réfléchit sa
57:32chaîne de pensée. Et ça me sert à
57:34quelque chose. Ça me sert euh par
57:35exemple, ça c'est très utile parce que
57:37si l'agent fait quelque chose et il ne
57:39le fait pas de la manière dont tu veux,
57:40tu peux aller sur sa pensée et voir
57:43peut-être où est-ce qu'il s'est perdu.
57:44Peut-être qu'il a confondu quelque chose
57:46et là tu pourras lui dire dans ton
57:47promte euh écoute, je pense que tu t'es
57:49trompé au lieu de ça, c'est ça que je
57:51voulais dire. Donc fais-moi ça de cette
57:53manière-là. Donc c'est très important.
57:55Donc c'est un peu les écritures grisées
57:56là qui te permettent tout simplement de
57:58savoir à quoi pense LIA. C'est juste
58:00quelque chose qui est très utile. Ici tu
58:01peux copier le texte la réponse de Lia.
58:04Là tu peux dire que c'est une bonne
58:05réponse ou bien une mauvaise réponse. Ça
58:07permet tout simplement à Antigravity de
58:09mieux entraîner leur agent. Donc c'est
58:11pas obligatoire. Tu peux le faire si tu
58:13veux tu ne le fais pas. C'est juste un
58:14feedback. Ici en bas, on a le chat. Donc
58:17je te l'ai montrer ici. Euh et dans le
58:19chat, on peut faire beaucoup de choses.
58:20Donc on peut par exemple référencer des
58:22fichiers ou bien des dossiers. Donc par
58:24exemple pour référencer là j'écris juste
58:27arobas. Donc quand j'écris arobas, ça va
58:29m'ouvrir un sélecteur en haut. Et dans
58:31ce sélecteur là, je peux sélectionner
58:33des files, donc des fichiers. Je peux
58:35sélectionner des directories, donc des
58:36dossiers. Je peux sélectionner des
58:39contextes de code. Je peux sélectionner
58:40des rules, donc des règles. Par exemple,
58:42j'écris, je clique sur rule, tu vas voir
58:44que là ça va montrer les rules qui sont
58:46disponibles. Donc par exemple, ça c'est
58:48un rôle que j'ai. Donc c'est le user
58:50global euh qui est à chaque fois que je
58:52te je te dis quelque chose, tu me
58:54réponds salam alkummadou. Là, je lui ai
58:56dit par exemple, ça c'est un rôle et euh
58:59je je peux je peux référencer cette
59:01règle-là en particulier et lui demander
59:03de faire quelque chose. Donc par
59:04exemple, je lui dis maintenant je veux
59:06que tu modifies cette roule-là au lieu
59:07de me dire assalam alkum amadou, tu me
59:10dis bonjour.
59:13Donc voilà. Bonjour Amadou. Donc l'idée
59:15c'est quoi ? Je veux qu'il modifie la
59:17roule. D'accord ? Au lieu de me dire
59:18assalam alkoum Amadou euh il va me dire
59:21bonjour Amadou. Maintenant qu'est-ce
59:23qu'il fait ? Tu vas voir queil va
59:24réfléchir. Donc qu'est-ce qu'il a
59:25réfléchi de l'utilisateur veut que je
59:28modifie
59:30la règle globale dans le Gemini.m.
59:33D'accord. Il va laisse-moi d'abord lire
59:35le fichier en premier et voir son
59:38contenu et je vais le mettre à jour tout
59:41simplement. Et une fois qu'il qu'il a
59:43pensé ça, il sait ce qu'il doit faire et
59:45là il me dit quoi ? Bonjour Amadou. Et
59:47il va dire je vais modifier la règle. Il
59:49est parti dans le fichier. Donc ça c'est
59:51le Gemini.md. Donc comme je te l'ai dit,
59:53c'est le fichier global des règles que
59:56Gemini anti Gravity va regarder à chaque
59:58fois avant que tu quand tu lui envoies
1:00:00un message, il va toujours regarder le
1:00:01fichier global des instructions pour
1:00:03savoir comment il doit interagir, ce
1:00:05qu'il doit faire. Et là, qu'est-ce qu'il
1:00:07a fait ? Euh, il a tout simplement
1:00:09modifié le fichier. Mais regarde ce
1:00:11qu'il ce qu'il fait. En fait, il a
1:00:13modifié le fichier mais il me demande
1:00:15l'autorisation. Ça c'est un peu un
1:00:18comportement que je peux changer. Je
1:00:19peux lui je peux mettre en place un un
1:00:21comportement qui fait qu'il va pas me
1:00:23demander l'autorisation pour modifier
1:00:24les fichiers. Donc euh ça par exemple
1:00:27euh pour les gens qui vont s'y
1:00:28connaître, d'accord, euh qui sont
1:00:30beaucoup plus avancés, ils veulent à
1:00:32chaque fois que l'intelligence
1:00:33artificielle leur pose une question et
1:00:35leur demande l'autorisation de modifier
1:00:37un fichier. Mais surtout pour les
1:00:39débutants, vous n'avez pas vraiment
1:00:41besoin de vous casser la tête à ça parce
1:00:42que aujourd'hui, les intelligences
1:00:43artificiales sont surtout les modèles
1:00:45d'agent, ils sont tellement
1:00:46intelligents, rarement ils font des
1:00:48erreurs. D'accord ? Donc je vais juste
1:00:50faire allowers. Donc ça veut dire que à
1:00:53chaque fois qu'il voudra modifier des
1:00:54fichiers dans cette conversation là, il
1:00:56va plus me demander l'autorisation. Et
1:00:58là tu vas voir que ça c'est le fichier
1:01:00pointmd. D'accord ? Moi j'ai mis Assalam
1:01:01alkum Aadou. Quand je vais lui donner
1:01:03l'autorisation, regarde ce qu'il va
1:01:05faire. Donc là il est en train il sait
1:01:07que maintenant je lui ai donné je lui ai
1:01:09donné l'autorisation. Je vais voir que
1:01:10bientôt il va modifier. Tu as vu là il a
1:01:13modifié euh le texte au lieu de assalam
1:01:15alkum amadou il a mis bonne journée
1:01:17Amadou. Et là je peux accepter.
1:01:19D'accord. et il m'a dit maintenant une
1:01:21fois qu'il l'a fait, il me dit c'est
1:01:22fait, la règle a été mise à jour.
1:01:24Désormais, je te dirai bonne journo à
1:01:25Modou à chaque fois que je te parle.
1:01:27Donc je pense que tu comprends un peu
1:01:29maintenant comment on interagit avec
1:01:32l'argent et comment il est intelligent,
1:01:34il est capable d'aller voir toute ma
1:01:36code base, donc mon fichier de code,
1:01:38voir le fichier qu'il doit modifier,
1:01:40savoir ce qu'il doit modifier dedans, me
1:01:42demander même l'autorisation et ensuite
1:01:44le modifier. Et une fois qu'il a fini,
1:01:46il me fait un retour pour me dire "OK,
1:01:48j'ai fait ça, j'ai fait ça, j'ai fait
1:01:50ça." Donc c'est un peu ça la base du
1:01:53vibe coding. C'est ça le vibe coding,
1:01:55c'est donner des instructions à l'agent,
1:01:57le laisser faire le travail, voir ce
1:01:59qu'il a fait, lui dire soit modifie,
1:02:01soit c'est bon, soit c'est pas bon.
1:02:03C'est aussi simple que cela. Et disons
1:02:05que par exemple, il a fait j'ai fait une
1:02:07erreur ou bien je lui ai donné je lui ai
1:02:08donné un message, il a fait quelque
1:02:10chose que je ne voulais pas qu'il fasse.
1:02:12D'accord ? C'est très simple pour moi.
1:02:14J'ai juste à venir ici au niveau de ce
1:02:15message là. Tu vas voir qu'il y a le
1:02:17bouton revert. Donc je clique sur cette
1:02:19flèche là. Une fois que je clique sur
1:02:20cette flèche là, ça va ça va enlever
1:02:23c'estàdire ça va annuler la modification
1:02:25qu'il a fait sur ce dossier. Donc là on
1:02:26est dans le dossier Gemini qui vient
1:02:28d'être modifié. Quand je vais cliquer
1:02:29sur confirmer, tu vas voir que ça va
1:02:31revenir à Assalam alkum amadou. Donc
1:02:33c'est aussi simple. Même si tu fais des
1:02:34erreurs, même si l'agent fait des
1:02:35erreurs sur ton code, tu peux facilement
1:02:37revenir en arrière. Mais après, on aura
1:02:39une méthode qui est beaucoup plus euh
1:02:42robuste de faire cela, qui c'est avec
1:02:44Git, mais on parlera de cela tout à
1:02:46l'heure. Donc l'idée c'est de tout
1:02:48simplement avoir la capacité d'avoir une
1:02:51nom prise sur ton code base, une nom
1:02:52prise sur ton code, sur ton projet en
1:02:54général et c'est ça la raison principale
1:02:57de travailler en local au lieu
1:02:58d'utiliser des outils en ligne. Donc là,
1:03:01je vais par exemple lui dire au lieu de
1:03:03me dire "Bonne journo Amadou, dis-moi
1:03:05euh salam tout simplement." Et là, tu
1:03:08vas voir que maintenant il va toujours
1:03:09refaire la même chose. D'accord ? Je
1:03:10vais lui donner l'autorisation et là il
1:03:12va faire la modification du fichier.
1:03:15D'accord ? Euh et une fois qu'il l'a
1:03:17fait, il a modifié Salam Amadou et je
1:03:20vais tout simplement pouvoir accepter
1:03:21les modifications. Et là, il va faire la
1:03:24règle a été mise à jour. Désormais, je
1:03:25te dirai salut Amadou. Donc ça c'est
1:03:27aussi simple que cela. Maintenant ici on
1:03:29a quoi ? Au-dessus de l'interface de
1:03:32chat, on a l'explorateur de fichiers.
1:03:34Donc tout à l'heure, tu as vu en fait à
1:03:36chaque fois qu'il fait un changement de
1:03:37fichier, tu vas pouvoir voir ici quels
1:03:39sont les fichiers qui sont euh changés.
1:03:41D'accord ? À chaque fois qu'il change
1:03:42des choses, tu pourras voir exactement
1:03:44ce qu'il est en train de changer sur
1:03:46chaque fichier comme j'ai pu le voir
1:03:47ici. Donc euh on va refaire un test.
1:03:49Donc je vais lui dire par exemple euh
1:03:51crée-moi un fichier amadob.txt et dans
1:03:54ce fichierlà euh écris-moi juste le mot
1:03:57hello. Donc l'idée c'est quoi ? Je vais
1:03:59te montrer ici. Tu vas voir à chaque
1:04:01fois qu'il va créer quelque chose ou
1:04:02bien il va modifier un fichier. Tu vas
1:04:04voir ici dans les dans l'overview des
1:04:07changements. D'accord ? Donc tu vas voir
1:04:08qu'il y a un fichier qui a changé. Donc
1:04:10quand je clique dessus, d'accord ? Tu
1:04:12vas voir que c'est ce fichierlà amadou.
1:04:15Et il a mis hello dedans. D'accord ? Et
1:04:18je peux lui dire mets le fichier que tu
1:04:20par exemple mets le fichier que tu viens
1:04:21de créer, je veux que tu le mettes dans
1:04:23le dossier Amadofal. Et tu vas voir qui
1:04:24va le faire. Maintenant le fichier que
1:04:25tu viens de créer, je veux que tu le
1:04:27mettes dans le dossier Amadofal. Donc je
1:04:29vais le dossier Amadou Fal. [musique]
1:04:31Donc là tu vas voir que maintenant on a
1:04:33le dossier Amadoufal. D'accord ? Il va
1:04:34voir, tu vas voir qu'il va prendre le
1:04:36dossier amadou.t txt et il va me
1:04:38demander donc ça qu'est-ce qu'il est en
1:04:40train de faire ? Il est en train de run
1:04:42c'estàdire il est en train d'exécuter
1:04:43une commande terminale. Donc les
1:04:45commandes terminales c'est tout
1:04:46simplement on appelle ça aussi les
1:04:48commandes shell. C'est des commandes qui
1:04:50permettent d'invoquer les capacités de
1:04:53la machine, les API de base de la
1:04:55machine pour faire des choses. Donc par
1:04:56exemple, supprimer un fichier euh par
1:04:58exemple pour euh euh transporter ou bien
1:05:01euh déplacer un fichier. Par exemple, il
1:05:03y a des commandes bien précises comme
1:05:05c'est move MV. C'est pour ça il a mis
1:05:07MVAD.txt TXT dans Amadoufal. Donc ça
1:05:11c'est une commande, c'est une invocation
1:05:13et quand je il va me demander
1:05:14l'autorisation et si je veux qu'il le
1:05:16fasse, je vais faire juste run. Et tu
1:05:18vas voir que maintenant ici dans le
1:05:19dossier Amadoufal, dans le dossier
1:05:21Amadodoufal, il y a le fichier Amodu.txt
1:05:23qui vient d'être créé, [musique] qui a
1:05:25été euh tout simplement placé dedans. Et
1:05:28c'est aussi simple que cela. L'idée
1:05:30c'est tu lui dis quelque [musique]
1:05:31chose, tu lui dis de faire quelque chose
1:05:33et il va le faire pour toi. Maintenant
1:05:35là, il me demande l'autorisation mais
1:05:36tout à l'heure je te vais te montrer. Tu
1:05:37vas activer un simple réglage comme ça,
1:05:39il va plus te te casser la tête. Il va
1:05:42juste faire ce qu'il a à faire et après
1:05:43il te dit "J'ai fini." Donc là c'est
1:05:45cool. Là c'est bon. Donc là ici comme tu
1:05:47l'as dit, c'est l'explorateur des
1:05:49changements sur les fichiers. D'accord ?
1:05:51Ici, tu peux faire une revue des
1:05:53changements qui ont été faits. Donc là,
1:05:56si je clique dessus, tu vas voir que il
1:05:58y a eu un changement sur par exemple
1:06:00Gemini.m. Donc à chaque fois que je lui
1:06:02dis au lieu de me dire salam alkoum, il
1:06:05me dit salamadou. Donc ça c'est une
1:06:06modification qu'il a fait. Ensuite, il a
1:06:08fait cette modification là. Donc + 1.
1:06:10Donc c'est plus une modification. On a
1:06:12créé amodu.txt et on a mis hello. Donc
1:06:15ici, tu peux voir l'arborescence, tu
1:06:17peux voir euh l'historique des
1:06:19changements qui sont faites dans ton
1:06:21projet. Ensuite, ici en bas, on a un
1:06:24bouton plus qui nous permet d'ajouter du
1:06:26contexte à nos messages. Donc par
1:06:28exemple, quand je clique sur plus, tu
1:06:29peux voir que sur mon message, je peux
1:06:31ajouter soit un média, donc par exemple
1:06:33une image. Donc disons que il y a un
1:06:34bouton qui est qui est mal fait, que je
1:06:36veux changer, je peux prendre une
1:06:38capture de ce boutonlà et je vais
1:06:40l'ajouter en tant que image dans mon
1:06:42message pour lui donner beaucoup plus de
1:06:43contexte. Ensuite, je peux faire des
1:06:45mentions. Les mentions, je te l'ai dit
1:06:46tout à l'heure. Donc, tu peux tout
1:06:47simplement faire arobas. Donc, par
1:06:49exemple, je peux référencier des
1:06:51dossiers. je peux référencer des
1:06:52fichiers. Donc ici, disons que je peux
1:06:55je peux je peux référencer par exemple
1:06:58des dossiers comme le dossier principal,
1:07:00comme le dossier Open Make, d'accord ?
1:07:02Qui est le dossier principal. Je peux
1:07:04référencer par exemple le dossier app.
1:07:06Donc par exemple, je peux faire arobas
1:07:08et je fais directory et je fais app si
1:07:10par exemple je veux qu'il fasse quelque
1:07:11chose dans ce dossierlà en principal.
1:07:13mais aussi je peux référencer des files,
1:07:15donc des fichiers, je peux référencer
1:07:16des règles. Donc l'idée c'est ça permet
1:07:19tout simplement d'ajouter du contexte à
1:07:21notre message. Ensuite, on peut aussi
1:07:24référencer des workflows. Donc pour les
1:07:26workflows, c'est simple. Par exemple,
1:07:28tout à l'heure pour les règles, on
1:07:29mettait. Pour les workflows, on va faire
1:07:31un forward slash. Donc on va faire un
1:07:33slash tout simple et ça va te montrer
1:07:35les workflows, donc les skills qu'on a
1:07:38et tu pourras tout simplement référencer
1:07:40un skills et tu lui dis regarde dans ce
1:07:42skills là par exemple et fais ce qu' par
1:07:45exemple je lui là j'ai référencé un
1:07:47skills donc je lui dis regarde dans ce
1:07:49skills et fais exactement ce qu'il y a
1:07:50dedans. Et une fois que je lui dis ça,
1:07:52tu vas voir que il va aller regarder
1:07:54dans ce skills là en particulier. Donc
1:07:56dans ce skills, qu'est-ce que je lui ai
1:07:57dit maintenant ? Je veux que tu suives
1:07:59exactement toutes les inscriptions. Tu
1:08:01vas tout simplement faire une review
1:08:03dans mon Donc ce skill c'est le skills
1:08:05qu'on a créé tout à l'heure, donc le
1:08:06workflow. Donc c'est juste une manière
1:08:08de référencer cela. Donc je vais tout
1:08:10effacer. Et ici à côté du bouton, on a
1:08:14le les le bouton planning. Donc c'est
1:08:16quoi ? C'est c'est tout simplement un
1:08:18bouton qui nous permet de changer le
1:08:21mode de réflexion de l'IA. Donc par
1:08:23exemple là on est en mode planning. Donc
1:08:24le mode planning comme tu peux le voir,
1:08:26ça permet à Lien de réfléchir longuement
1:08:29à ce qu'il va faire, me poser la
1:08:31question, me montrer ce qu'il doit faire
1:08:33et avant de le faire. D'accord ? Donc
1:08:36c'est si tu veux faire des tâches qui
1:08:37sont beaucoup plus lourdes ou bien que
1:08:40tu veuxilles que Lia fasse le travail à
1:08:42ta place, qu'il fasse le planning et
1:08:44tout. Donc il va faire le planning. Donc
1:08:45ça c'est le mode planning. Mais des
1:08:47fois, tu n'as pas besoin de ça. Tu as
1:08:48juste besoin de changer quelque chose.
1:08:50Par exemple, tout à l'heure quand je lui
1:08:51disais euh crée-moi un fichier Amodu. Et
1:08:54mets-le dans le dossier modo fille,
1:08:56c'est des c'est des choses qui sont très
1:08:57simples ou par exemple change le fichier
1:08:59amodu. En amodu.txt. Donc ça c'est des
1:09:02tâches qui sont très simples. Si je veux
1:09:04faire des choses qui sont assez simples,
1:09:05je peux tout simplement utiliser le mode
1:09:07fast. Donc avec le mode fast, euh
1:09:09l'agent va s'exécuter directement euh
1:09:11parce que c'est des tâches qui sont
1:09:12simples. Tu l'utilises pour les tâches
1:09:14simples et pour les tâches qui sont
1:09:15complexe, tu vas rester en mode
1:09:17planning. Et généralement surtout pour
1:09:18les débutants, je vous conseille
1:09:20toujours le jours de rester en mode
1:09:21planning comme ça même si vous vous
1:09:23savez pas ce que vous faites, en tout
1:09:24cas lié à lui, il va réfléchir et il va
1:09:26faire ce qu'il doit faire. Donc euh
1:09:28ensuite à côté, on a le sélecteur de
1:09:31modèles. Il faut savoir qu'il y a plein
1:09:33de modèles disponibles dans le monde de
1:09:36des agents. Il y a il y en a je sais pas
1:09:38moi, je je connais même pas tous les
1:09:39modèles qui existentin. Il y a euh il y
1:09:41a les Kimi, il y a il y en a trop, tu
1:09:44vois. Pas la peine vraiment de te casser
1:09:46la tête à ça. Moi, par exemple, je ne
1:09:47sais pas combien de ça j'ai eu à lancer,
1:09:49mais je n'utilise que Jemini et
1:09:54Enthopique, donc Claude. D'accord. Et je
1:09:56te dis, tu n'as besoin que de ça. Tu
1:09:57n'as besoin que des modèles Google
1:09:59[musique] et de Cloud pour faire
1:10:00n'importe quel type de SAS ou de
1:10:03produits. Donc ici, tu peux voir que tu
1:10:05as accès à Gemini 3.1 Pro High. Donc
1:10:08c'est c'est le nouveau modèle de Gemini,
1:10:10donc le nouveau modèle de Google. Et ce
1:10:13qui est cool, c'est qu'à chaque fois
1:10:14qu'il y aura un nouveau modèle, tu
1:10:15pourras le venir le voir ici. Donc par
1:10:17exemple là, tu peux voir que le modèle
1:10:18sélectionné, c'est Cloud Opus 4.6 qui
1:10:20est actuellement le meilleur modèle de
1:10:22Opus au moment où je fais cette
1:10:23formation. Peut-être que dans quelques
1:10:24temps, il y aura le Opus 4.7 et si ça
1:10:27sort, tu pourras le voir ici tout
1:10:28simplement. D'accord ? Donc
1:10:30généralement, moi, j'utilise dans tous
1:10:32mes SAS, c'est Gemini 3.1 et Cloud Opus.
1:10:36D'accord ? J'utilise Cloud Opus pour
1:10:37tout ce qui est backend, pour tout ce
1:10:39qui est tâch complexe et Geminite 3.1,
1:10:41généralement, je l'utilise pour tout ce
1:10:43qui est front end, d'accord ? Donc tout
1:10:44ce qui est design et cetera. T'inquiète
1:10:46pas si tu comprends même pas ce que je
1:10:47dis. Normalement là, tu comprends ce que
1:10:48je dis, mais même si tu le comprends
1:10:50pas, ne t'inquiète pas, on va faire tout
1:10:52simplement on va inviter la pratique,
1:10:55d'accord ? On va faire la pratique et tu
1:10:57comprendras bien assez facilement tout
1:11:00cela. Donc là, ici, tu vas voir que le
1:11:02c'est le modèle Cloud Office qui est
1:11:04sélectionné. Donc tous ces messages que
1:11:06j'ai eu à faire, il ne ces messages là
1:11:08ne sont pas destinés à tous ces modèles
1:11:10là. D'accord ? C'est le modèle qui est
1:11:12sélectionné qui va recevoir les messages
1:11:14et qui va me répondre. Et ce qui est
1:11:15cool, c'est que je peux interchanger les
1:11:17modèles euh comme je le veux. Donc là,
1:11:19par exemple, si je veux utiliser Gemini
1:11:213.1, je clique dessus et c'est bon. Là,
1:11:23si je si je j'envoie un message, si
1:11:25j'envoie un message, c'est tout
1:11:27simplement Jemini qui va me répondre,
1:11:29d'accord ? Et si je veux repartir sur
1:11:30cloud, je viens, je fais cloud et c'est
1:11:32aussi simple que cela. Donc l'idée c'est
1:11:35ça. Maintenant euh là, on a un vocal,
1:11:39d'accord ? C'est une fonctionnalité
1:11:40intégrée de de Gemini. Pour ceux qui
1:11:42veulent ne qui ne veulent pas écrire,
1:11:44qui veulent faire des vocaux, par
1:11:45exemple, tu peux cliquer ici et ça va te
1:11:47demander l'autorisation. Tu lui donnes
1:11:49et là je vais lui dire juste que tu
1:11:51ailles dans le dossier amadou.md et que
1:11:53tu m'affiches ce qu'il y a dedans. Donc
1:11:54par exemple, je fais ça et je lui
1:11:56envoie. Et là qu'est-ce qu'il va faire ?
1:11:58Il va transcrire. Il va comprendre ce
1:12:00que je lui ai dit dans mon vocal.
1:12:02D'accord ? Et il va tout simplement me
1:12:04répondre. Donc là, comme tu as, je vais
1:12:05tout de suite lire le contenu du fichier
1:12:07amodou.mmd
1:12:08euh pour moi. Donc là, dans le fichet
1:12:10amodou.md, c'est juste ça qui est
1:12:12dedans. D'accord ? Et là, il l'a lu et
1:12:14il me l'a affiché. Donc aussi, tu peux
1:12:16faire des voca. D'accord. Euh, bon, par
1:12:18contre, les vocau, la différence entre
1:12:20utiliser ça et ce que j'utilise moi
1:12:22personnellement qui est Whisper Flow,
1:12:24euh quand tu fais des vocau ici, tu ne
1:12:26peux l'utiliser que dans cette dans ce
1:12:29chat là. Alors que ici par exemple, tu
1:12:31peux pas l'utiliser ici. Si tu veux
1:12:32l'utiliser dans le terminal, tu peux
1:12:34pas. Si tu veux l'utiliser ici dans euh
1:12:37dans un fichier, tu peux pas. D'accord ?
1:12:39Si tu veux l'utiliser même sur ton
1:12:40navigateur, tu peux pas. Whortflow, tu
1:12:42peux l'utiliser partout sur ton
1:12:43ordinateur. C'est juste ça la
1:12:44différence. Mais euh je sais pas moi,
1:12:46j'ai j'ai développé pendant 2 mois sans
1:12:48sans sans avoir sans acheter de Visport
1:12:50Flow. Donc, tu n'en as vraiment pas
1:12:51besoin. Tu peux juste écrire ici si tu
1:12:53veux et utiliser ça qui est gratuit, qui
1:12:56est intégré déjà à ton gravité. Donc
1:12:58c'est un peu ça. Ensuite, on a les
1:13:00settings de d'antigravity. D'accord ?
1:13:03Donc ici, comme tu peux le voir, on a
1:13:05l'agent. D'accord ? Agent Autofix
1:13:07Linked. D'accord ? Si tu fais ça,
1:13:10l'agent va corriger lui-même des erreurs
1:13:13de syntaxe et cetera. Donc, tu mets
1:13:15juste on. Tu n'as même pas besoin de de
1:13:17savoir. Ici, on a le auto execution.
1:13:19Donc c'est ça que je te disais tout à
1:13:21l'heure, le auto execution c'est quoi ?
1:13:22L'agent à chaque fois qu'il va faire une
1:13:25modification ou bien qu'il veut faire
1:13:26quelque chose, il va te demander la
1:13:27confirmation. Donc tout à l'heure à
1:13:29chaque fois qu'il voulait modifier
1:13:30quelque chose, il me demandait toujours
1:13:31la confirmation. Là c'est il y a request
1:13:34review. Donc ça veut dire que lui il va
1:13:37toujours me demander. D'accord ? Mais
1:13:40mais si je veux que il fasse quelque
1:13:42chose sans me demander, tu viens juste
1:13:44je fais ici et je fais always proceed.
1:13:47Si je fais always proc, il va toujours
1:13:50bombarder. C'estàd avant de me avant de
1:13:52me poser la question et moi je je mets
1:13:54toujours always proced. D'accord ? J'ai
1:13:55pas le temps de de rester là tout le
1:13:57temps parce que sinon tu vas être bloqué
1:14:00parce que tu vas lui dire de faire une
1:14:01tâche, tu tu vas être occupé autre part,
1:14:03il va être bloqué sur ça, d'accord ?
1:14:05parce que tu dois cliquer. Alors si tu
1:14:06fais los proced, tu peux lancer une
1:14:08tâche, aller faire autre chose. Tu
1:14:10reviens, il a terminé la tâche et tu as
1:14:12tu fais juste un review. Et si c'est pas
1:14:14bon, tu fais un tu fais un retour en
1:14:16arrière. C'est aussi simple que cela.
1:14:17Donc là, j'ai fait un always proceed.
1:14:19Maintenant, vu que j'ai fait always
1:14:21proceed, on va retester. Je vais lui
1:14:23dire euh je veux que tu modifies euh ce
1:14:26qu'il y a dans le fichier amado. Et
1:14:29mets-y une présentation complète de
1:14:31Amadoufale. Donc je fais ça et l'idée
1:14:35c'est maintenant que il va modifier le
1:14:37contenu du fichier. Donc on a c'est là
1:14:39amodo.md qui est ouvert. Ça c'est le
1:14:41contenu amodu. MD. L'idée maintenant,
1:14:43c'est qu'il va changer le contenu sans
1:14:46même me demander la permission parce que
1:14:48je lui ai je lui ai je lui je l'ai mis
1:14:50en mode always proceed, d'accord, pour
1:14:53qu'il bombarde tout le temps. Donc on va
1:14:56voir. Donc là, il a mis un m de fois un
1:14:58créateur de contenu créatif et dynamique
1:14:59à travers ses devant devant vision. Donc
1:15:02c'est cool. Donc là regarde, il m'a même
1:15:04pas demandé la la l'autorisation. Elle a
1:15:07juste il m'a juste dit c'est fait, j'ai
1:15:08remplacé le contenu du fichier Amadou
1:15:11par une présentation complète
1:15:12d'Amadoufale. Et si tu souhaites y
1:15:14ajouter d'autres détails spécifique,
1:15:15n'hésite pas à me le dire. Donc là,
1:15:17c'est cool parce que je l'ai mis en mode
1:15:20en mode always proceed et je te
1:15:22conseille de faire ça aussi. Je pense
1:15:24que là, on a un peu une vision globale
1:15:26de ce qui de ce qui se passe avec
1:15:28Antigravity. À quoi sert ce panel là, le
1:15:31panel central et le panel tout à droite.
1:15:34Ici, on a le terminal en bas. Après, tu
1:15:36comprendras euh à quoi ça sert. Donc
1:15:38l'idée c'est c'est un terminal intégré
1:15:40qui te permet de faire des choses. Tout
1:15:42à l'heure quand il a fait euh euh disons
1:15:44et quand il a déplacé le fichier dans ce
1:15:47dossierlà, c'est une commande de
1:15:48terminal. Donc le terminal permet juste
1:15:50de faire des actions bien précises. Mais
1:15:52tu n'as même pas besoin de de faire ces
1:15:54ces choses-là parce que Lia va le faire
1:15:56à ta place. Mais disons que je vais
1:15:57afficher tous les documents sur ce
1:15:59terminal. Il y a des il y a des
1:16:00commandes spécifiques. Par exemple, il y
1:16:01a ls. LS, ça veut dire liste. Quand je
1:16:04fais ls et va et que je clique sur
1:16:06entrer, il va m'afficher tous les
1:16:07documents sur cette liste. Donc tu peux
1:16:09voir, il m'a tout affiché. Si je fais
1:16:11par exemple, si je veux afficher les
1:16:12documents, mais je veux aussi les
1:16:14afficher, afficher leur taille et les
1:16:16informations, je fais ls.Lla-la
1:16:19et tu vas voir qu'il va me les afficher
1:16:20sous forme de liste avec la taille, avec
1:16:23la date et cetera. Donc il y a c'est
1:16:25c'est vraiment quand je veux voir par
1:16:26exemple le directory euh par exemple le
1:16:29le fichier sur lequel je suis, je faiswd
1:16:32et il m'affiche que je suis sur le
1:16:33dossier open make qui est là avec euh le
1:16:37chemin du dossier. Donc ça c'est des
1:16:38choses que tu que tu après tu pourras
1:16:40apprendre et tu n'as pas besoin de de
1:16:42comprendre cela. C'est juste pour
1:16:43t'expliquer que ça c'est tout simplement
1:16:45le le terminal. D'accord ? Et après au
1:16:48fur et à mesure qu'on va avancer, tu vas
1:16:50un peu commencer à comprendre c'est quoi
1:16:51son utilité. Ça nous permet d'installer
1:16:53des packages, ça nous permet d'installer
1:16:56des des C'est-à-dire que des fois pour
1:16:59connecter notre application à quelque
1:17:01chose, il nous faudra installer un
1:17:03package qui est un peu différent d'une
1:17:05extension, d'accord ? Parce que
1:17:06l'extension, il est encapsulé dans
1:17:08l'éditeur qui est anti Gravity, mais le
1:17:11package, on l'installe directement dans
1:17:12notre code. Dans notre code, il y a un
1:17:14dossier qui s'appelle Node modules.
1:17:16D'accord ? Et dans ce modus là, on
1:17:19installe des packages et on les fait
1:17:20grâce au terminal. Donc pour l'instant,
1:17:23en terme de overview, on va dire, tu as
1:17:26juste besoin de de savoir ça. C'est des
1:17:28choses que je t'explique mais que ça ne
1:17:30te fasse pas peur parce que c'est pas
1:17:32des choses que tu vas faire toi-même,
1:17:33d'accord ? Toi, tu vas peut-être passer
1:17:35la majeure partie de ton temps ici à
1:17:37droite, d'accord ? À juste parler avec
1:17:39les a et il va faire le changement pour
1:17:41toi. Donc voici ce qu'il y a à savoir
1:17:44avec Antigravity. Ensuite, maintenant
1:17:45qu'on a installé Antravity, je vais te
1:17:47montrer comment installer cloud code qui
1:17:49est beaucoup et qui est très important.
1:17:51D'accord ? Moi, c'est vraiment le
1:17:53comment dire la fondation de tous les
1:17:55sages que j'ai eu à lancer. C'est
1:17:57vraiment quelque chose que j'adore. Mais
1:17:59après, tu vas me poser la question, tu
1:18:00vas me dire "Mais Amadou, pourquoi j'ai
1:18:01besoin d'installer Cloud Code à côté
1:18:03alors que ici, j'ai déjà accès à Cloud
1:18:06Opus, d'accord ? qui qui c'est c'est
1:18:08l'outil qui est utilisé derrière Cloud
1:18:10Code. C'est tout simplement parce que
1:18:12selon mon expérience, j'ai déjà utilisé
1:18:14Cloud Opus dans Antigravity mais je
1:18:16trouve qu'il est pas assez fort, qu'il
1:18:18est pas assez qualitatif parce que bon
1:18:19après il faut dire que c'est des
1:18:20concurrents entre Gravity c'est Google
1:18:22et Claude c'est Anthopique ça. Chacun a
1:18:25à son agent, chacun a son outil. Donc je
1:18:27sais pas ici euh vu que c'est l'outil de
1:18:30Google anti Gravity, généralement je
1:18:32l'utilise juste pour avec Gemini,
1:18:34d'accord ? Et quand je veux utiliser
1:18:36Cloud Opus, Cloud Sonnet, tout ce qui
1:18:38est en rapport avec Cloud, j'utilise
1:18:39directement Cloud Code que je trouve
1:18:42beaucoup plus fort et beaucoup plus
1:18:43puissant. D'accord ? Donc c'est un peu
1:18:45un choix mais si tu veux, tu peux
1:18:47utiliser directement Cloud Opus ici si
1:18:49tu veux si tu veux utiliser Cloud Opus.
1:18:52D'autant plus que l'abonnement de Cloud
1:18:54Code, [musique] il est payant. Mais je
1:18:56te dis personnellement je je n'ai pas de
1:18:59collaboration avec eux. Euh mais je te
1:19:02conseille en tout cas par exemple si tu
1:19:03veux le faire de le faire parce que
1:19:05personnellement je le fais et en terme
1:19:06de retour sur investissement c'est
1:19:08incroyable. Tu vas voir que pour avant
1:19:10pour avoir un développeur du niveau de
1:19:12cloud opus de cloud code peut-être qu'il
1:19:15te fallait payer des millions par mois
1:19:17mais aujourd'hui avec l'intelligence
1:19:18artificielle c'est ça la magie de
1:19:19l'intelligence artificielle. Donc là, je
1:19:21vais revenir sur mon navigateur et on va
1:19:24installer cloud code. Donc je vais
1:19:25venir, je vais taper tout simplement
1:19:27Cloud code. Une fois que tu tapes Cloud
1:19:29code, tu vas voir ici dans les résultats
1:19:30Cloud Code by Anthopic. Je vais cliquer
1:19:32dessus. Je mettrai aussi le lien dans le
1:19:35fichier. Donc ici, comme tu peux le
1:19:37voir, il y a get, d'accord ? Et tu asas
1:19:40juste par exemple ce que je vais faire,
1:19:43je vais faire try, d'accord ? Et là, tu
1:19:46vas tout simplement créer ton compte
1:19:48avec Google. tu vas te connecter avec
1:19:50Google. Donc je peux je peux me
1:19:52connecteras, je vais faire continuer.
1:19:54Donc une fois que je me suis connecté,
1:19:55je vais faire je vais faire Amadou, je
1:19:58vais mettre mon nom, accepter les
1:20:00conditions. C'est un peu le processus
1:20:02général. Donc une fois que tu reçois ton
1:20:04code, d'accord, tu vas cliquer sur
1:20:06vérifier le code et c'est bon, tu as
1:20:08créé ton compte cloud. D'accord ? Tu vas
1:20:11faire continuer et ici euh il va te
1:20:14poser des questions. Bon, tu vas juste
1:20:16répondre pas vraiment à à trop. à trop
1:20:19réfléchir. Maintenant ici, tu vas
1:20:21arriver au niveau de l'abonnement. Donc
1:20:24là, c'est l'abonnement mensuel. D'accord
1:20:25? Donc il faut savoir que Cloud Code
1:20:28n'est pas disponible pour les comptes
1:20:29qui sont gratuits. Donc si tu es
1:20:30gratuit, tu peux utiliser Clode hein
1:20:32dans le navigateur avec poser des
1:20:34questions, chatter et tout. Mais si tu
1:20:36veux utiliser Cloud Code, il te va
1:20:37falloir prendre un abonnement. Donc il y
1:20:39a deux types d'abonnement. Il y a
1:20:40l'abonnement Pro et à l'abonnement max.
1:20:42Par exemple, moi je suis à l'abonnement
1:20:43max, d'accord ? Mais au début, tu peux
1:20:45juste faire l'abonnement pro, d'accord ?
1:20:47créer tes tes premiers outils et quand
1:20:50tu voudras vraiment lancer des business
1:20:52ou bien que tu commences à à voir
1:20:54vraiment l'apport de cloud, tu vas
1:20:57passer en mode max. D'accord ? Euh comme
1:20:59je te l'ai dit tout à l'heure, c'est pas
1:21:00obligé. Si tu veux, tu restes juste sur
1:21:04antegravity avec Opus intégré dans
1:21:06Antegravity. Mais si tu veux suivre
1:21:08personnellement comment je fais euh mes
1:21:11ma méthode, en tout cas ma méthode
1:21:12personnelle pour créer des outils de
1:21:14qualité, je te [musique] conseille de
1:21:16prendre Cloud. Et comme je dit, c'est
1:21:18pas c'est pas un sponsoring, c'est juste
1:21:19que c'est aujourd'hui actuellement le
1:21:21meilleur modèle de code qui existe au
1:21:24moment où je fais cette formation là. Et
1:21:26vraiment si tu veux faire un truc de
1:21:28qualité, utilise les meilleurs outils.
1:21:30Donc là, tu vas tout simplement obtenir
1:21:31le plan pro et ensuite on va revenir sur
1:21:34gravity. Donc une fois que tu as pris
1:21:36ton abonnement cloud, tu reviens sur
1:21:37Anti Gravity. On va aller maintenant
1:21:39dans les extensions d'antigravity,
1:21:41d'accord ? Et ici, je vais taper tout
1:21:43simplement euh cloud code. D'accord ? Et
1:21:46là ça va rechercher dans les extations.
1:21:48Et là ici tu vas voir code fors code.
1:21:52D'accord ? Ici tu vas l'installer. Tu
1:21:54vas faire installer. D'accord ? Et on va
1:21:58attendre l'installation. D'accord ? Et
1:22:01une fois que c'est installé, tu vas voir
1:22:04ici un bouton ici, tu vas cliquer sur
1:22:06cloud code open. Et en fait, qu'est-ce
1:22:09que ça fait ? Ça ouvre un autre chat,
1:22:12d'accord ? Similaire au chat qu'on a là.
1:22:14Mais ce chat- làà c'est tout simplement
1:22:16uniquement pour Cloud Code. Donc c'est
1:22:19ici que tu vas pouvoir euh discuter avec
1:22:21Cloud Code pour qu'il fasse la même
1:22:23chose sur ton projet. Donc ici pour te
1:22:25connecter, tu vas faire slash login,
1:22:27d'accord ? Je vais faire slashlogin et
1:22:29là il va te demander de te connecter à
1:22:32ton inscription cloud IA. Tu vas cliquer
1:22:35dessus, je vais faire open. D'accord ?
1:22:37Et ensuite, je vais faire autorize.
1:22:39D'accord ? Sur mon compte, je suis déjà
1:22:40connecté. Donc une fois que je fais ça,
1:22:43je reviens sur antigravité et ici, comme
1:22:45tu peux le voir, je suis maintenant
1:22:47connecté. Et euh là, si je lui dis
1:22:49salut, tu vas voir que il va me répondre
1:22:52de la même manière que l'agent ici de
1:22:55Opus ou bien de Gemini. D'accord ? Donc
1:22:58euh c'est un peu ça. C'est un peu de la
1:22:59même manière dont on utilise CL code.
1:23:02Donc ici, on a le chat. Ici c'est le
1:23:04bouton plus pour permettre d'ajouter du
1:23:07contexte. D'accord ? Là, tu peux même
1:23:08lui demander de faire des recherches sur
1:23:10le web. CL code, c'est vraiment trop
1:23:12trop puissant. D'accord ? Tu peux
1:23:14uploader des fichiers, tu peux ajouter
1:23:16du contexte, c'estàd fichiers. Euh ici,
1:23:18quand tu cliques sur ce cette icône là,
1:23:20ça va t'ouvrir un une un panel et sur ce
1:23:23panel là, tu peux voir par exemple le
1:23:25modèle qui est actuellement utilisé par
1:23:27Cloud. D'accord ? Donc quand je clique
1:23:29dessus, tu vas voir que il y a plusieurs
1:23:31modèles. On a le défaut, d'accord, qui
1:23:33est sonné. On a son 1 million de tokens
1:23:36par contexte. On a Opus Opus 1 million
1:23:38de tokens par contexte, on a IQ. Donc je
1:23:41pense que je t'avais expliqué c'est quoi
1:23:42token. Donc forcément si tu prends 1
1:23:44million de tokens, ça va être beaucoup
1:23:45plus cher parce que de base les modèles
1:23:48de base ils utilisent 200000 tokens et
1:23:51pour nous pour nos tâches pour le moment
1:23:53c'est largement suffisant. Donc on va
1:23:55revenir ici. Ici tu peux switcher le
1:23:57modèle si tu veux. Donc tu peux changer
1:23:59de modèle si tu veux. Je te conseille de
1:24:00rester sur Opus 4.6 pour le moment. Là
1:24:03euh au niveau de l'effort, d'accord ?
1:24:06l'effort de penser, donc à quel point
1:24:08ton IA va réfléchir avant de faire
1:24:11quelque chose. Moi généralement, je le
1:24:12mets toujours au max, d'accord ? Moi, je
1:24:14veux que tu réfléchisses bien avant de
1:24:17faire n'importe quelle modification dans
1:24:19mon code. [rires] D'accord ? Donc là, tu
1:24:22peux faire un clear conversation. Donc
1:24:24tu peux
1:24:26comment dire nettoyer la conversation.
1:24:28Quand je clique sur clear conversation,
1:24:30tu vas voir que tu as vu ça nettoyer la
1:24:32conversation. Ça tu peux faire un
1:24:34rewind. Donc quand tu fais un rewind euh
1:24:36bon là vu que la conversation elle est
1:24:37vide, l'idée c'est quand tu veux faire
1:24:39un rewind, c'est comme la même chose ici
1:24:41que tu veux faire un und donc par
1:24:43exemple tu veux revenir à un message
1:24:45antérieur. Donc ici tu peux voir euh ton
1:24:48ton compte et ton usage. Donc par
1:24:50exemple là tu vas voir que c'est
1:24:54mon c'est mon compte tout simplement.
1:24:55Donc j'utilise cloud API. Donc là, c'est
1:24:58mes UG, c'est tout simplement quota
1:25:00d'utilisation de cloud dans la semaine.
1:25:03Donc c'est un peu comme ça que ça
1:25:04marche. Une fois que tu prends ton
1:25:06abonnement, tu auras accès à tout ça.
1:25:08Donc ici, on a le mode ask before edits.
1:25:11Donc c'est un peu euh la même chose ici
1:25:12que antigravity, donc euh autoexécution.
1:25:15D'accord ? C'est tout simplement est-ce
1:25:17que l'agent te demande avant de faire
1:25:18des changements ou bien est-ce qu'il
1:25:20fait des changements automatiquement.
1:25:22Donc là, il est en mode ask before edit.
1:25:24Donc à chaque fois qu'il va faire des
1:25:25changements, il va d'abord te demander.
1:25:27Donc si tu veux changer ça, tu cliques
1:25:28juste dessus, d'accord ? Et tu fais edit
1:25:31automatiquement. Et si tu fais ça, il
1:25:33bombarde. Donc il bombarde, il te
1:25:35demande pas, il bombarde. Et là, on a le
1:25:36mode plan qui est euh similaire au mode
1:25:39planning ici. C'està-dire que il va
1:25:41réfléchir, il va te dire ce qu'il va
1:25:42faire, tu valides et là il va exécuter.
1:25:45Donc moi, j'aime beaucoup aussi le mode
1:25:47plan ici et effort. Tu peux mettre
1:25:49[rires] max si tu veux. Bon là tu peux
1:25:51laisser à high. D'accord. Et
1:25:53généralement, c'est un peu comme ça
1:25:54qu'on utilise cloud code. Donc ici, tu
1:25:56auras ton cloud code. Ici, tu auras ton
1:25:58antigravity. Pour fermer cloud code, tu
1:26:01peux tout simplement euh fermer les
1:26:04fenêtres. D'accord ? Et pour fermer euh
1:26:07ce ce panel là, tu peux aussi le togel
1:26:09comme ça et peut-être même ouvrir euh
1:26:11juste cloud code si tu veux et ouvrir
1:26:13les deux. Généralement, j'ouvre les deux
1:26:15et c'est comme ça que je travaille. Donc
1:26:17c'est un peu comme ça qu'on installe
1:26:19Antigravity euh et qu'on installe Cloud
1:26:21Code. Euh ici en bas euh j'ai aussi
1:26:24oublié ces deux boutons. Donc ici tu
1:26:25peux ajouter une nouvelle conversation.
1:26:27Donc c'est c'est self explanatory, je
1:26:29pense ça s'explique tout seul. Et là on
1:26:32a tout simplement les l'historique des
1:26:35conversations qu'on a eu à avoir avec
1:26:37Cloud Code. Donc une fois que tu
1:26:38comprends un des outils, les autres
1:26:40deviennent beaucoup plus faciles à
1:26:42comprendre parce que c'est plus ou moins
1:26:44la même manière de fonctionner. C'est
1:26:45juste les icônes qui changent, les
1:26:47textes, les titres qui changent, mais
1:26:49c'est tous la même mentalité derrière,
1:26:51c'est la même logique derrière. Donc
1:26:52voilà comment fonctionne un peu Cloud
1:26:54Code et Antigrafity. Donc maintenant le
1:26:56dernier point que je vais te montrer
1:26:58dans cette dans ce module là, c'est les
1:27:00MCP. Donc les MCP c'est quoi ? C'est
1:27:02tout simplement comme les workflows,
1:27:04d'accord ? Donc comme des skills mais
1:27:06qui ont été faits par d'autres personnes
1:27:08que sur lesquelles tu peux tout
1:27:09simplement te connecter pour faire
1:27:11quelque chose de très précis. Donc par
1:27:13exemple, tout à l'heure, je t'ai parlé
1:27:14d'un workflow euh ou bien d'un skill
1:27:17pour faire euh par exemple l'intégration
1:27:19de de stripe pour par exemple pour les
1:27:21cartes bancaires, tu peux le faire
1:27:23toi-même ou bien il y a déjà des MCP,
1:27:25donc des skills qui existent déjà sur
1:27:27lesquels tu peux tout simplement te
1:27:28connecter et ton agent va aller chercher
1:27:31ça et les faire toi-même. Donc par
1:27:33exemple, disons pour connecter Stripe,
1:27:35je dois j'ai besoin de la PII privée, de
1:27:37l'API public. Ensuite, c'est comme ça
1:27:39que j'intègre Stripe. Ensuite, c'est
1:27:41comme ça que je fais un web hook. Bon,
1:27:43même si ça te fait peur, t'inquiète pas,
1:27:44c'est assez simple à faire. Donc ça, je
1:27:47sais que je dois le faire. Donc je je
1:27:49peux créer un un workflow ici, venir ici
1:27:52directement, aller dans customisation,
1:27:54aller dans workflow et l'ajouter tout
1:27:57simplement personnellement. D'accord ?
1:27:59Ou bien je peux venir ici et je fais MCP
1:28:01serveur. D'accord ? Et au niveau des
1:28:03MCP, je vais tout simplement faire des
1:28:05recherches et là il y a Stripe. D'accord
1:28:06? Je clique dessus, je fais install, je
1:28:09fais save et là tout simplement
1:28:12connecter mon [musique] site à un MCP
1:28:15qui lui apprend comment connecter
1:28:16Stripe. Donc les MCP, c'est aussi simple
1:28:18que cela. Donc il y a des MCP pour
1:28:20Github, il y a des MCP pour Neon, il y a
1:28:22des MCP pour Ras, pour Mongo DB, pour
1:28:24Notion. Donc l'idée tout simplement
1:28:26c'est de savoir comment euh connecter
1:28:29des MCP. Donc là, il me dit tout
1:28:30simplement que je dois ajouter le Stripe
1:28:32API key. Je dois le mettre ici et
1:28:34sauvegarder. C'est tout simplement ça.
1:28:35Mais là, je peux aussi connecter mon
1:28:38Netly en MCP. Je clique dessus, je fais
1:28:41install. Donc une fois que tu fais MCP
1:28:43serve là, tu peux voir à peu près les
1:28:46MCP qui sont disponibles. Par exemple,
1:28:48moi j'ai installé le MCP de Stitch qui
1:28:50est un outil qu'on va beaucoup utiliser
1:28:52avec Antigravity. Je vais t'expliquer
1:28:54tout à l'heure. Stitch, c'est aussi un
1:28:56outil de Google. Donc euh il y a plein
1:28:59de par exemple PayPal, si tu veux
1:29:01installer PayPal sur ton outil, sur ton
1:29:02SAS pour pouvoir facturer par PayPal, tu
1:29:04peux soit aller faire tes recherches
1:29:06toi-même pour savoir comment installer
1:29:07intégrer PayPal ou moins demander à
1:29:10l'agent de le faire ou bien [musique]
1:29:12installer tout simplement le MCP de
1:29:14PayPal et comme ça tu lui diras "Regarde
1:29:16le MCP de PayPal et intègre-moi PayPal
1:29:19dans mon app." Donc c'est un peu ça de
1:29:22la manière dont ça marche. Donc
1:29:23maintenant on va faire un petit
1:29:24récapitulatif de ce que tu sais faire
1:29:26maintenant. Donc aujourd'hui on a
1:29:28installé Antigravity, on a fait le tour
1:29:30d'antigravity de Cloud Code. D'accord ?
1:29:32Donc là tu sais comment installer et
1:29:34configurer Anti Gravity, comment
1:29:36installer et configurer Cloud Code. On a
1:29:38fait un tour sur l'interface
1:29:39d'antigravity donc les chats, les
1:29:40modèles, les workflows, la dicté donc la
1:29:42dicté tout simplement les audios. le
1:29:44mode conversationnel le mode agent, on
1:29:47donner du contexte, donc glisser des
1:29:49documents, nommer des fichiers et
1:29:51cetera. Euh on sait maintenant comment
1:29:54euh créer des workflows qui sont les
1:29:56skills, les règles de projet. Donc euh
1:29:58cloud.md. Donc cloud.md c'est la même
1:30:00chose que gemini.m d'accord c'est tout
1:30:03simplement les règles globales de
1:30:04cloud.md. De la même manière que Anti
1:30:06Gravity va aller toujours regarder dans
1:30:08gemini.md s'il veut faire quelque chose
1:30:10cloud.md va toujours aller regarder dans
1:30:12cloud.md. Donc c'est pareil. Donc on
1:30:15sait maintenant choisir le bon modèle.
1:30:17Donc par défaut c'est sonné mais nous on
1:30:19va utiliser Opus et on sait euh c'est
1:30:22quoi les MCP serveur ce qui nous permet
1:30:24de détendre les capacités de nos outils.
1:30:27Donc ce qu'on va faire maintenant c'est
1:30:28qu'on va passer au module 3. Et avec le
1:30:31module 3, on va maintenant un peu
1:30:33quitter la partie théorique et commencer
1:30:35à mettre les mains dans le cambouille.
1:30:37Passer sur la partie pratique. On va
1:30:39générer un design de zéro. Un simple
1:30:41design mais un joli design. D'accord. Je
1:30:43vais te on va voir euh comment on va
1:30:45vraiment générer notre premier truc,
1:30:47d'accord ? Notre premier tu vois, tu vas
1:30:49vraiment avoir cette joie là d'avoir
1:30:51créé ton premier outil tout en étant un
1:30:53débutant. voir à quel point c'est
1:30:55intéressant avec du code et on va
1:30:58l'ajuster, le personnaliser, on va le
1:31:00déployer en ligne et tu auras ton
1:31:01premier lien que tu peux partager avec
1:31:03tes amis, avec ta famille pour leur dire
1:31:05les gars, faites attention, je vais
1:31:06bientôt devenir un vibe coder expert.
1:31:09Donc on se revoit bientôt dans le module
1:31:113. Bienvenue maintenant dans le module 3
1:31:13de la formation Easy SAS. Donc dans ce
1:31:15module, on va passer à l'action.
1:31:16Jusqu'ici, on a posé les bases et
1:31:18installer les outils. Maintenant, on va
1:31:19créer des choses concrètes. Dans ce
1:31:21module, tu vas créer deux projets avec
1:31:23antigravity. Donc une landing page pour
1:31:25une entreprise et un CV en ligne et à la
1:31:27fin on va mettre en ligne ces projets.
1:31:29Donc tu auras finalement un lien
1:31:31accessible, quelque chose en ligne que
1:31:33tu pourras partager avec tout le monde,
1:31:35que tout le monde pourra voir sur
1:31:36internet. Et c'est ça qui est
1:31:37intéressant. C'est là que le Vibe Coding
1:31:39prend tout son sens. Tu vas voir à quel
1:31:41point c'est rapide de créer quelque
1:31:43chose de pro avec l'intelligence
1:31:44artificielle. Donc on commence. Donc
1:31:47avant de commencer de à créer, il faut
1:31:50d'abord définir ce qu'on veut. Avant de
1:31:51parler à La, il faut savoir ce qu'on
1:31:53veut. C'est la règle numéro 1 du VIP
1:31:55coding. Si tu ne sais pas ce que tu
1:31:57veux, LIA ne peut pas le devenir pour
1:31:58toi. Lia, c'est en fait, il faut
1:32:00considérer Lia comme un génie, un
1:32:03développeur incroyable mais qui vient
1:32:05tout juste d'intégrer ton entreprise.
1:32:07D'accord ? Il peut faire les tâches mais
1:32:08il ne connaît rien à à ton entreprise, à
1:32:11ce que tu veux, ce que tu veux réaliser.
1:32:12C'est à toi de lui donner le plus de
1:32:14détails possible et plus tu lui donnes
1:32:16de détails, plus il va être un expert,
1:32:18d'accord ? plus il va te en tout cas il
1:32:20va te donner un résultat qualitatif.
1:32:22Donc pour notre landing page, on va
1:32:24imaginer une entreprise fictive euh une
1:32:27entreprise de livraison à Dakar. Disons
1:32:29qu'elle s'appelle Livre Express, elle
1:32:31livre des colis en 2 heures d'entour
1:32:32Dakar. Ces clients sont des commerçants
1:32:34et des particuliers. C'est ça qu'on veut
1:32:37sur le sur la landing page. Donc avec un
1:32:40hero title et un bouton CTA, un section
1:32:43comment ça marche en trois étapes, une
1:32:45section tarif euh en trois offres, une
1:32:46section témoignage avec trois avis
1:32:48dedans et un fauteur avec un contact et
1:32:51et les réseaux sociaux. Donc tu vois,
1:32:53avant même d'ouvrir antigravity, j'ai
1:32:55déjà une idée claire de ce que je veux
1:32:56et c'est ça qui fait la différence. Donc
1:32:58vraiment il faut il te faut avoir une
1:33:00idée claire de ce que tu veux faire.
1:33:02D'accord ? Maintenant ce qu'on va faire
1:33:04c'est qu'on va ouvrir anti gravity et on
1:33:07va lui donner ce prompte là. Donc c'est
1:33:08un prompt qui est assez simple. Après je
1:33:10te montrerai comment moi je fais pour
1:33:12avoir le meilleur résultat avec
1:33:14antigravity. Mais on va commencer avec
1:33:16ce prompte qui est hyper simple. Donc on
1:33:18va aller sur antigravity. Donc là on est
1:33:20sur antiravity. Donc je pense que
1:33:22normalement tu sais maintenant comment
1:33:25on ouvre anti gravity. D'accord. Ça, on
1:33:27l'a déjà vu. Et ici, une fois qu'on est
1:33:29là, on va tout simplement ouvrir un
1:33:31nouveau dossier. Donc là, tu vas voir
1:33:32qu'il y a pas de dossier ouvert. Donc tu
1:33:34peux soit venir sur l'arborescence,
1:33:37l'explorateur ou bien venir ici. Tu vas
1:33:38juste cliquer sur open folder. Et là, ce
1:33:41qu'on va faire, c'est qu'on va cliquer
1:33:42sur nouveau dossier. On va créer un
1:33:43nouveau dossier. Euh, je vais l'appeler
1:33:46Easy Landing Page tout simplement. Donc
1:33:49Easy Landing Page, ça va être le nom euh
1:33:51du dossier. D'accord ? Donc je vais
1:33:54cliquer sur créer et je vais faire
1:33:56ouvrir. Donc une fois que j'ai fait ça,
1:33:59donc ça va ouvrir an gravité, je vais
1:34:01faire oui I trust the et là comme tu
1:34:05peux le voir ce que ça fait c'est que ça
1:34:07ouvre un nouveau dossier et sur ce
1:34:10dossierl
1:34:12d'accord donc on peut créer notre
1:34:14fichier Gemini.md pour les rules et
1:34:16cetera. Donc ce que je fais
1:34:18généralement, je crée d'abord le fichier
1:34:20de rules et les workflows, [musique]
1:34:22mais on va commencer par le plus simple,
1:34:25d'accord ? On va commencer par le plus
1:34:26simple et ensuite je te montrerai. Donc
1:34:28j'ai j'ai copié euh un prompt, d'accord
1:34:30? Donc le prompt que je t'ai montré tout
1:34:32à l'heure, je viens ici. Donc j'ai juste
1:34:34à venir sur le chat à droite et je vais
1:34:36le coller tout simplement. Donc je lui
1:34:38dit "Crée-moi une landing page pour
1:34:40livre express entreprise de livraison à
1:34:42Dakar." La page doit avoir un hero avec
1:34:44title sur bouton CTA. section comment ça
1:34:47marche. Donc voilà tout ce dont on a
1:34:49besoin. Donc HTML, CSS, JavaScript
1:34:52modèle bleu et blanc mobile responsive.
1:34:54Donc quand on parle de mobile
1:34:56responsive, ça veut dire tout simplement
1:34:57que le site va bien s'afficher sur
1:35:00mobile. D'accord ? Parce que la taille
1:35:02d'un écran sur mobile à la taille d'un
1:35:03écran desktop, c'est pas pareil. Donc il
1:35:05faut que le site soit codé avec le
1:35:07responsive en en tête pour que ce soit
1:35:10vraiment adapté à tous les appareils.
1:35:12Donc là, on est en mode planning. Je
1:35:14vais faire euh bon je vais rester en
1:35:16mode planning et ici sur les gravity
1:35:18setting comme tu as vu autoexécution,
1:35:20j'ai fait request review. Donc euh je
1:35:23vais faire euh always proceed. D'accord.
1:35:25Donc je pense queon a on a vu tout ça ça
1:35:27sert à quoi ? Et je vais faire je vais
1:35:29utiliser Gemini 3.1 je vais tout
1:35:32simplement cliquer sur S. Donc là ce que
1:35:35ça fait d'accord c'est que ça commence à
1:35:39voir un peu ce que je lui demande de
1:35:41faire. Donc ici, comme tu peux le voir,
1:35:43il va réfléchir, d'accord ? Il va voir
1:35:45un peu ce que je lui demande de faire.
1:35:47Il voit que il voit que je lui demande
1:35:50de faire de l'HTML, CSS JavaScript. Donc
1:35:53en fait, il va opter pour ça. Et là, il
1:35:55va tout simplement faire une analyse.
1:35:57Ensuite, il est en train là, comme tu
1:35:58peux le voir, de créer les fichiers
1:36:00index.html
1:36:02euh index.css, d'accord ? Styles.ccss.
1:36:05Donc c'est pour le CSS. Euh en fait là,
1:36:08il est en train de tout simplement créer
1:36:09les fichiers. Donc ça c'est tout
1:36:10simplement en fait si tu veux savoir
1:36:12qu'est-ce que la est en train de faire,
1:36:14à quoi il pense en fait généralement
1:36:16quand tu utilises surtout quand tu
1:36:17utilise des outils en ligne lorsque L
1:36:20est en train de créer, tu peux pas
1:36:21savoir ce qu'il est en train de faire.
1:36:22Tu peux pas savoir ce que en fait
1:36:24qu'est-ce qu'il est en train de penser
1:36:26au moment où il fait des choses. Et
1:36:27c'est ça qui fait que des fois tu peux
1:36:29te retrouver avec un code ou bien un bug
1:36:32ou bien quelque chose qui ne marche pas
1:36:34sur ton code et tu ne sais pas en fait
1:36:36où est-ce que l'as c'est perdu. Et c'est
1:36:37ça qui est cool aujourd'hui. Si tu
1:36:39utilises antigravity, tu peux aller tout
1:36:41simplement voir dans ses pensées et voir
1:36:43en fait quel est la le raisonnement
1:36:45logique qu'il a suivi pour arriver à
1:36:48cees résultats-là. Donc là, il est en
1:36:50train de d'ajouter les détails, les
1:36:52contacts de détails comme tu peux le
1:36:53voir, addic cont adding contact details.
1:36:56Donc il est en train d'ajouter les
1:36:57contacts euh les les détails de contact.
1:37:00Et une fois qu'il l'aura fait,
1:37:01normalement les fichiers, tu les verras
1:37:03ici maintenant dans notre explorateur de
1:37:05fichiers et on pourra tester cela en
1:37:08ligne. Et là, comme tu peux le voir, je
1:37:09viens de créer le fichier index. Donc
1:37:11index.html. Ça va être le point d'entrée
1:37:13de notre page. Donc en tout cas, en
1:37:15fait, quand je dis point d'entrée, c'est
1:37:16tout simplement le le fichier qui va
1:37:18servir notre site en quelque sorte. Donc
1:37:20là, on a le squelette de notre site.
1:37:22Donc quand on parle d'un fichier index,
1:37:23c'est ça à peu près. Tu as vu ? Euh
1:37:25quand on parle de fichier HTML, tu vas
1:37:27voir que ça commence avec la balise
1:37:29HTML. Là, on a le head. Donc dans la
1:37:31dans le head, on trouve le header. Donc
1:37:33tout ce qui est balisa, quand je te
1:37:34parle de balisa, c'est tout simplement
1:37:36les en fait toutes les informations
1:37:39cachées de cette page là. C'est
1:37:40généralement utilisé par les bottes, les
1:37:42crawlers, les bottes de Google. Par
1:37:44exemple, les robots de Google quand ils
1:37:45entrent sur ta page, ils peuvent savoir
1:37:47exactement à quoi servent par exemple ta
1:37:49page. Ils vont aller généralement dans
1:37:51les badis méta mais tu tu mets aussi des
1:37:54links. Donc si tu veux connecter par
1:37:56exemple les Google fonts, donc par
1:37:57exemple ça c'est un HRF, c'est un link
1:37:59pour connecter les fonts Google, donc
1:38:01les polic d'écriture. Ça c'est un link
1:38:03pour connecter le styles sheet, donc ça
1:38:05connecte le CSS. D'accord ? Donc ça
1:38:08c'est le fichier styles.css
1:38:10et là on a le nom. Donc c'est les
1:38:12métadescription. Donc on a la
1:38:14description, le contenu. D'accord ? Donc
1:38:16par exemple ça c'est quelque chose qui
1:38:18ne s'affiche pas vraiment sur la page
1:38:20sur le front mais c'est pour les BS.
1:38:21Donc là je t'explique juste, tu n'as pas
1:38:22besoin de le comprendre de base mais je
1:38:24t'explique juste. Donc ça c'est le
1:38:26title. Le title c'est ce que tu vas voir
1:38:28sur la table. D'accord ? Donc par
1:38:30exemple quand tu ouvres un un fichier
1:38:33sur ton navigateur, tu vois en haut au
1:38:35niveau de la table, il y a il y a une
1:38:37petite icône, on appelle ça le
1:38:38fabricant. Et à côté du fabricant, on a
1:38:40le titre. Donc c'est ça, c'est le title
1:38:42et voilà. Donc ici euh comme je te dis,
1:38:44c'est les basis métal. Là on a le body.
1:38:46Donc au niveau du body c'est ici que va
1:38:48tout ce que tu vois sur ton site.
1:38:50Généralement c'est dans le body et le
1:38:52footer. Donc là on a le header,
1:38:55[musique] on a les sections. Donc tu
1:38:56vois ça c'est la c'est la hero section.
1:38:58Donc c'est la c'est la plus grande
1:38:59section en fait. Ça c'est l'HTML.
1:39:02Là on a le CSS. Donc ça, comme tu peux
1:39:04le voir, un fichier CSS, ça s'affiche un
1:39:06peu comme ça. Donc on a des couleurs.
1:39:08Donc ça c'est la la couleur primaire,
1:39:10donc la couleur de base primary dark,
1:39:13donc la couleur de base mais en thème
1:39:15sombre, la couleur de base en thème
1:39:17clair. Tu vois le texte main, donc le le
1:39:20texte principal, ça c'est la couleur de
1:39:21texte principal. Text muted, ça veut
1:39:24dire un texte un peu barré, tu vois, un
1:39:27peu transparent. Voilà. Donc ça c'est
1:39:28des couleurs, des animations et cetera.
1:39:31Et ici, on a script.js JS qui a un
1:39:33fichier JavaScript. Donc on a parlé de
1:39:35ça. On a parlé de l'HTML, du CSS et de
1:39:37JavaScript. Donc tous ces trois-là sont
1:39:39interconnectés. Il faut un peu
1:39:41visualiser le index.html comme comme un
1:39:44peu le squelette, d'accord ? Le CSS de
1:39:47comme le maquillage, d'accord ? Et le
1:39:49JavaScript comme la pensée, le brain.
1:39:51Donc c'est ça, c'est lui qui gère les
1:39:53interactions. Quand tu cliques sur un
1:39:55bouton, il y a quelque chose qui
1:39:56s'affiche et cetera. Ça c'est le CSS qui
1:39:58est fait. Et tout se connecte ici au
1:40:00niveau de l'HTML. Donc au niveau de
1:40:03HTML, si tu descends juste jusqu'en bas,
1:40:05normalement tu verras un script.
1:40:07D'accord ? Donc ce script là, tu vas
1:40:09voir cet élément là. C'est ça qui fait
1:40:11la connexion entre cet HTML là et
1:40:13script.js qui est là. Donc c'est comme
1:40:16ça que ton fichier HTML peut prendre en
1:40:19fait en tout cas c'est comme ça que le
1:40:21fichier JS peut interagir avec ton
1:40:23fichier HTML. Et ensuite, nous avons la
1:40:26connexion avec le style sheet euh tout
1:40:29simplement ton ton CSS. D'accord ? Donc
1:40:32ce qu'on va faire, c'est qu'on va ouvrir
1:40:33index.html
1:40:35avec notre navigateur. Et ici, comme tu
1:40:37je tu peux le voir au niveau de de
1:40:40Antigravity, tu as automatiquement ton
1:40:43browser qui est là. Donc je clique
1:40:45dessus et une fois que je clique dessus,
1:40:47ça va ouvrir un un browser. D'accord ?
1:40:50Donc au niveau de ce browser là, je vais
1:40:52faire fichier euh ouvrir le fichier.
1:40:56Donc je vais aller dans Easylanding page
1:40:58et je vais ouvrir le html.css.
1:41:00Et là en fait tu peux voir ça c'est le
1:41:03c'est la page qu'il a créé pour moi.
1:41:06Donc voilà. Donc tu as vu juste à partir
1:41:09de d'un simple texte, il m'a créé tout
1:41:11cela. Donc on va voir un peu par rapport
1:41:13à ce que je lui ai demandé. Qu'est-ce
1:41:14qu'il m'a fait ? Donc ici ici je le
1:41:16compare à mon prom. Je lui dis créé-moi
1:41:17une landing page pour Livre Express.
1:41:19Donc avec un hero title sous-titre
1:41:21bouton CTA. Donc ça c'est le hero title.
1:41:24Donc quand on parle de hero title, c'est
1:41:25la première section qui s'affiche sur un
1:41:27site. Donc on appelle ça généralement le
1:41:29héros. Donc là ça c'est le hero title.
1:41:31Donc c'est le titre qui est sur le hero.
1:41:34D'accord ? Un sous-titre qui est là et
1:41:35un CTA. Donc CTA c'est tout simplement
1:41:38un call to action. Donc un bouton
1:41:40généralement si ici tu vends de
1:41:41l'abonnement, tu vas faire euh par
1:41:43exemple s'abonner gratuitement,
1:41:45découvrir maintenant, créer mon compte
1:41:47et cetera. Donc c'est le bouton
1:41:49généralement qui est que tu vois en
1:41:51haut. Donc on appelle ça un CTA mais
1:41:52même les autres boutons sont aussi des
1:41:54des CTA. Je essayer de demander une
1:41:56section comment ça marche. Donc là tu as
1:41:58vu ça c'est la section comment ça
1:41:59marche. Il l'a fait exactement comme je
1:42:01le veux. La section tarif avec trois
1:42:03offres. D'accord. Donc là c'est la
1:42:04section tarif avec trois offres. Je ne
1:42:06lui ai pas donné exactement de
1:42:08spécification sur les offres mais comme
1:42:11tu peux le voir il a pu juste
1:42:14imaginer des prix. Mais si je veux le
1:42:16modifier, je peux le faire. je vais te
1:42:18montrer tout à [musique] l'heure est euh
1:42:20une section témoignage donc avec des
1:42:22témoignages et euh voilà exactement ce
1:42:25qu'il a fait et il a mis un bouton nous
1:42:27contacter quand je clique dessus bon
1:42:30voilà je pense qu'il n'a pas il n'a pas
1:42:32ajouté de section contact parce que je
1:42:33lui ai pas demandé de le faire tout
1:42:35simplement mais ça c'est déjà euh on va
1:42:38dire que c'est ton premier test, c'est
1:42:39ton premier essai. Bon, après,
1:42:41généralement, c'est pas ça. C'est pas de
1:42:42l'HTML, CSS, JavaScript que tu vas
1:42:44créer. On va plutôt créer des des
1:42:47projets NextJs, d'accord, avec euh
1:42:50beaucoup plus de fonctionnalité,
1:42:51beaucoup plus de puissance. Mais voilà,
1:42:53c'est notre premier test, c'est notre
1:42:54premier essai. On va dire que c'est la
1:42:56base de tout. Et euh c'est intéressant
1:42:58parce que ici dans le prom, si je lui
1:43:00avais pas dit de faire HTMLCS
1:43:01JavaScript, il aurait fait quoi ? il
1:43:04aurait tout simplement créé un un projet
1:43:06NextJs parce que de base tous ces
1:43:09créateurs, tous ces agents IA codent la
1:43:12majeure partie du temps avec du NJS et
1:43:15ici pour le design, je lui avais demandé
1:43:16du moderne bleu et blanc et comme tu as
1:43:18vu, il a totalement respecté les
1:43:20consignes. Donc c'est un peu ça. Euh on
1:43:22va dire que c'est notre premier test
1:43:24pour créer quelque chose de d'assez
1:43:27potable, d'accord avec l'intelligence
1:43:29artificielle. Maintenant pour modifier,
1:43:31c'est assez simple. Donc par exemple,
1:43:32disons que je veux modifier le prix
1:43:33standard à 1500, le prix express à 2500
1:43:37et je veux que quand on clique sur nous
1:43:38contacter, ça ouvre un formulaire de
1:43:40contact. C'est simple, je viens ici et
1:43:43je lui dis je je vais je vais lui dire
1:43:45ça. Donc je veux que tu changes les prix
1:43:48pour le pour les pour le standard.
1:43:51D'accord ? Donc par exemple pour le pour
1:43:53le standard, au lieu de 1500, je veux
1:43:55qu'on mette 6500. Pour le Express, on va
1:43:59mettre 10500. Pour le business, on
1:44:01laisse sur devis. Mais quand je clique
1:44:02sur le bouton nous contacter, que ce
1:44:04soit sur au niveau du du euh du tarif
1:44:07sur devis business ou bien sur le
1:44:10header, donc sur le menu en haut, quand
1:44:11je clique sur nous contacter, ça doit
1:44:13ouvrir un formulaire de contact euh pour
1:44:16que la personne puisse me contacter.
1:44:18Donc c'est ça que je lui dis ici. Donc
1:44:20comme je te l'ai dit, moi j'utilise un
1:44:22outil pour dicter. Ça s'appelle Whisper
1:44:24Flow. Euh, il y aura aussi les liens que
1:44:26du de l'outil que j'utilise dans la
1:44:27description si tu veux l'utiliser. Ou
1:44:29bien tu peux tout simplement utiliser le
1:44:32le vocal qui est ici directement
1:44:34directement chez euh entre Ravity et il
1:44:37est gratuit, il vient avec l'outil. Donc
1:44:39tu peux l'utiliser pour faire tes
1:44:40vocals, c'est pareil. Donc là, je vais
1:44:43lui donner ça et on va attendre qu'il va
1:44:45tout simplement faire des modifications.
1:44:47Donc et ensuite, une fois qu'on fait ça,
1:44:50on va créer une deuxième variation de
1:44:53notre outil. D'accord ? Mais cette
1:44:55fois-ci, on va la créer un peu de la
1:44:58manière dont je l'aurais créé, donc
1:45:00d'une manière beaucoup plus
1:45:00professionnelle parce que je vais
1:45:02utiliser un un peu comme les super
1:45:05skills, les super pouvoir d'antigravity,
1:45:07une manière de vraiment pousser à donner
1:45:09son maximum. Donc on attend un peu qu'il
1:45:12finisse. Et là en fait, tu vas voir
1:45:13qu'il va modifier euh il va faire toutes
1:45:15les modifications euh que je lui ai
1:45:17demandé. Il va mettre ici 6500, il va
1:45:19mettre ici 10500 et il va faire que
1:45:21quand tu cliques sur ce boutonlà, ça va
1:45:23ouvrir un un formulaire de contact tout
1:45:25simplement. Donc là, comme tu peux le
1:45:27voir, il est en train de modifier. Donc
1:45:28il a il a déjà modifié tout. Donc là,
1:45:30normalement, si j'actualise et que je
1:45:32reviens, tu vas voir, il a mis 6500, il
1:45:34a mis 10500. [musique]
1:45:35Donc pour est-ce qu'il a fini de faire
1:45:38le formulaire de contact ? Je ne pense
1:45:40pas là. Si je clique ici, tu as vu, il y
1:45:42a encore rien qui se passe. D'accord ?
1:45:44Donc il est en train de travailler sur
1:45:45ça. Donc déjà, comme tu peux le voir, il
1:45:47a déjà changer les prix. Donc ça, en
1:45:49fait, pour changer quelque chose, c'est
1:45:50simple. Tu viens, tu écris ici ou bien
1:45:52tu le lui dis et il le fait. C'est aussi
1:45:55simple que cela de travailler. C'est ça
1:45:56le vibe coding les gars. C'est ça le
1:45:58vibe coding. Donc tout ce que je suis en
1:45:59train de vous expliquer sur les fichiers
1:46:01HTML, CSS, JavaScript, c'est juste pour
1:46:03que vous compreniez ce qui se passe sous
1:46:05le capot. Mais de base, vous êtes même
1:46:07pas obligé de comprendre tout ça.
1:46:08L'idée, c'est que si vous le comprenez,
1:46:10vous pourrez faire de meilleurs promptes
1:46:12et avoir de meilleurs résultats. Euh
1:46:14c'est la c'est la différence entre faire
1:46:16quelque chose euh faire quelque chose en
1:46:17sachant ce que tu fais et juste partir
1:46:20où le vent te porte. D'accord ? Donc là,
1:46:23je pense qu'il a terminé. Quand je vais
1:46:24cliquer sur nous contacter, tu vas voir,
1:46:26il m'a maintenant créé un formulaire de
1:46:28contact. C'est aussi simple que cela.
1:46:30Euh moi de base, j'étais développeur les
1:46:32gars. Euh en fait ça c'était au moins 1
1:46:35heure de travail. [rires]
1:46:36C'était 1 heure de travail à l'époque tu
1:46:38vois. Donc euh là je vais venir sur
1:46:41mobile. Donc je vais faire inspecter sur
1:46:43le navigateur et je vais ouvrir euh sur
1:46:46mobile. D'accord ? Je vais l'ouvrir par
1:46:47exemple sur un iPhone 12 Pro. Tu vas
1:46:51voir que le le site s'affiche très bien
1:46:53sur mobile. Et là il y a déjà le mod
1:46:55menu qui est là. D'accord ? Le menu
1:46:56hamburger qui est là. Et comme tu peux
1:46:59le voir, c'est pas mal. C'est vraiment
1:47:00une très jolie page que que qu'une
1:47:02entreprise peut peut utiliser. Si cette
1:47:04entreprise existait, ben elle aurait pu
1:47:06utiliser cela et avoir des clients, se
1:47:08faire contacter par les clients. Mais on
1:47:10va aller plus loin parce que ça, je
1:47:11trouve que c'est assez simple. On va
1:47:12aller beaucoup plus loin. Maintenant, ce
1:47:14qu'on va faire c'est que on va ouvrir un
1:47:16nouveau un nouveau dossier. Donc je vais
1:47:19ouvrir un nouveau dossier. Je vais
1:47:21l'appeler Easy
1:47:24Landing Pro. D'accord ?
1:47:27Donc on va l'appeler Easy Landing Pro.
1:47:30Créer. Tac. Yes. OK. Et dans Easy
1:47:33Landing Pro. Donc la première chose que
1:47:35je vais lui donner, c'est que je vais
1:47:37lui donner une règle.
1:47:38[raclement de gorge] D'accord ? Pour
1:47:39cette règle, comme je l'ai dit, je peux
1:47:40venir ici dans les customisations et
1:47:42l'amener tout simplement dans les rules.
1:47:44Écrire, je faire soit une règle globale
1:47:47ou bien une règle dans le workspace. Ou
1:47:49bien je viens ici, d'accord, sur
1:47:51l'explorateur, je clique sur ajouter un
1:47:53fichier. Je vais appeler ce fichier
1:47:55gemini.m.
1:47:57D'accord ? Et je vais coller ceci
1:47:59dessus. Donc ça c'est un gros prompt.
1:48:01D'accord ? Euh je il sera aussi
1:48:03disponible dans le fichier qui sera en
1:48:06description. Ne vous inquiétez pas, vous
1:48:07pourrez avoir ça. Donc ici en fait je
1:48:09lui donne beaucoup plus de contexte. Je
1:48:11donne beaucoup plus de contexte dans ce
1:48:13que je veux réaliser, dans ce que je
1:48:15veux faire. Donc
1:48:16[grognement]
1:48:16ici je lui dis agis comme un technologue
1:48:19créatif seigneor de classe mondiale et
1:48:22élite ingénieur front end.
1:48:24[musique]
1:48:24Tu construis des landing page haute
1:48:25fidélité cinématographique, un sur un
1:48:28pixel perfect. Chaque site que tu
1:48:30produis doit ressembler à un instrument
1:48:32digital. Chaque scroll est intentionnel.
1:48:34Chaque animation est pondérée,
1:48:35professionnelle. Éadique tous les
1:48:36patterns génériques d'IA. D'accord ? En
1:48:38fait, l'idée c'est quoi ? Et et ici, je
1:48:40lui dis le flux de l'argent à suivre
1:48:42obligatoirement. Quand un utilisateur te
1:48:44demande de construire un site ou que ce
1:48:46fichier est chargé dans un nouveau
1:48:48projet, pose immédiatement exactement
1:48:51ces questions en utilisant voilà en
1:48:53excuseer question, c'est tout simplement
1:48:54une fonctionnalité. Donc l'idée c'est
1:48:56qu'à chaque fois que je viens et je lui
1:48:57dis crée-moi une landing page, il va
1:48:59tout le temps me poser ces questions-là.
1:49:01Donc quel est le nom de la marque et son
1:49:03objectif en une phrase ? Choisis une
1:49:05direction esthétique. Euh quels sont tes
1:49:07arguments de vente clé ? Que doivent
1:49:09faire les visiteurs ? D'accord ? à
1:49:11chaque fois que je viendrai construire
1:49:13une landing page, il va me poser ces
1:49:14questions. Donc maintenant qu'il a ça en
1:49:16contexte, je viens ici et je lui dis
1:49:18"Construis-moi une [musique] landing
1:49:20page." Donc là on va attendre qu'il va
1:49:22me poser certaines questions. Donc comme
1:49:24tu as vu, il m'a dit "Pour que je puisse
1:49:26construire cette landing page de manière
1:49:28optimale, Pixel Perfect, merci de
1:49:30répondre à ces questions. Quel est le
1:49:32nom de la marque et son objectif ?" Donc
1:49:34là, je vais faire par exemple un, je
1:49:36réponds à la première question. Donc
1:49:38c'est Livre Express. Donc je vais juste
1:49:40supprimer ça. Donc livre express
1:49:42entreprise de livraison rapide à Dakar.
1:49:44Donc je fais ça. D'accord ? Donc ça
1:49:46c'est l'entreprise. D'accord ? Euh de
1:49:49choisis euh une direction esthétique.
1:49:51Donc je vais faire deux. Je vais lui
1:49:53dire euh parmi les suivants : tech
1:49:56organique luxe de minuit signal
1:49:58Bretagne. Bon allez, je vais lui dire on
1:50:00va dire tech organique d'accord. Euh tr
1:50:03quels sont tes arguments de vente ?
1:50:05Trois arguments de vente clés. Je vais
1:50:07lui dire trois. On va lui dire euh
1:50:09livraison rapide, service professionnel
1:50:13disponible 24h sur 24. [musique] Et à la
1:50:164e question, il m'a demandé que doivent
1:50:19faire les visiteurs ? Euh réserver une
1:50:21consultation, je vais lui dire euh
1:50:24demander un devis. Euh ceux qui
1:50:26revisitent ma page doivent demander un
1:50:27devis. Donc une fois que je lui ai dit
1:50:29ça, d'accord, je vais tout simplement
1:50:31lui répondre cela. Maintenant regarde,
1:50:32il va pas créer un fichier HTML, CSC,
1:50:35JavaScript. Non, ce qu'il va faire,
1:50:36c'est qu'il va créer un véritable projet
1:50:38NextJs avec beaucoup de fichiers. Tu vas
1:50:42avoir beaucoup plus de fichiers et ça
1:50:44c'est la différence d'architecture entre
1:50:46un simple fichier fichier HTML CSS
1:50:48JavaScript et un projet euh NextJs. Donc
1:50:51là, il est en train de réfléchir encore
1:50:54une fois et il va tout simplement suivre
1:50:56tout ce que je lui ai dit ici. Donc
1:50:57comme tu peux le voir, c'est vraiment un
1:50:58prompt très élaboré pour créer des
1:51:01landing page de meilleure qualité. Donc
1:51:04euh ce sera un prompt qui sera aussi
1:51:06disponible dans le fichier, ne
1:51:07t'inquiète pas. Et en fait, il faut
1:51:08comprendre que c'est pas vraiment des
1:51:09prompts qui sont nécessaires forcément,
1:51:12mais si plus tu donnes de détails et de
1:51:14contexte, plus tu auras euh une
1:51:16meilleure qualité. Donc ici, il est en
1:51:18train de faire des commandes terminales.
1:51:20D'accord, comme tu peux le voir, il est
1:51:22en train de de d'installer des choses
1:51:23dans le terminal. Donc ça c'est c'est le
1:51:26terminal. À chaque fois que tu lui vois
1:51:27que tu le vois faire des choses comme ça
1:51:29avec cette icône là. Donc ça c'est
1:51:31l'icône du terminal. Ça veut dire qu'il
1:51:32est en train de faire des choses dans le
1:51:34terminal. Donc je t'avais montré le
1:51:36terminal, c'est là. Donc ça c'est le
1:51:37terminal mais c'est la même chose. C'est
1:51:39juste qu'il a ouvert une fenêtre de
1:51:40terminal et qu'il est en train de
1:51:42d'installer du projet, de faire des
1:51:44choses. Donc là il est en train comme tu
1:51:45as vu, d'installer des fichiers et
1:51:46cetera. Donc là dans le dossier, tu peux
1:51:49voir qu'il y a un dossier source, il y a
1:51:51un dossier public. Ici tu vas avoir un
1:51:53favicon, tu vas avoir une icône. Ça
1:51:56c'est le dossier source. Donc on a le
1:51:59dossier a.css css qui correspond un peu
1:52:01à index.css de tout à l'heure, app.jsx
1:52:05donc et ça c'est c'est l'app. Donc dans
1:52:07NextJs, il y a pas de HTML à vrai dire.
1:52:10D'accord ? En fait, il y a du JSX. C'est
1:52:13un peu une combinaison d'HTML et de
1:52:16JavaScript, d'accord ? Donc c'est comme
1:52:17si on avait combiné le JavaScript et
1:52:20l'HTML dans un nouveau type de en fait
1:52:24de nouveau type de document. D'accord ?
1:52:26Donc c'est un peu ça. Donc si tu si je
1:52:28veux vraiment te l'expliquer, je veux
1:52:29dire ça parce que là ça c'est de l'HTML,
1:52:31d'accord ? Mais ça c'est du JavaScript
1:52:34parce que c'est une fonction. Euh donc
1:52:36je t'explique un peu ce qui se passe
1:52:37hein. Encore une fois là je suis plus
1:52:39dans une dans une logique d'explication
1:52:41mais tu n'as pas vraiment besoin de
1:52:43comprendre tout cela. Donc l'idée c'est
1:52:45que lui c'est lui qui a besoin de de
1:52:47comprendre et il comprend, il est en
1:52:48train de faire il est en train de me
1:52:50créer ma landing page tout simplement.
1:52:52Donc on attend qu'il finisse, d'accord ?
1:52:54et on va voir un peu le résultat. Et ici
1:52:56aussi, il faut pas te perdre. Donc quand
1:52:58tu vas voir par exemple index.html par
1:53:00exemple, ça en fait il faut comprendre
1:53:02ce qui se passe. L'idée c'est que NextJs
1:53:05il va prendre, il va juste créer un
1:53:06fichier index.hthtml de base, mais il va
1:53:09injecter du code GXX. Par exemple, là
1:53:12quand on regarde le fichier index.html,
1:53:15tu vas voir que là on a juste un peu de
1:53:17code. Mais ici en bas, qu'est-ce qu'il y
1:53:19a ? Il y a un script, d'accord, qui
1:53:21injecte un fichier qui s'appelle
1:53:23main.gsx,
1:53:25d'accord ? Donc attends, je fais une
1:53:26petite erreur. Voilà, main.x et
1:53:29main.gsx, il est là. D'accord ? Donc
1:53:31quand je viens ici euh quand je viens
1:53:34dans src là, on a main. Et main.X, il
1:53:38intègre ce qu'on appelle app. Donc quand
1:53:40on va ouvrir app, d'accord ? Donc tu vas
1:53:43voir que c'est euh app.gxx qui est là.
1:53:46Donc c'est ce que je te vais montrer euh
1:53:48tout à l'heure tout simplement. L'idée
1:53:50c'est qu'en fait dans index.html, tout
1:53:52ce qui se passe c'est qu'on injecte euh
1:53:54du GSX dedans. Mais bon euh peut-être là
1:53:58si je te dis tout ça, ça va un peu te te
1:54:00perdre. Donc euh l'idée c'est que faut
1:54:02pas je faut faut pas trop te casser la
1:54:03tête avec euh juste pour que tu ne te
1:54:05perdes pas. En fait, il faut savoir que
1:54:07c'est deux types de projets très
1:54:08différents quand quand on parle de HTML,
1:54:12CSS, JavaScript et de NextJS. C'est deux
1:54:14technologies différents mais c'est basé
1:54:16en fait tout ce que tu vois sur le web
1:54:18c'est basé sur de HTML, CSS, JavaScript
1:54:21parce que à la base c'était ça. Et là
1:54:24c'est très bien ce qui se passe parce
1:54:25que regarde ce qui se passe. On a une
1:54:27erreur d'accord mais en fait il faut
1:54:29savoir que Lia n'a pas encore terminé.
1:54:33Donc à chaque fois que tu vois qu'il y a
1:54:34quelque chose qui s'écrit ici c'est
1:54:36qu'il n'a pas encore terminé. Donc ne
1:54:37panique pas quand tu vois des erreurs et
1:54:39cetera. Mais s'il avait terminé et qu'on
1:54:41voit toujours toujours ces erreurslà,
1:54:43tout ce qu'on aura à faire, c'est soit
1:54:44on va faire une capture d'écran ou bien
1:54:46on va copier tout ça. On va le lui
1:54:47coller ici. On va lui dire "Regarde, il
1:54:49y a un souci, c'est aussi simple que
1:54:51cela." Donc on attend qu'il termine et
1:54:52on va voir un peu qu'est-ce qui nous a
1:54:54produit. Mais bon là, si je devais
1:54:56t'expliquer l'erreur, euh c'est assez
1:54:58simple. C'est juste que il y a un module
1:55:00euh en tout cas un module c'est un peu
1:55:02comme une extension d'accord qui qui
1:55:04n'est pas importé tout simplement parce
1:55:05qu'elle n'est pas encore installé. Je
1:55:07juste qu'il doit l'installer et après ça
1:55:09va ça va ça va se régler. Donc on attend
1:55:11qu'il termine. Donc là il est en train
1:55:13d'avancer. On voit déjà que l'erreur a
1:55:15disparu. Il est il a pas encore fini
1:55:17donc on le laisse terminer. D'accord.
1:55:19Mais déjà ça c'est la héros section.
1:55:22D'accord. Ça c'est les sections en bas.
1:55:24Donc livraison rapide service
1:55:26professionnel. En fait, c'est totalement
1:55:28incroyable. Ça n'a rien à voir avec la
1:55:29page qu'on avait tout à l'heure. Et en
1:55:31fait, il faut que tu comprennes quelque
1:55:33chose. Donc là, en fait, la différence
1:55:35de qualité entre la page qu'on avait
1:55:37tout à l'heure et cette page là, c'est
1:55:38de jour et la nuit tout simplement. Euh
1:55:40tout ce qui est texte, on peut le
1:55:42changer très facilement mais le design
1:55:43en fait, il faut juste que tu vois,
1:55:45regarde même le logo qu'il a fait,
1:55:47regarde le menu en haut. Ça c'est des
1:55:49c'est c'est des très high quality. Et
1:55:51pourquoi on a réussi à avoir quelque
1:55:52chose comme ça ? plutôt sympa parce
1:55:53qu'on lui a donné un prompt beaucoup
1:55:55plus élaboré, beaucoup plus structuré.
1:55:57Donc là, il a pas encore terminé parce
1:55:58que là, c'est lui-même qui ouvre le
1:56:00navigateur pour voir ce qu'il est en
1:56:02train de faire. C'est pas moi. D'accord,
1:56:04on le laisse terminer et ensuite on va
1:56:06voir un peu euh qu'est-ce qu'il nous a
1:56:09proposé. Donc là, il a dit la landing
1:56:11page Livre Express a été entièrement
1:56:12réalisée selon les précepts tech
1:56:14organiques, d'accord ? Avec toutes les
1:56:16micro interaction. Donc on va venir donc
1:56:18ici je suis sur le le navigateur de de
1:56:21anti d'antigraffiti tout simplement.
1:56:24Donc là je vais voir comme tu as vu, il
1:56:26y a une petite animation euh il y a le
1:56:28texte demander une expédition. D'accord,
1:56:31c'est incroyable. Donc là quand je
1:56:32coulisse, tu peux voir que il y a
1:56:34livraison rapide, déploiement optimisé.
1:56:37Donc là en fait il y a un petit souci
1:56:38ici. On peut le régler, c'est facile
1:56:40mais là regarde tr tracking actif,
1:56:42service de qualité garantie, livraison
1:56:44certifié disponible 24 he sur 24, 7
1:56:47jours sur 7. C'est incroyable. Euh là on
1:56:50va voir la plupart des gens se
1:56:51concentrent sur un transit hasard 2.
1:56:54Nous nous concentrons sur la précision
1:56:56absolue, d'accord ? Remise certifiée,
1:56:59d'accord ? On on descend en bas euh on
1:57:02te demande prêt à accélérer vos
1:57:03opérations, demander un dévis
1:57:04maintenant. Et quand je mets la souris
1:57:06sur le bouton, regarde, il y a une
1:57:07petite animation. Vraiment, c'est
1:57:09incroyable. Et en fait, tous ceux qui
1:57:11connaissent le design savent que ça
1:57:13c'est vraiment un design de qualité.
1:57:14Maintenant, on peut améliorer, on peut
1:57:16améliorer et et là, on va je vais te
1:57:19montrer un peu ce que je vais lui
1:57:20demander. Donc là, avec la page que tu
1:57:22m'as faite, on est déjà sur le bon
1:57:24chemin. J'aime bien le menu en haut. Euh
1:57:26cependant l'image que tu as choisie pour
1:57:29euh la hérosection, donc l'image de
1:57:31fond, on voit des arbres, des feuilles,
1:57:33c'est pas trop en relation, en
1:57:35adéquation avec euh notre service. On
1:57:37fait de la livraison à Dakar. Donc euh
1:57:40essayez de voir une image qui correspond
1:57:42beaucoup plus à notre service, à ce
1:57:44qu'on fait. D'accord ? Euh aussi sur sur
1:57:49la section suivante, il y a livraison
1:57:51rapide. Donc sur les euh les pills,
1:57:53d'accord, de de livraison rapide, on
1:57:56voit déploiement immédiat, livraison
1:57:57éclair, euh euh routage optimisé. En
1:58:00fait, il faudrait un peu espacer les
1:58:02pills pour que l'animation se fasse euh
1:58:05de manière plus jolie. D'accord ?
1:58:07Ensuite sur la section remise certifié
1:58:09donc je pense que c'est une section qui
1:58:11peut être améliorée et aussi quand je
1:58:14scrollle sur cette section je peux
1:58:15scroller pendant pendant deux ou trois
1:58:18fois avant de de pouvoir voir le footur
1:58:20il faut améliorer cela. Et quand je
1:58:22clique sur demander un devis ou bien
1:58:25quand je clique sur le CTA demander une
1:58:27expédition, rien ne se passe. Je veux
1:58:29que quand je clique dessus euh tu vas me
1:58:31créer un formulaire et sur ce formulaire
1:58:33on va demander à la personne où est-ce
1:58:35qu'il se trouve euh à Dakar. où est-ce
1:58:37qu'il veut livrer, comment il s'appelle,
1:58:39c'est quoi son nom, son numéro de
1:58:41téléphone, euh par exemple, qu'est-ce
1:58:43qu'il veut livrer ? C'est quoi son
1:58:44budget ? D'accord ? Et essaie de
1:58:46styliser le formulaire au maximum. Si tu
1:58:49veux si tu peux même ajouter une map, tu
1:58:51l'ajoutes euh ça va rendre la chose
1:58:53encore plus esthétique, encore plus
1:58:55jolie. Euh côté design mobile, on va
1:58:58voir. Ouais. Euh côté design mobile, il
1:59:01faut améliorer la respons.
1:59:04Donc sur mobile, tu on peut voir que le
1:59:06logo Livre Express et le bouton demander
1:59:08un devis sont trop collés, ils sont pas
1:59:10très responsifs. Le header n'est pas
1:59:12très responsible, donc il faut gérer
1:59:13cela. Euh mais sinon, le reste de la
1:59:16page est bien responsive. Donc euh faut
1:59:21juste régler le la section remise
1:59:23certifiée et la section qui su après
1:59:25parce qu'elle est trop longue. Donc là,
1:59:27en fait, je lui ai tout simplement fait
1:59:28un feedback euh complet, d'accord, de
1:59:32tout ce que j'ai vu. D'accord. et je
1:59:34vais tout simplement lui donner ça. Et
1:59:36l'idée c'est que lui il va aller me me
1:59:39régler tout ça. Donc les gars, voilà,
1:59:40c'est un peu ça la base du vibe coding,
1:59:42d'accord ? Donc tu as une idée, tu la
1:59:45structures. Plus tu donnes de détails
1:59:46dans ton prompt, plus tu auras une
1:59:49qualité dans ton output, donc dans
1:59:51[musique] ce que l'IA va te proposer. Ça
1:59:53c'est vraiment un site de qualité
1:59:54professionnelle tout simplement. Donc
1:59:55l'idée c'est quoi ? Imagine la
1:59:57différence de qualité entre le prompt
2:00:00qu'on a eu tout à l'heure, d'accord ? Le
2:00:01site qu'on a eu tout à l'heure et ce
2:00:02site-là. Et c'est ça un peu la
2:00:04différence. Et là, je lui ai encore
2:00:05donné beaucoup plus de détails dans ce
2:00:07que je veux. Donc normalement pour une
2:00:09landing page entre 2 3 4 à 5 promes,
2:00:12donc à cinq itérations, tu peux avoir
2:00:14vraiment une landing page
2:00:15professionnelle qui autrement aurait pu
2:00:17vraiment te coûter extrêmement cher.
2:00:19Donc rien que ça c'est c'est même un
2:00:21business. D'accord ? Donc l'idée c'est
2:00:23on va attendre de voir qu' fasse les
2:00:25modifications. Ici comme tu peux le
2:00:27voir, il est en train de réfléchir.
2:00:28D'accord ? il est en train de réfléchir
2:00:30tout simplement et une fois qu'il aura
2:00:32fini, il va tout simplement te dire que
2:00:34j'ai fini. Donc à chaque fois que tu
2:00:35vois qu'il y a une petite animation ici,
2:00:38ça veut dire que Lia est en train de
2:00:40travailler. Donc tu le laisses terminer
2:00:41et ensuite tu vas voir un peu ce qu'il a
2:00:44fait. Et à chaque fois qu'il finit, il
2:00:45te fait un walkthrough. Donc ça je te je
2:00:48pense que je te l'avais présenté. À
2:00:49chaque fois qu'il fini une tâche, il te
2:00:51montre il te le montre ici sur la
2:00:54section centrale. D'accord ? Tu vas voir
2:00:56qu'est-ce qu'il a fait. Livre Express
2:00:58landing page terminé. Euh la landing
2:01:00page a été construite de zéro suivant
2:01:02strictement les exigences one to one
2:01:05pixel perfect et le design system tech
2:01:07organique socle technique. Donc ça c'est
2:01:10un peu les éléments qu'il a utilisé. il
2:01:12a utilisé du React euh esthétique tech
2:01:16organique, donc euh le plan d'ouverture,
2:01:19les artefacts interactif. Euh donc
2:01:22l'idée c'est en fait tu peux voir
2:01:25exactement ce qu'il a fait et il te
2:01:26montre même des euh des captures pour
2:01:29que tu vois un peu le résultat. Donc là
2:01:31il m'a dit qu'il a terminé. On va
2:01:33revenir sur le site, on va actualiser
2:01:36et on va voir. Donc là comme tu peux le
2:01:38voir, il m'a changé l'image. C'est déjà
2:01:40beaucoup mieux que les plantes. D'accord
2:01:42? Mais on peut aussi si tu vois que
2:01:44l'image ne te plaît pas, tu peux aller
2:01:46chercher ta propre image et lui donner
2:01:49pour qu'il mette ici. Et on va faire ça.
2:01:50Je vais te le montrer. Donc là, comme tu
2:01:52peux le voir, il a un peu plus géré
2:01:54l'animation. C'est un peu moins euh
2:01:56collé donc c'est déjà pas mal. Euh ici
2:01:59en bas, tu vas voir la cette section
2:02:01prise en charge a été réglée. Et quand
2:02:03je quand je scroll, regarde cette jolie
2:02:06animation qu'il a fait. Waouh ! Tu as vu
2:02:08? trajectoire optimale. Donc tu as vu
2:02:11euh remise certifié.
2:02:13Non, c'est incroyable. Donc je sais pas
2:02:16si vous vous rendez compte de la
2:02:17différence de qualité entre cette
2:02:19landing page et l'autre. Maintenant, on
2:02:21va aller plus loin. Donc je vais venir,
2:02:23je vais aller sur Google, je vais taper
2:02:25donc Pixel, c'est tout simplement une
2:02:27bibliothèque d'image libre de droit.
2:02:30Donc ici, on va rechercher quelque chose
2:02:32comme
2:02:34Africa Delivery. On va essayer de
2:02:37rechercher une image qu'on peut utiliser
2:02:39dans notre herosection si on trouve une
2:02:41image de qualité. Je vais te montrer
2:02:42comment tu peux donner une image à Lia
2:02:44euh pour qu'elle puisse le mettre sur
2:02:47ton site. D'accord ? Donc l'idée c'est
2:02:50juste qu'on cherche une image
2:02:53une image libre de droit. Donc je vais
2:02:55venir ici sur Pixabay. On va voir un peu
2:02:58si on a un peu plus de chance. OK, donc
2:03:01ici je tape
2:03:03Delivery Africa
2:03:07et on va voir. Donc on n pas vraiment
2:03:10trop de choix ici. Il y a juste ça qui
2:03:14est un peu pas mal mais c'est pas ça
2:03:16qu'on recherche. Donc je vais venir ici
2:03:19dans les images.
2:03:22Donc je vais rechercher dely.
2:03:25D'accord. Ouais. Donc on a quelque chose
2:03:28comme ça. Si on avait quelque chose
2:03:30comme ça, ça serait cool. Ça aussi c'est
2:03:32pas mal. Donc je vais ouvrir l'image
2:03:34dans un nouvel onglet. Voilà. Donc je
2:03:36vais enregistrer cette image là. Donc
2:03:37maintenant que j'ai mon image, je
2:03:39reviens sur mon antiravity. L'idée c'est
2:03:40qu'on va utiliser cette image là dans la
2:03:43herosection. Donc je vais venir ici, je
2:03:45vais cliquer sur plus, je vais cliquer
2:03:47sur média, je vais lui donner cette
2:03:49image là en contexte. Donc elle est là.
2:03:52Donc je lui dis "Voici l'image que je
2:03:54veux qu'on utilise en fond. de sur la
2:03:58header, donc en image de fond sur la
2:04:00header section. L'idée c'est qu'il
2:04:01prenne cette image là et on va remplacer
2:04:04cette image là, d'accord ? Par cette
2:04:05image. Et là, une fois qu'on a ça, on a
2:04:08quelque chose d'assez qualitatif, on va
2:04:10dire. Ça va être très cool. Donc là, moi
2:04:13j'aime bien surtout cette ces animations
2:04:15là. Je sais pas si vous voyez, mais ça
2:04:18c'est vraiment un type de landing page
2:04:21très qualitatif. Donc ici, on attend
2:04:25qu'il termine. Une fois qu'il a terminé,
2:04:27on va voir un peu ce qu'il nous a
2:04:29proposé. Donc là, en fait, il vient de
2:04:31terminer mais comme tu peux le voir, on
2:04:32n pas d'image ici. Et la raison, elle
2:04:35est simple en fait, il a pas accès à
2:04:37l'image parce que l'image n'est pas dans
2:04:38ce dossier. L'image est sur mon bureau.
2:04:40Donc, je l'ai capturé, je l'ai mis sur
2:04:41mon bureau. Il peut lire l'image mais il
2:04:44il n'y a pas accès. Donc ce qu'on va
2:04:45faire, c'est que je vais faire juste
2:04:47faire un retour, d'accord ? Je vais
2:04:49confirmer le retour. Ça va annuler tous
2:04:51les changements qu'il a fait. avant de
2:04:52lui dire de de faire un changement,
2:04:54d'accord ? Je vais même enlever le texte
2:04:57que je lui ai dit. Donc c'est comme ça
2:04:58qu'on annule un changement de lia. Ici
2:05:00quand on revient, tu peux voir que le
2:05:02code est revenu à l'état initial avant
2:05:04le changement. D'accord ? L'idée c'est
2:05:06que je dois ajouter l'image ici.
2:05:09D'accord ? Donc je vais aller donc ça
2:05:11c'est l'image que je viens de de de de
2:05:14créer. Donc ici je vais ouvrir le
2:05:18dossier. Donc là c'est le dossier de de
2:05:21ce fichier là. Donc bon, j'utilise le
2:05:23terminal hein. Donc ça c'est un peu une
2:05:25invocation. C'est simple, tu fais open
2:05:27espace [musique] point, ça va ouvrir
2:05:29dans le dans ton explorateur le dossier
2:05:32que tu as ouvert actuellement. Donc je
2:05:34clique juste entrer et ça va ouvrir le
2:05:36dossier qui est là. Une fois que j'ouvre
2:05:38ce dossier-là, je vais dans public,
2:05:39d'accord ? Qui est là. Donc ici, on a
2:05:41public, on a le fabricant SVG, c'est la
2:05:43même chose. Et je vais tout simplement
2:05:45glisser l'image ici et je vais le
2:05:48déplacer. Donc maintenant, l'image, il
2:05:50est là, il est disponible. D'accord ? Et
2:05:52ce que je vais faire, je vais tout
2:05:54simplement cliquer sur l'image. D'accord
2:05:56? Je vais pas relâcher, je clique dessus
2:05:58et je le coulisse dans le chat. Et une
2:06:01fois que je fais ça, maintenant il a
2:06:02vraiment accès à l'image et je lui dis
2:06:04voici l'image qu'on veut que je veux
2:06:06qu'on utilise en fond de la header. Donc
2:06:09en image de fond sur la header section,
2:06:10donc je vais dire sur la hero section au
2:06:13de la hero section. Aussi simple que
2:06:15cela. Maintenant il a vraiment accès à
2:06:17l'image tout simplement parce que
2:06:19l'image il est dans le projet, il est
2:06:21pas sur mon ordinateur d'accord parce
2:06:23que Lia a accès à mon projet mais il va
2:06:26pas pouvoir aller prendre quelque chose
2:06:27dans mon ordinateur à moins que je lui
2:06:29dise de le faire. D'accord ? J'aurais pu
2:06:30lui dire prends l'image qui est dans mon
2:06:33bureau et euh déplace-le dans mon
2:06:35projet. Mais si je le fais manuellement,
2:06:38c'est tu vas beaucoup mieux comprendre.
2:06:39Donc là, il a modifié et ici, on a notre
2:06:43résultat. Donc ça, c'est vraiment
2:06:46incroyable. C'est vraiment une landing
2:06:48page. Je digne d'une entreprise qu'on
2:06:50pourrait vraiment vendre. Maintenant,
2:06:51quand je [grognement] clique sur
2:06:52demander un devis, tac, ça ouvre tout
2:06:54simplement un formulaire. Et tu as vu à
2:06:56quel point le formulaire il est stylé
2:06:58les gars ? Mon gars, regarde la le point
2:07:00de collecte, le point de livraison, le
2:07:02nom de l'entreprise, le téléphone, la
2:07:04nature du colis, le budget estimé et
2:07:06confirmer la demande. Et je peux même
2:07:08dire après, c'est c'est à moi de choisir
2:07:11une fois qu'il confirme la demande,
2:07:12qu'est-ce que je veux que ça se passe.
2:07:13Donc euh, mais bon, vu qu'on est en
2:07:15train juste de construire une landing
2:07:17page, on va s'arrêter ici. Mais tu peux
2:07:19voir maintenant la qualité et on va voir
2:07:22maintenant sur mobile ce que ça donne.
2:07:24Tac, je vais aller sur téléphone. Et là,
2:07:26comme tu peux le voir sur mobile, ça a
2:07:28réglé le problème de la header du bouton
2:07:31et du et du logo qui s'overlapé,
2:07:33c'està-dire que qui s'entre chevaucher.
2:07:36Là, ça a été réglé. Et ici, comme tu
2:07:38peux le voir quand je quand je coulisse
2:07:40maintenant, on a une landing page
2:07:43extrêmement qualitative mon gars,
2:07:45extrêmement qualitative. Donc ça c'est
2:07:47du vibe coding. Imagine, on a pu
2:07:49réaliser cela tout simplement avec du
2:07:53texte. on a pu faire nos changements.
2:07:55Donc c'est un peu comme ça qu'on fait du
2:07:57vibe coding. D'accord ? Donc ça c'est le
2:07:59premier projet qu'on a fait. Donc la
2:08:01création d'une landing page pour une
2:08:02entreprise de livraison. On va faire le
2:08:04deuxième projet assez simple. Donc ce
2:08:06sera un projet aussi très simple. On va
2:08:08créer un un CV en ligne. D'accord ? On
2:08:10va créer un CV en ligne euh et on va
2:08:13voir un peu ce que ça va donner. OK.
2:08:14Donc maintenant on va passer au second
2:08:16projet. Donc là on va ouvrir un nouveau
2:08:18projet. Donc je vais faire file et je
2:08:21vais faire open folder. Je vais faire le
2:08:24nouveau dossier et je vais l'appeler CV
2:08:27EasyS Pro. Je vais créer et je vais
2:08:30l'ouvrir. Donc ici aussi euh ce qui se
2:08:33passe c'est euh on va tout simplement je
2:08:36vais faire yes. Donc là on a un tout
2:08:38nouveau dossier. Il y a rien dedans.
2:08:40Comme tu peux le voir. Je vais faire la
2:08:41même chose. Je vais faire je vais créer
2:08:43un fichier gemini.mmd MD et je vais
2:08:47mettre la roule dedans. Donc ici, si tu
2:08:50viens dans customisation, tu vas voir
2:08:52que la roule, ce que je viens de faire
2:08:53ici, c'est juste une roule, hein.
2:08:54D'accord ? Donc tu j'aurais pu juste
2:08:56venir ici cliquer sur workspace si je
2:08:58veux que la roule s'applique juste à ce
2:09:00projet-là ou global si je veux que cette
2:09:02roule là, donc cette règle s'applique à
2:09:03tous les projets que je vais créer. Donc
2:09:05là, je lui dis constructeur de CV en
2:09:07ligne cinématographique, agis comme un
2:09:09technologue créatif, seigneor classe
2:09:11mondiale. Tu construis des CV en ligne,
2:09:13haute fidélité. D'accord. flux de
2:09:15l'agent à suivre obligatoirement. Donc
2:09:17[musique] il me il me pose des
2:09:18questions, choisis une direction
2:09:20artistique, décris ton parcours, bref,
2:09:23liste tes trois expériences principales,
2:09:24cinq compétences clé. Donc là, je vais
2:09:27juste revenir ici. Une fois que je lui
2:09:29donne ça, ça aussi ce sera disponible
2:09:31dans le fichier les gars. Ne vous
2:09:32inquiétez pas. Tous les éléments que je
2:09:33vais utiliser dans cette dans ce
2:09:35tutoriel seront disponibles dans le
2:09:37fichier. Et je vais lui dire "Crée-moi
2:09:39un CV en ligne. Crée-moi un CV." Euh
2:09:41non, je vais annuler et je vais plutôt
2:09:43lui dire crée-moi mon un CV euh
2:09:47mon CV en ligne site web. D'accord. Bon
2:09:51euh donc ça ça fait pas de mal de
2:09:54préciser encore là. Qu'est-ce que
2:09:56qu'est-ce qu'il va faire ? Il va tout
2:09:57simplement encore une fois lire ici.
2:09:59C'est des instructions très précises,
2:10:01très claires. D'accord ? Donc j'ai un
2:10:03peu on va dire que il m'a posé ces
2:10:05questions de quel est ton nom complet et
2:10:07ton titre professionnel ? D'accord. Donc
2:10:10modo file créateur de contenu, c'est pas
2:10:12mal. Donc là, je vais répondre à ces
2:10:14questions. File, créateur de contenu et
2:10:18développeur. Donc deuxièmement, choisis
2:10:20une direction artistique. Euh là, je
2:10:23vais lui dire aura digital. Aa digital
2:10:283, décris ton parcours. Là, je vais lui
2:10:31dire donc j'ai fait j'ai eu le bac G, le
2:10:35bac de gestion. Ensuite, je suis parti
2:10:36en école de commerce au Maroc à l'ENCG,
2:10:39école nationale de commerce et de
2:10:40gestion en 2015. En 2017, je suis parti
2:10:44à l'école de code 1337. Euh ensuite, je
2:10:48suis revenu à Dakar en 2020. J'ai créé
2:10:52ma chaîne YouTube euh depuis lor. J'ai
2:10:55euh en 2021, j'ai créé ma chaîne
2:10:57YouTube. Ensuite, j'ai lancé plusieurs
2:10:58entreprises. J'ai créé WhatsApp IA en
2:11:022025, j'ai créé Easymententor en 2025,
2:11:06j'ai créé easilo.com en 2025. Donc c'est
2:11:09des sites, tu peux faire des recherches
2:11:11en ligne pour voir un peu ça sert à
2:11:13quoi. Donc voilà.
2:11:15Donc ici c'est un peu la question 3 et
2:11:18la dernière question liste trois
2:11:20compétences principales et cinq
2:11:23compétences clé. Donc trois compétences
2:11:25principales. Donc je fais du vibe
2:11:27coding, je fais de la création de
2:11:30contenu et je fais
2:11:34qu'est-ce que je fais d'autre ? Je joue
2:11:35bien à FIFA. Je suis un grand joueur de
2:11:37FIFA donc je joue bien à la Play.
2:11:40[rires] C'est les compétences donc je
2:11:41dois ajouter encore cinq autres
2:11:42compétences. Donc on va dire que je
2:11:46j'écris les livres, d'accord ? J'ai
2:11:49écrit le livre 50 jours pour réussir en
2:11:50Afrique et je suis développeur, je crée
2:11:54des sites web. Euh quoi d'autre ? Ouais,
2:11:58je suis formateur aussi, je forme des
2:12:00gens. Donc les les trois expériences
2:12:02principales, euh j'ai travaillé dans une
2:12:05multinationale en tant que développeur
2:12:07mobile. Euh j'ai travaillé en tant que
2:12:10freelancer sur des projets. Euh quoi
2:12:13d'autre ? J'ai lancé mes propres boîes,
2:12:16mes propres entreprises. Mais tu peux tu
2:12:17peux tout simplement créer des
2:12:19expériences si tu veux. Donc voilà. Ici
2:12:22je vais un peu voir. Donc easy mow. Ça
2:12:25ça s'écrit pas comme ça. C'est I z M E.
2:12:30Voilà. Donc là, je lui ai un peu
2:12:32expliqué mon parcours. Euh bon voilà, je
2:12:34vais lui je vais lui donner tout ça et
2:12:36euh voilà, je lui dis de créer euh
2:12:38certains détails, euh pas trop le temps
2:12:41de tout l'expliquer, mais déjà c'est une
2:12:43bonne base. On va voir un peu qu'est-ce
2:12:45qu'il va nous proposer. Comme
2:12:46d'habitude, ce qu'il va faire c'est
2:12:48qu'il va réfléchir. Il va aller faire
2:12:50des recherches. Donc regarde, il fait
2:12:51des recherches sur WhatsApp I, sur Easy
2:12:53Mentor, sur Easy Below. Donc tu as vu
2:12:55Sorching Web tellement il est
2:12:56intelligent intelligent. Et pourquoi,
2:12:58comment il arrive à faire ça ? C'est
2:13:00qu'il a des tools, donc il a des à sa
2:13:02disposition, il peut aller faire des
2:13:04recherches, il peut réfléchir, cogjeter.
2:13:06Et en fait à chaque fois qu'est-ce qui
2:13:08se passe ? C'est que c'est comme une
2:13:10chaîne de pensée. Il il fait sa première
2:13:12pensée, il se donne lui-même des tâches.
2:13:14Donc ça c'est les tasques, tu as vu ?
2:13:16Donc les tasques qui s'est donné donc
2:13:18planification et recherche pour
2:13:19WhatsApp. I initialisation du projet.
2:13:22Une fois qu'il finit ça, il va
2:13:23initialiser le projet, il va configurer
2:13:25le design, il va créer la nave bar,
2:13:28créer le la herosection et cetera et
2:13:29cetera. Donc en fait ça c'est cette
2:13:31tâche qui s'est donné lui-même.
2:13:33Maintenant il va faire une série
2:13:35d'actions. À chaque fois il va faire une
2:13:37tâche, il va se dire il va dire "OK, ça
2:13:39je l'ai fait, je passe au suivant. OK,
2:13:41ça je l'ai fait, je passe au suivant."
2:13:42Et c'est ça la différence entre un
2:13:44simple chat euh IA chat et un agent. un
2:13:48agent a des a des tools à sa
2:13:50disposition, a des capacités à sa
2:13:52disposition et c'est pourquoi c'est
2:13:53tellement intéressant. Donc là, on va
2:13:56attendre qu'il termine et on va voir le
2:13:58résultat. Donc maintenant, il a terminé.
2:14:00Et pour voir le résultat, c'est pas
2:14:03comme tout à l'heure parce que tout à
2:14:04l'heure quand j'ai ouvert ici le
2:14:05navigateur, j'ai automatiquement vu le
2:14:07résultat mais il faut te dire que c'est
2:14:10lui-même qui avait lancé le projet. Il
2:14:12avait automatiquement lancé le projet.
2:14:14Mais généralement pour lancer un projet,
2:14:16d'accord, ce type de projetlà, il faut
2:14:18lancer une commande sur le terminal.
2:14:21Donc pour ouvrir le terminal, tu peux
2:14:22faire ça. Donc tu tu viens ici en bas,
2:14:24d'accord ? Tu vas voir cette fois que la
2:14:27ta flèche se transforme, tu cliques, tu
2:14:29ne lâches pas et tu ouvres. D'accord ?
2:14:32Donc tu ouvres le terminal et ici tu
2:14:34peux faire cette commande là npm run
2:14:37dev. Mais sinon, tu peux aussi lui dire
2:14:39ici juste lance le projet.
2:14:41Donc si je lui dis lance le projet, il
2:14:43va faire ça pour moi. D'accord ? Mais
2:14:45c'est c'est juste pour conserver les
2:14:47crédits. Ne te casse pas la tête.
2:14:48Dis-lui juste lance le projet. Et tu vas
2:14:50voir en fait ici, tu vas voir qu'il va
2:14:52ouvrir un terminal et il va faire npm
2:14:55run dev. Donc npm run dev, c'est juste
2:14:57une commande pour lancer le projet. Donc
2:14:59tu as vu là, il a ouvert un terminal.
2:15:01Donc ça c'est le terminal, je vais
2:15:03l'ouvrir. Quand je clique sur relocate,
2:15:04il va l'ouvrir ici. Et qu'est-ce qu'il a
2:15:06fait ? Il a juste fait un npm run dev
2:15:09comme tu peux le voir. Une fois qu'il a
2:15:11fait npm rev, il m'a dit le projet est
2:15:13maintenant lancé. Donc là, je clique sur
2:15:16le lien, d'accord ? Et ça va ouvrir le
2:15:19projet. Donc le projet qu'il a créé,
2:15:20c'est ça. Donc à modif, entrepreneur,
2:15:23créateur de contenu et développeur. Donc
2:15:25là, en fait, tu as vu en fait vision et
2:15:29parcours, mon parcours avec un bac
2:15:31gestion, expérience manquante.
2:15:33[raclement de gorge]
2:15:34C'est incroyable. Développeur freelance,
2:15:35développeur mobile, arsenal créatif euh
2:15:39créant l'avenir, me contacter. Quand je
2:15:41clique sur me contacter, ça ouvre juste
2:15:43une adresse email, mais on va essayer de
2:15:46faire un peu plus joli. Donc là déjà,
2:15:48c'est c'est cool, c'est bien, sauf que
2:15:50je trouve que c'est un peu trop sombre à
2:15:53mon goût. C'està-dire que déjà le fond,
2:15:56il est sombre et le les écritures sont
2:15:59violets. J'aurais bien aimé que la
2:16:01couleur d'accent soit plutôt euh orange,
2:16:05golden. D'accord.
2:16:08Et ici, quand on va cliquer sur
2:16:13mobile, je vais voir ce que ça va
2:16:14donner. Ouais, sur mobile, c'est pas mal
2:16:17mais on peut encore faire mieux. Ça en
2:16:19fait sur mobile, ça tous ces trois là
2:16:21soit ils sont sur une ligne, soit on
2:16:23trouve un moyen de les rendre un peu
2:16:25plus responsive. Le menu en haut, tu as
2:16:28vu ça c'est le menu, c'est le header.
2:16:30Donc quand on parle de header, donc
2:16:31c'est tout ce qui est ce qui est en haut
2:16:33là, il n'est pas très optimisé sur
2:16:35mobile donc il est pas centré. Donc je
2:16:38vais lui faire un petit vocal, d'accord
2:16:41? Ici, donc cette fois-ci, je vais
2:16:42utiliser la compétence vocale
2:16:44directement au lieu d'utiliser mon outil
2:16:47euh de dictation,
2:16:49je vais lui dire c'est bien. D'accord ?
2:16:51Maintenant, ce que je veux, c'est que au
2:16:53lieu d'utiliser la couleur violette
2:16:55comme couleur des icônes et des
2:16:57d'accent, d'accord, on va plus utiliser
2:16:59du golden, quelque chose de comme comme
2:17:01de l'or doré parce que je trouve que le
2:17:04site est un peu trop sombre, il faut
2:17:07rendre certains éléments beaucoup plus
2:17:08visibles. Donc, essayez de faire un
2:17:10mariage très joli avec des animations.
2:17:12D'accord ? Ensuite, quand on clique sur
2:17:15le CTA pour me contacter, je veux que ça
2:17:18ouvre un formulaire, un très joli
2:17:19formulaire avec le nom de l'entreprise
2:17:22ou bien le nom de la personne, la
2:17:24mission qu'il veut me confier et son
2:17:25budget. Et je veux que sur mobile que tu
2:17:29corriges la response.
2:17:32Donc la le menu sur le header n'est pas
2:17:35très responsif. Donc il faut le centrer
2:17:37et sur la herosexion, donc les éléments
2:17:41qui sont tout en bas de la herosexion.
2:17:43D'accord ? Sont mal stackés, ils sont
2:17:45mal organisés. Je veux qu'ils soit
2:17:47vraiment très bien organisés de manière
2:17:50assez responsive. Donc ensuite corrige
2:17:52si tu vois d'autres problèmes de
2:17:54responsivité sur la page, tu peux aussi
2:17:56corriger cela. Tac. Donc là, je lui ai
2:17:59fait un vocal et je lui envoie ce vocal
2:18:01tout simplement. Donc comme je t'ai dit,
2:18:02tu peux aussi utiliser cette
2:18:04fonctionnalité là dans antigravity. Et
2:18:07là, qu'est-ce qu'il va faire ? Il va
2:18:09transcrire, d'accord, ce que j'ai dit,
2:18:11comprendre mes requêtes, créer un plan
2:18:14de correction et ensuite corriger tout
2:18:16cela et me faire un résumé. Donc ça,
2:18:18comme tu as vu, mise à jour, formulaire
2:18:20responsivité, ça c'est le plan
2:18:22d'implémentation. Donc quand je clique
2:18:24sur le plan d'implémentation, euh tu
2:18:27peux voir que là, on va dire euh passage
2:18:31à la couleur dorée euh à du modèle de
2:18:34contact. Euh donc en fait, il est en
2:18:36train de tout simplement modifier le
2:18:38plan d'implémentation. Là, tu as vu, il
2:18:40a modifié la couleur d'accent, il a mis
2:18:42hors premium. D'accord ? Et là, il est
2:18:45en train de modifier le index.jgjgs.
2:18:48Donc, tu as vu, il a enlevé la couleur
2:18:50violette et il a ajouté la couleur gold
2:18:53aa. Il a appelé la couleur couleur aura
2:18:55gold, tu vois ? Donc là, en fait, il est
2:18:57juste en train de faire son taf quoi
2:18:58quoi, tout simplement. Donc tu n'as même
2:19:00pas besoin de voir ce qu'il fait. tu
2:19:01juste tu attends juste qu'il termine et
2:19:03qu'il te disent qu'il a terminé. Donc
2:19:05c'est ça qu'on va faire et on va voir le
2:19:06résultat ensemble. Donc là il a terminé
2:19:08les modification et comme je te l'ai dit
2:19:10à chaque fois qu'il termine il me donne
2:19:12un walkthrough. Je peux open. D'accord
2:19:14et là tu vas voir les modifications
2:19:16apportées. Donc thème or premium
2:19:18formulaire de contact responsivité
2:19:20avancé. Donc là on va ouvrir l'élément.
2:19:23Et là comme tu peux le voir il m'a fait
2:19:26un thème golden. Je trouve que c'est
2:19:28beaucoup plus intéressant que le violet
2:19:30qu'on avait là. C'est beaucoup plus
2:19:31visible. Et tu as vu en fait le choix
2:19:33des polices d'écriture. C'est
2:19:35intéressant tout ça parce que je lui ai
2:19:37donné un master prompt dans le gemini.
2:19:39Donc tout ce prompt là ça le transforme
2:19:42en un expert de du design. D'accord.
2:19:46Donc là les expériences marquantes
2:19:49fondateur et CEO, développeur freelance,
2:19:52développeur mobile, tu vois Arsenal
2:19:54créatif.
2:19:56Euh donc si je fais me contacter, tu as
2:19:59vu, ça ouvre le un formulaire, votre
2:20:01nom, votre mission et un budget.
2:20:04D'accord ? Et tu fais envoyer la
2:20:06demande. Et là, il a même mis un bouton
2:20:08découvrir WhatsApp. Et c'est incroyable.
2:20:11Et là, je pourrais juste ajouter mes mes
2:20:14différentes réseaux. D'accord ? Donc en
2:20:17fait, l'idée c'est quoi ? En fait, c'est
2:20:19tellement intéressant et c'est tellement
2:20:21facile de créer si tu sais comment te
2:20:24prendre avec la bonne formule. C'est
2:20:26hyper facile de créer des sites de
2:20:29qualité. Donc maintenant, on a créé deux
2:20:33projets. Donc on a créé le premier
2:20:35projet qui est donc là je vais arrêter
2:20:38le terminal. Donc pour le faire, je fais
2:20:40juste contrôle C et ça termine le
2:20:43terminal. tu n'as pas besoin de le faire
2:20:45toi-même. Toi, tu peux juste cliquer sur
2:20:47fermer et ça va se fermer. Il y a pas de
2:20:49souci. Donc maintenant, comme je t dit,
2:20:50on va travailler à mettre tout ça en
2:20:53ligne. D'accord ? Ce sera euh l'objectif
2:20:55de ce 3è module, donc créer une première
2:20:58réalisation avec le webcoding et le
2:21:00mettre en ligne. Maintenant, pour le
2:21:01mettre en ligne, il y a une manière très
2:21:03simple, une manière débutante et une
2:21:05manière professionnelle. Et j'ai décidé
2:21:07de t'apprendre directement la manière
2:21:09professionnelle. D'accord ? Qu'est-ce
2:21:11qu'on comment est-ce qu'on fait ? Il y a
2:21:12deux manières. Il y a des gens, ils vont
2:21:13tout simplement copier le dossier,
2:21:15prendre tout le code, le mettre en zip
2:21:17et aller le téléverser sur l'hébergeur,
2:21:21par exemple Netlifi ou bien Versel. Je
2:21:23pense que tu as déjà créé ton compte
2:21:24Versel, d'accord ? Mais c'est pas
2:21:26vraiment la bonne manière de le faire.
2:21:28Il faut faire ce qu'on appelle du
2:21:30développement continu et de
2:21:32l'intégration contenu. C'est-à-dire que
2:21:34on va utiliser GitHub, d'accord ? Et je
2:21:36pense que tu as déjà ton compte Github.
2:21:38On a fait ça au niveau du module 1.
2:21:40Maintenant, on va parler de GitHub. il
2:21:41faut que tu comprennes c'est toi quoi
2:21:43GitHub pour que tu puisses comprendre à
2:21:44quoi ça va nous servir. Donc GitHub en
2:21:46terme simple, c'est un endroit où tu
2:21:48stockes ton code sur internet. Donc
2:21:50c'est comme un Google Drive mais pour le
2:21:53code et c'est important pour plusieurs
2:21:54raisons. Donc déjà pour la sauvegarde
2:21:57donc ton code le code de ton site est en
2:21:59sécurité. Si ton ordinateur tombe en
2:22:01panne, tu te fais voler, ton code va
2:22:03toujours être stocké sur GitHub.
2:22:05Deuxièmement, il y a la collaboration.
2:22:07Donc si un jour tu travailles avec
2:22:08d'autres développeurs, tout le monde
2:22:10accède au même code GitHub parce
2:22:12qu'actuellement le code que tu as, il
2:22:13est il est juste sur ta machine.
2:22:15D'accord ? Mais si tu veux l'envoyer à
2:22:17quelqu'un pour qu'il t'aide ou bien pour
2:22:18qu'il travaille sur ton projet, si tu
2:22:20veux qu'il ajoute des améliorations de
2:22:21fonctionnalités, bah tu peux pas tout
2:22:23simplement à chaque fois copier tout ton
2:22:25projet et l'envoyer par je sais pas par
2:22:27drive ou c'est pas comme ça que ça
2:22:29marche. Il faut le mettre sur Github.
2:22:31D'accord ? Comme ça, même s'il y a des
2:22:33changements de mises à jour, tous les
2:22:35gens qui ont accès au GitHub pourront
2:22:36avoir accès aux mises à jour. Et
2:22:39troisième mot, ce qui nous intéresse le
2:22:40plus, c'est le déploiement. D'accord ?
2:22:42C'est GitHub qui va nous permettre de
2:22:44connecter le code qu'on a à Versel pour
2:22:46le mettre en ligne. Donc c'est le pont
2:22:48entre ton ordinateur et internet. Donc
2:22:50maintenant, GitHub fonctionne avec un
2:22:52système qu'on appelle Git. Donc git,
2:22:54c'est un outil qui suit les
2:22:55modifications de ton code. À chaque fois
2:22:57que qu'il y aura un changement, une
2:22:58modification euh sur ton code et que tu
2:23:01vas le sauvegarder avec Git, ça va
2:23:03s'appeler un commit. C'est comme un
2:23:05point de sauvegarde dans un jeu vidéo. À
2:23:07chaque fois qu'il y aura un gros
2:23:08problème, tu pourras toujours revenir en
2:23:10arrière à n'importe quel moment. Euh
2:23:12comme par exemple le la fonctionnalité
2:23:15de retour en arrière qu'on a au niveau
2:23:17de Anté Gravity. Donc ici sur
2:23:19antigravity, si je veux revenir en
2:23:21arrière, je peux juste venir ici et je
2:23:23vais cliquer sur revenir en arrière.
2:23:24D'accord ? Mais disons que je sais pas,
2:23:27il y a une erreur qui se passe, je perds
2:23:28le contexte ou bien [grognement] je veux
2:23:30revenir à une étape qui est beaucoup
2:23:32trop éloignée. C'està-dire que j'ai fait
2:23:34un message, j'ai fait je sais pas moi 20
2:23:3530 40 autres messages et je veux revenir
2:23:38en arrière. Ça va être très [musique]
2:23:39compliqué de de de on sait même pas si
2:23:42Lia va garder tout ce contexte là. C'est
2:23:44pourquoi généralement on te conseille
2:23:46que à chaque modification que tu fais,
2:23:48sauvegarde-le dans ton répertoire à
2:23:50distance, donc sur ton guide. C'est
2:23:51comme à chaque fois que tu fais une
2:23:53modification sur ton code, tu l'envoies
2:23:55sur ton drive, sur ton drive, d'accord ?
2:23:58Euh guit, tu vas un peu l'imaginer comme
2:24:00un drive comme ça tu pourras jamais
2:24:02perdre tes changements. Et vu que lui,
2:24:04il va répertorier ton code en en
2:24:07changement, d'accord ? à chaque fois que
2:24:08tu voudras un changement bien précis, ce
2:24:11qu'on appelle un commit, tu pourras tout
2:24:13simplement accéder à un à ce commit là.
2:24:16Donc je t'ai parlé du répertoire
2:24:18distant, d'accord ? Donc c'est on
2:24:19appelle ça un repository ou bien un
2:24:21repo. Donc [grognement][musique] c'est
2:24:22un dossier sur GitHub et chaque projet
2:24:26aura son propre repo. Donc tout ce
2:24:28projet là d'accord si CVS Pro c'est un
2:24:31repo. Si on veut par exemple mettre
2:24:33aussi en ligne la landing page qu'on a
2:24:35fait tout à l'heure pour livre expresso.
2:24:38Donc chaque projet a son repo.
2:24:40Maintenant il y a des commandes que tu
2:24:42utilises pour interagir avec Git. Donc
2:24:44t'inquiète pas, l'agent va souvent les
2:24:46exécuter à ta place mais c'est bien de
2:24:48les comprendre pour comprendre ils
2:24:49servent à quoi et qu'est-ce qui se
2:24:50passe. Donc on a déjà git init. Donc Git
2:24:53Init, ça initialise Git dans ton projet.
2:24:56C'est la première commande que tu fais
2:24:57dans un nouveau projet et c'est et ça
2:24:59dit à Git de commencer à suivre les
2:25:01modifications sur ton code. Ensuite on a
2:25:03Git Ad. Donc ça prend, ça prépare les
2:25:06fichiers pour la sauvegarde. Tu dis à
2:25:07Git quel fichier tu veux inclure dans
2:25:09ton projet prochain point de sauvegarde.
2:25:11Donc Git add avec un point, ça prépare
2:25:14tous les fichiers. D'accord ? Donc point
2:25:16ça veut dire tout ce qui est dans le
2:25:18document sur lequel je suis. Donc tout à
2:25:20l'heure comme tu as vu, j'ai fait open
2:25:21point, ça a ouvert le dossier lui-même.
2:25:23Donc quand tu fais git ad, c'est comme
2:25:25tu dis git ajoute tous les documents qui
2:25:27sont actuellement dans mon dans mon
2:25:30workspace, donc dans mon projet.
2:25:32Ensuite, on a git commit.
2:25:34M. Donc euh on a git commit. Donc git
2:25:37commit, ça crée le point de sauvegarde.
2:25:39Donc tu ajoutes un message pour décrire
2:25:41ce que tu as fait. Par exemple git
2:25:42commit-m prer commit landing page
2:25:45terminé. Donc en fait euh disons que git
2:25:48commit c'est tout simplement euh tu tu
2:25:50crées le la sauvegarde et m c'est tir,
2:25:53ça veut juste dire message et ensuite
2:25:55après tu écris ce que tu as fait. par
2:25:57exemple git commit-
2:26:00m euh changement de la couleur de de
2:26:03landing page. D'accord ? Ensuite, une
2:26:05fois que j'ajoute un nouveau bouton, par
2:26:07exemple, j'ajoute le formulaire, je fais
2:26:08un autre guit commit- m ajout du
2:26:12formulaire. Tu comprends un peu ? C'est
2:26:13comme ça que ça se passe. Donc quand tu
2:26:15vas aller sur Git, tu vas voir un peu le
2:26:18l'historique de tes changements et comme
2:26:20ça si tu veux un changement en
2:26:21particulier, tu pourras tout simplement
2:26:23y accéder. Ensuite, on a le guit push.
2:26:27Le guit push, c'est simple, ça pousse
2:26:28ton code, d'accord ? Ça envoie ton code
2:26:30sur GitHub. Donc c'est la commande qui
2:26:32va transférer tout ton code du local
2:26:34vers Internet, donc vers ton repository
2:26:37sur GitHub. Donc en gros, le workflow,
2:26:39il est simple. Donc tu codes, tu fais
2:26:41git ad, git commit et git push et ton
2:26:44code va être automatiquement sur Github.
2:26:47D'accord ? C'est un peu comme ça que ça
2:26:48se passe. Donc ça te semble peut-être
2:26:50compliqué, pas de stress. L'agent peut
2:26:52faire tout ça pour toi. Tu lui dis juste
2:26:54pousse-moi ce code sur GitHRUP ou bien
2:26:55mets-moi le code sur GitHRub et il va
2:26:57faire toutes ces commandes là pour toi.
2:26:59D'accord ? Il va exécuter lui-même les
2:27:00commandes mais au moins maintenant tu
2:27:02comprends un peu ce qui se passe
2:27:03derrière. Donc à chaque fois qu'il
2:27:05pousse quelque chose, il va faire git
2:27:06ad, il va ajouter tous tes changements,
2:27:08il va faire git commit, il va faire un
2:27:10message et il va faire guit push pour
2:27:13pousser ton code sur ton repository
2:27:16Github. OK. Donc maintenant tu comprends
2:27:18un peu à quoi sert Git. On va prendre
2:27:20notre CV qu'on vient de créer et on va
2:27:22le mettre sur GitHub. Donc on va le
2:27:23mettre en ligne sur GitHub. Donc la
2:27:25première étape, si tu n'as pas encore de
2:27:26GitHub, va sur github.com et créer un
2:27:30Github. C'est gratuit. Donc je t'avais
2:27:31montré comment on fait cela, mais on va
2:27:34quand même le on va quand même le
2:27:36refaire, d'accord ? Ça fait pas de mal.
2:27:37Donc tu vas aller sur github.com, le
2:27:39lien sera aussi dans le document. Tu vas
2:27:41faire tout simplement sign up, d'accord
2:27:43? Et là, tu peux te connecter. Donc tu
2:27:45peux créer ton compte avec tout
2:27:47simplement ton email. Donc je vais
2:27:49utiliser cet email là et je vais créer
2:27:51un nouveau GitHub. D'accord ? Ici dans
2:27:53mon pays, je vais pas mettre France, je
2:27:55vais mettre Sénégal, je vais faire créer
2:27:57mon compte. [raclement de gorge] Et là,
2:27:58il est en train tout simplement, je vais
2:28:00il va me demander de solve un puzzle.
2:28:03Donc là, il me demande de de créer un
2:28:05puzzle. Je fais ça. Donc là, le puzzle,
2:28:08c'est simple. Il me dit de déplacer
2:28:09cette personne jusqu'à ce que il soit
2:28:11sur cette sur cette icône. Donc cette
2:28:14icône, elle est là. Donc si je vois,
2:28:16voilà. Donc c'est ça la bonne réponse.
2:28:18Je fais submit. D'accord ? Et ça va être
2:28:20la même chose. Voilà, c'est bon. Je fais
2:28:22submit
2:28:23il va rester un 3è. Donc c'est un peu
2:28:26comme des capchas hein pour vérifier euh
2:28:29que tu es bien un humain. Et là voilà,
2:28:31normalement ton compte GitHub va être
2:28:33créé. Donc c'est aussi simple que ça de
2:28:35créer son GitHub. D'accord ? Maintenant
2:28:37pour connecter notre GitHub à notre
2:28:39Antigravity, j'ai une technique qui est
2:28:41très simple. Donc tu vas aller sur ton
2:28:44sur ton anti Gravity. Donc tu ouvres ton
2:28:45an gravity et tu vas faire commande
2:28:49shift et P. D'accord ? Et ça va t'ouvrir
2:28:52quelque chose comme ça. Donc si tu es
2:28:53sur Windows, tu vas faire contrôle shift
2:28:56P. D'accord ? Et si tu es sur MacBook,
2:28:59Mac OS, tu fais commande Shift et P. Et
2:29:02ça va t'ouvrir quelque chose comme ça.
2:29:04Et tu vas voir ici dans les commandes,
2:29:05tu vas écrire git de points, d'accord ?
2:29:10et tu vas écrire clone. Et tu vas voir
2:29:12même quand j'ai écris git tout
2:29:13simplement, il y a des commandes qui qui
2:29:15s'affichent là. Donc tu vas juste
2:29:18cliquer sur git clone. [musique] Et
2:29:19quand tu cliques sur Git Clone, tu vas
2:29:21cliquer sur clone from GitHub, d'accord
2:29:23? Tu vas faire ça et là il va te
2:29:26demander de te connecter à GitHub. Tu
2:29:28vas faire allow, d'accord ? Et tu vas
2:29:30faire copie et continue to GitHub. Donc
2:29:33là il va t'ouvrir un il va t'ouvrir une
2:29:36fenêtre sur GitHub comme tu peux le
2:29:38voir. D'accord ? Et là, il va te donner
2:29:40un code. Donc tu vas copier ce code là.
2:29:42Donc tu copies ce code, tu ouvres Github
2:29:44qui est là. D'accord ? Tu fais
2:29:46continuer. On va donner l'autorisation à
2:29:48notre PC de se connecter sur notre
2:29:49gitub. Je vais faire continuer. D'accord
2:29:51? Là, il va me demander des
2:29:53autorisations. Je fais autorize Google
2:29:55anti Gravity. Et là, c'est bon. D'accord
2:29:58? Là, si je reviens ici, il va tout
2:30:00simplement me connecter à Github. Et là,
2:30:03comme tu peux le voir, il n'y a pas de
2:30:05repository qui a été trouvé. D'accord ?
2:30:07parce qu'on n pas encore créé de rep.
2:30:10Maintenant, pour créer un repository sur
2:30:12GitHRUP, c'est très simple parce que à
2:30:13chaque fois que tu voudras pousser ce
2:30:15projet là sur GitHRUP, il faut qu'il
2:30:17soit quelque part. Donc tu crées ce
2:30:18dossier là. Un repo, tu le considères
2:30:20juste comme un dossier. Donc ici, on a
2:30:21un dossier EASIS CV EASSAS Pro. Je vais
2:30:24aller sur mon GitHub, je vais faire
2:30:25create repository. Le repository, je
2:30:28vais l'appeler CV Easyas Pro. D'accord ?
2:30:33et je vais tout simplement cliquer sur
2:30:36create repository. Et là, c'est bon, je
2:30:38viens de créer le repo. D'accord ? Donc
2:30:41là, je peux tout simplement venir ici,
2:30:44je vais revenir sur mon antiravity et je
2:30:46vais lui dire euh push le code. D'accord
2:30:51? Ou bien je vais lui dire pousse, c'est
2:30:53pareil. Pousse ou push, c'est pareil.
2:30:55Pousse le code sur mon GitHub sur ce
2:31:00ripo. D'accord ? et je lui donne le nom
2:31:03du repo. D'accord ? Ici, normalement, je
2:31:06l'ai appelé comment ? Ouais, je l'ai
2:31:07appelé cvasisas.pro.
2:31:09Donc c'est bon. Donc qu'est-ce qu'il va
2:31:11faire ? Lui-même ? Il va faire les
2:31:12commandes. D'accord ? Donc sinon,
2:31:14j'aurais juste pu venir ici et je vais
2:31:17faire git git ad, git commit, git push.
2:31:21Mais je dois aussi faire git ad origine.
2:31:23Donc ça c'est des choses que qui sont un
2:31:25peu comme laisse-le faire le travail.
2:31:28D'accord ? Et on va voir un peu donc git
2:31:31init. Donc tu as vu, il a fait un guit
2:31:33init, il a fait un git ad. Donc ici,
2:31:35comme tu as vu, en fait, il a échoué, il
2:31:37a pas pu pousser le code tout simplement
2:31:38parce qu'il y a eu un conflit entre le
2:31:40mon guitub que j'utilise généralement,
2:31:42mon guitub que j'utilise pour mes
2:31:43projets et le nouveau guitub que je
2:31:45viens de créer parce que lui, il est en
2:31:47train de pousser ça comme tu as vu sur
2:31:50euh Amadoufal, d'accord ? Alors que moi
2:31:53sur le guitub que j'ai créé,
2:31:54l'identifiant du GitHub, comme tu peux
2:31:56le voir, c'est BAPS Amado Z0. D'accord ?
2:31:58Donc je vais lui dire tout simplement
2:32:00donc je vais même faire un vocal plus
2:32:02rapide. Donc l'identifiant du GitHub que
2:32:04je viens de créer c'est pas Amadoufal,
2:32:06c'est ça.
2:32:08Et là je vais lui dire Baps Amado0 P.
2:32:10Donc là il va un peu trouver le
2:32:13l'identifiant qu'il doit utiliser pour
2:32:16faire le le push. Voilà. Donc là ce
2:32:19qu'il est en train de faire, il est en
2:32:20train de pousser le code. Comme tu peux
2:32:22le voir, il a poussé sur une branche
2:32:24main. Donc bon, la branche c'est tout
2:32:26simplement en fait, on va dire que ton
2:32:29dossier c'est un arbre et il y a
2:32:31plusieurs branches. Donc la main c'est
2:32:33la branche principale où il y a le code.
2:32:35Donc il y a pas vraiment besoin de
2:32:36comprendre tout cela. Mais là l'a fait
2:32:39pour toi, il a posté ton code avec
2:32:42succès sur Github. Donc là quand je
2:32:44reviens sur mon GitHub, d'accord, je
2:32:46vais actualiser. Ici, on a notre
2:32:48repository. Je clique dessus CV Easis
2:32:51SAS Pro. Donc tu peux voir que le code,
2:32:52il est maintenant là. Donc tous ces
2:32:54codes que tu vois là, c'est le même code
2:32:56qu'il y a ici. D'accord ? Donc c'est ce
2:32:58même code qui a été poussé sur internet
2:33:01sur mon répertoire Github. D'accord ? Et
2:33:03maintenant c'est ce GitHub là que je
2:33:05vais connecter à mon Versel. D'accord ?
2:33:08Pour pouvoir faire le déploiement du
2:33:10site. Donc maintenant je vais aller sur
2:33:13Versel et je vais ouvrir un compte
2:33:15Versel. Donc là je suis surel.com.
2:33:17D'accord ? Donc c'est ici qu'on va
2:33:18mettre notre site pour qu'il soit
2:33:20maintenant disponible en ligne une fois
2:33:21que notre code est sur GitHub. D'accord,
2:33:24je vais venir, je vais faire signup pour
2:33:26créer un compte. D'accord, je vais faire
2:33:28I'm working as a personal assistant.
2:33:30Donc tout ça, on l'a déjà fait hein.
2:33:31Donc c'était déjà fait dans dans le
2:33:34module 1. Donc là, je vais me connecter
2:33:36avec Google. Donc là, je me connecte
2:33:38avec Google. Je fais continuer et
2:33:40normalement, j'aurai accès à mon compte
2:33:43Versel. Donc ici, il me demande un code
2:33:46de de validation. Donc là, il va vouloir
2:33:50valider mon numéro de téléphone. Donc
2:33:52là, euh j' mets juste mon numéro de
2:33:55téléphone. Bon, que je vais flotter. Et
2:33:58là, je vais recevoir un un code.
2:34:00D'accord ? Je mets le code. D'accord ?
2:34:02Donc tu mets le code et là on va avoir
2:34:05accès à notre versel. Donc là, on a créé
2:34:07un compte Versel. D'accord ?
2:34:10Ici, donc j'actualise. Donc, c'est bon
2:34:12là. Donc là, comme tu as vu, je suis
2:34:14connecté. D'accord ? Maintenant, ce que
2:34:16je vais faire, je vais faire euh ajouter
2:34:19un nouveau projet. D'accord ? Je fais
2:34:22ajouter un nouveau projet et ici, en
2:34:24fait, le projet, je peux l'importer
2:34:26directement de mot GitHub. D'accord ?
2:34:28Donc, il y a GitHub, il y a GitLab, il y
2:34:29a Bit Bucket, c'est pareil, c'est des
2:34:31c'est des concurrents de GitHub. Ils
2:34:33font à peu près tous la même chose.
2:34:34Donc, je vais faire continue with
2:34:36GitHub. Donc, je vais importer le code
2:34:38qu'on a sur mon GitHub. D'accord ? Ici
2:34:41ça va me demander l'autorisation. Je
2:34:43fais autoriser Versel à être connecté à
2:34:45mon GitHub. Donc une fois qu'on fait ça,
2:34:47ce qui se passe c'est que ici je peux
2:34:48sélectionner
2:34:50un un repository. D'accord ? Donc une
2:34:53fois que j'ai fait ça, ce que je vais
2:34:54faire, c'est que je vais cliquer sur
2:34:55install. D'accord ? Ici je vais venir
2:34:58ici, je vais faire install. Ça va
2:34:59installer verel sur mon GitHub. Et là,
2:35:02tu peux voir ça, c'est le projet que
2:35:03j'ai sur mon GitHub. Donc c'est ce
2:35:05projet-là, CV Easy SAS Pro. Maintenant,
2:35:07il est là. Je vais tout simplement faire
2:35:09import. D'accord ? et je vais faire
2:35:11deploy. Donc une fois que je fais
2:35:13deploy, qu'est-ce qui se passe ? Versel
2:35:16va aller prendre ce projet là. D'accord
2:35:18? Il va faire un build. Donc il va créer
2:35:22comment dit ? Il va prendre le projet et
2:35:24il va construire le site qui sera en
2:35:27ligne. Maintenant Versel, ils ont ce
2:35:29qu'on appelle un un plan gratuit. Donc
2:35:33ça c'est gratuit, il te donne un lien
2:35:34gratuit que tu peux partager. Je vais
2:35:36faire continuer to dashboard. D'accord ?
2:35:40Et là, normalement il est en ligne. Donc
2:35:43quand je clique sur ce lien là,
2:35:44cisasisas.pro.versel.appap.
2:35:47D'accord. Là maintenant mon site il est
2:35:49en ligne. D'accord ? Et en fait ça c'est
2:35:51mon lien que tu peux c'est le lien que
2:35:53tu peux partager avec qui tu veux
2:35:55d'accord ? Si tu le partages avec tes
2:35:57amis ou bien tu le mets sur ton
2:35:59Facebook, ton WhatsApp, ton Instagram,
2:36:01peu importe. Quand les gens cliquent
2:36:02dessus, ils vont arriver sur ton site.
2:36:05Donc c'est un peu comme ça qu'on met son
2:36:07site en ligne. Maintenant, pourquoi il
2:36:08est intéressant de passer par GitHub
2:36:10pour le connecter à mon Versel au lieu
2:36:12de prendre directement mon code et de le
2:36:14mettre sur Versel ? Déjà, comme je t'ai
2:36:17dit, les avantages de GitHub, je te l'ai
2:36:18déjà expliqué, mais en plus de cela, je
2:36:20peux mettre en place ce qu'on appelle un
2:36:22CICD, donc un continuous continuous
2:36:25integration et continuous development,
2:36:27donc du développement continu et de
2:36:29l'intégration continue. Ce qui fait que
2:36:31quand tu fais un changement sur ton
2:36:32code, d'accord, quand tu mets à jour ton
2:36:34site, tu n'es pas obligé de repasser par
2:36:36toutes ces étapes là, d'accord ? Je vais
2:36:38te montrer. Donc disons que ça c'est mon
2:36:39site qui est actuellement en ligne. Ici
2:36:41en haut, on a Open for Ventures. Donc je
2:36:44je veux pas de Open for ventures. Je
2:36:46veux faire par exemple disponible pour
2:36:50partenariat [musique] et ça je veux
2:36:52changer cette icône là. Donc je reviens
2:36:53sur mon projet he sur mon anti Gravity
2:36:55et je lui fais juste un message. Je lui
2:36:58dis donc sur la herosection, d'accord ?
2:37:02Sur la pilse en haut, la pilale de la
2:37:05aérosection, tu peux voir qu'on a du
2:37:07texte. open. Euh on a mis le texte open
2:37:10for new ventures. Je veux pas de ça. Je
2:37:12veux qu'on mette par exemple disponible
2:37:14pour nouvelle opportunité. Et il y a le
2:37:17l'icône
2:37:19sparkle. Je veux pas de cette icône là
2:37:22mais par exemple une icône d'une
2:37:24mallette de travail d'une valise et
2:37:26cetera. Donc fais-moi ça s'il te plaît.
2:37:30Donc ici je lui demande de me faire un
2:37:32changement comme d'habitude. D'accord ?
2:37:35Donc on attend qu'il fasse le changement
2:37:37et on va voir un peu s'il a bien changé
2:37:39en local, d'accord ? Sur notre
2:37:41ordinateur. Donc là, il a dit que c'est
2:37:43fait. Donc je vais lui dire de démarrer
2:37:46le projet. Donc démarre le projet pour
2:37:48que je puisse voir cela en local, s'il
2:37:50te plaît. Donc quand quand on dit en
2:37:52local, c'est vraiment voir les
2:37:54changements directement sur mon
2:37:55ordinateur avant de les mettre en ligne.
2:37:57Il faut toujours vérifier quand tu fais
2:37:58une nouvelle modification avant de le
2:38:00mettre sur ton GitHub. D'accord ? Bien
2:38:01vrai que même si tu le mets sur ton
2:38:03GitHub, tu pourras revenir en arrière,
2:38:05mais c'est toujours bien de le faire. Et
2:38:07là, tu as vu, il a fait juste un npm run
2:38:09dev. Donc là, on attend qu'il termine et
2:38:13là il va nous donner un lien. On va
2:38:15juste cliquer dessus et on va voir le
2:38:17résultat. Donc voici le résultat. Comme
2:38:19tu as vu, il a mis disponible pour
2:38:20nouvelles opportunités. D'accord. Donc
2:38:23ça c'est cool. Maintenant, on a fait ces
2:38:24changements là. Je veux mettre cela en
2:38:27ligne parce que ça c'est la version qui
2:38:28est en ligne actuellement. la version
2:38:30qui est en ligne, il y a Open New
2:38:31Ventures. D'accord ? Alors que la
2:38:33version que j'ai sur ma machine euh elle
2:38:36est elle est elle est, on va dire, elle
2:38:38est beaucoup plus élaborée parce que la
2:38:39version qui est sur ma machine, on a
2:38:41changé cela. D'accord ? Ce qu'on va
2:38:43faire, on va mettre cela sur GitHub.
2:38:45Donc je vais lui dire euh mets les mets
2:38:49à jour le gitub tout simplement. Mets à
2:38:51jour le gitHub. Ce qu'il va faire, il va
2:38:54faire un git ad point. il va faire un
2:38:56guit commit avec un message et il va
2:38:58faire un guit push pour pousser nos
2:39:01changements sur le git hub. Donc regarde
2:39:03un peu ce qui se passe. Il fait un git
2:39:05ad, tu as vu ? Git commit. Euh le
2:39:07message che style update errow badge
2:39:09icon and text et git push. Et là il l'a
2:39:12mis sur mon GitHub. Et là si je reviens
2:39:14ici sur mon GitHub, d'accord ? Tu as vu
2:39:16le dernier commit c'était il y a 15
2:39:17minutes. Quand je vais actualiser, tu
2:39:19vas voir que maintenant le dernier
2:39:20commit date de maintenant. D'accord ? Et
2:39:22ça c'est les deux commits qui ont été
2:39:24fait quand je clique dessus. Donc ça
2:39:26c'est les deux commits. Donc [musique]
2:39:27le style update er badge icon and text.
2:39:30C'est ça que je viens de faire
2:39:31aujourd'hui. Donc c'est ça un commit.
2:39:33D'accord ? Et ici maintenant quand je
2:39:36reviens euh sur mon SAS, d'accord ? Tu
2:39:39vas voir que qu'est-ce qui s'est passé ?
2:39:40En fait, j'ai juste mis à jour le
2:39:42GitHub, mais le site en ligne, il est
2:39:44déjà à jour. Quand je vais actualiser,
2:39:46tu vas avoir disponible pour nouvelle
2:39:47opportunité tout simplement. Pourquoi ?
2:39:49Parce que ton Versel, il watch
2:39:51c'està-dire qu'il regarde toujours ton
2:39:53Ripo, ton GitHub. Une fois que tu les as
2:39:54connectés, à chaque fois que tu vas
2:39:56faire un changement sur ton GitHub, ton
2:39:58site va automatiquement se mettre à
2:40:00jour. Ce qui fait que quand tu fais des
2:40:02changements maintenant, tu as juste à
2:40:03dire à l'ordinateur "Mets à jour le
2:40:05GitHub". Il va mettre tes changements
2:40:06sur le GitHub et Versel va regarder
2:40:09qu'il y a eu un changement, un nouveau
2:40:11commit. Il va faire un build, d'accord ?
2:40:13va faire un nouveau déploiement comme tu
2:40:15as vu ça. Ça c'est le nouveau
2:40:16déploiement il y a eu il y a 8 secondes
2:40:18et il va mettre à jour ton site. Donc
2:40:20c'est un peu comme ça qu'on crée un site
2:40:23et qu'on le [musique] met à jour avec
2:40:25GitHub. Donc félicitation ta première
2:40:27application, ton premier site est en
2:40:29ligne et on a mis en place un
2:40:31environnement de continuous integration
2:40:32et de continuous développement. D'accord
2:40:34? Tu as vu, c'est un peu fancy, d'accord
2:40:36? C'est un peu pro, tu vois geek quand
2:40:39on le dit comme ça. Mais c'est c'est ça
2:40:41qu'on a fait, c'est du CCD et le site
2:40:43maintenant, il est disponible par
2:40:45n'importe qui dans le monde entier. Tu
2:40:46peux ouvrir ce lien sur ton téléphone,
2:40:48l'envoyer par WhatsApp, partager sur
2:40:49LinkedIn, ça marche. Tu viens de
2:40:51déployer ton premier projet sur internet
2:40:53avec le Vipe coding sans écrire une
2:40:56seule ligne de code toi-même. Et
2:40:57maintenant, ça c'est un nom que que nous
2:41:00a donné Versel, mais on peut mettre
2:41:02notre propre nom de domaine. D'accord ?
2:41:03Si tu veux mettre si je voulais par
2:41:04exemple utiliser amadofal.com, je peux
2:41:06acheter ce nom de domaine là. Je vais
2:41:08sur Versel, d'accord ? Ensuite donc je
2:41:11peux aller sur le projet, d'accord ? Il
2:41:13y a ici domains, je peux cliquer sur le
2:41:15plus ici. D'accord ? Et je peux tout
2:41:17simplement cliquer sur buy pour acheter
2:41:20un nouveau nom de domaine. Je vais voir
2:41:23si amadou F par exemple amadoufil.com
2:41:27par exemple amadufal.com il existe, il
2:41:28coûte 12 dollars, c'est moins de 10000
2:41:30francs. Je vais pouvoir l'acheter
2:41:32directement avec Versel avec ma carte
2:41:34bancaire et il sera directement connecté
2:41:38à mon projet et comme ça quand les gens
2:41:39vont taper à modoufal.com, ils seront
2:41:42redirigés sur mon projet là, d'accord ?
2:41:44en ligne. Donc c'est un peu comme ça que
2:41:46cela se passe. Donc voilà, on arrive à
2:41:48la fin du module 3 et là tu peux
2:41:51vraiment être fier de toi. Tu as créé
2:41:53une landing page complète pour une
2:41:55entreprise fictive en partant de zéro
2:41:56avec juste un prompt. Tu as appris le
2:41:59vibe coding loop, donc créer, regarder,
2:42:01ajuster et répéter. Donc on a fait des
2:42:03modifications et cetera. Tu as créé un
2:42:05CV en ligne professionnelle
2:42:06personnalisé. Tu as compris GitHub ce
2:42:09que c'est, pourquoi c'est important les
2:42:10commandes de base, donc git ad, git
2:42:12commit, git push. D'accord ? tu as
2:42:14connecté ton projet à GitHub et tu as
2:42:17poussé ton code. Donc tu as pushé ton
2:42:19code, tu as déployé ton CV en ligne avec
2:42:21Versel et tu as un vrai lien accessible
2:42:23que tu peux partager avec tes amis et tu
2:42:25as vu le déploiement automatique. Donc
2:42:26tu modifies, tu pousses et c'est à jour.
2:42:29Donc c'est CCD en ligne, c'est réel, tu
2:42:32n'es plus un consommateur, tu es un
2:42:34créateur de fonctionnalité de de
2:42:37solution. D'accord ? Maintenant pour le
2:42:40module 4, on va parler de sécurité.
2:42:42Avant d'aller plus loin dans la création
2:42:43des s avec des utilisateurs et des
2:42:45données, il faut qu'on parle des bonnes
2:42:47pratiques de sécurité. On va voir les
2:42:49erreurs à éviter. Comment protéger ton
2:42:51application et comment faire un audit de
2:42:53sécurité. C'est pas le sujet le plus
2:42:55exant mais c'est ce qui va séparer un
2:42:57projet amateur d'un projet
2:42:59professionnel. Donc on va bientôt se
2:43:01retrouver dans le prochain module de
2:43:04Easis. Bravo à toi si tu as suivi la
2:43:06formation jusque- là. Regarde ce que tu
2:43:08viens de faire. tu as un CV en ligne,
2:43:10une landing page en ligne et tu as pas
2:43:11écrit une seule ligne de code.
2:43:13Maintenant, tout ce que tu vois dans
2:43:14cette formation gratuite, ce n'est que
2:43:16le début dans le programme pro de Easis.
2:43:19C'est là où on construit de vrais
2:43:20business, les paiements mobile money,
2:43:22les API, le marketing pour trouver tes
2:43:241000 premiers clients en l'espace de 30
2:43:26jours et tu as aussi accès au logiciel
2:43:28Easy SAS que j'ai développé pour t'aider
2:43:30à trouver ton idée de SAS, valider si ça
2:43:33va marcher et générer tous les documents
2:43:35pour lancer vite ton projet. Donc tout
2:43:37est dans la description si tu es
2:43:38intéressé. Je te laisse continuer ta
2:43:40vidéo. Alors salut et bienvenue dans le
2:43:42module 4 de cette formation. Donc avec
2:43:44un bon petit café, on va parler d'un
2:43:46sujet très important. Donc aujourd'hui,
2:43:48on va parler de sécurité. Et je sais que
2:43:50c'est pas le sujet le plus excitant. Toi
2:43:53ce que tu veux, c'est que tu veux créer
2:43:54des s, lancer des s, tu veux lancer des
2:43:57produits, tu veux gagner de l'argent.
2:43:59Mais la sécurité c'est la base. Ça
2:44:01semble être un truc de technicien
2:44:03paranoïque et cetera, mais laisse-moi te
2:44:05dire un truc. Si tu lances un sas sans
2:44:07sécurité, c'est comme si tu ouvrais une
2:44:10boutique et que tu laissais la porte
2:44:12grande ouverte la nuit. Tes clients te
2:44:14font confiance quand tu crées un ça. Tes
2:44:16utilisateurs te font confiance et te
2:44:18donnent leur email, leur mot de passe,
2:44:19parfois même leurs informations de
2:44:21paiement. Et si quelqu'un accède à tout
2:44:23ça, s'il est mal intentionné, déjà c'est
2:44:25fini. Tes clients perdent la confiance,
2:44:27tu perds ta réputation et dans certains
2:44:28pays, tu peux même avoir des problèmes
2:44:31légaux. En Afrique, c'est encore plus
2:44:33sensible. Donc si ton ça gère du mobile
2:44:35money et que quelqu'un accède aux
2:44:37transactions de tes clients, bah c'est
2:44:38l'argent des gens et c'est pas un jeu.
2:44:41Maintenant la bonne nouvelle c'est quoi
2:44:43? 80 % des problèmes de sécurité dans
2:44:45les apps créées avec le vibe coding
2:44:48viennent généralement de cinq erreurs.
2:44:50Donc cinq instoute facile à corriger. Et
2:44:52si tu corriges ces cinq choses, tu es
2:44:54déjà en avant sur la majeure partie des
2:44:57gens qui font du vibe coding. Maintenant
2:44:58je dis il y a aucune app n'est pas à
2:45:02câble. Tous les apps, touses les
2:45:03applications que tu vois, que ce soit
2:45:05les grandes applications YouTube,
2:45:07Facebook, il y a aucune application
2:45:08qu'on ne peut pas hacker. La seule chose
2:45:10à faire, c'est de tellement protéger ton
2:45:13application que la personne qui voudrait
2:45:15hacker ça ne vraiment en fait, il va pas
2:45:17se fatiguer parce que ce serait
2:45:19tellement difficile de pénétrer et de
2:45:21hacker ton architecture. Donc nous,
2:45:24c'est ça qu'on va faire avec nos
2:45:25appoding. On va voir généralement
2:45:27quelles sont ces cinq erreurs. Donc
2:45:29premièrement, on a les variables
2:45:30d'environnement et les clés à pays
2:45:32exposées. Deuxièmement, on a ce qu'on
2:45:34appelle le row level security que qui
2:45:37manque sur les bases de données.
2:45:39D'accord ? Troisièmement, on a la
2:45:41validation uniquement côté front et pas
2:45:43côté serveur. Ça aussi c'est une faille.
2:45:464è faille, on a les packages inventés ou
2:45:49obsolè lorsque tu crées ton app. et
2:45:52cinquèmement, on a une authentification
2:45:54incomplète sur les routes. Donc
2:45:56généralement, si tu corriges ces cinq
2:45:59choses là, d'accord, tu es quand même en
2:46:01avance sur les gens. Et on va couvrir
2:46:04chacune de ces erreurs en détail. Mais
2:46:05d'abord, il faut comprendre comment les
2:46:07différentes parties de ton application
2:46:09communiquent entre elles, parce que
2:46:11c'est là souvent que les failles se
2:46:13trouvent. Donc, comment
2:46:16le front, le back et la base de données
2:46:18? Donc, on a parlé de ça tout à l'heure,
2:46:20d'accord ? Donc le front end, c'est tout
2:46:22simplement ton navigateur. D'accord ? Le
2:46:24back end c'est ton serveur, c'est là où
2:46:26se fait le traitement de données et
2:46:28cetera. Et la base de données, c'est là
2:46:30où est stocké toutes tes données. Donc
2:46:33avant de parler de faille, il faut
2:46:35comprendre comment tout cela se parle.
2:46:38C'est fondamental. Donc rappelle-toi de
2:46:39l'analogie de du restaurant du module E
2:46:41que je t'avais donné du module 1. Le
2:46:43front end c'est la salle, le back end
2:46:45c'est la cuisine et la base donné le
2:46:48frigo et la PI c'est le serveur qui fait
2:46:50les liens entre tous ces ces gens-là.
2:46:53D'accord ? [grognement] Quand un
2:46:54utilisateur clique sur un bouton sur ton
2:46:56SAS, [musique] voici ce qui se passe
2:46:58concrètement. Donc le navigateur euh de
2:47:00l'utilisateur, donc le front end, envoie
2:47:03une requête au serveur qui est le back
2:47:05end. Cette requête passe par internet,
2:47:07donc n'importe qui peut potentiellement
2:47:09intercepter cette requête-là. Donc
2:47:11deuxème chose, le serveur reçoit la
2:47:12requête, la traite et parle à la base de
2:47:14données pour lire ou écrire des
2:47:16informations. Donc le serveur a besoin
2:47:18de credentials d'identifiant pour
2:47:20accéder à la base de données. C'est un
2:47:22peu comme la clé du frigo. Donc le
2:47:24serveur ne peut pas tout simplement
2:47:26aller dans n'importe quelle base de
2:47:27données, écrire. Sinon bah n'importe
2:47:30quel serveur pourrait écrire dans
2:47:31n'importe quelle base de données. Donc
2:47:33il faut un peu une clé que le serveur
2:47:36ouvre utilise pour pouvoir ouvrir ton
2:47:38frigo par exemple qui est la base de
2:47:40données pour mettre des informations
2:47:42dedans. Ensuite la base de données va
2:47:44répondre au serveur d'accord en lui
2:47:46donnant des informations et le serveur
2:47:48envoie la réponse au navigateur et
2:47:50ensuite le navigateur va tout simplement
2:47:52afficher le résultat à l'utilisateur. Et
2:47:55chaque étape de ce processus est un
2:47:57point potentiel d'attaque. Chaque
2:47:59communication a besoin de ce qu'on
2:48:00appelle des clés, des tokens, des
2:48:02autorisation. Si une de ces clés est
2:48:05exposée, c'est comme si tu laissais la
2:48:06clé du frigo sur la table du restaurant.
2:48:08N'importe
2:48:10servir. Donc maintenant, on va parler
2:48:11des clés, surtout des clés que tu vas
2:48:13utiliser dans ton sas. Tu vas avoir
2:48:14plusieurs types de clés. Ça dépend de la
2:48:16taille de ton projet. Moi, j'ai des
2:48:18projets avec, je sais pas moi, une
2:48:19trentaine de clés différentes pour
2:48:21différents services. Donc, d'abord, on a
2:48:22la clé API Superbase parce que on a dit
2:48:25qu'on va utiliser Superbase dans nos
2:48:26applications. On aurait pu utiliser
2:48:28autre chose. On aurait pu utiliser Neon,
2:48:30on aurait pu utiliser Railways database.
2:48:32En fait, il y a plein d'alternatives. Il
2:48:34y a on aurait même pu utiliser Firebase.
2:48:36C'est juste que je trouve que Superbase,
2:48:37c'est l'un des outils quand même assez
2:48:39gratuits, facile à connecter. Il est
2:48:41plus complet surtout pour les débutants,
2:48:43mais il ne reste pas moins très
2:48:45puissant. Il y a de grosses sasses qui
2:48:47génèrent des millions chaque mois, ils
2:48:48utilisent Superbase. Donc la clé à payer
2:48:51SP base, c'est ce qui permet, c'est la
2:48:53clé qui permet à ton application de
2:48:54parler à ta base de données qui est sur
2:48:56SUbase. Et il y a deux types de clés.
2:48:59Donc il y a la clé anon qui est une clé
2:49:01publique. D'accord ? C'est c'est une clé
2:49:02que le navigateur voit, d'accord ? C'est
2:49:05par design. Par design, c'est comme ça,
2:49:06tu ne peux rien. C'est des choses qui
2:49:08sont publiques par défaut, d'accord ? Et
2:49:10il y a ce qu'on appelle la clé service
2:49:12rôle. et c'est une clé privée qui donne
2:49:14accès à tout. Donc si quelqu'un a accès
2:49:17à ta clé service rôle, il peut lire, il
2:49:20peut modifier et il peut supprimer tous
2:49:22les éléments de ta base de données.
2:49:24D'accord ? Ensuite, on a les tokens
2:49:26d'authentification.
2:49:28Donc quand un utilisateur se connecte,
2:49:30il reçoit ce qu'on appelle un token.
2:49:32C'est comme un bracelet dans un club,
2:49:33d'accord ? Quand tu rentres dans un
2:49:34club, on te donne un bracelet et tant
2:49:36qu'il a le bracelet, il peut accéder à
2:49:38des zones autorisées. Donc si quelqu'un
2:49:40vole le bracelet, il accède au compte de
2:49:43l'utilisateur tout simplement. Euh je
2:49:44sais pas si tu as remarqué, des fois tu
2:49:46tu te connectes sur un site, d'accord,
2:49:48sur ton navigateur. Euh même si tu
2:49:50fermes ton navigateur, tu pars faire
2:49:51autre chose quand tu reviens sur le
2:49:53site, généralement il te demande pas de
2:49:55te reconnecter automatiquement. D'accord
2:49:57? Pourquoi ? Et comment il fait ça ? Il
2:49:59fait ça grâce à ce token là. D'accord ?
2:50:01Parce que lorsque tu te connectes, le
2:50:03site envoie sur ton navigateur ce qu'on
2:50:05appelle un token. Et ça, ça te permet de
2:50:08toujours avoir accès sur le site,
2:50:10d'avoir accès à ton compte, d'avoir
2:50:12accès à certains services même mais et
2:50:14il te déconnecte pas automatiquement.
2:50:16D'accord ? Si tu n'avais pas ce tok là,
2:50:17bah dis-toi que chaque fois que tu
2:50:19viendrais, tu devrais te reconnecter.
2:50:21Mais après, comment il réussit à faire
2:50:23ça ? Il fait ce qu'on appelle de la
2:50:25persistance. Donc il persiste le token.
2:50:27Et il y a plusieurs manières de le de
2:50:29persister en token. D'accord ? on peut
2:50:30persister un token sur du redis,
2:50:32d'accord ? Donc sur euh bon après on va
2:50:35parler de redis plus tard, il peut le
2:50:37persister sur ton navigateur directement
2:50:39parce que les navigateurs, ils ont des
2:50:40mémoires. Donc il y a plein de manières.
2:50:42Donc dis-toi qu'en fait ton token, c'est
2:50:45tout simplement que disons que tu vas
2:50:46dans un club, tu tu payes, on te donne
2:50:49la carte d'accès. Ton token c'est la
2:50:50carte d'accès pour accéder au site. Donc
2:50:52si quelqu'un vole ta carte d'accès, bah
2:50:54il pourra accéder là où tu devrais
2:50:56normalement pouvoir accéder. C'est pour
2:50:58ça, il est très important de sécuriser
2:51:00cela. Ensuite, on a les différents API,
2:51:03d'accord ? Donc on a des API, des
2:51:05services externe que tu utilises. Par
2:51:07exemple, si euh sur ton app, d'accord,
2:51:10tu veux le connecter à chat GPT, il y a
2:51:11une clé chat GPT. Par exemple, si tu
2:51:13veux connecter ton site à Stripe, il y a
2:51:15une clé Stripe pour les paiements. Euh,
2:51:17il y a une clé pour envoyer des emails.
2:51:19D'accord ? Si tu utilises un service qui
2:51:20envoie des emails, il y a une clé pour
2:51:22envoyer des SMS. Donc chaque service
2:51:24généralement que tu vas utiliser et que
2:51:26tu veux connecter à ton site va utiliser
2:51:28ce qu'on appelle une clé, une API key.
2:51:30D'accord ? Donc et si quelqu'un a ta clé
2:51:32stripe par exemple, il peut
2:51:33potentiellement accéder à tes
2:51:35transactions. Et c'est pour ça qu'on a
2:51:37ce qu'on appelle les variables
2:51:40d'environnement. Donc les variables
2:51:41d'environnement, c'est un système qu'on
2:51:42met en place pour garder toutes ces clés
2:51:44là en sécurité loin du code visible. Et
2:51:47c'est là la première erreur qu'on va
2:51:49corriger. Tant que tu utilises des
2:51:50variables d'environnement, aucun, je te
2:51:53dis aucun hackeur, peu importe à quel
2:51:55point il est fort, ne pourra jamais
2:51:57accéder à tes clés à pays, [musique] à
2:51:58tes clés de de services et cetera.
2:52:01D'accord ? Donc c'est la première chose
2:52:02qu'on va corriger. Donc le variable
2:52:05d'environnement généralement c'est tout
2:52:07simplement un fichier. Maintenant, je
2:52:08vais t'expliquer le problème exact et
2:52:10comment le la variable d'environnement
2:52:11résout ce problème. D'accord ? La
2:52:13première heure, généralement ce que ce
2:52:15que les gens qui font des du Vipe coding
2:52:17font, c'est que leurs variables
2:52:18d'environnement sont exposées dans le
2:52:20code. Donc beaucoup de gens, surtout des
2:52:22débutants en Vipe coding, ils vont
2:52:24mettre leur clé d'API directement dans
2:52:26le code. Et il y a même le fait souvent
2:52:28elle écrit quelque chose comme constase
2:52:31qui escl Donc ça par exemple ça peut
2:52:34être ta clé super base. va être
2:52:36directement disponible dans un fichier
2:52:38JavaScript sur ton navigateur et c'est
2:52:40comme si tu écrivais ton mot de passe
2:52:42sur le la le pare-brise de ta voiture et
2:52:44que tu sortais dehors le mot de passe de
2:52:46ton appart de ton téléphone, je sais pas
2:52:48quoi, les gens auront le mot de passe de
2:52:50ton téléphone. Et c'est la même chose si
2:52:52tu mets par exemple tes clés à payer
2:52:54directement dans le code. C'est une très
2:52:57mauvaise idée. Et pourquoi c'est
2:52:59dangereux ? C'est parce que ton code
2:53:01front-end est visible par tout le monde.
2:53:03N'importe qui peut ouvrir les outils
2:53:05développeurs de son navigateur et aller
2:53:07directement dans l'onglet source. Il
2:53:09peut lire tout ton code JavaScript, il
2:53:11peut voir si ta clé API est là, si elle
2:53:13est exposée et même pire, les hackeurs
2:53:16savent que beaucoup de gens utilisent
2:53:17NextJs. Donc ils vont chercher dans le
2:53:19code des variables qui commencent par
2:53:21Next Public. En fait, c'est un préfix
2:53:23standard quand tu crées un site avec
2:53:24NextJs qu'on utilise nous dans le dans
2:53:27le code qui va générer, il y a ce qu'on
2:53:28appelle le Next public, d'accord ? Et le
2:53:31next public, c'est c'est généralement
2:53:34c'est un préfix standard, d'accord ? Et
2:53:36généralement ta clé sensible, des
2:53:38certaines I ils font ça, ils mettent ta
2:53:40clé à côté d'une ex public et elle est
2:53:42visible par le monde entier. Maintenant,
2:53:45je vais je vais te je vais te montrer un
2:53:46peu ça en action. Donc disons que là,
2:53:49moi je suis sur un navigateur. D'accord
2:53:50? Je vais aller tout simplement sur
2:53:53google.com. D'accord ? Tu vas voir
2:53:55quelque chose. En fait, si je vais sur
2:53:57google.com, même google.com, si j'ouvre
2:54:00le navigateur là, d'accord, je fais
2:54:01inspecter. Là, c'est le code de Google
2:54:04tout simplement, mais c'est du code
2:54:06front end, d'accord ? Et je peux faire
2:54:07énormément de choses dessus. Donc,
2:54:09disons que je vienne sur Google et au
2:54:11lieu de faire par exemple mode IA, je
2:54:13veux qu'il écrive par exemple mode
2:54:14Amadou. Donc, généralement directement
2:54:16dans mon extension, je vois le texte, il
2:54:18est là. Bah, je fais euh par exemple
2:54:20mode Amado, d'accord ? Et là, comme tu
2:54:22peux le voir, je suis sur google.com
2:54:23mais j'ai quand même fait une petite
2:54:25modification du bouton Google. D'accord
2:54:28? Bon, je t'explique, c'est pas aussi
2:54:29simple que ça. On va dire que ça ça
2:54:31n'existe juste que dans sur ma machine.
2:54:33Mais en fait, en ouvrant ici, en faisant
2:54:36inspecter, les gens recherchent ici les
2:54:38clés de ton API parce que généralement
2:54:40certains il y a de vibe coding, ils vont
2:54:42mettre cela ici. Par exemple, ils vont
2:54:43venir au niveau de ton site ici, ils
2:54:45vont rechercher quelque chose, ils vont
2:54:46voir quelque chose comme par exemple
2:54:48next public, d'accord ? Et après, il y
2:54:51aura par exemple un code, d'accord ? et
2:54:54ils savent qu'ils peuvent tout
2:54:55simplement copier ça. C'est ce sera la
2:54:58clé de tes API ou bien la clé de ta base
2:55:00de données et ils pourront accéder à ta
2:55:02base de données directement juste en
2:55:03faisant un simple clic droit inspecter.
2:55:06Ça c'est une des erreurs de débutants
2:55:08que beaucoup de gens ils font et et que
2:55:10l'IA a fait tout simplement. Mais si tu
2:55:12ne lui dis pas de le de de ne pas le
2:55:13faire et certaines le font et ça c'est
2:55:16quelque chose à vraiment gérer dès le
2:55:18départ. Deuxième chose, il y a par
2:55:21exemple les clés API, les clés API qu'on
2:55:23utilise euh directement dans les
2:55:26actions. Par exemple, ici, quand je
2:55:27clique sur ce bouton là, il y a
2:55:28généralement une action qui se fait.
2:55:30Généralement sur NextJs, quand tu
2:55:32cliques sur un bouton, il y a forcément
2:55:34quelque chose qui se passe. D'accord ?
2:55:35Donc par exemple, là on a un bouton.
2:55:37Donc ça c'est le bouton de Google.
2:55:39D'accord ? Et on clique. D'accord ? Par
2:55:42exemple, ici il y a JS action mais
2:55:43généralement sur Nextgs, on a par
2:55:46exemple un onclick. Et après sur ce on
2:55:48click, ça veut dire quand tu cliques
2:55:49dessus, qu'est-ce qui se passe ?
2:55:50Généralement, on donne par exemple, je
2:55:52fais on click, je fais égal.
2:55:55Généralement, il y a il y a une
2:55:57fonction. D'accord ? Donc généralement
2:56:00il y a une fonction et dans cette
2:56:01fonction là on aura quelque chose qui
2:56:04fait par exemple on on va lui dire par
2:56:07exemple fais quelque chose et derrière
2:56:09il y aura ta base de données. par
2:56:11exemple, envoie cela à euh à à l'IA pour
2:56:15qu'il gère ça, mais tu tu dois lui
2:56:16donner ton code IA et généralement, il
2:56:18va le mettre directement ici sur le
2:56:20front et chacun, n'importe qui peut
2:56:23venir et regarder ce que tu fais. Et je
2:56:26te dis, il y a aucun site au monde qui
2:56:28peut cacher son front end, c'est pas
2:56:30possible. D'accord ? Après, il y a un
2:56:31technique qui permet d'un peu cacher ça,
2:56:33mais tu pourras jamais le cacher à 100
2:56:35%. Les gens pourront toujours voir ton
2:56:37front end. Et ça, c'est pas vraiment
2:56:39grave, d'accord ? Parce que ce qu'il
2:56:40faut vraiment sécuriser, c'est le
2:56:42backend parce que généralement tout ce
2:56:44qui est clé, variable d'environnement et
2:56:46cetera, on ne les stock jamais dans le
2:56:48front end. Donc ça c'est une des
2:56:50premières erreurs. Donc j'espère que tu
2:56:51comprends un peu, d'accord, ce que
2:56:53[grognement] je viens de t'expliquer.
2:56:53Maintenant là, on est tout simplement
2:56:55dans la théorie. Vraiment fixer ça, ce
2:56:57sera très facile, ne t'inquiète pas.
2:56:59Juste que j'aimerais que tu comprennes
2:57:01exactement ce que tu fais, ce qui se
2:57:03passe. D'accord ? Donc ça c'est une des
2:57:05failles. Donc quand tu mets directement
2:57:07ton code ici, d'accord ? des clés à
2:57:09payer ici. Mais il y en a des gens qui
2:57:11font encore pire. Par exemple, dans le
2:57:12module dernier, qu'est-ce qu'on a fait ?
2:57:14On a écrit notre code et on a poussé
2:57:16notre code sur Github. Bah dis-toi que
2:57:18si tu pousses ton code sur Github sans
2:57:20faire attention, tu vas en même temps
2:57:23pousser tes clés qui sont dans le code
2:57:24et seront visibles sur ton GitHub. Et
2:57:27même si tu les supprimes après,
2:57:28l'historique de Git garde tout. Donc des
2:57:30bottes vont scanner ton GitHub en
2:57:32permanence à la recherche des clés
2:57:34exposées. Qu'est-ce que je veux dire par
2:57:36là ? Donc là, il faut savoir que GitHub
2:57:37de base, d'accord, c'est un repository.
2:57:40Donc en fait, GitHub, on va dire que
2:57:42c'est
2:57:43une librairie géante de code et de
2:57:46projet. Et il y a des projets qui sont
2:57:48et il y a des projets qui sont publics
2:57:50et il y a des projets qui sont privés.
2:57:51Donc ici, par exemple, lui il a un
2:57:53projet qui est public. D'accord ? Donc
2:57:56quand je clique ici, donc là je peux
2:57:58voir tout le code de son projet tout
2:58:00simplement parce qu'il l'a mis en
2:58:02public. D'accord ? Donc généralement ici
2:58:04dans le code s'il ne fait pas attention,
2:58:07il va mettre ici en même temps ses mot
2:58:09de passe. Et s'il met ici ses mot de
2:58:11passe, je peux venir ouvrir n'importe
2:58:13quel fichier. D'accord ? Voir que ah OK,
2:58:15ce mot de passe est ça. Bah je vais tout
2:58:17simplement copier son mot de passe et je
2:58:19pourrais avoir accès à ces données, à
2:58:21ses à à sa base de données, à ses API et
2:58:25cetera. Généralement, c'est très facile
2:58:26à régler. C'est il faut juste que
2:58:28lorsque tu vas par exemple créer une
2:58:30nouvelle repository, au lieu de la
2:58:32mettre en public ici, tu la mets en
2:58:33privé. D'accord ? Si tu la mets en privé
2:58:36seulement toi pour avoir par exemple ton
2:58:38code et ce que contient ton code.
2:58:40D'accord ? Et si tu le mets en public,
2:58:43bah n'importe qui pourra avoir accès à
2:58:44ça. Mais même si tu le mets en public,
2:58:46tu peux utiliser ce qu'on appelle le git
2:58:49ignore. Donc le git ignore, c'est tout
2:58:51simplement un fichier qui permet de dire
2:58:53à Git quand tu pousses mon code, pousse
2:58:56ça mais ne pousse pas ça. Donc là, on va
2:58:58je vais te montrer un peu. Donc là, je
2:59:00vais revenir sur le le code qu'on avait.
2:59:02Donc ça c'est un peu le projet qu'on
2:59:04avait, donc le site de CV qu'on avait
2:59:06fait. D'accord ? Tu peux voir que il y a
2:59:08un fichier ici qui s'appelle git ignore.
2:59:10Et quand je clique sur git ignore, en
2:59:12fait, il lui dit d'ignorer plein de
2:59:15choses. D'accord ? Il lui dit d'ignorer
2:59:17les logs, il lui dit d'ignorer les node
2:59:20modules. Donc les node modules, c'est
2:59:21quoi ? C'est un dossier avec plein en
2:59:24fait ça c'est les packages. Donc on on
2:59:26parlera de package tout à l'heure. Donc
2:59:28dans le dossier de notre module, tu vas
2:59:29voir tous les outils qu'utilisent ton
2:59:32site pour fonctionner, d'accord ? Pour
2:59:34avoir des capacités. Mais ça, tu n'as
2:59:37pas besoin de l'avoir, d'accord ? Ça
2:59:38c'est des packages déjà installés et
2:59:40généralement ça ça c'est ça pèse très
2:59:42lourd. D'accord ? Donc pour régler ce
2:59:45problème-là, ce qu'on a fait, on va on a
2:59:47créé ce qu'on appelle un package. Donc
2:59:49dans le package. Jason, c'est un peu
2:59:51comme une carte d'identité de ton
2:59:52projet. Donc ça va dire comment
2:59:54s'appelle ton projet ? Est-ce que ce
2:59:56projet il est privé ? Donc oui, il est
2:59:57il est privé. C'est quoi le type de
2:59:59projet ? Quels sont les scripts pour
3:00:01pour faire marcher le [grognement]
3:00:03projet ? et quelles sont les
3:00:04dependencies ? Donc de quoi dépend ton
3:00:06projet ? Donc on peut voir que mon
3:00:08projet actuellement, il dépend de ça, de
3:00:09GSAB, de Tailwin, CSS, de ça. D'accord ?
3:00:12Et par exemple celui-là, je l'ai
3:00:15installé à cette version là. D'accord ?
3:00:17Donc généralement, quand je donne mon
3:00:18code à quelqu'un, je n'ai pas besoin de
3:00:20lui donner les node modules. Si ça, les
3:00:22pag.json, il va juste faire une commande
3:00:24qui s'appelle npm install. Donc il vient
3:00:27ici, il fait npm install et fait entrer.
3:00:30Et tu verras qu'en fait il aura. Bon
3:00:32après moi je les ai déjà déjà installés
3:00:34c'est pourquoi tu vas voir que il t'as
3:00:35dit les packages sont déjà à jour mais
3:00:37si tu n'as pas les modus il va tout
3:00:39simplement les installer. Donc pas
3:00:41besoin de mettre ça. C'est pourquoi on
3:00:42le met dans le git ignore qui est là.
3:00:45Donc le dis c'est quoi ? Le dis c'est
3:00:46tout simplement le fichier qui a ton
3:00:49code qui a été buildé. Donc tout ce
3:00:51code-là quand tu l'envoies sur internet
3:00:53dans D'accord, c'est pas ça que en fait
3:00:55c'est pas ça que tu vois sur le
3:00:56navigateur, c'est ça en fait on va
3:00:58prendre ça, on va le builder donc on va
3:01:00en faire une application. C'est comme
3:01:02quand tu vas par exemple sur Windows que
3:01:04tu ouvres un un un une application, tu
3:01:07vas voir c'est euh x.exe.
3:01:11D'accord ? Donc ça par exemple c'est
3:01:12parce que c'est c'est c'est du code
3:01:14binaire. D'accord ? C'est une c'est une
3:01:16application. Donc généralement euh ici
3:01:19sur NextJs quand ton code il va être
3:01:21compressé, il va être buildé. D'accord ?
3:01:23On va on appelle ça le build tout
3:01:25simplement le fait de transformer tout
3:01:27ce code-là en en un fichier en un en un
3:01:30fichier exécutable. Donc ça ça s'appelle
3:01:32le dis qui est là. Donc ça aussi on ne
3:01:34le pousse pas. Généralement ça on le
3:01:36fait juste pour tester en local pour
3:01:38voir notre site en local voir si tout se
3:01:39passe bien et cetera. Maintenant
3:01:41généralement ce qu'on fait d'accord je
3:01:43vais te montrer la solution. Donc ça,
3:01:45comme je te l'ai dit, c'est le guit
3:01:46ignorant. Tout ce que tu vois ici, c'est
3:01:48des choses qui ne seront pas poussées
3:01:51par Git lors d'un push. Donc quand je
3:01:53lui dis fais un push, il va poucher ça,
3:01:55il va poucher ça, tous ces documents là.
3:01:57D'accord ? Mais si je veux par exemple,
3:01:59si je ne veux pas qu'il push le
3:02:00index.html, ben je vais aller dans git
3:02:02ignore, je vais venir ici en bas et je
3:02:04vais écrire index.html.
3:02:07Donc c'est aussi simple que cela et si
3:02:08je fais ça, bah la prochaine fois qu'il
3:02:10fait un pouce, il va jamais pousser
3:02:12index.hthtml. Donc si tu comprends ça,
3:02:14tu vas comprendre un peu la solution
3:02:16qu'on a apporté à ça. Donc la solution
3:02:19s'appelle le fichier inval. Donc le
3:02:21fichier local, c'est tout simplement un
3:02:23fichier que je vais utiliser en local.
3:02:26Et dans ce fichier là, c'est dans ce
3:02:27fichier que tu vas mettre toutes tes
3:02:28clés. Donc la clé de ta base de données.
3:02:31Donc tu vas la mettre dans ce qu'on
3:02:32appelle une variable. Donc disons que ta
3:02:34base de données, c'est sur Superbase. Tu
3:02:36vas appeler par exemple Superbase
3:02:38service r key. Tu peux l'appeler ce que
3:02:39tu veux hein, ça c'est juste une manière
3:02:41de nommer mais tu peux l'appeler comme
3:02:42tu veux. Tu fais égal et là tu mets ton
3:02:45ton ta clé. Pour le stripe aussi c'est
3:02:46pareil, tu fais Stripe secret key par
3:02:48exemple, tu fais égal et là tu mets ta
3:02:51clé. Et ce que ça fait ça veut dire que
3:02:53en fait ce fichier là il ne sera
3:02:55disponible qu'en local, d'accord ? Et
3:02:58généralement le fichier pointf, on
3:03:00l'ajoute dans le guit ignore donc il ne
3:03:02sera jamais poussé. D'accord ? Donc il
3:03:04ne sera jamais visible côté public.
3:03:06Maintenant, les seules clés qui seront
3:03:08publiques, d'accord, qui seront
3:03:09visibles, c'est le Next public Superbase
3:03:12URL. Donc ça, par exemple, quand tu vois
3:03:14next public, ça veut dire que c'est une
3:03:15clé qui sera visible sur le front et
3:03:18c'est normal. C'est comme ça que ces
3:03:19applications il marchent. Ici, tu peux
3:03:21voir que cette clé-là où il y a public
3:03:22et cette clé-là, ils seront visibles sur
3:03:25le web. D'accord ? Mais ces deux clés là
3:03:28où il n'y a pas de préfix, il y a pas de
3:03:29préfixe next public, ils ne seront
3:03:31jamais visibles sur le web. D'accord ?
3:03:33[grognement] Et ici, on te dit dans git
3:03:35ignore, tu vas ajouter n. Et dans le
3:03:38code, tu vas bon, ça c'est pas très
3:03:40grave. C'est ça veut juste dire dans le
3:03:42process de l'environnement parce qu'il y
3:03:44a deux types d'environnement. Il y a
3:03:45l'environnement de développement et
3:03:46l'environnement de production. Donc
3:03:48quand on dit environnement de
3:03:49développement, c'est tout simplement
3:03:51quand tu développes ton application, tu
3:03:53es dans l'environnement de développement
3:03:55et une fois que ton application il est
3:03:56en ligne, il est dans l'environnement de
3:03:58production. Donc là, ce que tu fais
3:04:00généralement, tu viens ici sur ton
3:04:01projet, tu fais ajouter un fichier et tu
3:04:04tapes point ENV. D'accord ? Donc
3:04:07généralement le point ENV, c'est le
3:04:10fichier dans lequel tu vas écrire euh
3:04:13tes tes codes, tes clés, tes mot de
3:04:15passe et cetera. Donc par exemple, il y
3:04:17a ici le next public URL. D'accord ?
3:04:20Donc par exemple, ça on va dire que ça
3:04:22c'est l'URL de notre site. On va dire
3:04:24quelque chose comme ça. D'accord ? Donc
3:04:25on va faire par exemple easysas.com. Je
3:04:29dis n'importe quoi. Et là j'aurai par
3:04:31exemple
3:04:32open AI euh key. Et ici je mettrai par
3:04:36exemple une clé. D'accord ? Et ça c'est
3:04:39cette clé là d'accord que mon code va
3:04:42utiliser généralement parce que cette
3:04:43clé va être stockée dans cette variable.
3:04:46Donc généralement maintenant dans le
3:04:47code au lieu de voir la clé, d'accord ?
3:04:50Tu vas juste voir disons que ici je
3:04:52vienne dans dans un fichier, d'accord ?
3:04:55Donc ici, je vais mettre
3:04:58par exemple
3:05:00qui je vais mettre par exemple la clé
3:05:04égale la clé égale process donc le
3:05:07processin
3:05:09in d'accord donc d'environnement point
3:05:12open tu as vu, il l'a récupéré
3:05:14directement donc ça par exemple c'est la
3:05:16clé openia qui va être stockée
3:05:19directement dans la clé et je pourrais
3:05:20l'utiliser dans mon code. Donc après ça
3:05:22je te l'explique. [rires] C'est pas
3:05:24quelque chose que tu vas faire toi-même,
3:05:26t'inquiète pas. Juste je t'explique en
3:05:27fait comment tu fais pour injecter tes
3:05:30clés et ton et tes et tes mot de passe
3:05:33dans ton code sans qu'il ne soit jamais
3:05:35visible sur ton le navigateur. Si
3:05:37quelqu'un cherche, il va voir peut-être
3:05:39open AI key mais il ne va jamais voir
3:05:42par exemple cette variable et c'est ça
3:05:44que tu veux protéger. Et même ça si tu
3:05:46le mets sur ton serveur au lieu de le
3:05:48mettre sur ton front si tu utilises un
3:05:50serveur tu tu le mets là-bas bah il ne
3:05:52sera aussi jamais visible. Donc c'est un
3:05:55peu comme ça qu'on utilise le fichier
3:05:57d'environnement, il est très puissant.
3:05:59Donc généralement lorsqu'on a un projet
3:06:03et qu'on veut protéger nos nos nos accès
3:06:06à notre base de données, on veut
3:06:07protéger nos clés API parce que disons
3:06:09que j'ai une clé API de open AI pour
3:06:12utiliser des LIA, bah si quelqu'un
3:06:14d'autre il là, il va pouvoir l'utiliser
3:06:15dans son propre projet et ma facture va
3:06:18monter en flèche et c'est moi qui paye.
3:06:19D'accord ? tout simplement parce que
3:06:20j'ai pas pris le temps de protéger mes
3:06:23clés d'environnement. Donc c'est un peu
3:06:25ça. Donc un fichier d'environnement,
3:06:26c'est tout simplement un fichier spécial
3:06:28qui contient toutes tes clés secrées. Il
3:06:30n'est jamais inclus dans ton code quand
3:06:32tu le poses sur Github. Donc ça c'est
3:06:35une des premières failles et les failles
3:06:36les plus simples à régler. Ne t'inquiète
3:06:38pas, tu n'auras pas besoin de faire tout
3:06:39ce que je t'ai montré là, mais je veux
3:06:41juste que tu comprennes exactement c'est
3:06:43quoi la faille exactement. D'accord ?
3:06:45Donc maintenant qu'on a vu la première
3:06:46faille générale que les gens font quand
3:06:48ils font des vibe coding, on va passer à
3:06:50la deuxième faille. Surtout pour ceux
3:06:52qui utilisent Super base. La major
3:06:53partie des gens utilisent Super base. Il
3:06:54y a une faille qu'on appelle la faille
3:06:56du raw level security. Donc ça c'est une
3:07:00faille que je vais t'expliquer. Par
3:07:02exemple, Superbase par design, il expose
3:07:05ta base de données via une API publique.
3:07:07D'accord ? Donc il y a une API, on va
3:07:09dire que c'est une route. Donc c'est un
3:07:11lien sur lequel on va pour parler à ta
3:07:14base de données. Il expose ça et il
3:07:16expose aussi une clé qu'on appelle la
3:07:18clé annon. Donc c'est une clé publique.
3:07:20Donc c'est normal par design, il est
3:07:22comme ça. D'accord ? Il y a pas de
3:07:24souci. Mais le problème c'est que si tu
3:07:25n'as pas le row level security juste
3:07:28avec ces deux ces deux outils là
3:07:31n'importe qui avec une URL et fait ce
3:07:33qu'elle veut. Elle peut lire tes données
3:07:36de toutes les elle peut modifier tes
3:07:37données, elle peut supprimer les
3:07:38données. En fait, elle peut tout faire.
3:07:41Donc imagine ton sas de facturation par
3:07:43exemple sans le road level security.
3:07:45Donc l'utilisateur A par exemple pour
3:07:46avoir toutes les factures de
3:07:47l'utilisateur B, il peut les modifier,
3:07:49il peut les supprimer en fait sans le
3:07:52rôle en fait le rôle level security en
3:07:54fait ce qu'il fait c'est que il fait en
3:07:56sorte que chaque utilisateur ne pourra
3:07:58voir et ne pourra interagir qu'avec ses
3:08:01propres données. Si moi j'ai mon compte,
3:08:04je ne devrais pas pouvoir voir les
3:08:05informations de ton compte par exemple.
3:08:07D'accord ? Donc ça en fait il faut
3:08:10savoir qu'une base de données c'est tout
3:08:11simplement des row, c'est tout
3:08:13simplement une liste et chaque liste
3:08:15c'est une ligne. D'accord ? Donc c'est
3:08:17une sécurité qu'on qu'on met en place
3:08:19sur cette ligne là. Et ça va faire en
3:08:21sorte de s'assurer que toi sur ta ligne,
3:08:23tu pourras accéder aux éléments de ta
3:08:25ligne. Donc si je devais le simplifier,
3:08:26ça va être un peu comme ça. Mais si tu
3:08:28n'as pas ça, bah moi je peux aller sur
3:08:30n'importe quelle ligne, voir ce que je
3:08:31veux, faire ce que je veux. et 83 % des
3:08:35bases de données Superbase sont
3:08:36[musique] exposées et ils ont un
3:08:38problème de row level security et les
3:08:40outils DI créent souvent des tables
3:08:42d'accord des bases de données sans
3:08:44activer le row level security ou bien
3:08:46s'il l'active il n'ajoute pas de
3:08:49policies d'accord ce qui fait que toutes
3:08:50les requêtes retournent des résultats
3:08:52videes et ça ressemble à un bug mais ça
3:08:54en fait c'est pas un bug c'est la
3:08:56sécurité qui va tout bloquer donc on va
3:08:59faire ça aussi d'accord je vais te
3:09:00montrer comment régler ça c'est juste un
3:09:02bouton Donc tu actives, en fait, il y a
3:09:03rien de compliqué. D'accord ? Donc le R
3:09:06level security, c'est le système qui dit
3:09:08l'utilisateur A ne peut voir que les
3:09:10données, d'accord ? Et ne peut supprimer
3:09:12que les données de l'utilisateur A. Tu
3:09:14vas juste sur Superbase et tu vas
3:09:16activer le row level security sur chaque
3:09:18table. Et ensuite, on va juste créer des
3:09:20policies, d'accord, qui va définir qui
3:09:23peut faire quoi. Donc par exemple, pour
3:09:24une table facture, donc disons que sur
3:09:27ma base de données, j'ai plusieurs
3:09:28tables. Donc j'ai la table users qui
3:09:30montre tous les utilisateurs. J'ai la
3:09:31table facture qui va montrer toutes les
3:09:33factures. Par exemple, disons que pour
3:09:35la table facture, tu crées une policie
3:09:36qui dit un utilisateur, il ne peut lire
3:09:39uniquement que les factures de sa table.
3:09:42D'accord ? Donc les factures qui ont son
3:09:44propre de identifiant utilisateur. Donc
3:09:47quand l'utilisateur A demande les
3:09:48factures, il ne reçoit que les C et
3:09:51l'utilisateur B ne peut pas y accéder.
3:09:53Donc pour activer la roll level
3:09:55security, on va juste aller dans notre
3:09:56table de bord de Superbase, sélectionner
3:09:58une table et cliquer sur enable
3:10:00errorless. Ensuite, tu crées les
3:10:02policies. Rien de bien compliqué. On
3:10:04verra cela lorsqu'on va créer une base
3:10:06de données. D'accord ? vraiment très
3:10:08facile. Mais si tu ne l'actives pas, bah
3:10:10ça peut tout simplement mettre à l'eau
3:10:12tout ton travail, tout ton sas. D'accord
3:10:14? Et généralement, il y avait une
3:10:16manière plus facile de le faire. Tu vas
3:10:17juste dire à Lia, d'accord ? Quand il va
3:10:19créer une base de données, active la row
3:10:21level security sur toutes les tables,
3:10:23créer des policiers pour que chaque
3:10:25utilisateur ne puisse lire, modifier et
3:10:27supprimer que ses propres données.
3:10:29Utilise l'authentification,
3:10:31l'utilisateur ID pour identifier
3:10:33l'utilisateur connecté. Bon bref, en
3:10:34fait c'est juste des choses que tu dis
3:10:35Al et il peut les faire pour toi mais si
3:10:37tu ne les pas bah et ta ton application
3:10:40ne sera pas sécurisée. Mais il peut pas
3:10:41le savoir si tu ne les luidis pas. C'est
3:10:43pourquoi je prends le temps de
3:10:44t'expliquer tout ça c'est très
3:10:46important. Il faut ajouter ces règles là
3:10:48à tous tes projets. C'est non
3:10:50négociable. Ensuite maintenant qu'on a
3:10:51parlé de row level security, on va
3:10:53passer à la faille suivante qui est la
3:10:55validation côté serveur. D'accord ? Donc
3:10:58la validation côté serveur, elle est
3:11:00hyper importante. Donc je vais
3:11:01t'expliquer un peu qu'est-ce que cela
3:11:03veut dire. Quand il y a créé un
3:11:06formulaire, par exemple, disons que il y
3:11:07a un formulaire sur ton site, d'accord ?
3:11:09Et ce site sur ce site le client doit te
3:11:11contacter, il doit te dire quelque chose
3:11:13ou bien les gens qui veulent te faire un
3:11:16partenariat, peu importe, d'accord ?
3:11:18Quand il y a un formulaire par exemple,
3:11:20d'accord ? Ou un bouton ou bien quelque
3:11:21chose où quelqu'un va écrire quelque
3:11:23chose sur ton site, elle met souvent la
3:11:25validation sur le front. Donc quand je
3:11:27dis sur le front, ça va être disons sur
3:11:29la sur la partie front end. Donc on a
3:11:31parlé du front, du back et de la base de
3:11:34données. Donc il va mettre la validation
3:11:36sur le front. Donc disons que la
3:11:37personne doivent écrire un email.
3:11:39D'accord ? C'est sur le front qui va se
3:11:40dire "OK, je vais essayer de voir si ça
3:11:43ce qu'il a écrit c'est un email." C'est
3:11:45généralement quand tu vas sur certains
3:11:47sites, tu veux t'inscrire, au lieu de
3:11:48mettre ton email par exemple
3:11:49[email protected],
3:11:51tu vas mettre amodofinance.com. Il va te
3:11:53dire ça c'est pas un email. il a fait de
3:11:55la validation. D'accord ? Donc cette
3:11:57validation-là, tu peux le faire sur le
3:11:59front, tu peux le faire sur le back,
3:12:00mais quand tu le fais sur le front et si
3:12:02tu le fais sur le front uniquement, il y
3:12:04a une faille. Donc le problème c'est que
3:12:05le code front end tourne dans le
3:12:07navigateur de l'utilisateur. Donc
3:12:09n'importe qui peut ouvrir la console
3:12:10comme je t'ai montré tout à l'heure et
3:12:12contourner cette validation. Je te l'ai
3:12:13montré tout à l'heure. Et il peut même
3:12:14contourner ton API directement. Donc là,
3:12:16je t'explique par exemple, disons que je
3:12:18vienne ici sur Google. Donc là, je vais
3:12:20un peu zoomer. D'accord ? J'ouvre la
3:12:22console. D'accord. Quand je fais une
3:12:24requête généralement, d'accord, je peux
3:12:26aller dans euh je peux aller dans réseau
3:12:29et si je vais ici dans réseau, ça va me
3:12:30montrer tous les appels que font ce
3:12:33site-là quand je fais une recherche.
3:12:35Donc par exemple, disons que euh quand
3:12:37quelqu'un m'envoie un message ou bien
3:12:40euh quand quelqu'un euh veut venir
3:12:42travailler avec moi, peu importe ce
3:12:43qu'il fait ou bien qui se connecte, qui
3:12:45crée un compte, ça doit envoyer cela
3:12:47directement à ma base de données.
3:12:48D'accord ? Donc disons que je vienne
3:12:50ici, je recherche par exemple Amadoufal
3:12:53et que je dise entrer. Tu vas voir que
3:12:56ça fait des appels. D'accord ? Donc ces
3:12:58appels là c'est tout simplement tu as
3:13:00ici tu as vu ici en fait ça en montre
3:13:01les les requêtes que font par exemple
3:13:03Google et ici je peux voir l'URL de la
3:13:05requête. Donc par exemple tu peux voir
3:13:06que c'est c'est ça euh c'est ça par
3:13:09exemple c'est une URL de requête.
3:13:10D'accord ? Donc c'est un lien que Google
3:13:13utilise pour faire les recherches. Et ça
3:13:15en fait bon après eux c'est Google quoi,
3:13:17tu vois. Mais l'idée, ce que je vais
3:13:19t'expliquer, c'est que chaque site a ça.
3:13:21Tu peux pas cacher ça. Et généralement
3:13:22ça, ça va aller directement parler par
3:13:25exemple à ta à ton serveur. D'accord ?
3:13:27Généralement, si tu ne fais pas de la
3:13:29validation directement sur le serveur,
3:13:31d'accord ? Au lieu de passer sur ton
3:13:33front, je vais juste ouvrir ici dans la
3:13:35console, je vais récupérer en fait
3:13:37l'URL, d'accord ? Et je vais envoyer, il
3:13:39y a des outils qui me permettent
3:13:41d'envoyer directement des données
3:13:42directement sur ton serveur sans même
3:13:44passer sur ton site, sans même passer
3:13:46sur ton front end. Donc la solution
3:13:48c'est de faire de la validation sur le
3:13:50front mais aussi sur le serveur parce
3:13:52que si ton serveur il fait confiance à
3:13:54tout ce qui arrive sans vérifier c'est
3:13:56une faille bayante. Donc la solution et
3:13:58les simple c'est de toujours valider
3:14:00côté serveur. La validation front end,
3:14:02tu la gardes pour l'expérience
3:14:04utilisateur parce que disons que moi je
3:14:07veille faire par exemple de la
3:14:08validation valider un email, je vais pas
3:14:12tout le temps envoyer de requête à mon
3:14:13serveur parce que même ça c'est du c'est
3:14:15du gaspillage de gaspillage de de
3:14:17ressources parce que moi je te dis c'est
3:14:18des choses que tu payes hein, d'accord ?
3:14:20À chaque fois qu'il y a une appel, une
3:14:21requête à payer bah s'il y en a beaucoup
3:14:23bah tu vas payer. Donc tu peux faire une
3:14:25validation sur ton site. Tu vas dire que
3:14:28ça ça ressemble à un email. Donc il y a
3:14:29par exemple l'identifiant par exemple à
3:14:31modo finance, il y a l'ar@AS et il y a
3:14:33le suffix. Donc par exemple gmail.com,
3:14:35hotmail.com, live.fr. Donc si tu mets
3:14:38tout ça en collé, d'accord, il y a ce
3:14:39qu'on appelle reject. D'accord ? Donc
3:14:41c'est un outil qui permet donc c'est un
3:14:43peu une fonction qui permet de checker
3:14:45ça ressemble à un email, ça ça ne
3:14:46ressemble pas à un email. D'accord ? Ça
3:14:48tu peux le faire sur le front mais il
3:14:50faudra toujours vérifier aussi sur ton
3:14:52serveur, d'accord ? comme ça, tu vas pas
3:14:55avoir de mauvaises surprises. Donc tu
3:14:57vérifies le format de l'email, la taille
3:14:59du mot de passe, le type de données et
3:15:00cetera. Si quelque chose ne va pas, tu
3:15:02rejettes la requête. Donc tu fais ça au
3:15:05niveau de ton serveur. Et il y a un prom
3:15:07par exemple, tu peux dire très
3:15:07simplement à ton par exemple, ajoute la
3:15:10validation côté serveur pour tous les
3:15:12API, toutes les routes. Ne fais pas
3:15:14confiance aux données du front end par
3:15:15exemple. tu lui dis ça, il va faire de
3:15:17la validation côté serveur. Donc là,
3:15:19j'aurais juste pu venir te dire dis çaa
3:15:22mais derrière toi, tu ne comprendrais
3:15:23pas ce que tu fais. Et généralement
3:15:25quand tu vas commencer à construire des
3:15:27apps de plus en plus complexes, il te
3:15:30faut savoir exactement ce que tu fais,
3:15:33d'accord ? Dans une certaine mesure. Tu
3:15:34n'as pas besoin d'être un expert parce
3:15:36que c'est pas toi qui va les faire
3:15:37manuellement, mais il faut quand même
3:15:39avoir un minimum de compréhension dans
3:15:42ce que tu fais. Donc par exemple un cas
3:15:44concret, je te donne un exemple, les
3:15:46inscriptions avec des emails bidons.
3:15:49N'importe qui peut venir tap par exemple
3:15:50taper n'importe [email protected]
3:15:53et il va créer un compte, tu vois ?
3:15:55Parce que ton front end, il va se dire
3:15:57"Oui, ça ça ressemble à à un email, je
3:16:00vais laisser passer." Donc si j'ai
3:16:02jamais sur sur ton back end, tu n'as pas
3:16:04fait une vraie vérification pour voir si
3:16:06cet email existe vraiment, bah beaucoup
3:16:09de gens vont venir et ils vont écrire
3:16:10n'importe quoi, d'accord ? Ils vont
3:16:12juste créer des des emails sur euh des
3:16:15des comptes sur ton site. Et
3:16:16généralement, comment les gens font pour
3:16:18contourner cela ? Quand tu viens sur un
3:16:20site et que tu écris ton email et que tu
3:16:21écris son ton mot de passe, par exemple
3:16:23pour créer un compte, qu'est-ce qu'il
3:16:25fait ? Il t'envoie un code sur ton
3:16:27email. Donc tu vas aller chercher ce
3:16:29code, tu viens le mettre pour prouver
3:16:30que c'est ton email, que cet email c'est
3:16:32vrai. Ce type de validation là, bah ça
3:16:34se fait au niveau du serveur. Et par
3:16:36exemple, quand on va commencer à créer
3:16:38des sites, on va on va faire cela,
3:16:40d'accord ? On va toujours vérifier côté
3:16:42serveur que l'email existe et que c'est
3:16:45un email qui est bon. Donc ça c'est pour
3:16:47éviter que beaucoup de gens ils viennent
3:16:49pour créer un compte, ils vont juste
3:16:50écrire n'importe quoi et le front end va
3:16:52dire "Ouais, ça ressemble à un email, je
3:16:54laisse passer." Donc si jamais au niveau
3:16:56du serveur il y a pas une vraie
3:16:57validation qui valide que c'est vraiment
3:16:59des emails, bah écoute, tu vas avoir des
3:17:01des faux comptes, des comptes bidon, des
3:17:03arnaques et cetera. Donc la solution, tu
3:17:05vas valider tout simplement au niveau du
3:17:07front et au niveau du bac, d'accord ? Et
3:17:10c'est assez simple de faire ça. OK,
3:17:11maintenant qu'on a parlé de validation,
3:17:14d'accord, on va passer à la faille
3:17:16suivante qui est une faille qui peut se
3:17:18passer tout le temps. C'est la faille au
3:17:20niveau de la sécurité des packages et
3:17:22des dépendances. D'accord ? Surtout si
3:17:24c'est des packages non sécurisés ou bien
3:17:26qui n'existent pas. En fait, il faut te
3:17:28dire que des fois Lia, il hallucine et
3:17:30il va inventer des packages qui
3:17:32n'existent pas. Il va halluciner euh un
3:17:35nom crédible et te dire que par exemple
3:17:37ça existe. D'accord ? Sauf que par
3:17:39exemple un package par exemple, il va te
3:17:41dire ce package existe, tu peux le
3:17:42mettre dans ton projet sauf que ça n'a
3:17:44jamais existé. [musique] Et c'est là que
3:17:46ça devient très dangereux parce que ceux
3:17:48qui attaquent ton site, les hackeurs,
3:17:49ils connaissent généralement ce
3:17:50phénomène. Donc ils vont créer des
3:17:52packages malveillants. Donc ils vont
3:17:53créer des choses malveillantes. Et si
3:17:56jamais tu l'installes sur ton projet,
3:17:58d'accord, si jamais tu l'installes, il y
3:18:00aura tout simplement un malware, donc un
3:18:02logiciel malveillant qui va voler tes
3:18:04clés à payer et pouvoir faire ce qu'il
3:18:06veut sur ton site. Et ça arrive moins
3:18:08souvent avec les bons modèles comme par
3:18:10exemple Cloud Opus et cetera, mais
3:18:11environ 5 % du code généré par LIA
3:18:14contient généralement des références à
3:18:16des packages inexistants. Donc l'autre
3:18:18problème aussi c'est des versions. Donc
3:18:20LIA va référencer souvent des versions
3:18:22anciennes de librairies avec des failles
3:18:24de sécurité connues. Donc je vais je
3:18:26vais te montrer un peu de quoi je parle.
3:18:28Donc ici quand je viens sur mon code
3:18:30tout à l'heure je t'ai dit quoi ? Je te
3:18:31dis que ici dans le notre module notre
3:18:33module j'ai des packages. Donc ça c'est
3:18:35des packages sur lequels mon code se
3:18:38base pour bien marcher. Donc chaque
3:18:40package a quelque chose qui qui fait
3:18:43quelque chose de bien spécifique. Don
3:18:45par exemple là on a un package par
3:18:47exemple ES Lint. Donc ça c'est un code
3:18:50que j'installe sur mon sur mon sur mon
3:18:52outil que j'installe sur mon sur mon app
3:18:54tout simplement qui me permet de faire
3:18:55quoi ? De vérifier que mon code est bien
3:18:58écrit et cetera. Donc au lieu d'essayer
3:19:01d'écrire un code qui fait ça moi-même,
3:19:03bah je vais tout simplement euh
3:19:04installer un code qui qui existe déjà et
3:19:06qui le fait. Au lieu de recréer la la
3:19:08roue, on utilise des codes qui existent
3:19:10déjà, on les installe sous forme de
3:19:12package dans notre app comme ça on va
3:19:14avancer beaucoup plus rapidement. Donc
3:19:17par exemple là, on a le Sud React, c'est
3:19:19un package par exemple généralement qui
3:19:21est utilisé pour télécharger des icônes,
3:19:24d'accord ? mettre des icônes. Donc tu as
3:19:26vu SVG element circle ellipse. D'accord
3:19:29? Donc c'est généralement du code qui me
3:19:31permet d'ajouter des icônes sur mon
3:19:33site. Donc au lieu de créer mes icônes à
3:19:35moi de de zéro, bah j'utilise tout
3:19:38simplement des icônes qui existent déjà.
3:19:40Maintenant là le problème c'est quoi ?
3:19:42Si jamais j'installe ici un package qui
3:19:45a une [musique] faille, donc un package
3:19:47qui n'existe pas ou bien un malware,
3:19:49donc un package qui a été fait dans le
3:19:51seul but de voler mes données et cetera,
3:19:54bah je j'expose mon code, j'expose mon
3:19:56projet. Et ici j'installe aussi une
3:19:59version de ce package ancienne, par
3:20:01exemple ici si je viens sur le package
3:20:02Jason, donc tout à l'heure je t'ai parlé
3:20:04du package Jason, tu as vu que tous ces
3:20:06éléments qui sont dans le note modules,
3:20:08ils sont ici dans le package Jason.
3:20:10D'accord ? Donc là par exemple, il y a
3:20:11le site React que je t' que je t'avais
3:20:13montré tout de suite. Bah là moi j'ai le
3:20:15site React version 1.7.0.
3:20:18Ben disons que Liam m'installe la
3:20:20version 1.2.0
3:20:22et par malchance cette version là 1.2 de
3:20:26Lucid React avait une faille. Bah
3:20:27écoute, je me mets euh je me mets un peu
3:20:29dans la mise quoi. C'est pas pour rien
3:20:31que quand tu utilises quelque chose
3:20:32comme WordPress, d'accord, WordPress va
3:20:34tout le temps généralement faire les
3:20:36mises à jour parce qu'il peut avoir des
3:20:38versions qui vont avoir des failles et
3:20:39ils vont tous tout de suite faire une
3:20:41mise à jour. Et si tu ne mets pas à jour
3:20:43et que tu montes à la version
3:20:44supérieure, bah la version dans laquelle
3:20:46tu es, bah tu restes tu es un risque
3:20:48parce que des hackeurs peuvent exploiter
3:20:50une faille et venir tout simplement euh
3:20:53bah ton site. Donc maintenant, comment
3:20:54tu peux te prémunir de ça ?
3:20:56Premièrement, tu peux faire quelque
3:20:57chose de très simple. Tu peux aller sur
3:20:59npmjs, d'accord ? Donc npmjs.com.
3:21:03Donc c'est tout simplement une
3:21:04bibliothèque de package. Donc ça te
3:21:06montre tous les packages qui existent.
3:21:09D'accord ? Et ici je peux rechercher par
3:21:12exemple lucid React, donc le le package
3:21:14que je viens de te montrer. Je peux voir
3:21:16que voilà, là il existe, il est bien à
3:21:18la version 1.7, d'accord ? Ici, tu as la
3:21:21version actuelle, c'est la version 1.7.
3:21:23Donc ça tombe bien parce que moi aussi
3:21:24j'ai lucide React à la version 1.7. Donc
3:21:26ici ça te montre aussi comment installer
3:21:28le package. Donc il te dit tu mets tu
3:21:30fais juste PNPM add ou bien npm install
3:21:33le site React. Ça c'est des commandes
3:21:35que tu mets dans le terminal comme je
3:21:36t'ai expliqué. Donc tu viens ici et tu
3:21:38colles npm installe le site React et
3:21:40c'est comme ça que tu installes un
3:21:42package. C'est aussi simple que ça. Et
3:21:43là en fait tu peux voir le nombre de
3:21:44téléchargement. Tu peux voir qu'il y a
3:21:4655 millions de téléchargements. En fait
3:21:49il y a 55 millions de projets à travers
3:21:52le monde qui utilise le site React. Donc
3:21:54on peut dire que vraiment il est très
3:21:56sûr parce que s'il n'était pas sûr, il y
3:21:59a personne qui allait l'utiliser. Ça
3:22:01c'est sûr. Donc généralement si tu viens
3:22:03ici et que tu trouves que le package il
3:22:04a je sais pas moi deux téléchargements,
3:22:06man, méfie-toi, d'accord ? Méfie-toi un
3:22:08peu. Euh dis-toi que si en fait il y a
3:22:12forcément quelque chose qui ne va pas
3:22:13bien, surtout si tu es débutant, utilise
3:22:15généralement les packages qui sont assez
3:22:16connus, qui sont assez utilisés.
3:22:18Deuxième chose que tu peux faire, tu
3:22:19peux lancer des audits, des audits de
3:22:22temps en temps sur tes packages,
3:22:23d'accord ? Tu viens ici et tu fais ce
3:22:25qu'on appelle npm audit. Donc qu'est-ce
3:22:28que ça fait npm audit ? Ça va tout
3:22:29simplement auditer tous les packages qui
3:22:32sont là et voir s'il y a des packages
3:22:33qui ont des failles et cetera. Donc là,
3:22:35tu as vu, il a trouvé, il n'a pas trouvé
3:22:37de vulnérabilité. Mais s'il y avait une
3:22:39vulnérabilité, il va te dire "OK, sur ce
3:22:41package là, j'ai vu ça, j'ai vu ça, j'ai
3:22:43vu ça." Et tu vas faire ce qu'on appelle
3:22:45un npm audit fix. Et quand tu fais npm
3:22:48audit fix, donc il va tout simplement
3:22:50fixer, régler les failles qu'il y a sur
3:22:52tes packages. Ou bien tu viens
3:22:54directement dans l'IA et tu lui dit euh
3:22:56fais-moi un audit de mes packages et
3:22:59fixe fixe si jamais tu vois des
3:23:01problèmes. Donc ou bien tu viens, tu lui
3:23:03dis ça tout simplement et lui tu vas
3:23:04voir qu'il va tout simplement faire la
3:23:06même chose. Il va lancer un npm audit et
3:23:08il va faire un npm audit fix si jamais
3:23:10il voit des problèmes. Sinon il va tout
3:23:12simplement te dire queil y a pas de
3:23:13souci. D'accord ? Donc ici, normalement
3:23:14il va lancer une commande terminale. Tu
3:23:16as vu ? Ça c'est la commande terminale
3:23:17qu'elle a lancé npm [musique] audit.
3:23:19C'est la même chose que je viens de
3:23:20faire. Je vais faire run et il va
3:23:22trouver qu'il n'y a pas de chat, zéro
3:23:24vulnérabilité. Donc là, il va tout
3:23:25simplement me dire il y a aucun problème
3:23:27d'accord avec mes mon audit. Donc npm
3:23:31outdated, il va voir s'il y a un un
3:23:33package qui est outdated, donc qui est
3:23:36qui est ancien. Donc donc là si si il en
3:23:39trouve aussi, il va te dire que ça c'est
3:23:41ancien, mets-le à jour. ou bien
3:23:43[musique] npm install. Donc là,
3:23:45qu'est-ce qu'il fait ? Il fait un npm
3:23:46install. Donc peut-être qu'il a trouvé
3:23:48des packages qui sont anciens ou bien
3:23:51qu'il y a une nouvelle version. Il va
3:23:52installer une nouvelle version. On
3:23:53attend un qui finit et il va te dire
3:23:55exactement ce qu'il a trouvé. Donc là,
3:23:56tu as vu, j'ai bien audité vos packages
3:23:59avec la commande npm audit. Zéro
3:24:01vulnérabilité. Euh voilà, seul IS Link
3:24:04dispose d'une nouvelle version mais vous
3:24:06[musique] êtes à la dernière version à
3:24:08jour de la V9. Il est plus prudent de
3:24:09rester sur cette version. Aucun fix
3:24:11n'est nécessaire. Donc tu as vu, c'est
3:24:13en fait c'est la même chose que j'ai
3:24:14fait ici. C'est juste que quand je vais
3:24:15faire ça, peut-être ça va me consommer
3:24:17des crédits, d'accord ? Donc euh si tu
3:24:19sais comment le faire toi-même, bon tu
3:24:21le fais quoi, tu vois ? Au lieu de lui
3:24:22dire de le faire. Mais bon, si tu es si
3:24:24tu ne veux pas te casser la tête, viens
3:24:26ici et tu lui dis "Fais-moi unit de mes
3:24:28packages. Vois s'il y a pas de package
3:24:31qui où il y a des failles ou bien un
3:24:32package qui est qui est outdated,
3:24:35d'accord ? Qui est ancien [musique] et
3:24:37fixe-moi tout cela et il va faire ça
3:24:39pour toi." OK ? Ensuite maintenant on va
3:24:41parler de la 5è faille générale que la
3:24:44majeure partie des app vibe cit ils ont.
3:24:46C'est le problème d'authentification et
3:24:48de protection des routes. Donc c'est
3:24:51quoi une route ? D'accord ? Donc une
3:24:53route c'est tout simplement dans ton
3:24:56serveur d'accord ? Il y a différentes
3:24:58entrées. D'accord ? Donc on va dire que
3:25:00une entrée, on appelle ça une route.
3:25:02Donc disons il va y avoir une entrée
3:25:04pour avoir le le nom d'un utilisateur ou
3:25:07bien les informations d'un utilisateur.
3:25:09Donc ça c'est une route. Il y aura une
3:25:11autre entrée pour voir par exemple le
3:25:13nombre d'utilisateurs. Donc ça aussi
3:25:15c'est une route. Donc en fait il faut
3:25:18vraiment authentifier et protéger ces
3:25:20routes parce que dans système de
3:25:21connexion marche, les utilisateurs
3:25:23s'inscrivent, se connectent tout marche.
3:25:25Mais est-ce que chaque page vérifie que
3:25:27l'utilisateur est connecté ? Est-ce que
3:25:29chaque route de ton API, donc chaque
3:25:31entrée de ton API vérifie le token ?
3:25:34Tout à l'heure, on a parlé du token. Je
3:25:35te'ai dit que quand vraiment on le
3:25:38token, c'est comme si tu entrais dans un
3:25:39club et que tu payais, on te donne un
3:25:41bracelet ou bien une carte, ça c'est ton
3:25:43token. Mais est-ce que à chaque fois que
3:25:45la personne va venir pour entrer dans le
3:25:47club, est-ce qu'on va vérifier qu'il a
3:25:49le token avant de le laisser rentrer ?
3:25:51C'est ça la vérification de la route.
3:25:52D'accord ? Parce que sinon bah écoute,
3:25:54n'importe qui peut venir sur ta base de
3:25:56données et faire sur ton serveur et
3:25:58faire n'importe quoi. D'accord ?
3:26:00Beaucoup d'APS surtout Vipit ne font pas
3:26:03ça. Donc le dashboard vérifie
3:26:05l'authentification mais les la page
3:26:07paramètres par exemple ne le vérifie
3:26:09pas. Tu vas entrer dans une application,
3:26:11d'accord ? Tu vas te connecter, tout
3:26:13marche. Mais quand tu vas aller sur la
3:26:15page paramètres, au lieu de euh quand tu
3:26:16vas vouloir changer quelque chose, il va
3:26:18pas vérifier si tu es bien l'utilisateur
3:26:21qui est qui est propriétaire de ces
3:26:23données-là. En fait, c'est pas parce que
3:26:24tu es tu t'es authentifié, ça veut dire
3:26:26que tu es venu, tu t'es connecté, que
3:26:28chaque page ou bien chaque bouton de
3:26:31l'application, chaque action vérifie que
3:26:33est-ce que c'est toi vraiment euh
3:26:36l'utilisateur. Donc ça aussi c'est très
3:26:38important. Je te montre un exemple dans
3:26:39une de mes applications. Donc ça par
3:26:41exemple, c'est mon application
3:26:42farata.net. Donc Farata.net, c'est une
3:26:44app que j'ai lancé. C'est un site de
3:26:45rencontre. Donc là, ici, on vérifie tout
3:26:48le temps si la personne, elle est
3:26:49premium. D'accord ? Donc si une personne
3:26:51est premium, il peut faire des choses.
3:26:54Donc il peut envoyer des messages vocaux
3:26:56et cetera et cetera. Donc pour savoir
3:26:58tout le temps si la personne est premium
3:27:00ou pas, bah écoute, on va tout le temps
3:27:01faire cette validation là. C'est pas
3:27:03parce que tu t'es connecté que tu es
3:27:04forcément premium ou bien c'est pas
3:27:06parce que tu t'es connecté en étant
3:27:07premium que tu es toujours premium parce
3:27:09que tu peux te connecter en étant
3:27:11premium et je sais pas moi une heure de
3:27:12temps après ton abonnement premium a
3:27:15expiré. Bah si si on fait pas de la
3:27:18vérification, ça veut dire que tant que
3:27:19tu ne te déconnectes pas, tu vas
3:27:21toujours avoir accès à tes avantages
3:27:23premium, tu comprends ? Donc
3:27:24généralement ce qu'on fait quand on veut
3:27:26sécuriser cela à chaque fois qu'il y a
3:27:29une requête, à chaque fois qu'il y a une
3:27:31action, ce qu'on fait c'est qu'on
3:27:32vérifie si la personne est bien
3:27:35authentifiée et est-ce qu'elle a les
3:27:37accès, est-ce qu'elle est autorisée,
3:27:38est-ce qu'elle a toujours le token,
3:27:39est-ce que cette personnelà qui veut
3:27:41faire cette action là, il a les
3:27:42autorisations pour faire ce qu'il veut
3:27:44faire. C'est aussi simple que cela. Et
3:27:46techniquement, comment ça se fait ? En
3:27:47fait, ce qu'on fait, c'est qu'on
3:27:48installe un middleware. Donc un
3:27:50middleware, c'est tout simplement un
3:27:52bout de code, d'accord, qu'on met dans
3:27:55tes routes, dans ton dans ton backend.
3:27:57Donc chaque route, chaque entrée, il
3:27:58aura un middleware. Donc le middleware,
3:28:00c'est comme un videur que tu vas mettre
3:28:03devant chaque porte avant que une
3:28:05requête ne passe, il va vérifier si
3:28:08cette personne-là c'est bien celle
3:28:10qu'elle prétend être ou bien si cette
3:28:12personne ce qu'elle fait, elle a les
3:28:14autorisations pour le faire. Donc c'est
3:28:15un peu comme ça qu'on met euh qu'on met
3:28:18à jour. Donc en fait le middleware c'est
3:28:20comme si il va se mettre entre l'entrée
3:28:22de ton serveur et ton front,
3:28:24c'est-à-dire que et le site. Donc quand
3:28:25le front va envoyer une requête avant
3:28:28que la requête n'arrive dans le serveur,
3:28:30il va passer ou bien n'arrive dans une
3:28:32route, il va passer par le middleware et
3:28:35le middleware son travail c'est de tout
3:28:37simplement checker. Il va tout protéger.
3:28:40il va vérifier le token et si la
3:28:42personne n'est pas par exemple
3:28:43connectée, il va le rediriger vers
3:28:45login. Et si cette personne n'est pas
3:28:46par exemple un membre premium ou bien il
3:28:48n'a pas payé un abonnement à ton SAS,
3:28:50bah il va lui dire tu n'as pas accès à
3:28:52cette fonctionnalité là. Généralement on
3:28:54utilise un quelque chose qui s'appelle
3:28:56le middleware. Tu n'as pas besoin de
3:28:58techniquement savoir comment il fait ce
3:29:01qu'il fait, d'accord ? Mais sache que il
3:29:05te faudra dire à Lia de faire des choses
3:29:07bien précises pour que ton app soit
3:29:09vraiment très sécurisé. Ensuite, une
3:29:12chose que beaucoup de gens ne font pas
3:29:14ça, moi je dirais peut-être 95 % des
3:29:17gens qui font du vibe coding n'ajoutent
3:29:19pas ça dans leur site et ils s'exposent
3:29:22man, ils ne savent pas à quel point ils
3:29:23s'exposent, c'est qu'ils ne font pas de
3:29:25rate limiting. Donc le rate limiting,
3:29:28c'est tout simplement en fait que je te
3:29:30donne un exemple. Si quelqu'un vient sur
3:29:31ton site, il met un email, d'accord, et
3:29:34il fait 100 mot de passe, 1000 mot de
3:29:36passe, ou bien il peut même utiliser un
3:29:38logiciel qui va forcer et qui va essayer
3:29:40plusieurs mot de passe ou bien il va
3:29:41faire du bred force. On appelle du brid
3:29:43force par exemple un logiciel qui va
3:29:44venir qui va venir euh essayer 100000
3:29:47combinaisons de mot de passe possible.
3:29:49Et il peut faire ça si tu ne fais pas du
3:29:51rate limiting. Donc le rate limiting
3:29:52c'est tout simplement quand tu mets une
3:29:54règle sur ton site qui dit que chaque
3:29:56utilisateur il ne peut faire que cinq
3:29:58essais de mot de passe chaque 10 minutes
3:30:00par exemple. Ce qui fait que ce logiciel
3:30:02là, il peut venir faire un essai, deux
3:30:04essais, 3 essais, 4 essais, 5e essai au
3:30:066e essai et lui dit euh tu as fait trop
3:30:09de tentatives, attends dans 10 minutes.
3:30:11La majeure partie des sites si tu te si
3:30:13tu si tu si tu te rends compte quand tu
3:30:14vas là-bas et que tu fais trop de d'essè
3:30:17par exemple envoyer un email et cetera,
3:30:19ils te disent attends dans 1 minute,
3:30:21dans 2 minutes avant de redemander ton
3:30:23code parce que tu as déjà fait ça. Donc
3:30:25ça c'est des rate limiting. Donc ça
3:30:27c'est vraiment très hyper important
3:30:29surtout si tu utilises des API que tu
3:30:32payes comme par exemple si tu utilises
3:30:33une API open IA ou tu utilise de l'IA ou
3:30:35tu payes si tu ne fais pas de rate
3:30:37limiting les gens vont abuser de ton de
3:30:40ton de de tes de tes de tes de tes API
3:30:43vont abuser de tes services et c'est toi
3:30:45qui paye la facture. Donc il faudra
3:30:47toujours ajouter du R limiting et tu
3:30:48n'as pas besoin de savoir techniquement
3:30:50comment ça se fait. Tu dis juste à
3:30:52ajoute du red limiting sur toutes les
3:30:54routes d'authentification. Par exemple,
3:30:55tu lui dis maximum 5 tentatives par
3:30:57minute par adresse IP. Ce qui fait que
3:31:00chaque ordinateur qui se connecte, bah
3:31:02euh quand il se connecte, il peut pas
3:31:03faire plus de cinq tentatives de
3:31:06connexion. S'il le fait, il lui dit par
3:31:08exemple "Attends une minute" avant de
3:31:10refaire euh une tentative. Donc c'est un
3:31:13peu comme ça que ça se passe.
3:31:15Maintenant, pour régler tout ça, ce que
3:31:17j'ai fait c'est que tu peux faire un
3:31:18audi sécurité avec Lia. D'accord ? Donc
3:31:21dans cette dernière section, on va voir
3:31:23comment utiliser Lia pour vérifier la
3:31:25sécurité de ton projet. Et comment on va
3:31:28faire ça ? C'est tout simple, j'ai créer
3:31:29un prompt. C'est un vraiment un gros
3:31:32prompt, d'accord ? Que sera aussi dans
3:31:34le document. Donc je vais venir ici
3:31:35jusqu'en bas, on va retrouver le prompt
3:31:38et tu donnes juste ce prompt là à L. Et
3:31:40une fois que tu lui donnes ça, tu as vu
3:31:42ça c'est le prompt sécurité. Tu as juste
3:31:44à copier tout ce que tu vas trouver ici.
3:31:46D'accord ? Je vais te le mettre donner
3:31:48dans le dans le fichier. D'accord ? Donc
3:31:50je copie tout ça. Tu as vu, c'est hyper
3:31:51long. Donc je lui donne ça et je copie.
3:31:54Je viens ici. D'accord. Je lui donne.
3:31:57Tac. Et en fait bah maintenant une fois
3:32:00que je lui donne tout ça, Lia va
3:32:01regarder toutes ces failles là dont on a
3:32:04parlé. Donc le row level security, le
3:32:06rate limiting, la validation backend, la
3:32:08validation front end. Euh tout ça en
3:32:11fait tous ces éléments en tout cas
3:32:13toutes ces failles que je t'ai présenté
3:32:15ici, il va aller les checker. Il va te
3:32:17faire un rapport d'audit et si jamais il
3:32:19trouve des failles, tu lui dis juste
3:32:21fixe tout ou bien règle tout et il va
3:32:23tout régler pour toi. J'aurais pu juste
3:32:25venir te dire si tu veux faire de la
3:32:26sécurité juste donne ça mais ça ne
3:32:28serait pas assez complet parce que là on
3:32:31a parlé que je te dis de 80 % des
3:32:33failles mais il y a d'autres d'autres
3:32:35failles qui sont beaucoup plus
3:32:36complexes. D'accord ? Et si tu ne peux
3:32:39même pas comprendre ces là dont je te
3:32:41parle, si jamais tu as ces problèmes là,
3:32:42tu ne pourras jamais le savoir. Donc là,
3:32:45quand on va créer peut-être des app
3:32:46beaucoup plus complexe, une app beaucoup
3:32:48plus complète, on va faire quelque chose
3:32:50de on va faire un Audi encore plus
3:32:52complet. Mais déjà si tu as ces
3:32:54sécurités là sur ton application, bah
3:32:56ton application est quand même hyper
3:32:58sécurisée, elle est très sécurisée.
3:32:59Vraiment, il te faudrait un hackeur très
3:33:01fort pour pouvoir accéder à tes données.
3:33:04Et ça aussi euh comme je te dis, c'est
3:33:06c'est vraiment pas mal. Donc tu
3:33:07commences par faire ça. Après il y a
3:33:09d'autres types de de choses que tu peux
3:33:11faire pour encore plus sécuriser ton
3:33:13application. Et ça, on va en parler
3:33:15lorsqu'on va créer une app. D'accord ?
3:33:18Une app stack, ça veut dire une
3:33:19application avec du front end, du back
3:33:22end. Et là, on verra comment on peut
3:33:23sécuriser cela parce qu'on doit
3:33:25sécuriser pas mal de trucs. Donc là,
3:33:27regarde ce qu'il est en train de faire.
3:33:28Il est en train de faire l'audio. Bon
3:33:30là, on a on a rien. On a même pas de
3:33:32backend, c'est juste le site qu'on avait
3:33:34créé, le site du CV. D'accord. Il y a
3:33:36même pas de backend. C'est un site hyper
3:33:37simple, donc il y a pas grand-chose.
3:33:38D'accord ? Donc là, il regarde un peu la
3:33:40checklist, il te dit ce qui est déjà
3:33:42bien. Résumé de la checklist. Il te dit
3:33:46"Est-ce qu'il y a du code vulnérable ?"
3:33:47Donc par exemple ça, il te dit que ça
3:33:48c'est vulnérable. Il te dit ça c'est la
3:33:51connexion, la correction. Donc tu dois
3:33:52faire cette commande là. Donc au lieu de
3:33:54me casser la tête, je lui dis juste fixe
3:33:56tout. C'est bon. Tu as vu ? Et là en
3:34:00fait c'est lui qui qui se gère de de de
3:34:02régler ces éléments là. Donc en fait ce
3:34:05prompt là sera aussi disponible dans le
3:34:07fichier. Donc tu vas venir, il va te
3:34:09demander la l'autorisation. Bah il me
3:34:11demande toujours l'autorisation tout
3:34:12simplement parce que dans les settings,
3:34:14je te lui ai demandé, je vais faire
3:34:15request review mais si j'avais fait
3:34:17always proceed, il avait il a il a juste
3:34:20venir et le faire. Mais là, je vais
3:34:21juste faire run et tu vas voir que il va
3:34:23faire le il va faire le en fait, il est
3:34:27en train de désinstaller un un package
3:34:29quoi. Tu vois, il a dit j'ai fait l'udit
3:34:31sécurité configuration nettoyage des
3:34:34dépendances. Votre projet est maintenant
3:34:36parfaitement propre et sécurisé à 100 %
3:34:38et puis c'est bon. D'accord. Donc il a
3:34:40aussi modifié le git ignore et tu as vu,
3:34:42il a moi j'avais ajouté juste le
3:34:44variable d'environnement mais il a
3:34:46ajouté le variable donc le c'est-à-dire
3:34:48que euh j'ai j'ai ajouté ce fichierlà
3:34:51point inv mais il est parti plus loin,
3:34:53il a ajouté point tout ce qui suit.
3:34:56Après par exemple si j'avais un fichier
3:34:58généralement on a d'autres types de
3:35:00fichiers qui s'appellent par exemple
3:35:01point inv.local local. D'accord ?
3:35:05Généralement, il y a des fichiers
3:35:06d'environnement qui s'appellent comme
3:35:07ça. Et si je ne fais si je ne fais pas
3:35:10ça, d'accord, ça va pousser ce fichierlà
3:35:13sur mon guit. Peut-être que [musique]
3:35:14j'ai des codes ici. Donc qu'est-ce qu'il
3:35:16a fait ? Il a dit ici point et point et
3:35:19et quand point en inv et tout ce qui
3:35:21suit après. Ça ça veut dire c'est un
3:35:22wild card. Ça veut dire tout ce qui peut
3:35:24suivre après le point. S'il y a quelque
3:35:26chose qui a qui est après, juste
3:35:28cache-le. Donc tu as vu point.local.
3:35:33peu importe ce que tu mets ici, il va il
3:35:35va il va compter sur cette ligne là et
3:35:37il ne sera ce fichier là ne sera jamais
3:35:39poussé sur ton GitHub. Donc là on a un
3:35:42peu parlé de sécurité, on a parlé des
3:35:44cinq failles fréquentes, on a même donné
3:35:46une 6e faille qui est le rate limiting.
3:35:48Donc avant de mettre en ligne un SAS, il
3:35:49faut toujours passer cette checklist là.
3:35:52Donc c'est des choses que tu dois
3:35:53obligatoirement vérifier avant de mettre
3:35:55ton site en ligne. Donc tu vérifies si
3:35:57les clés API sont bien dans le
3:35:59environnement.lle local ou bien dans le
3:36:00fichier d'environnement. Est-ce que ce
3:36:02fichier environnement ou bien
3:36:04environnement pointlocal ou même les
3:36:05deux, ils sont dans le guide ignore ?
3:36:07Est-ce que tu as activé la row level
3:36:09security ? Est-ce que tu as activé les
3:36:11policies en ravel security ? Est-ce que
3:36:14tu as fait une validation côté serveur
3:36:15et même côté front end ? Est-ce que tu
3:36:18as vérifié tes packages ? Tu peux lancer
3:36:19npm audit ou bien tu dis à à ton juste
3:36:22faire de l'audit. Est-ce que tu as fait
3:36:24des middleware comme je t'ai dit un
3:36:26middleware qui va toujours vérifier les
3:36:29requêtes qui arrivent et vérifier si
3:36:31cette personne là il est authentifié,
3:36:33est-ce que tu as fait de la vérification
3:36:35email ? Et est-ce que tu as un rate
3:36:37limit [musique] en place ? Une fois que
3:36:38tu as ça, ton application est quand même
3:36:40pas mal sécurisée, crois-moi. Donc là,
3:36:42on est un peu à la fin du module 4. Donc
3:36:44qu'est-ce que tu as compris ? Tu as
3:36:46compris comment le front, le back et la
3:36:48base de données communiquent et où se
3:36:50trouvent les points d'attaque général
3:36:51que les hackeurs vont exploiter si
3:36:53jamais tu redonnes l'opportunité. Donc
3:36:55tu gères tes variables d'environnement
3:36:57et plus jamais tu mets de clés en dur
3:37:00sur ton code, d'accord ? Tu le mets
3:37:01toujours dans le fichier
3:37:03d'environnement, donc le point NV ou
3:37:05bien le point. NV.lle local comme je te
3:37:07l'ai montré. Maintenant, tu comprends
3:37:09c'est quoi le row level security, le
3:37:10RLS. Chaque utilisateur ne verra que ses
3:37:13propres données et ne pourra interagir
3:37:14qu'avec ses propres données. Tu valides
3:37:17côté serveur, pas uniquement côté front.
3:37:19Donc chaque euh information qui va
3:37:22venir, tu vas faire de la validation. Il
3:37:24y a même des bibliothèques qui existent
3:37:25comme par exemple ZOD pour faire la
3:37:27validation. Tu as même tu dis juste à L
3:37:29valide avec Zod, d'accord ? Z O D et il
3:37:32va faire la validation. Mais sinon, tu
3:37:33lui dis juste fais la validation quand
3:37:34tu serveur et peut-être que lui-même il
3:37:36va automatiquement installer Zod.
3:37:38D'accord ? Vérifie tes packages avant de
3:37:39les installer. Tu protèges toutes tes
3:37:42routes avec un middleware et tu sais
3:37:44faire un audi de sécurité avec Lia en
3:37:46utilisant le prompt qui sera dans le
3:37:48fichier bien évidemment. Et tout cela
3:37:50peut-être ça va ça a été un peu long et
3:37:51ce n'est pas excitant mais croit-moi
3:37:54c'est professionnel. Et si tu veux
3:37:56vraiment créer des s qui vont scaler, ça
3:37:58veut dire avoir plein d'utilisateurs,
3:38:00tuas rapporter plein d'argent et que tu
3:38:02peux même revendre, il faut que ce soit
3:38:05sécurisé. Et qu'est-ce qu'on va voir
3:38:06dans le module 5 ? Dans le module 5, on
3:38:08va créer un un sas full stack. Donc le
3:38:11premier sas full stack qui sera créé.
3:38:14Donc un sas où il y aura le front end,
3:38:16le back end, une base de données, un
3:38:18vrai produit avec authentification,
3:38:20dashboard, gestion de données et la
3:38:22sécurité sera intégrée dès le départ. À
3:38:26tout de suite. Alors, bienvenue dans le
3:38:28module 5 de la formation Easis. Donc,
3:38:30dans ce module là, on va dire que c'est
3:38:32the module, d'accord ? C'est à partir de
3:38:34maintenant qu'on va commencer à voir les
3:38:35choses sérieuses. C'est là qu'on va
3:38:37commencer à créer de vraies app parce
3:38:39que juste ici, on n pas vraiment créé
3:38:40des apps, on a créé des sites web, on a
3:38:43créé une page, une landing page, un CV
3:38:45en ligne. Donc c'est bien pour apprendre
3:38:46mais c'est des sites statiques. Il y a
3:38:48pas de base de données, pas
3:38:49d'utilisateur, pas de logique, pas de
3:38:50création de compte et cetera.
3:38:52Maintenant, à partir de ce module là, on
3:38:53va commencer à construire des appes
3:38:55beaucoup plus complètes. Donc ce qu'on
3:38:57va construire dans ce module 5 là, c'est
3:38:58un outil de facturation. Donc un une
3:39:01vraie app, d'accord ? Avec un front end,
3:39:04un back end. Des utilisateurs pourront
3:39:06s'inscrire, se connecter, créer des
3:39:07factures, suivre les paiement et on va
3:39:09déployer tout cela en ligne pour que ce
3:39:11soit accessible partout dans le monde.
3:39:13Mais avant de de se lancer, je vais
3:39:15t'expliquer un peu le processus qu'on va
3:39:17suivre parce que quand tu construis un
3:39:19SAS, tu ne fais pas tout en même temps,
3:39:22d'accord ? Il y a un ordre précis en
3:39:23tout cas que moi je suis. Et cet ordre
3:39:25là, c'est ce que j'appelle le Viboding
3:39:27design loop. D'accord ? Donc c'est un
3:39:29peu les étapes sur par lesquelles je
3:39:31passe quand je veux créer un SAS. Donc
3:39:33le Vibe Coding Design Loop, c'est un
3:39:34parcours qu'on suit à chaque fois qu'on
3:39:36crée une application, quel que soit le
3:39:38projet, c'est toujours le même ordre en
3:39:40tout cas que moi j'utilise. Il y a pas
3:39:42vraiment de vérité universelle, c'est
3:39:43juste que moi c'est ce que je trouve qui
3:39:45marche le mieux. Donc je t'explique.
3:39:46Donc l'étape 1, je fais ce qu'on appelle
3:39:48de l'inspiration design. D'accord ? Dans
3:39:51cette étape, tu commences par le visuel.
3:39:53tu vas sur des sites comme par exemple
3:39:54Dribble ou Behinds, c'est des sites où
3:39:56il y a juste plusieurs designs qui sont
3:39:59là-bas sur lesquels tu peux t'inspirer.
3:40:01Donc je cherche des designs qui
3:40:02ressemblent un peu à ce que je veux
3:40:04faire. Je prends des captures d'écran et
3:40:06l'objectif en fait en faisant ça, c'est
3:40:07juste d'avoir une référence visuelle
3:40:09claire avant de demander à Li de faire
3:40:11quoi que ce soit. Il faut d'abord que
3:40:12toi-même tu saches ce que tu veux
3:40:15réaliser. Maintenant à l'étape 2, je
3:40:17vais faire ce que je je trouve, c'est
3:40:19l'animation. Donc c'est optionnel hein,
3:40:21tu n'es pas obligé de le faire mais ça
3:40:22rend quand même tes app beaucoup plus
3:40:24pro. Donc tu ajoutes des transitions,
3:40:26des animations survol quand la souris
3:40:28par exemple arrive sur un bouton, il y a
3:40:30un petit effet. D'accord ? Des c'est ce
3:40:32type de changement qu'on va faire et
3:40:34c'est ça qui va donner une sensation
3:40:36d'avoir un produit fini. C'est très
3:40:38subtil, mais la différence qu'elle fait
3:40:40en terme de comment les gens vont
3:40:42percevoir ton app et ton site, elle est
3:40:44vraiment colossale. Donc euh l'étape 3,
3:40:46je commence à voir les fonctionnalités
3:40:48principales. Donc là, je vais construire
3:40:50la logique. Donc le dashboard, les
3:40:52widgets, le crud. Donc quand je te dis
3:40:54cre, C R UD. Donc c'est tout simplement
3:40:57un sigle qui veut dire créer, read,
3:41:00update, delete, donc créer, lire, mettre
3:41:03à jour et supprimer. Généralement, tous
3:41:06les sites au monde que tu vois, c'est
3:41:08basé sur du crud. Par exemple, quand tu
3:41:10vas sur Facebook, tu peux créer un post,
3:41:12tu peux lire les post des gens, tu peux
3:41:14mettre à jour un post et tu peux par
3:41:16exemple supprimer un post. Quand tu vas
3:41:18sur ta chaîne YouTube que tu publies une
3:41:20vidéo, tu peux créer une vidéo, tu peux
3:41:22lire une vidéo, tu peux mettre à jour
3:41:24une vidéo et tu peux supprimer une
3:41:26vidéo. En fait, la base de de en fait,
3:41:28c'est la base de tout. C'est-à-dire que
3:41:30tous les sites que tu vois au monde,
3:41:31même euh PayPal, tu peux créer une
3:41:33transaction, tu peux voir une
3:41:34transaction, tu peux peut-être mettre à
3:41:36jour annuler une transaction et tu peux
3:41:38supprimer une transaction. Donc c'est un
3:41:39peu comme ça que ça se passe. Donc
3:41:41[musique] une fois que ton appes quatre
3:41:42fonctionnalités, on peut dire que elle a
3:41:45elle a le creux, c'est-à-dire que elle
3:41:46[musique] a des fonctionnalités qu'un
3:41:47utilisateur aura besoin pour par exemple
3:41:50interagir avec ton site. Donc on va
3:41:52faire ça. On va connecter cela avec la
3:41:54base de données et c'est là où
3:41:55l'application fait les choses pour de
3:41:56vrais, d'accord ? Pas juste afficher du
3:41:58texte. par exemple sur les sites qu'on a
3:42:00eu à faire. Donc on a fait un site pour
3:42:02une entreprise, on a fait un un CV en
3:42:04ligne, on a fait juste des informations,
3:42:06il y a rien de vraiment exceptionnel.
3:42:09D'accord ? Mais là, on va commencer à
3:42:11vraiment faire des choses avec de la
3:42:13logique. Une fois qu'on fait ça, la 4ème
3:42:15étape, on va faire un test local et
3:42:17itération. Donc quand je dis test local,
3:42:19c'est simple, c'est juste que tu testes
3:42:20sur ta machine, tu cliques un peu
3:42:22partout, tu essayes de casser des choses
3:42:24pour voir si ça marche et chaque bug que
3:42:27tu trouves, tu le corriges, tu itèes
3:42:28jusqu'à ce que ça marche. En fait, il
3:42:30n'y a pas de de prompte miracle que tu
3:42:33vas donner et qui va te donner un
3:42:34produit fini sans bug. C'est pas
3:42:36possible. D'accord ? C'est juste qu' te
3:42:38li te crée quelque chose, tu vois, tu
3:42:39testes, tu lui dis "Ah, OK, là j'ai
3:42:41testé, ça marche pas." Il le règle, tu
3:42:43testes, tu trouves encore autre chose et
3:42:44tu tournes. C'est une boucle que tu
3:42:46fais. tu testes, tu corriges, tu testes,
3:42:47tu corriges jusqu'à ce que tu es quand
3:42:49même fait un test où tu te dis que voilà
3:42:52là les fonctionnalités en tout cas qui
3:42:53sont très critiques pour mon app marche
3:42:55bien et là tu passes à l'étape suivante
3:42:57qui est la base de données. Donc quand
3:42:59je te parle de base de données, c'est
3:43:01tout simplement on va connecter une base
3:43:03de données. Donc il y a plusieurs types
3:43:05de bases de données mais comme je t dit
3:43:06pour les débutants, je conseille
3:43:08toujours Superbase. Donc Superbase c'est
3:43:10c'est en fait c'est un outil, il y a la
3:43:12base de données, tu pourras aussi faire
3:43:14de l'authentification. C'està-dire en
3:43:15fait on va y arriver mais l'idée c'est
3:43:18que euh quand quelqu'un vient et qui
3:43:21crée des Moi, en fait j'ai des amis qui
3:43:22ont plusieurs s qui marchent, ils ont
3:43:24des milliers d'utilisateurs, ils ont
3:43:25toujours sur Super base, d'accord ? Il
3:43:27est très puissant et hyper simple. Donc
3:43:29on va utiliser Superbase. Avec
3:43:30Superbase, on va remplacer les données
3:43:33fictives par des vraies données. Quand
3:43:34on va créer notre apput design, on verra
3:43:36des données, c'est des fausses données,
3:43:38des faux noms de clients, des fausses
3:43:39factures et cetera. Mais une fois qu'on
3:43:41va tester, on voit que tout ça c'est
3:43:43bon, on va connecter maintenant à notre
3:43:44vraie base de données. Comme ça, notre
3:43:46app ne va afficher que des données
3:43:48réelles. Et on va tester que quand on
3:43:50crée par exemple un client, il se
3:43:52sauvegarde. Quand on crée une facture,
3:43:54il se sauvegarde, il se lit, il se
3:43:56modifie correctement. Donc qui a le full
3:43:58crud. Ensuite l'étape 6, on fera
3:44:00l'authentification. Donc on va ajouter
3:44:02un système de connexion, d'inscription,
3:44:05de déconnexion et cetera. Donc et le
3:44:08middleware, d'accord ? On va avoir aussi
3:44:09les row level security. On a parlé de ça
3:44:12sur le le module de sécurité. Ensuite,
3:44:15l'étape 7, euh on va déployer tout
3:44:17simplement euh on va mettre sur GitHub
3:44:19et ensuite on va mettre sur Versel. Donc
3:44:21je pense que ça on l'a déjà fait. Euh
3:44:23c'est juste la mise en ligne de notre de
3:44:25notre site et euh l'étape 8, je fais des
3:44:28tests finaux end to end, c'est-à-dire de
3:44:30bout à bout. Je vais tester en
3:44:32production, je vais faire les derniers
3:44:33ajustements et je vais faire des tests.
3:44:36En fait, je vais juste vérifier mon app.
3:44:38Et c'est ce parcours qu'on va suivre
3:44:39maintenant, étape par étape. Et une fois
3:44:41que tu veux créer une autre app, tout ce
3:44:42que tu fais, bah tu tu reviens ici, tu
3:44:45vois là euh des inspirations de design,
3:44:47tu trouves ton idée d'abord, il faut
3:44:49d'abord savoir ce que tu veux faire. tu
3:44:50vas aller te t'inspirer, tu trouves des
3:44:52designs, tu fais des petites animations
3:44:54si tu veux, c'est optionnel, tu gères
3:44:56les fonctionnalités principales, en tout
3:44:58cas au niveau de ton de ton design, tu
3:45:00fais des tests en local, tu connectes
3:45:02une base de données, tu fais
3:45:03l'authentification, tu déploies en ligne
3:45:06et tu fais des tests. Donc vraiment,
3:45:07c'est la loupe que je suis
3:45:08personnellement pour faire mes designs.
3:45:10Mais après, il y a une version améliorée
3:45:13de ce loop là. D'accord ? Mais c'est une
3:45:15version pour l'instant que je ne vais
3:45:16pas te montrer parce que je trouve que
3:45:18ça va juste complexifier. Par exemple,
3:45:20ici, au lieu de faire euh des
3:45:21inspirations design, j'utilise ce qu'on
3:45:23appelle des MCP. Donc, il y a plusieurs
3:45:25outils. Il y a Stitch, il y a Banani euh
3:45:27qui me permettent de personnellement
3:45:29designer mes app. D'accord ? Avec de
3:45:32l'IA, d'accord ? Euh on fera ça et euh
3:45:35là, en fait, tu auras une plus grosse
3:45:37maîtrise sur ton design. Mais au début,
3:45:39ça c'est bien. D'accord ? et on va
3:45:41utiliser Gemini 3.1 Pro High qui est
3:45:43l'un des modèles les en tout cas que je
3:45:46trouve qu'ils sont beaucoup plus forts
3:45:48pour euh pour faire des designs.
3:45:50D'accord ? Et pour tout ce qui est la
3:45:51logique, on va commencer à voir un peu
3:45:54euh le plan d'implémentation. On va on
3:45:56va utiliser Cloud code. Donc on va voir
3:45:57un peu comment on va utiliser Cloud
3:46:00Clode à partir de ce module là. Donc
3:46:03voici un peu la Vibe Coding, le Vipe
3:46:06Coding Design Loop. Et euh on va on va
3:46:09maintenant passer à l'outil qu'on va
3:46:11créer qui est tout simplement un outil
3:46:13de facturation que j'appelle easy
3:46:14facture. Donc ceux qui me connaissent
3:46:16savent bien que j'aime bien Easy. Donc
3:46:17pourquoi un outil de facturation c'est
3:46:19simple, c'est parce que c'est un
3:46:20problème africain, d'accord, que tous
3:46:21les entraîneurs africains, ils ont la
3:46:23majeure partie. Donc je me suis juste
3:46:25dit euh c'est ça qu'on va faire,
3:46:27d'accord ? Comme ça, on va construire un
3:46:28outil que les gens euh vont se dire
3:46:31"Ouais, ça c'est un truc que j'aurais
3:46:32lancé ou bien que j'aurais utilisé."
3:46:34Donc voici ce qu'on va construire
3:46:36concrètement. Donc on aura un dashboard
3:46:38avec des stats. Donc total facture payé
3:46:41et et montant en attente. Par exemple la
3:46:43création de facture avec nom du client,
3:46:47d'accord ? Liste des articles, quantité,
3:46:49prix TVA 18 %. Au Sénégal par exemple,
3:46:51la TVA c'est à 18 % et le total qui se
3:46:54calcule automatiquement, d'accord ? La
3:46:56liste des factures avec les statuts donc
3:46:58bruyant, envoyé, payé, en retard et
3:47:01cetera. La modification et la
3:47:03suppression de facture. D'accord ? et
3:47:06l'authentification pour que chaque user
3:47:08ne voit et ne puisse interagir qu'avec
3:47:10ces données. Donc là, on parle encore de
3:47:12row level security. Donc c'est un vrai
3:47:13produit que les gens peuvent utiliser et
3:47:15c'est ce qu'on va construire en
3:47:17utilisant la loupe dont je viens de te
3:47:19parler. Maintenant, quels sont les
3:47:21outils qu'on va utiliser ? Donc, quelle
3:47:22est la stack technique ? Donc, on a
3:47:25parlé de stack technique. Comme je t'ai
3:47:26dit, il y a plusieurs outils que tu peux
3:47:27utiliser pour créer des des des sassces
3:47:30et tout. Mais nous avant de coder,
3:47:31d'accord, je vais te rappeler les
3:47:33briques qu'on utilise et comment elles
3:47:35se connectent. Donc on a quatre briques
3:47:37principales. D'accord ? Donc on a NextJs
3:47:39qui est notre front end et notre back
3:47:41ends. Donc c'est ça une particularité et
3:47:44une des forces de NextJs, c'est qu'il te
3:47:46permet de créer en même temps le front
3:47:48et le back [musique] grâce à un
3:47:50mécanisme que je vais t'expliquer tout à
3:47:51l'heure. Donc c'est un framework qui
3:47:53gère ce que l'utilisateur voit et en
3:47:56même temps la logique serveur. Donc
3:47:58c'est là qu'on va écrire notre code.
3:48:00Ensuite on a Superbase qui est une base
3:48:02de données. Donc on a parlé de ça. C'est
3:48:04notre base de données. C'est là que tous
3:48:05les données vont être utilisé stockées.
3:48:08les utilisateurs, les clients, les
3:48:10factures et cetera. On a aussi Superbase
3:48:12off, donc l'authentification, c'est
3:48:13notre système d'authentification. C'est
3:48:15ce qui va gérer l'inscription, la
3:48:17connexion, les tokens et cetera. Et on a
3:48:20Versel qui est notre hébergeur. Donc
3:48:22c'est ce qui met notre application en
3:48:24ligne et la rend accessible au monde
3:48:26entier. Maintenant, comment ces briques
3:48:28là se parlent entre eux ? Donc on a le
3:48:31front end NextJs d'accord qui envoie des
3:48:34requêtes à Superbase pour lire et écrire
3:48:37des données. Donc il parle aussi à
3:48:39Superbase off pour vérifier les
3:48:41connexions et tout est hébergé sur
3:48:44Versel. Donc il y a des alternatives, il
3:48:46existe des alternatives à Superbase, on
3:48:47en a parlé, il y a Firebase de Google ou
3:48:49bien il y a même Apprght mais Superbase
3:48:51est open source et gratuit pour
3:48:53commencer. il utilise Postgress SQL qui
3:48:56est le standard, c'est pour ça qu'on l'a
3:48:58choisi. Donc Postgress SQL, c'est juste
3:49:00on va dire, c'est juste une manière
3:49:01d'organiser les données dans une base de
3:49:03données. [musique] D'accord ? C'est
3:49:04aussi simple que cela. Donc maintenant,
3:49:06il y a un concept important que je veux
3:49:08te présenter, c'est le serve. Donc
3:49:11traditionnellement quand tu crées une
3:49:13application à tu as besoin d'un serveur.
3:49:15Donc un serveur comme je t'ai dit c'est
3:49:17juste un ordinateur qui tourne 24 he sur
3:49:1924 7 jours/ 7 il est là allumé en
3:49:21permanence en train d'attendre des
3:49:23requêtes. Même si personne n'utilise ton
3:49:25apph
3:49:27quand même tourner et tu payes pour ça.
3:49:29Donc ça peut te coûter 6000, 10000 50000
3:49:31500000. Ça dépend selon la taille de ton
3:49:33serveur et la taille de ton trafic. la
3:49:35taille des requêtes, c'estàdire le
3:49:36nombre de requêtes que le serveur il
3:49:37gère et cela même si personne ne
3:49:39l'utilise. Donc le serveurless c'est
3:49:41tout simplement l'inverse. Donc le
3:49:43serveurless d'accord, il n'y a pas
3:49:44vraiment de serveur qui tourne en
3:49:46permanence. Donc ton code backend tourne
3:49:49dans ce qu'on appelle des fonctions
3:49:51serverless. Donc ce sont des petits
3:49:53morceaux de code qui s'activent
3:49:55uniquement quand quelqu'un fait une
3:49:57requête. Une fois qu'ils font leur
3:49:58travail, ils s'éteignent immédiatement
3:50:00après. Donc en fait c'est comme si tu as
3:50:02un serveur à la demande, d'accord ? il
3:50:04ne fonctionne que lorsqu'il y a du
3:50:05travail à faire. Donc c'est comme une
3:50:06lumière avec un détecteur de mouvement.
3:50:08Quand quelqu'un passe, la lumière
3:50:10s'allume. S'il y a personne, la lumière
3:50:11s'atteint. Et le résultat bah c'est que
3:50:14si tu as zéro utilisateur, tu payes 0é
3:50:16franc. À 10 utilisateurs, tu payes
3:50:18presque rien. À 10000 utilisateurs, tu
3:50:19payes un peu plus. Mais c'est toujours
3:50:22proportionnel à ton usage. Donc il y a
3:50:23des avantages, il y a des inconvénients,
3:50:25mais surtout si tu commences et tu es tu
3:50:27crées de nouvelles applications, c'est
3:50:28vraiment intéressant et c'est pour ça
3:50:30que Versel est parfait pour nous. NextJS
3:50:33sur Versel, c'est du serverless par
3:50:35défaut. D'accord ? Donc tu lances sans
3:50:38rien payer et tu ne gères aucun serveur.
3:50:41Donc pas de machine à configurer, pas de
3:50:42Linux à maintenir, pas de Le serveur
3:50:45plante à 3h du matin, d'accord ? Tu
3:50:47déploies juste ton code et [musique] ça
3:50:49marche. Ensuite, on a Superbase qui
3:50:50fonctionne aussi en serveurlesseless
3:50:52pour nous. Donc la base de données est
3:50:53hébergée sur Superbase. Donc tu n'as
3:50:55rien à gérer de ce côté-là. Donc en
3:50:57gros, avec notre stack. Donc quand je
3:50:58dis stack, c'est tout simplement le
3:51:00groupe d'outils qu'on va utiliser qui
3:51:01est NextJs, Superbase et Versel. On peut
3:51:04lancer un sas sans dépenser un seul
3:51:06franc en hébergement au début parce
3:51:09[musique] que c'est gratuit jusqu'à ce
3:51:10que tu a assez d'utilisateur pour que ça
3:51:13te coûte quelque chose et à ce moment-là
3:51:15bah tu génères déjà des revenus et tu
3:51:17payes tout simplement. Maintenant on va
3:51:18passer à la première étape du loop qui
3:51:20est l'inspiration et le design, d'accord
3:51:23? L'inspiration design et la
3:51:25planification. Donc on va pas demander à
3:51:27Lia de créer un design à partir de rien.
3:51:29On va lui donner une direction. D'accord
3:51:32? On va lui donner une direction. Et
3:51:33pour cela, on va aller chercher de
3:51:35l'inspiration. Donc on peut aller sur
3:51:36Dribble. Donc c'est un site où les
3:51:38designers du monde entier partagent leur
3:51:40création. D'accord ? Et euh je vais te
3:51:42montrer un peu comment ça marche. Donc
3:51:44on va aller là-bas. On va juste voir des
3:51:46des designs et on va choisir quelques
3:51:49captures d'écran. OK. Donc là je suis
3:51:50sur dribble. Donc là, je vais rechercher
3:51:53plusieurs choses. Donc ici, comme tu
3:51:55peux le voir, je fais quand même pas mal
3:51:57de recherches ici. Donc moi, je fais une
3:52:00application de facturation. Je vais
3:52:02rechercher par exemple Invoice website.
3:52:04Et là, tu peux voir que il y a pas mal
3:52:06de de dashboard. D'accord ? Je vais
3:52:08juste mettre invoice [musique]
3:52:10dashboard. Donc un dashboard pour la
3:52:12facturation. Et je peux voir en fait, je
3:52:14vais juste voir un peu s'il y a quelque
3:52:17chose qui m'intéresse, si je trouve un
3:52:20design qui m'intéresse. Euh par exemple
3:52:24ça,
3:52:25on va dire que ça c'est pas mal.
3:52:28D'accord ? Ça c'est un design qui est
3:52:30pas mal. Donc ce que je fais, moi je
3:52:32suis sur Mac. Euh je peux faire une une
3:52:35capture assez facilement. Je fais
3:52:37commande shift 4 et là je peux faire
3:52:40tout simplement une capture d'écran de
3:52:43de ce dashboard là. Donc et je peux voir
3:52:46si j'ai d'autres d'autres inspirations.
3:52:49Donc ça c'est c'est pas mal. D'accord ?
3:52:50On va juste s'inspirer. On va pas voler
3:52:52les design mais on s'inspire de ça pour
3:52:54pour avoir une base assez assez on va
3:52:57dire assez mature pour créer notre app.
3:52:59Ensuite, une fois que je fais ça, je
3:53:01vais faire invoice landing page,
3:53:03c'est-à-dire pour avoir une inspiration
3:53:05pour notre landing page. Donc un peu la
3:53:08page d'accueil. Donc je vais voir un peu
3:53:10ce qui se propose ici. Donc on a ça,
3:53:14invoice build for business. Ouais. Donc
3:53:18ça c'est pas mal. Donc ce que je vais
3:53:20faire, je vais voir si je peux l'ouvrir
3:53:22ouvrir l'image dans un autre onglet.
3:53:24Donc là, on a on a une image. Je vais
3:53:27tout simplement enregistrer l'image. Je
3:53:29vais l'appeler easy
3:53:32facture [musique] inspiration. Bon,
3:53:34allez, inspiration. Et je vais le
3:53:37sauvegarder dans mon bureau. Voilà,
3:53:41c'est bon. H donc là j'ai des
3:53:44inspirations. Donc c'est un peu comme
3:53:45ça. Disons que je veux faire une
3:53:47application de je sais pas moi de vente.
3:53:50Donc je vais faire je vais faire store
3:53:53dashboard. D'accord. Tu peux rechercher
3:53:55aussi en français si tu veux. Donc
3:53:57l'idée tu as donc ça me j'ai j'ai des
3:53:59inspirations d'app. Donc par exemple ça
3:54:02c'est une app où tu peux voir tes tes
3:54:05tes orders. Donc ça veut dire tes
3:54:06commandes et tes produits. Euh la la
3:54:09balance report. Donc c'est c'est juste
3:54:12voir ta balance quoi. Donc en fait
3:54:14l'idée l'idée c'est ça. On vient ici
3:54:16juste pour s'inspirer. Maintenant moi je
3:54:19je viens de moins en moins sur ces sites
3:54:21là parce que j'ai un autre système que
3:54:23je trouve que il est beaucoup plus
3:54:24efficace d'accord et je maîtrise
3:54:26beaucoup mieux le design mais il faut
3:54:28commencer quelque part. Donc je te
3:54:29conseille de commencer par là d'abord et
3:54:31de laisser Liat t'aider à faire la
3:54:34majeure partie du travail. OK,
3:54:36maintenant qu'on a nos designs, qu'on a
3:54:38nos inspirations, on va faire quelque
3:54:39chose de malin. On va pas vraiment
3:54:40demander à Lia de coder directement. Ce
3:54:42serait très bête de faire cela. Nous, on
3:54:44va faire les choses de manière
3:54:45professionnelle. Donc, on va d'abord lui
3:54:46demander de planifier. Pourquoi on lui
3:54:49demande de planifier ? Parce que un plan
3:54:51de de de travail, un plan de
3:54:53développement bienfait, c'est 80 % du
3:54:55travail. Donc, s'il y a un plan
3:54:56détaillé, elle va mieux coder, elle fait
3:54:59moins d'erreurs et elle a le un résultat
3:55:01beaucoup plus cohérent. Elle sait ce
3:55:02qu'elle fait. Donc moi ce que je fais,
3:55:04j'ouvre, j'utilise Cloud code
3:55:05généralement pour tout ce qui est
3:55:07planification parce que en fait selon
3:55:09mon expérience Cloud Code il est
3:55:10beaucoup plus intelligent pour ça. Donc
3:55:12sur les premiers modules, je t'ai déjà
3:55:13montré comment installer Cloud Code
3:55:15antigravity et cetera, mais je
3:55:17t'explique généralement les différents
3:55:19modèles et selon moi, quel modèle fait
3:55:21quelle tâche le mieux. Donc j'ai
3:55:23généralement j'utilise Cloud Code pour
3:55:25tout ce qui est planification parce que
3:55:27je trouve qu'il est qu'il est beaucoup
3:55:29plus fort d'accord pour ça. Donc je lui
3:55:31donne un prompt genre tu es seigneur
3:55:32hashtag réfléchis et génère un plan
3:55:34d'implémentation. Je vais lui donner un
3:55:35prompt beaucoup plus complet que ça.
3:55:37D'accord ? Je dans ce prompt je lui
3:55:39donne aussi mon design loop. Je vais te
3:55:41donner le prompt que je vais utiliser
3:55:44dans le document encore une fois ne
3:55:45t'inquiète pas. Et pour tout ce qui est
3:55:47le UI, d'accord ? Pour tout ce qui est
3:55:49le front end, j'utilise généralement
3:55:51Gemini euh sur anti gravity directement
3:55:53parce que je trouve que Gemini est
3:55:55beaucoup plus fort aussi pour ça. Bien
3:55:56vrai que on a un cloud code qui est
3:55:58aussi disponible directement sur Gemini
3:56:00mais comme je t'ai dit selon mon
3:56:01expérience euh je sais pas si c'est par
3:56:03design ou bien Google a fait exprès mais
3:56:05je trouve que les modèles Cloud Opus
3:56:07Cloud Cloud qu'on utilise directement
3:56:09dans Géini ils sont pas trop
3:56:10intelligents. C'est c'est vraiment c'est
3:56:12juste mon expérience et je trouve que je
3:56:14gagne beaucoup plus de qualité au niveau
3:56:17du code quand j'utilise directement
3:56:19Cloud chez chez et que quand j'utilise
3:56:22directement Gemini chez Google. D'accord
3:56:25? Parce que j'utilise le modèle de
3:56:26chacun. D'accord ? Et voilà. sur leurs
3:56:29propres outils et moi tout simplement
3:56:30derrière je me positionne comme un chef
3:56:32d' d'orchestre et je dis au aux quoi
3:56:35faire et ils le font et c'est aussi
3:56:36simple que ça. Donc ce que je vais faire
3:56:38c'est que je vais tout simplement aller
3:56:39sur antigravity et je vais te montrer
3:56:41comment je fais tout ça. Donc ça c'est
3:56:42juste un exemple de probl que tu peux
3:56:44utiliser. Il marche bien mais je trouve
3:56:46qu'il y a pas assez de détails. Donc moi
3:56:48sur mon prompt il y a beaucoup plus de
3:56:49détails et tu vas le voir tout de suite.
3:56:51OK donc là on est sur antigravity.
3:56:52D'accord. Donc on va ouvrir un petit
3:56:54gravity. Et une une fois que je suis là,
3:56:56la première chose que je fais toujours
3:56:58comme tu l'as vu, c'est que je je crée
3:56:59un nouveau un nouveau dossier. Donc je
3:57:02vais faire tout simplement open folder
3:57:04et là je vais faire nouveau dossier et
3:57:07ce dossierlà je vais l'appeler Easy
3:57:09Facture. D'accord ? Et je vais ouvrir le
3:57:12dossier. Donc là on a tout nouveau
3:57:14dossier et tout le travail qu'on va
3:57:15faire sera fait sur le dossier easy
3:57:17facture. C'est ici que sera le code et
3:57:19cetera. Maintenant ici on a Gemini.
3:57:22D'accord. Donc en fait ici on a tout
3:57:23simplement l'agent de Antigravity et ici
3:57:26euh sur le modèle sélectionné, tu peux
3:57:28voir que j'ai il y a Gemini 3.1 High. Et
3:57:31là je peux utiliser Cloud directement
3:57:33ici avec Clode opus mais comme je t'ai
3:57:35dit ce modèle là je le trouve pas trop
3:57:36intelligent. Donc moi ce que je fais je
3:57:39j'installe Cloud. Donc je l'ai déjà fait
3:57:41hein donc dans le dans les premiers
3:57:42modules. Donc je viens ici je clique sur
3:57:45l'icône cloud. Une fois que tu
3:57:46l'installes c'est bon. Donc je fais
3:57:48nouvelle session et là ça m'ouvre cloud
3:57:51ici. D'accord. Donc là, j'ai Clou
3:57:53d'ouvert. D'accord ? Donc je vais un peu
3:57:55rétrécir le terminal. Là, ce que je vais
3:57:57faire, c'est que je vais déjà uploader,
3:57:59lui donner les captures que j'ai fait,
3:58:02d'accord ? Donc les deux captures
3:58:04d'écran qui sont là. Donc là, tu peux
3:58:06voir, il y a euh Easy Facture, euh il y
3:58:10a le la landing page et ici, on a le
3:58:14dashboard. Donc, je vais lui donner ça
3:58:16juste comme référence et je vais lui
3:58:18donner ce prompt là. Donc euh ici, je
3:58:21m'efforce de voir quel est le modèle que
3:58:23j'utilise. Donc moi, j'utilise le modèle
3:58:26par défaut, d'accord ? Donc c'est le
3:58:28opus 4.6 avec 1 million de contextes.
3:58:30Donc euh voilà, c'est ça que j'utilise.
3:58:33Donc là, je lui donne ce prompt. Donc je
3:58:35lui dis "Tu es un architecte logiciel et
3:58:38designer seigneor de classe mondiale
3:58:40avec plus de 15 ans d'expérience dans la
3:58:42conception d'application de SAS de haute
3:58:44qualité. Tu as conçu des produits pour
3:58:46des entreprises de [musique] premier
3:58:47plan." Donc ça c'est un peu tu lui
3:58:49donnes un rôle, c'est très important.
3:58:50Généralement quand tu fais ça, tu as
3:58:52beaucoup plus de qualité dans ton
3:58:53output. On va construire un SAS full
3:58:55stack de facturation pour les
3:58:57entrepreneurs africains. C'est très
3:58:59important que tu fasses bien. C'est un
3:59:00produit que de vrais utilisateurs vont
3:59:02utiliser pour gérer leur argent. Et en
3:59:04tant qu'utilisateur, on veut pouvoir euh
3:59:06voir toutes les factures et les
3:59:08statistiques dans un beau beau
3:59:09dashboard. D'accord ? créer de nouvelles
3:59:12factures, euh gérer une liste de
3:59:15clients, suivre les statuts des
3:59:17factures, donc brouillon, envoyer, payer
3:59:19en retard, configurer les paramètres de
3:59:21l'entreprise, euh tout ce que une
3:59:23application de SAS de facturation
3:59:25classique inclurait. Donc le SAS doit
3:59:28utiliser NextJS, Superbase pour la base
3:59:31de données, l'authentification et Telwin
3:59:33CSS. Euh et on va déployer sur Verset.
3:59:37Donc je lui dis ici, je définirai l'Ux
3:59:39via des captures d'écran. Don ne
3:59:40t'inquiète pas euh des détails de design
3:59:43pour l'instant le flux sera d'abord on
3:59:46construit les fonctionnalités
3:59:47principales en utilisant les capture
3:59:48d'écran comme inspiration design tu
3:59:51prendras le style de design captures et
3:59:53tu l'utiliseras pour construire toutes
3:59:55les pages connectées. [musique] Ensuite
3:59:57on rendra le dashboard interactif avec
3:59:59des données locales et on s'assurera que
4:00:02les routes fonctionnent bien. Donc ça
4:00:03c'est la deuxième phase. Ensuite on
4:00:05ajoutera la base de données et les tests
4:00:07avec Superbase. Ensuite, on va ajouter
4:00:09l'authentification. Ensuite, on fera une
4:00:11landing page et finalement, on fera un
4:00:14passage de bout en bout pour s'assurer
4:00:15que tout fonctionne bien. Donc là, ici,
4:00:19je lui dis réfléchis fort. Exact. Bon,
4:00:20en fait, tu peux voir que c'est vraiment
4:00:22un prompt qui est assez assez solide.
4:00:25Généralement, vu que là on va juste
4:00:26faire de le dashboard, je ne vais pas
4:00:28lui donner la landing page, je vais
4:00:29juste lui donner le dashboard. Et là, je
4:00:32lui demande d'entrer en mode plan mode.
4:00:34D'accord ? plein mode. Ici, il va créer
4:00:37le plan et c'est ce plan là dont j'ai
4:00:38besoin. Donc, je fais entrer. Et là, on
4:00:41va juste attendre qu'il termine. Il va
4:00:44nous créer un plan d'implémentation de
4:00:47notre sas et c'est avec ce plan
4:00:48d'implémentation là qu'on va passer à la
4:00:51création de notre OT. Donc là, il va me
4:00:53demander, il va juste te poser des
4:00:55questions et à chaque fois tu fais juste
4:00:57yes. Tu fais juste yes et là, tu veux
4:00:59voir il y a plein de trucs qui t'écrit.
4:01:02il est en train de de réfléchir, il est
4:01:03en train d'utiliser ses ses outils et il
4:01:06va tout simplement commencer à créer le
4:01:09plan d'implémentation. Donc on attend
4:01:10qu'il termine. Généralement, si tu fais
4:01:12ça, tu peux tout simplement te lever,
4:01:15aller te faire un café en attendant
4:01:17qu'il termine. Ça peut prendre plus ou
4:01:19moins du temps. Ça dépendra de de la en
4:01:22fait de la lourdeur de la tâche. Et vu
4:01:23que tu lui dis de bien réfléchir, il va
4:01:25aussi prendre son temps. Donc on attend
4:01:27qu'il termine et on va voir ce qu'il va
4:01:29nous proposer. Donc là, comme tu peux le
4:01:31voir, il m'a fait un plan
4:01:32d'implémentation complet. Donc là, il a
4:01:35le contexte, d'accord ? il te donne la
4:01:38structure du projet. En fait, c'est pour
4:01:40ça qu'il faut toujours faire le plan
4:01:41parce que là, tu peux même voir quelle
4:01:43sera la structure du projet. Et du coup,
4:01:46Liana n'a en fait la li
4:01:50gravité, il va pas en fait, il va pas
4:01:52avoir le choix, il va suivre exactement
4:01:54ce qu'on lui demande de suivre. Donc, il
4:01:56va pas halluciner et cetera. C'est tu as
4:01:58vu là, c'est les composants. Donc là, on
4:02:00aura les tout ce qui est UI. Donc là, il
4:02:04y aura aussi les composants pour tout ce
4:02:06qui est les invoice, les clients
4:02:08dashboard et cetera. Là, il lui donne
4:02:10des tables à utiliser dans la base de
4:02:13données. Donc comme tu peux le voir,
4:02:14donc comme je t'ai dit, une base de
4:02:16données, c'est juste des tables.
4:02:17D'accord ? Et chaque table, il y a une
4:02:19table qui va gérer les profils, une
4:02:20table qui va gérer les compagnies, une
4:02:22table qui va gérer les clients et ils
4:02:24vont tous être reliés en fait conn
4:02:28interconnectés par l'ID, d'accord ? un
4:02:30utilisateur sur la table de profil, un
4:02:32utilisateur avec un UI ID, d'accord ? On
4:02:35saura exactement quelles sont ces
4:02:37compagnies parce qu'on va juste chercher
4:02:38le le UI ID, le le user ID, d'accord,
4:02:42qui est là. Donc la logique métier et
4:02:45cetera. Donc là, tu peux tu peux lire
4:02:47hein et voir un peu ce ce qui te ce qui
4:02:49propose. Tu as vu là, il y a les phases.
4:02:53D'accord. Donc c'est cool ça c'est les
4:02:55phases. Maintenant euh ici il te pose
4:02:58des questions. Donc là tu vas juste
4:02:59presser escape parce que là si tu lui
4:03:01dis yes en fait Claude code lui euh
4:03:03Claude lui-même va se mettre à coder.
4:03:05D'accord ? On va utiliser antigravity
4:03:07pour ça. Donc là je vais juste cliquer
4:03:09sur escape. D'accord ? Et ce que je vais
4:03:11faire maintenant c'est que je vais je
4:03:14vais tout simplement copier tout ce plan
4:03:16là. D'accord ? Donc je copie tout le
4:03:19plan d'intégration qu'il m'a donné. Donc
4:03:21une fois que j'ai copié le plan
4:03:22d'implémentation, maintenant ce que je
4:03:24vais faire c'est que je vais aller dans
4:03:26anti gravity, je vais aller dans le chat
4:03:27et je vais coller le plan
4:03:29d'implémentation qui est là et je vais
4:03:32aller jus en haut, d'accord ? Je vais
4:03:35copier un prompt et [musique] je vais
4:03:36lui dire ça ici. Avant de lui donner ça,
4:03:39je vais mettre ça en haut. Je lui dis
4:03:40"Che un designer et développeur front
4:03:42end de classe mondiale avec plus de 15
4:03:44ans d'expérience dans la création
4:03:45d'interface. Voici le plan
4:03:47d'implémentation pour notre sas de
4:03:49facturation. Donc je lui donne tout
4:03:50simplement le plan. D'accord ? Je
4:03:53vérifie ici que je j'utilise Gemini 3.1
4:03:57High. Ensuite ce que je vais faire, bon
4:03:58je laisse ici planning, je laisse Gemini
4:04:01et là je lui donne je lui donne aussi
4:04:04une la capture d'écran. Donc je lui
4:04:07donne aussi la capture d'écran pour
4:04:08qu'il puisse s'inspirer de la capture.
4:04:10Et à la fin du prompt, je lui dis je
4:04:12t'ai aussi donné une capture d'écran
4:04:14d'inspiration pour le design. Donc tu
4:04:16vas t'inspirer de cela pour créer notre
4:04:18dashboard. OK, maintenant ce que je
4:04:20fais, voici une astuce. Euh, je lui dis
4:04:22exactement ce qu'il doit faire en
4:04:24premier, genre quelles sont les pages
4:04:25qu'il doit créer en premier. D'accord ?
4:04:27Euh par exemple, moi je lui donne ce
4:04:29promte là qui sera aussi disponible.
4:04:31Donc euh euh par rapport à à mon design.
4:04:34D'accord ? Donc ici, je lui dis commence
4:04:36d'abord par construire le dashboard et
4:04:38la sidebar de navigation. Ensuite, en
4:04:40suivant le plan d'implémentation et en
4:04:41t'inspirant du style. D'accord ? Donc tu
4:04:44lui il y a les visuels de capture. Voici
4:04:46et je lui donne les règles à suivre.
4:04:48Euh, prends le [musique] style de design
4:04:50captures, d'accord ? Typographie et
4:04:52applique-les à toutes les pages. Pour
4:04:53l'instant, utilise les données fictives
4:04:55codées en dur. Pas de données encore.
4:04:58Pas de base de données encore. Les
4:04:59montants doivent être affichés en
4:05:01francfa. Euh, d'accord ? En fait, tu lui
4:05:03donnes juste des détails et là je fais
4:05:05entrer. Et ici, une fois que je lui
4:05:07donne ça, d'accord, ce que je fais, bah
4:05:09j'attends. Donc comme je t'ai dit, tu
4:05:11peux aller faire autre chose, mais tu
4:05:14attends qu'il te donne le plan
4:05:15d'implémentation parce que en fait
4:05:17Gemini, une fois que il vu qu'il est en
4:05:20mode planning, [musique] bah ce qu'il va
4:05:21faire, il va d'abord te donner un plan
4:05:23d'implémentation. Il va d'abord analyser
4:05:24ce que je veux faire. Ensuite, il va me
4:05:26proposer un plan d'implémentation. Il va
4:05:28me dire "OK, maintenant c'est ça que je
4:05:29veux faire, ça, ça". Et après moi je
4:05:31vais lui dire go, vas-y. Et il va
4:05:33commencer à faire le code. Donc on
4:05:36attend. Yes. Donc comme tu peux le voir
4:05:37basé sur notre prompt, il nous a proposé
4:05:40un plan d'implémentation. Donc
4:05:42initialisation des effectures et
4:05:43construction du dashboard. Donc euh des
4:05:47système et couleur. Je m'inspirerai des
4:05:49couleurs de la capture d'écran. Euh
4:05:51données de démarrage. Comme demandé,
4:05:52aucune base de données ne sera initiée
4:05:54pour le moment. nous utiliserons des mo
4:05:56data donc de des données juste que mis
4:05:58en dur comme ça afin de valider purement
4:06:01le design. Donc euh ensuite proposer
4:06:05change. [musique] Donc là il te propose
4:06:08d'accord warning. Souhaitez-vous que
4:06:10nous suppriions les fichiers existants
4:06:12de NextJs comme le contenu global et tac
4:06:15tac. Voilà donc de toute façon on a même
4:06:17pas de fichiers. Donc là, je dis juste
4:06:19procede et il va commencer à faire euh
4:06:22le code. Donc là, il a réellement
4:06:24commencé maintenant à faire le il va
4:06:27commencer à réfléchir pour faire le le
4:06:30l'application pour commencer à coder en
4:06:32tout cas le front, c'est-à-dire le euh
4:06:35la partie visible de l'application. Et
4:06:37ensuite, on va juste voir ce qu'il fait.
4:06:39On lui fait des retours, on lui dit
4:06:40modifie ça, on lui fait des retours.
4:06:42Donc c'est une loupe qu'on fait comme je
4:06:43t'ai dit. Donc on teste et on fait une
4:06:45review et c'est [musique] très
4:06:46important. Donc là, tu as vu, il m'a
4:06:48proposé ça. D'accord ? Je fais run tout
4:06:51simplement. Et pourquoi je vois cela
4:06:52tout simplement ? C'est parce que ici au
4:06:54niveau de autoexécution, il y a request
4:06:56review. D'accord ? Si je fais always
4:06:59proced. D'accord. Maintenant euh il va
4:07:02always proced. D'accord ? L'idée c'est
4:07:04que tu as vu maintenant il a commencé à
4:07:06créer le code, il a initialisé
4:07:09un dossier. Donc là tu peux voir il y a
4:07:11src, il y a Link, git ignore. Donc on a
4:07:15déjà parlé de ce fichier là, les git
4:07:17ignore. Euh il y a les fichiers de
4:07:19configuration de Next, il y a le fichier
4:07:22Tailwin. Donc Tailwin c'est tout
4:07:23simplement euh une bibliothèque qui nous
4:07:26permet d'écrire du CSS plus rapidement.
4:07:28Donc on a parlé de CSS euh c'est ce qui
4:07:31nous permet d'avoir des designs jolis.
4:07:33on va dire sur notre site qui nous
4:07:35permet de designer nos sites. Donc on a
4:07:37les next config, Next PH package. Donc
4:07:39c'est tout simplement des configurations
4:07:41de NextJs. Là il a fait les note
4:07:43modules. Donc il a installé les
4:07:44packages. En fait ce qu'il a fait c'est
4:07:46queil a euh enlevé Cloud et il a tout
4:07:49simplement fait un npm install. Mais bon
4:07:52c'est pas grave. Euh il a pas enlevé
4:07:54cloud, il a juste enlevé le fichier
4:07:56pointcloude. D'accord. Après ça on
4:07:58pourra le remettre. C'est pas c'est pas
4:07:59très compliqué. Donc c'est un peu la
4:08:01guerre des agents. [rires] Donc c'est
4:08:03pourquoi toi tu dois bien orchestrer.
4:08:05Mais on a le plan d'implémentation pour
4:08:07l'instant. Donc pour ce projet là on va
4:08:09plus réutiliser code Claud. Donc c'est
4:08:11pas grave. Après quand on va vouloir les
4:08:14faire cohabiter, coexister, je te
4:08:16montrerai dans un prochain projet. Quand
4:08:18tu as des on va dire des euh des
4:08:21fenêtres comme ça, d'accord ? et il te
4:08:25pose une question, tu fais juste accepte
4:08:26tout simplement parce que là il te
4:08:28demande l'autorisation de tout
4:08:30simplement installer quelque chose. Et
4:08:32vu que tout à l'heure j'ai fait Always
4:08:33Proceed mais j'ai pas encore en fait
4:08:35Always Proceed ne peut pas être appliqué
4:08:37à ce projet cette tasque cette tâche en
4:08:40tout cours parce que j'ai lancé cette
4:08:42tâche là avant de changer les
4:08:44configurations. Donc ça va se mettre ça
4:08:46va se mettre à jour une fois que j'aurai
4:08:48une fois que cette tâche là sera
4:08:49terminée. Sinon, je peux tout simplement
4:08:51le couper ici et après lui dire continue
4:08:53et il va se il va redémarrer. Mais bon,
4:08:56c'est pas grave. Je le laisse terminer
4:08:57d'abord et j'attends qu'il termine. OK,
4:09:00donc là il a terminé. Il m'a même créé
4:09:02un walkthough. Donc je pense qu'on a
4:09:04parlé des walkthrough, donc c'est les
4:09:05parcours. Donc à chaque fois qu'il
4:09:07termine une tâche, il va te donner les
4:09:09parcours, il va te dire ce qui a été
4:09:11construit et cetera. Donc ce qu'on va
4:09:14faire, c'est qu'on va tout simplement h
4:09:17aller voir ce qui nous a proposé.
4:09:20Généralement ce que je fais c'est que
4:09:21j'ouvre le le local host. Donc je clique
4:09:24juste sur le lien. D'accord ? Il va
4:09:26ouvrir le local host et là waouh !
4:09:28Qu'est-ce qu'on voit ? Une erreur. C'est
4:09:30une réalité du coding. Donc si tu as
4:09:33peur des erreurs, mon gars, tu vas être
4:09:34euh tu vas avoir les problèmes. Donc et
4:09:37c'est cool que j'arrive à avoir des
4:09:39erreurs comme ça. Comme ça, je te montre
4:09:40comment les fixer. C'est très simple.
4:09:41tout ce que je fais, soit je fais une
4:09:43capture d'écran, soit je copie tout ça.
4:09:45Je copie tout ça, je viens et je lui dis
4:09:48"Bon, j'ai essayé de voir là, voici
4:09:49l'erreur que j'ai." Et là, je colle tout
4:09:52simplement. En fait, c'est aussi simple
4:09:55que cela. C'est juste qu'il y a un
4:09:56problème euh de package qui a été
4:10:00installé et qui n'est pas à jour. C'est
4:10:01ça qui t'excrit. Il y a rien d' Il y a
4:10:03rien d'extraordinaire. Mais à chaque
4:10:05fois que tu auras un problème, d'accord,
4:10:07tu copies le problème et tu peux même
4:10:09faire une capture d'écran pour qu'il y
4:10:10ait un peu plus de contexte et tu lui
4:10:11les renvoies. Par exemple, là il est en
4:10:13train de de voir un peu, il va faire les
4:10:16modifications. D'accord ? Et une fois
4:10:19qu'il fait les modifications, peut-être
4:10:21qu'on aura un 2è ou un troisème problème
4:10:24et on verra encore. Donc là, je fais
4:10:27recharger. Je vois que j'ai toujours ce
4:10:29problème, un autre problème. Donc ça
4:10:31c'est un autre problème différent. Bah,
4:10:33je copie, je colle, je lui donne. Donc
4:10:35c'est un peu ça le on va dire le test
4:10:37loop. Et c'est pourquoi c'est très
4:10:38important de toujours tester en local.
4:10:40En fait, c'est très simple. Soit il
4:10:41oublie d'installer les packages, soit il
4:10:43y a un petit problème. En fait, n'essaie
4:10:45même pas de comprendre. Juste copie le
4:10:48le comment dire, copie l'erreur et
4:10:51donne-lui. Et il va tout simplement voir
4:10:53c'est quoi le souci et il va le faire.
4:10:55parce que ces erreurslà en fait il y a
4:10:58en fait c'est un problème de CSS parce
4:11:00que là si je lis dans le fichier
4:11:02global.cs
4:11:03il y a Taelwid base qui est là d'accord
4:11:06donc euh il y a voilà il a utilisé une
4:11:10classe qui n'existe pas donc border
4:11:12border euh qui n'existe pas dans Global
4:11:14CSS. Donc il va faire les modifications.
4:11:17Donc là, ça fait deux fois que par
4:11:19exemple il a tout simplement dit queil a
4:11:22réglé le problème, mais tu peux voir que
4:11:24le problème il est toujours là. Donc
4:11:26cette fois-ci ce que je vais faire, je
4:11:27vais tout simplement faire une capture
4:11:30d'écran. D'accord ? Je lui donne la
4:11:32capture et je lui dis ceci. Donc là,
4:11:34c'est la deuxième fois que tu dis avoir
4:11:36réglé le problème, mais tu peux voir
4:11:37toujours que je je n'arrive même pas à
4:11:39voir le dashboard. Donc euh règle, fixe
4:11:42le problème. Essaie de voir c'est quoi
4:11:44exactement le problème, règle-le et tu
4:11:46peux ouvrir ton propre navigateur pour
4:11:48vérifier avant de me faire un feedback.
4:11:50Donc comme je te l'ai dit, Antigravity,
4:11:51il a son propre navigateur. Donc
4:11:53normalement, il devrait avoir la
4:11:55capacité de d'ouvrir son navigateur et
4:11:57de voir ce qu'il est en train de faire
4:11:59avant de te dire qu'il a réglé ou pas.
4:12:00Donc ça c'est un peu les réalités du
4:12:02vibe coding. Ça me rappelle un peu cette
4:12:04image là. D'accord ? Donc là, quand tu
4:12:07es en train sur cette phase là, quand la
4:12:09phase dans laquelle je suis, disons
4:12:10qu'on est dans cette phase là, d'accord
4:12:12? On creuse, on creuse, on creuse, on ne
4:12:14voit pas de résultat, on se dit est-ce
4:12:15que ce qu'on fait c'est bien ? Alors que
4:12:17peut-être que en fait on est en train
4:12:19d'avancer et une fois que tu vas
4:12:22dépasser cette phase là, que tu auras
4:12:23quelque chose qui marche là, tu pourras
4:12:25déjà tu vas atteindre c'est-à-dire ton
4:12:28objectif. Donc c'est un peu la mentalité
4:12:30à avoir lorsque tu fais du vibe coding.
4:12:32T lors que il y a des erreurs, c'est pas
4:12:34grave. D'accord ? Tu prends juste le
4:12:36temps de lire, tu donnes à Lia, tu lui
4:12:38demandes de bien vérifier et tout
4:12:40simplement euh tu attends que il te il
4:12:42te propose des solutions. Donc là, comme
4:12:45tu peux le voir, qu'est-ce qu'il fait ?
4:12:46En fait, il va ouvrir son propre
4:12:48navigateur. Donc ça, c'est son
4:12:49navigateur qu'il a ouvert. Moi, mon
4:12:51navigateur, il est là. Donc, il va
4:12:52ouvrir son navigateur, il va ouvrir le
4:12:55local host. Donc, par exemple, il va
4:12:56ouvrir le site et là, il va voir qu'il y
4:12:58a un souci, d'accord ? Et il va checker
4:13:01d'abord avant de te dire que c'est bon.
4:13:03Donc là, tu as vu, il a ouvert le
4:13:05l'éditeur, il voit que il va voir
4:13:07lui-même qu'il y a un problème, d'accord
4:13:09? Et il va le régler. Donc ça aussi
4:13:11c'est une des forces de d'antigravity
4:13:14qui fait que tu ne tu vas pas être
4:13:16coincé un peu dans ce loop tout le
4:13:18temps. Donc là, il a pris une un
4:13:20screenshot, tu as vu ? T screenshot,
4:13:22d'accord ? Et là, il dit un
4:13:25malheureusement le dashboard ne se
4:13:27montre pas parce qu'il y a un problème
4:13:29de build error. D'accord ? et là il va
4:13:32savoir qu'est-ce qu'il doit faire. Donc
4:13:33ça aussi, on va dire, c'est une des
4:13:35tricks. C'est un c'est c'est une astuce.
4:13:38Tu peux juste lui dire ouvre ton
4:13:39navigateur et vérifie par toi-même si ça
4:13:41marche avant de me dire que ça marche.
4:13:43Donc là finalement elle a réussi à
4:13:44vérifier le problème. J'étais en train
4:13:46de manger moi. Tu vois le vibe cing l a
4:13:48[musique] boss pour toi et toi tu
4:13:49manges. C'est aussi simple que cela. Il
4:13:51a vérifié que c'est bon et là il te dit
4:13:53ouais là je vérifié et je suis sûr que
4:13:55j'ai vérifié et je suis sûr maintenant
4:13:57que c'est bon. Et là aussi maintenant
4:13:59sur notre dashboard, on peut voir que
4:14:00c'est pas mal. Il y a des pages qui
4:14:02n'existent pas tout simplement parce que
4:14:03il ne les a pas encore créé. C'est
4:14:05normal, je ai pas encore dit de créer
4:14:07ces pages-là. Maintenant, on va voir un
4:14:09peu ce qu'il nous a proposé comme
4:14:11design. Donc là, on a la barre de
4:14:12recherche. Ici, on a le total encaissé,
4:14:15facture en attente, en retard et là, on
4:14:17a nos factures récentes. Bon là, je vois
4:14:20quand même pas mal de soucis à régler.
4:14:21Donc ce que je vais faire, je vais tout
4:14:23simplement prendre [musique] une
4:14:25capture. D'accord ? Déjà un très bon
4:14:27début. Je vais prendre une capture, je
4:14:29vais lui donner en contexte et je vais
4:14:33euh je vais aussi lui donner la capture
4:14:35de de l'image de référence. D'accord ?
4:14:39Et ici, je vais lui dire, je vais faire
4:14:41un vocal. Je lui dis OK, déjà c'est pas
4:14:43mal. Euh on voit bien qu'il y a un
4:14:45début, mais ici je ne comprends pas
4:14:48pourquoi par exemple au niveau des
4:14:50cardes, il y a un contour bleu.
4:14:53D'accord. Euh je pense qu'il faudrait
4:14:55s'inspirer fortement pour les composants
4:14:57aussi de de l'image de base dont on a
4:15:00parlé. Je t'ai donné un image
4:15:01d'inspiration. Le bouton tout voir, tu
4:15:03peux voir que le bouton il n'est pas
4:15:05fini. D'accord ? Il faut vraiment
4:15:07regarder euh tout cela. Il faut que ce
4:15:10soit euh très euh il faut il faut que ce
4:15:13soit très très professionnel. Ensuite
4:15:17euh les icônes en haut total encaissé,
4:15:19facture en attente. Donc il y a des
4:15:21icônes vert, orange, rouge, bleu, il y a
4:15:23trop de couleur. Donc nous on part un
4:15:26peu sur un un un notion style. D'accord
4:15:29? Donc l'idée c'est d'y aller un peu
4:15:31comme Notion. Donc vu que tu as vu sur
4:15:34notre sidebar, je j'aime bien les icônes
4:15:36que tu as utilisé. C'est un peu comme du
4:15:39gris, du noir et du blanc. Un truc
4:15:42vraiment très léché, très bien fini.
4:15:45Donc euh il faut que tu regardes
4:15:47composant par composant comment tu vas
4:15:49régler cela. Et ensuite une fois quand
4:15:51tu crées des composants, assure-toi
4:15:53toujours de créer un skeleton loader
4:15:55pour ce composant là parce qu'on va
4:15:57utiliser que du skeleton loader et
4:15:59assure-toi aussi de la responsivité des
4:16:01éléments que tu crées. J'attends qu'il
4:16:03fasse ce travail et entre-temps, moi je
4:16:05vais manger mes pistaches. [rires] Donc
4:16:07super là il vient que il dit qu'il a
4:16:08terminé. Donc qu'est-ce qu'il a fait ?
4:16:10Première chose, il a euh changé les
4:16:13icônes ici. Il a changé, il a amélioré
4:16:15le bouton, mais il n'a pas changé le
4:16:17contour des éléments que je lui avais
4:16:18demandé de faire. Donc là, ce que je
4:16:20vais lui dire, c'est ça. Donc c'est bien
4:16:22là, on a un bon départ, sauf que je vois
4:16:25que tu n'as pas tu n'as toujours pas euh
4:16:28changé les composants et les contours
4:16:30des composants. Ils sont toujours bleus.
4:16:33Je je ne vois pas l'intérêt. Le bouton
4:16:35tout voir, il peut adopter la le même
4:16:37style Notion L comme des boutons sur
4:16:39notion. La barre de recherche en haut,
4:16:42elle est pas elle est très simple.
4:16:44Peut-être qu'on peut l'optimiser avec
4:16:46une animation sur l'icône de loop on
4:16:49focus quand je clique sur pour faire une
4:16:51recherche. Ensuite, euh surtout
4:16:54concentre-toi bien sur les composants et
4:16:57les contours des composants. Je veux un
4:16:59style de design flat. Donc on part sur
4:17:02du flat design et aussi pour les
4:17:04factures récentes, tu vois au niveau des
4:17:05statuts payer, envoyer et cetera, je
4:17:07veux que ce soit arrondi sous forme de
4:17:09pills. D'accord ? Donc fais-moi ça. Donc
4:17:12encore une fois, ce qu'on fait, c'est
4:17:13juste on attend qu' termine. OK. Donc
4:17:16là, il vient de dire qu'il a terminé et
4:17:17là on se rend compte que c'est encore
4:17:19pire que ce qu'on voulait. Déjà, il a
4:17:20changé le menu latéral parce que c'est
4:17:22sûrement parce que je lui ai dit de
4:17:23faire du flat design mais en plus
4:17:25regarde, il y a des choses qu'il a bien
4:17:26fait. Je regarde le bouton tout voir,
4:17:27maintenant il est bien. Euh quand je
4:17:29clique sur rechercher une facture, il y
4:17:30a une petite animation. Tu as vu, c'est
4:17:32pas mal. Mais il y a toujours ce contour
4:17:34là. Et je pense que je vais te montrer
4:17:36une astuce que je fais généralement pour
4:17:38aller très rapidement. Je fais contrôle,
4:17:40clic droit et je fais inspecter. Et là,
4:17:42ce que je fais généralement, c'est je
4:17:44vais aller voir, je vais cliquer sur un
4:17:46composant pour voir qu'est-ce qui cause
4:17:48cela. D'accord ? Donc, tu n'as même pas
4:17:50besoin de trop comprendre. Écoute,
4:17:52regarde bien ce que je fais. Je clique
4:17:54quand je je suis sur Google Chrome.
4:17:56D'accord ? Donc je clique sur un
4:17:59élément. D'accord ? Je clique ici sur ce
4:18:01sur cette icône. Maintenant je clique
4:18:03sur un élément par exemple. Je clique
4:18:04sur cet élément là. D'accord ? Je clique
4:18:07dessus. Une fois que je clique dessus,
4:18:09automatiquement ça c'est tout le CSS de
4:18:11cet élément là. Donc si je veux voir le
4:18:13CSS de cet élément, je fais je clique
4:18:15dessus comme ça. Et là je vais voir le
4:18:17CSS de cet élément. Donc le CSS c'est le
4:18:21style quoi parce que tout ça c'est du
4:18:22style, le bouton, la les couleurs, les
4:18:24contours et cetera. Donc je clique
4:18:26dessus et ça va me montrer les CSS ici.
4:18:29Maintenant tu as vu je peux activer le
4:18:31navigateur me donne la possibilité
4:18:32d'activer et de désactiver euh de le
4:18:36style de d'un élément, tu vois, pour
4:18:38voir un peu à quoi ça ressemble. Donc
4:18:40par exemple, disons que je désactive
4:18:42cela. Tu as vu ça ? Ce texte là, il
4:18:45devrait être plus petit mais vu que je
4:18:48l'ai désactivé bah c'est parti.
4:18:50Maintenant, je le réactive. Tu as vu là
4:18:52il est retourner. D'accord ? Parce que
4:18:53ce style là s'applique à tous ces
4:18:55éléments. Maintenant moi ce que ce qui
4:18:57m'intéresse, c'est ce contour là. Donc
4:18:59là, je vais voir il y a un truc que qui
4:19:01s'appelle ici ring 1. Donc je vais
4:19:03désactiver. Je désactive. Ah voilà. Tu
4:19:06as vu ? Donc là on sait exactement
4:19:09maintenant quelle est la cause. Donc la
4:19:12cause c'est cet élément là. Donc c'est
4:19:14ce style-là W ring Shadow. D'accord ?
4:19:18Donc maintenant ce que ce que je vais
4:19:19faire, je vais copier ça [musique] et je
4:19:21vais tout simplement lui dire "OK, le
4:19:24menu latéral, tu l'as changé, remets-le
4:19:26exactement comme il était." Et en plus,
4:19:29voici l'élément qui fait que euh voici
4:19:32l'élément que tu dois désactiver sur le
4:19:33CSS. Je vais te le coller.
4:19:36Et là, je colle l'élément. D'accord ?
4:19:39Généralement, tu n'as pas besoin de
4:19:40faire euh tout ça, d'accord ? Mais des
4:19:42fois, il arrive que tu as besoin quand
4:19:44même d'ouvrir et d'inspecter. Donc là,
4:19:46je t'apprends un peu comment on débug
4:19:47pour aller plus rapidement. Sinon, si tu
4:19:49insistis, d'accord, il allait le voir
4:19:51tôt ou tard. Mais je moi
4:19:53personnellement, c'est un peu avec
4:19:54l'expérience, ça vient. Tu sais comment
4:19:56c'est facile, tu fais juste clic droit,
4:19:58tu fais inspecter. D'accord ? Et là, tu
4:20:01fais tu sélectionnes cette icône là pour
4:20:03pouvoir sélectionner des éléments. Et
4:20:04là, c'est visuel hein. Tu sélectionnes
4:20:06juste un élément. Et une fois que tu
4:20:08sélectionnes par exemple cet élément-là,
4:20:10tu viens ici sur STS [musique] et tu
4:20:13désactives. Tu actives jusqu'à ce que tu
4:20:14vois c'est quoi le souci, d'accord ? Tu
4:20:16peux jouer avec pour voir en fait euh
4:20:19chaque chose il fait quoi. D'accord ? Et
4:20:22tu peux même euh bon après si tu es s'il
4:20:24est développeur, si tu es développeur,
4:20:25tu sais exactement de [musique] quoi de
4:20:27quoi je parle. Donc là, je vais attendre
4:20:30qu'il termine. Donc là, tu as vu, il a
4:20:32remis le dashboard exactement comme il
4:20:34était et maintenant, il a désactiver
4:20:37cette couleur là trop forte qui euh
4:20:40voilà qui qui faisait que notre design
4:20:42n'était pas assez joli. Là, je pense
4:20:44qu'on a quelque chose d'assez slick,
4:20:46comment on dirait ? On a quelque chose
4:20:48d'assez professionnel. Ça c'est un
4:20:49dashboard très professionnel. Il y a
4:20:52rien à dire. Ça ça donne toutes les
4:20:54informations et ça marche. D'accord ?
4:20:56Donc là, si on voit est-ce que c'est
4:20:57responsif, c'està-dire que sur mobile
4:20:59comment ça va s'afficher. Tac. Tu as vu
4:21:01? C'est aussi responsif sur mobile. Là,
4:21:03quand j'ouvre le menu, voilà, donc là il
4:21:06y a un problème avec le menu sur mobile.
4:21:08Donc je vais juste faire une capture.
4:21:11D'accord, je fais une capture. Donc, tu
4:21:14as vu le le menu, il y a un problème de
4:21:17spacing.
4:21:19Euh voilà, c'est pas assez pro, c'est
4:21:21c'est pas assez bien fait. Donc là, je
4:21:24je j'attends qu'il termine. D'accord.
4:21:25Là, il a pas encore fini. Mais en
4:21:27attendant, je prépare mon prochain
4:21:29message. Je lui donne la capture que je
4:21:30viens de faire qui est la capture du
4:21:32mobile et je lui dis "OK, maintenant il
4:21:35faut que tu vois le menu mobile" parce
4:21:38que le menu mobile, il y a beaucoup de
4:21:41problèmes. Il y a des problèmes de
4:21:42spacing, il n'est pas très bien géré.
4:21:45Donc corrige-moi cela. Donc là, elle a
4:21:47terminé. Ce que je vais faire, je vais
4:21:48tout simplement lui envoyer ce message
4:21:50là. D'accord ? et j'attends qu'il va me
4:21:53régler le le menu mobile. Sinon, le menu
4:21:57sur desktop, sur ordinateur, il marche
4:21:59très bien. OK. Là, il vient de dire
4:22:01qu'il a terminé. Ce qu'on va faire,
4:22:03c'est on va en fait soit tu peux
4:22:05rétrécir ici, soit pour avoir une meille
4:22:07meilleur aperçu, on va faire encore clic
4:22:09droit, on va faire inspecter. D'accord ?
4:22:11Je te donne une astuce et ici tu peux
4:22:13simuler un appareil mobile. Donc je fais
4:22:15ça. Je vais par exemple simuler euh si
4:22:18tu vois rien et si tu vois pas tous ces
4:22:20tous ces appareils là, tu fais juste
4:22:22modifier et là tu vas sélectionner les
4:22:24appareils. D'accord ? Tu sélectionnes
4:22:25les appareils que tu ne vois pas, ils
4:22:27sont tous ici directement disponibles
4:22:29dans ton navigateur. Donc une fois que
4:22:31je fais ça, je vais venir je vais
4:22:32choisir par exemple, on va dire allez,
4:22:36je vais choisir un iPhone 12 Pro. OK.
4:22:39Tac. Donc sur iPhone 12 Pro, notre site
4:22:41va s'afficher comme ça. C'est bien. Et
4:22:44le menu tac. Voilà, tu as vu ? C'est
4:22:47bon. C'est maintenant c'est bien spacé,
4:22:50c'est bien fait. La seule chose qui
4:22:51change, c'est le logo parce que le logo
4:22:53principal, il est noir et ici il est
4:22:55bleu. Mais bon, ça c'est pas grave. Ça
4:22:57c'est rapidement gérable parce que là,
4:22:59tu as vu le même logo, il est là. Donc
4:23:00je peux lui dire juste utilise le même
4:23:02logo sur le menu euh desktop, donc sur
4:23:05le menu ordinateur que sur le menu
4:23:06mobile. Et ça, ça sera géré. Mais là, on
4:23:08a euh tout simplement bien fait le
4:23:11dashboard. Les autres pages n'existent
4:23:13pas encore, c'est normal, on les a pas
4:23:15encore créé parce que comme je t'ai dit
4:23:16dans mon prompt, je lui ai dit de créer
4:23:18juste le dashboard et c'est sur ce
4:23:21dashboard qu'on va se baser pour créer
4:23:22les autres pages. Généralement, je
4:23:24déconseille de dire à Lia de créer toute
4:23:26l'AB d'un coup, d'accord ? Parce que là,
4:23:28il va se perdre. Tu as vu tout le
4:23:30travail qu'on a dû faire pour avoir le
4:23:31design qu'on veut sur rien que sur ce
4:23:34sur le dashboard, il faut faire page par
4:23:36page. Maintenant, une fois qu'on a une
4:23:38page qui ressemble bien à ce qu'on veut,
4:23:39on va créer ce qu'on appelle un design
4:23:41système. Donc des règles de design. Et
4:23:43c'est sur ces règles qu'on va se baser
4:23:45pour les autres pages. Donc c'est une
4:23:46astuce de de Vibe Coder Pro. D'accord ?
4:23:49Donc maintenant que j'ai ça, je vais lui
4:23:52dire maintenant fais quelque chose. Je
4:23:53vais lui dire OK maintenant c'est bien
4:23:55pour le mobile juste que le le logo sur
4:23:59le navigateur mobile il est bleu alors
4:24:02que le le logo sur le desktop il est il
4:24:04est noir. Donc il faut uniformiser les
4:24:06couleurs des logos. D'accord. Et
4:24:09ensuite, je veux que tu ajoutes de
4:24:10petites animations. Euh déjà, par
4:24:13exemple sur le bouton tout voir, quand
4:24:15je fais un hover dessus, je veux que on
4:24:17va inverser les couleurs. Par exemple,
4:24:20le texte va devenir blanc et le fond va
4:24:22devenir noir. Par exemple, sur ce bouton
4:24:23là. Et maintenant sur mobile, tu peux
4:24:25voir que le bouton tout voir, d'accord,
4:24:27il est il est pas très adapté, il est
4:24:30trop il est trop large parce que le
4:24:32texte n'est pas n'a pas été bien géré de
4:24:34manière responsive. D'accord ? Donc je
4:24:36veux aussi que tu me gères cela et
4:24:40ensuite une fois que c'est bon, tu me
4:24:42dis et et si tu vois aussi de petites
4:24:44animations qui devraient être ajoutées
4:24:46sur le dashboard, tu le fais aussi. Donc
4:24:49là voilà, il va nous gérer en fait cees
4:24:52derniers réglages là. D'accord ? Donc il
4:24:56va régler ce bouton là parce que je
4:24:58trouve que ce b en fait il est pas bien
4:25:01géré sur desktop. Je veux que quand je
4:25:03mets ma souris dessus, je veux que le
4:25:05fond devienne noir et le texte devient
4:25:07blanc, genre que ça inverse les
4:25:08couleurs. Donc il va faire ça aussi. Et
4:25:12ensuite voilà, on va voir comment on va
4:25:15gérer les pages suivantes une fois qu'il
4:25:17termine. Donc pendant qu'il le fasses,
4:25:19tu peux prendre une petite, tu veux
4:25:21boire de l'eau, tu veux faire ce que tu
4:25:22veux. En fait, le vibe coding c'est ce
4:25:24qui ce qui est cool, c'est que ça
4:25:25t'empêche pas de faire quelque chose à
4:25:26côté aussi, tu vois ? parce que tu
4:25:29donnes à un travail, il le fait en
4:25:31attendant toi tu peux faire autre chose.
4:25:33Donc l'idée c'est tu te vois un peu
4:25:34comme un product manager, tu vois, tu
4:25:36manages une équipe, tu as tu as des
4:25:39développeurs à ta disposition juste que
4:25:41toi tu dois savoir exactement qu'est-ce
4:25:43que tu dois leur dire comme comme promte
4:25:45d' comme tâche à exécuter et ils vont le
4:25:48faire. Donc là on attend qu'il termine.
4:25:52Tac. Et on va voir ce qu'il nous a
4:25:54proposé. Donc là, je reviens. Tu vois,
4:25:56il a presque fini. Mais on va voir déjà
4:25:58s'il a fait ce que je veux ici. Donc si
4:26:00je viens, je mets ma souris. Tac. Tu
4:26:02vois déjà ça c'est cool. Moi, j'aime
4:26:04bien. D'accord. Ça c'est pas mal. Euh et
4:26:07et tu as vu, il a il a fait de petites
4:26:09animations aussi sur les cartes. Quand
4:26:11je mets ma souris sur les cartes.
4:26:13D'accord. Ça ça fait euh ça fait un
4:26:16petit effet de hover euh d'animation
4:26:19comme s'il s'est levé. Tu vois, ça c'est
4:26:21des petits trucs qui font que tu vois
4:26:24ton design est beaucoup plus
4:26:26professionnel, on va dire. Donc moi,
4:26:29j'aime bien. On va voir maintenant sur
4:26:31mobile le bouton. Tu as vu tout voir ?
4:26:35Tu as vu la la manière dont il l'a géré
4:26:37? En fait, il est trop intelligent. Euh
4:26:39c'est pour ça que j'aime bien utiliser
4:26:41Gemini 3.1. C'est-à-dire que au lieu
4:26:43d'essayer de de voir de complexifier, il
4:26:47a tout simplement fait un redesign de de
4:26:50cette partie là pour que le bouton soit
4:26:52bien aligné. Et là on a quand même
4:26:55quelque chose de très propre. Tu vois,
4:26:56il a changé le logo, il a uniformisé les
4:26:58logos ici et là je pense qu'on est bon.
4:27:01Là on a un dashboard qui est, on va dire
4:27:05qui est pas mal. On a un dashboard qui
4:27:07est pas mal. Maintenant, ce que je vais
4:27:08faire, une fois que j'ai un design qui
4:27:10me plaît bien, je vais te donner une
4:27:12astuce que je fais pour ne pas avoir à
4:27:15refaire tout tout le temps la même chose
4:27:16sur toutes les autres pages, genre
4:27:18change la la bordure, la couleur et
4:27:20cetera. En fait, il a il sait déjà en
4:27:22fait ce que je veux parce que sur le
4:27:23dashboard, on a conçu quelque chose. Ce
4:27:25que je vais faire, c'est que je vais lui
4:27:26dire maintenant ce que je veux, c'est
4:27:29que tu regardes ce qu'on a fait sur le
4:27:31dashboard, d'accord ? Tu me construis
4:27:33une rules, d'accord ? une règle an
4:27:35gravité dans dans le dans l'é construit
4:27:39une règle qui va forcer euh que toutes
4:27:43les autres composants qui vont être
4:27:44créés vont suivre le même design
4:27:46système. Donc tu vas créer un design
4:27:47système qui va inclure euh les éléments,
4:27:51le le animations qu'on a, les bordures,
4:27:55les couleurs de bordure, le style de
4:27:56design, euh les alignements, la respons
4:28:01dashboard. Inspire-toi du dashboard, tu
4:28:03peux explorer tout le code et le CSS du
4:28:05dashboard qu'on vient de créer. Et tu
4:28:08crées un design une règle avec un design
4:28:10système très précis qu'on va suivre pour
4:28:13toutes les autres pages qu'on va créer
4:28:14sur cette application. Donc là, en fait,
4:28:16qu'est-ce que je lui demande de faire ?
4:28:17Je lui demande de voir ce qu'on vient de
4:28:19créer, d'accord ? Et de créer une règle
4:28:22qu'on va réutiliser pour toutes les
4:28:24autres pages. Et de cette manière, ça
4:28:26c'est une astuce que j'utilise pour
4:28:27avoir quelque chose d'uniforme, d'accord
4:28:29? Une uniformisation de mon design.
4:28:32C'est pour pas c'est pour éviter que une
4:28:33page soit noire et une autre page est
4:28:36grise, une autre page est violette. Euh
4:28:38en fait, généralement si tu dis faire ce
4:28:40qu'il veut, il va tout simplement faire
4:28:41ce qu'il veut. Donc ça c'est des choses
4:28:43que tu fais pour en fait le contraindre
4:28:46à faire toi ce que tu veux. Donc l'idée
4:28:48c'est comme je te dis, c'est toi qui te
4:28:50dirige. C'est pas L qui te dirige, c'est
4:28:52toi qui te dirige. Et c'est pour ça que
4:28:53je prends la peine de t'expliquer
4:28:54beaucoup de choses, beaucoup de concepts
4:28:57pour que tu saches euh exactement ce qui
4:28:59se passe et que tu saches exactement
4:29:01qu'est-ce que tu dois demander. Et tu as
4:29:03vu en fait moi-même je suis assez
4:29:05expérimenté dans la création de ça, mais
4:29:07je tombe sur des erreurs. Tout le monde
4:29:09tombe sur des erreurs. C'est pas une que
4:29:10peu importe à quel point ton prompt il
4:29:11est bon, tu auras des erreurs, d'accord
4:29:13? C'est juste que quand il y a une
4:29:15erreur, comment tu le gères ? Donc je
4:29:17t'ai montré plusieurs manières de gérer
4:29:19une erreur. D'accord ? Et plus on va
4:29:21créer d'autres sasses, plus tu verras on
4:29:23va avancer et toi-même tu prendras en tu
4:29:27prendras en compétence. D'accord ? Donc
4:29:29l'idée c'est tu vas apprendre en
4:29:31faisant. Donc on attend qu'il termine
4:29:34qu'il me crée le Tu as vu là il est en
4:29:37train de créer une règle. D'accord. Euh
4:29:40j'attends qu'il finisse cette règle là.
4:29:42Donc là il vient de créer cette règle.
4:29:44On va voir si il l'a mis dans [musique]
4:29:47les règles. Tu as vu, il ne l'a pas mis
4:29:49dans les règles. Ce que je vais faire,
4:29:51c'est que je vais accepter. Je vais
4:29:52copier, d'accord ? Je vais tout
4:29:54simplement copier tout ce qu'il vient de
4:29:56faire, d'accord ? Donc tu peux faire
4:29:57clic droit, copie aussi. Je viens dans
4:30:00rules, je viens dans workspace parce que
4:30:02c'est tout simplement une règle que je
4:30:03veux activer juste dans ce projet là. Je
4:30:07vais faire always on. D'accord ? Always
4:30:10on, ça veut dire que cette règle sera,
4:30:11il va toujours regarder cette règle
4:30:13avant de faire quoi que ce soit. Et je
4:30:15colle, d'accord ? Je colle la règle. Et
4:30:18une fois que c'est bon, d'accord,
4:30:21je fais commande ou bien contrôle S pour
4:30:25sauvegarder. Et là, la règle, il est là.
4:30:27Le design system, il est là. Donc on
4:30:29vient de créer notre design système
4:30:31qu'on pourra réutiliser sur toutes les
4:30:33autres pages qu'on va créer. Donc
4:30:35maintenant qu'on a créé notre dashboard
4:30:38et maintenant qu'on a créé notre design
4:30:40system, donc je vais lui donner un autre
4:30:43prompt, d'accord ? Euh je vais lui dire
4:30:45de créer de construire les autres pages.
4:30:48Donc là je lui ai dit le dashboard est
4:30:50valide. Maintenant construit les pages
4:30:52suivantes en gardant exactement le même
4:30:53style de design. Donc page créer une
4:30:55facture, formulaire avec sélection du
4:30:58client, liste déroulante. Date
4:31:00d'émission, section ligne de facture sur
4:31:03chaque ligne, quantité prix, bouton
4:31:05ajouter en bas et cetera. Page liste de
4:31:07factures, euh une page pour voir les
4:31:10factures, page détail facture, afficher
4:31:12complet avec toutes les lignes, bouton
4:31:14changer le statut. Donc là, je lui donne
4:31:16exactement les pages que je veux.
4:31:18D'accord ? Je lui dis aussi donc sur la
4:31:20page de de nouvelles factures création
4:31:22de factures. Donc il faudra un peu
4:31:25t'inspirer de du design que je te donne
4:31:27là. Tu peux voir que à droite euh on a
4:31:31le le preview de la facture et ça doit
4:31:33être un preview en temps réel. Et à
4:31:35gauche, on a les éléments de création de
4:31:38facture. Et ça doit être aussi bien
4:31:41aligné euh comme je viens de te le
4:31:43montrer et il faut que ce soit aussi
4:31:44responsif. Donc là c'est bon et je lui
4:31:47donne ce prompt là. Donc tous ces
4:31:49prompts-là, ils seront dans le document
4:31:51euh que je vais te donner euh dans euh
4:31:53dans la description. Et euh l'idée
4:31:55maintenant, c'est que vu que j'ai déjà
4:31:58créé le dashboard et que j'ai un design
4:31:59système, j'ai pas besoin de lui dire
4:32:01"Regarde dans design" parce que vu que
4:32:02c'est always on, il va toujours passer
4:32:05par là, il va toujours regarder ça. Et
4:32:06maintenant, je lui demande de créer les
4:32:09pages restantes, donc les pages
4:32:10suivantes. Donc on a facture, client,
4:32:12paramètres. D'accord ? Tout ce qu'on a à
4:32:15faire comme d'habitude, on attend qu'il
4:32:16termine, on va voir s'il y a besoin de
4:32:18refaire un passage. On va refaire un
4:32:20passage jusqu'à ce qu'on ait un design
4:32:22qui correspond à ce qu'on veut réaliser.
4:32:24OK, donc là, il m'a fait un walkthrough,
4:32:26mais [musique] en lisant le walkthough,
4:32:27je vois qu'est-ce qu'il dit. Design
4:32:29système. Je m'inspirerai des couleurs de
4:32:30la capture d'écran dominante accent bleu
4:32:33pour bouton. Donc je vais faire une note
4:32:35ici, d'accord ? et je vais lui dire, il
4:32:38faut uniquement te baser sur le le
4:32:41design système qui est dans les rules,
4:32:43dans les règles. Donc ici, je vais tout
4:32:46simplement ajouter ce commentaire là.
4:32:49D'accord ? Euh et là, ce que je vais
4:32:52faire, c'est que je vais tout simplement
4:32:54lui dire "OK, tu peux passer au plan
4:32:56d'implémentation, mais aussi tant qu'on
4:32:58y est, on va créer aussi les pages mon
4:33:00compte." Donc, il y a la page
4:33:01paramètres, d'accord ? Et aussi la page
4:33:03aide et support. Donc euh tant qu'on y
4:33:06est, créons ces pages-là aussi. On va
4:33:07aussi euh et les pages facture et
4:33:09clients comme je te l'ai donné. Donc on
4:33:11va tout implémenter un seul coup et
4:33:14regarde dans les règles euh les rules et
4:33:17suis exactement le design système qui
4:33:19est dans le rules pour l'implémentation
4:33:21de toutes les pages. Généralement, il va
4:33:23passer par comme je t'ai dit, il va
4:33:24passer par les rules parce que la rules,
4:33:26je l'ai mis always on. Donc il il
4:33:28s'active toujours. Mais voilà comme on
4:33:31dit, [rires] il veut bien frapper pour
4:33:33s'assurer que le clou est est bien
4:33:35enfoncé. Donc là on attend qu'il
4:33:37termine. OK. Donc là il vient de me dire
4:33:39qu'il a terminé. D'accord. Donc euh il a
4:33:42dit voilà, il m'a il m'a fait les pages
4:33:44et cetera. Bon, tu peux lire hein. Donc
4:33:47euh moi ce que je vais faire c'est que
4:33:49je vais tout simplement aller
4:33:50directement sur le site et on va voir ce
4:33:52qu'il m'a fait. Donc là je vais aller
4:33:53sur facture. Tac. Donc là tu peux voir
4:33:56que c'est pas mal. Voilà, il y a quelque
4:33:58chose qui marche pas ici. Donc ça c'est
4:34:00normal. Je pense qu'on l'a pas encore
4:34:01géré. C'est le fait de gérer les
4:34:04options. D'accord. On ne l'a pas encore
4:34:06fait parce que je lui ai pas donné ça.
4:34:08D' bouton créer une facture. Donc je
4:34:10vais cliquer dessus. Je vais aller je
4:34:12vais cliquer sur créer une facture. On
4:34:13va voir. Tac. Ah voilà. Là on est bien.
4:34:18Tu as vu, je peux sélectionner les
4:34:20clients qui sont là. Si j'ai des
4:34:22clients. Donc ça c'est des c'est J'ai
4:34:23pas encore ces clients là et c'est pas
4:34:25encore fait. Mais t'inquiète ça on va
4:34:26gérer ça. Là c'est les calendriers. Ça
4:34:30aussi, je vais modifier ça. Je peux
4:34:31ajouter une ligne. Donc déjà là, ça
4:34:33marche bien. Tu vois quand j'écris ça
4:34:35vient ici. D'accord ? Quand je fais un
4:34:38prix, tac, le prix s'affiche ici. Donc
4:34:40déjà, c'est pas mal. Euh, je vais voir
4:34:44les clients. Donc ça, c'est mes clients.
4:34:46Ça aussi, ça va pas marcher normalement.
4:34:48Tu as vu ? Ouais, ça marche pas. C'est
4:34:49normal. Donc, je vais actualiser la page
4:34:52paramètres. Elle marche bien. Entreprise
4:34:55référence. D'accord. Donc il y a un
4:34:58souci ici. On va voir ça. Aide et
4:35:02support. Ça c'est les informations du
4:35:04créateur du SAS quoi pour que les gens
4:35:06puissent le contacter et une
4:35:08documentation qu'on peut ajouter ici.
4:35:10Donc là c'est pas mal. Donc là on peut
4:35:12voir déjà que le design qu'on a, tu
4:35:16vois, il est constant. Tu vois ça c'est
4:35:18très important comme je t'ai dit que le
4:35:19design soit constant. Il est constant.
4:35:22Ici tu peux voir que sur le dashboard tu
4:35:23as vu comment les composants ils sont.
4:35:26Bah c'est de la même manière dont ils
4:35:27sont ici et pareillement ici aussi. Et
4:35:31ça c'est très important pour la
4:35:33constance. Donc maintenant ce que je
4:35:35vais faire c'est que je vais lui faire
4:35:36un retour pour lui demander de me faire
4:35:38certains détails.
4:35:40Donc là euh j'ai vu que tu as euh fait
4:35:43les pages donc facture et client. Euh
4:35:47par contre les boutons d'option donc
4:35:49lorsque je clique sur les trois points
4:35:52pour voir les options d'une facture, ça
4:35:54ne marche pas. Ça fait cracher l'app.
4:35:55Parément aussi pour les clients, les
4:35:57boutons d'option ne marchent pas. Donc
4:35:58il faut régler cela. Ensuite les
4:36:00filtres, il faut voir que les filtres
4:36:02marche bien. Donc ouais, les filtres
4:36:04marchent bien. Ensuite, sur les
4:36:05factures, il faut euh afficher, comme on
4:36:08a dit, il faut afficher au moins une
4:36:10vingtaine d'éléments par page avec de la
4:36:12pagination. Un bon élément de
4:36:13pagination. Pareillement pour les
4:36:15clients, la barre de recherche doit bien
4:36:18marcher, d'accord ? Facture et client.
4:36:20La barre de recherche doit fonctionner
4:36:22aussi. Au niveau des paramètres, tu peux
4:36:24voir qu'il y a un problème. Tu peux
4:36:25utiliser ton navigateur pour voir sur
4:36:27desktop et même sur mobile. Il y a un
4:36:30gros souci au niveau du sélecteur
4:36:32entreprise et préférence. Il faut régler
4:36:34cela. Et euh pour la page a de support,
4:36:37pour l'instant, on ne va rien faire
4:36:39dessus, mais il me faut régler tous ces
4:36:42éléments-là. D'accord ? Euh aussi sur la
4:36:45page créer une facture, c'est pas mal.
4:36:47D'accord. Mais le l'élément sélectionné
4:36:50un client, donc le dropdown le dropdown
4:36:53n'est pas du tout optimisé. D'accord ?
4:36:56Donc il faut gérer l'optim, il faut
4:36:58créer un composant dropdown qui sert à
4:37:01réutilisé sur tous les autres dropdown.
4:37:03Donc ça c'est un dropdown, donc c'est un
4:37:05menu déroulant tout simplement. Et ici,
4:37:07tu peux voir que le calendrier, d'accord
4:37:10? Euh c'est un calendrier
4:37:12classique. Donc je veux qu'on crée notre
4:37:14propre composant calendrier qui va être
4:37:16utilisé aussi, réutilisé partout dans
4:37:18l'app. Quand j'ajoute une ligne, c'est
4:37:20bien. Euh sur la le preview de la
4:37:23facture, tu peux voir que en fait,
4:37:25regarde, je vais te montrer. Sur la
4:37:27facture euh tout en bas, tu peux voir
4:37:30que le total est gêné par le texte en
4:37:33bas. Donc, il faut régler cela. On va
4:37:36voir sur mobile comment c'est
4:37:37implémenté. Donc sur mobile, ici on a
4:37:39les factures, on peut ajouter et là on a
4:37:41l'aperçu.
4:37:43Donc euh ouais, c'est pas mal. Et aussi
4:37:46sur mobile, sur mobile, on a le même
4:37:48problème. Tu pourras voir le grand
4:37:50total, il est euh il est gêné par les
4:37:53autres textes. Donc corrige-moi tous ces
4:37:55éléments-l et les boutons d'option
4:37:57doivent bien marcher. Donc comme tu vois
4:37:59quand j'écris sur le bouton pour voir
4:38:01les options d'action, ça marche pas. Euh
4:38:04le bouton brouillon aussi doit bien
4:38:06marcher, le bouton envoyer aussi doit
4:38:08bien marcher. Par exemple, envoyer une
4:38:09facture et cetera. Donc là, je lui donne
4:38:11ça et ensuite je viens et j'ajoute les
4:38:15euh captures que j'ai prises. Là, j'ai
4:38:17prise quelques factures et je lui envoie
4:38:18ça. Donc là, on attend qu'il termine et
4:38:20on va voir les changements qu'il a fait.
4:38:22OK, donc là, il dit avoir terminé. Ça a
4:38:24pris quand même pas mal de temps. Je
4:38:26pense ça a pris une quinzaine de minutes
4:38:27pour qu'il règle tout ça. Donc, tu
4:38:29restes patient, tu attends juste qu'il
4:38:30se termine. D'accord ? Donc là, on
4:38:33revient sur le dashboard. Donc là, on
4:38:34est sur le dashboard. C'est pas mal.
4:38:36D'accord ? Ici, je vais voir les
4:38:38factures. Donc là, normalement, si je
4:38:40clique sur les toit point, tu vois
4:38:41maintenant, ça marche bien. Euh ici, il
4:38:44nous a mis une jolie petite pagination.
4:38:46Tu vois, page précédente, page suivante.
4:38:49Là, je peux soit par exemple, si je fais
4:38:51voir le détail, là, il me montre les
4:38:53détails d'une facture. Sachant que
4:38:55voilà, il y a des boutons, il y a des
4:38:56actions qui ne qui manquent encore.
4:38:58C'est normal. D'accord. Mais là, je peux
4:39:00vraiment venir jusqu'à faire ça. Euh,
4:39:03c'est pas mal. C'est vraiment cool. Pour
4:39:05les clients, c'est pareil aussi. J'ai la
4:39:07liste des clients. Je peux rechercher.
4:39:09Disons que je recherche à Mina. Tu as vu
4:39:11la barre de recherche marche bien. Je
4:39:13peux voir, je peux pas modifier. J'ai
4:39:15pas encore ça. Ah ouais, je peux
4:39:16modifier. C'est cool. Tu as vu, il a il
4:39:18a même créé ça. Tu c'est vraiment bien
4:39:21pour l'instant. Donc euh et quand je
4:39:23modifie le bon même si c'est pas encore
4:39:25sauvegardé en base de données parce
4:39:27qu'on a pas de base de données mais on
4:39:29peut voir que ça marche bien les
4:39:30paramètres. Il a pas bien compris je
4:39:32pense ce que je voulais faire mais bon
4:39:34ça on va le régler. Euh et de support je
4:39:37lui ai pas donné de consigne
4:39:40ici. Donc là en fait déjà on est bon.
4:39:43Maintenant je vais aller voir sur créer
4:39:45une facture. D'accord ? Tu peux voir que
4:39:47maintenant tu vois le grand total et le
4:39:49[musique] texte il les a séparé. C'est
4:39:51bien pour le dropdown. Tu vois, il a
4:39:53créé un dropdown mais je trouve que bon
4:39:56ça peut quand même être optimisé. Mais
4:39:58bon, il a créé un composant dropdown
4:40:00pour le calendrier. Il a créé aussi un
4:40:03composant mais je trouve qu' aussi ça
4:40:05peut être optimisé.
4:40:07Donc là il nous reste à optimiser le les
4:40:10dropdown donc les menus déroulants. Il
4:40:12nous reste à optimiser le les dropdown
4:40:15calendriers donc les menus déroulants de
4:40:16calendrier. Ensuite le bouton d'action.
4:40:21Je pense changer de statut. D'accord.
4:40:24Quand je veux changer le statut de d'une
4:40:26facture ou bien modifier une facture,
4:40:29j'ai une page 404. Euh quand je veux
4:40:32faire autre chose, voilà, quand je veux
4:40:35supprimer un client, euh il y a il y a
4:40:39un problème. La modale quand je veux
4:40:41supprimer un client. Ensuite [musique]
4:40:43alors on va faire ça après. La page
4:40:45paramètres je la ferai en dernier. Je
4:40:46reviens. Et ce que j'ai fait c'est que
4:40:49je suis allé sur drible tu vois, j'ai
4:40:50rechercher calendrier. J'ai juste
4:40:52recherché calendar dropdown. Ça m'a
4:40:55montré des designs et je vois des
4:40:57designs [musique] et je fais des
4:40:58captures tout simplement. Et j'ai fait
4:40:59la même chose pour les dropdown normal
4:41:02par exemple. Tu vois comme ça je peux
4:41:03lui donner des exemples pour que ça
4:41:05aille plus rapidement. Donc là je viens
4:41:07je vais lui donner les captures que j'ai
4:41:09fait. [musique]
4:41:10OK. Maintenant, pour les composants que
4:41:11tu as créé pour le calendrier, pour le
4:41:14dropdown calendrier et le dropdown
4:41:17normal, en fait, ils sont pas très bien
4:41:19optimisés. Donc là, je t'ai donné des
4:41:22exemples de design. Il faudra faire
4:41:23quelque chose de similaire mais en
4:41:25gardant nos couleurs. Tu vois les
4:41:27outlines c'est en noir comme comme notre
4:41:29design système. Euh pour le calendrier
4:41:31aussi un élément sélectionné euh il va
4:41:34tout simplement être fond fond noir, tu
4:41:37vois, écriture blanche. Mais l'idée
4:41:38c'est que on on va tout simplement euh
4:41:42refactoriser ces composants là pour
4:41:44qu'il soi euh pour qu'il soi bien géré.
4:41:47Ensuite euh au niveau d'une facture, par
4:41:49exemple, quand j'entre dans une facture
4:41:51en particulier, je ne peux pas changer
4:41:53le statut ni modifier la facture. Donc
4:41:55quand je clique sur modifier la facture,
4:41:57ça doit me ça doit m'ouvrir cette
4:41:58facture-là dans le formulaire par
4:42:00exemple de création de facture mais avec
4:42:02les euh pour que je puisse modifier la
4:42:04facture. Donc il va prérer ce formulaire
4:42:06là avec les informations qui sont dessus
4:42:08pour que je puisse modifier. Et je dois
4:42:10aussi pouvoir changer le statut. Donc
4:42:12quand je clique sur changer le statut,
4:42:13peut-être ça me montre un euh bon
4:42:16essayer de voir en terme de UX,
4:42:17peut-être ça doit me montrer un dropdown
4:42:19euh ou bien des options pour que je
4:42:20puisse changer une facture. Sur la page
4:42:23client, lorsque je fais à partir des des
4:42:26boutons d'option que je veux supprimer
4:42:28un client, il en fait il ne me montre
4:42:31pas la modale de confirmation. Donc on
4:42:34doit avoir une modale de confirmation
4:42:35qu'on va utiliser qui va me dire est-ce
4:42:37que vous voulez vraiment supprimer oui
4:42:38ou non. Donc ça doit je dois pouvoir
4:42:41avoir cette modal là qui sera un
4:42:42composant qu'on va réutiliser sur tous
4:42:45les cas où on a besoin de de
4:42:47confirmation.
4:42:49D'accord ? Ensuite au niveau des
4:42:51paramètres, je veux qu'on refasse un
4:42:53design complet de la page paramètres.
4:42:55D'accord ? Fais-moi un refais-moi un
4:42:57design complet de la page de paramètres
4:42:59total. Donc je lui donne ça et on attend
4:43:02de voir qu'est-ce qu' va nous donner.
4:43:03Donc c'est un peu ça. Tu vas voir que
4:43:05quand tu vas lui donner des tâches, il
4:43:06va il va en faire certaines. Peut-être
4:43:08que d'autres il va peut-être mal les
4:43:09faire. C'est ça ce qu'on appelle le test
4:43:11local. Donc c'est une deux phases que je
4:43:13t'ai montré. Tu testes en local, tu
4:43:15ites. Tu testes en local, tuèes jusqu'à
4:43:17ce que tu a quelque chose [musique] qui
4:43:19fait vraiment sens, d'accord ? Qui
4:43:21ressemble vraiment à ce que tu veux
4:43:23réaliser. Et là tu passes à l'étape
4:43:25suivante. Donc c'est étape par étape.
4:43:27Donc tous ceux qui viennent vous dire
4:43:28"Ouais, tu peux venir faire un one shot,
4:43:30d'accord ? tu viens, tu fais juste un
4:43:32prompt et il y a la qui va tout te
4:43:34générer. Soit il va te générer du AI
4:43:36slop, c'est-à-dire quelque chose qui est
4:43:38truffé de bug, d'accord, qui ne marche
4:43:41pas, la manière dont il devrait marcher
4:43:42et qu'il y aura un design éclaté.
4:43:45D'accord ? Là, nous on a quand même une
4:43:47constance au niveau de notre design et
4:43:49ça en fait c'est ça, c'est ce travail là
4:43:50qu'on est en train de faire et c'est le
4:43:52même travail que tu vas refaire à chaque
4:43:53fois que tu voudras créer quelque chose.
4:43:55Donc là, il m'a montré un plan
4:43:56d'implémentation. Je vais lui dire
4:43:58proceed et il va passer au plan
4:44:00d'implémentation. Et si tu veux regarder
4:44:02le plan, je clique dessus. Donc voilà.
4:44:04Voilà un peu le plan. Donc modify
4:44:06refactorisation du style calendrier pour
4:44:08ressembler au maquet fourni, clean,
4:44:10bordure arrondi, euh date sélectionnée,
4:44:13date d'aujourd'hui, suppression des
4:44:15contours avec application d'icône
4:44:17simple. Donc il veut refaire le
4:44:18calendrier, refaire le select des
4:44:21clients, modification du dropdown select
4:44:23pour ressembler à l'image que je lui ai
4:44:25donné. Modèle fléocturation. Donc ce que
4:44:28je lui ai dit, je veux pouvoir par
4:44:30exemple modifier une facture modify
4:44:32remplacement du simple supprimé par des
4:44:34déclenchements de confirme modale. Seule
4:44:37l'action sur oui supprimera euh le
4:44:40client du tableau. Changer le statut. En
4:44:43fait, tout ce que je lui ai demandé
4:44:44hein, en fait tout ce que je lui ai
4:44:46demandé c'est ça qu'il veut faire. Donc
4:44:48on attend qu'il termine. OK. Donc là il
4:44:51a terminé. Donc quand je viens sur
4:44:53client et que je fais ça et que je fais
4:44:54supprimer maintenant tac. Tu vois là, il
4:44:57me donne ce qu'on c'est ça qu'on appelle
4:44:59une modale, d'accord ? Donc c'est un
4:45:01composant qui s'affiche euh au-dessus de
4:45:04notre site, d'accord ? Au-dessus de du
4:45:06du contenu de notre site. Et il nous
4:45:09donne une dialog. Ça c'est en fait ce
4:45:13type de modèle là s'appelle généralement
4:45:14une dialogue box. Donc on te donne on te
4:45:16donne juste des choix annulés, oui ou
4:45:19non. Donc tu fais ça. Ça c'est très bien
4:45:21à avoir. C'est un très bon UX aussi. la
4:45:23page paramètres. Tu as vu maintenant il
4:45:25a fait une refonte de la page paramètres
4:45:27là maintenant là on discute. Là on a
4:45:30quelque chose de professionnel c'est
4:45:32très bien joli. C'est du style notion
4:45:35stripe. Donc on a une très belle page.
4:45:37Euh ensuite
4:45:39ici c'est bon pour le bouton ajouter
4:45:41client. Au niveau des factures.
4:45:43Maintenant quand je clique sur une
4:45:44facture et que je veux changer le statut
4:45:46voilà il y a marqué comme envoyer marqué
4:45:49comme payer. Donc voilà. Bon déjà c'est
4:45:51pas mal. C'est pas mal pour le moment.
4:45:54Donc euh le bouton modifier, tac, voilà,
4:45:57il ouvre l'élément et sur la page
4:46:00facture avec euh la possibilité de
4:46:03modifier. D'accord ? Donc et le bouton
4:46:06mettre à jour, le dropdown. En fait, il
4:46:08y avait un problème au niveau du
4:46:09dropdown. Donc je te montre un peu le
4:46:13dropdown. Quand je l'ai testé, il était
4:46:14comme ça. Tu as vu, il était trop grand,
4:46:16il y avait un problème. Donc aussi le
4:46:19calendrier
4:46:21calendrier aussi avec un problème. Donc
4:46:23je lui ai dit au niveau du dropdown et
4:46:26il n'a pas changé. Le dropdown client ne
4:46:28s'affiche pas là où il devrait
4:46:29s'afficher euh et il est trop grand et
4:46:32je en fait je lui ai juste dit de
4:46:34corriger cela. Donc là je pense qu'il
4:46:36est en train de faire cela. On va voir
4:46:38le calendrier. Bon, le calendrier, il
4:46:40reste toujours le même.
4:46:43Voilà, le calendrier, je trouve qu'il
4:46:44est trop étroit. D'accord, il est trop
4:46:47étroit, trop petit. Donc s'il ne le
4:46:50règle pas, je vais comme je vais être
4:46:51obligé de lui demander de refaire le
4:46:55calendrier. Ici, on va voir si la
4:46:57recherche marche. Tu as vu ? La
4:46:58recherche marche bien. Donc déjà, on a
4:47:00ça de fait. C'est pas mal. D'accord ? On
4:47:02a ça de fait. C'est bien. C'est bien
4:47:04fait, je trouve. sur mobile, on va voir.
4:47:07Tu as vu ? Voilà, c'est très bien fait
4:47:09sur mobile. C'est juste le calendrier
4:47:12qui euh qui reste. D'accord. Et là, je
4:47:15pense qu'on pourra avancer sur notre
4:47:17design. Ah, date picker. Je pense que
4:47:20là, il est en train de faire le date
4:47:21picker. Donc, on attend qu'il termine.
4:47:24Donc, des fois, si tu vois des choses
4:47:25comme ça, c'est normal. C'est juste que
4:47:26le c'est le CSS,
4:47:29c'est le CSS qui a sauté ou bien qui
4:47:31s'est déconnecté. Tu attends juste qu'il
4:47:33termine. D'accord ? On attend qu'il
4:47:34termine et au final si on voit qu'il y a
4:47:38toujours des SIS, on va quand même lui
4:47:39dire. Donc on attend qu'il termine et
4:47:41après on va voir. Donc là il va faire
4:47:43son walkthrough. Donc lui il va dire
4:47:45qu'il a terminé mais on voit qu'il y a
4:47:47quand même un problème avec le CSS. Donc
4:47:49généralement si tu tombes sur ce type de
4:47:50problème là, tu fais juste une capture
4:47:52comme je suis en train de faire. Donc tu
4:47:54fais une capture et là je vais tout
4:47:57simplement lui donner la capture et je
4:48:00vais lui dire actuellement c'est ça que
4:48:02je vois. On dirait que le CSS genre les
4:48:04styles ont été déconnectés. Donc regarde
4:48:07le souci. Voilà. Donc là l'idée
4:48:09maintenant c'est que il va voir d'où
4:48:13vient le souci, pourquoi le CSS ne
4:48:14s'affiche plus comme il devrait. En fait
4:48:16ce que tu vois là, voilà, ça c'est un
4:48:18bon exemple. Ça c'est le HTML. Quand on
4:48:20parle d'HTML, c'est ça, d'accord ? Quand
4:48:22tu écris ton code en HTML, c'est ça que
4:48:24tu as. Maintenant, c'est avec le CSS
4:48:26qu'on va transformer ça en design
4:48:29terminé. Donc c'est c'est c'est un bon
4:48:33exemple, d'accord, pour que tu puisses
4:48:35savoir c'est quoi le rôle du CSS. Si
4:48:37s'il y avait pas de CSS, tu aurais des
4:48:39sites comme ça. Ça va marcher mais ça va
4:48:42être très très très joli du tout à voir.
4:48:45D'accord. Donc là euh on va attendre
4:48:48qu'il règle le problème de style et on
4:48:52va voir un peu ce qu'il nous a fait. OK.
4:48:55Donc là il me dit quoi ? Il me dit "Va
4:48:57dans ton terminal ou ton serveur il
4:48:59tourne." Bon, comme je t'ai dit, c'est
4:49:01comme ça qu'on ouvre le terminal. Donc
4:49:02ça c'est le terminal. Il me dit euh
4:49:05"Fais contrôle C." Bon le terminal dans
4:49:08lequel le cont le serveur il tourne, il
4:49:10n'est pas ici. Donc je vais tout
4:49:12simplement lui dire euh "S'il te plaît,
4:49:14fais-le toi-même."
4:49:17Voilà, comme je te dis, des fois, faut
4:49:18pas trop te casser la tête. Si tu
4:49:20comprends pas, dis-lui juste de le faire
4:49:21lui-même [rires] et il va le faire. Et
4:49:23une fois qu'il va réouvrir le terminal,
4:49:25je vais l'ouvrir ici. Comme ça, on aura
4:49:27accès au terminal. Là, je viens, je
4:49:29clique sur relocate et là, ça l'ouvre
4:49:31ici. C'est ici que le terminal il
4:49:32tourne. Je fais relocate. Donc là, on a
4:49:34notre terminal. Donc c'est là notre app
4:49:37qui est en train de tourner. Tu as vu,
4:49:38il est en train de tourner sur le port
4:49:40local host.
4:49:42Donc on actualise et si tout se passe
4:49:44bien, si on a de la chance, le souci là,
4:49:47c'est bon, le souci a été réglé. Là, on
4:49:49va voir le calendrier. Tu as vu ? Je
4:49:51pense que c'est le calendrier notre
4:49:53dernier souci ici. Donc je vais prendre
4:49:57une capture du calendrier
4:50:00et là je vais lui dire je vais lui
4:50:03donner les le calendrier mon calendrier
4:50:05ensuite et le calendrier comment
4:50:08j'aimerais qu'il soit d'accord sur la
4:50:09capture que j'ai pris sur dribble et je
4:50:11vais lui dire donc tu peux voir que
4:50:13notre calendrier a pas mal de soucis
4:50:16étroit les éléments ne sont pas bien
4:50:18alignés ils ne ressemblent en rien au
4:50:21design que je t'ai donné d'accord donc
4:50:23je t'ai donné un design Donc je te le
4:50:25redonne aussi pour que tu puisses
4:50:27t'inspirer dessus. Je veux que notre
4:50:28calendrier soit similaire à ce design
4:50:30là, qui soit responsif, qui s'affiche
4:50:33bien au-udessus au-dessous des éléments
4:50:35et que euh en tout cas que ce soit
4:50:38quelque chose un composant très bien
4:50:40fait selon l'image que je t'ai donné.
4:50:42Donc je vais voir aussi s'il y a quelque
4:50:43chose d'autre que je veux qu'il fasse.
4:50:45Là on peut voir que ici ça marche bien
4:50:49au niveau des factures aussi les
4:50:50clients. OK les paramètres. paramètres
4:50:54aussi c'est pas mal. Bon et des
4:50:55supports. Bon après on pourra voir ça
4:50:57après. C'est pas vraiment urgent. Euh
4:51:00ouais donc je pense que il nous reste
4:51:02juste ça les gars. En en tout cas au
4:51:05niveau du design si on arrive à gérer
4:51:06ça. Voilà ici aussi quand je suis sur
4:51:08sur le sur le menu latéral lorsque je
4:51:11suis sur une page je voudrais que ça
4:51:13vienne sur cette page là. aussi sur le
4:51:15menu latéral. Lorsque je suis par
4:51:17exemple sur client ou bien sur euh une
4:51:19autre page, c'est toujours le dashboard
4:51:21qui est qui qui est qui est sélectionné
4:51:23on focus, c'est-à-dire c'est toujours le
4:51:24dashboard qui a le fond euh gris comme
4:51:28s'il était sélectionné. Euh il faut que
4:51:29ce soit dynamique lorsque je suis sur
4:51:31une page, c'est cette page-là qui est
4:51:32sélectionnée. Comme ça, je peux savoir
4:51:34exactement sur la page la page sur
4:51:36laquelle je suis. Voilà. Donc on règle
4:51:39ces deux dernières choses. On règle le
4:51:41fait que si je suis sur facture, je veux
4:51:43que ça soit sur facture, le même style
4:51:45là. Et on a le calendrier. Et ce que tu
4:51:48vois là, ça c'est le front end, d'accord
4:51:50? Ça c'est le UI. Donc il y a pas
4:51:52vraiment encore de logique, il y a pas
4:51:53encore de base de données. Euh mais
4:51:57c'est tout simplement la base de notre
4:51:59application. Et une fois qu'on aura
4:52:01connecté à notre base de données à
4:52:03Superbase, là on aura quelque chose qui
4:52:04marche. Et quand je dis qu'il marche, je
4:52:06veux dire qu'il marche pour de vrai. OK,
4:52:08donc là il dit qu'il a terminé. On va
4:52:10repartir. On va voir. Donc là, si je
4:52:12vais par exemple sur la page de
4:52:13création, je clique sur un calendrier.
4:52:16Voilà, tu vois, là c'est beaucoup mieux.
4:52:18Là, on a un joli calendrier bien fait,
4:52:21tu vois. Donc là, c'est c'est c'est
4:52:23beaucoup mieux. Donc on a notre
4:52:24composant calendrier, on a notre
4:52:26composant dropdown. Là, tu as vu, ça
4:52:28marche bien. Lorsque je vais dans
4:52:29client, c'est client qui est
4:52:30sélectionné. Lorsque je suis dans
4:52:32dashboard, c'est dashboard qui est
4:52:33sélectionné et facture. Donc c'est cool.
4:52:34On a vraiment un peu ce qu'on voulait
4:52:37sur mobile. On va voir quand je vais sur
4:52:41créer une facture. Donc là euh ce que je
4:52:44pourrais améliorer ici, c'est juste le
4:52:47fait de faire que en fait la date
4:52:49d'échéance et la date d'émission soit
4:52:51sur la même ligne. Tu vois, on va faire
4:52:53que ça va être notre dernière
4:52:55modification. Donc je vais faire une
4:52:57capture. D'accord. Je vais aller voir
4:53:00peut-être sur le dashboard. Ici sur
4:53:02mobile, il y a rien. Ah voilà. Tu as vu
4:53:04lorsque sur mobile, lorsque je navig
4:53:09ça se ferme automatiquement. Je ne
4:53:11devrais pas cliquer et ensuite fermer.
4:53:13Quand je navigue, ça doit se fermer
4:53:15automatiquement. Et on va voir. Voilà.
4:53:18Donc ça c'est vraiment bien ici. J'aime
4:53:20j'aime trop comment c'est fait ici. Donc
4:53:22je fais une capture et je lui donne ça.
4:53:25Je lui donne la capture que je viens de
4:53:27faire et je lui dis OK. Ici dans euh
4:53:30dans le formulaire de création de
4:53:32nouvelles factures sur mobile, je veux
4:53:34que la date d'émission et la date
4:53:35d'échéance soi mis sur la même ligne et
4:53:37qu' gère le spacing. Et aussi, lorsque
4:53:39je fais une navigation au niveau du menu
4:53:42mobile, quand je clique sur une autre
4:53:44page, le menu doit automatiquement se
4:53:46fermer une fois que la navigation est
4:53:47faite. Sinon là, il navigue et le truc
4:53:50reste toujours ouvert. Le menu reste
4:53:52toujours ouvert sur mobile. Donc je lui
4:53:54donne ça et on attend de voir les
4:53:55dernières modifications si Dieu le veut.
4:53:57OK, donc là c'est bon. Il a dit qu'il a
4:53:59terminé. Donc on va vérifier déjà pour
4:54:02la navigation. Donc là, c'est bon. Tu as
4:54:04vu ? Lorsque je navigue, l'élément se
4:54:07ferme. Je vais aller dans facture et
4:54:09ici, je vais faire créer une facture. On
4:54:11peut voir qu'on a les deux éléments côte
4:54:13à côte et on a les calendriers qui
4:54:14s'ouvrent comme ça. Donc là, c'est bien,
4:54:17c'est pas mal. On a en fait un très bon
4:54:20UI pour le début de notre SAS.
4:54:24Maintenant, ce qu'on va faire, c'est
4:54:25qu'on va faire quelques vérifications
4:54:27logiques, d'accord ? De logique et
4:54:29ensuite on va passer à la connexion de
4:54:33notre base de données. Donc, on va
4:54:34commencer à travailler sur le backend et
4:54:37à partir de là, on a quelque chose de
4:54:39full stack parce que là, on a le UI,
4:54:41donc on a l'application, comment ça
4:54:43s'affiche ? Mais les données qui
4:54:44s'affichent là, c'est pas de vraies
4:54:45données. Ça ne vient pas d'une base de
4:54:46données. On n pas d'authentification.
4:54:49C'est beaucoup de choses qu'on doit
4:54:50faire. Mais au final, ne t'inquiète pas,
4:54:52on aura un SAS full stack. Et j'espère
4:54:54que là, tu auras compris les détails et
4:54:56les astuces que je t'ai donné. OK, donc
4:54:58maintenant on va faire quelques
4:54:59vérifications logiques, d'accord, avant
4:55:01de connecter notre application à la base
4:55:04de données. [musique] Donc la première
4:55:06vérification ici, c'est lors de la
4:55:09création d'une facture. D'accord ?
4:55:12Donc je vais aller dans facture, je vais
4:55:13aller dans créer une facture. Maintenant
4:55:16ici l'idée c'est quoi ? C'est lorsque je
4:55:18crée une facture, des fois quand je fais
4:55:20envoyer, c'est pas forcément par email.
4:55:22Là par exemple, si on est en Afrique,
4:55:24bon les gens envoient généralement les
4:55:26factures par WhatsApp et tout. Moi ce
4:55:28que j'aimerais faire c'est quand je crée
4:55:30une facture, je vais juste faire
4:55:31enregistrer. D'accord ? Je vais faire
4:55:33enregistrer. Et quand j'enregistre la
4:55:36facture, la facture sera disponible ici
4:55:39au niveau des factures. Mais quand je
4:55:41fais enregistrer directement ici, ça me
4:55:43donne la possibilité, ça m'affiche un
4:55:45bouton ou bien une modale pour
4:55:47télécharger la facture ou bien retourner
4:55:49aux factures. Comme ça, je peux la
4:55:51télécharger et il va télécharger la
4:55:53facture telle qu'elle normalement. Donc
4:55:56deuxième chose dans les paramètres quand
4:55:58je mets mes informations, est-ce que ce
4:56:01sont ces informations là qui sont
4:56:02disponibles dans la facture ? Par
4:56:04exemple ici maintenant j'ai mis 60. On
4:56:06va enregistrer. Donc déjà est-ce que ça
4:56:09s'enregistre ?
4:56:11Voilà, ça s'enregistre pas. Bon, ça
4:56:14c'est la deuxième modification. La TVA,
4:56:17je veux la mettre comment dire variable.
4:56:20Ici, c'est 18 %, dans d'autres pays
4:56:21peut-être c'est 24 % 25 %. D'accord ?
4:56:24Voilà. Donc c'est quelques
4:56:26modifications. Donc ça c'est vraiment le
4:56:28cœur de la fon de l'app, c'est la
4:56:30création de factures et que les factures
4:56:32nouveaux nouvelles euh factures créées
4:56:34s'affiche ici. Et ici dans le dashboard,
4:56:37ça doit aussi refléter les nouvelles
4:56:38factures créées. Euh on va faire ça.
4:56:42Donc je vais venir ici et je vais lui
4:56:45dire OK. Maintenant ce que je veux c'est
4:56:48qu'on revoit un peu une certaine
4:56:49logique. D'accord ? Par exemple, en
4:56:51commençant [musique] par le formulaire
4:56:53de création de facture. Lorsque je crée
4:56:56ma facture, là le bouton final c'est
4:56:58envoyer. Je ne veux pas d'envoyer, je
4:56:59veux le bouton enregistrer euh
4:57:01sauvegarder ou bien créer. Et lorsque je
4:57:03crée la facture, ça va me montrer une
4:57:05modale euh ou ça va me proposer de
4:57:10télécharger la facture ou de retourner
4:57:11aux factures, toujours en utilisant le
4:57:14style qu'on a. Ensuite, quand je repars
4:57:15sur la liste de mes factures, euh je
4:57:18dois voir la nouvelle facture que je
4:57:19viens de créer. La barre de recherche
4:57:21aussi euh sur la liste des factures.
4:57:23Bon, elle marche bien. D'accord. Donc au
4:57:26niveau du dashboard aussi, je dois voir
4:57:28la nouvelle facture là-bas. Ensuite,
4:57:30dans mes paramètres euh là où j'ai euh
4:57:34le nom légal RC Ninea, plateau, email de
4:57:37facture pour facturation, téléphone pro.
4:57:40Ces informations, lorsque je les
4:57:41modifie, je dois pouvoir enregistrer et
4:57:43elles vont se répercuter euh directement
4:57:46sur euh les factures, d'accord ? Sur les
4:57:49factures, sur la création de factures.
4:57:51Donc euh fais-moi ça, s'il te plaît.
4:57:53Donc là, voilà, l'idée c'est euh je vais
4:57:55lui je vais lui dire entrer et euh il va
4:57:58faire il va faire le travail comme
4:58:00d'habitude et on attend qu'il termine.
4:58:02OK. Donc là, comme tu as vu, il me
4:58:04propose un plan d'implémentation.
4:58:06Euh je vais juste voir le plan. Donc euh
4:58:09ça c'est ce qui compte faire, les
4:58:11modifications proposées, donc gestion de
4:58:13l'état global avec React, contexte et
4:58:16local. Bon après voilà, l'idée c'est
4:58:18queil va il va faire ce que je lui ai
4:58:19demandé. Je vais lui dire OK juste OK
4:58:22donc et là il va commencer à travailler.
4:58:24Il va commencer à travailler pour faire
4:58:26les modifications. Donc en attendant
4:58:28qu'il termine, on va revenir ici. Donc
4:58:31le flux d'une facture, c'est ça qu'on a
4:58:33fait. on a on va changer le flux d'une
4:58:35facture. Donc au lieu d'envoyer
4:58:36directement la facture, on va la créer,
4:58:38on va la sauvegarder et ensuite on
4:58:41pourra le la télécharger par exemple.
4:58:43D'accord ? Ensuite le temps qu'il
4:58:45termine, voilà. Donc là, il est en train
4:58:47de travailler. Donc le temps qu'il
4:58:48termine, je t'explique quelque chose
4:58:49qu'on va faire. Donc une fois qu'il aura
4:58:51terminé avant de passer à la connexion
4:58:54de notre application avec Superbase, il
4:58:56faudra qu'on fasse quelque chose d'assez
4:58:58intéressant. On va lui donner ce prompt
4:58:59là, d'accord ? On va lui dire de créer
4:59:01un fichier gemini.mmd. MD qui résume ce
4:59:03que l'application fait, toutes les
4:59:05fonctionnalités implémentées, la
4:59:07structure de fichiers, les technologies
4:59:09utilisées, les décisions de design et
4:59:11des instructions pour un futur modèle
4:59:13IA. Ça c'est très important parce qu'en
4:59:14fait il faut que tu comprennes que les
4:59:17IA travaillent selon ce qu'on appelle un
4:59:20contexte. Donc c'est un peu comme une
4:59:21mémoire qu'ils ont du projet et des fois
4:59:24s'ils se perdent ou bien s'il commencent
4:59:26à dérailler, ils pourront toujours aller
4:59:28voir dans le fichier Gemini.m MD pour
4:59:32savoir euh ce que fait le projet, quel
4:59:34est l'objectif du projet ou si jamais tu
4:59:37passes d'un modèle à un autre, l'autre
4:59:39modèle pourra tout simplement lire ce
4:59:40fichierlà et rapidement comprendre le
4:59:43projet et ce que le projet est fait.
4:59:45D'accord ? Donc c'est quelque chose
4:59:47d'assez intéressant. C'est un c'est un
4:59:48peu une astuce que j'utilise tout le
4:59:50temps pour sauvegarder un peu la mémoire
4:59:53des agents euh sur le le l'application
4:59:56sur lesquelles on travaille. Donc tu
4:59:58peux faire une capture ou bien recopier
4:59:59ce prompt là. De toute façon, je le
5:00:01donnerai aussi dans le fichier en
5:00:03description. Et une fois qu'il aura on
5:00:05aura fait cette certaine vérification
5:00:07logique, on va on va faire ça tout juste
5:00:10avant de connecter notre application à
5:00:12Superbase. Donc là, il est en train de
5:00:14créer le walkthrough. D'accord ? Il me
5:00:16dit c'est fait, tu as désormais un
5:00:18système complet et persistant. D'accord.
5:00:21Donc on va aller tout simplement revoir
5:00:24ce qu'il nous a fait. Donc pour vérifier
5:00:26ça, donc là le numéro de téléphone, on
5:00:28va tout simplement aller dans
5:00:29paramètres. On va modifier le numéro de
5:00:31téléphone. Je vais mettre 99 ici. Je
5:00:34vais enregistrer. D'accord. Il m'a dit
5:00:36paramètres enregistrer avec succès. Ça,
5:00:38ce qu'on appelle ça, c'est un une boîte
5:00:41alerte. D'accord ? C'est une boîte
5:00:43[musique] qui tout simplement te te te
5:00:47t'informe de quelque chose. Mais ça
5:00:49c'est, on va dire la boîte classique du
5:00:51navigateur. Et ça, on veut pas ça. Nous
5:00:53ce qu'on veut c'est avoir notre propre
5:00:55boîte, notre propre alerte box, on va
5:00:59dire. dialog box quelque chose de
5:01:02customisé. Donc je vais faire une
5:01:03capture de ça. Maintenant ici j'ai mis
5:01:0699. Donc je reviens dans facture. Je
5:01:08vais créer une facture et tu vas voir
5:01:1099. Donc c'est bon là c'est logique. Là
5:01:13je vais juste créer [musique] quelque
5:01:15chose de générique. Je vais faire quand
5:01:18je vais faire un prix par exemple à
5:01:202000. D'accord. Donc là c'est bon avec
5:01:22la TVA. Je fais enregistrer et là tu as
5:01:25vu facture créée avec succès retourner
5:01:28télécharger. Donc fonctionnalité
5:01:30téléchargement PDF à venir. Donc le
5:01:32téléchargement de PDF ne marche pas
5:01:34encore. Ça c'est bon. C'est pas c'est
5:01:35pas grave. Normalement j'ai créer la
5:01:38facture. D'accord. Quand je reviens ici
5:01:40dans les factures. Donc tu peux voir
5:01:42voilà la facture elle est là. Là je peux
5:01:44tu peux voir que la facture a été créée
5:01:46deux fois parce que j'ai j'ai cliqué sur
5:01:48enregistrer deux fois. Donc c'est
5:01:50pourquoi la facture a été créée deux
5:01:51fois. Euh donc ça, on pourra régler ça
5:01:54une fois qu'on aura créé euh on aura
5:01:57connecté notre application à la base de
5:02:00données. D'accord ? Quand je change le
5:02:02statut, marqué comme payer. Tu as vu le
5:02:04statut il change. Et ici aussi le statut
5:02:08doit changer. Euh il ne change pas. Donc
5:02:12je vais lui dire c détail là. H donc
5:02:14lorsque je change le statut d'une
5:02:16facture au niveau des de la liste des
5:02:18factures du dashboard, là où les
5:02:20factures sont envoyées, le statut doit
5:02:22doit changer. Et lorsqueune facture est
5:02:24déjà créée euh au niveau du formulaire,
5:02:27même si je clique enregistrer deux fois,
5:02:30tout ce que ça fait c'est que ça met à
5:02:31jour la facture. Euh ça va pas créer une
5:02:33nouvelle facture. Ensuite vérifie que le
5:02:38la fonctionnalité de téléchargement de
5:02:41d'une facture. D'accord. Est-ce qu'on
5:02:43peut le faire maintenant ou bien est-ce
5:02:45est-ce qu'il faut qu'on attende de
5:02:47connecter euh notre base de données
5:02:49Superbase pour faire cela ? Dernière
5:02:51chose euh lorsque j'essaie par exemple
5:02:55d'enregistrer ou bien lorsque
5:02:56j'enregistre quelque chose dans les
5:02:58paramètres, ça me montre une dialogue
5:03:00box. D'accord ? Euh il faut pas qu'on
5:03:03ait une dialogue box classique du
5:03:04navigateur. Il faudrait qu'on ait notre
5:03:06composant euh notre composant qu'on a
5:03:09créé. D'accord ? Donc une modale
5:03:11personnalisée pour alerter la personne
5:03:14euh est-ce que les paramètres ont été
5:03:16enregistrés et cetera. Donc fais-moi ça
5:03:19s'il te plaît. Donc voilà, l'idée c'est
5:03:21on va attendre qu'il fasse certains
5:03:23derniers réglages euh et ensuite on va
5:03:26avancer. Donc je pense que tu comprends
5:03:28un peu ce que je lui ai demandé de
5:03:30faire. L'idée maintenant, c'est
5:03:33de faire en sorte que lorsque je clique
5:03:35sur euh lorsque je crée une facture et
5:03:38même lorsque je clique enregistrer
5:03:39plusieurs fois, ça va pas créer
5:03:41plusieurs fois la même facture. Ça n'a
5:03:43pas de sens. L'idée c'est qu'il va tout
5:03:44simplement mettre à jour la facture
5:03:46existante. Ça c'est la première chose.
5:03:48Deuxième chose, lorsque je mets à jour
5:03:51le statut d'une facture, par exemple ici
5:03:52je le marque comme payer, d'accord ?
5:03:55Ici, ça devrait être payé parce que je
5:03:58l'ai marqué comme payé mais le statut ne
5:04:00change ne change pas ici. Donc
5:04:03normalement avec la base de données tout
5:04:05ça va changer mais l'idée c'est de te
5:04:07montrer un peu comment changer certains
5:04:10comportements logiques euh de ton
5:04:13application. Donc peu importe le type
5:04:14d'application que tu peux faire, tu as
5:04:16quand même cette même mise là, ce
5:04:17contrôle sur comment ton appreque.
5:04:22Donc c'est pour ça que je dis toujours
5:04:23quand tu crées euh de un sas avec Lia,
5:04:27euh dis-toi que tu es un peu dans cette
5:04:30cave comme j'ai mis comme j'ai donné
5:04:32l'image euh au début d'une personne qui
5:04:35est dans la cave et qui creuse et qui
5:04:37creuse au fond, il y a de l'or. Donc il
5:04:39faut toujours creuser, il faut toujours
5:04:41tourner, tester, venir lui dire de de
5:04:44revoir, tester encore jusqu'à ce que tu
5:04:46es exactement ce que tu veux. Donc là,
5:04:48il est en train de faire les
5:04:50modifications. Donc une fois qu'il
5:04:52termine, on va on va lui donner le
5:04:54prompt dont je t'ai parlé et ensuite on
5:04:57pourra avancer. OK. Donc là, il m'a dit
5:05:00au sujet du PDF pour ta question, voici
5:05:03maintenant front uniquement, on peut
5:05:04très rapidement activer combiné à CSS.
5:05:07cela isolera ton composant. Donc en
5:05:09fait, on peut faire la génération de PDF
5:05:13mais il m'a dit que avec le backend,
5:05:14c'est la bonne option pour un SAS
5:05:16mature. Donc on attend de connecter
5:05:18superbase la base de données pour faire
5:05:20ça. On peut rajouter l'option
5:05:21d'impression front endoire de
5:05:24dépinterface
5:05:26bouclée dès le branchement de P nous
5:05:29remplacerons. OK, d'accord. Donc s'il me
5:05:32propose ça, je vais lui dire "OK,
5:05:33faisons ça." Donc on va faire on va
5:05:35faire ça. Il va nous proposer,
5:05:36[grognement] on pourra utiliser juste le
5:05:38front end pour générer les factures. Une
5:05:41fois qu'on aura connecté à Superbase, on
5:05:43aura quelque chose d'un peu plus
5:05:45intéressant. Donc c'est ça qui est cool.
5:05:47Lui, il te il te propose généralement
5:05:49des options. C'est ça c'est à toi de
5:05:51voir si tu lui dis oui ou non et après
5:05:53il va avancer. OK. Donc là, il m'a dit
5:05:55qu'il a terminé. Donc euh lorsque je
5:05:58cliquerai maintenant sur télécharger
5:06:00dans la modale consécutive à
5:06:01l'enregistrement d'une facture, le
5:06:03gestionnaire d'impression de ton
5:06:04navigateur va s'ouvrir. OK. Ensuite, il
5:06:07a dit, il a géré le changement de
5:06:09statut, [musique] donc prévenir la
5:06:10création de doublon dont on a parlé,
5:06:12modal personnalisé pour les paramètres.
5:06:15D'accord ? Donc on va venir, on va
5:06:16tester tout ça. Donc on part d'abord
5:06:19dans les paramètres, je fais
5:06:20enregistrer. Voilà, paramètres mise à
5:06:22jour. [musique] Donc ça c'est tu as vu
5:06:23que c'est beaucoup mieux que ce qu'on
5:06:25avait tout à l'heure. Donc 2uxè chose,
5:06:27je vais dans les factures, j'entre dans
5:06:29une facture, je fais changer le statut
5:06:31envoyer. Ah ouais, je fais par exemple
5:06:33payer. Voilà, tu as vu, c'est changé en
5:06:35payer. Je viens ici, je fais en retard,
5:06:38je reviens. Il a pas marqué en retard.
5:06:41C'est juste ici qui prend en compte, on
5:06:43va dire le le changement de de statut.
5:06:48D'accord. Mais et ici aussi, c'est bien,
5:06:50il le prend en compte, c'est pas mal.
5:06:52Donc euh on va on va gérer ça une fois
5:06:54qu'on aura connecté la base de données.
5:06:57Ensuite ce que je vais faire, je vais
5:06:59aller je vais faire création créer une
5:07:01facture. Je vais faire je vais créer
5:07:02n'importe quoi. D'accord. Je vais
5:07:04enregistrer. Je vais [musique] faire
5:07:05télécharger et voilà. Donc bon, il a
5:07:09fait télécharger mais par contre je vois
5:07:11pas la facture. Donc c'est pas grave. Ce
5:07:13qu'on va faire, c'est on va passer à
5:07:16connecter la base de données et une fois
5:07:19qu'on aura ça, on va pouvoir régler tous
5:07:21ces détail là. Donc ici, je viens avant
5:07:23de passer à la connexion, je lui dis ça.
5:07:26Donc euh crémoi un fichier gemini.md qui
5:07:29résume ce que l'application fait, toutes
5:07:31les fonctionnalités implémentées, la
5:07:33structure des fichiers, les technologies
5:07:34utilisées, les décisions de design et
5:07:36des instructions pour un futur modèle
5:07:39IA. L'idée, c'est d'avoir un fichier euh
5:07:41que tu pourras revoir tout le temps pour
5:07:42comprendre le projet. Donc là, je le
5:07:46prompt que je t'ai
5:07:49le que je t'ai donné tout à l'heure.
5:07:51D'accord ? Donc, tu peux juste le
5:07:52copier, le prendre dans le dans le
5:07:54document ou bien tout simplement
5:07:56capturer l'écran et le copier. Ou bien
5:07:59tu mets en pause la vidéo, tu copies
5:08:00tout simplement, tu lui donnes. L'idée
5:08:01c'est qu'on va créer un fichier
5:08:03gemini.md dans lequel il va se rappeler
5:08:06du projet et cetera. En attendant qu'il
5:08:08fasse cela, ce qu'on va faire nous,
5:08:10c'est qu'on va aller sur Superbase. Donc
5:08:12là euh superbase.com, on avait déjà créé
5:08:15un compte Superbase, hein. Donc euh soit
5:08:17tu tu crées ton compte ou bien tu fais
5:08:20tu viens, tu fais signup et tu te
5:08:21connectes. Moi généralement, je me
5:08:23connecte juste avec mon GUP. Donc je
5:08:24t'avais montré comment tout simplement
5:08:27créer ton gitub et le connecter à
5:08:29Superbase. Donc làà on va tout
5:08:32simplement euh se connecter avec notre
5:08:35GitHub directement dans Super Base. Donc
5:08:37le temps qu'il termine la création du
5:08:40fichier, normalement il l'a même
5:08:41terminé. Donc le fichier, il est là.
5:08:43Donc tu as vu, c'est un fichier dans
5:08:45lequel tout simplement il parle de easy
5:08:46facture à propos qu'est-ce que ça fait
5:08:49les technologies utilisées et cetera.
5:08:50comme ça si tu passes ça même à un autre
5:08:53à un autre agent, il va savoir
5:08:55exactement ce qui se passe. Donc là, on
5:08:56crée une nouvelle organisation une fois
5:08:58qu'on est connecté sur Super Base type
5:09:00personnel free. D'accord ? Pour
5:09:02commencer, comme je t'ai dit, c'est
5:09:03gratuit, on va cliquer sur créer
5:09:05organisation. D'accord ? Et une fois
5:09:07qu'on crée notre organisation, on aura
5:09:09d'autres détails à régler. Donc comme ça
5:09:12ici, c'est ici. Donc tu il va te
5:09:14demander de mettre un mot de passe, je
5:09:16vais faire generate. D'accord ? Donc
5:09:18généralement, une fois que tu crées ton
5:09:19password, je te conseille de le copier
5:09:22donc parce que tu risques de le perdre
5:09:24sinon euh donc je fais juste enable
5:09:27automatic RLS donc créer. Tu as vu, on a
5:09:31parlé de row level security. Donc on va
5:09:34tout simplement l'activer comme ça.
5:09:36C'est c'est créé de bases de c'est il va
5:09:40être activé. Je vais faire créer un
5:09:41projet comme ça à chaque fois qu'il va
5:09:43créer un un une table dans la database,
5:09:47il va activer la le row level security.
5:09:49Là, qu'est-ce qu'il est en train de
5:09:50faire ? Il est en train de créer le
5:09:52projet. Donc là, ce qu'on va faire,
5:09:54c'est qu'on va juste attendre qu'il
5:09:55termine, d'accord ? Une fois que il a
5:09:58créé notre base de données, tu verras le
5:09:59changement ici. OK ? Donc là, il a créé
5:10:02le projet. Comme tu peux le voir, une
5:10:04fois que c'est prêt, il te met healthy.
5:10:07Donc tout est bon. Ici, une fois que
5:10:09c'est bon, ce que je vais faire, je vais
5:10:11aller ici sur mes paramètres, d'accord ?
5:10:13Je vais aller dans les préférences du
5:10:15compte et je vais aller dans access
5:10:17token. Donc ici, ce qu'on va faire, donc
5:10:19tu vas cliquer sur générer un nouveau
5:10:21token. Tu vas lui donner par exemple une
5:10:24date d'expiration. Moi, je vais faire
5:10:25never et là au niveau du nom, je vais
5:10:27juste mettre easy facture par exemple et
5:10:29je génère mon token. Ça va te générer un
5:10:32token. D'accord ? Donc ici, ce que je
5:10:35vais faire c'est que je vais tout
5:10:36simplement cliquer sur copier. D'accord
5:10:39? Encore une fois, je vais revenir sur
5:10:42mon antiravity. Donc je vais aller ici
5:10:45dans additional option, je clique dessus
5:10:47et je vais cliquer sur MCP server. Donc
5:10:50l'idée c'est de connecter notre app avec
5:10:52Superbase via les MCP serveur. Donc je
5:10:56clique sur Superbase. D'accord ? Je vais
5:10:59faire install
5:11:02save. Et ici ça va me demander cet accès
5:11:04ce token là que je viens de copier sur
5:11:06mon SPB. Je le colle et je fais save.
5:11:09Donc ici il me ramène sur cette cet
5:11:11écran, cette page là. Je descends ici en
5:11:13bas, je mets mon access token, je fais
5:11:16save. D'accord. Et là c'est bon. Comme
5:11:19tu peux le voir, je viens de créer et de
5:11:22connecter Superbase. Et ici, vérifie
5:11:24bien que ici c'est enabled. D'accord ?
5:11:27Donc là, une fois que c'est bon, je
5:11:30viens ici et je lui dis OK, donc je
5:11:33viens de connecter par MCP Superbase et
5:11:37l'idée maintenant, c'est que je veux
5:11:38rendre mon app euh totalement full
5:11:41stack. Donc tous les éléments, toute la
5:11:43toutes les fonctionnalités création de
5:11:45factures, euh tout ce qui est création
5:11:47de factures, enregistrement de factures,
5:11:50enregistrement des clients, les
5:11:52informations de l'entreprise. D'accord ?
5:11:54Je veux que tout maintenant que toute
5:11:56l'application soit full stack sur
5:11:58Superbase. Quels sont les les étapes à
5:12:01suivre ? Quand on parle de full stack,
5:12:03c'est tout simplement le fait que
5:12:04maintenant les informations ne seront
5:12:06plus enregistrées sur ma machine en
5:12:07local ou bien ce ne sera plus des
5:12:09informations de fausses informations
5:12:11parce que ça c'est des informations qui
5:12:12n'existent pas. D'accord ? L'idée
5:12:14maintenant c'est que quand on va
5:12:15connecter notre appes, ce sera une vraie
5:12:18application qui va refléter des vraies
5:12:21données. D'accord ? Donc ça c'est juste,
5:12:22on va dire que ça c'est juste du design.
5:12:24Et donc ça c'est le front. D'accord ? Vu
5:12:26que maintenant on va le connecter à une
5:12:28base de données à travers un backend,
5:12:30bah ça devient une application full
5:12:32stack. Donc c'est ça que ça veut dire
5:12:33full stack. Donc une application où il
5:12:36[musique] y a un front end, un E et un
5:12:38back end tout simplement. Donc là il m'a
5:12:40dit j'ai analysé notre architecture
5:12:41actuelle et les projets sur ton
5:12:43interface Superbase. J'ai rédigé un plan
5:12:45de mise en œuvre. D'accord ? En résumé,
5:12:48la migration se fera en quatre grands
5:12:50étapes. Il va créer les tables et les
5:12:51schémas avec une protection de leur
5:12:53level security. D'accord ? installation
5:12:56de l'authentification et protection des
5:12:58pages. Donc il va faire
5:12:59l'authentification. Donc
5:13:00l'authentification tout simplement la
5:13:02création et la connexion. Il va pivoter
5:13:05notre apptexte et il ira désormais
5:13:08récupérer et modifier les données sur
5:13:09ton backend superbase au lieu d'utiliser
5:13:11le cash local. Donc c'est tout
5:13:12simplement de remplacer le fait que les
5:13:15données sont sauvegardées sur mon
5:13:17ordinateur local et de les sauvegarder
5:13:19directement dans la base de données en
5:13:20ligne. Et génération du client T script
5:13:23pour ta base de données. OK. Euh donc ça
5:13:26c'est le plan d'implémentation. Donc ici
5:13:28je lui je clique tout simplement sur
5:13:29procede ou bien tu lui dis go OK et
5:13:31cetera vas-y. Et il va commencer à faire
5:13:34le travail. Et toi tout ce que tu as à
5:13:35faire c'est d'attendre qu'il termine. Tu
5:13:37vas faire des tests. D'accord ? Et une
5:13:39fois qu'on voit que tout est bon là on
5:13:42passe à l'étape suivante. Et ici comme
5:13:43tu peux le voir à chaque fois qu'il va
5:13:44te poser une question euh tu cliques
5:13:46juste sur OK, run et cetera. D'accord ?
5:13:49C'est juste qu'il aura besoin peut-être
5:13:50d'autorisation pour faire certaines
5:13:52actions. Chaque fois qu'il te demande
5:13:53juste fais OK, run et attends qu'il te
5:13:55dise que j'ai terminé, qu'il te fasse un
5:13:57walkthrough. Donc le parcours le fichier
5:14:00parcours. Et aussi le temps qui
5:14:01continue, je vais te donner une astuce.
5:14:03Là je vois que par exemple ça fait 2
5:14:04minutes qu'il est sur ce fichier là et
5:14:06je ne vois pas de changement. Peut-être
5:14:08que il est bloqué ou bien quelque chose
5:14:09qui se passe. Donc moi ce que je fais
5:14:11généralement, je je clique sur ce bouton
5:14:13là, d'accord ? Je l'arrête et ensuite je
5:14:15lui dis tout simplement continue.
5:14:18D'accord ? comme ça ça le pousse à
5:14:20continuer. D'accord ? Au lieu de le
5:14:22laisser tourner en rond sur un fichier,
5:14:25peut-être qu'il est bloqué peut-être que
5:14:28voilà, il y a eu un souci, on sait pas
5:14:30l'idée. Moi généralement, à chaque fois
5:14:32que je vois qu'il prend trop de temps et
5:14:33je ne vois aucune modification qui est
5:14:35faite, j'arrête le processus et je lui
5:14:37dis tout simplement continuer. OK, donc
5:14:39là il dit avoir terminé, il dit j'ai
5:14:41terminé l'exécution de toutes les
5:14:43étapes. Easy Facture est maintenant
5:14:44devenue une application vraiment full
5:14:46stack. les données ne s'effaceront plus
5:14:48si vous changez de navigateur. J'ai
5:14:50résumé l'ensemble des travaux, des
5:14:51vérifications techniques et cetera. Donc
5:14:54là, voici un peu ce qu'il a fait. Euh
5:14:57donc ce qu'on va faire, donc je vais
5:14:59faire juste npm run dev. Je te je t'ai
5:15:01dit que c'est la commande pour lancer
5:15:03ton application ou bien tout simplement
5:15:05tu lui dis lance l'application que je
5:15:06vérifie.
5:15:08Euh, on revient ici. Normalement, quand
5:15:11on actualise, on devrait plus voir ces
5:15:13donnéeslà parce que ça c'est des
5:15:14anciennes données. C'est des c'est pas
5:15:16des vraies données. D'accord ? Donc,
5:15:17j'actualise. Et si on les voit toujours,
5:15:21[souffle coupé] tu as vu là, il m'a mis
5:15:23connexion mot de passe. Donc, il a
5:15:24implémenté la connexion et le mot de
5:15:26passe. Je vais faire créer un compte. Se
5:15:28connecter, créer un compte. OK.
5:15:31[musique] Donc là, ce que je vais faire
5:15:33plutôt, euh je je vois que par exemple
5:15:35quand je clique sur me connecter ou
5:15:37créer un compte, il n'y a rien qui se
5:15:39passe. Euh je vais lui dire, on dirait
5:15:41que tu as implémenté le la connexion, la
5:15:44création de compte et la connexion, mais
5:15:46que là, par exemple, quand j'essaie de
5:15:47me connecter, il [musique] n'y a rien
5:15:50qui se passe. Donc vérifie que ça marche
5:15:52bien. Le formulaire de connexion aussi,
5:15:55il est pas assez designé. Donc là, je
5:15:57l'idée c'est de partir sur dribble. On
5:16:00va rechercher par exemple
5:16:03connexion. On va voir une page de
5:16:06connexion et d'inscription. OK. Donc je
5:16:08vois que hm la page de connexion
5:16:12actuellement n'est pas fonctionnelle.
5:16:14Refais la page, rendla fonctionnel et
5:16:15ensuite profitons aussi pour auditer
5:16:17tous les changements que tu as fait.
5:16:19vérifie que l'app actuellement, il ne va
5:16:21afficher que des vraies données et qu'il
5:16:23ne va modifier que des vraies données
5:16:25euh et que h tu as tout remplacé, que ce
5:16:29soit la création, la sauvegarde de
5:16:31facture en PDF, le téléchargement de
5:16:33facture en PDF, euh le changement d'état
5:16:36d'une facture, les informations des
5:16:38clients, les informations d'une
5:16:40entreprise, euh tout est vraiment
5:16:43synchronisé avec la base de données et
5:16:45totalement full stack. Donc là,
5:16:46actuellement, en fait, je lui dis de
5:16:48regarder pourquoi je n'arrive pas à me
5:16:50connecter ni à créer de comptes,
5:16:52d'accord ? Et qu'il en profite pour
5:16:55auditer ce qu'il a fait pour voir si
5:16:57l'app est vraiment bien connectée à à
5:16:59Fireb à Superbase. D'accord ? Donc là,
5:17:02quand je viens sur mon dashboard, je
5:17:04peux voir qu'il a créé lui-même une
5:17:06organisation. Donc et quand j'entre dans
5:17:08cette organisation, je vais venir dans
5:17:10database. D'accord ? [musique] Et là, je
5:17:12peux voir que il a créé les tables. Donc
5:17:14ça c'est les tables. Donc ça en fait ce
5:17:16que tu vois là, ça c'est une base de
5:17:18données. D'accord ? Donc c'est ça un peu
5:17:20comment marche une base de données.
5:17:22D'accord ? Donc on a par exemple la
5:17:24table des invoice items, la table des
5:17:29invoice, la table des clients, des
5:17:30profils. Donc par exemple là, il m'a
5:17:32donné un plan d'implémentation. Je vais
5:17:34juste faire proced. Il va commencer et
5:17:36là je vais revenir ici. Donc par exemple
5:17:38ça c'est la table de client. Donc disons
5:17:40que un client, il va avoir un user ID,
5:17:43un nom, un email. Donc c'est les
5:17:45informations du client et il va avoir un
5:17:48identifiant. D'accord ? Euh et le user
5:17:51ID, je pense que ça va être par exemple
5:17:53le propriétaire. Par exemple, si c'est
5:17:55ton client, il doit il va être relié à
5:17:57ton à ton identifiant utilisateur à toi.
5:18:00Tu n'es pas obligé de comprendre tout
5:18:01cela. Juste je t'explique. D'accord ?
5:18:04Euh ici aussi les profiles. D'accord.
5:18:09Donc euh c'est tout simplement les
5:18:11informations de l'entreprise je pense.
5:18:13Donc nom de compagnie, adresse, email,
5:18:16phone currency. Donc c'est un peu dans
5:18:18les réglages. Par exemple, quand tu
5:18:19changes le la devise, donc c'est ici que
5:18:21ça va être sauvegardé. En fait, ça c'est
5:18:24une base de données. Donc quand tu
5:18:26entends base de données, base de
5:18:27données, c'est tout simplement on va
5:18:28c'est tout simplement une table avec des
5:18:31information et chaque information euh va
5:18:34être sauvegardée euh avec un comment
5:18:38dire avec [musique] une nature par
5:18:40exemple. Ça c'est une la quantité est
5:18:42c'est c'est un nombre donc c'est
5:18:44numérique. Par exemple, created ad c'est
5:18:46par exemple la date de création d'un
5:18:49élément. Par exemple, quand tu crées un
5:18:51une facture, la date de création de la
5:18:53facture, donc c'est un c'est un time
5:18:54stamp, c'est une on va dire comment on
5:18:57appelle ça ? C'est un tampon temporel.
5:19:00D'accord ? Donc voilà. Donc là, c'est
5:19:02juste pour que tu comprennes, je
5:19:03t'explique juste hein. Mais tu n'as pas
5:19:04besoin de comprendre. Donc dis-toi que
5:19:06juste que ça c'est la base de données de
5:19:08notre application. Donc on a les
5:19:09invoice, les clients, les profils euh et
5:19:12les invoice items. Donc il l'a bien
5:19:14créé. D'accord. Euh et là, on dirait
5:19:18qu'il a terminé. Donc il a dit quoi ? La
5:19:21page de connexion use client. J'ai jeté
5:19:23l'ancien composant non fonctionnel. Tac
5:19:25tac tac. Le formulaire est désormais
5:19:27dynamique avec application de spiner son
5:19:29interface audit des données. J'ai
5:19:31vérifié de A à Z. L'application
5:19:32n'utilise officiellement plus aucune
5:19:33fausse donnée ni l'utilisation n'est pas
5:19:35loguée à une base vide. La base de
5:19:37données retourne bien rien et n'essaie
5:19:39pas d'injecter des favoris par défaut.
5:19:41OK, donc on revient sur notre app, on va
5:19:45actualiser. Oh, et euh tu peux même voir
5:19:48que il a un peu améliorer le design,
5:19:51c'est pas mal. OK, donc je vais faire
5:19:52email mot de passe. Je vais faire par
5:19:54exemple créer un compte. D'accord, là on
5:19:57va voir ce qu'il va faire pour la
5:19:59création de compte. Donc là, il y a rien
5:20:02qui se passe. D'accord ? Donc ce que je
5:20:04vais faire, je vais tout simplement
5:20:07capturer. D'accord ? Je vais venir ici
5:20:09et je vais lui donner la capture et je
5:20:12vais lui dire ceci. Donc là le
5:20:14formulaire déjà, il n'est pas assez bien
5:20:16optimisé. Je veux qu'on que ce soit un
5:20:18formulaire avec
5:20:21on va dire un sélecteur sous forme de
5:20:23tabulation entre création de compte et
5:20:26connexion. D'accord ? Et sur la page
5:20:29connexion, il y a en bas est-ce que si
5:20:31tu n'as pas de compte signup, ça va te
5:20:33ramener sur le formulaire d'inscription.
5:20:36Et pour le formulaire d'inscription,
5:20:37pareil, ça te ramène sur le formulaire
5:20:39de connexion. Et on a aussi sur le
5:20:41formulaire de connexion mot de passe
5:20:43oublié. Vérifie que les champs sont bien
5:20:45gérés. Et là, en fait, quand je clique
5:20:47sur par exemple créer un compte, le
5:20:49formulaire devient tout juste gris, il y
5:20:52a rien qui se passe. Donc je veux que tu
5:20:54corriges toute la on va dire le
5:20:57comportement, tout le comportement de
5:20:59formulaire d'inscription et de connexion
5:21:01pour qu'il soit totalement fonctionnel.
5:21:03Donc là, en fait, je lui demande juste
5:21:05de revoir un peu. Donc signup, c'est
5:21:07tout simplement création de compte. Sign
5:21:09in, c'est [musique] ce la connection.
5:21:12Donc, tu peux juste lui dire quand
5:21:14j'essaie de me de créer un compte, ça
5:21:16passe pas. C'est c'est on dirait que
5:21:18l'écran est bloqué. Tu lui donnes une
5:21:19capture et puis c'est bon. Lui, il va
5:21:22analyser et il va régler le problème.
5:21:25Donc, on attend qu'il termine et on va
5:21:27une fois de plus essayer de nous
5:21:29connecter. Il m'a dit que c'est corrigé
5:21:30maintenant, que il a fait ce que je lui
5:21:32ai demandé.
5:21:33OK, donc là il a fait connexion
5:21:36inscription d'accord mais il a mal géré
5:21:39le style. Donc je vais tout simplement
5:21:41faire une faire une capture. Donc je
5:21:44vais lui donner la capture et je vais
5:21:46lui dire OK donc tu as mal géré le style
5:21:49comme tu peux le voir connexion et
5:21:50inscription d'accord ils doivent être en
5:21:53haut du formulaire d'accord euh
5:21:56horizontal. Donc le switch se fait
5:21:58horizontalement. Donc c'est en haut du
5:22:00formulaire très petit. Là en fait c'est
5:22:02très c'est pas bien placé, c'est mal
5:22:04placé. Ensuite pour la l'inscription, je
5:22:08devrais aussi avoir le nom de la
5:22:09personne, d'accord ? Son nom, son on va
5:22:13dire son nom, son adresse email, mot de
5:22:15passe et confirmation de mot de passe
5:22:17pour pouvoir se connecter. Ensuite, une
5:22:19fois qu'il est connecté, c'est son nom
5:22:21qui qu'il a donné qu'on va utiliser pour
5:22:23sur le dashboard. On va lui dire salut
5:22:25par exemple son nom. Si c'est Amado,
5:22:27salut Amado et cetera. Mais euh revois
5:22:30le design euh de ça. Donc euh si tu
5:22:34veux, tu le tu te mets à la place d'un
5:22:35d'un expert UX UI designer et fais-moi
5:22:38un très bon formulaire euh fonctionnel.
5:22:41OK, donc là il a fait quelques
5:22:42modifications, on revient. Voilà, là
5:22:44c'est beaucoup mieux, tu as vu ? Donc
5:22:45là, le switch se fait super. Donc là,
5:22:49quand je m'inscris, il me demande mon
5:22:51nom, mon entreprise, mon adresse email.
5:22:54D'accord ? mot de passe et confirmation.
5:22:56Donc ici, je mets en mode file, ici je
5:22:59mets ça, mon mot de passe. D'accord, je
5:23:02fais créer mon compte. Tac. Et voilà, le
5:23:05lien de confirmation vous a été envoyé
5:23:07dans votre boîte email. OK, dans ma
5:23:09boîte email, c'est bien que je c'est
5:23:11vrai, je viens de recevoir un email.
5:23:13D'accord ? Donc l'email, il est là. Je
5:23:15confirme. Donc je clique et c'est bon.
5:23:18Euh j'ai confirmé mon compte. D'accord.
5:23:20Je reviens, je vais me connecter avec
5:23:22mon mot de passe. Donc là, quand
5:23:24j'essaie de me connecter, ça ne passe
5:23:26pas. D'accord ? Je pense que j'ai fait
5:23:28plusieurs essais. Euh, il m'a dit
5:23:31identifiant incorrect [musique]
5:23:33inexistant. Donc ça aussi, c'est un
5:23:35problème. Attends, je reviens, je lui
5:23:36dis. OK, donc là, je me suis inscrit,
5:23:38j'ai créé mon compte, j'ai confirmé mon
5:23:40compte par email, mais de retour sur le
5:23:42formulaire de connexion, il me dit ce
5:23:44compte est inexistant ou bien le mot de
5:23:46passe n'est pas bon. D'accord. Et euh
5:23:49même lorsque je clique sur mot de passe,
5:23:52oublié, rien ne se passe. Je ne suis pas
5:23:53redirigé sur le formulaire pour
5:23:55récupérer mon mot de passe. Donc essayez
5:23:58de voir est-ce que c'est euh le bon
5:24:01email et le bon mot de passe qui sont
5:24:02sauvegardés. Euh il y a aussi un rate
5:24:05limit qui se fait, d'accord ? Euh
5:24:08essayez de rendre le rate limit un peu
5:24:09moins strict. On avait parlé de rate
5:24:12limit. Donc le Rid limit, c'est tout
5:24:13simplement le fait d'empêcher une
5:24:15personne d'abuser de ton système. Par
5:24:17exemple là par exemple, j'ai essayé de
5:24:19me connecter trois quatre fois, c fois
5:24:21d'affilé. Il a en fait il m'a fait un
5:24:23rate limite et je dois attendre
5:24:26peut-être 5 minutes, 10 minutes avant de
5:24:28pouvoir me connecter. Donc mais là bon
5:24:31quand je je suis en mode test, je vais
5:24:34tester rapidement donc ça m'arrange pas
5:24:37trop. Euh généralement j'attends de
5:24:39terminer à la fin, je dis de faire un
5:24:41rate limit. Mais là, il faut d'abord
5:24:43qu'on s'assure que le formulaire de
5:24:45connexion et description marche bien
5:24:47parce que c'est très critique. Si les
5:24:48gens ne peuvent pas se connecter, bah ça
5:24:50sert à rien. Donc on va attendre qu'il
5:24:52vérifie tout ça. Et puis en attendant
5:24:54qu'il règle ça, euh pose-toi la question
5:24:56si je devais écrire à la main tout ce
5:24:58que je dis là, en fait, tu as vu le
5:25:00temps que ça me fait gagner juste
5:25:02d'avoir cet outil ? Donc c'est cet outil
5:25:03là qui s'appelle Whisper Flow. Donc euh
5:25:06moi je suis au plan pro hein. Donc si tu
5:25:08veux tu le prends, ça dépend de toi. Ou
5:25:10bien tu utilises les vocaux ici
5:25:12directement. Donc là il m'a dit quoi ?
5:25:15Superbase par mesure antispam applique
5:25:17un blocage script seulement trois emails
5:25:19envoyés par heure par utilisateur. Comme
5:25:21vous avez le superb, je ne peux pas
5:25:23manipuler ces quotas de sécurité. Vous
5:25:25pouvez débloquer la limite aller sur le
5:25:27tableau de bord alle authentification
5:25:30rate limit. OK,
5:25:32donc je vais aller dans Superbase, je
5:25:35vais aller dans authentification,
5:25:38je vais aller dans rate limit
5:25:40ici on va voir rate limit for sending
5:25:43image number of 4 par hour. Donc ici je
5:25:47vais redim sending SMS, limit for token
5:25:51refresh, limit for token verification
5:25:55limit for anonymous number. Donc ça
5:25:58c'est un peu les rate limit
5:26:02par exemple c'est ces rate limit je ne
5:26:05peux pas les changer si je suis en mode
5:26:07gratuit on dirait. Donc ils ont fait
5:26:09exprès de faire en sorte que je dois
5:26:11prendre un plan payant pour pour pouvoir
5:26:14envoyer plus de deux emails par heure
5:26:17par utilisateur. Donc c'est un peu ça
5:26:19comment ils ont fait ça. Rate limit
5:26:23for sign up and sign in. Donc là, il y a
5:26:2530 requests par pour chaque 5 minutes.
5:26:29Ici, c'est 30 pour chaque 5 minutes. Euh
5:26:32ouais. Donc ici, c'est bon, ça va. Mais
5:26:35si tu veux envoyer plus de deux emails
5:26:37par utilisateur, il te faudra prendre
5:26:38leur plan payant. Donc ça, on y peut
5:26:40rien. Donc email recovery astuce. OK,
5:26:45donc maintenant je reviens ici. Mot de
5:26:47passe oublié. Payz indiquer votre adress
5:26:49email avant de demander la
5:26:50réinitialisation. Je fais mot de passe
5:26:52oublier. Ah, OK. Donc là en fait quand
5:26:55je fais mot de passe oublié, il peut pas
5:26:57m'envoyer l'email tout simplement parce
5:26:59qu'il m'a déjà envoyé deux emails qui
5:27:02sont là. D'accord ? Donc ça c'est les
5:27:03deux emails que j'ai reçu il y a 6
5:27:04minutes, il y a 13 minutes quand j'ai
5:27:06créé mon compte et vu que je suis sur le
5:27:08plan gratuit, bah je peux pas. Donc là
5:27:10j'ai retrouvé mon mot de passe. J'ai
5:27:13retrouvé mon mot de passe. Donc c'est
5:27:14bon. Je pense que j'avais utilisé le
5:27:16mauvais mot de passe. Ensuite, une fois
5:27:18que je suis connecté, ce que je vais
5:27:21faire donc déjà ici en haut, tu vois que
5:27:23ça m'affiche toujours les anciens euh on
5:27:26va dire informations. Ça c'est pas les
5:27:27vraies informations. Je n'ai pas la
5:27:29possibilité de me déconnecter. Ça c'est
5:27:32pas c'est pas bon ça. Il ne m'affiche
5:27:33pas mon véritable email ici. Donc quand
5:27:36je vais dans paramètres Ouais. Donc ici
5:27:40c'est bon. Euh ça c'est bon. J'ai pas
5:27:43parce que j'ai pas encore de clients,
5:27:45j'ai pas encore de facture. Ah, tu as vu
5:27:48client, il m'a il m'affiche toujours les
5:27:50faux clients. Donc là, je me suis
5:27:51connecté. Maintenant, au niveau des
5:27:53clients, on on affiche toujours une
5:27:56fausse liste de clients. Donc, il
5:27:58faudrait que ce soit aussi tiré de la
5:28:00base de données et que les recherches
5:28:03soient faites. Euh, les barres de
5:28:05recherche, toutes les barres de
5:28:06recherche du site, les résultats doivent
5:28:08provenir de la base de données. D'accord
5:28:10? les factures. Quand je crée une
5:28:12facture, on vérifie que il est bien créé
5:28:14en base de données. D'accord ? Encore
5:28:16une fois, enregistré. Lorsque je change
5:28:19l'état d'une facture en brouillon et
5:28:21cetera, il est enregistré en base de
5:28:23données et il est reflété
5:28:24automatiquement sur le dashboard, les
5:28:26factures et cetera. Pour l'instant, au
5:28:27niveau des paramètres, on n' rien à
5:28:29faire là-bas. Mais au niveau des
5:28:30clients, des factures, au niveau du
5:28:32dashboard, les éléments principaux, donc
5:28:34total encaissé, facture en attente, en
5:28:36retard, nouveaux clients, bon, sont tous
5:28:39des fausses données, ils doivent être
5:28:40tirés de la base de données et être bien
5:28:42calculés. Je voudrais aussi avoir à côté
5:28:44de Bonjour Amadou euh sur le dashboard,
5:28:47je voudrais aussi avoir un sélecteur de
5:28:49dates. Donc on va utiliser le même
5:28:51composant calendrier qu'on a dropdown
5:28:54pour pouvoir sélectionner d'une date à
5:28:56une autre et filtrer les transactions
5:28:59par période. Et ensuite sur le sur le
5:29:03dashboard sur le menu latéral tout en
5:29:05bas, d'accord ? Là où il y a mon nom et
5:29:08mon email. Donc là il y a
5:29:10[email protected].
5:29:12Donc il n'a pas pris mon mon véritable
5:29:15email que j'ai utilisé lors de la
5:29:17création ni mon nom. D'ailleurs, si on
5:29:19peut ajouter aussi l'option de de se
5:29:23déconnecter. Donc tu fais un joli
5:29:25composant pour la déconnexion euh et
5:29:28même pour profil de users euh à ce
5:29:32niveau-là, ce serait bien. Donc là, on
5:29:35teste encore une fois. Là, on voit très
5:29:38bien que euh il y a beaucoup de données
5:29:40qui ont disparu. C'est normal parce que
5:29:41dans notre base de données, pour
5:29:43l'instant, on a rien. Mais au niveau des
5:29:45clients ici par exemple, on devrait
5:29:47aussi ne rien avoir parce qu'on a
5:29:48toujours pas créé de clients ici. Euh
5:29:51donc, on attend qu'il euh qu'il règle
5:29:53tout ça. OK, donc comme d'habitude, il
5:29:55me propose un plan d'implémentation.
5:29:58Euh, je vais tout simplement faire
5:29:59procede comme d'habitude. Si tu veux, tu
5:30:01cliques dessus et tu vas lire le plan
5:30:04d'implémentation. Puis voilà. Donc on
5:30:06attend qu'il termine comme d'habitude.
5:30:08OK. Donc là il dit avoir terminé. Donc
5:30:10il m'a dit qu'il a fait le sélecteur de
5:30:12date dynamique. Donc il est là. Donc
5:30:14voici le sélecteur de date. Bon je pense
5:30:16que le sélecteur de date, il y a un
5:30:17petit problème de logique qui ne marche
5:30:19pas normalement. Euh on va voir sur
5:30:22mobile est-ce que le sélecteur de date
5:30:24est bien responsif. Voilà, il est pas
5:30:27assez responsive à mon goût. Donc on va
5:30:30on va voir cela tout de [musique] suite
5:30:32pour les clients. Donc normalement tous
5:30:35les clients sont partis. C'est cool. Ici
5:30:39il a mis mes informations utilisateur,
5:30:42il a pas mis mon nom euh tout simplement
5:30:45euh parce que je pense que lorsque je me
5:30:49je créais mon compte au début euh
5:30:52j'avais pas mis de nom. Mais euh c'est
5:30:54bon, c'est pas grave. Là, je peux me
5:30:56déconnecter. Là, ce qu'on va faire
5:30:58d'abord, c'est on va d'abord tester la
5:31:00création d'une facture. Donc, je viens
5:31:03euh je je vais je vais juste mettre un
5:31:06texte. Je crée enregistrer, télécharger.
5:31:11Voilà. Donc là, il y a ceci au niveau de
5:31:14la facture qui va être qui est créée.
5:31:17Donc et là quand je viens ici, donc la
5:31:20facture est envoyée, je vais cliquer sur
5:31:23la facture.
5:31:25Je fais changer le statut, marquer comme
5:31:27payer. Je viens
5:31:30ici la facture a disparu.
5:31:35Donc il y a pas mal de soucis à régler.
5:31:37Donc première chose, lorsque je crée une
5:31:41facture, on dirait que la facture ne se
5:31:43crée pas directement base de données
5:31:44parce que moi, j'ai créé une facture
5:31:46quand je suis revenu sur euh la liste
5:31:48des factures, la facture s'est affichée,
5:31:50mais il a fallu que j'actualise, la
5:31:52facture a disparu. Donc c'est soit un
5:31:55problème de création de facture qui ne
5:31:57va pas être ajouté dans la base de
5:31:59données ou bien un problème de
5:32:01récupération des factures de la base de
5:32:02données et de les afficher sur la liste
5:32:04facture. Pour la liste des clients
5:32:06aussi, lorsque je crée un client et que
5:32:09j'actualise le client, il disparaît tout
5:32:11simplement. Donc aussi dans le dashboard
5:32:14pour le sélecteur de date que tu as mis,
5:32:17déjà il n'est pas responsive. En plus,
5:32:20on devrait avoir quelque chose de
5:32:21beaucoup plus clean. Donc mieux vaut
5:32:23avoir par exemple deux composants, un
5:32:26pour sélectionner la date de départ et
5:32:28un autre pour sélectionner la date
5:32:29d'arrivée. Comme ça, on a un sélecteur
5:32:32de période beaucoup plus cohérent parce
5:32:34que là euh le sélecteur qu'on a, il y a
5:32:36un gros problème de logique. Et aussi
5:32:38vérifie que sur le dashboard aussi que
5:32:40les informations s'affichent normalement
5:32:42qu'il va tirer que en fait on va on va
5:32:45afficher en real time les les les
5:32:47informations. Donc là on continue de
5:32:49tester. On est un peu dans cette phase
5:32:52là. où une fois qu'on a fait la le la
5:32:55connexion de la base de données, comme
5:32:56je t'ai expliqué dans ma phase, on fait
5:32:58un test end to end. Donc on on teste que
5:33:02tout est bien intégré, que tout marche
5:33:04bien, les fonctionnalités de base, les
5:33:07fonctionnalités principales et peu
5:33:09importe le type de projet que tu vas
5:33:10faire, tu vas devoir passer par là,
5:33:12d'accord ? parce que li peut-être il va
5:33:14te dire tout marche bien mais en fait il
5:33:17te faut que toi-même que tu puisses que
5:33:21tu puisse tester et voir que tout marche
5:33:23bien avant de de valider et de passer à
5:33:26l'étape suivante. Donc [musique] on le
5:33:28laisse corriger ça et après on va
5:33:31avancer. OK. Donc là il m'a dit que il a
5:33:34réglé. Qu'est-ce qu'il m'a dit ? Le bug
5:33:36des factures qui disparaissent au
5:33:37rafraîchissement. Euh la base de données
5:33:39rejetez brutalement vos créations pour
5:33:42une raison cachée. Les identifiants
5:33:43générés localement étaient faits avec
5:33:45Math random. Or la base de données
5:33:47attend de vrais identifiants. J'ai
5:33:49remplacé tous les anciens. OK, c'est
5:33:51bon. Le sélecteur de date. OK, il a
5:33:55refait ça. On va voir.
5:33:58Donc là, le sélecteur de date, on a date
5:34:00de départ par exemple 10 et date
5:34:03d'arrivée 19. Euh on a non pas de date.
5:34:06OK. Date de départ 10 et on clique sur
5:34:08date d'arrivée 19. Voilà. Là, là c'est
5:34:11mieux. Là c'est mieux. Euh ensuite
5:34:15facture, je vais y aller créer une
5:34:18nouvelle facture
5:34:20euh l'appeler comme ça, enregistrer.
5:34:25Euh là par contre, lorsque je clique sur
5:34:29enregistrer,
5:34:31on dirait que la facture n'est pas
5:34:32vraiment créée ou bien ? On dirait
5:34:35qu'elle est créé parce que là quand
5:34:38j'actualise elle est là. Quand je
5:34:41reviens ici la facture aussi elle est
5:34:42là. Donc quand je fais euh j'entre dans
5:34:46la facture, je change le statut, je
5:34:48marque comme payer, je reviens. Le
5:34:50statut n'est pas changé mais au moins la
5:34:52facture elle est créée. OK, c'est bon.
5:34:56Donc maintenant, lorsque je crée une
5:34:58facture, je vois qu'elle est bien
5:35:00poussée en base de données et que
5:35:01lorsque je crée un client aussi et que
5:35:04j'actualise, le client est là. Donc il
5:35:06est aussi bien créé. Maintenant, l'idée
5:35:08c'est que lorsque je change le statut
5:35:11d'une facture, d'accord ? Lorsque je
5:35:13change le statut d'une facture, euh le
5:35:16statut euh par exemple, si je le change
5:35:19directement au niveau de la colonne
5:35:22facture, là c'est bon. D'accord. Mais si
5:35:25j'entre dans le la facture, d'accord,
5:35:27sur la page de la facture euh en
5:35:30question, euh là-bas, on voit que il ne
5:35:33récupère pas le statut de la facture et
5:35:35même quand je change le le statut
5:35:37là-bas, il ne il ne prend pas en compte,
5:35:40d'accord, lorsque je sors. Et ensuite,
5:35:42il me faudrait un bouton aussi
5:35:44télécharger la facture sur cette page
5:35:45là, d'accord ? parce que sinon j'ai il y
5:35:48a pas d'autres moyens de télécharger la
5:35:49facture euh à part ici et une fois que
5:35:53la facture elle est créée. Maintenant
5:35:55quand je clique pour télécharger la
5:35:56facture en PDF, la facture dans son
5:35:59style et le PDF qui me génère sont
5:36:01diamétralement opposé. Je veux que la la
5:36:03facture qui va être téléchargée soit
5:36:07identique euh vraiment euh totalement
5:36:11identique à la facture que j'ai dans le
5:36:13PUV.
5:36:15Donc euh fais-moi ça, s'il te plaît.
5:36:17Donc là, normalement encore quelques
5:36:19messages, deux trois messages et on a on
5:36:22a régler, on va dire nos fonctionnalités
5:36:25de base. Donc la création d'une facture,
5:36:28le fait de télécharger une facture, le
5:36:32fait de modifier une facture. Quand je
5:36:33clique sur modifier la facture, ça me
5:36:35fait 404. Ça c'est pas bon.
5:36:38Je devrais pouvoir modifier une facture
5:36:41euh voir les détails. Ça marche. Lorsque
5:36:43je clique sur une facture, je devrais
5:36:47pouvoir euh comment dire relier la
5:36:51facture à un client. D'accord ? Donc si
5:36:54je ne si je ne le relie pas à un client,
5:36:57la facture ne devrait pas être créée. Et
5:36:59ici aussi, tu as vu sur la liste des
5:37:01clients dans le formulaire de création
5:37:03de facture, il ne [grognement] il ne
5:37:05m'affiche pas les vrais clients parce
5:37:06que moi ici je n'ai qu'un seul client à
5:37:08modal mais là il me ça c'est les les
5:37:11faux clients qu'on avait créé tout à
5:37:13l'heure. Donc on va régler tout cela, on
5:37:16attend qu'il termine et on va lui dire
5:37:17de gérer ça. OK. Donc là, je lui ai
5:37:19expliqué ça. Le problème sur la création
5:37:21de facture. Là où on do sélectionner les
5:37:23clients, il m'affiche pas les vrais
5:37:24clients. Le bouton télécharger
5:37:27sur la page d'une facture. Tout à
5:37:29l'heure, quand j'ai cliqué sur les trois
5:37:31points d'une facture pour par exemple
5:37:35modifier la facture, ça me ramène sur un
5:37:37400, donc sur une page qui n'existe pas.
5:37:39Donc on lui demande de régler ces
5:37:40derniers détails là. OK, donc là avoir
5:37:42terminé, on va faire un roundup. Donc on
5:37:45va faire quelques vérifications.
5:37:47Donc ici quand je clique sur le bouton
5:37:50encore une fois modifier là c'est bon.
5:37:52Ça me ramène sur la page de
5:37:53modification. Ici lorsque je clique, tu
5:37:56as vu, il me montre maintenant la liste
5:37:57des clients. Pour vérifier, on va aller
5:37:59créer un deuxième client qu'on va
5:38:01appeler Ousman. Donc on a créé un
5:38:04deuxième client qui s'appelle maintenant
5:38:06Ousman. L'idée c'est que si on vient
5:38:08ici, [musique] on va rechercher là. Tu
5:38:11as vu, ça m'affiche Ousman avec ces
5:38:14informations. Donc là, on est bien.
5:38:16Maintenant, je crée une prestation
5:38:18quantité 1. Euh, je mets par exemple ça
5:38:22coûte ça. J'ajoute une autre quantité.
5:38:24D'accord ? J'ajoute autre chose, je mets
5:38:27le tarif. Donc là, c'est bon. OK, je
5:38:30fais enregistrer.
5:38:32Ensuite, je fais télécharger. Et là, ça
5:38:35me fait une page blanche. OK. D'accord.
5:38:39Maintenant, on va retourner aux
5:38:40factures. Je clique sur la facture
5:38:42elle-même. Je fais télécharger.
5:38:44Et là, tu as vu, il m'affiche bien la
5:38:46facture. Donc ici, ça marche. Je vais
5:38:49cliquer sur euh enregistrer. Je
5:38:52télécharger la facture dans le dans mon
5:38:54bureau. OK. Et là, c'est la facture que
5:38:57je viens de télécharger. Donc, c'est pas
5:38:59mal. Donc c'est juste que il faut que il
5:39:02on ait le même comportement euh sur le
5:39:05composant après la après la facture
5:39:07créée. Mais ici déjà ça marche très
5:39:10bien. Donc ça c'est bien. Ensuite, quoi
5:39:11d'autre ? Lorsque je change le statut,
5:39:14je mets payé ici et que je reviens, je
5:39:17sors. Voilà, la facture maintenant, elle
5:39:19est payée. Quand je vais dans mon
5:39:20dashboard, la facture elle est payée.
5:39:23Maintenant, une facture payée, elle
5:39:26devrait être euh comment dire reflétée
5:39:28dans le total encaissé parce que la
5:39:30facture est payée. Euh voilà, c'est ça,
5:39:33c'est bon. Donc il est là dans le total
5:39:35encaissé. Et là quand je fais un filtre
5:39:37parce que ces deux opérations, je les ai
5:39:39fait le 2. Donc si je fais le filtre, je
5:39:42vais faire par exemple 1. Voilà, là je
5:39:44vois rien et c'est bon.
5:39:48Donc si je fais par exemple, je veux
5:39:50savoir combien j'ai gagné à partir du 2.
5:39:53Je fais ça. Voilà. Donc on est bon, on
5:39:57peut optimiser, on peut avoir beaucoup
5:39:58mieux. Mais là déjà, on a réglé la
5:40:00majeure partie des problèmes. Donc on il
5:40:03reste à régler le bouton de
5:40:06téléchargement. Ici quand je fais
5:40:08brouillon, ça se met en brouillon. C'est
5:40:10bien. Donc je reviens et je lui dis le
5:40:13bouton juste après la création d'une
5:40:15facture pour enregistrer et télécharger
5:40:17la facture, ce boutonlà ne me montre
5:40:20juste une facture blanche. Donc il faut
5:40:22mettre dans ce bouton là le même la même
5:40:25fonctionnalité, le même comportement que
5:40:27le bouton téléchargé qui se trouve dans
5:40:30[musique] la page euh de détail d'une
5:40:33facture. D'accord ? parce que sur cette
5:40:36sur ce bouton là, j'arrive à bien
5:40:37télécharger le PDF mais sur le composant
5:40:42qui s'affiche juste après la création
5:40:44d'une facture, ça me fait juste une page
5:40:46blanche alors que ça devrait afficher la
5:40:48facture exactement comme sur le PDF,
5:40:50comme sur le l'aperçu. OK, donc
5:40:52maintenant il dit avoir réglé. Ce que je
5:40:54vais faire, on va faire un dernier test.
5:40:56Je reviens dans une facture. Je
5:40:57sélectionne un client. Je fais le nom de
5:41:00la prestation, je fais le prix. Je fais
5:41:03enregistrer. Télécharger.
5:41:05Et voilà, c'est bon. Donc là, je peux
5:41:08télécharger ma facture ou bien je mets
5:41:11un autre nom et je télécharge ma facture
5:41:13en PDF. Et puis le tour est joué. Euh
5:41:17l'idée maintenant, c'est de tout
5:41:18simplement vérifier. Donc en fait, c'est
5:41:21aussi simple que ça. Tu continues à
5:41:22vérifier. Là, c'est la facture en
5:41:24attente parce que c'est la facture que
5:41:26je viens d'envoyer. D'accord ? Elle est
5:41:28en attente. Donc l'idée maintenant c'est
5:41:30que je quand je vais dessus et que je
5:41:34change en payé. D'accord ? Quand je
5:41:37reviens ici, tu as vu total encaissé. Et
5:41:39ça c'est vraiment même si je me
5:41:41déconnecte et que je me reconnecte,
5:41:44c'est pareil tout simplement parce que
5:41:45c'est maintenant des information
5:41:48sauvegardé [musique]
5:41:49en base de données. Donc là, il va
5:41:51charger euh et là il y a un petit on va
5:41:54dire un petit tu as vu, il faut
5:41:56actualiser pour voir ça. Donc c'est une
5:41:58petite astuce que je vais te donner euh
5:42:01pour éviter de faire cela. on va
5:42:03utiliser ce qu'on appelle des skeleton
5:42:05loaders, donc des euh des éléments de
5:42:09chargement squelette. Donc en fait, les
5:42:11éléments ne vont pas s'afficher tant que
5:42:13les données ne sont pas présents. Donc
5:42:15ce que je vais lui dire, OK, donc là je
5:42:18me suis déconnecté, je me suis
5:42:19reconnecté, les composants affichés
5:42:22zéro, il a fallu que j'actualise pour
5:42:24voir les bons éléments qui viennent de
5:42:25la base de données. Donc ce que je veux,
5:42:27c'est qu'on utilise pour chaque
5:42:29composant de chaque page dashboard,
5:42:31facture client, on va utiliser des
5:42:33skeleton loaders, d'accord ? On va
5:42:35utiliser des skeleton loader et on va
5:42:38afficher directement
5:42:41les informations. Donc on ne fait pas on
5:42:44ne fait pas de on ne on n'affiche pas
5:42:46les éléments les composants tant qu'on a
5:42:48pas tiré les informations de la base de
5:42:50données. Comme ça on va les afficher
5:42:52directement au lieu de forcer la
5:42:54personne à actualiser tout le temps pour
5:42:56voir les les informations. Et là une
5:42:59fois que il va terminer tu vas voir le
5:43:01changement que ça va faire au niveau de
5:43:03l'expérience de l'utilisateur. Donc un
5:43:05skeleton loader, c'est comme si en fait
5:43:07tu as vu la taille de la forme du
5:43:09composant, tu as vu les rectangles, tu
5:43:11vas voir quelque chose qui s'affiche de
5:43:13cette forme là mais tu ne verras pas de
5:43:15texte. Donc ça va faire une an comme si
5:43:17ça chargeait et une fois que il a il a
5:43:20récupéré ces informations à partir de là
5:43:23il va afficher. Donc tu normalement sur
5:43:26beaucoup de sites que tu vas aller quand
5:43:28ça charge tu vas voir comme s'il y avait
5:43:30des éléments qui euh qui remplaçaient un
5:43:32peu les composants, donc les boutons,
5:43:35les textes et cetera. Donc c'est ça
5:43:36qu'on va faire. Je vais me déconnecter.
5:43:38Je vais attendre qu' qu'il termine et je
5:43:41vais me reconnecter. Si tu te poses la
5:43:43question comment on va ajouter se
5:43:45connecter avec Google et d'autres
5:43:47éléments, ça on le fera on le fera bien
5:43:51plus tard sur la prochaine application
5:43:53qui va être beaucoup plus complète. Donc
5:43:55celle-ci c'est l'objectif de cette
5:43:57application, c'est vraiment créer
5:43:58quelque chose full stack avec création
5:44:00de compte, avec raw level security,
5:44:03inscription euh connexion à la base de
5:44:06données. On met ça en ligne, on crée une
5:44:08landing page vraiment pour que tu
5:44:09puisses connaître à peu près le
5:44:12processus. Donc là, on se reconnecte
5:44:14pour voir. L'idée, c'est de voir les
5:44:16données directement. Voilà, tu as vu ?
5:44:19Donc c'est un peu subtil, c'est pas
5:44:21rapide mais tu vois c'est c'est très
5:44:22rapide et tu vois que maintenant il
5:44:24s'affiche directement les données. Je
5:44:26n'ai pas besoin d'actualiser pour voir
5:44:27directement les données. Donc là déjà
5:44:30c'est pas mal. On a on a quelque chose
5:44:31qui marche. On va dire qu'on a quelque
5:44:33chose de fonctionnel. Donc là vraiment
5:44:35on a quelque chose de on va dire qu'on a
5:44:37quelque chose qui marche. [musique]
5:44:39Maintenant ce qu'on va faire c'est qu'on
5:44:41va mettre notre outil en ligne. D'accord
5:44:44? on va le mettre en ligne et ensuite
5:44:46nous allons tout simplement euh passer à
5:44:49la création de la landing page. D'accord
5:44:52? Donc la page d'accueil de notre site.
5:44:55Donc pour mettre notre site en ligne
5:44:57c'est simple comme je t'avais dit, on va
5:44:59mettre tout cela sur GitHub et ensuite
5:45:01on va euh passer directement sur Versel.
5:45:04Donc ce qu'on va faire c'est qu'on va se
5:45:06rendre sur Github. D'accord ? On se rend
5:45:08sur GitHub. Ici on va créer un nouveau
5:45:10repos, d'accord ? un nouveau dossier, je
5:45:13vais l'appeler Easy Facture tout
5:45:15simplement. Je fais euh create et une
5:45:20fois que c'est fait, je viens ici et je
5:45:22lui dis "OK, donc maintenant je veux que
5:45:24tu mettes le code sur Github. Je viens
5:45:26de créer un dossier là-bas qui s'appelle
5:45:28Easy Facture. Donc je je lui donne le
5:45:30nom. L'idée c'est que maintenant lui il
5:45:32va tout simplement se charger euh de
5:45:35mettre le code directement sur GitHRB,
5:45:38vu que je l'ai déjà connecté à GitHRB.
5:45:39Donc on a déjà fait ça sur les modules
5:45:41précédents. Donc on attend qu'il fasse
5:45:43ça. Tu as vu ? Donc ça c'est les
5:45:45commandes que je t'avais appris
5:45:47lorsqu'on parlait de git, donc git ad et
5:45:49git commit. Euh il est en train de faire
5:45:52git h status pour voir si je suis bien
5:45:54connecté. Et une fois que je suis
5:45:55connecté, il va faire un guit push, tu
5:45:58vois ? Guit branche git 7 origine URL.
5:46:01OK, donc là il l'a mis sur GitHub. Donc
5:46:03comme tu peux le voir, ça c'est notre
5:46:06projet Easy Facture qui a été mis sur
5:46:08GitHub. euh avec euh nos derniers euh
5:46:12nos dernières modifications. D'accord ?
5:46:14Donc maintenant, ce qu'on va faire, on
5:46:16va aller dans Versel comme d'habitude.
5:46:18D'accord ? Et ce qu'on va faire c'est on
5:46:21va tout simplement aller dans All
5:46:23project ici et on va cliquer sur créer
5:46:26projet. Donc le projet, on va venir, on
5:46:28va cliquer sur Easy Facture, on va faire
5:46:31importer. D'accord ? et le projet
5:46:33s'appelle Easy Facture. Je fais deploy.
5:46:36Et comme d'habitude, Versel va
5:46:37automatiquement récupérer le code qu'on
5:46:41a mis ici dans notre GitHub et il va le
5:46:45builder, c'est-à-dire qu'il va
5:46:46construire le site et il va le mettre en
5:46:49ligne. Normalement après, on aura un
5:46:50site, tu auras un lien que tu pourras
5:46:52partager, un site full stack avec euh
5:46:55base de données, avec front end et
5:46:59cetera. Donc on met ça d'abord en ligne.
5:47:01Ensuite on va passer à la création de la
5:47:03landing page. Et comme ça tu seras
5:47:05encore un peu plus habitué au fait de
5:47:08mettre à jour des sites qui existent
5:47:10déjà qui sont déjà en ligne parce que ce
5:47:11site là une fois qu'on le met en ligne,
5:47:13il est en ligne [musique] mais après
5:47:14l'idée c'est de c'est de tout simplement
5:47:16créer une landing page et mettre à jour
5:47:19mettre à jour le site. Donc on attend
5:47:20qu'il finisse de déployer et normalement
5:47:23une fois qu'il termine son déploiement
5:47:25on aura quelque chose on aura un site en
5:47:28ligne. Et si jamais il y a une erreur
5:47:29aussi, je te montrerai comment comment
5:47:32régler cela. Donc ici, tu peux voir que
5:47:34voilà, tu as vu, il y a il y a eu une
5:47:36erreur de déploiement lors du build.
5:47:38D'accord. Euh l'erreur, il m'a dit, il a
5:47:41dit npm [musique]
5:47:43deprecated. Donc l'idée c'est en fait
5:47:45n'essaie même pas de de comprendre,
5:47:46juste on va copier cela. D'accord ? Une
5:47:50fois qu'on copie, je le redonne à
5:47:53antigravité et lui une fois qu'il lit,
5:47:55il va savoir à peu près c'est quoi le
5:47:57souci et il va le régler. OK ? Donc là,
5:47:59il a il a découvert c'est quoi le
5:48:01problème en fait. En fait, même toi, tu
5:48:03aurais eu ce problème là parce que tu
5:48:05sais que ici, on a des variables
5:48:07d'environnement, d'accord ? Donc les
5:48:09variables d'environnement donc on a on
5:48:11en a parlé, c'est le point NV. Donc
5:48:14c'est ça qui nous [grognement] permet de
5:48:15nous connecter au super base. Le
5:48:17problème c'est que ça on lui a pas
5:48:18donné. Et si on lui donne pas, bah il
5:48:21peut pas se connecter à à Superabase sur
5:48:23le site qui sera en ligne. Donc ce qu'on
5:48:25fait, d'accord, ici avant de lancer le
5:48:28build, on va cliquer sur environnement
5:48:29variable et là on va tout simplement
5:48:32coller euh ce qu'on a dans le fichier
5:48:35point qui est là. D'accord ? Donc on
5:48:37colle ici. On fait la même chose, on
5:48:39fait admor, on vient, on copie ce qu'on
5:48:42a dans le variable d'environnement et on
5:48:45le colle. C'est ça qui permet à notre
5:48:48application en ligne d'avoir accès,
5:48:50d'être connecté à notre base [musique]
5:48:52de données. D'accord ? Et là, on peut
5:48:55cliquer sur deploy. Euh sans ça, on
5:48:58aurait fait 10000 fois le deploy, ça ça
5:49:00n'aurait jamais marché. Donc c'est pour
5:49:02ça en fait, dès que tu as une erreur,
5:49:05lorsque tu veux faire un build, euh
5:49:08juste copie tout. En fait, le log, ça
5:49:11c'est les logs, en fait. Ça c'est en
5:49:13fait la machine qui est en train de
5:49:14mettre ton site en ligne pour faire
5:49:16simple. Euh il va te dire s'il rencontre
5:49:19un problème et tu as juste à copier ça,
5:49:22à le donner à ton projet et il saura
5:49:24exactement c'est c'est quoi le souci.
5:49:27Donc là on attend qu'il termine et
5:49:29normalement on aura notre site en ligne
5:49:30cette fois-ci. OK. Donc là le
5:49:32déploiement a été fait et notre site est
5:49:34bien en ligne. Donc là si je vais sur
5:49:36easyfacture.versel.apparapapp.
5:49:38Donc là, je clique sur le domaine. Tu
5:49:39vas voir que mon site, il est là en
5:49:41ligne. C'est tout simplement le domaine
5:49:44gratuit que Versel t'offre. Donc quand
5:49:46tu mets ton site en ligne, donc Versel
5:49:47t'offre un domaine gratuit. Donc là,
5:49:49notre site, il est en ligne. C'est
5:49:50quelque chose que on peut lancer,
5:49:52d'accord ? Il ne s il nous suffirait de
5:49:54connecter un nom de domaine. Et sur les
5:49:56prochains projets, je te montrerai
5:49:57comment connecter un nom de domaine. En
5:49:58fait, c'est très facile de de de
5:50:01connecter un nom de domaine. Par
5:50:02exemple, ici, je vais aller sur domain,
5:50:05je vais cliquer sur plus. D'accord ?
5:50:06Tout simplement. Et ici, je fais euh
5:50:09buy. Et là, je cherche mon nom de
5:50:11domaine, par exemple euh amadusas.com,
5:50:16peu importe. D'accord ? Euh je l'achète.
5:50:18D'accord ? Je fais comme ça. Euh je
5:50:20l'ajoute au panier. Euh ensuite je viens
5:50:23ici, je l'achète et une fois que tu
5:50:25l'achètes, il se connecte directement à
5:50:27ton projet. C'est aussi simple que ça.
5:50:29Donc il y a rien de complexe et on le
5:50:30fera sur notre dernier projet, le gros
5:50:32projet qu'on va qu'on va faire en fin de
5:50:35formation. Mais là actuellement, je
5:50:37clique ici. D'accord ? Ça me ramène sur
5:50:39euh les projets euh sur tous les projets
5:50:42en cours. Donc je vais actualiser.
5:50:45Donc ici, tu peux voir, il y a Easy
5:50:46Facture. Là, c'est le c'est le CV en
5:50:49ligne qu'on qu'on avait créé. D'accord ?
5:50:51Et là, on est parti de très loin. De
5:50:52base, on avait créé juste une simple
5:50:54page comme ça avec un CV très joli. Mais
5:50:57là, on est passé à toute une application
5:50:59avec système d'authentification et
5:51:01cetera. Maintenant, je vais t'expliquer
5:51:03quelle est l'erreur qu'on a eu tout à
5:51:04l'heure lors du build parce que c'est
5:51:06très important de t'expliquer qu'est-ce
5:51:08qui s'est passé exactement, pourquoi
5:51:10lorsqu'on a essayé de mettre notre site
5:51:12en ligne, il y a eu une erreur. Donc, je
5:51:14t'avais expliqué la dernière fois quand
5:51:17on parlait de sécurité, je t'avais parlé
5:51:19du fichier ENV, donc du fichier ENV.lal
5:51:21ou bien du fichier d'environnement. Je
5:51:23te dis que c'est sur ce fichierlà qu'on
5:51:25va mettre toutes les clés de connexion
5:51:27de notre app. Donc si notre app se
5:51:29connecte à Superbase, il nous faut un ce
5:51:32qu'on appelle une API key ou bien un
5:51:33token. Donc on peut pas le mettre dans
5:51:36le code sinon euh ça peut exposer ces
5:51:38clés là et les gens peuvent y accéder.
5:51:40Donc on le met dans un fichier qu'on
5:51:42appelle le fichier euh point inv ou bien
5:51:45point.lal. Donc c'est un fichier de
5:51:46variable d'environnement. Donc c'est ce
5:51:49fichier là que tu vois avec par exemple
5:51:51Superbase URL = Superbase K ég donc
5:51:53celui qu'on a utilisé tout à l'heure.
5:51:55Donc ces valeurs là ils ne sont pas
5:51:57poussées dans le GitHub, ils ne vont
5:52:00jamais dans le GitHub parce que on a
5:52:01utilisé le Git ignore. Donc on a aussi
5:52:03parlé de git ignore. Donc si tu n'as pas
5:52:05bien regardé ou bien si tu as sauté la
5:52:07partie, on parlait de sécurité, je te
5:52:09conseille d'aller revoir ce module là.
5:52:12C'est très important. Ça permet de
5:52:13comprendre tout ce que je suis en train
5:52:14d'expliquer. Vu qu'on l'a met dans le
5:52:15git ignore, il n'est pas parti dans le
5:52:18Git Hub. Donc dans le Git Hub, on avait
5:52:19tous les applications mais on avait pas
5:52:22les éléments qui nous permettaient de
5:52:24nous de de tout simplement nous
5:52:26connecter à Superbased. D'accord ?
5:52:29Maintenant, vu que GitHub, c'est avec
5:52:31GitHub qu'on va connecter Versel,
5:52:34d'accord ? et que Versel va prendre le
5:52:36code qui est sur GitHub pour mettre le
5:52:38site en ligne. Bah Versel, il va venir,
5:52:40il va dire "OK, je cherche le code, OK,
5:52:42j'ai trouvé le code." Les dépendances,
5:52:44les packages. OK, j'ai trouvé. Je
5:52:46cherche la configuration, j'ai trouvé.
5:52:48OK, maintenant Ah, je vois que le site
5:52:49utilise Super Base. Donc, il faut que je
5:52:51le connecte à Superbase. Donc, je vais
5:52:52aller prendre le variable
5:52:53d'environnement. Mais le variable
5:52:55d'environnement, il n'est pas sur
5:52:56GitHub. On l'a pas poussé parce qu'on
5:52:58l'a mis dans le git ignore. Donc, il va
5:53:00échouer parce qu'il va te dire je ne
5:53:01vois pas les variables. D'accord ? Et
5:53:03c'est très normal. parce que eux-mêmes
5:53:05ils te donnent la possibilité en fait
5:53:07eux ils savent que les gens ne mettent
5:53:09jamais leur variable d'environnement
5:53:10dans leur code. Ils vont te donner la
5:53:12possibilité lors du build de coller
5:53:14directement sur Versel tes variables
5:53:16d'environnement. Comme ça, eux ils vont
5:53:19toujours l'injecter euh lors du build en
5:53:22et en en sous forme de variable et ils
5:53:25vont le récupérer à chaque fois que ton
5:53:27site en en a besoin. Il ne sera jamais
5:53:29exposé [musique] et ça c'est très
5:53:30sécurisé et c'est pourquoi le build
5:53:32avait échoué. Donc là ce qu'on a fait,
5:53:35on a mis le code sur Github et on a mis
5:53:37sur versiel, on a mis nos variables
5:53:39d'environnement et maintenant on a le
5:53:40code et les variables et le site est
5:53:42maintenant en ligne. Donc c'est tout
5:53:43simplement ça qui faisait que le le
5:53:46build avait échoué. Et en fait l'idée
5:53:49c'est de toujours t'expliquer qu'est-ce
5:53:52qui se passe, d'accord ? Pour que tu
5:53:53puisses comprendre parce qu'on est dans
5:53:54cette on est dans cette dynamique là de
5:53:57compréhension, d'accord ? Pour pouvoir
5:53:59créer n'importe quel type de site que tu
5:54:00veux, il faut d'abord comprendre les
5:54:02bases. À chaque fois que tu as une
5:54:03erreur, ne t'inquiète pas, ne panique
5:54:04pas, prends le code, donne-le à ton
5:54:06éditeur et il va fixer pour toi. Donc
5:54:08maintenant qu'on a nos sites en ligne,
5:54:10on va passer à la phase suivante. Et
5:54:12pour cela, on va retourner sur anti
5:54:13gravity sur notre éditeur de code. Donc
5:54:15là, ce qu'on a pour l'instant, c'est on
5:54:17a notre site qui marche bien en local.
5:54:20D'accord ? On l'a aussi mis en ligne,
5:54:21mais on a toujours le code en local.
5:54:23C'est à chaque fois qu'on veut faire des
5:54:25mises à jour, on va modifier le code qui
5:54:26est en qui est euh dans notre local et
5:54:29ensuite on va faire tout simplement un
5:54:31guit push, d'accord ? On va mettre le
5:54:33code sur notre GitHub et Versel va voir
5:54:35automatiquement que le code a changé et
5:54:37il va mettre à jour notre site. Donc
5:54:39c'est aussi simple que cela. Donc
5:54:40maintenant ce qu'on va faire c'est qu'on
5:54:41va se déconnecter, d'accord ? Et là, je
5:54:44vais aller sur la landing page. Donc la
5:54:46landing page, c'est tout simplement le
5:54:48site, le point d'atterrissage. Donc
5:54:50quand une personne va cliquer par
5:54:52exemple sur ton site que ceci
5:54:53easyfacture.com, on va pas directement
5:54:55le rediriger sur la partie de connexion.
5:54:57Il faut qu'il voit une landing page qui
5:54:59sache quoi ? Easy easy easy facture.
5:55:01Donc la landing page, c'est tout
5:55:02simplement la page de présentation de
5:55:04ton site et il est très important sur
5:55:06ton SAS. Plus tu vas travailler sur ta
5:55:09page de présentation,
5:55:10mieux tu auras des chances de convertir
5:55:13les visiteurs en utilisateur. Et c'est
5:55:15pourquoi je l'ai mis en dernier recours
5:55:17parce que depuis le départ, depuis le
5:55:19début de cette formation, on utilise que
5:55:22les promptes, d'accord ? Donc je vais
5:55:24sur dribble, je prends un design,
5:55:25d'accord ? Euh et je vais directement
5:55:28dans anti Gravity et je lui dis
5:55:30"Fais-moi ce design de cette
5:55:31manière-là." Et ça marche. Vous avez vu
5:55:33depuis tout à l'heure, on crée quand
5:55:35même pas mal de choses. On y arrive.
5:55:37Maintenant, j'ai une méthode que
5:55:38j'utilise moi personnellement, d'accord
5:55:40? Une méthode un peu plus avancée mais
5:55:41qui me permet d'avoir plus une main mise
5:55:44sur ce que je je produis, d'accord ?
5:55:47Plus une main mise sur mes créations.
5:55:50Donc ce que je fais c'est j'utilise un
5:55:52outil de Google qui s'appelle Stitch.
5:55:54D'accord ? Donc ce sera aussi dans le
5:55:57document ou bien vous allez tout
5:55:58simplement sur Google et vous tapez
5:56:01stitch [musique] espace Google et vous
5:56:03verrez le design c'est le l'icône rose
5:56:06d'accord vous cliquez dessus et vous
5:56:08allez être redirigé ici. Donc vous vous
5:56:11az accédé avec votre compte Google, vous
5:56:12payez pas. Dès lors où vous êtes abonné
5:56:14sur gravity, vous pouvez utiliser
5:56:16Stitch, d'accord ? Et Stitch c'est quoi
5:56:17? Stitch c'est un designer IA, d'accord
5:56:21? C'est une IA qui va designer tes sites
5:56:24pour toi. Et je l'utilise
5:56:25personnellement pour plein de projets
5:56:27que je créé. Donc comme tu peux le voir
5:56:29ici, depuis 2025, moi j'utilise Stitch.
5:56:32Tout ça c'est des projets que j'ai testé
5:56:34ou bien que j'ai lancé et je les ai
5:56:36design avec Stitch tout simplement.
5:56:38Maintenant, je vais t'expliquer comment
5:56:39je travaille avec Stitch. Donc, disons
5:56:41que je veux créer euh une landing page
5:56:43ou ou même le site, hein, je peux le
5:56:44faire directement sur Stitch, mais je
5:56:46vais t'expliquer. Donc là, je viens et
5:56:48je vais essayer d'avoir une inspiration.
5:56:50Donc là, je vais rechercher une landing
5:56:51page. Je vais faire invoice euh website
5:56:55landing page par exemple. Donc, on va
5:56:58voir un peu qu'est-ce qu'il y a ici.
5:57:00Donc, l'idée c'est de voir un peu un
5:57:01design qui me plaît, un design qui me
5:57:04parle, d'accord ? Et on va pas tout
5:57:06simplement copier ce design pixel par
5:57:08pixel, on va juste s'en inspirer. C'est
5:57:11ça le plus important, c'est
5:57:12l'inspiration. Là je vais voir disons
5:57:15ça. Ça, par exemple, c'est c'est pas
5:57:18mal. D'accord ? Donc ça c'est par
5:57:22exemple une landing page qui me qui me
5:57:25parle. D'accord ? Moi, j'aime bien tout
5:57:27ce qui est minimaliste, tout ce qui est
5:57:28simple. Euh j'aime pas trop des designs
5:57:32où le où ça part dans tous les sens.
5:57:35Mais ça aussi, j'aime bien. Donc disons
5:57:36qu'on va partir euh sur ça, on va partir
5:57:39sur quelque chose de similaire à ça.
5:57:42Donc ce que je vais faire, c'est que je
5:57:44vais tout simplement
5:57:46euh faire une capture.
5:57:49D'accord ? Je fais une capture de ça.
5:57:52Ensuite, je vais dans Stitch, d'accord ?
5:57:54Et je vais tout simplement lui donner le
5:57:57design, d'accord ? Et ensuite,
5:57:58accompagné de la capture d'écran, je lui
5:58:00donne un prompt. Et voici le promte que
5:58:02je lui dis. Tu es un designer et
5:58:03développeur de classe mondiale. Tu as
5:58:05plus de 15 ans d'expérience. Je te
5:58:06fournis une capture d'écran qui
5:58:07m'inspire. Je veux que tu t'inspires du
5:58:09style visuel de cette capture. Que tu
5:58:10t'inspires du style pour créer une land
5:58:12page originale pour mon produit. Ne
5:58:14copie pas le contenu, inspire-toi
5:58:16uniquement du style. Et mon produit
5:58:18c'est Easy Facture. Easy Facture est un
5:58:20de facturation simple et moderne pour
5:58:21les entraîneurs africains. Donc comme tu
5:58:23as vu, en fait, je lui donne un prompt
5:58:25assez détaillé et je te le mettrai euh
5:58:28pour que tu puisses t'en inspirer,
5:58:30d'accord ? Si tu veux. Et ici au niveau
5:58:32du modèle, je vais choisir thinking 3.1
5:58:34Pro et je vais faire ici. Tu as vu en
5:58:37fait ici c'est un design pour l'appli et
5:58:39ici c'est un design pour le web. Moi je
5:58:41design pour le web. Donc je vais faire
5:58:42web et je vais l'envoyer. Maintenant ce
5:58:44qui va ce que tu vas faire c'est que tu
5:58:46vas juste patienter. Donc Stitch ce
5:58:48qu'il va faire c'est qu'il va tout
5:58:49simplement prendre en compte [musique]
5:58:51mes éléments d'accord ce que je lui ai
5:58:53demandé de faire et il va me proposer
5:58:55une landing page et je pourrais faire
5:58:57autant de modifications que je veux avec
5:58:59le design. D'accord. jusqu'à ce que je
5:59:01sois satisfait. Et à partir de là, on va
5:59:04directement aller créer notre landing
5:59:06page sur Antigravity. Donc euh dis-toi
5:59:08que tu peux designer toute ton
5:59:10application ici, que ce soit version
5:59:12mobile, version desktop, d'accord ?
5:59:14Toutes les pages, tu peux les sur Stitch
5:59:16et il y en a un autre que j' que
5:59:18j'utilise personnellement, un autre
5:59:19outil que je vais te montrer dans les
5:59:21prochaines s qu'on va créer et tu vas
5:59:23voir que c'est un outil que je trouve
5:59:25même beaucoup plus puissant. Mais Stitch
5:59:27déjà c'est si tu l'utilises dès le
5:59:29départ, c'est gratuit parce que ça vient
5:59:30avec ton abonnement Google. Donc
5:59:32généralement Stitch aussi c'est pas mal.
5:59:34Ça crée de très bons très jolis designs.
5:59:37Tu as vu, ça te crée le système de
5:59:38design et il s'inspire de ça pour te
5:59:40pour te faire quelque chose de très
5:59:42professionnel. Et ensuite, je vais te
5:59:44montrer comment tu vas prendre ce design
5:59:46là et tu vas l'amener, tu vas en faire
5:59:48du code et tu vas l'amener directement
5:59:50sur ton site. [musique] Donc là, tu peux
5:59:52voir qu'il est en train de commencer à
5:59:54faire la génération de l'écran. Donc là,
5:59:56tu attends, ça peut prendre 2 3 minutes,
5:59:58ça dépend de la complexité de l'image
6:00:00qui doit générer, qui doit développer et
6:00:03ensuite une fois qu'il finit, on pourra
6:00:05voir le résultat ensemble. Donc là, il a
6:00:07terminé mais comme tu peux voir, je
6:00:09trouve que ça ne ressemble pas trop. En
6:00:11tout cas, surtout sur ces premières
6:00:12section là, ça ne ressemble pas trop à
6:00:14l'image que je lui ai donné, d'accord,
6:00:16en terme de comment les choses sont
6:00:18alignées. Donc je vais tout simplement
6:00:20cliquer dessus et je vais lui faire un
6:00:22message. Je vais lui dire donc là je
6:00:24peux voir que la herosection donc la
6:00:26première section sur le site est très
6:00:28différente de l'image que j'ai été donné
6:00:31déjà au niveau du menu. Tu peux voir que
6:00:32le menu qu'on a nous, c'est un menu avec
6:00:36arrondi, d'accord, sous forme de pills.
6:00:38le le la phrase principale, elle est
6:00:41centrée, le le sous-titre est centré, il
6:00:44y a un seul CTA qui est centré et
6:00:47autour, il y a de petites icônes
6:00:49d'images, de billets, euh tout ce qui
6:00:53est en rapport avec l'argent. D'accord ?
6:00:55Donc regarde bien la capture d'écran que
6:00:58je t'ai donné et refais-moi quelque
6:00:59chose de très similaire sur ma sur ma
6:01:03heroosection, s'il te plaît. Donc là, je
6:01:05regarde, ça c'est le design qui m'a fait
6:01:07le design. Il est pas mal hein. Je
6:01:08trouve que le design il est bien mais
6:01:10l'idée c'est est-ce que c'est ça qui
6:01:12t'arrange ? D'accord. C'est ça qui est
6:01:14intéressant avec Stitch, c'est que avant
6:01:16même de commencer à coder ton landing
6:01:19page, tu auras une vision globale de ce
6:01:21que tu es en train de faire et ça c'est
6:01:23très important. OK, donc là il m'a fait
6:01:25une deuxième version et comme tu peux le
6:01:28voir là c'est beaucoup mieux. Là, on a
6:01:30quelque chose qui se rapproche beaucoup
6:01:32plus de ce qu'on recherche. C'est pour
6:01:34ça, en fait, il faut être toujours euh
6:01:36patient et prendre la peine de lui dire
6:01:39exactement ce que tu veux. Là, tu peux
6:01:40voir que le menu en haut, il l'a fait un
6:01:42peu comme je voulais. Euh, par contre,
6:01:44je voudrais qu'il y ait un peu plus de
6:01:46shadow, un peu plus d'ombre autour du
6:01:48menu en D'accord. Et ensuite le texte
6:01:52ici euh il est assez gros mais je trouve
6:01:55que c'est bien. Euh ouais, je trouve que
6:01:58c'est bien. Je trouve que c'est bien.
6:02:00Euh les autres sections, je trouve
6:02:03qu'ils sont bien. D'accord. Ça va bien
6:02:05avec la hero. Donc je vais Bon là,
6:02:08j'aurais pu utiliser ça, d'accord, mais
6:02:10on va essayer de de le pousser un peu un
6:02:11peu plus. Donc là, ça se rapproche
6:02:14beaucoup plus de de ce que je recherche.
6:02:16D'accord. Maintenant, ce que j'aimerais
6:02:19c'est en fait que le bouton soit un peu
6:02:23plus petit. Donc le bouton CTA, donc le
6:02:25bouton principal, là où tu as mis créer
6:02:27une facture en quelques secondes, c'est
6:02:28trop long. On va mettre commencer
6:02:30gratuitement. D'accord ? On va juste
6:02:32mettre commencer gratuitement. Ensuite,
6:02:34[musique]
6:02:34faites-vous payer immédiatement. Ouais,
6:02:37on peut faire quelque chose comme ça. Ou
6:02:38bien essayer de voir si on peut avoir un
6:02:40texte qui est beaucoup plus punchy. Tout
6:02:42en bas, là où tu as mis Fresh Works,
6:02:44outchipe Drive. Donc là, ajoute des
6:02:46logos de créer juste des logos
6:02:48d'entreprise et ajoute là-bas des logos.
6:02:50Et au niveau des icônes, d'accord, qui
6:02:53sont autour, par exemple, ajoute de de
6:02:55vraies icônes, donc de vraies images.
6:02:57Par exemple, la trombone, [musique] tu
6:02:58as juste mis une icône de trombone, mais
6:03:00j'aimerais une vraie image de trombone.
6:03:02Et si tu peux même ajouter d'autres
6:03:04éléments, euh ce serait cool. Sur les
6:03:07autres sections, j'aime bien. Par
6:03:08contre, le footer, le footer donc la
6:03:10dernière section du site, je trouve
6:03:12qu'il peut être beaucoup amélioré.
6:03:14D'accord. Donc améliore-moi le footer et
6:03:17le fond du footer doit ne doit pas être
6:03:20similaire au fond de la section qui
6:03:22vient avant le footer. Donc on va
6:03:24utiliser pour le footer, on va utiliser
6:03:27le même la même couleur de fond que la
6:03:29deuxième section, donc la couleur grise.
6:03:31Donc voilà, tu as tu as vu j'ai j'ai
6:03:32quand même beaucoup parlé. D'accord,
6:03:34donc je lui je lui donne je lui ai donné
6:03:36pas mal de détails. Donc l'idée c'est on
6:03:39va attendre de voir qu'il nous fasse une
6:03:41prochaine version. D'accord ? Et si ça
6:03:44correspond à ce qu'on recherche euh là,
6:03:46on va on va on va prendre ça. Donc
6:03:48l'idée maintenant, c'est euh de voir, tu
6:03:51as vu la différence entre cette landing
6:03:54page et cette landing page. Moi, je
6:03:55trouve que celle-là est beaucoup mieux.
6:03:57Euh mais on va essayer de voir la
6:03:58troisème option et peut-être que là, ça
6:04:01sera aussi encore beaucoup mieux. OK,
6:04:03donc là, il vient de terminer. Donc on
6:04:06va essayer de comparer un peu les deux.
6:04:09Et là par exemple euh je trouve que
6:04:12celle-ci est beaucoup mieux au niveau de
6:04:15du bouton. C'est beaucoup Tu as vu le
6:04:17fait juste de changer le texte comment
6:04:19c'est comment c'est beaucoup mieux. Le
6:04:20footer ici tu as vu le footer ici il est
6:04:23beaucoup plus élaboré. Par contre les
6:04:26icônes ça ne le fait pas du tout. Donc
6:04:28il y a des icônes que je trouve qui sont
6:04:30pas très bien faits. Donc là, je vais
6:04:33lui dire donc euh remets les icônes qui
6:04:36étaient sur par exemple pour les icônes,
6:04:38les images que tu as mis sur la hero
6:04:40section, remets les icônes qu'on avait
6:04:42sur l'ancienne version, d'accord, de
6:04:45l'image. Donc et tu peux aussi regarder
6:04:47l'image que je t'ai donné en contexte
6:04:50donc et tu peux faire quelque chose de
6:04:53d'assez similaire. OK. Donc là, c'est un
6:04:56peu le design qu'il m'a fait. Je trouve
6:04:58que c'est pas mal. Donc c'est un peu
6:05:00l'itération que j'ai eu. Donc si je
6:05:01compare ça à la première version et
6:05:04peut-être qu'il y en a qui vont préférer
6:05:05cette version là sinon si si oui vous
6:05:08prenez ça. Mais moi je préfère cette
6:05:10version là même si je la trouve
6:05:11perfectible d'accord mais on a déjà une
6:05:13très bonne base. On sait exactement à
6:05:15quoi va ressembler notre landing page.
6:05:18Donc une fois qu'on a ça, ce qu'on va
6:05:19faire, on va l'exporter. Maintenant il y
6:05:21a plusieurs manières de l'exporter. On
6:05:23peut l'exporter en utilisant le MCP.
6:05:24Donc la connexion MCP, on peut
6:05:26l'exporter en utilisant le code.
6:05:29D'accord ? Euh on en fait il y a
6:05:31plusieurs manières de d'exporter ce
6:05:34design là. On peut l'exporter par
6:05:35exemple sur Figma. On peut faire le
6:05:38copier le code dans le presse papier.
6:05:40Donc euh pour ce qui est MCP, on le fera
6:05:42plus tard, d'accord ? Quand on aura
6:05:44plusieurs pages à exporter. Mais là, vu
6:05:46que c'est juste une seule page, je vais
6:05:48juste copier le code dans le press
6:05:50papier. Donc je vais juste copier le
6:05:51code et le donner directement à mon
6:05:54éditeur. Donc là, je reviens ici.
6:05:56D'accord ? Si tu veux, tu peux ouvrir
6:05:59l'ancienne [raclement de gorge]
6:06:00discussion. Donc là, par exemple, c'est
6:06:01l'ancienne discussion. Donc je viens
6:06:03ici. Ce que je fais, c'est euh je lui
6:06:06donne directement le code, d'accord ? le
6:06:08code de la page qu'on qu'on vient de
6:06:11copier tout simplement qu'on a eu le
6:06:12design qu'on a eu sur Banani et je lui
6:06:14dis donc voici le code du design que je
6:06:17veux pour la landing page. Maintenant,
6:06:19je veux que tu l'intègres bien, que tu
6:06:21crées des composants de vrais
6:06:23composants, tu mettes en avant la
6:06:24réutilisabilité des composants. Ensuite,
6:06:28pour le design, je ne veux pas de design
6:06:31inline, je veux des fichiers CSS
6:06:33séparés. Donc il nous faut intégrer ça
6:06:35d'une très bonne manière, surtout mobile
6:06:37first que ce soit responsive, d'accord ?
6:06:39Que ça s'affiche bien sur tous les
6:06:41écrans. Et si tu veux, tu ajoutes des
6:06:43micro animations, surtout au niveau de
6:06:45la de la header, au niveau des icônes
6:06:48flottants. Si tu veux si tu veux changer
6:06:50les icônes, tu les changes. Si tu as des
6:06:52idées d'icônes ou bien d'images de
6:06:54meilleure qualité. Ensuite, le CTA
6:06:55principal, donc le bouton principal sur
6:06:57la herosection, je veux une animation
6:06:59dessus euh on hover and click. Donc
6:07:02quand le la souris passe dessus et quand
6:07:03la souris clique dessus, pour le menu,
6:07:06le menu euh qui est en haut, d'accord ?
6:07:09On garde le même menu, sauf qu'on le
6:07:11rend aussi responsive. Donc fais-moi ça.
6:07:14Et une fois que c'est bon, tu crées la
6:07:17landing page parce que pour l'instant,
6:07:18notre site n'a pas de landing page. Ça
6:07:20te redirige directement sur la page de
6:07:22connexion. Donc on crée la landing page,
6:07:24d'accord, qui sera le point d'entrée
6:07:26maintenant de notre application. Donc
6:07:27voilà, je lui ai donné le code, ensuite
6:07:29je lui ai donné mes recommandations, ce
6:07:32que je ce que je veux et on va attendre
6:07:34qu'il fasse le travail. Maintenant, il y
6:07:35a certains termes que j'ai utilisé.
6:07:36Peut-être qu'ils vont euh le temps qu'il
6:07:38termine, je vais t'expliquer certains
6:07:40termes que j'ai utilisé. Donc, je lui
6:07:41dit mobile first. Mobile first, c'est
6:07:43quoi ? Quand on dit mobile first, c'est
6:07:44un site qui est optimisé pour mobile
6:07:47d'abord avant même d'être optimisé pour
6:07:48les ordinateurs. Parce que je te dis ça
6:07:51c'est vraiment le point critique qui
6:07:54fera si ton va marcher surtout en
6:07:56Afrique parce que dis-toi que ici 90 %
6:07:58au minimum du trafic que tu vas avoir
6:08:00sur ton site, les gens vont utiliser
6:08:02leur téléphone portable pour entrer sur
6:08:03ton site. Donc ton site doit être mobile
6:08:05first, il doit être responsif, il doit
6:08:07bien s'afficher surtout sur les mobiles.
6:08:09Donc note ça bien, c'est un terme que tu
6:08:11dois utiliser tout le temps. Donc mobile
6:08:13first est responsive. Responsive c'est
6:08:15pareil. Responsive c'est tout simplement
6:08:17faire en sorte que l'élément ait une un
6:08:21bon affichage et utilisable soit sur
6:08:23tous les écrans. D'accord ? C'est aussi
6:08:25simple que cela, que ce soit sur écran
6:08:26de téléphone ou bien écran d'ordinateur,
6:08:28écran de tablette, peu importe. Peu
6:08:30importe l'écran, il va bien s'afficher.
6:08:32Ça c'est la responsivité de l'écran.
6:08:34Donc tu peux lui dire "Je veux juste que
6:08:35ce soit responsive, je veux que ce soit
6:08:38mobile first." Et tout simplement lui,
6:08:40il saura quoi faire. D'accord ? Je j'ai
6:08:42parlé de CTA. CTA, [musique]
6:08:44je pense qu'on a déjà parlé de ça. Le
6:08:46CTA, c'est tout simplement ça veut dire
6:08:47call to action. Ça veut dire un bouton
6:08:50qui permet de faire quelque chose. Par
6:08:52exemple là, ici on revient sur notre
6:08:53design, ça c'est un CTA. Donc le bouton
6:08:55là, le bouton commencer gratuitement,
6:08:57c'est un CTA. Le bouton essai gratuit,
6:08:59c'est un CTA. D'accord ? Le bouton
6:09:02choisir, c'est un CTA. Le bouton
6:09:03commencer gratuitement, c'est un CTA.
6:09:05Donc c'est un bouton qui incite une
6:09:07personne à faire quelque chose. Donc
6:09:08quand je lui dis le CTA sur la
6:09:10herosection, ça veut tout simplement
6:09:12dire ce boutonlà parce que la
6:09:13hérosection c'est tout simplement la
6:09:15première section que tu vois quand tu
6:09:17entres sur une landing page. On appelle
6:09:19ça généralement la hello section.
6:09:21D'accord ? Donc quand je lui dis je veux
6:09:23que tu ajoutes des des [musique]
6:09:25animations sur le CTA de la landing page
6:09:28et que tu rendes ça mobile first.
6:09:30Maintenant je pense que tu comprends
6:09:32exactement ce que je veux lui dire. Donc
6:09:34ici, il m'a proposé un plan
6:09:36d'implémentation comme d'habitude.
6:09:38D'accord ? Il me dit exactement ce qu'il
6:09:39va faire. Euh je lui dis juste proceed.
6:09:42Et là on attend qu'il termine la tâche.
6:09:44OK, donc là il a terminé, il m'a fait le
6:09:47walkthrough. Donc euh ici on va tout
6:09:50simplement repartir sur notre site. Euh
6:09:53donc là on est sur easy Facture.
6:09:54Normalement là si on repart sur la page
6:09:58d'accueil. Voilà. Donc là, on a notre
6:10:01landing page. Donc tu peux voir euh
6:10:03comment on est parti du design. Et là,
6:10:05on a le site. [rires] C'est même que
6:10:07cela. Donc les personnes quand ils vont
6:10:09taper Easy Facture, ils vont venir ici,
6:10:11ils vont cliquer sur se connecter et ils
6:10:12vont venir ici pour se connecter. Et là,
6:10:15en fait, l'idée maintenant, c'est de
6:10:16faire en sorte que quand ils sont ici,
6:10:18ils peuvent cliquer sur ce logo là pour
6:10:20repartir sur la landing page ou bien
6:10:22essayer de voir comment on peut
6:10:24améliorer cette page là. Il y a plein de
6:10:26choses qu'on peut faire mais l'idée
6:10:28c'est euh voilà. En fait, je pense que
6:10:30maintenant vous avez un peu une idée de
6:10:32comment maintenant on va voir comment ça
6:10:34s'affiche sur mobile. Donc là euh tu as
6:10:37vu sur mobile c'est pas mal. C'est pas
6:10:39mal. Il y a quelques détails à régler.
6:10:41Tu as vu, il a rendu le menu responsive.
6:10:44Wou, c'est très joli ça. C'est juste ici
6:10:47le texte là qui doit être bien géré. Je
6:10:49pense que ce cette icône là, il doit
6:10:52disparaître sur mobile. D'accord. il
6:10:55doit disparaître sur mobile et ici aussi
6:10:57ça doit être bien géré. Donc je vais lui
6:10:59demander de faire cela. Donc c'est bon,
6:11:01c'est c'est c'est pas mal exécuté.
6:11:03Maintenant ce que je veux c'est que sur
6:11:06la page de login et de signup, la page
6:11:08d'inscription et de connexion qu'elle
6:11:10soit connectée à la Lony Page du fait
6:11:12que si je clique par exemple sur le logo
6:11:14qui est sur la page de connexion que ça
6:11:16me ramène sur la landing page et essaie
6:11:19de voir si tu peux améliorer le design
6:11:22de ces pages-là. inscription et
6:11:23connexion pour faire en sorte qu'
6:11:25s'adapte au design de la landing page.
6:11:29Ensuite ensuite lorsque j'entre sur la
6:11:31landing page versions mobile euh on a un
6:11:34problème sur la hero section. Le texte
6:11:37n'est pas centré, il est trop grand, le
6:11:38texte n'est pas responsive. D'accord ?
6:11:41Les autres éléments ne sont pas assez
6:11:42centrés, pas assez responsifes. Les
6:11:45icônes animées ne vont pas s'afficher
6:11:48sur mobile. D'accord ? Comme ça, il y
6:11:51aura pas de souci. Et en bas du CTA, tu
6:11:54as vu là où on a les entreprises avec
6:11:57lesquelles on travaille, je veux que ce
6:11:59soit une seule ligne qui défile,
6:12:01d'accord ? Avec une animation qui défile
6:12:03une liste qui défile de la droite vers
6:12:06la gauche avec une jolie animation et
6:12:08qui montre ces ces éléments-l
6:12:11aussi améliorer le spacing, donc les
6:12:14espacements et ouais, je pense que on
6:12:16peut partir sur ça et le bouton
6:12:18commencer gratuitement. Donc les
6:12:20boutons, les CTA ne sont pas assez
6:12:22responsifes, les textes et tout. Donc
6:12:24améliore-moi ça. Bon voilà. Donc là, je
6:12:26lui ai donné le texte pour lui expliquer
6:12:28un peu ce que je voulais qu'on améliore.
6:12:30Donc euh je lui donne ça et normalement
6:12:32là, ça devrait le faire. OK, donc là il
6:12:35a terminé et comme tu peux le voir, il
6:12:37m'a réglé cela. Là le bouton, il est
6:12:39beaucoup plus joli sur mobile. Le texte
6:12:41il est maintenant responsive. Il est
6:12:43bien aligné. Tu vois comment les ces ces
6:12:46icônes là, ils étaient les uns sur les
6:12:48autres. Là, on a réglé cela avec une
6:12:50jolie animation. Donc ça va sur mobile,
6:12:54on a un on a on a une responsivité sur
6:12:57desktop. [musique]
6:12:58Donc là, on revient sur desktop. Tu as
6:13:00vu, c'est pas mal. Là, je vais cliquer
6:13:02sur se connecter. Tu as vu, il a même
6:13:04amélioré la page de connexion et la page
6:13:07d'inscription. Je clique sur ce bouton
6:13:09là, ça me ramène sur la landing page.
6:13:11Donc là, on est bon. On a notre landing
6:13:14page
6:13:16assez simple, d'accord ? Mais c'est un
6:13:17bon départ. D'accord. Elle peut être
6:13:19beaucoup améliorée mais pour quelque
6:13:21chose qu'on a eu avec deux trois
6:13:23promptes, on a quelque chose qui est pas
6:13:25mal. Donc maintenant ce qu'on va faire
6:13:27c'est que je vais on va mettre notre
6:13:29site qui est en ligne, on va le mettre à
6:13:31jour, d'accord ? Parce que on a mis
6:13:33notre site en ligne, il est là. Donc là
6:13:35c'est le site qui est en ligne. Donc
6:13:37easyfacture.versel.appa.appap.
6:13:39Là si je me déconnecte, tu peux voir que
6:13:41ici il y a pas de il y a pas de landing
6:13:43page hein. Il y a rien. Même si je
6:13:44clique ici, il y a rien qui se passe. Le
6:13:45site n'est pas encore mis à jour.
6:13:47D'accord ? Pour mettre les sites à jour,
6:13:48on va tout simplement mettre le code qui
6:13:50est sur le GitHub à jour. Donc c'est
6:13:52aussi simple, je viens ici et je lui dis
6:13:54"OK, maintenant qu'on a fait nos
6:13:55modifications, pousse fais un push sur
6:13:58le GitHub." D'accord, pousse nos
6:14:00modifications sur le GitHub. Donc tu
6:14:02fais ça [musique] et lui il va faire le
6:14:04git ad, git commit, git push. Donc
6:14:07toutes ces commandes là que je t'ai
6:14:08montré lorsqu'on parlait de guit.
6:14:10[musique] Donc là, il va il va tout
6:14:12simplement faire le push et une fois que
6:14:13c'est fini, on [musique] va aller euh on
6:14:16va aller tout simplement voir comment
6:14:18Versel prend la mise à jour et met notre
6:14:20site à jour tout simplement. Donc là, il
6:14:23a fait le push. On va revenir sur notre
6:14:27euh Versel. Donc une fois que le site
6:14:29est en push, tu viens sur Versel, on va
6:14:31aller dans déployement. Et tu as vu, tu
6:14:33as il a automatiquement vu que euh le
6:14:38push a été fait, d'accord ? et il va
6:14:41tout simplement euh prendre à partir de
6:14:43là et euh créer une nouvelle version de
6:14:47notre site parce que là c'est la version
6:14:48qui est en ligne. Donc tu as vu current
6:14:50c'est la c'est notre version du site qui
6:14:52est en ligne. D'accord ? Ça c'est la
6:14:54version qu'il est en train de faire. Et
6:14:55là il y a eu un build error. D'accord ?
6:14:58Donc le build error ça veut dire queil
6:14:59n'a pas réussi à créer cette nouvelle
6:15:03version. Et ça c'est les c'est les
6:15:04erreurs. Je vais tout simplement copier
6:15:07les erreurs. D'accord ? Donc je vais
6:15:08tout simplement copier là où c'est en
6:15:11rouge. D'accord ? Je copie ça. Je
6:15:13reviens sur mon éditeur et je lui donne
6:15:15ça. D'accord ? Donc lui, il va
6:15:17comprendre directement c'est quoi le
6:15:19souci, il va régler et il va refaire un
6:15:21autre pouche. Donc des fois ça arrive
6:15:22hein parce que une fois que le code se
6:15:24modifie, il peut y avoir que il y ait
6:15:27certains soucis d'accord ou bien
6:15:30certains éléments qui ne sont pas
6:15:32synchronisés. Donc ça arrive la majeure
6:15:34partie du temps. Une fois que tu c'est
6:15:36réglé une fois, deux fois, tu n'auras
6:15:37plus ces problèmes là. Mais dis-toi que
6:15:39ça arrive. Tu as juste à faire ce que je
6:15:41viens de faire. Tu copies, tu colles. Et
6:15:43là, tu as vu, il est en train de régler
6:15:44les problèmes et ensuite on aura notre
6:15:46site en ligne une fois qu'il termine.
6:15:48OK. Donc là, il vient de refaire un push
6:15:50et automatiquement en fait, tu as vu,
6:15:52automatiquement quand le push il est
6:15:54fait sur GitHub. Donc quand le code sur
6:15:56GitHub est mis à jour, donc là tu vas
6:15:58voir si je j'actualise, tu vas voir que
6:16:00[raclement de gorge] le code a été mis à
6:16:01jour juste maintenant. D'accord ? C'est
6:16:03le dernier push qu'on vient de faire.
6:16:05Donc résolution finale des erreurs et
6:16:07déploiement. Et là il est en train de tu
6:16:09vois il y a 23 secondes, il a vu que le
6:16:12code a changé et il a commencé à créer
6:16:14une nouvelle version du site. Mais en
6:16:17fait ce qui est cool c'est que tant
6:16:18queil n'a pas déployé une nouvelle
6:16:20version jusqu'à cette version là soit
6:16:21bien, il va jamais changer la version
6:16:23actuelle. Donc ton site reste stable.
6:16:25D'accord ? Si tu as un une version en
6:16:27ligne, d'accord ? tant que le nouveau
6:16:31déploiement n'est pas fait et et que
6:16:33voilà là il est bon, il est ready, tu
6:16:35vas voir que Curen va quitter de ici et
6:16:37il va venir sur cette version là. Tu as
6:16:39vu maintenant c'est cette nouvelle
6:16:40version là qui est en ligne. Ça veut
6:16:42dire que là si on va sur easy facture,
6:16:44donc là on est dans Easy Facture. Tu as
6:16:45vu ça ? C'est l'ancienne version. Je
6:16:46vais actualiser. Tac. Tu as vu ? Là on a
6:16:49la nouvelle version. Je clique ici et on
6:16:51a notre landing page qui est là. Donc
6:16:53quand les gens vont aller sur Easy
6:16:54Facture maintenant, c'est ça qu'ils vont
6:16:56voir. Ils vont pouvoir venir se
6:16:58connecter, créer des comptes et cetera.
6:17:00Maintenant, sûrement, tu te poses la
6:17:02question comment est-ce qu'on va ajouter
6:17:03la connexion avec Google et même
6:17:05améliorer beaucoup plus euh la qualité
6:17:07des sas qu'on va créer. On va voir cela
6:17:10sur le prochain sas qu'on va créer. Mais
6:17:13aujourd'hui, on est passé de quelqu'un
6:17:16qui ne savait peut-être même pas comment
6:17:17on créé des landing page. Ah, tu as créé
6:17:20un sas full stack. Ça c'est un c'est pas
6:17:22encore un SAS parce que pour que ce soit
6:17:24vraiment un SAS, il faudrait qu'il y ait
6:17:26un système d'abonnement, système de
6:17:27connexion et cetera. Il y a pas il y a
6:17:30pas encore le dashboard
6:17:31d'administrateur, ça on le verra sur la
6:17:33prochaine sur la prochaine grosse app
6:17:35qu'on va faire. Mais là en fait l'idée
6:17:37c'est que on a une application full
6:17:38stack. Donc une application avec front
6:17:40end, back end, base de données, on l'a
6:17:43déployé en ligne. Donc ça c'est la base
6:17:45de tous les SAS. Si tu sais faire ça, tu
6:17:48peux construire de base n'importe quelle
6:17:50idée que tu veux faire. Donc nous voilà
6:17:52au terme de ce module numéro 5.
6:17:54Qu'est-ce que tu as accompli ? Donc tu
6:17:55as utilisé le Vibe Coding Design Loop,
6:17:58donc les étapes dont je t'ai montré de
6:18:00l'inspiration jusqu'à la mise en ligne
6:18:02avec les tests. D'accord ? On a mis en
6:18:04place un système serverless. On a
6:18:05utilisé Versel pour cela avec les
6:18:07capacités de NextJs. On a utilisé euh
6:18:10une technique de deux modèles. C'est
6:18:12pour c'est la première fois qu'on va
6:18:13qu'on a combiné les deux modèles. Par
6:18:15exemple Cloud code de d'une partie pour
6:18:18la planification et on a utilisé
6:18:20exclusivement Gemini pour la
6:18:22construction du site. On a pris des
6:18:24inspirations de drible au lieu de juste
6:18:26deviner. On a sauvegardé dans le
6:18:27context. MD donc c'était plus gemini.md.
6:18:30On a fait un sas fag. Bon, c'est pas
6:18:32encore un SAS, on va dire queon a créé
6:18:34une app et après on va créer un SAS.
6:18:38Mais la différence entre une app full
6:18:40stack et un SAS full stack, c'est tout
6:18:41simplement le système de facturation qui
6:18:43est très important. On en parlera
6:18:45lorsqu'on va aborder les paiements. On a
6:18:47mis en place une un système
6:18:48d'authentification avec un R level
6:18:51security et un système de sécurité vu
6:18:53queon envoie des codes par email. Il y a
6:18:55même du rate limiting, tu l'as vu tout à
6:18:57l'heure. Et ensuite on a déployé en
6:19:00ligne sur Versel. Si tu sais faire ça
6:19:02mal, tu es un créateur de sas. Il te
6:19:03suffit just de savoir comment ajouter la
6:19:06facturation et tu es un créateur de sas.
6:19:09Et maintenant, avant de passer à quelque
6:19:11chose de beaucoup plus costaud, de
6:19:12beaucoup plus consistant, on va aller un
6:19:14peu plus profondément dans la
6:19:16compréhension. Donc dans le module 6, ce
6:19:19sera un module où notre objectif sera de
6:19:22comprendre le développement. Il faut
6:19:23qu'on comprenne les bases de données en
6:19:26profondeur. Il faut qu'on comprenne
6:19:27c'est quoi un SQL, c'est quoi un no SQL,
6:19:30c'est quoi les requêtes, c'est quoi les
6:19:32framework et les architectures et les
6:19:34techniques avancées pour les agents. Il
6:19:36faut qu'on comprenne ce qu'on vient de
6:19:38faire, d'accord ? Il faut qu'on essaie
6:19:39de le comprendre sous le capot, d'accord
6:19:41? Si c'est ça qui sera la différence
6:19:44entre un vrai vibe coder et quelqu'un
6:19:46qui va créer des choses qui vont à
6:19:48chaque fois qu'il aura un bug, ce sera
6:19:50la fin de son business. D'accord ?
6:19:51L'idée maintenant, c'est qu'on va
6:19:53prendre le module 6, on va tout
6:19:55simplement aller encore beaucoup plus en
6:19:57profondeur dans la compréhension et à
6:20:00partir de là, on pourra commencer à
6:20:01créer des applications beaucoup plus
6:20:03performantes et beaucoup plus
6:20:05professionnelles. Donc à bientôt dans le
6:20:06module 6. Bravo à toi, tu viens de
6:20:08construire une vraie application avec un
6:20:10dashboard, une base de données, de
6:20:12l'authentification. Mais soyons honnête,
6:20:14pour en faire un business, il te manque
6:20:16les paiements, il te manque les clients.
6:20:18Et dans le programme Easis, c'est
6:20:20exactement cela qu'on va couvrir.
6:20:22Comment intégrer les paiements mobile
6:20:24money, cartes bancair et cetera. Comment
6:20:26trouver tes 1000 premiers clients en
6:20:28moins de 30 jours ? Comment marketer ton
6:20:30produit ? Comment te positionner ? Et
6:20:31surtout avec le logiciel Easis auquel tu
6:20:33auras accès, tu ne perds pas de temps à
6:20:35chercher une idée pendant des semaines.
6:20:37Le logiciel va te guider de l'idée à
6:20:39l'étude de marché jusqu'au document de
6:20:41lancement. Donc si tu es intéressé, le
6:20:43lien est en description. Et voilà, c'est
6:20:45la fin de la partie gratuite de la
6:20:47formation. Donc on a eu six modules et
6:20:49maintenant tu sais comment utiliser les
6:20:51outils, comment créer des sites, comment
6:20:52sécuriser une app et comment construire
6:20:54une application full stack. Et vraiment
6:20:57pour gratuit, c'est pas mal du tout.
6:20:58Mais la question c'est est-ce que tu vas
6:21:00t'arrêter là ou est-ce que tu vas aller
6:21:02jusqu'au bout ? Donc tu peux rejoindre
6:21:04le programme Easy SAS car là-bas c'est
6:21:06les modules sur les paiements mobile
6:21:08money cartes bancair c'est les API c'est
6:21:10le SAS avancé et surtout c'est le
6:21:12marketing et le pring pour avoir de
6:21:14vrais clients qui payent. Tu as aussi le
6:21:16logiciel Easy SAS que j'ai
6:21:17personnellement créé qui va t'aider à
6:21:19trouver et valider ton idée de SAS. Et
6:21:21en plus de cela, les 100 premières
6:21:23personnes qui vont intégrer le programme
6:21:24auront un coaching de groupe avec moi,
6:21:26un coaching gratuit dans lequel je vais
6:21:28les guider et les aider à créer ou bien
6:21:31lancer leur sas ou répondre à leurs
6:21:32questions si jamais ils sont bloqués.
6:21:34Donc si tu es intéressé, tu peux
6:21:35rejoindre rapidement le programme
6:21:37EasySis. Le lien est en description.

About this transcript

This page contains the full transcript of Comment Créer un SaaS de A à Z avec l’IA (Formation) by Amadou Fall , generated from the public captions YouTube serves with the video. The transcript has 77,755 words across 10,998 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.