Comment créer une application Web avec ChatGPT

Comment créer une application Web avec ChatGPT
Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

L'une des plus grandes revendications du battage médiatique autour de ChatGPT est qu'il peut être un outil de programmation efficace. L'idée est la suivante : vous décrivez ce que vous voulez en langage naturel ; le chatbot génère du code qui fait exactement cela. Mais à quel point ChatGPT est-il vraiment bon pour faire cela ?





UTILISEZ LA VIDÉO DU JOUR FAITES DÉFILER POUR CONTINUER AVEC LE CONTENU

Quoi de mieux pour le savoir que de le tester ? Nous avons demandé à ChatGPT de créer une application Web simple à partir de zéro. Voici le résultat de notre test et les étapes que vous pouvez utiliser pour créer un site Web à partir de zéro en utilisant ChatGPT.





Étape 1 : Génération du Blueprint pour votre application Web

Tout comme vous le feriez lors de la création d'une application Web avec n'importe quel outil, vous devez définir le plan de ce à quoi vous voulez que votre application ressemble et les étapes dont vous aurez besoin pour la créer avant de laisser ChatGPT exécuter le spectacle.





mise en miroir d'écran via usb vers tv

Pour notre première tâche, nous avons demandé à ChatGPT de développer un plan pour une application de chat simple. Pour ce faire, nous avons décrit les exigences de notre application Web, puis avons demandé au chatbot de détailler un plan de développement de l'application.

  Invite ChatGPT pour développer un plan pour l'application Web

Après avoir utilisé l'invite ci-dessus, voici le résultat obtenu :



  Organigramme ou plan d'application Web développé par chatgpt

Vous devez avoir le plugin 'Show Me' activé sur votre compte ChatGPT pour générer un organigramme comme le nôtre ci-dessus. Tu peux installer et utiliser les plug-ins ChatGPT en quelques étapes seulement, même si vous aurez besoin d'un abonnement premium.

comment définir un gif comme arrière-plan

Sans le plugin, vous obtiendrez un plan basé sur du texte ou un organigramme ASCII-art. C'est toujours bien. Même sans le plugin, ChatGPT devrait toujours fournir un plan clair de l'application comme dans l'exemple ci-dessous.





  répartition textuelle de l'application Web par ChatGPT

Étape 2 : Diviser le Blueprint en modules plus petits

Maintenant que nous avons une vue d'ensemble, nous avons demandé à ChatGPT de nous aider à diviser l'application en composants plus petits que nous pouvons développer séparément, puis intégrer pour former l'application Web complète. ChatGPT a suggéré de le diviser en trois composants :

  1. Module d'inscription
  2. Module de connexion
  3. Module de discussion

Nous avions d'autres idées, mais le but ici est de laisser ChatGPT décider.





1. Construire le composant d'enregistrement

Nous avons sauté directement dans la construction du composant d'enregistrement. Nous avons demandé à ChatGPT de dessiner un algorithme approprié. Ici, nous sommes intervenus en précisant que nous n'avions besoin que du nom d'utilisateur, de l'e-mail et de l'avatar de l'utilisateur pour l'enregistrement. Voici l'invite :

  Invite pour la création du composant d'enregistrement

Et voici le résultat :

  Algorithme pour l'enregistrement des utilisateurs

Ensuite, nous avons invité ChatGPT à créer le composant d'enregistrement.

  invite à générer le composant d'enregistrement

Bien que nous n'ayons pas inclus le champ du mot de passe dans le cadre du processus d'inscription, ChatGPT a fait le bon choix en l'incluant dans le code HTML généré. Nous avons copié le code sans aucune modification, et voici à quoi il ressemble sur un navigateur.

  Page d'inscription générée par ChatGPT

Ensuite, nous avons invité ChatGPT à générer le script d'enregistrement PHP. Au début, nous avons demandé 'Écrivez un code PHP pour la logique côté serveur pour gérer la soumission du formulaire'. Bien que le script généré ait bien fonctionné, il présentait de nombreuses vulnérabilités.

Il n'y avait pas de hachage de mot de passe, pas de gestion des erreurs et était sujet à l'injection SQL - ChatGPT ne faisait que le strict minimum. Réparer cela a été relativement facile. Nous avons simplement demandé à ChatGPT 'd'identifier tout ce qui ne va pas avec le code que vous venez de générer, puis d'utiliser les points identifiés pour optimiser le code'. Avec cela, notre script d'enregistrement PHP était prêt à fonctionner.

meilleures applications de textos pour tablettes Android