Wie baut man einen Chatbot in React.js?

In diesem Artikel erfahren Sie alles, was Sie über Chatbots wissen müssen. Wir befassen uns mit den Vorteilen eines Chatbots, Arten von Chatbots, No-Code-Chatbot-Plattformen und benutzerdefinierten Chatbot-Lösungen. Schließlich werden wir unseren eigenen benutzerdefinierten regelbasierten Chatbot mit React und Back4app implementieren.

Was ist ein Chatbot?

Ein Chatbot ist ein Computerprogramm, das ein menschliches Gespräch durch Sprachbefehle, Textnachrichten oder beides simuliert. Dabei kann es sich um einen einfachen regelbasierten Bot bis hin zu einem fortgeschrittenen KI-gesteuerten Chatbot handeln, der die Fragen der Kunden versteht und individuelle Antworten generiert.

Chatbots erfreuen sich seit den 2010er Jahren immer größerer Beliebtheit und sind ein wichtiger Bestandteil fast aller Unternehmen. Bots ermöglichen es Unternehmen, ihren Kundenservice zu verbessern, die Kundenbindung zu erhöhen, Kosten zu senken, die Benutzererfahrung zu verbessern und Kundendaten zu sammeln.

Heutzutage sind Chatbots fast überall zu finden – auf Websites, in mobilen Apps, mobilen Messengern und so weiter. Wahrscheinlich haben Sie sogar ein paar virtuelle Assistenten wie Google Assistant, Siri und Bixby auf Ihrem Mobilgerät installiert.

Vorteile eines Chatbots

Der Einsatz eines Chatbots bietet viele Vorteile. Schauen wir uns einige von ihnen an.

Kosten-Wirksamkeit

Chatbots eignen sich hervorragend für die Bearbeitung einfacher Aufgaben. Sie können so programmiert werden, dass sie einfache Anfragen bearbeiten und komplexe Anfragen an einen menschlichen Kundenbetreuer weiterleiten. Auf diese Weise kann Ihr Unternehmen die Arbeitskosten erheblich senken und gleichzeitig einen hervorragenden Kundenservice bieten.

24/7 Verfügbarkeit

Chatbots sind praktisch für die Bereitstellung von Kundenservice und -support rund um die Uhr, ohne dass menschliche Mitarbeiter benötigt werden. Das ist großartig, wenn Ihre Kunden über verschiedene Zeitzonen verstreut sind.

Skalierbarkeit

Bots können eine große Anzahl von Interaktionen gleichzeitig bearbeiten. Dies steigert die Produktivität des Unternehmens und eliminiert Wartezeiten, was zu mehr zufriedenen Kunden führt.

Personalisierung

Digitale Assistenten können so programmiert werden, dass sie dem Nutzer auf der Grundlage seiner individuellen Eigenschaften oder seines Verhaltens personalisierte Empfehlungen oder Antworten geben. Dies kann das Nutzererlebnis erheblich verbessern, den Umsatz steigern, Vertrauen aufbauen und sogar die Kundenbindung verbessern.

Datenerhebung

Chatbots können Kundendaten sammeln, die für Unternehmen nützlich sein können, um ihre Produkte und Dienstleistungen zu verbessern. Außerdem können KI-basierte Chatbots aus früheren Gesprächen lernen und mit der Zeit einen besseren Support bieten.

Unterstützung mehrerer Sprachen

Bots sind nicht auf eine einzige Sprache beschränkt. Einige der besseren Bots können erkennen, in welcher Sprache eine Frage gestellt wurde, und in dieser Sprache antworten.

Arten von Chatbots

Es gibt verschiedene Arten von Chatbots, die jeweils ihre eigenen einzigartigen Fähigkeiten und Verwendungszwecke haben. Wir können sie anhand verschiedener Eigenschaften kategorisieren.

Geheimdienst

Die Intelligenz bestimmt, ob der Bot “intelligent” oder “dumm” ist. Mit “dumm” meinen wir in der Regel regelbasierte Chatbots, die fest kodierte Regeln haben und keine Fragen beantworten können, die sie noch nie gesehen haben. Mit “intelligent” hingegen meinen wir KI-gesteuerte Chatbots, die NLP (Natural Language Processing) und ML (Machine Learning) nutzen, um die Frage des Kunden zu verstehen und eine individuelle Antwort zu generieren. Hybride Chatbots nutzen sowohl regelbasierte Funktionen als auch KI.

