Filozofia mea este simplă. Pentru a deveni bun la ceva, trebuie să o faci mult.

Nu este suficient să o faci o dată. Trebuie să o faci din nou, iar și iar și iar. Nu se va termina niciodată. Am folosit aceeași filosofie pentru a mă pricepe la programare.

Un lucru pe care l-am observat în această călătorie este că este mult mai distractiv să construiești lucruri interesante și care arată bine. Lucruri de care poți să-ți arăți prietenilor și să fii mândru. Ceva care te face să fii încântat să începi când te așezi în fața tastaturii.

De aceea am construit un chatbot.

Care s-a transformat într-un pachet npm.

Deci, să construim unul împreună. Dacă doriți să faceți această provocare pe cont propriu, puteți merge direct la documentație (care este de fapt un chatbot). Sau, dacă sunteți un elev vizual, Am creat un tutorial pe YouTube.

ad-banner

Altfel, să mergem. Voi presupune că aveți Node instalat și acces la comanda npx. Dacă nu, du-te să-l iei aici.

Configurare inițială

// Run these commands from your command line
npx create-react-app chatbot
cd chatbot
yarn add react-chatbot-kit
yarn start

Aceasta ar trebui să instaleze pachetul npm și să deschidă serverul de dezvoltare la localhost: 3000.

Următorul se îndreaptă spre App.js și faceți aceste modificări:

import Chatbot from 'react-chatbot-kit'

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

Buna treaba. Ajungem acolo. Ar trebui să vedeți acest lucru pe serverul dvs. de dezvoltare acum:

Cum sa construiesti un chatbot cu React

Chatbot-ul are trei recuzite care trebuie incluse pentru ca acesta să funcționeze. În primul rând, are nevoie de o configurare care trebuie să includă un initialMessages proprietate cu obiecte de mesaj chatbot.

În al doilea rând, are nevoie de un MessageParser clasă care trebuie să implementeze o metodă de analiză.

În al treilea rând, are nevoie de un ActionProvider clasă care va implementa acțiuni pe care dorim să le luăm pe baza analizării mesajului.

Vom aprofunda acest lucru mai târziu. Deocamdata, du-te aici pentru a obține codul cazanului pentru a începe.

  • Pune MessageParser cod într-un fișier numit MessageParser.js
  • Pune ActionProvider cod într-un fișier numit ActionProvider.js
  • Puneți codul de configurare într-un fișier numit config.js

Când ați terminat, reveniți la dvs. App.js fișier și adăugați acest cod:

import React from 'react';
import Chatbot from 'react-chatbot-kit'
import './App.css';

import ActionProvider from './ActionProvider';
import MessageParser from './MessageParser';
import config from './config';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Chatbot config={config} actionProvider={ActionProvider} 	    messageParser={MessageParser} />
      </header>
    </div>
  );
}

Acum ar trebui să vedeți acest lucru pe localhost: 3000:

1611239526 623 Cum sa construiesti un chatbot cu React

Dulce. Acum avem chatbotul redat pe ecran și putem scrie în câmpul de introducere și îl putem trimite pentru a trimite un mesaj chatului. Dar când încercăm asta, nu se întâmplă nimic.

Înțelegerea modului în care funcționează chatbot-ul

Aici trebuie să facem un pit stop și să aruncăm o privire la modul în care MessageParser și ActionProvider interacționează pentru a face ca robotul nostru să acționeze.

Când botul este inițializat, fișierul initialMessages proprietatea din config este pusă în starea internă a chatbotului într-o proprietate numită messages, care este folosit pentru a reda mesaje pe ecran.

Mai mult, atunci când scriem și apăsăm butonul de trimitere în câmpul de chat, al nostru MessageParser (pe care am trecut-o drept recuzită la chatbot) îl cheamă parse metodă. Acesta este motivul pentru care această metodă trebuie implementată.

Să aruncăm o privire mai atentă la MessageParser cod de pornire:

class MessageParser {
  constructor(actionProvider) {
    this.actionProvider = actionProvider;
  }

  parse(message) {
    ... parse logic
  }
}

Dacă privim atent, această metodă este construită cu un actionProvider. Asta e lafel ActionProvider clasă pe care o transmitem drept recuzită chatbot-ului. Aceasta înseamnă că controlăm două lucruri – modul în care mesajul este analizat și ce acțiune trebuie luată pe baza analizei menționate.

Să folosim aceste informații pentru a crea un răspuns simplu chatbot. Mai întâi modificați MessageParser asa:

class MessageParser {
  constructor(actionProvider) {
    this.actionProvider = actionProvider;
  }

