React.js’de bir Chatbot nasıl oluşturulur?

Bu makalede size chatbotlar hakkında bilmeniz gereken her şeyi öğreteceğiz. Chatbot kullanmanın faydalarına, chatbot türlerine, kodsuz chatbot platformlarına ve özel chatbot çözümlerine bakacağız. Son olarak, React ve Back4app ile kendi özel kural tabanlı chatbotumuzu uygulayacağız.

Chatbot nedir?

Sohbet robotu, sesli komutlar, metin mesajları veya her ikisi aracılığıyla bir insan konuşmasını simüle etmek için tasarlanmış bir bilgisayar programıdır. Kural tabanlı bir bottan, müşterilerin sorularını anlayan ve özel yanıtlar üreten gelişmiş yapay zeka destekli bir chatbot’a kadar basit olabilir.

Sohbet robotları 2010’lardan bu yana giderek popülerlik kazanıyor ve neredeyse her işletmenin önemli bir parçası haline geliyor. Botlar, işletmelerin müşteri hizmetlerini geliştirmelerine, müşteri katılımını artırmalarına, maliyetleri düşürmelerine, kullanıcı deneyimini iyileştirmelerine ve müşteri verilerini toplamalarına olanak tanır.

Bugünlerde sohbet robotları web sitelerinde, mobil uygulamalarda, mobil mesajlaşma programlarında vb. hemen hemen her yerde bulunabiliyor. Büyük olasılıkla mobil cihazınızda Google Assistant, Siri ve Bixby gibi birkaç sanal asistan bile yüklüdür.

Chatbot’un Faydaları

Chatbot kullanmanın birçok faydası vardır. Bunlardan bazılarına göz atalım.

Maliyet etkinliği

Sohbet robotları basit görevleri yerine getirmede harikadır. Karmaşık sorguları bir insan müşteri hizmetleri temsilcisine yönlendirirken basit sorguları ele almak için programlanabilirler. Bu şekilde, işletmeniz mükemmel müşteri desteği sunmaya devam ederken işçilik maliyetlerini büyük ölçüde azaltabilir.

7/24 kullanılabilirlik

Sohbet robotları, insan operatörlere ihtiyaç duymadan 7/24 müşteri hizmeti ve desteği sağlamak için uygundur. Müşterileriniz farklı zaman dilimlerine dağılmışsa bu harika bir özelliktir.

Ölçeklenebilirlik

Botlar aynı anda yüksek hacimli etkileşimlerin üstesinden gelebilir. Bu da işletme verimliliğini artırır ve bekleme sürelerini ortadan kaldırarak daha memnun müşteriler elde edilmesini sağlar.

Kişiselleştirme

Dijital asistanlar, kullanıcılara bireysel özelliklerine veya davranışlarına göre kişiselleştirilmiş öneriler veya yanıtlar sunmak üzere programlanabilir. Bu, kullanıcı deneyimini büyük ölçüde iyileştirebilir, satışları artırabilir, güven oluşturabilir ve hatta müşteriyi elde tutmayı geliştirebilir.

Veri toplama

Chatbotlar müşteri verilerini toplayabilir ve bu da işletmelerin ürün ve hizmetlerini geliştirmeleri için faydalı olabilir. Ayrıca, yapay zeka tabanlı chatbotlar önceki konuşmalarından öğrenebilir ve zaman içinde daha iyi destek sunabilir.

Çoklu dil desteği

Botlar tek bir dille sınırlı değildir. Daha iyi botlardan bazıları bir sorunun hangi dilde sorulduğunu anlayabilir ve o dilde yanıt verebilir.

Chatbot Türleri

Her birinin kendine özgü yetenekleri ve kullanımları olan çeşitli chatbot türleri vardır. Bunları farklı özelliklere göre kategorize edebiliriz.

İstihbarat

Zeka, botun “akıllı” mı yoksa “aptal” mı olduğunu belirler. Aptal derken genellikle sabit kodlanmış kurallara sahip olan ve daha önce hiç görmedikleri soruları yanıtlayamayan kural tabanlı sohbet botlarından bahsediyoruz. Öte yandan, “akıllı” derken, müşterinin sorusunu anlamak ve özel bir yanıt oluşturmak için NLP (Doğal Dil İşleme) ve ML (Makine Öğrenimi) kullanan yapay zeka destekli sohbet botlarını kastediyoruz. Hibrit sohbet robotları, yapay zekanın yanı sıra kural tabanlı işlevsellik de kullanır.

