Comment construire un Chatbot en React.js ?

Dans cet article, nous allons vous apprendre tout ce que vous devez savoir sur les chatbots. Nous examinerons les avantages de l’utilisation d’un chatbot, les types de chatbots, les plateformes de chatbots sans code et les solutions de chatbots personnalisées. Enfin, nous mettrons en œuvre notre propre chatbot personnalisé basé sur des règles avec React et Back4app.

Qu’est-ce qu’un Chatbot ?

Un chatbot est un programme informatique conçu pour simuler une conversation humaine par le biais de commandes vocales, de messages textuels ou des deux. Il peut s’agir d’un simple bot basé sur des règles ou d’un chatbot avancé doté d’une intelligence artificielle qui comprend les questions des clients et génère des réponses personnalisées.

Les chatbots gagnent régulièrement en popularité depuis les années 2010 et constituent une partie importante de presque toutes les entreprises. Les bots permettent aux entreprises d’améliorer leur service client, d’accroître l’engagement des clients, de réduire les coûts, d’améliorer l’expérience utilisateur et de collecter des données sur les clients.

De nos jours, les chatbots sont présents presque partout : sur les sites web, les applications mobiles, les messageries mobiles, etc. Il est même fort probable que vous ayez installé sur votre appareil mobile quelques assistants virtuels tels que Google Assistant, Siri et Bixby.

Avantages d’un chatbot

L’utilisation d’un chatbot présente de nombreux avantages. Examinons-en quelques-uns.

Rapport coût-efficacité

Les chatbots sont parfaits pour gérer des tâches simples. Ils peuvent être programmés pour traiter des demandes simples tout en redirigeant les demandes complexes vers un représentant du service clientèle humain. De cette manière, votre entreprise peut réduire considérablement les coûts de main-d’œuvre tout en étant en mesure d’offrir un excellent service à la clientèle.

Disponibilité 24 heures sur 24, 7 jours sur 7

Les chatbots sont pratiques pour fournir un service et une assistance à la clientèle 24 heures sur 24 et 7 jours sur 7, sans qu’il soit nécessaire de faire appel à des opérateurs humains. C’est une bonne chose si vos clients sont dispersés dans différents fuseaux horaires.

Évolutivité

Les robots peuvent traiter simultanément un grand nombre d’interactions. Cela permet d’augmenter la productivité de l’entreprise et d’éliminer les temps d’attente, ce qui se traduit par des clients plus satisfaits.

Personnalisation

Les assistants numériques peuvent être programmés pour fournir des recommandations ou des réponses personnalisées aux utilisateurs en fonction de leurs caractéristiques ou de leur comportement. Cela peut grandement améliorer l’expérience de l’utilisateur, augmenter les ventes, instaurer la confiance et même améliorer la fidélisation de la clientèle.

Collecte de données

Les chatbots peuvent collecter des données sur les clients, ce qui peut être utile aux entreprises pour améliorer leurs produits et services. En outre, les chatbots basés sur l’IA peuvent apprendre de leurs conversations précédentes et offrir une meilleure assistance au fil du temps.

Prise en charge de plusieurs langues

Les robots ne sont pas limités à une seule langue. Certains des meilleurs robots sont capables de reconnaître la langue dans laquelle une question a été posée et d’y répondre dans cette langue.

Types de Chatbots

Il existe plusieurs types de chatbots, chacun ayant ses propres capacités et utilisations. Nous pouvons les classer en fonction de différentes propriétés.

Intelligence

L’intelligence détermine si le robot est “intelligent” ou “stupide”. Par “stupide”, nous faisons généralement référence aux chatbots basés sur des règles qui ont des règles codées en dur et ne peuvent pas répondre à des questions qu’ils n’ont jamais vues auparavant. En revanche, par “intelligent”, nous entendons les chatbots alimentés par l’IA qui utilisent le NLP (Natural Language Processing) et le ML (Machine Learning) pour comprendre la question du client et générer une réponse personnalisée. Les chatbots hybrides utilisent des fonctionnalités basées sur des règles ainsi que l’IA.

• Chatbots basés sur des règles
• Chatbots alimentés par l’IA
• Chatbots hybrides

Zone de service

Le domaine de service détermine l’objectif du chatbot. Les domaines de service les plus courants sont les suivants

• Soutien à la clientèle
• Assistant personnel (Bixby, Alexa, Amazon Echo)
• Assistant commercial virtuel

