Cet outil vous permet de créer et de partager gratuitement des applications et des jeux Web. Voici comment!

Sommaire

Toggle

Résumé

• Claude peut générer du code de travail pour les applications Web et les jeux sans codage de connaissances.

• Les meilleures pratiques pour créer des applications avec l'IA incluent d'être spécifique sur les fonctionnalités souhaitées et de l'ajout d'une fonctionnalité à la fois.

• Partagez vos créations facilement avec vos amis, votre famille ou vos collègues à l'aide du bouton Publier.

​​​​​

Vous avez déjà souhaité pouvoir créer vos propres applications et jeux Web sans savoir comment coder? Eh bien, j'utilise Claude, un chatbot AI, pour créer des applications Web et des jeux entièrement fonctionnelles sans écrire moi-même une seule ligne de code. Voici les meilleures pratiques pour le faire vous-même!

Qu'est-ce que Claude et quel type d'applications pouvez-vous en créer?

Claude est un chatbot AI similaire à Chatgpt qui est extrêmement populaire parmi les codeurs et les développeurs. Maintenant, si vous avez déjà utilisé Chatgpt, vous savez probablement que ces modèles d'IA peuvent non seulement écrire vos e-mails et essais, mais aussi écrire du code. Mais si vous n'êtes pas programmeur ou quelqu'un qui peut lire le code, comment pouvez-vous savoir si le code qu'il écrit est bon ou non?

Eh bien, en voyant la popularité massive de Claude parmi les développeurs, j'ai décidé de le retirer pour un tour et de voir si je peux vraiment créer des applications ou des jeux en utilisant le chatbot. Pour le contexte, je ne suis pas programmeur, mais j'ai étudié C et HTML à l'université, il y a huit ans. Pour la plupart, je peux lire et comprendre le code, mais je n'ai pas les connaissances nécessaires pour écrire ou modifier le code.

Avec ce contexte, j'ai approché Claude pour créer du code qui fonctionne réellement – et il a fait un travail formidable. Il peut générer du code de travail en quelques secondes. Vous pouvez prévisualiser le code et voir comment il fonctionne correctement dans l'interface de chat sans avoir besoin de démarrer un programme de codage. Vous pouvez également partager ces applications que vous créez avec vos amis et votre famille en cliquant sur un bouton. Et surtout, vous pouvez faire tout cela en utilisant un compte gratuit.

Pour vous donner un avant-goût de ce qui est possible, j'ai créé les applications suivantes:

Si vous aimez ce que vous voyez, voici un bref aperçu de mes meilleures pratiques pour créer des jeux et des applications à l'aide de Claude.

Comment aborder le processus de création

Le processus commence simplement en demandant à Claude de créer une application ou un jeu. Prenons l'exemple de la création d'un jeu de serpent. Lorsque vous le demandez, Claude génère le code et l'affiche dans une nouvelle fenêtre appelée artefact, qui comprend à la fois le code et un aperçu où vous pouvez tester le jeu. Vous pouvez commencer par quelque chose d'aussi simple que:

Créez un jeu de serpent pour moi.

Et vous devriez obtenir une réponse comme ceci:

Bien que Claude obtienne souvent la fonctionnalité de base directement sur le premier essai, il y a généralement de la place à l'amélioration. Dans mon cas, la version initiale avait plusieurs limitations:

• Le serpent ne pouvait pas traverser les murs.

• Il n'y a eu aucun effet sonore.

• Le design était assez basique.

• Le mouvement était un peu lent.

Maintenant, passer de cette version de base à un produit final poli, peut être une entreprise frustrante qui peut vous donner l'impression de retirer vos cheveux. Cependant, si vous l'approchez sous un angle plus stratégique, vous pouvez le faire fonctionner, presque à chaque fois.

Étape 1: Sachez ce que vous voulez

La clé pour créer avec succès des applications avec l'IA est d'avoir une vision claire des fonctionnalités que vous souhaitez. Cependant, il est souvent difficile de connaître toutes vos exigences à l'avance. C'est pourquoi je recommande de commencer par une version de base, puis de faire une liste d'améliorations que vous aimeriez voir.