  parse(message) {
    const lowerCaseMessage = message.toLowerCase()
    
    if (lowerCaseMessage.includes("hello")) {
      this.actionProvider.greet()
    }
  }
}

export default MessageParser

Acum MessageParser primește mesajul utilizatorului, verificând dacă acesta include cuvântul „salut”. Dacă da, apelează greet metoda pe actionProvider.

În acest moment, acest lucru se va prăbuși, deoarece nu am implementat greet metodă. Să facem asta în continuare. Mergeți spre ActionProvider.js:

class ActionProvider {
  constructor(createChatBotMessage, setStateFunc) {
    this.createChatBotMessage = createChatBotMessage;
    this.setState = setStateFunc;
  }
  
  greet() {
    const greetingMessage = this.createChatBotMessage("Hi, friend.")
    this.updateChatbotState(greetingMessage)
  }
  
  updateChatbotState(message) {
 
// NOTE: This function is set in the constructor, and is passed in      // from the top level Chatbot component. The setState function here     // actually manipulates the top level state of the Chatbot, so it's     // important that we make sure that we preserve the previous state.
 
    
   this.setState(prevState => ({
    	...prevState, messages: [...prevState.messages, message]
    }))
  }
}

export default ActionProvider

Grozav. Acum, dacă introducem „salut” în câmpul de chat, obținem acest lucru înapoi:

1611239526 859 Cum sa construiesti un chatbot cu React

Fantastic. Acum, că putem controla analiza mesajului și răspunsul cu o acțiune, să încercăm să facem ceva mai complicat. Să încercăm să creăm un bot care să vă ofere resurse de învățare pentru limbajul de programare pe care îl solicitați.

Crearea unui bot de învățare

În primul rând, să ne întoarcem la a noastră config.js fișier și faceți câteva modificări ușoare:

import { createChatBotMessage } from 'react-chatbot-kit';

const config = { 
  botName: "LearningBot",
  initialMessages: [createChatBotMessage("Hi, I'm here to help. What do you want to learn?")],
  customStyles: {
    botMessageBox: {
      backgroundColor: "#376B7E",
    },
    chatButton: {
      backgroundColor: "#376B7E",
    },
  },
}

export default config

OK, așa că am adăugat câteva proprietăți aici și am schimbat mesajul nostru inițial. În special, am dat botului un nume și am schimbat culoarea messagebox și chatbutton componente.

1611239526 338 Cum sa construiesti un chatbot cu React

Bine. Acum ajungem la partea bună.

Nu numai că putem analiza mesajele și răspunde utilizatorului cu un mesaj chatbot, putem defini componente React personalizate pe care dorim să le redăm cu mesajul. Aceste componente pot fi orice ne dorim – sunt doar componente React simple.

Să încercăm prin crearea unei componente de opțiuni care să ghideze utilizatorul către posibile opțiuni.

În primul rând, definim componenta opțiunilor de învățare:

// in src/components/LearningOptions/LearningOptions.jsx

import React from "react";

import "./LearningOptions.css";

const LearningOptions = (props) => {
  const options = [
    { text: "Javascript", handler: () => {}, id: 1 },
    { text: "Data visualization", handler: () => {}, id: 2 },
    { text: "APIs", handler: () => {}, id: 3 },
    { text: "Security", handler: () => {}, id: 4 },
    { text: "Interview prep", handler: () => {}, id: 5 },
  ];

  const optionsMarkup = options.map((option) => (
    <button
      className="learning-option-button"
      key={option.id}
      onClick={option.handler}
    >
      {option.text}
    </button>
  ));

  return <div className="learning-options-container">{optionsMarkup}</div>;
};

export default LearningOptions;

// in src/components/LearningOptions/LearningOptions.css

