Créer un chatbot

[SailorEudes 431]

Pour avoir accès à cette image, merci de vous connecter.

 

 

Bien le bonjour à toi moussaillon et bienvenue sur mon tout nouveau tutoriel sur lequel je vais t'apprendre à créer ton propre Chatbot sous ReactJS.

 

Le niveau attendu pour ce petit tutoriel, n'est pas celui d'un développeur avancé, je te rassure, j'ai fait en sorte de partir sur ce tutoriel de sorte que tu puisses créer de manière proactive ce petit Chatbot qui a le mérite d'être mis à l'honneur aujourd'hui.

 

Avant de commencer, je vais d'abord parler des informations complémentaires à connaître avant de se lancer sur ce tutoriel afin de faire un petit tour d'horizon sur ce qui t'attend dans ce tutoriel.

 

Citation

C'est quoi un "Chatbot" ?
"Un chatbot aussi nommé dialogueur ou agent conversationnel, est un agent qui dialogue avec un utilisateur. La recherche sur cette interface personne-machine est influencée par la compétition sur le test de Turing : donner l'illusion qu'un programme pense par un dialogue sensé."

Source :

Pour avoir accès à ce lien, merci de vous connecter.

 

Citation

C'est utile pour faire quoi un "Chatbot" ?
"Les chatbots ont un intérêt pour tous les domaines qui touchent la vie quotidienne : ils permettent d’acheter des produits ou des services, de résoudre un problème, de faire une réclamation, de payer une facture, de prendre rendez-vous… Ils permettent surtout d’obtenir une réponse instantanée à une question posée par un utilisateur. Et on comprend vite l’intérêt que cela présente pour l’entreprise, en matière de relation-client."

Source :

Pour avoir accès à ce lien, merci de vous connecter.

 

Citation

Qui a créé la dépendance du "Chatbot" présenté aujourd'hui ?
Le "Chatbot" que je vais te présenter aujourd'hui n'a pas été créé par moi pour rappel, je ne suis que la passerelle entre le développeur de cette dépendance et la mise en place de cette dépendance pour de la production. Le développeur de ce Chatbot est

Pour avoir accès à ce lien, merci de vous connecter.

, je le remercie de nous avoir pimpé cette petite pépite très utile quand on voit qu'il y a des heures et des heures de développement lorsqu'il s'agit d'autres Chatbot. Ce que j'ai apprécié le plus sur ce Chatbot, et ce qui m'a encouragé à faire un tutoriel en ce sens, c'est la maniabilité, la documentation et la rapidité de mise en place.

 

Dans ce tutoriel, je vais essayer d'être plutôt bref quant à l'utilisation et la mise en place de ce Chatbot, mais une personne peut-être plus compétente que moi pourra reprendre mon tutoriel et le proposer dans un niveau un peu plus poussé.

En cas de question, ou de problème de tous ordres que ce soit, je ne serais pas en mesure de te répondre, et je t'inviterai à te diriger vers le développeur de ce système, car mon objectif n'est pas celui de t'assister, mais bel et bien celui de te parler d'une petite dépendance plutôt sympa et de sa mise en production pour une utilisation "basique".

Bon, je pense avoir été assez explicite à ce sujet, je vais donc commencer ce petit tutoriel.

Je te demanderais concentration et intéressement, sinon, aucun intérêt de te lancer sur ce tutoriel. Pour rappel, même un débutant est en mesure de mettre en place ce Chatbot.
 

Pour avoir accès à cette image, merci de vous connecter.

 

Avant de commencer, il faudra te munir de certains éléments, sinon, tu ne pourras pas te lancer sur la conception de ce petit Chatbot, alors, voici les étapes à suivre :
 

I : Créer une application ReactJS

Pour ça, je pense que tu es assez grand, j'aurais pu t'envoyer vers un lien (comme beaucoup de développeurs le font), mais tant qu'à faire les choses biens, autant les faire jusqu'au bout, dans ta CMD tu écriras :
 

npx create-react-app monchatbot

cd monchatbot

npm start

Une fois que tu auras fait ça, tu pourras éteindre ton app, et installer la dépendance du "ChatBot" :

 

npm install react-simple-chatbot --save

 

Étape BONUS et facultative (mise à jour de toutes les dépendances en une seule commande) :

[hide]

npm install -g npm-check-updates

 

Ensuite pour vérifier les dépendances :
 

ncu -u

npm update

npm install

 

Eh voilà, toutes tes dépendances ont été mises à jour ! Tu peux passer à l'étape suivante moussaillon !
[/hide]