Dans mon cas, je demande d'abord à Claude de générer le jeu de serpent sans beaucoup d'informations pour voir ce qu'elle fait. Ensuite, je note les lacunes. Enfin, je rédige une liste de fonctionnalités que je veux dans la finale parfait produit. Pour référence, voici ma liste de fonctionnalités souhaitée:

• Capacité de passage mural pour le serpent.

• Effets sonores pour la collecte des fruits et le jeu.

• Améliorations visuelles comme un fond de texture de gazon.

• Animations plus lisses.

La clé est d'être spécifique sur chaque fonctionnalité. Au lieu d'écrire simplement des «meilleurs graphiques», spécifiez exactement les éléments visuels que vous souhaitez améliorer. Cela facilite la communication de vos besoins à l'IA.

Étape 2: Ajoutez une fonctionnalité à la fois

Une fois que vous avez une liste des fonctionnalités que vous souhaitez ajouter au produit final, ne les videz pas tous en même temps dans Claude. Cela submergera le chatbot et causera plus de problèmes. Au lieu de cela, adoptez l'approche de l'ajout d'une fonctionnalité à la fois. Une fois que vous voyez Claude a cloué cette fonctionnalité, vous pouvez passer à la suivante.

Étape 3: Copiez le code et continuez sur de nouveaux chats

Une limitation que vous rencontrerez est le capuchon de message de Claude, qui est basé sur la longueur totale de la conversation plutôt que sur le nombre de messages. Lorsque vous travaillez avec le code, vous atteignez probablement cette limite après seulement quelques échanges.

Heureusement, la solution est simple – vous avez juste besoin de copier le code d'un artefact de travail, de coller cela dans une nouvelle fenêtre de chat et de commencer à partir de là. Pour ce faire, appuyez simplement sur le bouton de copie de l'artefact. De cette façon, la durée totale de la conversation reste aussi compacte que possible, augmentant votre plafond de message total.

En dehors de cela, vous remarquerez parfois que Claude n'est pas en mesure de résoudre un problème ou de mettre correctement en œuvre une fonctionnalité, peu importe le nombre de fois où vous allez aller-retour avec. Ici aussi, la copie du code et l'emporter à une nouvelle conversation a tendance à résoudre le problème. Copiez simplement le code et demandez à Claude ce qu'il pense provoque le comportement indésirable, puis demandez-lui de le réparer. Fonctionne comme un charme!

Comment partager vos créations

Une fois que vous avez perfectionné votre application ou votre jeu, le partager est simple. Cliquez simplement sur le bouton «Publier» sur l'artefact pour générer une URL auquel tout le monde peut accéder – aucun compte Claude requis. Bien sûr, si la personne à laquelle vous l'envoyez a un compte Claude, elle peut utiliser la fonction «Remix Artifact» pour construire au-dessus de cette application ou du jeu que vous avez créé.

Il y a une alternative premium avec de meilleurs résultats

Comme nous utilisons la version gratuite de Claude, vous pensez peut-être que je suis sur le point de recommander la version payante de Claude comme alternative supérieure. Claude Pro vous offre une limite de messages plus élevée, permettant des conversations plus longues, ce qui peut vous aider à créer des applications plus complexes avec plus de lignes de code. Cependant, si vous recherchez des résultats plus rapides avec moins de va-et-vient, ChatGpt Pro avec le modèle O1 pourrait être intéressant.

Le modèle O1 combiné avec la fonctionnalité Canvas et la fonctionnalité d'aperçu vous donne les mêmes avantages que Claude à utiliser et à partager les applications Web et les jeux que vous créez avec. Cependant, O1 est un modèle de raisonnement, et il peut mieux comprendre ce que vous voulez avec moins d'itérations.

---

La possibilité de créer des applications Web et des jeux fonctionnels sans connaissance de codage change la donne pour les individus créatifs. Que vous soyez un enseignant souhaitant créer des jeux éducatifs, un créateur de contenu qui cherche à ajouter des éléments interactifs à votre site Web, ou simplement quelqu'un avec une idée d'application sympa, ces outils d'IA permettent de donner vie à votre vision.