.learning-options-container {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.learning-option-button {
  padding: 0.5rem;
  border-radius: 25px;
  background: transparent;
  border: 1px solid green;
  margin: 3px;
}

Acum că avem componenta noastră, trebuie să o înregistrăm la chatbot-ul nostru. Mergeți spre config.js și adăugați următoarele:

import React from "react";
import { createChatBotMessage } from "react-chatbot-kit";

import LearningOptions from "./components/LearningOptions/LearningOptions";

const config = {
initialMessages: [
    createChatBotMessage("Hi, I'm here to help. What do you want to 		learn?", {
      widget: "learningOptions",
    }),
  ],
 ...,
 widgets: [
     {
     	widgetName: "learningOptions",
    	widgetFunc: (props) => <LearningOptions {...props} />,
     },
 ],
}

Înțelegerea widgeturilor

Bine. Să luăm un aer și să explorăm ceea ce am făcut.

  1. Am creat LearningOptions componentă.
  2. Am înregistrat componenta sub widgets în configurația noastră.
  3. Am dat createChatbotMessage funcționează un obiect de opțiuni specificând ce widget să fie redat cu acest mesaj.

Rezultatul:

1611239526 355 Cum sa construiesti un chatbot cu React

Fantastic, dar de ce a trebuit să ne înregistrăm componenta în config ca funcție widget?

Dându-i o funcție, controlăm când efectuăm invocarea. Acest lucru ne permite spațiu pentru a decora widgetul cu proprietăți importante în chatbot.

Widgetul pe care îl definim va primi o serie de proprietăți de la chatbot (dintre care unele pot fi controlate de proprietățile de configurare):

  1. actionProvider – oferim actionProvider la widget pentru a executa acțiuni dacă este nevoie.
  2. setState – oferim chatbot-ului de nivel superior setState funcționează la widget în cazul în care trebuie să manipulăm starea.
  3. scrollIntoView – funcția de utilitate pentru a derula până în partea de jos a ferestrei de chat, dacă ar trebui să ajustăm vizualizarea.
  4. props – dacă definim orice elemente de recuzită în configurația widgetului, acestea vor fi transmise widgetului sub numele proprietății configProps.
  5. state – dacă definim starea personalizată în config, o putem asocia la widget folosind mapStateToProps proprietate

Dacă vă amintiți, am definit câteva opțiuni în LearningOptions componentă:

  const options = [
    { text: "Javascript", handler: () => {}, id: 1 },
    { text: "Data visualization", handler: () => {}, id: 2 },
    { text: "APIs", handler: () => {}, id: 3 },
    { text: "Security", handler: () => {}, id: 4 },
    { text: "Interview prep", handler: () => {}, id: 5 },
  ];

În prezent, acestea au un handler gol. Ceea ce vrem să facem acum este să înlocuim acest handler printr-un apel către actionProvider.

Deci, ce vrem să se întâmple când executăm aceste funcții? În mod ideal, am avea un fel de mesaj chatbot și un widget însoțitor care afișează o listă de linkuri către resurse utile pentru fiecare subiect. Deci, să vedem cum putem implementa acest lucru.

Mai întâi, trebuie să creăm componenta listei de linkuri:

// in src/components/LinkList/LinkList.jsx

import React from "react";

import "./LinkList.css";

const LinkList = (props) => {
  const linkMarkup = props.options.map((link) => (
    <li key={link.id} className="link-list-item">
      <a
        href={link.url}
        target="_blank"
        rel="noopener noreferrer"
        className="link-list-item-url"
      >
        {link.text}
      </a>
    </li>
  ));

  return <ul className="link-list">{linkMarkup}</ul>;
};

export default LinkList;

// in src/components/LinkList/LinkList.css

.link-list {
  padding: 0;
}

.link-list-item {
  text-align: left;
  font-size: 0.9rem;
}

.link-list-item-url {
  text-decoration: none;
  margin: 6px;
  display: block;
  color: #1d1d1d;
  background-color: #f1f1f1;
  padding: 8px;
  border-radius: 3px;
  box-shadow: 2px 2px 4px rgba(150, 149, 149, 0.4);
}

Grozav. Acum avem o componentă care poate afișa o listă de linkuri. Acum trebuie să îl înregistrăm în secțiunea widget a configului:

import React from "react";
import { createChatBotMessage } from "react-chatbot-kit";

import LearningOptions from "./components/LearningOptions/LearningOptions";
import LinkList from "./components/LinkList/LinkList";

const config = {
  ...
  widgets: [
    {
      widgetName: "learningOptions",
      widgetFunc: (props) => <LearningOptions {...props} />,
    },
    {
      widgetName: "javascriptLinks",
      widgetFunc: (props) => <LinkList {...props} />,
    },
  ],
};

export default config;

Până în prezent totul este bine, dar vrem să transmitem în mod dinamic recuzită la această componentă, astfel încât să o putem refolosi și pentru celelalte opțiuni. Aceasta înseamnă că trebuie să adăugăm o altă proprietate la obiectul widget din config:

import React from "react";
import { createChatBotMessage } from "react-chatbot-kit";

import LearningOptions from "./components/LearningOptions/LearningOptions";
import LinkList from "./components/LinkList/LinkList";

const config = {
  ...,
  widgets: [
    ...,
    {
      widgetName: "javascriptLinks",
      widgetFunc: (props) => <LinkList {...props} />,
      props: {
        options: [
          {
            text: "Introduction to JS",
            url:
              "https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/",
            id: 1,
          },
          {
            text: "Mozilla JS Guide",
            url:
              "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide",
            id: 2,
          },
          {
            text: "Frontend Masters",
            url: "https://frontendmasters.com",
            id: 3,
          },
        ],
      },
    },
  ],
};

export default config;

Acum aceste elemente de recuzită vor fi transmise către LinkList componentă drept recuzită.

Acum trebuie să mai facem două lucruri.

  1. Trebuie să adăugăm o metodă la actionProvider
class ActionProvider {
  constructor(createChatBotMessage, setStateFunc) {
    this.createChatBotMessage = createChatBotMessage;
    this.setState = setStateFunc;
  }

  handleJavascriptList = () => {
    const message = this.createChatBotMessage(
      "Fantastic, I've got the following resources for you on Javascript:",
      {
        widget: "javascriptLinks",
      }
    );

    this.updateChatbotState(message);
  };

  updateChatbotState(message) {
    // NOTICE: This function is set in the constructor, and is passed in from the top level Chatbot component. The setState function here actually manipulates the top level state of the Chatbot, so it's important that we make sure that we preserve the previous state.

    this.setState((prevState) => ({
      ...prevState,
      messages: [...prevState.messages, message],
    }));
  }
}

export default ActionProvider;

2. Trebuie să adăugăm această metodă ca handler în LearningOptions componentă:

import React from "react";

import "./LearningOptions.css";

const LearningOptions = (props) => {
  const options = [
    {
      text: "Javascript",
      handler: props.actionProvider.handleJavascriptList,
      id: 1,
    },
    { text: "Data visualization", handler: () => {}, id: 2 },
    { text: "APIs", handler: () => {}, id: 3 },
    { text: "Security", handler: () => {}, id: 4 },
    { text: "Interview prep", handler: () => {}, id: 5 },
  ];

  const optionsMarkup = options.map((option) => (
    <button
      className="learning-option-button"
      key={option.id}
      onClick={option.handler}
    >
      {option.text}
    </button>
  ));

  return <div className="learning-options-container">{optionsMarkup}</div>;
};

export default LearningOptions;

Bine! Asta a fost destul de multe informații. Dar dacă încercăm acum să facem clic pe opțiunea JavaScript din chatbot, obținem acest rezultat:

1611239526 752 Cum sa construiesti un chatbot cu React

Perfect. Dar nu vrem să ne oprim aici, la urma urmei acesta este un chatbot. Vrem să putem răspunde utilizatorilor care doresc să folosească și câmpul de introducere. Deci, trebuie să facem o nouă regulă în MessageParser.

Să ne actualizăm MessageParser.js fișierul să arate astfel:

class MessageParser {
  constructor(actionProvider) {
    this.actionProvider = actionProvider;
  }

  parse(message) {
    const lowerCaseMessage = message.toLowerCase();

    if (lowerCaseMessage.includes("hello")) {
      this.actionProvider.greet();
    }

    if (lowerCaseMessage.includes("javascript")) {
      this.actionProvider.handleJavascriptList();
    }
  }
}

export default MessageParser;

Acum încercați să tastați „javascript” în câmpul de introducere și să trimiteți mesajul. Ar trebui să obțineți aceeași listă ca răspuns din chatbot.

Deci, iată-l. Am creat un chatbot care redă o listă de opțiuni posibile și răspunde la introducerea utilizatorului.

Deocamdată, am configurat robotul de gestionat numai atunci când cineva face clic sau tastează JavaScript, dar puteți încerca să extindeți celelalte opțiuni pe cont propriu. Iată un link către depozit.

Tot codul este pe GitHub, așa că nu ezitați să vă scufundați codul sau documentele react-chatbot-kit.

Concluzie

Construirea lucrurilor este distractivă și o modalitate excelentă de a vă extinde setul de abilități. Nu există limite cu privire la locul în care ați putea lua acest lucru în continuare.

Poate că ați putea crea un chatbot care găsește produsul ideal în webshop pe baza unor întrebări simple (folosind rutare în aplicație) sau poate faceți unul pentru compania dvs. având grijă de cele mai frecvente întrebări ale clienților.

Simțiți-vă liber să vă extindeți, să veniți cu idei noi și să le testați. Și dacă vedeți ceva care poate fi îmbunătățit, trimiteți o cerere de extragere.

Dacă doriți să vă îmbunătățiți ca dezvoltator, vă încurajez să continuați să construiți. Este cu adevărat singura cale înainte. Dacă ți-a plăcut acest articol și ai vrea să știi când postez mai mult conținut, poți urmărește-mă pe Twitter.