Plate-forme

Les chatbots peuvent être déployés sur différentes plateformes. Le choix de l’endroit où déployer un chatbot dépendra du cas d’utilisation spécifique et du public cible.

• Web (bulles de dialogue flottantes, widgets)
• Plateformes de messagerie (Facebook Messenger, Whatsapp, Viber)
• Applications mobiles (Bixby, Siri, Google Assistant)
• Appareils IoT (haut-parleurs intelligents, appareils domestiques intelligents)

État

Il existe deux architectures de chatbot :

• Chatbots avec état
• Chatbots sans état d’âme

Les chatbots avec état conservent un enregistrement des interactions précédentes avec l’utilisateur et en tiennent compte lorsqu’une nouvelle question est posée. C’est une excellente chose, car cela leur permet d’offrir une expérience plus personnalisée. Ils sont généralement plus sophistiqués et plus difficiles à coder.

Les chatbots sans état, quant à eux, ne tiennent pas compte des interactions précédentes. Ils traitent chaque message comme une demande indépendante. Ils sont plus simples, ne peuvent pas offrir une expérience personnalisée et ne peuvent pas baser leurs réponses sur le contexte.

Solutions Chatbot

Plateformes de chatbot

Les plateformes de chatbot à code bas ou sans code sont des solutions prêtes à l’emploi. Elles sont faciles à utiliser, ne nécessitent pas de compétences avancées en matière de codage et vous permettent de rendre votre chatbot opérationnel en un rien de temps.

Ils sont généralement livrés avec un éditeur par glisser-déposer simple à utiliser qui vous permet de définir le comportement de votre chatbot. Ils peuvent être facilement déployés sur différentes plateformes, notamment les sites web, Facebook Messenger, Slack, Whatsapp, etc.

Elles offrent un niveau de contrôle et de personnalisation inférieur à celui des robots personnalisés. Le plus grand inconvénient de ces plateformes est l’enfermement dans le fournisseur. Une fois que vous avez choisi une plateforme, vous ne pouvez pas facilement migrer vers une autre.

Quelques exemples de ces plateformes sont Tidio, Landbot, ChatBot et AgentBot.

Bot personnalisé

Les robots personnalisés sont des solutions hautement personnalisables et flexibles qui peuvent être adaptées aux besoins spécifiques de toute entreprise. Ils s’intègrent parfaitement aux systèmes et bases de données existants.

La création d’un chatbot à partir de zéro étant une tâche difficile, vous pouvez vous attendre à ce qu’elle prenne plus de temps et coûte plus cher que l’utilisation d’une plateforme de chatbot prête à l’emploi. Si votre objectif est de créer un bot d’IA avancé, vous aurez probablement besoin d’une équipe de développeurs spécialisés.

Les robots personnalisés peuvent être écrits dans pratiquement n’importe quel langage de programmation. La plupart des développeurs optent pour Python, Node.js, JavaScript et Java. Pour simplifier encore davantage le processus de création de bots, il existe un certain nombre de bibliothèques de bots open-source parmi lesquelles vous pouvez choisir.

Comment construire un Chatbot ?

Dans cette partie du tutoriel, nous allons créer un chatbot personnalisé basé sur des règles. Nous utiliserons React pour le frontend et Back4app pour le backend.

Qu’est-ce que Back4app ?

Back4app est une plateforme de backend as a service (BaaS) hébergée dans le nuage qui permet aux développeurs de créer et de maintenir facilement des applications mobiles personnalisées. Elle offre une interface utilisateur intuitive, un tableau de bord puissant et des outils utiles tels que l’interface de ligne de commande (CLI), les notifications push, l’analyse, le stockage de données, etc.

Ils fournissent également des SDK pour tous vos outils préférés comme Flutter, React Native, Node.js, Angular, Android, iOS & plus encore !

Les principales caractéristiques de Back4app sont les suivantes

• Interface de type tableur
• Interfaces de programmation d’applications (API) REST et GraphQL
• Requêtes en direct
• Authentification (y compris l’authentification sociale)
• Hébergement évolutif
• Notifications

Pour plus d’informations, veuillez consulter les caractéristiques de Back4app.

Back4app suit un modèle de prix prévisible et facile à comprendre. Ils offrent un plan gratuit généreux (pas de carte de crédit requise) qui est parfait pour le prototypage et le test de la plateforme. Il comprend :