• Kural tabanlı sohbet robotları
• Yapay zeka destekli sohbet robotları
• Hibrit sohbet robotları

Hizmet alanı

Hizmet alanı, chatbot’un amacının ne olduğunu belirler. Yaygın hizmet alanlarından bazıları şunlardır:

• Müşteri desteği
• Kişisel asistan (Bixby, Alexa, Amazon Echo)
• Sanal satış asistanı

Platform

Sohbet robotları çeşitli platformlara dağıtılabilir. Bir chatbotun nereye konuşlandırılacağının seçimi, özel kullanım durumuna ve hedef kitleye bağlı olacaktır.

• Web (kayan sohbet balonları, widget’lar)
• Mesajlaşma platformları (Facebook Messenger, Whatsapp, Viber)
• Mobil uygulamalar (Bixby, Siri, Google Asistan)
• IoT cihazları (akıllı hoparlörler, akıllı ev cihazları)

Eyalet

İki chatbot mimarisi vardır:

• Durum bilgisi olan sohbet robotları
• Durumsuz sohbet robotları

Durum bilgisine sahip sohbet robotları, kullanıcıyla önceki etkileşimlerin kaydını tutar ve yeni bir soru sorulduğunda bunu dikkate alır. Bu, daha kişiselleştirilmiş bir deneyim sunmalarını sağladığı için harika bir özelliktir. Genellikle daha karmaşıktırlar ve kodlanmaları daha zordur.

Öte yandan, durum bilgisi olmayan sohbet robotları önceki etkileşimleri dikkate almaz. Her mesajı bağımsız bir istek olarak ele alırlar. Daha basittirler, kişiselleştirilmiş bir deneyim sağlayamazlar ve yanıtlarını bağlama dayandıramazlar.

Chatbot Çözümleri

Chatbot platformları

Düşük kodlu veya kodsuz chatbot platformları, kutudan çıktığı gibi çalışan çözümlerdir. Kullanımı kolaydır, gelişmiş kodlama becerileri gerektirmez ve sohbet botunuzu kısa sürede çalışır hale getirmenize olanak tanır.

Genellikle sohbet botunuzun davranışını tanımlamanıza olanak tanıyan kullanımı kolay bir sürükle ve bırak düzenleyicisiyle birlikte gelirler. Web siteleri, Facebook Messenger, Slack, Whatsapp vb. dahil olmak üzere farklı platformlara kolayca dağıtılabilirler.

Özel botlara göre daha düşük seviyede kontrol ve özelleştirme sunarlar. Bu platformların en büyük dezavantajı satıcı kilitlenmesidir. Bir platformu seçtikten sonra kolayca başka bir platforma geçemezsiniz.

Bu tür platformlara birkaç örnek olarak Tidio, Landbot, ChatBot ve AgentBot verilebilir.

Özel bot

Özel botlar, herhangi bir işletmenin özel ihtiyaçlarına göre uyarlanabilen son derece özelleştirilebilir ve esnek çözümlerdir. Mevcut sistemler ve veritabanları ile sorunsuz entegrasyon sağlarlar.

Sıfırdan bir chatbot oluşturmak zor bir iş olduğundan, hazır bir chatbot platformu kullanmaktan daha uzun sürmesini ve daha pahalıya mal olmasını bekleyebilirsiniz. Hedefiniz gelişmiş bir yapay zeka botu oluşturmaksa, muhtemelen uzman geliştiricilerden oluşan bir ekibe de ihtiyacınız olacaktır.

Özel botlar hemen hemen her programlama dilinde yazılabilir. Çoğu geliştirici Python, Node.js, JavaScript ve Java’yı tercih ediyor. Bot oluşturma sürecini daha da basitleştirmek için aralarından seçim yapabileceğiniz bir dizi açık kaynaklı chatbot kütüphanesi vardır.

Bir Chatbot nasıl oluşturulur?

Eğitimin bu bölümünde, özel bir kural tabanlı chatbot oluşturacağız. Ön uç için React ve arka uç için Back4app kullanacağız.

Back4app nedir?

