Bagaimana cara membuat Chatbot di React.js?

Dalam artikel ini, kami akan mengajarkan Anda semua yang perlu Anda ketahui tentang chatbot. Kita akan melihat manfaat menggunakan chatbot, jenis-jenis chatbot, platform chatbot tanpa kode, dan solusi chatbot khusus. Terakhir, kita akan mengimplementasikan chatbot berbasis aturan khusus kita sendiri dengan React dan Back4app.

Apa yang dimaksud dengan Chatbot?

Chatbot adalah program komputer yang dirancang untuk mensimulasikan percakapan manusia melalui perintah suara, pesan teks, atau keduanya. Ini bisa sesederhana bot berbasis aturan hingga chatbot bertenaga AI canggih yang memahami pertanyaan pelanggan dan menghasilkan respons khusus.

Chatbots terus mendapatkan popularitas sejak tahun 2010-an dan merupakan bagian penting dari hampir setiap bisnis. Bot memungkinkan bisnis untuk meningkatkan layanan pelanggan mereka, meningkatkan keterlibatan pelanggan, menurunkan biaya, meningkatkan pengalaman pengguna, dan mengumpulkan data pelanggan.

Saat ini chatbot dapat ditemukan hampir di mana saja – di situs web, aplikasi seluler, pengirim pesan seluler, dan sebagainya. Kemungkinan besar Anda bahkan memiliki beberapa asisten virtual seperti Google Assistant, Siri, dan Bixby yang terinstal di perangkat seluler Anda.

Manfaat dari Chatbot

Ada banyak manfaat menggunakan chatbot. Mari kita lihat beberapa di antaranya.

Efektivitas biaya

Chatbot sangat bagus dalam menangani tugas-tugas sederhana. Mereka dapat diprogram untuk menangani pertanyaan sederhana sambil mengarahkan pertanyaan kompleks ke perwakilan layanan pelanggan manusia. Dengan cara ini, bisnis Anda dapat memangkas biaya tenaga kerja secara signifikan sambil tetap dapat menawarkan dukungan pelanggan yang hebat.

Ketersediaan 24/7

Chatbot nyaman untuk menyediakan layanan dan dukungan pelanggan 24/7, tanpa perlu operator manusia. Ini sangat bagus jika pelanggan Anda tersebar di berbagai zona waktu.

Skalabilitas

Bot dapat menangani volume interaksi yang tinggi secara bersamaan. Hal ini meningkatkan produktivitas bisnis dan menghilangkan waktu tunggu – menghasilkan pelanggan yang lebih puas.

Personalisasi

Asisten digital dapat diprogram untuk memberikan rekomendasi atau tanggapan yang dipersonalisasi kepada pengguna berdasarkan karakteristik atau perilaku individu mereka. Hal ini dapat sangat meningkatkan pengalaman pengguna, meningkatkan penjualan, membangun kepercayaan, dan bahkan meningkatkan retensi pelanggan.

Pengumpulan data

Chatbots dapat mengumpulkan data pelanggan, yang dapat berguna bagi bisnis untuk meningkatkan produk dan layanan mereka. Selain itu, chatbot berbasis AI dapat belajar dari percakapan sebelumnya dan menawarkan dukungan yang lebih baik dari waktu ke waktu.

Dukungan beberapa bahasa

Bot tidak terbatas pada satu bahasa saja. Beberapa bot yang lebih baik dapat mengenali dalam bahasa apa sebuah pertanyaan diajukan dan merespons dalam bahasa tersebut.

Jenis-jenis Chatbots

Ada beberapa jenis chatbot yang masing-masing memiliki kemampuan dan kegunaannya yang unik. Kita dapat mengkategorikannya berdasarkan properti yang berbeda.

Kecerdasan

Kecerdasan menentukan apakah bot itu “pintar” atau “bodoh”. Yang dimaksud dengan “bodoh” biasanya adalah chatbot berbasis aturan yang memiliki aturan yang dikodekan dan tidak dapat menjawab pertanyaan yang belum pernah mereka lihat sebelumnya. Di sisi lain, yang kami maksud dengan “pintar” adalah chatbot bertenaga AI yang menggunakan NLP (Pemrosesan Bahasa Alami) dan ML (Pembelajaran Mesin) untuk memahami pertanyaan pelanggan dan menghasilkan respons khusus. Chatbot hibrida menggunakan fungsionalitas berbasis aturan dan juga AI.