• Regelbasierte Chatbots
• KI-gestützte Chatbots
• Hybride Chatbots

Servicebereich

Der Servicebereich bestimmt, was der Zweck des Chatbots ist. Einige der üblichen Servicebereiche sind:

• Kundenbetreuung
• Persönlicher Assistent (Bixby, Alexa, Amazon Echo)
• Virtueller Vertriebsassistent

Plattform

Chatbots können auf verschiedenen Plattformen eingesetzt werden. Die Entscheidung, wo ein Chatbot eingesetzt werden soll, hängt vom jeweiligen Anwendungsfall und der Zielgruppe ab.

• Web (schwebende Chat-Blasen, Widgets)
• Messaging-Plattformen (Facebook Messenger, Whatsapp, Viber)
• Mobile Anwendungen (Bixby, Siri, Google Assistant)
• IoT-Geräte (intelligente Lautsprecher, intelligente Haushaltsgeräte)

Staat

Es gibt zwei Chatbot-Architekturen:

• Zustandsabhängige Chatbots
• Zustandslose Chatbots

Stateful-Chatbots speichern frühere Interaktionen mit dem Nutzer und berücksichtigen diese, wenn eine neue Frage gestellt wird. Das ist großartig, denn so können sie ein personalisierteres Erlebnis bieten. Sie sind im Allgemeinen anspruchsvoller und schwieriger zu programmieren.

Zustandslose Chatbots hingegen berücksichtigen keine früheren Interaktionen. Sie behandeln jede Nachricht als eine unabhängige Anfrage. Sie sind einfacher, können kein personalisiertes Erlebnis bieten und ihre Antworten nicht auf den Kontext abstimmen.

Chatbot-Lösungen

Chatbot-Plattformen

Low-Code- oder No-Code-Chatbot-Plattformen sind Lösungen, die sofort funktionieren. Sie sind einfach zu bedienen, erfordern keine fortgeschrittenen Programmierkenntnisse und ermöglichen es Ihnen, Ihren Chatbot in kürzester Zeit zum Laufen zu bringen.

Sie verfügen in der Regel über einen einfach zu bedienenden Drag-and-Drop-Editor, mit dem Sie das Verhalten Ihres Chatbots definieren können. Sie können leicht auf verschiedenen Plattformen eingesetzt werden, darunter Websites, Facebook Messenger, Slack, Whatsapp und so weiter.

Sie bieten ein geringeres Maß an Kontrolle und Anpassung als benutzerdefinierte Bots. Der größte Nachteil dieser Plattformen ist die Bindung an einen bestimmten Anbieter. Sobald Sie sich für eine Plattform entschieden haben, können Sie nicht einfach zu einer anderen wechseln.

Einige Beispiele für solche Plattformen sind Tidio, Landbot, ChatBot und AgentBot.

Benutzerdefinierter Bot

Benutzerdefinierte Bots sind hochgradig anpassbare und flexible Lösungen, die auf die spezifischen Bedürfnisse eines jeden Unternehmens zugeschnitten werden können. Sie ermöglichen eine nahtlose Integration in bereits bestehende Systeme und Datenbanken.

Da die Erstellung eines Chatbots von Grund auf eine schwierige Aufgabe ist, müssen Sie damit rechnen, dass sie länger dauert und mehr kostet als die Nutzung einer fertigen Chatbot-Plattform. Wenn Sie einen fortschrittlichen KI-Bot erstellen möchten, benötigen Sie wahrscheinlich auch ein Team von spezialisierten Entwicklern.

Benutzerdefinierte Bots können in praktisch jeder Programmiersprache geschrieben werden. Die meisten Entwickler entscheiden sich für Python, Node.js, JavaScript und Java. Um den Prozess der Bot-Erstellung noch weiter zu vereinfachen, gibt es eine Reihe von Open-Source-Chatbot-Bibliotheken, aus denen Sie wählen können.

Wie baut man einen Chatbot?

In diesem Teil des Tutorials werden wir einen benutzerdefinierten regelbasierten Chatbot erstellen. Wir werden React für das Frontend und Back4app für das Backend verwenden.

Was ist Back4app?

Back4app ist eine in der Cloud gehostete Backend-as-a-Service-Plattform (BaaS), die es Entwicklern leicht macht, benutzerdefinierte mobile Anwendungen zu erstellen und zu pflegen. Sie bietet eine intuitive Benutzeroberfläche, ein leistungsstarkes Dashboard und nützliche Tools wie eine Befehlszeilenschnittstelle (CLI), Push-Benachrichtigungen, Analysen, Datenspeicherung und mehr.

