0:00 Vous voyez ce site là de chez Apple, les animations hyper propres, le produit qui apparaît au scroll avec la décomposition des différents éléments, ce genre de site normalement facturé sur vie, ça vaut jusque dans les 15000 €. Sauf que vous l'avez compris, le site que vous avez sous les yeux n'est pas celui d'Apple. C'est celui que j'ai construit avec Claude Code aujourd'hui en à peine 10 minutes grâce à une technique que je vais dévoiler qui est juste incroyable. Et si tu me crois pas, regarde simplement ça. Ça, c'est ma conversation avec Claud code et comme tu peux le voir, j'ai littéralement envoyé un seul promp et voilà le site web en question. OK ? Donc là, la plupart des gens pensaient que ce genre de site web, c'était accessible uniquement aux grosses agences avec des gros budgets. Et concrètement, moi aussi je pensais ça il y a encore quelques jours. Et là, j'ai découvert cette technique et c'est juste incroyable. C'est une technique qui mélange la puissance de Claude Code et de Nano Banana 2, le dernier
0:45 générateur d'image. Le tout combiné avec quelques petites astuces qui font qu'on peut créer ce genre de site en un claquement de doigt. Bon et si tu es nouveau sur la chaîne, bienvenue. Moi c'est Thomas. J'ai cofondé Azuro EA. On a accompagné plus de 70 entreprises dans leur transition IA et j'enseigne il a plus de 10000 personnes au travers de mes deux communautés sur la plateforme School. Et dans cette vidéo, ce que je te propose premièrement, je vais t'expliquer absolument tout le process pour passer d'une simple idée au site web final que tu as vu tout à l'heure. Deux, je te montre en détail la première étape qui va être de créer tous les visuels avec Nano Banana 2. Ensuite, je te montre comment installer tout le setup avec Cloud Code pour pouvoir préparer la création du site web. Finalement, on va ensemble construire un autre site web de zéro. Et pour finir, je te montrerai comment le déployer sur le web pour qu'il soit accessible et surtout pour que tu sois autonome de A à Z pour derrière proposer ce genre de site web à
1:31 des entreprises. Et c'est d'ailleurs le dernier point qu'on verra ensemble, la partie business car ce genre de site web peuvent se vendre très cher. Bon, allez, assez parler, on commence de suite. Bon, allez, voyons maintenant dans la théorie comment tout ce process de zéro jusqu'au site web final que tu as vu tout à l'heure. Comme tu le vois ici, on a besoin de Cloud Code et Nano Banana 2. Ça va être déjà de un de savoir de quel produit on veut parler sur notre site web. Donc mon exemple, moi c'était les fameux AirPods et ensuite on va générer deux images, une image de départ et une image de fin. Ça bien évidemment comme tu le vois, on va le faire avec Nano Banana 2 et pour moi ça a donné exactement ça. L'image de début c'était les AirPods dans leur boîte et l'image de fin, c'était la fameuse image avec les AirPods un peu décomposés et ça donne un rendu honnêtement plutôt cool. Comme tu peux le voir ici, on a fait ça via austudio.com. Je te montre ça de suite. Et on l'a fait au format 16/9 pour que ce soit un
2:16 format site web en fait paysage. Et si on revient sur notre site, tu vas te rendre compte que la toute première image de mes AirPods, c'est exactement l'image que j'ai généré au début. Concrètement, ça s'est passé comme ça. Là, on est sur eistudio.google.com. C'est un site officiel de Google pour les développeurs. Moi, j'aime bien générer mes photos là-dessus, mais vous êtes pas obligé si vous voulez faire tout au même endroit. J'ai une autre option pour vous juste après. Bref, là j'ai envoyé un prom pour générer cette photo et ce sont les fameux AirPods. Et là la photo, elle est vraiment d'une qualité maximale comme vous pouvez le voir. Donc jusque- là rien de bien compliqué. Ensuite j'ai encore prompté dans la même conversation un nano banana 2 pour avoir les AirPods en mode déstructuré. Vous voyez ici one AirPod with all construcing it displayed in three dimension. En gros, on veut le AirPod décomposé de tous ces éléments affichés en trois dimensions et ça donne cette image qui est juste incroyable. OK, donc ça c'est fait. On a nos deux
3:02 images. Maintenant, on passe à l'étape suivante. Ce qu'on va faire, c'est qu'on va prendre ces deux images et qu'on va aller voir un générateur de vidéo. Le générateur ici, c'est Cling 3.0. Actuellement, il y a pas mieux d'un point de vue contrôle des vidéos, d'un point de vue rapport qualité- prix. Et qu'est-ce qu'on allait faire avec Cling 3.0 ? On lui a donné en fait nos deux images. Donc une image de début, celle du haut, et une image de fin, celle du bas. On a généré un petit prompte grâce à Cloud et je vous montrerai ça en détail juste après. Et on a envoyé le tout à Cling qui nous a sorti une vidéo et c'est en fait une vidéo qui va faire la transition entre l'image de début et l'image de fin. Bon, le plus simple c'est que je te montre donc regarde ça. OK, donc tu as compris là on a généré nos deux images, on a généré la vidéo et c'est en fait cette vidéo qui va être la
3:47 base pour la création de notre site web. Et là, tu l'as compris, le site web qu'on avait sous les yeux a en fait exploité cette vidéo. Ce que tu vois là, l'animation des AirPod, c'est en fait exactement notre vidéo mais qui est en quelque sorte contrôlée par le scroll. Donc en fait, au fur et à mesure qu'on défile sur notre site web, la vidéo derrière défile en même temps. Et c'est là un peu que la magie opère et c'est surtout là que Claude rentre en jeu. OK, maintenant pour le construire avec Cloud Code, on a besoin de deux choses. De un, on a besoin d'un environnement pour développer ce site web. Donc moi, je l'ai fait sur VS Code. Si tu connais pas VS Code, pas de souci, je t'explique absolument tout. Donc quelques minutes et surtout on a besoin d'une fonctionnalité qui change tout avec Claude si tu la connais pas c'est la fonctionnalité skills. Skills c'est un peu une feuille de route, un process qu'on peut donner à Claude. Et là ce qui s'est passé c'est que j'ai utilisé un skills dédié pour construire ce genre de
4:33 site web avec des animations de fou furieux comme tu l'as vu. Et ce qui est vraiment incroyable avec ce skills, c'est qu'il permet à Claude de transformer la vidéo que je t'ai montré à l'instant, donc celle-là sur la droite, en un très très grand nombre d'images. En fait, les images que tu vois sur la gauche, elles ont été décomposées de la vidéo de base et ça a donné toutes ces images. Et c'est grâce à ce processus qu'on va avoir l'animation qui va être contrôlée par le scroll. Et ça, Claude l'a fait absolument tout seul. Je me suis bien évidemment pas amusé à prendre un milliard de screenshots. Claude le fait de A à Z et surtout à la fin, il met tout ça en place sur un site web. Et comme tu l'as vu, j'ai fait ça avec un seul prompt. Une fois qu'on a fait tout ça, on a envoyé notre site web sur internet et ça nous a donné le résultat final que je t'ai montré au tout début. Bon, tu as compris les grandes lignes. On utilise Nano Banana pour générer une
5:19 image d'une qualité incroyable. Une image de début, une image de fin. On prend les deux images et on les réunit pour faire une vidéo. Cette vidéo, on l'envoie à Claude Code et grâce à cette fonctionnalité et ce skills qu'on lui a donné, il se débrouille comme un grand de A à Z, littéralement pour nous sortir un site web digne d'Apple ou de Nike. OK, là tu as la théorie. Maintenant, passons à la pratique. Ce que je te propose, c'est qu'on fasse ensemble un site de zéro et pour répondre à un besoin plus concret qui serait de créer un site pour un produit vraiment peu commun. Imaginons, tu vas faire ça pour un client qui a une boutique e-commerce et il a un produit en particulier. Parce qu'on pourrait se dire que faire ça avec des AirPods qui a un objet ultra commun, c'est beaucoup plus simple que faire ça avec un objet complètement inconnu. C'est pour ça que je veux te montrer qu'on peut créer un site aussi pour un produit spécifique, potentiellement ton produit ou potentiellement le produit de ton client. Donc commençons de suite. Parfait. Pour ce test, je vous propose
6:05 d'utiliser simplement ce stylo. Ce qui va être plutôt cool, c'est qu'avec ce stylo, on va pouvoir explicitement utiliser une photo du stylo tout assemblé. Donc là, je vais prendre une photo simplement. Voilà, ça fera amplement l'affaire. Je vais prendre également une photo du dessus du stylo. Voilà, c'est fait. Et ce qui est plutôt cool, c'est que je vais pouvoir directement le désassembler. Effectivement, on va faire ça à une main, c'est pas grave. Voilà, c'est désassemblé. Et là, je vais prendre encore une photo. OK, maintenant, comme vous pouvez le voir, j'ai uploadé toutes ces photos sur mon Google Drive et on va s'en servir de base pour faire la toute première étape qui est de générer les images avec Nano Banana 2. Encore une fois, pour Nano Banana 2, vous avez plein de plateformes qui vous permettent d'accéder à ce modèle. Moi, je préfère Aistudio.google.com. Vous avez quelques générations gratuites avec Nano Banana classique, mais pour
6:50 Nano Banana Pro ou 2, c'est directement payant avec une clé API. Donc je sais que ça peut être un peu compliqué pour certains, c'est pour ça que j'ai une autre option pour vous. C'est sur Wave Speed. AI. Wave speed pour faire très simple, c'est un agrégateur, on va dire, de modèles. Donc des modèles de vidéo, d'images, d'audio, de musique, de voix, d'avatar. Bref, il y a absolument tout ce dont vous avez besoin. Ce qui est cool comparé à des plateformes comme Icefield et cetera, c'est que vous payez uniquement à l'utilisation et en plus de ça, vous avez, je crois, un ou de dollars offerts quand vous vous inscrivez. Je vous mets tous les liens en description et là-dessus vous pouvez aussi accéder à Nano Banana 2. OK, on est dans Google AI Studio. Comme vous le voyez sur la gauche, on peut choisir les différents modèles avec lesquels on veut interagir. Et nous, on est bien sur Nano Banana 2. Quelques petits réglages. Ici, on a la résolution et l'aspect ratio.
7:37 Aspect ratio, on veut rester en 16 9, c'est en fait un format paysage. Et résolution, on va direct mettre du 4K. Vous pouvez aussi faire du niveau de raisonnement. Donc moi, je vais mettre en high histoire qu'on soit sûr que Nano Banana 2 comprenne direct vraiment ce qu'on veut faire. Ce qui est plutôt cool avec AI Studio, c'est qu'on a accès directement à notre drive. Donc là, vous le voyez, j'ai directement accès à toutes mes photos qui sont dans mon drive. Donc là, je peux cliquer sur insérer et ça va ajouter toutes les photos. Et en attendant, je peux prompter. Et là, petite magie, je vous montre ça. Et voilà, c'est fait. Là, j'ai mon prompte qui est apparu. Bon, si vous demandez quel est ce sortilège, je vous laisse aller voir une autre vidéo que j'ai fait dédiée à Nano Banana 2 et je vous explique exactement comment pouvoir
8:23 dicter comme ça un prompte optimisé pour Nano Banana 2. Et dans tous les cas, ce promte là, vous pouvez le récupérer sur mon school. On y revient un peu plus tard. C'est là que vous allez récupérer tout ce dont vous avez besoin pour tout ce tutoriel. Là, on lance la génération. Donc, j'ai fait un petit charabia en anglais. J'aime toujours prompter en anglais. Je vous conseille de prompter en anglais toutes vos images et cetera. Donc là, je vais envoyer toutes les photos du stylo et je veux qu'il fasse une photo entièrement assemblée. Allez, l'image de notre stylo est là, elle est magnifique. Bon, ça a pris un peu de temps avec Nano Banana, comme vous voyez, il fait nuit, je rigole. J'ai fait une pause et je continue la vidéo un peu plus tard. Ça a pris en réalité quelques secondes et le résultat est honnêtement plutôt pas mal et surtout plus important, il est fidèle avec la réalité. Donc c'est vraiment le même stylo là, il y a pas de souci. Donc honnêtement, c'est plutôt cool. Allez, maintenant on va continuer avec la suite
9:09 et ça va être simplement de prompter là dans la même conversation avec Nano Banana. Donc ça potentiellement vous pouvez pas le faire si vous êtes sur Wes speeed ou autre. Donc c'est l'avantage là d'être avec la vraie plateforme astudio.google.com. Là, j'envoie un prompt tout bête encore une fois en anglais. Voilà, c'est fait. Encore une fois là, je l'ai dicté mais pas avec mon promte spécialisé, je l'ai dicté de manière normale car on a déjà dans la conversation un peu tout le contexte et toutes les composantes de l'image pour que ça fonctionne bien. Bref, là j'ai simplement demandé maintenant je veux exactement dans le même contexte avec le même fond une image en gros de ce stylo en mode déstructuré en 3D décomposé dans ces petites pièces euh pour donner un peu l'effet le un effet similaire avec ce qu'on a vu avec le AirPod. OK, nous y voilà. Et comme vous pouvez voir, c'est juste parfait dans le sens où ça correspond exactement à l'image que je
9:54 lui ai envoyé. Là, c'est vraiment spécifiquement le même produit. Je vous mets les deux images l'une à côté de l'autre et comme vous pouvez voir, c'est vraiment la même chose. Donc ça, c'est la puissance de Nano Banana 2 qui permet d'être ultra fidèle sur les inputs qu'on lui donne. C'est le top. Bref, passons à l'étape suivante. OK, reprenons. On a généré notre image. Maintenant, il est temps de passer à la suite et ça va être justement de passer à la génération de la vidéo. Pour te remettre dans le contexte, ce qu'on a là maintenant, c'est nos deux images, l'image de début et l'image de fin. Et on va utiliser le modèle Cling 3.0 plus un prompt qu'on va faire rédiger directement par Cloud. Tu vas voir, ça marche super bien pour obtenir notre vidéo finale. Donc, on y va. Rendez-vous sur la plateforme Cloud AI. Honnêtement, c'est la meilleure plateforme. Il y a il y a pas photo pour moi. Bref, là, comme tu peux le voir, on est dans l'historique de la conversation que j'ai eu pour générer euh le prompt
10:41 qui m'a permis d'avoir la vidéo pour ces AirPod. Et comme tu le vois, j'ai simplement envoyé les deux images et demandé à Claude de manière simplissime. Aide-moi à générer un prompt pour le vidéo de modèle I cling pour avoir une vidéo ultra lisse qui fait une transition professionnelle de l'image numéro 1 vers l'image numéro 2 où les AirPods sont décomposés en sous-éléments. Là vous allez voir, je vais vraiment juste reprendre ça pile poil. Je vais refaire une nouvelle conversation. Je vais coller le prompt. Bien évidemment, ici on va pas avoir Airpod mais on va avoir The Pen, le stylo. OK, donc pareil ici. Donc adapter ce prompt. Ce prompt là, vous pouvez le récupérer également sur ma communauté school. Le lien est dans la description. On y revient plus en détail plus tard. J'envoie les deux images. Donc là, on laisse tranquillement uploader l'image d'avant, l'image d'après et j'envoie mon
11:27 prompt. Donc là, ce qui est plutôt fort avec Claude, comme avec d'ailleurs n'importe quel modèle LLM de nos jours, euh ils sont capables de lire en fait les images. Donc là, vous voyez que directement, il va m'envoyer mon prompt euh pour Cling car de nos jours dans les données d'entraînement euh des modèles récents, on a effectivement des tutoriels pour utiliser des modèles comme Cling. Donc Claud, c'est exactement de quoi on parle quand on mentionne Cling, le modèle de vidéo il a. OK, maintenant rendez-vous sur Wave Speed AI. Encore une fois, il y a plein de plateformes qui vous permettraient d'accéder à Cling, mais sur cette même plateforme, vous pouvez avoir Cling et Nano Banana 2. En plus de ça, encore une fois, c'est uniquement à utilisation. Donc moi, je vais m'en servir. Je vous mets le lien dans tous les cas en description et dans le guide que vous pouvez récupérer sur le school. On se rend sur Cling 3.0 Pro image to Véo. Oui, image to vidéo, c'est très important car on va devoir envoyer nos
12:13 images. Et donc là, comme vous voyez sur la gauche, on a différents inputs. Donc on a déjà un prompt, on va faire un peu de place. Là, on va coller le prompt que euh Claude nous a sorti. C'est parfait. On a même un négatif prompt, mais on va pouvoir le laisser vide pour l'instant. Et ensuite, on a ici une image. Donc là, on peut ajouter, on peut faire glisser, déposer notre image de base, donc l'image du début, la première frame. Et ensuite, on a end image, donc image de fin. Et là, vous l'avez compris, on peut faire glisser, déposer l'image de fin. Au niveau de la durée avec Link 3.0, ce qui est en top c'est qu'on peut aller de 3 jusqu'à 15 secondes, on peut pas faire plus de nos jours. Et nous pour notre vidéo 6 secondes, ça fait largement l'affaire. Vous pouvez mettre plus ou moins, c'est à vous de voir. On a plein d'autres options avec lig et on va pas tout repasser en revue car j'ai fait d'ailleurs une vidéo dédiée à ce modèle Clan 3.0. Honnêtement, c'est assez
12:59 dingue. Donc si ça vous intéresse, je vous mets le lien juste au-dessus quelque part. Et en attendant, parlons rapidement prix. Ici, comme vous voyez, pour une vidéo de 6 secondes, on a une estimation du prix qui est à 67 centimes de dollars. Donc ça fait en gros 50 centimes d'euros pour une vidéo de 6 secondes. Au niveau de la sortie, on est sur du 1080 pixels. Donc voilà, au moins ça vous donne une idée. Attendez bien que vos images soient uploadées les deux, donc que les deux images apparaissent, sinon ça va pas être pris en compte. Très important. Et une fois que les deux images sont apparues, on peut cliquer sur run pour envoyer la génération de la vidéo. Donc là, il y a simplement à attendre tranquillement que la vidéo soit généré. Ça peut prendre quelques minutes, ça dépend un peu du modèle ou alors de l'utilisation des serveurs actuellement sur le site web. OK, parfait. Notre vidéo est là et honnêtement, c'est juste parfait pour notre besoin. Je vous laisse regarder la vidéo en plein écran.
13:50 Allez, génial, étape 2, validé. Vous avez vu, c'était super simple. On a pu générer notre vidéo. Maintenant passons à l'étape 3. Et c'est là qu'on va commencer à utiliser Cloud Code. Donc c'est là que la magie opère. Bon pour suivre le tutoriel à partir de là, on va avoir besoin déjà de un d'un abonnement cloud. Le minimum suffira l'abonnement à 20 € pour utiliser Cloud Code. Et ensuite on a besoin d'un petit logiciel super simple qui s'appelle VS Code. Donc là si on a Cloud plus VS Code, on est bon pour la suite. OK. Pour installer VS Code, rien de plus simple. Vous vous rendez sur code.visualstudio.com et vous téléchargez ce qui correspond à votre système. Je vous mets le lien dans la description pour pas vous trompé et une fois fait, vous allez tomber sur cette interface. Bon là, on pourrait parler pendant des heures de VS Code. Bien évidemment, c'est pas l'objectif. L'objectif principal là avec cette étape, ça va être d'installer
14:36 l'extension cloud. Donc pour ce faire, on se rend sur la gauche ici dans extension. On va taper cloud tout simplement et vous allez tomber sur cette extension. Vous l'installez ici. Moi, je l'ai déjà fait bien évidemment. Et une fois que c'est fait, on va créer maintenant l'environnement pour que Claude commence à générer son site web. Bon, en fait, rien de bien compliqué. Ça veut simplement dire créer un dossier dédié pour ce projet. J'ai mon projet de site pour les AirPods et sur la droite, j'ai créé un autre dossier. Je l'ai appelé pen stylo simplement. Donc quand c'est fait, on va se rendre à nouveau sur VS Code et on va cliquer ici sur fichier et ouvrir un dossier. Voilà, vous vous rendez à la racine de ce dossier. Vous cliquez sur ouvrir et c'est bon. Logiquement, si vous avez bien installé votre extension cloud, vous allez voir un petit logo cloud ici. Vous pouvez cliquer dessus. Si c'est la première fois que vous l'utilisez, ça va vous demander de vous connecter. Là, vous avez simplement une option se connecter avec un abonnement Cloud. Vous
15:22 cliquez dessus, ça va vous ouvrir une pop-up, ça va vous demander de vous connecter. Vous allez voir, l'installation est super simple. Une fois que c'est fait, logiquement, vous êtes capable d'envoyer par exemple un petit coucou et Claude Code va vous répondre "Coucou, comment ça va ? Comment puis-je vous aider aujourd'hui ?" Bon, c'est nickel, ça marche. Là, vous êtes setup avec l'environnement. Vous avez Cloud, vous avez VS Code, on est paré pour créer le site. Mais avant de se lancer dans la création du site, il nous manque deux choses. C'est en fait deux skills. Les skills pour Claude, c'est en gros des capacités, c'est en gros des feuilles de route. Et ce savoir-faire, vous pouvez le récupérer et l'importer dans votre projet. Ça tombe bien, les deux skills que je vais vous présenter, vous allez pouvoir les récupérer gratuitement. Et là, encore une fois, ça se passe sur ma communauté school. C'est la communauté gratuite où j'apprends lié à plus de 10000 personnes et vous pouvez récupérer pour suivre ce tutoriel un guide complet
16:08 avec justement les skills, les différents prtes que j'ai utilisé et cetera. À l'intérieur, vous allez trouver deux fichiers, ces deux fichiers skill.md et c'est comme vous le voyez ici deux skills. Un pour le front end, en gros notre site web, la manière de construire un site web de manière professionnelle et ensuite vidéo to web skill. Vous allez avoir besoin de récupérer ces deux fichiers pour les donner à cloud et je vais vous montrer comment dans une seconde. Petite parenthèse avant de passer à la suite. Ces deux skills sont en majorité inspiré de Nate KK, un développeur et un créateur anglophone qui a dévoilé cette technique que j'ai trouvé impressionnante et c'est pour ça que je me la suis appropriée et que je vous la retransmets aujourd'hui. Si ça vous intéresse, je vous mets sa chaîne en description. Donc une fois que vous avez récupéré vos deux fichiers, vous allez devoir les structurer de la sorte. Vous allez devoir créer un dossier qui s'appelle point cloud. À l'intérieur, vous allez devoir créer un autre dossier
16:53 qui s'appelle skills et à l'intérieur, vous allez pouvoir nommer vos deux skills. Le nom ici des dossiers frontend design et vidéo to website ne doit pas exactement être celui-là, mais c'est beaucoup plus simple pour le skills. Une fois que c'est fait, vous allez pouvoir mettre vos deux skills à l'intérieur. Et en fait, ces skills, comme vous voyez, c'est une énorme feuille de route qui explique à Claude précisément comment il doit procéder pour créer un site web du coup avec cette fameuse animation. Donc normalement, si tout fonctionne bien, vous allez pouvoir vous rendre ici sur la fenêtre avec load et faire un slash. Et par exemple, si je tape vidéo, vous allez voir que il y a précisément le skills qui correspond ici. En fait, c'est exactement ce que j'ai sur la gauche. OK ? Donc si vous avez installé tout correctement et que vous l'avez structuré de la même façon, votre cloud devrait y avoir accès. Donc maintenant, c'est bon, le cloud a accès aux deux skills. Donc il lui manque qu'une seule
17:39 chose, c'est la fameuse vidéo. Et on va devoir en fait l'importer dans ce projet. Voilà, j'ai importé ma vidéo dans le projet. Comme vous le voyez, je l'ai mis ici sur la gauche. Donc c'est parfait. Je vais simplement pour faire plus propre la renommée vidéo. MP4 et là il est temps de prompter simplement Claude pour qu'il commence à travailler. Donc pour faire preuve, je vais quand même recommencer une nouvelle discussion. Voilà, nouvelle discussion au propre. C'est parfait. On commence. Voilà, comme vous le voyez, le prompt était hyper simple et en fait ça va suffire largement à Claude pour faire le site web. Pourquoi ? car encore une fois il a accès aux skills. Néanmoins là, j'ai prompté en français pour la vidéo mais je vais rapidement traduire ce prompte avant de passer à la suite. Encore une fois, prompter en anglais, c'est toujours bénéfique surtout si le skills lui est en anglais, ce qui est le cas. Voilà, c'est fait. Et avant d'envoyer, je vais m'assurer de passer en mode planification. Effectivement, Cloud Code a un mode planification qui
18:26 va lui permettre en fait de planifier ses propres tâches en analysant le contexte et les différents skills qu'on lui a donné avant de passer à l'action. Donc, c'est très pratique en fait. Cloud code va vous afficher son propre plan. vous avez plus qu'à valider et après que le code va exécuter. Donc fonctionnalité vraiment pratique. Donc dès le début, il va commencer à euh nous demander des autorisations pour aller lire certains fichiers, pour aller écrire certains fichiers. Donc bien évidemment, la bonne pratique ici, c'est de prendre le temps de vérifier chaque autorisation. En pratique, là sur un projet comme ça, vous pouvez accepter sans trop de problème. Donc là, comme vous le voyez avec le code, ce qui est vraiment sympa, c'est qu'on peut voir en direct ce qu'il est en train de faire. Là, regardez, il est en train de lire le skills numéro 1 et là, il est en train de lire le skill numéro 2. Donc, on peut vraiment suivre en détail les différentes phases. On peut même ouvrir ici le différents dialogues de réflexion en mode thinking en anglais. Donc il va réfléchir avant
19:12 d'exécuter ses différentes tâches et c'est plutôt sympa à voir. Donc là, je vais laisser Claan réfléchir du coup et on revient dès qu'il a son plan détaillé pour la création de nos je fais une toute petite pause. Si cette vidéo te plaît, n'hésite pas à lâcher un like et à t'abonner pour ne pas rater les prochaines des vidéos dans le genre. On en prépare plein. Donc je te remercie du fond du cœur et nous on continue. OK, donc vous l'avez vu, Claude est arrivé au bout de la première étape qui est en fait de diviser la fameuse vidéo MP4 que vous avez sur la droite en un nombre en un grand nombre en fait de différentes frames. Donc comme vous voyez sur la gauche, on a en fait énormément d'images de notre vidéo et en fait ça a été découpé en plein de petites images et c'est grâce à ça qu'on va pouvoir en fait mettre en place la suite du process qui est d'aligner et de synchroniser l'affichage de ces différentes frames
19:58 avec la position au scroll de la page web. Donc comme vous le voyez, Claude avait planifié sa propre tod list si vous voulez juste ici et je l'ai arrêté en plein milieu. Et là je vais pouvoir lui demander de retourner au travail. Voilà, il est reparti. Là, je vais le laisser encore une fois faire son travail tranquillement et on se retrouve dès que le site est terminé. Encore une fois, ça devrait être fait en one shot. En tout cas, je l'espère. On va voir ça tout de suite. OK, on y est. Apparemment, c'est déjà prêt. Honnêtement, c'était plutôt rapide. Ça a duré, je crois, allez, peut-être 2 3 minutes, honnêtement, pas plus. Et comme vous le voyez directement dans la conversation, Cloud Code me donne accès à un lien. En fait, ce lien, c'est un lien en local. Ça veut simplement dire que c'est sur mon PC, il y a uniquement moi qui peut y accéder. Et là, on est sur le site. Donc honnêtement, je le découvre en même temps que vous. On va voir ça. On va zoomer un peu pour que
20:44 vous le voyez bien. On va mettre en plein écran. Pour commencer, un peu de contexte, je lu demandé d'improviser complètement. Je lu simplement dit que voilà, ça allait être un site web pour un stylo, délire un peu luxe et cetera. Déjà, ça commence plutôt bien. On va scroller un peu pour voir si ça fonctionne bien. Ah, c'est génial. C'est excellent. Comme vous voyez, on a le texte qui apparaît en même temps que l'animation se forme. C'est juste génial. OK, ça a plutôt bien marché. J'adore honnêtement ce genre d'animation. Honnêtement, c'est juste top. Et vraiment le plus fort encore une fois, c'est qu'il a fait ça en one shot. Le site est déjà prêt du premier coup. Bon là, ça a été complètement inventé de zéro pour tout ce qui est le texte et cetera, mais le site est bien fonctionnel. Encore une fois, du premier coup, j'adore le concept. Bon, et maintenant, le plus fort dans tout ça,
21:30 c'est que vous avez absolument tout en place pour pouvoir vraiment arriver au résultat final souhaité. Là, c'est un premier G. Le but c'était de vous démontrer un peu cette nouvelle technique et bien évidemment si vous voulez des mises à jour, si vous voulez que ce soit plus précis, si vous voulez aller encore plus loin, ajouter des pages et cetera, vous avez Claude qui est devant vous et qui est prêt à recevoir vos promptes pour aller plus loin. Donc moi, je vais pas le faire pour cette démonstration, mais bien sûr, vous de votre côté, n'hésitez pas à aller encore plus loin pour pousser votre site au maximum. Bon, on y est. Comme vous avez vu, c'était vraiment pas compliqué. On a eu simplement à mettre en place Cloud code sur VS Code, lui envoyer nos différents skills et après un simple prompt qui décrivait de manière ultra simplifié notre site web et il le fait en one shot littéralement. C'est génial. OK. Bon maintenant étape suivante, on va déployer ce site web sur internet. Encore une fois, le site web
22:15 que vous avez vu ici est sur un URL un peu bizarre, c'est local host 2.8000. Bon, pour passer les détails, ça veut simplement dire que votre site web est uniquement sur votre machine. Donc, vous pourriez potentiellement rendre ce site web accessible partout sur le web si vous comptez laisser votre PC connecté h24 et dédié à ce site web. Honnêtement, c'est plus ce qu'on fait en 2026, c'est pour ça qu'on va déployer ce site web sur le cloud. Bon, et là, pour donner un peu de contexte, pourquoi on veut déployer ce site web sur le cloud, c'est bien évidemment dans l'objectif de potentiellement vendre cette prestation. Le déploiement là, c'est la dernière étape qu'il vous manque avant de pouvoir proposer une prestation complète. a des potentiels clients car après ça concrètement vous serez capable de démarcher un client, de lui montrer le site web que vous êtes capable de faire pour lui, de le faire pour lui et ensuite de le déployer pour lui sur internet. Et en fait, c'est la pièce
23:01 manquante du puzzle ici. OK ? Maintenant, pour le déploiement, il y a un océan de différentes options qui s'offrent à vous. Je vais vous montrer là ma méthode. OK ? Donc étape par étape, vous allez pouvoir la suivre et arriver au même résultat, mais bien évidemment qu'il y a d'autres options avec différents avantages et inconvénients. À vous de voir ce qui vous correspond. Moi en tout cas ce que j'utilise depuis des années euh pour héberger mes sites web, mes applications, euh mes agents et cetera, c'est la plateforme Hostinger. Donc oui, je sais, vous entendez parler partout sur internet et c'est pas pour rien honnêtement, c'est parce qu'elle est super facile pour la prise en main. Donc là, je vais vous montrer vraiment le chemin le plus facile pour arriver à votre objectif qui est de mettre en ligne ce site web. Et ça commence en fait par la page d'accueil d'hostinger. Donc vous avez un lien dans la description, ça vous ramène sur cette page. Hostinger vous propose différentes options pour héberger votre site web. Le
23:47 meilleur rapport qualité- prix, c'est la fameuse KVM2. Une KVM1, ça fait aussi bien l'affaire, mais avec la KVM2, au moins vous êtes là pour héberger plusieurs sites web. Donc potentiellement pour vendre cette prestation à 1 2 5 10 clients sur la même machine. Donc c'est potentiellement très intéressant. Bon et concrètement qu'est-ce que ça veut dire ? KVM 1 2 4 8, c'est simplement la puissance de l'ordinateur qui va héberger votre site web. Il faut bien le comprendre, je vous l'ai dit, l'ordinateur que vous avez ici pourrait héberger le site web et les ordinateurs, vous savez très bien, ont différentes puissances. Différents types de mémoire, différents types de CPU, différents types de RAM. Bref, on va pas rentrer dans les détails. Là, vous avez les différentes puissances d'ordinateur. Donc KVM2, c'est le choix parfait. KVM1, ça marche très bien aussi. Donc une fois qu'on va sur KVM2, là vous allez avoir un petit formulaire. Donc premier point, plus vous prenez une KVM longtemps. Donc
24:34 si vous le prenez pour 1 mois, honnêtement, ça va pas servir à grand-chose. Si vous le prenez pour 12 mois, c'est un prix vraiment intéressant. Ça fait moins de 10 € par mois, ce qui est rien du tout. Et si vous prenez 24, c'est encore moins cher. Et petit bonus, si vous cliquez ici sur ajouter un coupon et que vous tapez Thomas Berton, vous le savez très bien si vous me suivez sur YouTube, je suis partenaire à Dustinger parce que j'apprécie énormément leur plateforme. Et comme vous le voyez, ça enlève encore 10 % au prix, ce qui ramène littéralement votre machine à peu près 6 € et quelques par mois. Donc c'est vraiment pas grandchose. Une fois que c'est fait, descendez un peu en dessous et venez cliquer ici sur OS with panel. En fait, c'est un panel qui va vous permettre de gérer votre serveur. Vous allez voir, c'est super facile en plus à prendre en main. Et moi, je vous conseille cloud panel. Je l'utilise énormément, honnêtement, c'est hyper pratique. Donc voilà, cliquez sur cloud panel, ajouter le code de réduction,
25:21 cliquez sur continuer. Là, vous allez tomber sur une page de paiement. Ensuite, vous allez vous créer un compte et après vous allez vous retrouver exactement ici. Donc là, vous allez pouvoir, si c'est pas déjà fait, choisir l'emplacement du serveur. Donc France si vous êtes en France. Par contre, si vous êtes ailleurs, bien sûr, mettez-le ailleurs. Mettez-le en tout cas le plus proche de vous et de vos potentiels clients. OK, on clique suivant. Si jamais on vous demande encore, cliquez sur cloud panel et là c'est bon. Vous avez simplement là à attendre même pas une minute et votre serveur sera prêt pour l'étape suivante. Alors, petite parenthèse, ici, vous savez très bien, un site web, vous devez y accéder via un URL, OK ? Il y a une adresse et en fait si vous allez sur YouTube, ça va être youtube.com. Tout ça pour dire que quand vous allez déployer ces sites, si c'est pour vous-même ou si c'est pour vos clients, vous allez devoir les lier à ce qu'on appelle un nom de domaine. Par exemple, mon site web personnel que vous avez sous les yeux, il est sur le nom de
26:06 domaine tha-berton.com. D'ailleurs, si vous voulez travailler avec moi, c'est ici que ça se passe tha-berton.com. Donc, potentiellement, votre client va avoir son nom de domaine ou alors vous allez récupérer un nom de domaine pour votre client. Tout ça pour que le site web de votre client à la fin soit accessible sur un nom de domaine, par exemple euh jean-michelir.com. Donc les noms de domaines, vous pouvez aussi les acheter chez Hostinger, pourquoi pas ? Ça marche très très bien. Moi personnellement, je les achète chez OVH. Là encore, c'est votre choix. Néanmoins, le site web, si on veut le déployer en ligne, il va falloir le connecter à un nom de domaine. Donc là, je vais vous montrer comment ça se passe depuis OVH. OK ? et ça fonctionnerait exactement pareil sur d'autres serveurs. Donc là, vous avez acheté votre nom de domaine. Peu importe le provider ou l'application sur lequel vous êtes, vous
26:52 allez avoir quelque part zone DNS. Et une fois que vous êtes dans zone DNS, vous allez pouvoir peu importe le provider, ajouter une entrée juste ici. Donc vous ajoutez une entrée de type A. OK ? Donc simplement le A. Et là pour le test, moi je vais simplement écrire vidéo website. Donc ça c'est le sous-domaine. Qu'est-ce que ça veut dire sous-domaine et non de domaine ? Mon nom de domaine par exemple, c'est tha-berton.com. Vous l'avez ici sous les yeux et le sous-domaine ici, c'est vidéo website. Ce qui fait que l'URL final sur lequel on pourra accéder à ce site web, c'est vidéoite.com.-ton.com. Ça c'est un nom de domaine, ça c'est un sous-domaine. Et dernier champ, on nous demande une adresse IP. L'adresse IP en fait, c'est l'adresse IP de votre serveur. Et ça tombe bien parce que mon serveur là est enfin configuré. Donc là,
27:39 je peux cliquer sur gérer le VPS et mon adresse IP est finalement disponible. Donc ce que je peux faire maintenant, c'est retourner sur VH, renseigner mon adresse IP, cliquer sur ajouter et là c'est fait. En fait, là ce qui se passe c'est que mon nom de domaine va rediriger le trafic vers l'adresse IP de mon serveur. Mais là actuellement sur mon serveur, il y a encore rien. Donc je vais devoir m'en occuper. Comme vous le voyez, on a bien cloud panel d'installer ici. Et ce qu'on peut faire maintenant, c'est cliquer sur gérer le panel. Bonà, notre panel n'est pas encore sécurisé par HTTP, mais ça c'est pas bien grave parce que notre site web le sera. OK. Maintenant, sur Cloud Panel, vous allez devoir vous connecter. Donc là, le nom d'utilisateur c'est admin. Le mot de passe, bah c'est le mot de passe que vous avez mis. Donc je vous laisse le taper. Et voilà, là on arrive sur cloud Panel. Donc moi, directement, je vais mettre en mode sombre, je préfère. Bon, cloud Panel, je vais pas faire un tutoriel ici sur cette interface. Néanmoins, c'est hyper complet, très
28:25 intéressant. Si ça vous intéresse ou si vous avez des questions, mettez-les en commentaire ou alors venez demander de l'aide sur school et je pourrais vous répondre là-bas directement. Mais en attendant, nous ce qu'on va faire, c'est simplement ajouter un nouveau site. Donc ça tombe bien, on a un bouton dédié, ajouter un site. Là, on a différentes options et on va cliquer nous sur create a static HTML site. Effectivement, notre site c'est un site web HTML statique. On va pas rentrer dans les détails. Et là, on nous demande le nom de domaine. Bah tiens, ça tombe bien, je vais pouvoir récupérer le nom de domaine que j'ai configuré sur OVH. Le nom domaine, c'était vidéo website.com.thomaberton thaomat-berton.com. Voilà, là j'ai créé un nouveau mot de passe. J'ai cliqué sur sauvegarder et là, comme vous le voyez, le site a bien été créé. Première étape, on va aller cliquer sur le site ici et on va devoir sécuriser notre site web car actuellement si on se rend sur notre nom
29:11 de domaine vidéoebite.com.thomberton.com, on a ce message qui n'est pas très euh amical pour nos clients qui nous dit que la connexion n'est pas privée. En fait, c'est parce queon n pas sécurisé la connexion entre le nom de domaine et le site web. Pour se faire, rien de plus simple. Vous allez voir si vous avez bien fait l'étape au préalable sur votre provider de nom de domaine, moi par exemple OVH, vous ce que vous voulez, vous allez devoir vous rendre dans SSL TSL ici et là on va cliquer sur action, on va cliquer sur new let's encrypt certificate, on va cliquer sur créer et installer ici. Et là, on va simplement devoir attendre. En fait, là ce qui se passe, c'est qu'un certificat est en train d'être créé entre votre nom de domaine et votre serveur. Vous avez votre nom de domaine qui pointe bien vers votre serveur, donc vers l'adresse IP. Et là, on est en train de créer un certificat qui dit "Oui, effectivement, je suis sur le serveur avec l'adresse
29:57 IP. Ce nom de domaine pointe bien vers le mien. Tout va bien, c'est bien le propriétaire du serveur et du nom de domaine est bien le même. Donc le certificat est OK et d'ailleurs, il vient d'être créé ici. D'ailleurs, ça tombe bien maintenant si on retourne sur le site web en question et qu'on rafraîchit. Regardez, le https est apparu et on se retrouve avec un petit message Hello World. Là, laissez-moi vous montrer un peu ce qui se passe. Comme on a créé un site web statique, on peut aller directement sur Cloud Panel et ça c'est génial. dans File Manager. Quand on va ensuite dans HTdc, dans le dossier où il y a le nom de domaine qu'on a créé, on a un fichier qui s'appelle index.html. Si je clique dessus, je retrouve le fameux Hello World. Et là, si j'enlève ça, que je fais "coucou, c'est Thomas que je sauvegarde, je retourne sur le site, je recharge. Waouh, comme par magie, ça s'est mis à jour." Donc là, si vous avez un peu suivi, vous avez compris.
30:43 Maintenant, ce qu'on va devoir faire, c'est à la place de ce fameux index.hthtml, on va devoir téléverser et on peut le faire très très simplement. absolument tout notre site web qui est ici. Donc vous allez voir, ça va être d'une simplicité déconcertante. Donc première étape, ça va être de récupérer les fichiers. Donc ce qu'on peut faire là simplement, c'est faire un clic droit. On peut cliquer sur révéler dans l'explorateur de fichiers. Ça va nous ouvrir notre dossier sur Windows ou sur Mac, peu importe. Donc là, vous avez sous les yeux tous les fichiers qui composent notre site web. Et maintenant, ce qu'on peut faire, c'est retourner sur cloud panel. Là, je ferme cet éditeur de fichier. Je vais supprimer l'index.hthtml HTML de base et je vais venir littéralement faire glisser, déposer tous les fichiers à part le point cloud, on en a pas besoin dans notre site web. Donc là, glisser, déposer et voilà, les fichiers sont en
31:28 train d'être envoyés. Alors, potentiellement, vous avez certains dossiers qui vont poser problème car ils sont un peu trop volumineux. Petite astuce, si jamais votre site est trop volumineux, c'était mon cas ici. Effectivement, on a beaucoup beaucoup de frame juste là. Vous pouvez en fait simplement compresser votre fichier. Donc là euh rien de bien compliqué. On vient sélectionner tous les dossiers et fichiers qu'on va envoyer. On fait un clic droit, on fait envoyer vert. Dossier compressé. On se retrouve avec ce dossier-là. On peut l'envoyer juste ici. Et là sur cloud Panel, on fait clic droit extract, ce qui va en fait extraire tout le fichier. On se retrouve avec ça. Et là, voilà, vous vous retrouvez avec tous les fichiers qui ont été importés sur votre serveur. Et là, ce qui est magique, vu que c'est un site web statique, qu'on a déjà connecté notre nom de domaine et qu'on a importé tous les fichiers. Logiquement, si je
32:15 retourne sur mon site web, regardez comme par magie, on retrouve exactement notre même site web avec notre même animation mais cette fois en ligne accessible sur vidéoite.com.thomas-berton.com et pour vous, ce sera le nom de domaine de votre client. Donc voilà, c'est fait. Là maintenant, vous maîtrisez la chaîne de A à Z. La seule limite, c'est votre imagination et votre détermination à vendre ce genre de prestation. Effectivement, pour parler rapidement business ici, ce genre de site web avant c'était accessible uniquement à une certaine élite du développement web. Imaginez bien que ce genre de processement accessible pour des débutants. Là aujourd'hui, vous avez la capacité de livrer de A à Z de la conception à la réalisation, à la livraison et au déploiement en ligne ce service à vos clients. Maintenant, tout
33:00 ce qui vous reste à faire, c'est vous créer quelques sites exemple, les mettre en ligne sur votre portfolio professionnel. Donc achetez-vous un nom de domaine. Allez démarcher ensuite des clients pour vendre ce genre de prestation et honnêtement c'est assez simple. Vous leur présentez un site web de démonstration et derrière ça va être assez rapide he s'il est pas intéressé il en aura rien à faire dès le début mais il y a de grandes chances pour le coup que ce genre de site web lui en mette plein la vue surtout si vous prenez le temps de vous faire des sites web de démonstration vraiment au top. Encore une fois là le site web que vous avez sous les yeux je l'ai fait en one shot. OK ? Je n'ai même pas fait de révision avec l'audien évidemment passez plus de temps pour affiner et vraiment optimiser à fond votre site web. Donc voilà, on arrive déjà à la fin de cette vidéo. Honnêtement, c'était plutôt complet. J'ai v essayé de vous montrer absolument tout de A à Z. J'espère en tout cas que ça vous a plu. Si c'est le cas, n'hésitez pas à liker cette vidéo
33:46 et à vous abonner pour ne pas rater les prochaines. Et si vous aimez ce genre de construction et vous voulez aller plus loin dans l'intelligence artificielle, je vous invite à nous rejoindre sur le club IA VIP. En fait, c'est la partie professionnelle du club IA. Vous allez pouvoir y retrouver plein de passionnés d'IA et d'entrepreneurs. C'est là que vous allez retrouver tous mes lives et mon accompagnement complet autour de l'intelligence artificielle. Si ce genre de vidéo avec Clou, n'hésitez pas à me le dire aussi en commentaire. Il y a énormément de cas d'usage avec ce cl. C'est quasiment infini, honnêtement. C'est plutôt génial. Donc je me ferai un plaisir de faire d'autres vidéos sur ce sujet. En attendant, prenez soin de vous. J'espère vous revoir sur le Clubia ou le club VIP. On se dit à la prochaine. C'était Thomas. Co?
