{"id":67245,"date":"2023-03-16T08:17:35","date_gmt":"2023-03-16T07:17:35","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=67245&#038;preview=true&#038;preview_id=67245"},"modified":"2023-10-25T09:23:39","modified_gmt":"2023-10-25T08:23:39","slug":"clone-application-chatgpt","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/","title":{"rendered":"Comment construire et d\u00e9ployer une application clone de ChatGPT avec React et l&rsquo;API OpenAI"},"content":{"rendered":"<p>Alors que l&rsquo;utilisation des chatbots et des assistants virtuels ne cesse de cro\u00eetre, de nombreuses entreprises et d\u00e9veloppeurs cherchent \u00e0 cr\u00e9er leurs propres chatbots dot\u00e9s d&rsquo;une IA. ChatGPT est l&rsquo;un de ces chatbots, cr\u00e9\u00e9 par OpenAI, qui est capable d&rsquo;engager des conversations de type humain et de r\u00e9pondre \u00e0 un large \u00e9ventail de questions.<\/p>\n<h2>Ce que vous allez construire<\/h2>\n<p>Dans ce tutoriel, vous apprendrez \u00e0 construire une application clone de ChatGPT en utilisant <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-react-js\/\">React<\/a> et l&rsquo;API OpenAI. Si vous voulez vous essayer \u00e0 un projet amusant et engageant pendant le week-end, c&rsquo;est une excellente occasion de vous plonger dans React et OpenAI.<\/p>\n<p>Vous apprendrez \u00e9galement \u00e0 d\u00e9ployer directement votre d\u00e9p\u00f4t GitHub sur la plateforme d&rsquo;<a href=\"https:\/\/sevalla.com\/application-hosting\/\">h\u00e9bergement d&rsquo;applications de Kinsta<\/a>, qui fournit un domaine <em>.kinsta.app<\/em> gratuit pour que votre projet soit mis en ligne rapidement. Et gr\u00e2ce \u00e0 l&rsquo;essai gratuit de Kinsta et au <a href=\"https:\/\/sevalla.com\/pricing\/\">niveau Hobby<\/a>, vous pouvez facilement d\u00e9marrer sans frais.<\/p>\n<p>Voici une d\u00e9monstration en direct de l&rsquo;<a href=\"https:\/\/chatgpt-clone-g9q10.kinsta.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">application clone ChatGPT<\/a>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/chatgpt-clone-application.jpg\" alt=\"Application clone de ChatGPT\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Application clone de ChatGPT<\/figcaption><\/figure>\n<p>Si vous souhaitez examiner ce projet de plus pr\u00e8s, vous pouvez acc\u00e9der \u00e0 son <a href=\"https:\/\/github.com\/kinsta\/chatgpt-clone\" target=\"_blank\" rel=\"noopener noreferrer\">d\u00e9p\u00f4t GitHub<\/a>.<\/p>\n<p>Alternativement, en utilisant ce mod\u00e8le de <a href=\"https:\/\/github.com\/olawanlejoel\/chatgpt-clone-starter\">projet de d\u00e9marrage<\/a>, vous pouvez s\u00e9lectionner <strong>Utiliser ce mod\u00e8le<\/strong> &gt; <strong>Cr\u00e9er un nouveau d\u00e9p\u00f4t<\/strong> &#8211; cela copiera le code de d\u00e9marrage dans un nouveau d\u00e9p\u00f4t. Ce projet de d\u00e9marrage est livr\u00e9 avec des \u00e9l\u00e9ments fondamentaux tels que les styles, le lien CDN Font Awesome, le <a href=\"https:\/\/www.npmjs.com\/package\/openai\">paquet OpenAi<\/a> et la structure de base pour vous aider \u00e0 d\u00e9marrer.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Le cr\u00e9dit gratuit pour l&rsquo;utilisation de l&rsquo;API d&rsquo;OpenAI est limit\u00e9 \u00e0 18 $. Si vous testez <a href=\"https:\/\/chatgpt-clone-g9q10.kinsta.app\/\">cette application de d\u00e9monstration<\/a> et qu&rsquo;elle se stoppe, cela signifie que le cr\u00e9dit a peut-\u00eatre \u00e9t\u00e9 utilis\u00e9. Pour continuer \u00e0 utiliser l&rsquo;API OpenAI, vous devrez mettre \u00e0 niveau votre plan.<\/p>\n<\/aside>\n\n<h3>Exigences\/Pr\u00e9requis<\/h3>\n<p>Ce tutoriel est con\u00e7u pour \u00eatre une exp\u00e9rience de \u00ab suivi \u00bb. Par cons\u00e9quent, il est recommand\u00e9 que vous disposiez des \u00e9l\u00e9ments suivants pour coder facilement :<\/p>\n<ul>\n<li>Une compr\u00e9hension fondamentale du <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-le-html\/\">HTML<\/a>, du <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-pratiques-css\/\">CSS<\/a> et du <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a><\/li>\n<li>Une certaine familiarit\u00e9 avec <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-react-js\/\">React<\/a><\/li>\n<li>Node.js et npm (<a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-npm\/\">Node Package Manager<\/a>) ou yarn install\u00e9s sur votre ordinateur<\/li>\n<\/ul>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Qu&rsquo;est-ce que l&rsquo;API OpenAI ?<\/h2>\n<p>L&rsquo;<a href=\"https:\/\/platform.openai.com\/overview\" target=\"_blank\" rel=\"noopener noreferrer\">API OpenAI<\/a> est une plateforme bas\u00e9e sur le cloud qui permet aux d\u00e9veloppeurs d&rsquo;acc\u00e9der aux mod\u00e8les de langage d&rsquo;OpenAI, tels que GPT-3, via une API. Elle permet aux d\u00e9veloppeurs d&rsquo;ajouter \u00e0 leurs applications des fonctions de traitement du langage naturel telles que la compl\u00e9tion de texte, l&rsquo;analyse des sentiments, le r\u00e9sum\u00e9 et la traduction, sans avoir \u00e0 d\u00e9velopper et \u00e0 entra\u00eener leurs mod\u00e8les.<\/p>\n<p>Pour utiliser l&rsquo;API OpenAI, les d\u00e9veloppeurs doivent cr\u00e9er un compte sur le <a href=\"https:\/\/openai.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">site web d&rsquo;OpenAI<\/a> et obtenir une cl\u00e9 API. La cl\u00e9 API est utilis\u00e9e pour authentifier les demandes d&rsquo;API et suivre l&rsquo;utilisation.<\/p>\n<p>Une fois la cl\u00e9 API obtenue, les d\u00e9veloppeurs peuvent utiliser l&rsquo;API pour soumettre du texte au mod\u00e8le linguistique et recevoir des r\u00e9ponses.<\/p>\n\n<h2>Pourquoi React ?<\/h2>\n<p>React est une <a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheques-javascript\/\">biblioth\u00e8que JavaScript populaire<\/a> pour la construction d&rsquo;interfaces utilisateur. Selon l&rsquo;<a href=\"https:\/\/survey.stackoverflow.co\/2022\/#section-most-popular-technologies-web-frameworks-and-technologies\" target=\"_blank\" rel=\"noopener noreferrer\">enqu\u00eate Stack Overflow de 2022 aupr\u00e8s des d\u00e9veloppeurs<\/a>, elle est la deuxi\u00e8me technologie web la plus utilis\u00e9e, avec 42,62 % des parts de march\u00e9.<\/p>\n<p>React permet aux d\u00e9veloppeurs de cr\u00e9er des composants d\u00e9claratifs repr\u00e9sentant diff\u00e9rentes parties de l&rsquo;interface utilisateur. Ces composants sont d\u00e9finis \u00e0 l&rsquo;aide d&rsquo;une syntaxe appel\u00e9e JSX, qui est une combinaison de JavaScript et de HTML.<\/p>\n<p>Gr\u00e2ce \u00e0 son large <a href=\"https:\/\/kinsta.com\/fr\/blog\/bibliotheque-composants-react-ui\/\">\u00e9cosyst\u00e8me de biblioth\u00e8ques de composants et de kits<\/a>, les d\u00e9veloppeurs peuvent facilement travailler avec et int\u00e9grer des API telles que l&rsquo;API OpenAI, pour construire des interfaces de discussion complexes et c&rsquo;est ce qui en fait un excellent choix pour construire une application clone de ChatGPT.<\/p>\n<h3>Comment configurer votre environnement de d\u00e9veloppement React<\/h3>\n<p>La meilleure fa\u00e7on d&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/installer-react\/\">installer React<\/a> ou de cr\u00e9er un projet React est de l&rsquo;installer avec <a href=\"https:\/\/reactjs.org\/docs\/create-a-new-react-app.html#create-react-app\" target=\"_blank\" rel=\"noopener noreferrer\">create-react-app<\/a>. Une condition pr\u00e9alable est d <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-installer-node-js\/\">&lsquo;avoir Node.js install\u00e9 sur votre machine<\/a>. Pour confirmer que Node est install\u00e9, ex\u00e9cutez la commande suivante dans votre terminal.<\/p>\n<pre><code class=\"language-bash\">node -v<\/code><\/pre>\n<p>Si une version appara\u00eet, c&rsquo;est qu&rsquo;elle existe. Pour utiliser <a href=\"https:\/\/github.com\/npm\/npm\/releases\/tag\/v5.2.0\" target=\"_blank\" rel=\"noopener noreferrer\">npx<\/a>, vous devez vous assurer que votre version de Node n&rsquo;est pas inf\u00e9rieure \u00e0 v14.0.0, et que votre version de NPM n&rsquo;est pas inf\u00e9rieure \u00e0 v5.6 ; sinon, vous devrez la mettre \u00e0 jour en lan\u00e7ant <code>npm update -g<\/code>. Une fois que vous avez compris ce qu&rsquo;est npm, vous pouvez maintenant mettre en place un projet React en ex\u00e9cutant la commande ci-dessous :<\/p>\n<pre><code class=\"language-bash\">npx create-react-app chatgpt-clone<\/code><\/pre>\n<p><strong>Note :<\/strong> \u00ab chatgpt-clone \u00bb est le nom de l&rsquo;application que nous cr\u00e9ons, mais vous pouvez le changer pour n&rsquo;importe quel nom de votre choix.<\/p>\n<p>Le processus d&rsquo;installation peut prendre quelques minutes. Une fois l&rsquo;installation termin\u00e9e, vous pouvez vous rendre dans le r\u00e9pertoire et installer le paquet Node.js OpenAI, qui permet d&rsquo;acc\u00e9der facilement \u00e0 l&rsquo;API OpenAI \u00e0 partir de Node.js en utilisant la commande ci-dessous :<\/p>\n<pre><code class=\"language-bash\">npm install openai<\/code><\/pre>\n<p>Vous pouvez maintenant lancer <code>npm start<\/code> pour voir votre application en direct sur <strong>localhost:3000<\/strong>.<\/p>\n<p>Lorsqu&rsquo;un projet React est cr\u00e9\u00e9 \u00e0 l&rsquo;aide de la commande <code>create-react-app<\/code>, une structure de dossiers est automatiquement mise en place. Le principal dossier qui vous concerne est le dossier <code>src<\/code>, dans lequel le d\u00e9veloppement a lieu. Ce dossier contient de nombreux fichiers par d\u00e9faut, mais seuls les fichiers <strong>App.js<\/strong>, <strong>index.js<\/strong> et <strong>index.css<\/strong> devraient vous int\u00e9resser.<\/p>\n<ol>\n<li><strong>App.js<\/strong> : Le fichier <strong>App.js<\/strong> est le composant principal d&rsquo;une application React. Il repr\u00e9sente g\u00e9n\u00e9ralement le composant de haut niveau qui rend tous les autres composants de l&rsquo;application.<\/li>\n<li><strong>index.js <\/strong>: Ce fichier est le point d&rsquo;entr\u00e9e de votre application React. C&rsquo;est le premier fichier charg\u00e9 \u00e0 l&rsquo;ouverture de l&rsquo;application et il est responsable du rendu du composant <strong>App.js<\/strong> dans le navigateur.<\/li>\n<li><strong>index.css <\/strong>: Ce fichier est responsable de la d\u00e9finition du style g\u00e9n\u00e9ral et de la mise en page de votre application React.<\/li>\n<\/ol>\n<h2>Comment construire un clone de ChatGPT avec React et l&rsquo;API OpenAI<\/h2>\n<p>L&rsquo;application clone de ChatGPT sera constitu\u00e9e de deux composants afin de rendre l&rsquo;application plus facile \u00e0 comprendre et \u00e0 maintenir. Ces deux composants sont :<\/p>\n<ol>\n<li><strong>Form Section <\/strong>: Ce composant comprend une zone de texte et un bouton pour que les utilisateurs puissent interagir avec le chatbot.<\/li>\n<li><strong>Answer Section <\/strong>: Les questions et les r\u00e9ponses correspondantes seront stock\u00e9es dans un tableau et affich\u00e9es dans cette section. Vous ferez d\u00e9filer le tableau chronologiquement, en affichant d&rsquo;abord les plus r\u00e9centes.<\/li>\n<\/ol>\n<h3>Configuration de l&rsquo;application clone ChatGPT<\/h3>\n<p>Dans ce tutoriel, nous allons commencer par construire l&rsquo;interface de l&rsquo;application, puis vous pourrez impl\u00e9menter des fonctionnalit\u00e9s pour que votre application interagisse avec l&rsquo;API OpenAI. Commencez par cr\u00e9er les deux composants que vous utiliserez dans ce tutoriel. Pour une bonne organisation, vous cr\u00e9erez un dossier <strong>components<\/strong> dans le dossier <strong>src<\/strong> o\u00f9 tous les composants seront stock\u00e9s.<\/p>\n<h4>Le composant Form Section<\/h4>\n<p>Il s&rsquo;agit d&rsquo;un formulaire simple compos\u00e9 d&rsquo;un <code>textarea<\/code> et d&rsquo;un <code>button<\/code>.<\/p>\n<pre><code class=\"language-jsx\">\n\/\/ components\/FormSection.jsx\n\nconst FormSection = () =&gt; {\n\n    return (\n        &lt;div className=\"form-section\"&gt;\n            &lt;textarea\n                rows=\"5\"\n                className=\"form-control\"\n                placeholder=\"Ask me anything...\"\n            &gt;&lt;\/textarea&gt;\n            &lt;button className=\"btn\"&gt;\n                Generate Response \ud83e\udd16\n            &lt;\/button&gt;\n        &lt;\/div&gt;\n    )\n}\n\nexport default FormSection;<\/code><\/pre>\n<p>Voici \u00e0 quoi devrait ressembler le formulaire lorsque vous l&rsquo;importerez dans votre fichier <strong>App.js<\/strong>:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/form-section-component.jpg\" alt=\"Composant de section de formulaire\" width=\"1600\" height=\"360\"><figcaption class=\"wp-caption-text\">Composant de section de formulaire<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Ce tutoriel se concentre davantage sur la construction et le d\u00e9ploiement de votre application. Vous pouvez donc copier les styles du fichier <a href=\"https:\/\/github.com\/kinsta\/chatgpt-clone\/blob\/main\/src\/index.css\" target=\"_blank\" rel=\"noopener noreferrer\">src\/index.css<\/a> dans votre propre projet pour obtenir le m\u00eame r\u00e9sultat\/application.<\/p>\n<\/aside>\n\n<h4>Le composant Answer Section<\/h4>\n<p>Cette section est l&rsquo;endroit o\u00f9 toutes les questions et les r\u00e9ponses seront affich\u00e9es. Voici \u00e0 quoi ressemblera cette section lorsque vous l&rsquo;importerez dans votre fichier <strong>App.js<\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/answer-section-component.jpg\" alt=\"Composant de la section Answer\" width=\"1600\" height=\"347\"><figcaption class=\"wp-caption-text\">Composant de la section Answer<\/figcaption><\/figure>\n<p>Vous r\u00e9cup\u00e9rerez ces questions et ces r\u00e9ponses dans un tableau et une boucle pour rendre votre code plus facile \u00e0 lire et \u00e0 maintenir.<\/p>\n<pre><code class=\"language-jsx\">\/\/ components\/AnswerSection.jsx\n\nconst AnswerSection = () =&gt; {\n    return (\n        &lt;&gt;\n            &lt;hr className=\"hr-line\" \/&gt;\n            &lt;div className=\"answer-container\"&gt;\n                &lt;div className=\"answer-section\"&gt;\n                    &lt;p className=\"question\"&gt;Who is the founder of OpenAi?&lt;\/p&gt;\n                    &lt;p className=\"answer\"&gt;OpenAI was founded in December 2015 by Elon Musk, Sam Altman, Greg Brockman, Ilya Sutskever, Wojciech Zaremba, and John Schulman.&lt;\/p&gt;\n                    &lt;div className=\"copy-icon\"&gt;\n                        &lt;i className=\"fa-solid fa-copy\"&gt;&lt;\/i&gt;\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/&gt;\n    )\n}\n\nexport default AnswerSection;<\/code><\/pre>\n<h4>La page d&rsquo;accueil<\/h4>\n<p>Vous avez maintenant cr\u00e9\u00e9 les deux composants, mais rien n&rsquo;appara\u00eetra lorsque vous lancerez votre application car vous devez les importer dans votre fichier <strong>App.js<\/strong>. Pour cette application, vous n&rsquo;impl\u00e9menterez aucune forme de routage, ce qui signifie que le fichier <strong>App.js<\/strong> servira de composant\/page d&rsquo;accueil de votre application.<\/p>\n<p>Vous pouvez ajouter du contenu, comme le titre et la description de votre application, avant d&rsquo;importer les composants.<\/p>\n<pre><code class=\"language-jsx\">\/\/ App.js\n\nimport FormSection from '.\/components\/FormSection';\nimport AnswerSection from '.\/components\/AnswerSection';\n\nconst App = () =&gt; {\n    return (\n        &lt;div&gt;\n            &lt;div className=\"header-section\"&gt;\n                &lt;h1&gt;ChatGPT CLONE \ud83e\udd16&lt;\/h1&gt;\n                &lt;p&gt;\n                    I am an automated question and answer system, designed to assist you\n                    in finding relevant information. You are welcome to ask me any queries\n                    you may have, and I will do my utmost to offer you a reliable\n                    response. Kindly keep in mind that I am a machine and operate solely\n                    based on programmed algorithms.\n                &lt;\/p&gt;\n            &lt;\/div&gt;\n\n            &lt;FormSection \/&gt;\n            &lt;AnswerSection \/&gt;\n        &lt;\/div&gt;\n    );\n};\n\nexport default App;<\/code><\/pre>\n<p>Dans le code ci-dessus, les deux composants sont import\u00e9s et ajout\u00e9s \u00e0 l&rsquo;application. Lorsque vous ex\u00e9cutez votre application, voici \u00e0 quoi elle ressemblera :<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/chatgpt-clone-application-1.jpg\" alt=\"Application clone compl\u00e8te de ChatGPT\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Application clone compl\u00e8te de ChatGPT<\/figcaption><\/figure>\n<h3>Ajout de fonctionnalit\u00e9s et int\u00e9gration de l&rsquo;API OpenAI<\/h3>\n<p>Vous avez maintenant l&rsquo;interface utilisateur de votre application. L&rsquo;\u00e9tape suivante consiste \u00e0 rendre l&rsquo;application fonctionnelle afin qu&rsquo;elle puisse interagir avec l&rsquo;API OpenAI et obtenir des r\u00e9ponses. Tout d&rsquo;abord, vous devez r\u00e9cup\u00e9rer la valeur de votre formulaire lorsqu&rsquo;il est soumis, car elle sera utilis\u00e9e pour interroger l&rsquo;API OpenAI.<\/p>\n<h4>Obtenir des donn\u00e9es \u00e0 partir d&rsquo;un formulaire<\/h4>\n<p>Dans React, la meilleure fa\u00e7on de stocker et de mettre \u00e0 jour des donn\u00e9es est d&rsquo;utiliser des \u00e9tats. Dans les composants fonctionnels, le crochet <code>useState()<\/code> est utilis\u00e9 pour travailler avec les \u00e9tats. Vous pouvez cr\u00e9er un \u00e9tat, lui assigner la valeur de votre formulaire et le mettre \u00e0 jour lorsque sa valeur change. Commen\u00e7ons par importer le crochet <code>useState()<\/code> dans le composant <strong>FormSection.jsx<\/strong>, puis cr\u00e9ons un \u00e9tat pour stocker et mettre \u00e0 jour <code>newQuestions<\/code>.<\/p>\n<pre><code class=\"language-jsx\">\/\/ components\/FormSection.jsx\n\nimport { useState } from 'react';\n\nconst FormSection = ({ generateResponse }) =&gt; {\n    const [newQuestion, setNewQuestion] = useState('');\n\n    return (\n        \/\/ Form to submit a new question\n    )\n}\n\nexport default FormSection;<\/code><\/pre>\n<p>Ensuite, vous pouvez assigner la valeur du champ <code>textarea<\/code> \u00e0 l&rsquo;\u00e9tat et cr\u00e9er un \u00e9v\u00e9nement <code>onChange()<\/code> pour mettre \u00e0 jour l&rsquo;\u00e9tat chaque fois que la valeur de l&rsquo;entr\u00e9e change :<\/p>\n<pre><code class=\"language-html\">&lt;textarea\n    rows=\"5\"\n    className=\"form-control\"\n    placeholder=\"Ask me anything...\"\n    value={newQuestion}\n    onChange={(e) =&gt; setNewQuestion(e.target.value)}\n&gt;&lt;\/textarea&gt;<\/code><\/pre>\n<p>Enfin, vous pouvez cr\u00e9er un \u00e9v\u00e8nement <code>onClick()<\/code> pour charger une fonction chaque fois que vous cliquez sur le bouton d&rsquo;envoi. Cette m\u00e9thode sera cr\u00e9\u00e9e dans le fichier <strong>App.js<\/strong> et transmise en tant qu&rsquo;accessoire au composant <strong>FormSection.jsx<\/strong> avec les valeurs <code>newQuestion<\/code> et <code>setNewQuestion<\/code> comme arguments.<\/p>\n<pre><code class=\"language-html\">&lt;button className=\"btn\" onClick={() =&gt; generateResponse(newQuestion, setNewQuestion)}&gt;\n    Generate Response \ud83e\udd16\n&lt;\/button&gt;<\/code><\/pre>\n<p>Vous avez maintenant cr\u00e9\u00e9 un \u00e9tat pour stocker et mettre \u00e0 jour la valeur du formulaire, ajout\u00e9 une m\u00e9thode qui est transmise en tant qu&rsquo;accessoire depuis le fichier <strong>App.js<\/strong> et g\u00e9r\u00e9 l&rsquo;\u00e9v\u00e9nement de clic. Voici \u00e0 quoi ressemblera le code final :<\/p>\n<pre><code class=\"language-jsx\">\/\/ components\/FormSection.jsx\n\nimport { useState } from 'react';\n\nconst FormSection = ({ generateResponse }) =&gt; {\n    const [newQuestion, setNewQuestion] = useState('');\n\n    return (\n        &lt;div className=\"form-section\"&gt;\n            &lt;textarea\n                rows=\"5\"\n                className=\"form-control\"\n                placeholder=\"Ask me anything...\"\n                value={newQuestion}\n                onChange={(e) =&gt; setNewQuestion(e.target.value)}\n            &gt;&lt;\/textarea&gt;\n            &lt;button className=\"btn\" onClick={() =&gt; generateResponse(newQuestion, setNewQuestion)}&gt;\n                Generate Response \ud83e\udd16\n            &lt;\/button&gt;\n        &lt;\/div&gt;\n    )\n}\n\nexport default FormSection;<\/code><\/pre>\n<p>La prochaine \u00e9tape consistera \u00e0 cr\u00e9er une m\u00e9thode dans le fichier <strong>App.js<\/strong> pour g\u00e9rer l&rsquo;ensemble du processus d&rsquo;interaction avec l&rsquo;API OpenAI.<\/p>\n<h4>Interagir avec l&rsquo;API OpenAI<\/h4>\n<p>Pour interagir avec l&rsquo;API OpenAI et obtenir des cl\u00e9s d&rsquo;API dans une application React, vous devez cr\u00e9er un compte API OpenAI. Vous pouvez cr\u00e9er un compte sur le site web d&rsquo;OpenAI \u00e0 l&rsquo;aide de votre compte Google ou de votre adresse e-mail. Pour g\u00e9n\u00e9rer une cl\u00e9 d&rsquo;API, cliquez sur <strong>Personal<\/strong> dans le coin sup\u00e9rieur droit du site web ; certaines options appara\u00eetront ; cliquez sur <strong>View API Keys<\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/view-openai-api-keys.jpg\" alt=\"Acc\u00e9dez aux cl\u00e9s API de l'OpenAI.\" width=\"1600\" height=\"977\"><figcaption class=\"wp-caption-text\">Acc\u00e9dez aux cl\u00e9s API de l&rsquo;OpenAI.<\/figcaption><\/figure>\n<p>Cliquez sur le bouton <strong>Create new secret key<\/strong>, copiez la cl\u00e9 \u00e0 l&rsquo;endroit o\u00f9 vous l&rsquo;utiliserez dans cette application pour interagir avec OpenAI. Vous pouvez maintenant proc\u00e9der \u00e0 l&rsquo;initialisation d&rsquo;OpenAI en important le paquet openai (que vous avez d\u00e9j\u00e0 install\u00e9) avec la m\u00e9thode de configuration. Cr\u00e9ez ensuite une configuration avec votre cl\u00e9 g\u00e9n\u00e9r\u00e9e et utilisez-la pour initialiser OpenAI.<\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/App.js\n\nimport { Configuration, OpenAIApi } from 'openai';\n\nimport FormSection from '.\/components\/FormSection';\nimport AnswerSection from '.\/components\/AnswerSection';\n\nconst App = () =&gt; {\n    const configuration = new Configuration({\n        apiKey: process.env.REACT_APP_OPENAI_API_KEY,\n    });\n\n    const openai = new OpenAIApi(configuration);\n\n    return (\n        \/\/ Render FormSection and AnswerSection\n    );\n};\n\nexport default App;<\/code><\/pre>\n<p>Dans le code ci-dessus, la cl\u00e9 de l&rsquo;API OpenAI est stock\u00e9e en tant que <a href=\"https:\/\/kinsta.com\/fr\/blog\/variables-environnement\/\">variable d&rsquo;environnement<\/a> dans le fichier <strong>.env<\/strong>. Vous pouvez cr\u00e9er un fichier <strong>.env<\/strong> dans le dossier racine de votre application et stocker la cl\u00e9 dans la variable <code>REACT_APP_OPENAI_API_KEY<\/code>.<\/p>\n<pre><code>\/\/ .env\nREACT_APP_OPENAI_API_KEY = sk-xxxxxxxxxx\u2026<\/code><\/pre>\n<p>Vous pouvez maintenant cr\u00e9er la m\u00e9thode <code>generateResponse<\/code> dans le fichier <strong>App.js<\/strong>, et passer les deux param\u00e8tres attendus du formulaire que vous avez d\u00e9j\u00e0 cr\u00e9\u00e9 pour g\u00e9rer la demande et obtenir la r\u00e9ponse de l&rsquo;API.<\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/App.js\n\nimport FormSection from '.\/components\/FormSection';\nimport AnswerSection from '.\/components\/AnswerSection';\n\nconst App = () =&gt; {\n    const generateResponse = (newQuestion, setNewQuestion) =&gt; {\n        \/\/ Set up OpenAI API and handle response\n    };\n\n    return (\n        \/\/ Render FormSection and AnswerSection\n    );\n};\n\nexport default App;<\/code><\/pre>\n<p>Vous pouvez maintenant envoyer une requ\u00eate \u00e0 l&rsquo;API OpenAI. L&rsquo;API OpenAI peut effectuer de nombreuses op\u00e9rations, telles que les questions et r\u00e9ponses (Q&#038;R), la correction grammaticale, la traduction et bien d&rsquo;autres encore. Pour chacune de ces op\u00e9rations, les options sont diff\u00e9rentes. Par exemple, la valeur du moteur pour Q&#038;A est <code>text-davinci-00<\/code>, tandis que pour SQL translate, elle est <code>code-davinci-002<\/code>. N&rsquo;h\u00e9sitez pas \u00e0 consulter la <a href=\"https:\/\/platform.openai.com\/examples\" target=\"_blank\" rel=\"noopener noreferrer\">documentation des exemples OpenAI<\/a> pour conna\u00eetre les diff\u00e9rents exemples et leurs options.<\/p>\n<p>Pour ce tutoriel, nous ne travaillons qu&rsquo;avec <a href=\"https:\/\/platform.openai.com\/examples\/default-qa\" target=\"_blank\" rel=\"noopener noreferrer\">Q&#038;A,<\/a> voici \u00e0 quoi ressemble l&rsquo;option :<\/p>\n<pre><code class=\"language-json\">{\n  model: \"text-davinci-003\",\n  prompt: \"Who is Obama?\",\n  temperature: 0,\n  max_tokens: 100,\n  top_p: 1,\n  frequency_penalty: 0.0,\n  presence_penalty: 0.0,\n  stop: [\"\"],\n}<\/code><\/pre>\n<p><strong>Note :<\/strong> J&rsquo;ai chang\u00e9 la valeur de l&rsquo;invite.<\/p>\n<p>L&rsquo;invite est la question envoy\u00e9e par le formulaire. Cela signifie que vous devrez la recevoir de l&rsquo;entr\u00e9e du formulaire que vous passez \u00e0 la m\u00e9thode <code>generateResponse<\/code> en tant que param\u00e8tre. Pour cela, vous d\u00e9finirez les options, puis utiliserez l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/operateur-spread-javascript\/\">op\u00e9rateur de propagation<\/a> pour cr\u00e9er une option compl\u00e8te incluant l&rsquo;invite :<\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/App.js\n\nimport { Configuration, OpenAIApi } from 'openai';\nimport FormSection from '.\/components\/FormSection';\nimport AnswerSection from '.\/components\/AnswerSection';\n\nconst App = () =&gt; {\n    const configuration = new Configuration({\n        apiKey: process.env.REACT_APP_OPENAI_API_KEY,\n    });\n\n    const openai = new OpenAIApi(configuration);\n\n    const generateResponse = async (newQuestion, setNewQuestion) =&gt; {\n        let options = {\n            model: 'text-davinci-003',\n            temperature: 0,\n            max_tokens: 100,\n            top_p: 1,\n            frequency_penalty: 0.0,\n            presence_penalty: 0.0,\n            stop: ['\/'],\n        };\n\n        let completeOptions = {\n            ...options,\n            prompt: newQuestion,\n        };\n\n    };\n\n    return (\n         \/\/ Render FormSection and AnswerSection\n    );\n};\n\nexport default App;<\/code><\/pre>\n<p>\u00c0 ce stade, il ne vous reste plus qu&rsquo;\u00e0 envoyer une requ\u00eate \u00e0 OpenAI via la m\u00e9thode <code>createCompletion<\/code> pour obtenir une r\u00e9ponse.<\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/App.js\n\nimport { Configuration, OpenAIApi } from 'openai';\nimport FormSection from '.\/components\/FormSection';\nimport AnswerSection from '.\/components\/AnswerSection';\n\nimport { useState } from 'react';\n\nconst App = () =&gt; {\n    const configuration = new Configuration({\n        apiKey: process.env.REACT_APP_OPENAI_API_KEY,\n    });\n\n    const openai = new OpenAIApi(configuration);\n\n    const [storedValues, setStoredValues] = useState([]);\n\n    const generateResponse = async (newQuestion, setNewQuestion) =&gt; {\n        let options = {\n            model: 'text-davinci-003',\n            temperature: 0,\n            max_tokens: 100,\n            top_p: 1,\n            frequency_penalty: 0.0,\n            presence_penalty: 0.0,\n            stop: ['\/'],\n        };\n\n        let completeOptions = {\n            ...options,\n            prompt: newQuestion,\n        };\n\n        const response = await openai.createCompletion(completeOptions);\n\n        console.log(response.data.choices[0].text);\n    };\n\n    return (\n        \/\/ Render FormSection and AnswerSection\n    );\n};\n\nexport default App;<\/code><\/pre>\n<p>Dans le code ci-dessus, le texte de la r\u00e9ponse sera affich\u00e9 sur votre console. N&rsquo;h\u00e9sitez pas \u00e0 tester votre application en posant n&rsquo;importe quelle question. L&rsquo;\u00e9tape finale consiste \u00e0 cr\u00e9er un \u00e9tat qui contiendra le tableau des questions et des r\u00e9ponses, puis \u00e0 envoyer ce tableau en tant que prop dans le composant <strong>AnswerSection<\/strong>. Voici \u00e0 quoi ressemblera le code final d&rsquo;<strong>App.js<\/strong>:<\/p>\n<pre><code class=\"language-jsx\">\/\/ src\/App.js\nimport { Configuration, OpenAIApi } from 'openai';\n\nimport FormSection from '.\/components\/FormSection';\nimport AnswerSection from '.\/components\/AnswerSection';\n\nimport { useState } from 'react';\n\nconst App = () =&gt; {\n    const configuration = new Configuration({\n        apiKey: process.env.REACT_APP_OPENAI_API_KEY,\n    });\n\n    const openai = new OpenAIApi(configuration);\n\n    const [storedValues, setStoredValues] = useState([]);\n\n    const generateResponse = async (newQuestion, setNewQuestion) =&gt; {\n        let options = {\n            model: 'text-davinci-003',\n            temperature: 0,\n            max_tokens: 100,\n            top_p: 1,\n            frequency_penalty: 0.0,\n            presence_penalty: 0.0,\n            stop: ['\/'],\n        };\n\n        let completeOptions = {\n            ...options,\n            prompt: newQuestion,\n        };\n\n        const response = await openai.createCompletion(completeOptions);\n\n        if (response.data.choices) {\n            setStoredValues([\n                {\n                    question: newQuestion,\n                    answer: response.data.choices[0].text,\n                },\n                ...storedValues,\n            ]);\n            setNewQuestion('');\n        }\n    };\n\n    return (\n        &lt;div&gt;\n            &lt;div className=\"header-section\"&gt;\n                &lt;h1&gt;ChatGPT CLONE \ud83e\udd16&lt;\/h1&gt;\n                    &lt;p&gt;\n                        I am an automated question and answer system, designed to assist you\n                        in finding relevant information. You are welcome to ask me any\n                        queries you may have, and I will do my utmost to offer you a\n                        reliable response. Kindly keep in mind that I am a machine and\n                        operate solely based on programmed algorithms.\n                    &lt;\/p&gt;\n            &lt;\/div&gt;\n\n            &lt;FormSection generateResponse={generateResponse} \/&gt;\n\n            &lt;AnswerSection storedValues={storedValues} \/&gt;\n        &lt;\/div&gt;\n    );\n};\n\nexport default App;<\/code><\/pre>\n<p>Vous pouvez maintenant modifier le composant <strong>AnswerSection <\/strong>de mani\u00e8re \u00e0 ce qu&rsquo;il re\u00e7oive la valeur props d&rsquo;<strong>App.js<\/strong> et \u00e0 ce qu&rsquo;il utilise la m\u00e9thode JavaScript <code>Map()<\/code> pour parcourir le tableau <code>storedValues<\/code>:<\/p>\n<pre><code class=\"language-jsx\">\/\/ components\/AnswerSection.jsx\n\nconst AnswerSection = ({ storedValues }) =&gt; {\n    return (\n        &lt;&gt;\n            &lt;hr className=\"hr-line\" \/&gt;\n            &lt;div className=\"answer-container\"&gt;\n                {storedValues.map((value, index) =&gt; {\n                    return (\n                        &lt;div className=\"answer-section\" key={index}&gt;\n                            &lt;p className=\"question\"&gt;{value.question}&lt;\/p&gt;\n                            &lt;p className=\"answer\"&gt;{value.answer}&lt;\/p&gt;\n                            &lt;div className=\"copy-icon\"&gt;\n                                &lt;i className=\"fa-solid fa-copy\"&gt;&lt;\/i&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                    );\n                })}\n            &lt;\/div&gt;\n        &lt;\/&gt;\n    )\n}\n\nexport default AnswerSection;<\/code><\/pre>\n<p>Lorsque vous ex\u00e9cutez votre application et la testez en posant des questions, la r\u00e9ponse s&rsquo;affiche ci-dessous. Mais vous remarquerez que le bouton \u00ab copy \u00bb ne fonctionne pas. Vous devrez ajouter un \u00e9v\u00e9nement <code>onClick()<\/code> au bouton, afin qu&rsquo;il d\u00e9clenche une m\u00e9thode pour g\u00e9rer la fonctionnalit\u00e9. Vous pouvez utiliser la m\u00e9thode <code>navigator.clipboard.writeText()<\/code> pour g\u00e9rer la fonctionnalit\u00e9. Voici \u00e0 quoi ressemblera le composant <strong>AnswerSection<\/strong>:<\/p>\n<pre><code class=\"language-jsx\">\/\/ components\/AnswerSection.jsx\n\nconst AnswerSection = ({ storedValues }) =&gt; {\n    const copyText = (text) =&gt; {\n        navigator.clipboard.writeText(text);\n    };\n\n    return (\n        &lt;&gt;\n            &lt;hr className=\"hr-line\" \/&gt;\n            &lt;div className=\"answer-container\"&gt;\n                {storedValues.map((value, index) =&gt; {\n                    return (\n                        &lt;div className=\"answer-section\" key={index}&gt;\n                            &lt;p className=\"question\"&gt;{value.question}&lt;\/p&gt;\n                            &lt;p className=\"answer\"&gt;{value.answer}&lt;\/p&gt;\n                            &lt;div\n                                className=\"copy-icon\"\n                                onClick={() =&gt; copyText(value.answer)}\n                            &gt;\n                                &lt;i className=\"fa-solid fa-copy\"&gt;&lt;\/i&gt;\n                            &lt;\/div&gt;\n                        &lt;\/div&gt;\n                    );\n                })}\n            &lt;\/div&gt;\n        &lt;\/&gt;\n    )\n}\n\nexport default AnswerSection;<\/code><\/pre>\n<p>Lorsque vous ex\u00e9cutez votre application, votre clone de ChatGPT fonctionne parfaitement. Vous pouvez maintenant d\u00e9ployer votre application pour y acc\u00e9der en ligne et la partager avec vos amis.<\/p>\n<h2>Comment d\u00e9ployer votre application React sur Kinsta<\/h2>\n<p>Il ne suffit pas de cr\u00e9er cette application et de la laisser sur vos ordinateurs locaux. Vous voudrez la partager en ligne, afin que d&rsquo;autres puissent y acc\u00e9der. Voyons comment le faire en utilisant <a href=\"https:\/\/kinsta.com\/fr\/blog\/base-de-connaissances-github\/\">GitHub<\/a> et <a href=\"https:\/\/sevalla.com\/application-hosting\/\">Kinsta<\/a>.<\/p>\n<h3>Transf\u00e9rez votre code sur GitHub<\/h3>\n<p>Pour <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-pousser-code-github\/\">transf\u00e9rer votre code sur GitHub<\/a>, vous pouvez utiliser les commandes <a href=\"https:\/\/kinsta.com\/fr\/blog\/git-pour-developpement-web\/\">Git<\/a>, qui constituent un moyen fiable et efficace de g\u00e9rer les modifications de code, de collaborer sur des projets et de conserver l&rsquo;historique des versions.<\/p>\n<p>La premi\u00e8re \u00e9tape pour pousser vos codes sera de cr\u00e9er un nouveau d\u00e9p\u00f4t en vous connectant \u00e0 votre compte GitHub, en cliquant sur le bouton <strong>+<\/strong> dans le coin sup\u00e9rieur droit de l&rsquo;\u00e9cran, et en s\u00e9lectionnant <strong>Nouveau d\u00e9p\u00f4t<\/strong> dans le menu d\u00e9roulant.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/Create-a-new-repository-on-GitHub-1.jpg\" alt=\"Cr\u00e9er un nouveau d\u00e9p\u00f4t sur GitHub\" width=\"1600\" height=\"770\"><figcaption class=\"wp-caption-text\">Cr\u00e9er un nouveau d\u00e9p\u00f4t sur GitHub<\/figcaption><\/figure>\n<p>Donnez un nom \u00e0 votre d\u00e9p\u00f4t, ajoutez une description (facultative) et choisissez s&rsquo;il doit \u00eatre public ou priv\u00e9. Cliquez sur <strong>Cr\u00e9er un d\u00e9p\u00f4t<\/strong> pour le cr\u00e9er.<\/p>\n<p>Une fois votre d\u00e9p\u00f4t cr\u00e9\u00e9, assurez-vous d&rsquo;obtenir l&rsquo;URL du d\u00e9p\u00f4t \u00e0 partir de la page principale de votre d\u00e9p\u00f4t, dont vous aurez besoin pour pousser votre code sur GitHub.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/how-to-get-repository-URL-1.jpg\" alt=\"Acc\u00e9der \u00e0 l'URL de votre d\u00e9p\u00f4t\" width=\"1600\" height=\"738\"><figcaption class=\"wp-caption-text\">Acc\u00e9der \u00e0 l&rsquo;URL de votre d\u00e9p\u00f4t<\/figcaption><\/figure>\n<p>Ouvrez votre terminal ou votre invite de commande et naviguez jusqu&rsquo;au r\u00e9pertoire qui contient votre projet. Ex\u00e9cutez les commandes suivantes une par une pour pousser votre code vers votre d\u00e9p\u00f4t GitHub :<\/p>\n<pre><code class=\"language-bash\">git init\ngit add .\ngit commit -m \"my first commit\"\ngit remote add origin [repository URL]\ngit push -u origin master<\/code><\/pre>\n<p><code>git init<\/code> initialise un d\u00e9p\u00f4t Git local, <code>git add .<\/code> ajoute tous les fichiers du r\u00e9pertoire actuel et de ses sous-r\u00e9pertoires au nouveau d\u00e9p\u00f4t Git. <code>git commit -m \"my first commit\"<\/code> commite les modifications dans le d\u00e9p\u00f4t avec un bref message. <code>git remote add origin [repository URL]<\/code> d\u00e9finit l&rsquo;URL du d\u00e9p\u00f4t comme d\u00e9p\u00f4t distant et <code>git push -u origin master<\/code> pousse le code vers le d\u00e9p\u00f4t distant (origin) dans la branche master.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Vous pouvez remplacer \u00ab my first commit \u00bb par un bref message d\u00e9crivant les modifications que vous avez apport\u00e9es et [repository URL] par l&rsquo;URL de votre d\u00e9p\u00f4t GitHub. Une fois votre code pouss\u00e9 sur GitHub, vous pouvez maintenant d\u00e9ployer votre d\u00e9p\u00f4t sur Kinsta.<\/p>\n<\/aside>\n\n<h3>D\u00e9ployez votre application React Clone ChatGPT sur Kinsta<\/h3>\n<p>Pour d\u00e9ployer votre d\u00e9p\u00f4t sur Kinsta, suivez les \u00e9tapes suivantes :<\/p>\n<ol>\n<li>Connectez-vous ou cr\u00e9ez votre compte Kinsta sur le tableau de bord <a href=\"https:\/\/my.kinsta.com\/?lang=fr\">MyKinsta<\/a>.<\/li>\n<li>Cliquez sur <strong>Applications<\/strong> dans la barre lat\u00e9rale gauche, puis sur <strong>Ajouter un service<\/strong>.<\/li>\n<li>S\u00e9lectionnez <strong>Application<\/strong> dans le menu d\u00e9roulant pour d\u00e9ployer une application React sur Kinsta.<\/li>\n<li>S\u00e9lectionnez le d\u00e9p\u00f4t que vous souhaitez d\u00e9ployer dans la fen\u00eatre modale qui s&rsquo;affiche. Si vous avez plusieurs branches, vous pouvez choisir celle que vous souhaitez d\u00e9ployer et attribuer un nom \u00e0 l&rsquo;application. S\u00e9lectionnez un <a href=\"https:\/\/kinsta.com\/fr\/docs\/information-service\/emplacements-centre-de-donnees\/#application-and-database-hosting-data-centers\">emplacement de centre de donn\u00e9es<\/a> parmi les 24 disponibles, et Kinsta d\u00e9tectera automatiquement une commande de d\u00e9marrage.<\/li>\n<li>Enfin, il n&rsquo;est pas s\u00fbr d&rsquo;envoyer les cl\u00e9s d&rsquo;API \u00e0 des h\u00f4tes publics comme GitHub, elles ont \u00e9t\u00e9 ajout\u00e9es comme variable d&rsquo;environnement localement. Lors de l&rsquo;h\u00e9bergement, vous pouvez \u00e9galement l&rsquo;ajouter en tant que <a href=\"https:\/\/docs.sevalla.com\/applications\/environment-variables\">variable d&rsquo;environnement<\/a> en utilisant le m\u00eame nom de variable et la cl\u00e9 comme valeur.<\/li>\n<\/ol>\n<figure style=\"width: 1440px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/deploy_react_app_with_environment_variable.gif\" alt=\"D\u00e9ploiement du clone de ChatGPT sur Kinsta.\" width=\"1440\" height=\"788\"><figcaption class=\"wp-caption-text\">D\u00e9ploiement du clone de ChatGPT sur Kinsta.<\/figcaption><\/figure>\n<p>Votre application va commencer \u00e0 se d\u00e9ployer, et dans quelques minutes, un lien sera fourni pour acc\u00e9der \u00e0 la version d\u00e9ploy\u00e9e de votre application. Dans ce cas, il s&rsquo;agit de <strong>https:\/\/chatgpt-clone-g9q10.kinsta.app\/<br \/>\n<\/strong><\/p>\n<p><strong>Note :<\/strong>\u00a0vous pouvez activer le d\u00e9ploiement automatique, de sorte que Kinsta red\u00e9ploiera votre application chaque fois que vous modifierez votre base de code et que vous la pousserez sur GitHub.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Dans cet article, vous avez appris comment d\u00e9ployer votre site avec l&rsquo;h\u00e9bergement d&rsquo;applications de Kinsta. Si vous construisez une application\/site web de base qui ne n\u00e9cessite pas de rendu dynamique et qui n&rsquo;est pas soumis \u00e0 des pics de trafic, vous pouvez choisir d&rsquo;h\u00e9berger votre site avec l&rsquo;<a href=\"https:\/\/kinsta.com\/static-site-hosting\">h\u00e9bergement de sites statiques<\/a> de Kinsta.<\/p>\n<\/aside>\n\n\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=vmNem6wxfSQ\"><\/kinsta-video>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>L&rsquo;API OpenAI peut \u00eatre utilis\u00e9e pour cr\u00e9er un large \u00e9ventail d&rsquo;applications potentielles, de l&rsquo;assistance \u00e0 la client\u00e8le et des assistants personnels \u00e0 la traduction linguistique et \u00e0 la cr\u00e9ation de contenu.<\/p>\n<p>Dans ce tutoriel, vous avez appris \u00e0 construire une application clone de ChatGPT avec React et OpenAI. Vous pouvez int\u00e9grer cette application\/fonctionnalit\u00e9 dans d&rsquo;autres applications pour fournir aux utilisateurs des exp\u00e9riences conversationnelles de type humain.<\/p>\n<p>Il y a plus \u00e0 faire avec l&rsquo;API OpenAI et comment am\u00e9liorer cette application clone. Par exemple, vous pouvez mettre en \u0153uvre le stockage local afin que les questions et r\u00e9ponses pr\u00e9c\u00e9dentes ne disparaissent pas m\u00eame apr\u00e8s avoir actualis\u00e9 votre navigateur.<\/p>\n<p>Avec l&rsquo;essai gratuit de Kinsta et le <a href=\"https:\/\/sevalla.com\/pricing\/\">niveau Hobby<\/a>, vous pouvez facilement d\u00e9marrer sans frais sur notre h\u00e9bergement d&rsquo;applications. Alors pourquoi ne pas essayer et voir ce que vous pouvez cr\u00e9er ?<\/p>\n<p>Partagez votre projet et vos exp\u00e9riences dans les commentaires ci-dessous.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Alors que l&rsquo;utilisation des chatbots et des assistants virtuels ne cesse de cro\u00eetre, de nombreuses entreprises et d\u00e9veloppeurs cherchent \u00e0 cr\u00e9er leurs propres chatbots dot\u00e9s d&rsquo;une &#8230;<\/p>\n","protected":false},"author":287,"featured_media":67246,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[953,979,1004],"class_list":["post-67245","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-api","topic-frameworks-javascript","topic-react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Comment construire et d\u00e9ployer une application clone de ChatGPT avec React et l&#039;API OpenAI ? - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Apprenez \u00e0 construire une application clone de ChatGPT \u00e0 l&#039;aide de React et de l&#039;API OpenAI, puis \u00e0 la d\u00e9ployer sur Kinsta dans ce tutoriel interactif.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment construire et d\u00e9ployer une application clone de ChatGPT avec React et l&#039;API OpenAI\" \/>\n<meta property=\"og:description\" content=\"Apprenez \u00e0 construire une application clone de ChatGPT \u00e0 l&#039;aide de React et de l&#039;API OpenAI, puis \u00e0 la d\u00e9ployer sur Kinsta dans ce tutoriel interactif.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-16T07:17:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-25T08:23:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3042\" \/>\n\t<meta property=\"og:image:height\" content=\"1521\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Apprenez \u00e0 construire une application clone de ChatGPT \u00e0 l&#039;aide de React et de l&#039;API OpenAI, puis \u00e0 la d\u00e9ployer sur Kinsta dans ce tutoriel interactif.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Comment construire et d\u00e9ployer une application clone de ChatGPT avec React et l&rsquo;API OpenAI\",\"datePublished\":\"2023-03-16T07:17:35+00:00\",\"dateModified\":\"2023-10-25T08:23:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/\"},\"wordCount\":3441,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/\",\"name\":\"Comment construire et d\u00e9ployer une application clone de ChatGPT avec React et l'API OpenAI ? - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\",\"datePublished\":\"2023-03-16T07:17:35+00:00\",\"dateModified\":\"2023-10-25T08:23:39+00:00\",\"description\":\"Apprenez \u00e0 construire une application clone de ChatGPT \u00e0 l'aide de React et de l'API OpenAI, puis \u00e0 la d\u00e9ployer sur Kinsta dans ce tutoriel interactif.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment construire et d\u00e9ployer une application clone de ChatGPT avec React et l&rsquo;API OpenAI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment construire et d\u00e9ployer une application clone de ChatGPT avec React et l'API OpenAI ? - Kinsta\u00ae","description":"Apprenez \u00e0 construire une application clone de ChatGPT \u00e0 l'aide de React et de l'API OpenAI, puis \u00e0 la d\u00e9ployer sur Kinsta dans ce tutoriel interactif.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment construire et d\u00e9ployer une application clone de ChatGPT avec React et l'API OpenAI","og_description":"Apprenez \u00e0 construire une application clone de ChatGPT \u00e0 l'aide de React et de l'API OpenAI, puis \u00e0 la d\u00e9ployer sur Kinsta dans ce tutoriel interactif.","og_url":"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2023-03-16T07:17:35+00:00","article_modified_time":"2023-10-25T08:23:39+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Apprenez \u00e0 construire une application clone de ChatGPT \u00e0 l'aide de React et de l'API OpenAI, puis \u00e0 la d\u00e9ployer sur Kinsta dans ce tutoriel interactif.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Joel Olawanle","Dur\u00e9e de lecture estim\u00e9e":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Comment construire et d\u00e9ployer une application clone de ChatGPT avec React et l&rsquo;API OpenAI","datePublished":"2023-03-16T07:17:35+00:00","dateModified":"2023-10-25T08:23:39+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/"},"wordCount":3441,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/","url":"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/","name":"Comment construire et d\u00e9ployer une application clone de ChatGPT avec React et l'API OpenAI ? - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","datePublished":"2023-03-16T07:17:35+00:00","dateModified":"2023-10-25T08:23:39+00:00","description":"Apprenez \u00e0 construire une application clone de ChatGPT \u00e0 l'aide de React et de l'API OpenAI, puis \u00e0 la d\u00e9ployer sur Kinsta dans ce tutoriel interactif.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/03\/how-to-build-and-deploy-chatgpt-clone-application-with-react-and-openai-api.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/clone-application-chatgpt\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/fr\/sujets\/react\/"},{"@type":"ListItem","position":3,"name":"Comment construire et d\u00e9ployer une application clone de ChatGPT avec React et l&rsquo;API OpenAI"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/fr\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/67245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=67245"}],"version-history":[{"count":17,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/67245\/revisions"}],"predecessor-version":[{"id":73916,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/67245\/revisions\/73916"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/67245\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/67245\/translations\/it"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/67245\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/67245\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/67245\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/67245\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/67245\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/67245\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/67245\/translations\/dk"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/67245\/translations\/pt"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/67245\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/67246"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=67245"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=67245"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=67245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}