• 25k requêtes API
• 250 Mo de stockage de données
• 1 Go de transfert de données
• 1 Go de stockage d’objets

Pour plus d’informations sur les tarifs de Back4app, consultez la page Tarifs.

Introduction du projet

Nous allons construire un chatbot simple avec des demandes et des réponses prédéfinies. Le chatbot sera capable de répondre avec du texte, des images et d’afficher différentes options basées sur la dernière requête. Le frontend sera construit avec React et nous utiliserons Back4app (avec Express) pour le backend.

Prérequis :

• Expérience avec JavaScript
• Expérience avec React et React Hooks
• Compréhension de base des requêtes et des réponses HTTP
• Compréhension de base du BaaS (Backend as a Service)

Nous travaillerons d’abord sur le frontend, puis sur le backend et enfin nous relierons les deux parties.

Chatbot Frontend

Créer une application React

Commençons par créer une nouvelle application React via Create React App :

$ npx create-react-app react-chatbot
$ cd react-chatbot

Cela créera une application React nommée react-chatbot et changera votre répertoire de travail.

Ensuite, démarrez le projet :

$ npm start

Enfin, ouvrez http://localhost:3000/ pour voir votre application web.

Material UI

Pour simplifier le processus de construction de l’interface utilisateur, nous utiliserons Material UI – une bibliothèque de composants React open-source qui met en œuvre le Material Design de Google. La bibliothèque de composants comprend une collection complète de composants préconstruits qui fonctionnent prêts à l’emploi.

N’hésitez pas à remplacer Material UI par un autre framework d’interface utilisateur comme React Bootstrap ou Ant Design.

Pour ajouter Material UI à votre projet, exécutez :

$ npm install @mui/material @emotion/react @emotion/styled

Material UI utilise la police Roboto par défaut. Installons-la avec :

$ npm install @fontsource/roboto

Ensuite, naviguez vers index.js et ajoutez les importations suivantes :

// src/index.js

import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

Interface utilisateur

Naviguez jusqu’à App.js dans le dossier src et remplacez son contenu par ce qui suit :

// src/App.js

import React, {useEffect, useState} from "react";
import {Box, Button, Card, CardContent, Grid, TextField} from "@mui/material";

function App() {

  const messagesListRef = React.createRef();
  const [messageInput, setMessageInput] = useState("");
  const [messages, setMessages] = useState([]);

  const sendMessage = (content) => {
    // add the message to the state
    setMessages([
      ...messages,
      {
        content: content,
        isCustomer: true,
      }
    ]);

    // TODO: post the request to Back4app
  }

  const handleSubmit = (event) => {
    event.preventDefault();

    sendMessage(messageInput);
    setMessageInput("");
  }

  return (
    <Grid
      container
      direction="row"
      justifyContent="center"
      alignItems="center"
    >
      <Card sx={{maxWidth: 420}}>
        <CardContent>
          <Box
            ref={messagesListRef}
            sx={{
              height: 420,
              overflow: "scroll",
              overflowX: "hidden",
            }}
          >
            <Box sx={{m: 1, mr: 2}}>
              {/* TODO: messages will be displayed here */}
            </Box>
          </Box>
          <Box
            component="form"
            sx={{
              mt: 2,
              display: "flex",
              flexFlow: "row",
              gap: 1,
            }}
          >
            <TextField
              variant="outlined"
              size="small"
              value={messageInput}
              onChange={(event) => setMessageInput(event.target.value)}
              fullWidth
            />
            <Button
              variant="contained"
              onClick={handleSubmit}
              type="submit"
            >
              Send
            </Button>
          </Box>
        </CardContent>
      </Card>
    </Grid>
  );
}

export default App;

1. Nous avons défini un formulaire simple avec une entrée de message qui appelle handleSubmit() lors de la soumission.
2. Nous avons utilisé le crochet React useState() pour gérer l’état.
   • messageInput est le message actuel
   • messages est la liste des messages
3. handleSubmit() efface l’entrée du message et appelle sendMessage() qui ajoute le message à l’état.

Poursuivons en créant un composant pour l’affichage des messages.

Créez un nouveau dossier nommé components dans le dossier src et dans ce dossier créez un nouveau fichier nommé Message.js avec le contenu suivant :

// src/components/Message.js

import avatar from "../assets/bot.png";
import {Avatar, Box, Chip, Typography} from "@mui/material";