• Chatbot berbasis aturan
• Chatbot yang didukung AI
• Chatbot hibrida

Area layanan

Area layanan menentukan apa tujuan chatbot. Beberapa area layanan yang umum meliputi:

• Dukungan pelanggan
• Asisten pribadi (Bixby, Alexa, Amazon Echo)
• Asisten penjualan virtual

Platform

Chatbot dapat digunakan ke berbagai platform. Pilihan tempat untuk menerapkan chatbot akan tergantung pada kasus penggunaan dan target audiens tertentu.

• Web (gelembung obrolan mengambang, widget)
• Platform perpesanan (Facebook Messenger, Whatsapp, Viber)
• Aplikasi seluler (Bixby, Siri, Google Assistant)
• Perangkat IoT (speaker pintar, perangkat rumah pintar)

Negara

Ada dua arsitektur chatbot:

• Chatbot yang penuh perhatian
• Chatbot tanpa kewarganegaraan

Chatbot yang canggih menyimpan catatan interaksi sebelumnya dengan pengguna dan memperhitungkannya saat ada pertanyaan baru yang diajukan. Ini sangat bagus karena memungkinkan mereka menawarkan pengalaman yang lebih personal. Mereka umumnya lebih canggih dan lebih sulit untuk dikodekan.

Sebaliknya, chatbot tanpa kewarganegaraan tidak memperhitungkan interaksi sebelumnya. Mereka memperlakukan setiap pesan sebagai permintaan independen. Mereka lebih sederhana, tidak dapat memberikan pengalaman yang dipersonalisasi, dan tidak dapat mendasarkan jawaban mereka pada konteks.

Solusi Chatbot

Platform chatbot

Platform chatbot dengan kode rendah atau tanpa kode adalah solusi yang bekerja di luar kebiasaan. Platform ini mudah digunakan, tidak memerlukan keahlian pengkodean tingkat lanjut, dan memungkinkan Anda membuat chatbot Anda aktif dan berjalan dalam waktu singkat.

Mereka biasanya dilengkapi dengan editor seret dan lepas yang mudah digunakan yang memungkinkan Anda untuk menentukan perilaku chatbot Anda. Mereka dapat dengan mudah digunakan ke berbagai platform termasuk situs web, Facebook Messenger, Slack, Whatsapp, dan sebagainya.

Mereka menawarkan tingkat kontrol dan penyesuaian yang lebih rendah daripada bot khusus. Kelemahan terbesar dari platform ini adalah penguncian vendor. Setelah Anda memilih platform, Anda tidak dapat dengan mudah berpindah ke platform lain.

Beberapa contoh platform tersebut adalah Tidio, Landbot, ChatBot, dan AgentBot.

Bot khusus

Bot khusus adalah solusi yang sangat dapat disesuaikan dan fleksibel yang dapat disesuaikan dengan kebutuhan spesifik bisnis apa pun. Bot ini memungkinkan integrasi tanpa batas dengan sistem dan basis data yang sudah ada.

Karena membangun chatbot dari awal adalah tugas yang sulit, Anda dapat memperkirakan bahwa ini akan memakan waktu lebih lama dan lebih mahal daripada menggunakan platform chatbot yang sudah jadi. Jika tujuan Anda adalah membuat bot AI tingkat lanjut, Anda mungkin juga membutuhkan tim pengembang khusus.

Bot khusus dapat ditulis dalam hampir semua bahasa pemrograman. Sebagian besar pengembang memilih Python, Node.js, JavaScript & Java. Untuk lebih menyederhanakan proses pembuatan bot, ada sejumlah pustaka chatbot sumber terbuka yang dapat Anda pilih.

Bagaimana cara membuat Chatbot?

Pada bagian tutorial ini, kita akan membuat chatbot berbasis aturan khusus. Kita akan menggunakan React untuk frontend dan Back4app untuk backend.