Back4app, geliştiricilerin özel mobil uygulamalar oluşturmasını ve sürdürmesini kolaylaştıran bir hizmet olarak bulutta barındırılan bir arka uç (BaaS) platformudur. Sezgisel bir kullanıcı arayüzü, güçlü bir gösterge paneli ve komut satırı arayüzü (CLI), anlık bildirimler, analizler, veri depolama ve daha fazlası gibi kullanışlı araçlar sağlar.

Ayrıca Flutter, React Native, Node.js, Angular, Android, iOS ve daha fazlası gibi tüm favori araçlarınız için SDK’lar sağlarlar!

Back4app’in temel özellikleri şunlardır:

• Elektronik tablo benzeri arayüz
• REST ve GraphQL Uygulama Programlama Arayüzleri – API’ler
• Canlı Sorgular
• Kimlik doğrulama (sosyal kimlik doğrulama dahil)
• Ölçeklenebilir Hosting
• Bildirimler

Daha fazla bilgi için lütfen Back4app Özellikleri bölümüne göz atın.

Back4app öngörülebilir ve anlaşılması kolay bir fiyatlandırma modeli izliyor. Platformu prototiplemek ve test etmek için harika olan cömert bir ücretsiz plan (kredi kartı gerekmez) sunarlar. Bu plan şunları içeriyor:

• 25 bin API isteği
• 250 MB veri depolama alanı
• 1 GB veri aktarımı
• 1 GB nesne depolama alanı

Back4app fiyatlandırması hakkında daha fazla bilgi için Fiyatlandırma sayfasına göz atın.

Proje Tanıtımı

Önceden tanımlanmış istek ve yanıtlara sahip basit bir sohbet robotu oluşturacağız. Chatbot metin ve görsellerle yanıt verebilecek ve son isteğe bağlı olarak farklı seçenekler görüntüleyebilecek. Ön uç React ile oluşturulacak ve arka uç için Back4app (Express ile) kullanacağız.

Önkoşullar:

• JavaScript ile deneyim
• React ve React Hooks ile deneyim
• HTTP istekleri ve yanıtları hakkında temel bilgiler
• BaaS (Backend as a Service) hakkında temel anlayış

Önce ön uç, sonra arka uç üzerinde çalışacağız ve son olarak iki parçayı birleştireceğiz.

Chatbot Ön Yüzü

React Uygulaması Oluşturma

Create React App üzerinden yeni bir React uygulaması oluşturarak başlayalım:

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

Bu, react-chatbot adında bir React uygulaması oluşturacak ve çalışma dizininizi değiştirecektir.

Ardından, projeyi başlatın:

$ npm start

Son olarak, web uygulamanızı görmek için http://localhost:3000/ adresini açın.

Material UI

UI oluşturma sürecini basitleştirmek için Google’ın Material Design’ını uygulayan açık kaynaklı bir React bileşen kütüphanesi olan Material UI ‘yi kullanacağız. Bileşen kütüphanesi, kutudan çıktığı gibi çalışan önceden oluşturulmuş bileşenlerin kapsamlı bir koleksiyonunu içerir.

Material UI’yi React Bootstrap veya Ant Design gibi farklı bir UI çerçevesiyle değiştirmekten çekinmeyin.

Projenize Material UI eklemek için çalıştırın:

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

Material UI varsayılan olarak Roboto yazı tipini kullanır. İle yükleyelim:

$ npm install @fontsource/roboto

Ardından, index.js dosyasına gidin ve aşağıdaki içe aktarmaları ekleyin:

// src/index.js

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

Kullanıcı Arayüzü

src klasöründeki App.js dosyasına gidin ve içeriğini aşağıdaki ile değiştirin:

// 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. Gönderme sırasında handleSubmit() işlevini çağıran bir mesaj girişi içeren basit bir form tanımladık.
2. Durumu işlemek için React useState() kancasını kullandık.
   • messageInput geçerli mesajdır
   • mesajlar mesajların listesidir
3. handleSubmit() mesaj girişini temizler ve mesajı duruma ekleyen sendMessage() işlevini çağırır.

Devam edelim, mesajları görüntülemek için bir bileşen oluşturalım.

src klasörü içinde components adında yeni bir klasör oluşturun ve bu klasör içinde Message.js adında aşağıdaki içeriğe sahip yeni bir dosya oluşturun:

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

Bu bileşen birkaç rastgele girdi(prop) alır ve ardından bir mesaj görüntüler.

• content — mesaj içeriği
• image — mesaj görüntüsü
• isCustomer — mesaj kullanıcı tarafından gönderilmişse true
• seçenekler — kullanıcının seçebileceği seçenekler
• handleChoice — bir seçenek seçildiğinde çağrılan işlev