export default function Message(props) {
  return (
    <div>
      <Box
        sx={{
          my: 2,
          display: "flex",
          flexFlow: "row",
          justifyContent: props.isCustomer ? "right" : "left",
        }}
      >
        {!props.isCustomer && (
          <Avatar sx={{mr: 1, bgcolor: "primary.main"}}>
            <img src={avatar} alt="Chatbot avatar" width={32}/>
          </Avatar>
        )}
        <Box>
          <Typography gutterBottom variant="body2" component="div" sx={{mt: 1.5}}>
            {props.content}
          </Typography>
          {props.image && (
            <img src={props.image} alt="Bot response" style={{width: "100%"}}/>
          )}
          {!props.isCustomer && props.choices && (
            <Box sx={{mt: 1}}>
              {props.choices.map((choice, index) => (
                <Chip
                  key={index}
                  label={choice}
                  onClick={() => props.handleChoice(choice)}
                  sx={{mr: 0.5, mb: 0.5}}
                />
              ))}
            </Box>
          )}
        </Box>
      </Box>
    </div>
  );
}

Ce composant prend quelques entrées arbitraires(props) et affiche ensuite un message.

• content — contenu du message
• image — image du message
• isCustomer — vrai si le message est envoyé par l’utilisateur
• les choix — les choix que l’utilisateur peut faire
• handleChoice — la fonction qui est appelée lorsqu’un choix est sélectionné

Ensuite, créez un dossier nommé assets dans le dossier src et placez-y une image que vous souhaitez que votre chatbot utilise comme avatar. N’hésitez pas à utiliser celle-ci.

Veillez à nommer l’image de l’avatar bot.png ou à modifier l’importation dans Message.js.

Enfin, pour utiliser le composant nouvellement créé, remplacez le TODO dans App.js comme suit :

// App.js

{messages.map((message, index) => (
  <Message
    key={index}
    content={message.content}
    image={message.image}
    isCustomer={message.isCustomer}
    choices={message.choices}
    handleChoice={sendMessage}
  />
))}

N’oubliez pas d’ajouter l’importation en tête du fichier :

import Message from "./components/Message";

Pour vous assurer que tout fonctionne bien, ouvrez votre navigateur web préféré et rendez-vous sur http://localhost:3000. Essayez d’envoyer quelques messages. Si tout fonctionne bien, ils devraient être ajoutés à l’interface utilisateur :

Chatbot Backend

Passons maintenant à l’implémentation du backend.

Créer une application

Les étapes suivantes nécessitent que vous ayez un compte Back4app. Si vous l’avez déjà, connectez-vous, sinon inscrivez-vous pour obtenir un compte gratuit.

Pour travailler avec Back4app, nous devons d’abord créer une application. Lorsque vous vous connectez à votre tableau de bord, vous verrez la liste de vos applications. Cliquez sur “Build a new app” pour créer une nouvelle application.

Donnez-lui un nom personnalisé, choisissez “NoSQL Database” comme base de données et cliquez sur “Continuer”.

Back4app va prendre quelques instants pour préparer tout ce qui est nécessaire à votre application comme la base de données, la couche applicative, la mise à l’échelle, les sauvegardes et la sécurité.

Une fois que votre application est prête, vous serez redirigé vers le tableau de bord de votre application.

Base de données

Définissons les modèles de base de données pour le chatbot.

Naviguez vers le tableau de bord de Back4app et sélectionnez “Database” sur le côté gauche de l’écran. Cliquez ensuite sur “Créer une classe”, nommez-la BotSettings, cochez “Public Read and Write Enabled” et cliquez sur “Create class & add columns”.

Ajouter les colonnes suivantes :

+-----------+------------------+---------------+----------+
| Data type | Name             | Default value | Required |
+-----------+------------------+---------------+----------+
| String    | welcomeContent   | <leave blank> | yes      |
+-----------+------------------+---------------+----------+
| Array     | welcomeChoices   | <leave blank> | no       |
+-----------+------------------+---------------+----------+
| String    | responseUnknown  | <leave blank> | yes      |
+-----------+------------------+---------------+----------+

1. Le contenu de bienvenue sera affiché lorsque l’utilisateur ouvrira le chat.
2. welcomeChoices sont les choix par défaut parmi lesquels l’utilisateur peut choisir sans avoir à saisir de message.
3. responseUnknown est renvoyé si le chatbot ne trouve pas de réponse à un message.