Tu devras ensuite te rendre dans le dossier "src" et tu devras supprimer les fichiers "App.css", "index.css" et "logo.svg" tout en créant le dossier "components" ce qui devrait te donner :

Pour avoir accès à cette image, merci de vous connecter.

 

Une fois le tout fait, tu devras te rendre dans le dossier "components" et créer un fichier "Chatbot.jsx" où tu mettras ce code :

 

import React from 'react';
import { ThemeProvider } from 'styled-components';
import ChatBot from 'react-simple-chatbot';

// Theming
const theme = {
    background: '#f5f8fb',
    fontFamily: 'Helvetica Neue',
    headerBgColor: '#EF6C00',
    headerFontColor: '#fff',
    headerFontSize: '15px',
    botBubbleColor: '#EF6C00',
    botFontColor: '#fff',
    userBubbleColor: '#fff',
    userFontColor: '#4a4a4a',
};

// Stepping
const steps = [
    {
        id: '1', // ID de l'étape
        message: 'A quel numéro je pense ?', // Contenu du message
        trigger: '2', // ID du déclencheur
    },
    {
        id: '2',
        options: [
            { value: 1, label: 'Numéro 1', trigger: '4' },
            { value: 2, label: 'Numéro 2', trigger: '3' },
            { value: 3, label: 'Numéro 3', trigger: '3' },
        ],
    },
    {
        id: '3',
        message: 'Mauvaise réponse, essayez à nouveau.',
        trigger: '2',
    },
    {
        id: '4',
        message: 'Génial ! Tu es un télépathe !',
        end: true,
    },
];

const TheBot = () => (
    <ThemeProvider theme={theme}>
        <ChatBot
            steps={steps}
            floating="true"
            placeholder="Écrire..."
        />
    </ThemeProvider>
);

export default TheBot;

Une fois ce code de fait, tu devras te rendre dans le fichier "src/App.js" où tu remplaceras le tout par :

 

import Chatbot from './components/Chatbot';

function App() {
  return (
    <div className="App">
      <Chatbot />
    </div>
  );
}

export default App;

 

Après avoir fait ça, tu pourras relancer ton app, en exécutant dans ton CMD :
 

yarn start

 

Normalement, une fois lancée, une fenêtre (ou onglet) de ton navigateur s'ouvrira et tu auras ce résultat :

 

Pour avoir accès à cette image, merci de vous connecter.

 

Eh voilà, tu peux maintenant dire que tu es le fondateur d'un petit Chatbot !
Comme je disais un peu plus haut, je n'irais pas plus loin dans la conception de ce chatbot, MAIS, je te laisse le lien de la documentation :

Pour avoir accès à ce lien, merci de vous connecter.

 

Pour avoir accès à cette image, merci de vous connecter.

 

Le Theming :

 

// Theming
const theme = {
    background: '#f5f8fb',
    fontFamily: 'Helvetica Neue',
    headerBgColor: '#EF6C00',
    headerFontColor: '#fff',
    headerFontSize: '15px',
    botBubbleColor: '#EF6C00',
    botFontColor: '#fff',
    userBubbleColor: '#fff',
    userFontColor: '#4a4a4a',
};

 

Concrètement, nous avons créé ce que l'on appelle un "

Pour avoir accès à ce lien, merci de vous connecter.

" que l'on a baptisé "theme" et cet objet reprends l'intégralité des possibilités de modifications que

Pour avoir accès à ce lien, merci de vous connecter.

a mise sur son système dans l'objectif de nous faciliter la tâche lors de l'intégration de son système en matière de personnalisation.

Si tu sais un minimum comprendre l'Anglais, tu dois avoir compris que chaque sous-objet cible un élément de customisation en particulier, mais je vais essayer de te faire ça en Français :

 

// Theming
const theme = {
    background: '#f5f8fb', // Fond du Chat
    fontFamily: 'Helvetica Neue', // Police du chat
    headerBgColor: '#EF6C00', // Fond de l'en-tête du Chat
    headerFontColor: '#fff', // Couleur des polices de l'en-tête du Chat
    headerFontSize: '15px', // Taille des polices de l'en-tête du Chat
    botBubbleColor: '#EF6C00', // Couleur des bulles "bot" du Chat
    botFontColor: '#fff', // Couleur des textes "bot" du Chat
    userBubbleColor: '#fff', // Couleur des bulles "utilisateur" du Chat
    userFontColor: '#4a4a4a', // Couleur des textes "utilisateur" du Chat
};

 