Apa itu Back4app?

Back4app merupakan platform backend sebagai layanan (BaaS) yang di-hosting di cloud yang memudahkan para pengembang untuk membangun dan memelihara aplikasi seluler kustom. Platform ini menyediakan antarmuka pengguna yang intuitif, dasbor yang kuat, dan alat yang berguna seperti antarmuka baris perintah (CLI), notifikasi push, analisis, penyimpanan data, dan banyak lagi.

Mereka juga menyediakan SDK untuk semua alat favorit Anda seperti Flutter, React Native, Node.js, Angular, Android, iOS, dan banyak lagi!

Fitur-fitur utama Back4app meliputi:

• Antarmuka seperti spreadsheet
• Antarmuka Pemrograman Aplikasi REST dan GraphQL – API
• Pertanyaan Langsung
• Autentikasi (termasuk autentikasi sosial)
• Hosting yang dapat diskalakan
• Pemberitahuan

Untuk informasi lebih lanjut, silakan lihat Fitur Back4app.

Back4app mengikuti model harga yang dapat diprediksi dan mudah dimengerti. Mereka menawarkan paket gratis yang murah hati (tidak perlu kartu kredit) yang sangat bagus untuk membuat prototipe dan menguji platform. Paket ini mencakup:

• 25 ribu permintaan API
• Penyimpanan data 250 MB
• Transfer data 1 GB
• Penyimpanan objek 1 GB

Untuk informasi lebih lanjut tentang harga Back4app, lihatlah halaman Harga.

Pengenalan Proyek

Kami akan membuat chatbot sederhana dengan permintaan dan respons yang telah ditentukan sebelumnya. Chatbot akan dapat merespons dengan teks, gambar, dan menampilkan opsi yang berbeda berdasarkan permintaan terakhir. Frontend akan dibuat dengan React dan kita akan menggunakan Back4app (dengan Express) untuk backend.

Prasyarat:

• Pengalaman dengan JavaScript
• Pengalaman dengan React dan React Hooks
• Pemahaman dasar tentang permintaan dan respons HTTP
• Pemahaman dasar tentang BaaS (Backend sebagai Layanan)

Pertama-tama kita akan mengerjakan bagian depan, lalu bagian belakang dan terakhir menghubungkan kedua bagian tersebut.

Frontend Chatbot

Membuat Aplikasi React

Mari kita mulai dengan membuat aplikasi React baru melalui Create React App:

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

Ini akan membuat aplikasi React bernama react-chatbot dan mengubah direktori kerja Anda.

Selanjutnya, mulai proyek:

$ npm start

Terakhir, buka http://localhost:3000/ untuk melihat aplikasi web Anda.

Material UI

Untuk menyederhanakan proses pembuatan UI, kita akan menggunakan Material UI – sebuah pustaka komponen open-source React yang mengimplementasikan Desain Material Google. Pustaka komponen ini mencakup koleksi komponen prebuilt yang komprehensif yang bekerja di luar kotak.

Jangan ragu untuk menukar Material UI dengan framework UI yang berbeda seperti React Bootstrap atau Ant Design.

Untuk menambahkan Material UI ke dalam proyek yang Anda jalankan:

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

Material UI menggunakan font Roboto secara default. Mari kita instal dengan:

$ npm install @fontsource/roboto

Selanjutnya, buka index.js dan tambahkan impor berikut ini:

// src/index.js

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

Antarmuka Pengguna

Buka App.js di dalam folder src dan ganti isinya dengan yang berikut ini:

// 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. Kita telah mendefinisikan sebuah form sederhana dengan input pesan yang memanggil handleSubmit() pada saat submit.
2. Kami menggunakan hook React useState() untuk menangani state.
   • messageInput adalah pesan saat ini
   • pesan adalah daftar pesan
3. handleSubmit() menghapus masukan pesan dan memanggil sendMessage() yang menambahkan pesan ke state.

Selanjutnya, mari kita membuat komponen untuk menampilkan pesan.

Buat folder baru bernama components di dalam folder src dan di dalam folder tersebut buat file baru bernama Message.js dengan konten sebagai berikut:

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