Ensuite, créez une ligne avec les paramètres personnalisés. Exemple :

+----------------+---------------------------+----------------------------------+
| welcomeContent | welcomeChoices            | responseUnknown                  |
+----------------+---------------------------+----------------------------------+
| Hi there!      | ["Shipping","Size guide"] | I don't understand this message. |
+----------------+---------------------------+----------------------------------+

Ensuite, créez une autre classe nommée BotResponse avec les colonnes suivantes :

+-----------+------------------+---------------+----------+
| Data type | Name             | Default value | Required |
+-----------+------------------+---------------+----------+
| String    | requestExact     | <leave blank> | yes      |
+-----------+------------------+---------------+----------+
| Array     | requestKeywords  | <leave blank> | no       |
+-----------+------------------+---------------+----------+
| String    | responseContent  | <leave blank> | yes      |
+-----------+------------------+---------------+----------+
| String    | responseImage    | <leave blank> | no       |
+-----------+------------------+---------------+----------+
| Array     | responseChoices  | <leave blank> | no       |
+-----------+------------------+---------------+----------+

Le chatbot va utiliser ce modèle pour rechercher la bonne réponse à une demande spécifique. Il va tout d’abord vérifier si le message correspond à une colonne requestExact et, si ce n’est pas le cas, s’il contient des mots-clés de la demande. Si aucune des réponses ne correspond à la demande, un message de remplacement sera renvoyé.

Après avoir créé le modèle, créez quelques réponses ou importez cet ensemble de données.

Hébergement web

Puisque nous allons créer une API Express (en utilisant Cloud Code), nous devons activer l’hébergement web de Back4app pour héberger notre application et la rendre publiquement accessible à l’internet.

Pour activer la fonction d’hébergement web, naviguez dans votre tableau de bord Back4app, sélectionnez votre application, cliquez sur “Paramètres de l’application” sur le côté gauche de l’écran, puis sur “Paramètres du serveur”. Recherchez “Webhosting and Custom Domains” et cliquez à nouveau sur “Settings”.

Cliquez sur “Activer l’hébergement Back4app” et choisissez un nom de sous-domaine. J’utiliserai chatbot:

Enfin, cliquez sur “Enregistrer”.

Votre application sera désormais accessible à l’adresse suivante :

https://<your_subdomain>.b4a.app/

Express avec Cloud Code

Dans cette section du tutoriel, nous utiliserons Cloud Code et Express pour créer une API que notre frontend pourra utiliser. L’API aura les points d’extrémité suivants :

1. / renvoie les paramètres du chatbot
2. /ask/ recherche une requête dans la base de données et renvoie une réponse

Sur le côté droit de l’écran, sélectionnez “Cloud Code” > “Functions & Web Hosting” et utilisez l’interface web pour créer la structure de répertoire suivante :

./
├── cloud/
│   ├── app.js
│   ├── package.json
│   └── routes.js
└── public/
    └── index.html

Mettez le contenu suivant dans le fichier package.json :

// cloud/package.json

{
  "dependencies": {
    "body-parser": "*"
  }
}

Back4app utilise ce fichier pour télécharger des modules via npm. Nous avons ajouté body-parser car nous en aurons besoin plus tard pour analyser les requêtes.

Placez ce qui suit dans app.js pour initialiser le serveur Express :

const express = require("express");
const bodyParser = require("body-parser");
const path = require("path");

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

require("./routes");

Enfin, définissez les routes dans routes.js comme suit :

app.get("/", async (req, res) => {
  // fetch the settings and the default choices
  const query = new Parse.Query("BotSettings");
  const settings = await query.first();
  res.send({
    content: settings.get('welcomeContent'),
    choices: settings.get('welcomeChoices'),
  });
})