Ardından, src klasöründe varlıklar adında bir klasör oluşturun ve sohbet robotunuzun avatar olarak kullanmasını istediğiniz bir resim koyun. Bunu kullanmaktan çekinmeyin.

Avatar resmini bot.png olarak adlandırdığınızdan veya Message.js dosyasındaki içe aktarma kısmını değiştirdiğinizden emin olun.

Son olarak, yeni oluşturulan bileşeni kullanmak için App.js ‘deki TODO’yu aşağıdaki gibi değiştirin:

// App.js

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

Dosyanın üst kısmına içe aktarmayı eklemeyi unutmayın:

import Message from "./components/Message";

Her şeyin iyi çalıştığından emin olmak için favori web tarayıcınızı açın ve http://localhost:3000 adresine gidin. Birkaç mesaj göndermeyi deneyin. Her şey iyi çalışıyorsa, kullanıcı arayüzüne eklenmelidirler:

Chatbot Arka Uç

Devam edelim, arka ucu uygulayalım.

Uygulama Oluştur

Aşağıdaki adımlar bir Back4app hesabınızın olmasını gerektirecektir. Zaten hesabınız varsa giriş yapın, yoksa devam edin ve ücretsiz hesap için kaydolun.

Back4app ile çalışmak için öncelikle bir uygulama oluşturmamız gerekiyor. Kontrol panelinize giriş yaptığınızda uygulamalarınızın listesini göreceksiniz. Yeni bir uygulama oluşturmak için “Yeni bir uygulama oluştur” seçeneğine tıklayın.

Özel bir ad verin, veritabanınız olarak “NoSQL Veritabanı “nı seçin ve ardından “Devam “a tıklayın.

Back4app, veritabanı, uygulama katmanı, ölçeklendirme, yedeklemeler ve güvenlik gibi uygulamanız için gereken her şeyi hazırlamak için birkaç dakikanızı ayıracaktır.

Uygulamanız hazır olduğunda, uygulamanızın kontrol paneline yönlendirileceksiniz.

Veritabanı

Sohbet robotu için veritabanı modellerini tanımlayalım.

Back4app kontrol paneline gidin ve ekranın sol tarafındaki “Veritabanı “nı seçin. Daha sonra “Sınıf oluştur” seçeneğine tıklayın, BotSettings adını verin, “Genel Okuma ve Yazma Etkin” seçeneğini işaretleyin ve “Sınıf oluştur ve sütun ekle” seçeneğine tıklayın.

Aşağıdaki sütunları ekleyin:

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

1. welcomeContent, kullanıcı sohbeti açtığında görüntülenecektir
2. welcomeChoices, kullanıcının bir mesaj girmeden seçebileceği varsayılan seçeneklerdir
3. chatbot bir mesaja yanıt bulamazsa responseUnknown döndürülür

Bundan sonra özel ayarlarla bir satır oluşturun. Örnek:

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

Ardından, aşağıdaki sütunlara sahip BotResponse adında başka bir sınıf oluşturun:

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

Sohbet robotu, belirli bir istek için doğru yanıtı aramak üzere bu modeli kullanacaktır. İlk olarak, mesajın herhangi bir requestExact sütununa eşit olup olmadığını ve herhangi bir requestKeywords içerip içermediğini kontrol edecektir. Yanıtlardan hiçbiri istekle eşleşmezse bir geri dönüş mesajı döndürülecektir.

Modeli oluşturduktan sonra devam edin ve birkaç yanıt oluşturun veya bu veri kümesini içe aktarın.

Web Hosting

Bir Express API (Cloud Code kullanarak) oluşturacağımız için, Back4app’in uygulamamızı barındırması ve internete herkese açık hale getirmesi için web barındırmayı etkinleştirmemiz gerekiyor.

Web barındırma özelliğini etkinleştirmek için Back4app kontrol panelinize gidin, uygulamanızı seçin, ekranın sol tarafındaki “Uygulama Ayarları “na ve ardından “Sunucu Ayarları “na tıklayın. “Webhosting ve Özel Alan Adları “nı arayın ve tekrar “Ayarlar “a tıklayın.

“Back4app Hosting’i Etkinleştir “e tıklayın ve bir alt alan adı seçin. Ben chatbot kullanacağım:

Son olarak, “Kaydet “e tıklayın.

Uygulamanız artık şu adresten erişilebilir olacak:

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

Bulut Kodu ile Express

Eğitimin bu bölümünde, ön ucumuzun kullanması için bir API oluşturmak üzere Cloud Code ve Express ‘i kullanacağız. API aşağıdaki uç noktalara sahip olacak:

1. / chatbot ayarlarını döndürür
2. /ask/ veritabanında bir isteği arar ve bir yanıt döndürür

Ekranın sağ tarafında “Cloud Code” > “Functions & Web Hosting” seçeneğini seçin ve aşağıdaki dizin yapısını oluşturmak için web arayüzünü kullanın:

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

Aşağıdaki içeriği package.json dosyasına yerleştirin:

// cloud/package.json

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

Back4app modülleri npm üzerinden indirmek için bu dosyayı kullanır. Daha sonra istekleri ayrıştırmak için ihtiyacımız olacağı için body-parser ekledik.

Express sunucusunu başlatmak için aşağıdakileri app.js içine yerleştirin:

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

Son olarak, routes.js içindeki rotaları şu şekilde tanımlayın:

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

Bu kod, doğru yanıtları aramak için daha önce bahsedilen uç noktaları ve sohbet robotu mantığını tanımlar.

İşiniz bittikten sonra ekranın sağ altındaki “Dağıt” düğmesine tıklayın. Her şey yolunda giderse “Değişikliklerinizi dağıtma işlemi başarılı!” yazan yeşil bir mesaj görmelisiniz.

API dizinine bir GET isteği göndererek API’nin çalıştığından emin olun:

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

Ön Uç ile Arka Ucu Bağlayın

HTTP istek ve yanıt işlemlerini biraz daha kolaylaştırmak için tarayıcı ve Node.js için genişletilebilir ve kullanımı kolay söz tabanlı bir HTTP istemcisi olan axios ‘u kuracağız.

Yüklemek için çalıştırın:

$ npm install axios

App.js dosyasının en üstüne içe aktarmayı ekleyin:

import axios from "axios";

Ardından, App.js ‘nin üst kısmında baseURL ‘yi aşağıdaki gibi tanımlayın:

// src/App.js

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

Her istekte baseURL ‘yi Axios’a ileteceğiz.

Kullanıcı web sitesini açtığında karşılama mesajını yüklemek için useEffect() kancasını kullanabiliriz. Aşağıdaki kodu App.js dosyanıza yapıştırın:

// src/App.js

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

Bu kod, Express API’mize bir GET isteği gönderir ve yanıtı mesajlara ekler.

Yapmamız gereken son şey, arka uca bir POST isteği göndermek ve yanıtı mesajlara eklemek için sendMessage() işlevini değiştirmektir. Bunu yapmak için sendMessage() işlevini şu şekilde değiştirin:

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

Kullanıcı deneyimini iyileştirmek için aşağıdaki kodu App.js dosyasına yapıştırarak her yanıtta otomatik olarak aşağıya kaydırabilirsiniz:

// src/App.js

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

Harika, işte bu!

Geliştirme sunucusunu çalıştırın ve her şeyin çalışıp çalışmadığını kontrol edin.

Sonuç

Sohbet robotlarının giderek daha popüler hale gelmesi hiç de şaşırtıcı değil. Sahip oldukları harika avantajlar, işletmelerin müşteri hizmetlerini iyileştirmelerine, müşteri katılımını artırmalarına, maliyetleri düşürmelerine vb. olanak tanıyor. Uzmanlar chatbot çağının daha yeni başladığını ve botların gelecekte daha da popüler hale geleceğini söylüyor!

Eğitim boyunca chatbotun ne olduğunu açıkladık, farklı chatbot türlerini ve chatbot platformlarını inceledik ve kendi chatbotunuzu nasıl oluşturacağınızı öğrettik. Oluşturduğumuz sohbet robotu, basit soruları yanıtlamak için bir müşteri destek ortamında harika çalışacaktır.

GitHub deposundan nihai kaynak kodunu alın.

Gelecek adımlar:

1. Veritabanına daha fazla yanıt ekleyerek botu “daha akıllı” hale getirin.
2. Sohbet robotunu web sitenizle entegre edin.
3. Yapay zeka kullanarak sohbet botunuzu nasıl geliştirebileceğinizi araştırın.

SSS