Sie bieten auch SDKs für alle Ihre Lieblings-Tools wie Flutter, React Native, Node.js, Angular, Android, iOS & mehr!

Zu den wichtigsten Funktionen von Back4app gehören:

• Tabellenkalkulationsähnliche Schnittstelle
• REST- und GraphQL-Anwendungsprogrammierschnittstellen – APIs
• Live-Abfragen
• Authentifizierung (einschließlich sozialer Authentifizierung)
• Skalierbares Hosting
• Benachrichtigungen

Weitere Informationen finden Sie unter Back4app-Funktionen.

Back4app verfolgt ein berechenbares und leicht verständliches Preismodell. Sie bieten einen großzügigen kostenlosen Plan an (keine Kreditkarte erforderlich), der sich hervorragend für das Prototyping und Testen der Plattform eignet. Es umfasst:

• 25k API-Anfragen
• 250 MB Datenspeicher
• 1 GB Datenübertragung
• 1 GB Objektspeicher

Weitere Informationen über die Preise von Back4app finden Sie auf der Seite Preise.

Projekt-Einführung

Wir werden einen einfachen Chatbot mit vordefinierten Anfragen und Antworten erstellen. Der Chatbot wird in der Lage sein, mit Text und Bildern zu antworten und verschiedene Optionen basierend auf der letzten Anfrage anzuzeigen. Das Frontend wird mit React erstellt und wir werden Back4app (mit Express) für das Backend verwenden.

Voraussetzungen:

• Erfahrung mit JavaScript
• Erfahrung mit React und React Hooks
• Grundlegendes Verständnis von HTTP-Anfragen und -Antworten
• Grundlegendes Verständnis von BaaS (Backend as a Service)

Wir werden zuerst am Frontend arbeiten, dann am Backend und schließlich die beiden Teile miteinander verbinden.

Chatbot-Frontend

React-App erstellen

Beginnen wir mit der Erstellung einer neuen React-App über Create React App:

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

Dadurch wird eine React-App mit dem Namen react-chatbot erstellt und Ihr Arbeitsverzeichnis geändert.

Starten Sie dann das Projekt:

$ npm start

Öffnen Sie abschließend http://localhost:3000/, um Ihre Webanwendung zu sehen.

Material UI

Um den UI-Erstellungsprozess zu vereinfachen, verwenden wir Material UI – eine Open-Source-Bibliothek für React-Komponenten, die das Material Design von Google implementiert. Die Komponentenbibliothek enthält eine umfassende Sammlung vorgefertigter Komponenten, die sofort einsatzbereit sind.

Es steht Ihnen frei, Material UI gegen ein anderes UI-Framework wie React Bootstrap oder Ant Design auszutauschen.

Um Material UI zu Ihrem Projekt hinzuzufügen, führen Sie aus:

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

Material UI verwendet standardmäßig die Schriftart Roboto. Installieren wir sie mit:

$ npm install @fontsource/roboto

Navigieren Sie anschließend zu index.js und fügen Sie die folgenden Importe hinzu:

// src/index.js

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

Benutzeroberfläche

Navigieren Sie zu App.js im src-Ordner und ersetzen Sie dessen Inhalt durch den folgenden Text:

// 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. Wir haben ein einfaches Formular mit einem Meldungseingang definiert, der handleSubmit() beim Absenden aufruft.
2. Wir haben React useState()-Hook verwendet, um den Zustand zu behandeln.
   • messageInput ist die aktuelle Nachricht
   • messages ist die Liste der Nachrichten
3. handleSubmit() löscht den Nachrichteneingang und ruft sendMessage() auf, das die Nachricht an den Status anhängt.

Lassen Sie uns nun eine Komponente für die Anzeige der Nachrichten erstellen.

Erstellen Sie einen neuen Ordner namens components im Ordner src und erstellen Sie darin eine neue Datei namens Message.js mit folgendem Inhalt:

// 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>
  );
}

Diese Komponente nimmt einige beliebige Eingaben(Requisiten) entgegen und zeigt dann eine Meldung an.

• content — Inhalt der Nachricht
• image — Bild der Nachricht
• isCustomer — true, wenn die Nachricht vom Benutzer gesendet wird
• Auswahlmöglichkeiten — Auswahlmöglichkeiten, aus denen der Nutzer wählen kann
• handleChoice — die Funktion, die aufgerufen wird, wenn eine Auswahl getroffen wird