app.post("/ask", async (req, res) => {
  let content = req.body.content.trim().toLowerCase();
  content = content.replace(/[.,?!]/, "");  // remove punctuation

  // check for exact matches
  const exactQuery = new Parse.Query("BotResponse");
  exactQuery.equalTo("requestExact", content);
  const exactResult = await exactQuery.first();

  if (exactResult != null) {
    return res.send({
      content: exactResult.get('responseContent'),
      image: exactResult.get('responseImage'),
      choices: exactResult.get('responseChoices'),
    })
  }

  // split the messsage and check for keyword matches
  const words = content.split(" ");
  for (let i = 0; i < words.length; i++) {
    const keywordQuery = new Parse.Query("BotResponse");
    keywordQuery.equalTo('requestKeywords', words[i]);
    const keywordResult = await keywordQuery.first();

    if (keywordResult != null) {
      return res.send({
        content: keywordResult.get('responseContent'),
        image: keywordResult.get('responseImage'),
        choices: keywordResult.get('responseChoices'),
      })
    }
  }

  // fallback message if the request wasn't understood
  const query = new Parse.Query("BotSettings");
  const settings = await query.first();

  res.send({
    content: settings.get('responseUnknown'),
    choices: settings.get('welcomeChoices'),
  });
})

Ce code définit les points de terminaison mentionnés précédemment et la logique du chatbot pour rechercher les réponses correctes.

Une fois que vous avez terminé, cliquez sur “Déployer” en bas à droite de l’écran. Si tout se passe bien, vous devriez voir un message vert disant “Succès du déploiement de vos modifications !

Vérifiez que l’API fonctionne en envoyant une requête GET à l’index de l’API :

$ curl <your_webhost_url>

# Example: 
# curl https://chatbot.b4a.app/

{
  "content": "Hi there! 👋 I'm your digital assistant. Feel free to ask me anything!",
  "choices": [
    "Shipping",
    "Size guide",
    "Contact Us"
  ]
}

Connecter le Frontend au Backend

Pour faciliter la gestion des requêtes et des réponses HTTP, nous allons installer axios – un client HTTP extensible et simple à utiliser, basé sur des promesses, pour le navigateur et Node.js.

Pour l’installer, exécutez :

$ npm install axios

Ajoutez l’import en haut de App.js:

import axios from "axios";

Ensuite, définissez la baseURL en haut de App.js comme suit :

// src/App.js

const baseURL = "https://<url_to_your_web_hosting>/";  // make sure to replace me

Nous transmettrons baseURL à Axios à chaque demande.

Pour charger le message de bienvenue lorsque l’utilisateur ouvre le site web, nous pouvons utiliser le hook useEffect(). Collez le code suivant dans votre App.js:

// src/App.js

useEffect(() => {
  axios.get(baseURL).then(res => {
    setMessages([
      res.data,
    ])
  })
}, []);

Ce code soumet une requête GET à notre API Express et ajoute la réponse aux messages.

La dernière chose à faire est de modifier sendMessage() pour envoyer une requête POST au backend et ajouter la réponse aux messages. Pour ce faire, modifiez sendMessage() comme suit :

// src/App.js

const sendMessage = (content) => {
  // add the message to the state
  setMessages([
    ...messages,
    {
      content: content,
      isCustomer: true,
    }
  ]);

  // post the request and add the bot response to the state
  axios.post(baseURL + "ask", {
    content: content
  }).then(res => {
    console.log(res);
    setMessages(prevState => [
      ...prevState,
      res.data,
    ]);
  });
}

Pour améliorer l’interface utilisateur, vous pouvez coller le code suivant dans App.js pour faire défiler automatiquement la page vers le bas à chaque réponse :

// src/App.js

useEffect(() => {
  messagesListRef.current.scrollTop = messagesListRef.current.scrollHeight;
}, [messagesListRef, messages]);

Super, c’est ça !

Démarrez le serveur de développement et vérifiez que tout fonctionne.

Conclusion

Il n’est pas étonnant que les chatbots soient de plus en plus populaires. Leurs formidables avantages permettent aux entreprises d’améliorer leur service à la clientèle, d’accroître l’engagement des clients, de réduire les coûts, etc. Les experts affirment que l’ère des chatbots ne fait que commencer et qu’ils deviendront encore plus populaires à l’avenir !

Tout au long de ce tutoriel, nous avons expliqué ce qu’est un chatbot, examiné les différents types de chatbots, les plateformes de chatbots, et nous vous avons appris à construire votre propre chatbot. Le chatbot que nous avons construit fonctionnerait très bien dans un environnement d’assistance à la clientèle pour répondre à des questions simples.

Téléchargez le code source final depuis le dépôt GitHub.

Prochaines étapes :

1. Rendre le robot plus “intelligent” en ajoutant davantage de réponses à la base de données.
2. Intégrez le chatbot à votre site web.
3. Faites des recherches sur la manière d’améliorer votre chatbot en utilisant l’IA.

FAQ