Komponen ini mengambil beberapa input(alat peraga) sembarang dan kemudian menampilkan pesan.

• konten – isi pesan
• gambar — gambar pesan
• isCustomer — true jika pesan dikirim oleh pengguna
• pilihan – pilihan yang dapat dipilih pengguna
• handleChoice — fungsi yang dipanggil ketika sebuah pilihan dipilih

Selanjutnya, buat folder bernama aset di dalam folder src dan masukkan gambar yang Anda inginkan untuk digunakan sebagai avatar chatbot. Jangan ragu untuk menggunakan yang ini.

Pastikan untuk memberi nama gambar avatar bot.png atau ubah impor di Message.js.

Terakhir, untuk memanfaatkan komponen yang baru dibuat, ganti TODO di App.js seperti ini:

// App.js

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

Jangan lupa untuk menambahkan impor di bagian atas file:

import Message from "./components/Message";

Untuk memastikan semuanya bekerja dengan baik, buka browser web favorit Anda dan buka http://localhost:3000. Coba kirimkan beberapa pesan. Jika semuanya berfungsi dengan baik, pesan tersebut akan ditambahkan ke UI:

Backend Chatbot

Selanjutnya, mari kita mengimplementasikan backend.

Buat Aplikasi

Langkah-langkah berikut ini mengharuskan Anda memiliki akun Back4app. Jika Anda sudah memilikinya, silakan masuk dan mendaftar untuk akun gratis.

Untuk bekerja dengan Back4app, pertama-tama kita perlu membuat aplikasi. Saat Anda masuk ke dasbor, Anda akan melihat daftar aplikasi Anda. Klik pada “Buat aplikasi baru” untuk membuat aplikasi baru.

Beri nama khusus, pilih “NoSQL Database” sebagai basis data Anda, lalu klik “Lanjutkan”.

Back4app akan membutuhkan waktu beberapa saat untuk mempersiapkan semua yang diperlukan untuk aplikasi Anda seperti database, lapisan aplikasi, penskalaan, pencadangan & keamanan.

Setelah aplikasi Anda siap, Anda akan diarahkan ke dasbor aplikasi Anda.

Basis data

Mari kita tentukan model basis data untuk chatbot.

Masuk ke dasbor Back4app dan pilih “Database” di sisi kiri layar. Setelah itu klik “Buat kelas”, beri nama BotSettings, centang “Public Read and Write Enabled” dan klik “Buat kelas & tambahkan kolom”.

Tambahkan kolom-kolom berikut:

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

1. welcomeContent akan ditampilkan ketika pengguna membuka obrolan
2. welcomeChoices adalah pilihan default yang dapat dipilih pengguna tanpa memasukkan pesan
3. responseUnknown dikembalikan jika chatbot tidak dapat menemukan respons terhadap pesan

Setelah itu, buatlah baris dengan pengaturan khusus. Contoh:

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

Selanjutnya, buat kelas lain bernama BotResponse dengan kolom-kolom berikut:

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

Chatbot akan menggunakan model ini untuk mencari respons yang tepat untuk permintaan tertentu. Pertama-tama, chatbot akan memeriksa apakah pesan tersebut sama dengan kolom requestExact dan jika tidak, apakah pesan tersebut berisi requestKeywords. Jika tidak ada respons yang sesuai dengan permintaan, pesan fallback akan dikembalikan.

Setelah Anda membuat model, lanjutkan dengan membuat beberapa respons atau mengimpor dataset ini.

Hosting Web

Karena kita akan membuat API Express (menggunakan Cloud Code), kita perlu mengaktifkan web hosting untuk Back4app agar dapat menghosting aplikasi kita dan membuatnya dapat diakses secara publik di internet.

Untuk mengaktifkan fitur web hosting, buka dasbor Back4app Anda, pilih aplikasi Anda, klik “Pengaturan Aplikasi” di sisi kiri layar, lalu “Pengaturan Server”. Cari “Webhosting dan Domain Khusus” dan klik “Pengaturan” lagi.

Klik “Aktifkan Hosting Back4app” dan pilih nama subdomain. Saya akan menggunakan chatbot:

Terakhir, klik “Simpan”.

Aplikasi Anda sekarang dapat diakses di:

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

Express dengan Kode Cloud

Pada bagian tutorial ini, kita akan menggunakan Cloud Code dan Express untuk membuat API yang akan dikonsumsi oleh frontend kita. API akan memiliki titik akhir berikut ini:

1. / mengembalikan pengaturan chatbot
2. /ask/ mencari permintaan dalam basis data dan mengembalikan respons

Pada sisi kanan layar pilih “Cloud Code” > “Functions & Web Hosting” dan gunakan antarmuka web untuk membuat struktur direktori berikut:

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

Masukkan konten berikut ini ke dalam package.json:

// cloud/package.json

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

Back4app menggunakan file ini untuk mengunduh modul melalui npm. Kami menambahkan pengurai-badan karena kita akan membutuhkannya nanti untuk mengurai permintaan.

Letakkan yang berikut ini di dalam app.js untuk menginisialisasi server 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");

Terakhir, tentukan rute di dalam routes.js seperti ini:

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

Kode ini mendefinisikan titik akhir dan logika chatbot yang telah disebutkan sebelumnya untuk mencari respons yang benar.

Setelah Anda selesai, klik “Deploy” di bagian kanan bawah layar. Jika semuanya berjalan dengan baik, Anda akan melihat pesan hijau yang mengatakan “Sukses menerapkan perubahan Anda!”.

Pastikan API berfungsi dengan mengirimkan permintaan GET ke indeks 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"
  ]
}

Menghubungkan Frontend dengan Backend

Untuk membuat penanganan permintaan dan respons HTTP sedikit lebih mudah, kita akan menginstal axios – klien HTTP berbasis promise yang dapat diperluas dan mudah digunakan untuk peramban dan Node.js.

Untuk menginstalnya, jalankan:

$ npm install axios

Tambahkan impor di bagian atas App.js:

import axios from "axios";

Selanjutnya, tentukan baseURL di bagian atas App.js seperti ini:

// src/App.js

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

Kami akan meneruskan baseURL ke Axios dengan setiap permintaan.

Untuk memuat pesan selamat datang ketika pengguna membuka situs web, kita dapat menggunakan hook useEffect(). Tempelkan kode berikut ini di App.js Anda:

// src/App.js

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

Kode ini mengirimkan permintaan GET ke API Express kami dan menambahkan respons ke pesan.

Hal terakhir yang harus kita lakukan adalah memodifikasi sendMessage() untuk mengirimkan permintaan POST ke backend dan menambahkan respons ke pesan. Untuk melakukan itu, ubahlah sendMessage() seperti ini:

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

Untuk meningkatkan UX, Anda dapat menempelkan kode berikut ini ke dalam App.js untuk secara otomatis menggulir ke bawah ke bawah dengan setiap respons:

// src/App.js

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

Hebat, itu dia!

Jalankan server pengembangan dan periksa apakah semuanya berfungsi.

Kesimpulan

Tidak heran jika chatbot menjadi semakin populer. Manfaatnya yang luar biasa memungkinkan bisnis untuk meningkatkan layanan pelanggan, meningkatkan keterlibatan pelanggan, menurunkan biaya, dan lain-lain. Para ahli mengatakan bahwa era chatbot baru saja dimulai dan bot akan menjadi lebih populer di masa depan!

Sepanjang tutorial ini, kami telah menjelaskan apa itu chatbot, melihat berbagai jenis chatbot, platform chatbot, dan mengajari Anda cara membuat chatbot sendiri. Chatbot yang kami buat akan berfungsi dengan baik di lingkungan dukungan pelanggan untuk menjawab pertanyaan-pertanyaan sederhana.

Ambil kode sumber akhir dari repositori GitHub.

Langkah-langkah ke depan:

1. Jadikan bot “lebih pintar” dengan menambahkan lebih banyak respons ke database.
2. Integrasikan chatbot dengan situs web Anda.
3. Teliti cara meningkatkan chatbot Anda dengan menggunakan AI.

PERTANYAAN YANG SERING DIAJUKAN