- il y a 20 heures
👉 Découvre les offres Hostinger : https://www.hostg.xyz/SHK9h
Code promo pour une réduction supplémentaire : LABODESRESEAUX
Julien vient d'ouvrir son café et il est presque invisible sur internet. Dans cette vidéo, je lui crée un site complet avec Claude et je le mets en ligne grâce au plugin officiel Hostinger : click & collect, réservation de cours, e-mails automatiques et espace admin. Julien et son café sont inventés pour l'exemple.
Dans la vidéo, j'utilise l'offre Unlimited sur 12 mois.
Code promo pour une réduction supplémentaire : LABODESRESEAUX
Julien vient d'ouvrir son café et il est presque invisible sur internet. Dans cette vidéo, je lui crée un site complet avec Claude et je le mets en ligne grâce au plugin officiel Hostinger : click & collect, réservation de cours, e-mails automatiques et espace admin. Julien et son café sont inventés pour l'exemple.
Dans la vidéo, j'utilise l'offre Unlimited sur 12 mois.
Catégorie
🤖
TechnologieTranscription
00:00Voici Julien, il vient d'ouvrir son café à Nantes, le Café Boussole.
00:05Problème, pour l'instant, il a du mal à faire venir du monde.
00:08Il faut dire qu'à part une page Facebook un peu bancale, il est quasiment invisible sur Internet.
00:14Alors, on va l'aider.
00:16On va lui créer un site web avec des infos claires sur son café et surtout ce qu'il organise.
00:21On va même lui intégrer du click and collect pour ses clients
00:25et la possibilité de réserver une place au cours de barista qu'il donne le week-end.
00:30Enfin, quand je dis on, c'est surtout Claude qui va travailler avec l'aide d'Ostinger.
00:35Et c'est là que ça devient intéressant.
00:36Sans quitter Claude, on va construire un site qui envoie un email à Julien à chaque commande et à chaque
00:43réservation de cours.
00:44On va même lui créer un tableau de bord pour qu'il mette à jour son site lui-même.
00:48Par exemple, pour annoncer les prochains événements dans son café.
00:50Pour la mise en ligne, on s'appuie sur le plugin Hostinger, le partenaire de cette vidéo.
00:55C'est lui qui va permettre à Claude de déployer le site directement, côté client comme côté admin.
01:01Le tout dans un environnement sécurisé avec un HTTPS, des sauvegardes automatiques
01:07et sur un hébergeur qui s'adapte à tous les projets web.
01:10Tout ça en même pas une après-midi de travail.
01:13Tu vas voir, les résultats sont à la hauteur des espoirs de Julien.
01:17Alors pourquoi choisir Hostinger pour ce projet ?
01:20Eh bien, parce que c'est ce qui rend tout ça possible sans quitter Claude.
01:23Hostinger a un plugin officiel.
01:26Une fois connecté, Claude peut créer le site, le mettre en ligne, gérer la base de données
01:30et le domaine directement depuis la conversation.
01:34Pour ce projet, je me suis tourné vers l'offre Unlimited d'Hostinger.
01:38En plus, au moment où j'enregistre cette vidéo, c'est les offres du Black Friday avec des super tarifs.
01:44Et pour une réduction supplémentaire, tu peux utiliser le code LABO des réseaux au moment du paiement.
01:50Et l'offre Unlimited, justement, elle intègre un nom de domaine gratuit et une adresse pro-mail pendant un an.
01:55Donc c'est parfait pour notre projet.
01:57Elle permet d'ailleurs de créer des sites de façon illimitée sur ton espace jusqu'à 50 Go de stockage.
02:04Mais surtout, cette offre Unlimited, elle me permet d'héberger des applications Node.js.
02:11Et ça, c'est indispensable pour notre projet.
02:14En tout cas, si je veux aller au-delà d'un site vitrine en HTML et qu'au contraire, je
02:19veux un site Internet
02:20qui intègre des actions et des commandes pour les clients et un tableau de bord pour l'administrateur.
02:26Donc, en choisissant l'offre Unlimited, je choisis ma durée d'engagement.
02:30Plus la durée est longue, plus les tarifs seront intéressants.
02:33Nous, sur cet exemple, on va partir sur 12 mois.
02:36Et juste ici, je peux réserver le domaine gratuit pour un an inclus dans l'offre.
02:42Et une fois que c'est fait, avant de passer au paiement, comme je te le disais, tu peux bénéficier
02:45d'une réduction supplémentaire
02:46en cliquant sur « Vous avez une promo » et en utilisant le code « Labo des réseaux ».
02:51Une fois le paiement validé, tu es redirigé vers l'assistant Hostinger.
02:56Mais dans ce cas, on ne va pas en avoir besoin puisque c'est Claude qui va gérer la création
03:01et la mise en ligne de notre site.
03:03Donc, je quitte l'assistant. Et par contre, une petite dernière chose avant de revenir sur Claude.
03:07Je vais aller dans le menu latéral, dans l'onglet « Nom de domaine ».
03:10Et là, je t'invite à activer le renouvellement automatique du domaine si tu ne veux pas le perdre après
03:16la première année.
03:17Un domaine, ça se renouvelle tous les ans. C'est le même principe chez tous les hébergeurs.
03:21Mais bon, ce qui est cool avec notre offre Unlimited, c'est qu'on a un domaine offert pendant un
03:26an.
03:26À noter aussi, au moment de la réservation de ton domaine, tu as dû recevoir un email de vérification.
03:31Pense à valider l'adresse associée à ton compte via cet email pour que ton domaine soit marqué comme actif.
03:38Une fois ton compte Hostinger et ton domaine activé, nous allons installer le plugin Hostinger sur Claude.
03:43Pour ça, très simple, tu te rends sur cette page. Je mettrai le lien en description de la vidéo.
03:47C'est la page officielle de Claude pour le plugin Hostinger.
03:50Tu y trouveras la commande pour installer le plugin.
03:52Ou si tu préfères, tu peux accéder à la page GitHub et copier le lien de cette page dans Claude.
03:57Moi, je vais simplement copier et coller la commande dans l'application Claude.
04:01Donc là, je suis sur l'application Claude et je vais basculer sur la partie Code.
04:05Et tout simplement, je colle la commande que je viens de copier.
04:08Le plugin comprend un connecteur MCP et des skills.
04:12Tous ont été installés.
04:14Par contre, il faut encore que je m'identifie via le connecteur pour autoriser Claude à accéder à Hostinger.
04:20Pour ça, je me rends dans le menu en bas à gauche.
04:22Dans les paramètres, je descends jusqu'à l'onglet Plugging et là, je retrouve dans la liste le plugin Hostinger.
04:29Alors toi, de ton côté, si tu ne le vois pas, je t'invite à quitter l'application et à
04:33la relancer.
04:33La mise à jour de la liste des plugins peut parfois avoir un peu de mal à se faire.
04:38Je clique sur le plugin et là à droite, j'aurai accès au connecteur.
04:42Je le sélectionne et je clique sur le bouton Connecter.
04:44Je suis redirigé vers une page d'authentification.
04:47J'autorise la connexion.
04:48C'est bon, ma connexion est établie, je peux retourner sur l'application Claude ou je vais cliquer sur Terminer.
04:54Claude a maintenant accès à mon compte Hostinger dans toutes les nouvelles sessions que je démarrerai.
04:59On démarre donc une nouvelle session et on va tout de suite vérifier si la connexion fonctionne.
05:03Peux-tu me dire quels sont les domaines présents sur mon compte Hostinger ?
05:07Super, j'ai la liste de mes domaines.
05:08On va pouvoir commencer à travailler sur notre site.
05:11Pour réussir notre projet, il va falloir élaborer et transmettre à Claude un cahier des charges précis.
05:16Que ce soit pour toi ou pour un client, la première question est simple.
05:20Est-ce que tu as besoin d'un site vitrine où le visiteur lit les informations qui concernent ton commerce
05:25ou ton activité
05:26ou d'un site où le visiteur commande, réserve ou achète ?
05:30Ça change tout et notamment le langage dans lequel le site sera codé.
05:33Un site vitrine peut se faire en HTML simple, rapide sur presque sans maintenance.
05:38Mais dès qu'il a des commandes, des réservations et un tableau de bord, il faudra une vraie application avec
05:43une base de données.
05:44Et c'est pour ça que pour l'exemple de Julien, on va demander à Claude de partir sur un
05:49langage node.js.
05:51Donc il faudra faire ce choix et tout le reste qui va avec.
05:55Le logo, les photos, le texte, les horaires, l'adresse, la carte.
05:59Si c'est pour un client, c'est lui qui doit te le fournir.
06:01Mais c'est aussi à toi de rassembler un maximum d'informations avant de démarrer le projet.
06:06Et d'ailleurs, je te conseille de créer un dossier sur ton bureau.
06:09Parce qu'on va travailler avec l'application Claude.
06:12Et c'est Claude qui va directement piocher dans l'ensemble de ses assets stockés dans le dossier.
06:18Et les utiliser pour la création de ton site internet.
06:21Une fois que tu as créé le dossier avec tes assets graphiques et tes photos,
06:25tu peux le donner à Claude en utilisant à droite de ta session, dans l'onglet environnement,
06:29choisir un dossier.
06:30Dans ce dossier, il y a toutes les photos de mon site.
06:33On y trouve le logo du café, une photo du propriétaire.
06:36D'ailleurs, au passage, n'hésite pas à retravailler les photos de ton client à l'aide, par exemple, d
06:40'un modèle IA.
06:41J'ai aussi des photos de produits, une photo de la carte.
06:44Bref, tout ce qu'il me faut pour mon site.
06:45A côté de ça, j'ai donc pris le temps d'élaborer avec Claude mon cahier des charges.
06:49Je ne te montre pas toute la conversation.
06:51Mais j'ai changé avec lui sur les besoins du client, ma vision du site,
06:54les fonctionnalités que je souhaitais, le langage le mieux adapté au site,
06:58vis-à-vis notamment de ses fonctionnalités, le contenu, les catégories, les photos à sa dispo.
07:03D'ailleurs, je t'invite plutôt à travailler ton cahier des charges dans la partie conversationnelle de Claude.
07:07Moi, c'est ce que j'ai fait ici.
07:09Et j'ai ensuite exporté ce cahier des charges pour l'importer dans ma session Claude Code.
07:14Ensuite, j'ai ajusté avec lui pour qu'il puisse me créer d'abord une version locale.
07:19Et après quelques instants, j'ai un premier résultat.
07:21J'ai les infos clés en home, mes différents espaces, le click and collect, les cours de barista, les événements.
07:27On a une V1 simple avec tous les éléments, mais les interactions, elles, ne fonctionnent pas encore.
07:32Il nous reste quand même pas mal de travail sur ce site.
07:34On va quand même déployer cette V1.
07:36Et Claude va utiliser le MCP Hostinger combiné au skill du plugin pour gérer ce déploiement.
07:42Il suffit simplement de lui demander, vas-y, déploie le site.
07:45Quelques instants plus tard, le site est en ligne.
07:47Tout s'est bien passé.
07:48J'ai aussi vérifié l'affichage sur mobile.
07:51Le résultat est parfait.
07:52On va donc continuer notre projet.
07:54On va faire le point d'ailleurs avec Claude pour voir ce qu'il manque par rapport à notre cahier
07:58des charges.
07:59Il faut notamment qu'on crée l'adresse mail associée à notre domaine.
08:01On va récupérer notre mail pro offert sur notre compte Hostinger.
08:05On va choisir contact.caféboussole.fr.
08:09Et donc, j'ai encore échangé un peu avec Claude.
08:11J'ai notamment mis en place une redirection mail pour que les emails arrivent à la fois dans la boîte
08:16Hostinger,
08:16mais aussi sur le Gmail de Julien.
08:19Il m'a aussi créé l'espace admin de mon site.
08:21Alors, parfois, Claude ne pourra pas faire toutes les actions tout seul,
08:25notamment les plus sensibles comme celles où il faut déterminer des mots de passe.
08:29Mais ne t'inquiète pas, dans ce cas-là, il explique toujours ce qu'il faut faire.
08:33Par exemple, pour paramétrer le mot de passe à l'accès admin,
08:36il m'a demandé d'ajouter des variables à la base de données depuis mon compte Hostinger.
08:41Et en suivant ces instructions, c'est très simple à mettre en place.
08:44Après quelques réglages et ajustements, j'ai ma V2 en ligne.
08:47J'ai maintenant un accès admin qui permettra à Julien de consulter les commandes passées en click and collect
08:53et aussi les réservations pour les cours de barista.
08:56Et il pourra aussi lui-même mettre à jour facilement le contenu du site.
09:00Par exemple, en ajoutant les derniers événements,
09:03en modifiant la liste des jeux de société disponibles dans sa boutique,
09:07modifier les produits, modifier le menu,
09:10choisir les horaires et disponibilités pour les cours de barista qu'il donne.
09:14Côté admin, il a vraiment tout ce qu'il faut pour gérer ce site.
09:17Et côté client, je peux maintenant passer une commande ou réserver une place
09:21dans une des sessions de cours barista disponibles.
09:24On va d'ailleurs faire un test en commandant en click and collect.
09:27Un expresso et deux donuts.
09:29Je peux choisir l'horaire à laquelle je souhaite chercher la commande.
09:33Je réserve.
09:34J'ai un message de confirmation qui s'affiche,
09:36avec même l'itinéraire Google Maps pour accéder au café.
09:39Et tu vois, si je clique sur le bouton...
09:41Bon, moi je suis en région parisienne, donc jusqu'à Nantes,
09:43je risque de mettre un peu de temps,
09:45mais en tout cas, ça marche très bien.
09:46J'ai même reçu un email dans ma boîte de réception qui confirme ma commande.
09:51Côté admin, Julien a aussi reçu un mail d'alerte lui indiquant qu'il y a une nouvelle commande.
09:56Comme je te l'ai dit, ça arrive dans sa boîte au Stinger,
09:59mais je lui ai aussi mis une redirection vers son Gmail.
10:01Et la nouvelle commande s'affiche aussi depuis son tableau de bord dans la partie admin du site.
10:08Voilà, le site de Julien est en ligne.
10:10Et en plus, il peut le faire vivre tout seul.
10:12Il y a une chose que je n'ai pas faite ici, mais qui peut s'ajouter facilement.
10:16C'est l'option de paiement en ligne via Stripe ou Paypal.
10:20On aurait pu notamment utiliser un moyen de paiement pour la partie click and collect au moment de la réservation,
10:25ou pour valider le booking pour une session de cours barista.
10:29Donc je te le disais, Claude peut se charger de ça très facilement.
10:32De ton côté, il te faudra par contre créer et paramétrer tes comptes Stripe ou Paypal
10:36pour pouvoir proposer le paiement sur ton site.
10:38Et si tu bloques sur le processus où tu ne sais pas trop par où commencer,
10:42ne t'inquiète pas, Claude peut te guider pas à pas.
10:45J'aurais pu aussi ajouter un petit espace boutique,
10:47avec quelques références de mug, du café en grain ou du merch.
10:51Une nuance quand même pour les vrais e-commerce avec beaucoup de références.
10:55Je partirais plutôt sur un outil fait pour ça,
10:57comme WordPress avec WooCommerce ou un Shopify.
11:00Les stocks, les variantes, les promotions, le mode de transport.
11:04Tous ces paramètres y sont déjà prévus, c'est plus facile à gérer.
11:08Mais pour les petits espaces boutiques d'une dizaine de produits,
11:11c'est tout à fait possible de coder ça avec Claude et ça reste très simple.
11:15Et l'ajout d'un moyen de paiement ou d'un espace boutique,
11:18ce n'est que des exemples selon ton projet ou celui de ton client.
11:22Tu peux enrichir le site avec un chatbot IA qui répond aux questions courantes,
11:26un agent IA qui prend lui-même les rendez-vous,
11:28une carte de fidélité en ligne, une newsletter pour annoncer les événements,
11:32l'affichage des avis Google sur le site ou même une version anglaise si tu accueilles des touristes.
11:37La méthode reste la même.
11:39Si tu as une idée, tu la soumets à Claude.
11:41Lui te donne la faisabilité, élabore et déploie ensuite via le plugin Hostinger.
11:46Donc comme je le disais au début, tout dépend de tes besoins ou de celui de tes clients.
11:50A toi de t'adapter et c'est justement l'intérêt de ce duo Claude-Hostinger.
11:55Tu as vraiment tout ce qu'il faut pour proposer une offre personnalisée et adaptée au client.
12:01Avant de finir, deux points rapides puisqu'un site en ligne, ça ne fait pas tout.
12:04Premier point, il faut penser au référencement.
12:07Il te reste à installer Google Analytics pour mesurer les visites.
12:11Il faut également que tu soumettes ton site via la Google Search Console
12:15Pour aider Google à le découvrir et l'indexer, il faudra créer la fiche d'établissement Google Business Profile.
12:23D'ailleurs, Google vérifie l'adresse souvent par courrier, donc ça peut prendre quelques jours.
12:28Ensuite, il faut un vrai travail sur le contenu.
12:30Je ne vais pas te faire un cours sur des techniques SEO,
12:33mais typiquement, il faut penser aux bonnes requêtes
12:35qui pourraient faire facilement apparaître ton site dans les résultats de recherche Google.
12:39Et il y a également la création de contenu via les réseaux sociaux qui peut aussi faire venir du monde.
12:44Le deuxième point, c'est penser à l'après.
12:47Si le site est pour toi, ne le laisse pas dormir.
12:49Mets-le à jour régulièrement en fonction des changements d'horaire,
12:53des événements qui arrivent, publie régulièrement.
12:55N'hésite pas à proposer une partie blog
12:57et garde toujours un oeil sur le renouvellement de ton hébergement.
13:01Ça serait dommage de perdre ton site par négligence.
13:04Si tu fais ça pour des clients, ne vends pas juste un site et au revoir.
13:07Propose plutôt un abonnement, l'hébergement, les mises à jour,
13:11pour la gestion au quotidien et autour des prestations à part,
13:15du contenu pour le référencement, les réseaux sociaux,
13:17des opérations de promotion et éventuellement de la publicité en ligne
13:21via Google AdWords ou via les réseaux sociaux.
13:23Et si tu te poses la question, combien facturer tout ça ?
13:26Ça dépendra de toi, de ton marché, du nombre de clients que tu vises.
13:30Mais quoi qu'il arrive, pense bien à prendre en compte tes frais,
13:32t'en investis et les impôts et taxes que tu devras payer sur ton CR.
13:37Que tu crées ton propre site ou celui d'un client,
13:39tout ce qu'on a vu dans cette vidéo est détaillé dans un PDF gratuit
13:43que je mets à ta disposition, le lien est en description de la vidéo.
13:47Et si tu souscris un abonnement au Stinger,
13:50n'oublie pas d'utiliser le code LABO DES RÉSEAUS
13:52pour bénéficier d'une réduction supplémentaire.
13:55Le lien pour accéder aux offres d'hébergement d'Austinger
13:58est disponible en description et commentaire épinglé.
14:01Merci et à bientôt sur le Labo des RÉSEAUS.