Table des matières

• TL;DR
  • Avant que nous commencions
• Introduction
  • Appelle-moi peut-être
  • Construisons
• Partie 1
  • Configuration
    • Mise en place du projet
    • Configuration de la base de données
    • Variables d'environnement
    • Démarrez votre application
  • Générer des mèmes
    • Code côté serveur
    • Code côté client
• Conclusion

TL;DR

Dans ce didacticiel en deux parties, nous allons créer une application complète de générateur de mèmes instantanés en utilisant :

• React et NodeJS avec TypeScript
• API d'appel de fonctions d'OpenAI
• API de création de mèmes d'ImgFlip.com

Vous consultez une version déployée de l'application que nous allons créer ici : The Memerator

Si vous souhaitez simplement voir le code de l'application terminée, consultez le dépôt GitHub de Memerator.

Avant que nous commencions

Nous travaillons dur chez Wasp pour vous aider à créer des applications Web aussi facilement que possible, notamment en créant ces didacticiels, publiés chaque semaine !

Nous serions très reconnaissants si vous pouviez nous aider en mettant en vedette notre dépôt sur GitHub : https://www.github.com/wasp-lang/wasp 🙏

⭐️ Merci pour votre soutien 🙏

Introduction

Appelle-moi peut-être

Grâce à l'API de complétion de chat d'OpenAI, les développeurs peuvent désormais réaliser des choses vraiment intéressantes. Il active essentiellement la fonctionnalité ChatGPT, mais sous la forme d'une API appelable, vous pouvez l'intégrer dans n'importe quelle application.

Mais lorsqu’ils travaillaient avec l’API, de nombreux développeurs souhaitaient que GPT restitue les données dans un format, comme JSON, qu’ils pourraient utiliser dans les fonctions de leur application.

Malheureusement, si vous demandiez à ChatGPT de renvoyer les données dans un certain format, il ne répondrait pas toujours correctement. C'est pourquoi OpenAI a publié l'appel de fonction.

Comme ils le décrivent, l'appel de fonction permet aux développeurs de «… décrire des fonctions en GPT et de faire en sorte que le modèle choisisse intelligemment de générer un objet JSON contenant des arguments pour appeler ces fonctions».

C'est un excellent moyen de transformer le langage naturel en appel API.

Alors, quelle meilleure façon d'apprendre à utiliser la fonction d'appel de fonction de GPT que de l'utiliser pour appeler l'API de création de mèmes d'Imgflip.com !?

Construisons

Dans ce tutoriel en deux parties, nous allons créer une application React/NodeJS full-stack avec :

• Authentification
• Génération de mèmes via l'appel de fonction d'OpenAI et l'API d'ImgFlip.com
• Tâche cron quotidienne pour récupérer de nouveaux modèles de mèmes
• Modification et suppression de mèmes
• et plus!

J'ai déjà déployé une version fonctionnelle de cette application que vous pouvez essayer ici : https://damemerator.netlify.app — alors essayez-la et allons-y.

Dans la première partie de ce didacticiel, nous allons configurer l'application, générer et afficher des mèmes.

Dans la partie 2, nous ajouterons plus de fonctionnalités, telles que des tâches cron récurrentes pour récupérer plus de modèles de mèmes, et la possibilité de modifier et de supprimer des mèmes.

BTW, deux conseils rapides :

1. si vous avez besoin de référencer le code terminé de l'application à tout moment pour vous aider avec ce didacticiel, vous pouvez consulter le dépôt GitHub de l'application ici.
2. si vous avez des questions, n'hésitez pas à vous rendre sur le serveur Wasp Discord et à nous les poser !

Partie 1

Configuration

Nous allons en faire une application Web React/NodeJS complète, nous devons donc d'abord la configurer. Mais ne vous inquiétez pas, cela ne prendra pas longtemps du tout, car nous utiliserons Wasp comme framework.

Wasp fait tout le gros du travail pour nous. Vous verrez ce que je veux dire dans une seconde.

Configurez votre projet Wasp

Tout d’abord, installez Wasp en exécutant ceci dans votre terminal :

Ensuite, clonons lecommencerbranche de l'application Memerator que j'ai préparée pour vous :

Naviguez ensuite dans leMémérateurrépertoire et ouvrez le projet dans VS Code :

Vous remarquerez que Wasp configure votre application full-stack avec une structure de fichiers comme celle-ci :

Voyons lemain.guêpefichier en premier. Vous pouvez le considérer comme le « squelette » ou les instructions de votre application. Ce fichier configure la plupart de votre application full-stack pour vous 🤯 :