Als Nächstes erstellen Sie einen Ordner namens assets im src-Ordner und fügen dort ein Bild ein, das Ihr Chatbot als Avatar verwenden soll. Sie können gerne dieses Bild verwenden.

Vergewissern Sie sich, dass Sie das Avatarbild bot.png nennen oder ändern Sie den Import in Message.js.

Um die neu erstellte Komponente zu verwenden, ersetzen Sie das TODO in App.js wie folgt:

// App.js

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

Vergessen Sie nicht, den Import am Anfang der Datei hinzuzufügen:

import Message from "./components/Message";

Um sicherzugehen, dass alles gut funktioniert, öffnen Sie Ihren Lieblings-Webbrowser und navigieren Sie zu http://localhost:3000. Versuchen Sie, ein paar Nachrichten zu senden. Wenn alles gut funktioniert, sollten sie der Benutzeroberfläche hinzugefügt werden:

Chatbot Backend

Lassen Sie uns nun das Backend implementieren.

App erstellen

Für die folgenden Schritte benötigen Sie ein Back4app-Konto. Wenn Sie bereits ein Konto haben, loggen Sie sich ein, ansonsten melden Sie sich für das kostenlose Konto an.

Um mit Back4app zu arbeiten, müssen wir zunächst eine App erstellen. Wenn Sie sich in Ihrem Dashboard anmelden, sehen Sie die Liste Ihrer Apps. Klicken Sie auf “Build a new app”, um eine neue App zu erstellen.

Geben Sie ihr einen benutzerdefinierten Namen, wählen Sie “NoSQL-Datenbank” als Datenbank und klicken Sie auf “Weiter”.

Back4app nimmt sich einige Augenblicke Zeit, um alles vorzubereiten, was für Ihre App erforderlich ist, wie z. B. Datenbank, Anwendungsschicht, Skalierung, Backups und Sicherheit.

Sobald Ihre Anwendung fertig ist, werden Sie zum Dashboard Ihrer Anwendung weitergeleitet.

Datenbank

Lassen Sie uns die Datenbankmodelle für den Chatbot definieren.

Navigieren Sie zum Back4app-Dashboard und wählen Sie “Datenbank” auf der linken Seite des Bildschirms. Danach klicken Sie auf “Klasse erstellen”, nennen Sie sie BotSettings, setzen Sie ein Häkchen bei “Public Read and Write Enabled” und klicken Sie auf “Klasse erstellen & Spalten hinzufügen”.

Fügen Sie die folgenden Spalten hinzu:

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

1. welcomeContent wird angezeigt, wenn der Benutzer den Chat öffnet
2. welcomeChoices sind die Standardoptionen, aus denen der Nutzer wählen kann, ohne eine Nachricht einzugeben
3. responseUnknown wird zurückgegeben, wenn der Chatbot keine Antwort auf eine Nachricht findet

Danach erstellen Sie eine Zeile mit den benutzerdefinierten Einstellungen. Beispiel:

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

Erstellen Sie anschließend eine weitere Klasse namens BotResponse mit den folgenden Spalten:

+-----------+------------------+---------------+----------+
| 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       |
+-----------+------------------+---------------+----------+

Der Chatbot wird dieses Modell verwenden, um die richtige Antwort für eine bestimmte Anfrage zu finden. Zunächst wird geprüft, ob die Nachricht mit einer requestExact-Spalte übereinstimmt und wenn nicht, ob sie requestKeywords enthält. Wenn keine der Antworten mit der Anfrage übereinstimmt, wird eine Fallback-Nachricht zurückgegeben.

Nachdem Sie das Modell erstellt haben, erstellen Sie ein paar Beantwortungen oder importieren Sie den Datensatz.

Webhosting

Da wir eine Express-API (mit Cloud Code) erstellen werden, müssen wir das Webhosting für Back4app aktivieren, um unsere App zu hosten und sie öffentlich im Internet zugänglich zu machen.

Um die Webhosting-Funktion zu aktivieren, navigieren Sie zu Ihrem Back4app-Dashboard, wählen Sie Ihre App aus, klicken Sie auf “App-Einstellungen” auf der linken Seite des Bildschirms und dann auf “Servereinstellungen”. Suchen Sie nach “Webhosting und eigene Domains” und klicken Sie erneut auf “Einstellungen”.

Klicken Sie auf “Back4app Hosting aktivieren” und wählen Sie einen Subdomainnamen. Ich werde Chatbot verwenden:

Klicken Sie abschließend auf “Speichern”.

Ihre App wird nun unter folgender Adresse zugänglich sein:

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

Express mit Cloud Code

In diesem Abschnitt des Tutorials werden wir Cloud Code und Express verwenden, um eine API zu erstellen, die unser Frontend nutzen kann. Die API wird die folgenden Endpunkte haben:

1. / gibt die Chatbot-Einstellungen zurück
2. /ask/ sucht in der Datenbank nach einer Anfrage und gibt eine Antwort zurück

Wählen Sie auf der rechten Seite des Bildschirms “Cloud Code” > “Functions & Web Hosting” und erstellen Sie über die Weboberfläche die folgende Verzeichnisstruktur:

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

Fügen Sie den folgenden Inhalt in package.json ein:

// cloud/package.json

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

Back4app verwendet diese Datei, um Module über npm herunterzuladen. Wir haben body-parser hinzugefügt, da wir ihn später zum Parsen von Anfragen benötigen.

Fügen Sie Folgendes in app.js ein, um den Express-Server zu initialisieren:

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");

Schließlich definieren Sie die Routen in routes.js wie folgt:

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'),
  });
})

Dieser Code definiert die zuvor erwähnten Endpunkte und die Chatbot-Logik, um die richtigen Antworten zu finden.

Wenn Sie fertig sind, klicken Sie unten rechts auf dem Bildschirm auf “Bereitstellen”. Wenn alles gut geht, sollten Sie eine grüne Meldung sehen, die besagt, dass die Bereitstellung Ihrer Änderungen erfolgreich war.

Stellen Sie sicher, dass die API funktioniert, indem Sie eine GET-Anfrage an den API-Index senden:

$ 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"
  ]
}

Frontend mit Backend verbinden

Um die Bearbeitung von HTTP-Anfragen und -Antworten ein wenig zu vereinfachen, installieren wir axios – einen erweiterbaren und einfach zu verwendenden, auf Versprechen basierenden HTTP-Client für den Browser und Node.js.

Zum Installieren führen Sie es aus:

$ npm install axios

Fügen Sie den Import am Anfang von App.js hinzu:

import axios from "axios";

Als nächstes definieren Sie die baseURL am Anfang von App.js wie folgt:

// src/App.js

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

Wir übergeben baseURL mit jeder Anfrage an Axios.

Um die Willkommensnachricht zu laden, wenn der Benutzer die Website öffnet, können wir den useEffect()-Hook verwenden. Fügen Sie den folgenden Code in Ihre App.js ein:

// src/App.js

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

Dieser Code sendet eine GET-Anfrage an unsere Express-API und fügt die Antwort an die Nachrichten an.

Als letztes müssen wir sendMessage() ändern, um eine POST-Anfrage an das Backend zu senden und die Antwort an die Nachrichten anzuhängen. Ändern Sie dazu sendMessage() wie folgt:

// 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,
    ]);
  });
}

Um die Benutzerfreundlichkeit zu verbessern, können Sie den folgenden Code in App.js einfügen, um bei jeder Antwort automatisch nach unten zu scrollen:

// src/App.js

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

Gut, das war’s!

Starten Sie den Entwicklungsserver und prüfen Sie, ob alles funktioniert.

Schlussfolgerung

Es ist kein Wunder, dass Chatbots immer beliebter werden. Ihre fantastischen Vorteile ermöglichen es Unternehmen, ihren Kundenservice zu verbessern, die Kundenbindung zu erhöhen, Kosten zu senken und vieles mehr. Experten sagen, dass die Chatbot-Ära erst am Anfang steht und dass Bots in Zukunft noch beliebter werden!

Im Laufe des Tutorials haben wir erklärt, was ein Chatbot ist, verschiedene Chatbot-Typen und Chatbot-Plattformen vorgestellt und Ihnen gezeigt, wie Sie Ihren eigenen Chatbot erstellen können. Der Chatbot, den wir gebaut haben, eignet sich hervorragend für die Beantwortung einfacher Fragen in einer Kundensupportumgebung.

Holen Sie sich den endgültigen Quellcode aus dem GitHub-Repository.

Künftige Schritte:

1. Machen Sie den Bot “intelligenter”, indem Sie mehr Antworten in die Datenbank aufnehmen.
2. Integrieren Sie den Chatbot in Ihre Website.
3. Recherchieren Sie, wie Sie Ihren Chatbot mit Hilfe von KI verbessern können.

FAQ