À partir de ces configs, on peut commencer à jouer avec les différents éléments dans l'objectif de créer une certaine harmonie de couleurs correspondant au site ou à la page définitive de notre Chatbot.

 

Les ID's et Déclencheurs :
 

const steps = [
    {
        id: '1',
        message: 'A quel numéro je pense ?',
        trigger: '2',
    },
    {
        id: '2',
        options: [
            { value: 1, label: 'Numéro 1', trigger: '4' },
            { value: 2, label: 'Numéro 2', trigger: '3' },
            { value: 3, label: 'Numéro 3', trigger: '3' },
        ],
    },
    {
        id: '3',
        message: 'Mauvaise réponse, essayez à nouveau.',
        trigger: '2',
    },
    {
        id: '4',
        message: 'Génial ! Tu es un télépathe !',
        end: true,
    },
];

 

Dans chaque logique en Javascript et même dans la vie de tous les jours, chaque élément peut avoir un parent et un enfant. 

Partons de ce principe-là pour expliquer le code ci-dessus. 

ID : Il doit être unique à un élément afin que cet élément puisse lui-même être accessible par une suite d'autres éléments (dans ce contexte-là bien sûr)
Déclencheur (trigger) : C'est la porte entre chaque ID, un exemple de question que va se poser le code : 
 

Citation

"Quand j'ai fini avec l'élément ayant pour ID n°1, quel autre ID (trigger) je déclenche ? (dans ce cas)"

Dans ce Chatbot, à partir du moment ou tu as compris cette notion de parent, d'enfant et de déclencheur, tu peux te poser d'autres questions, comme par exemple, la méthode "end".

Rien de plus simple, c'est un mot en Anglais qui définit si OUI ou NON tel ID marque la fin de la suite des éléments qui l'ont précédé. Dans notre cas, si "end" est défini sur "true", ça veut dire qu'à partir du moment où nous serons passé par cet ID, tout le script sera marqué comme "fin", et il n'y aura donc plus aucune interaction entre le Chatbot et l'utilisateur (dans notre cas).

Je n'irais pas plus loin dans mes explications, car l'objectif de ce tutoriel est celui de se rapprocher d'une dépendance qui peut faciliter la vie lorsque l'on recherche un moyen d'intégrer un Chatbot fluide, propre et sécurisé sur son site internet.

Bien d'autres Chatbot existe sur le net

Pour avoir accès à ce lien, merci de vous connecter.

, mais j'ai préféré m'arrêter sur le plus simple afin de te transmettre les bases de celui-ci, qui te permettront par la suite de te lancer dans la conception d'autres Chatbot bien plus élaborés, avec

Pour avoir accès à ce lien, merci de vous connecter.

par exemple.

 

 

Pour avoir accès à cette image, merci de vous connecter.

 

Avant de publier ce tutoriel, j'ai bien sûr intégré ce Chatbot sur une page en particulier, car comme pour toutes nouvelles choses, on se doit de les étudier de manière proactive et réfléchit afin de pouvoir avoir la possibilité de les partager de manière intelligente auprès d'autres utilisateurs.

Tu peux tester le Chatbot que j'ai mis en place avec cette méthode et avec quelques petites subtilités en

Pour avoir accès à ce lien, merci de vous connecter.

.

 

 

Pour avoir accès à cette image, merci de vous connecter.

 

Comme beaucoup parmi vous, il y a des flemmards, qui n'ont pas l'envie de suivre un tutoriel, alors, je partage le code, ainsi que la version de production déjà prête à être intégrés sur le web.

Pour rappel, une personne qui souhaite apporter des modifications se doit de modifier les fichiers concernés et de faire un  :
 

yarn build

Pour pouvoir obtenir la version intégrable, mais avec les modifications apportées.

Si tu télécharges ce qui arrive ci-dessous, tu devras tout de même lancer cette commande dans le dossier dans lequel tu auras décompressé le système si tu souhaites pouvoir le modifier :
 

npm i

Si tu souhaites ne faire aucune modification et intégrer le système tel quel, il te suffit d'envoyer le contenu du dossier "build" sur ton FTP et de nexter l'étape précédente.

Voici le lien de téléchargement :

[hide]

Pour télécharger, c'est

Pour avoir accès à ce lien, merci de vous connecter.

.
[/hide]

Et voilà, ce tutoriel arrive à sa fin, n'hésite pas à laisser un petit message ou une petite réaction si ce sujet te plaît et que tu souhaites que j'en fasse d'autres !

Et que la mer soit avec toi moussaillon !

[Python 32]

Merci du partage

[Asare 2]

Merci

[Ohkiii 0]

ty