كيفية إنشاء روبوت محادثة في React.js؟

في هذه المقالة، سنعلمك كل ما تحتاج إلى معرفته عن روبوتات الدردشة الآلية. سنلقي نظرة على فوائد استخدام روبوتات الدردشة الآلية، وأنواع روبوتات الدردشة الآلية، ومنصات الدردشة الآلية التي لا تحتوي على رموز، وحلول روبوتات الدردشة الآلية المخصصة. أخيرًا، سنقوم بتنفيذ روبوت الدردشة الآلي المخصص القائم على القواعد باستخدام React و Back4app.

ما هو روبوت المحادثة؟

روبوت الدردشة الآلية هو برنامج كمبيوتر مصمم لمحاكاة محادثة بشرية من خلال الأوامر الصوتية أو الرسائل النصية أو كليهما. يمكن أن يكون بسيطًا مثل روبوت الدردشة الآلي القائم على القواعد إلى روبوت دردشة آلي متقدم مدعوم بالذكاء الاصطناعي يفهم أسئلة العملاء ويولد ردودًا مخصصة.

لقد اكتسبت روبوتات الدردشة الآلية شعبية متزايدة منذ عام 2010، وهي جزء مهم في كل الأعمال التجارية تقريباً. تتيح الروبوتات للشركات تحسين خدمة العملاء، وزيادة مشاركة العملاء، وخفض التكاليف، وتحسين تجربة المستخدم، وجمع بيانات العملاء.

في هذه الأيام، يمكن العثور على روبوتات الدردشة الآلية في أي مكان تقريبًا – على مواقع الويب وتطبيقات الجوال وبرامج المراسلة على الجوال وما إلى ذلك. من المرجح أن يكون لديك حتى بعض المساعدين الافتراضيين مثل Google Assistant وSiri وBixby المثبتين على جهازك المحمول.

فوائد روبوت المحادثة

هناك العديد من الفوائد لاستخدام روبوت الدردشة الآلية. لنلقِ نظرة على بعضها.

فعالية التكلفة

روبوتات الدردشة الآلية رائعة في التعامل مع المهام البسيطة. يمكن برمجتها للتعامل مع الاستفسارات البسيطة مع إعادة توجيه الاستفسارات المعقدة إلى ممثل خدمة عملاء بشري. وبهذه الطريقة يمكن لشركتك خفض تكاليف العمالة إلى حد كبير مع الاستمرار في تقديم دعم عملاء رائع.

التوافر على مدار الساعة طوال أيام الأسبوع

تُعد روبوتات الدردشة الآلية ملائمة لتوفير خدمة العملاء والدعم على مدار الساعة طوال أيام الأسبوع، دون الحاجة إلى مشغلين بشريين. وهذا أمر رائع إذا كان عملاؤك منتشرين في مناطق زمنية مختلفة.

قابلية التوسع

يمكن للروبوتات التعامل مع عدد كبير من التفاعلات في وقت واحد. وهذا يزيد من إنتاجية الأعمال ويقلل من أوقات الانتظار، مما يؤدي إلى زيادة رضا العملاء.

التخصيص

يمكن برمجة المساعدين الرقميين لتقديم توصيات أو استجابات مخصصة للمستخدمين بناءً على خصائصهم أو سلوكهم الفردي. يمكن أن يؤدي ذلك إلى تحسين تجربة المستخدم بشكل كبير، وزيادة المبيعات، وبناء الثقة، وحتى تحسين الاحتفاظ بالعملاء.

جمع البيانات

يمكن لروبوتات الدردشة الآلية جمع بيانات العملاء، والتي يمكن أن تكون مفيدة للشركات لتحسين منتجاتها وخدماتها. بالإضافة إلى ذلك، يمكن أن تتعلم روبوتات الدردشة القائمة على الذكاء الاصطناعي من محادثاتها السابقة وتقدم دعماً أفضل بمرور الوقت.

دعم متعدد اللغات

لا تقتصر الروبوتات على لغة واحدة. فبعض أفضل الروبوتات الآلية يمكنها التعرف على اللغة التي طُرح بها السؤال والإجابة بتلك اللغة.

أنواع روبوتات المحادثة

هناك عدة أنواع من روبوتات الدردشة الآلية لكل منها قدراته واستخداماته الفريدة. يمكننا تصنيفها بناءً على خصائص مختلفة.

الاستخبارات

يحدد الذكاء ما إذا كان الروبوت “ذكيًا” أو “غبيًا”. عادةً ما نشير بكلمة “غبي” إلى روبوتات الدردشة الآلية القائمة على القواعد، والتي لديها قواعد مُشفرة ولا يمكنها الإجابة على أسئلة لم يسبق لها أن رأتها من قبل. من ناحية أخرى، نعني بكلمة “ذكية” روبوتات الدردشة الآلية المدعومة بالذكاء الاصطناعي التي تستخدم البرمجة اللغوية العصبية (معالجة اللغة الطبيعية) والتعلم الآلي لفهم سؤال العميل وإنشاء استجابة مخصصة. تستخدم روبوتات الدردشة الهجينة الوظائف القائمة على القواعد بالإضافة إلى الذكاء الاصطناعي.

• روبوتات الدردشة الآلية القائمة على القواعد
• روبوتات الدردشة الآلية المدعومة بالذكاء الاصطناعي
• روبوتات الدردشة الهجينة

منطقة الخدمة

تحدد منطقة الخدمة الغرض من روبوت الدردشة الآلية. تتضمن بعض مجالات الخدمة الشائعة ما يلي:

• دعم العملاء
• المساعد الشخصي (Bixby، Alexa، Amazon Echo)
• مساعد مبيعات افتراضي

المنصة

يمكن نشر روبوتات المحادثة على منصات مختلفة. يعتمد اختيار مكان نشر روبوت الدردشة الآلية على حالة الاستخدام المحددة والجمهور المستهدف.

• الويب (فقاعات الدردشة العائمة، الحاجيات)
• منصات المراسلة (Facebook ماسنجر، Whatsapp، Viber)
• تطبيقات الهاتف المحمول (Bixby، وSiri، وGoogle Assistant)
• أجهزة إنترنت الأشياء (مكبرات الصوت الذكية والأجهزة المنزلية الذكية)

الولاية

هناك نوعان من بنيتي روبوتات الدردشة الآلية:

• روبوتات الدردشة الآلية ذات الحالة
• روبوتات الدردشة الآلية عديمة الحالة

تحتفظ روبوتات الدردشة الآلية ذات الحالة بسجل للتفاعلات السابقة مع المستخدم وتأخذها في الاعتبار عند طرح سؤال جديد. هذا أمر رائع لأنه يسمح لهم بتقديم تجربة أكثر تخصيصاً. وهي بشكل عام أكثر تعقيداً وأكثر صعوبة في البرمجة.

من ناحية أخرى، لا تأخذ روبوتات الدردشة الآلية عديمة الحالة في الاعتبار التفاعلات السابقة. فهي تتعامل مع كل رسالة كطلب مستقل. إنها أبسط، ولا يمكنها تقديم تجربة مخصصة، ولا يمكنها بناء إجاباتها على السياق.

حلول الدردشة الآلية

منصات المحادثة الآلية

منصات روبوتات الدردشة الآلية منخفضة التعليمات البرمجية أو التي لا تحتاج إلى تعليمات برمجية هي حلول تعمل خارج الصندوق. فهي سهلة الاستخدام، ولا تتطلب مهارات ترميز متقدمة، وتتيح لك تشغيل روبوت الدردشة الآلي الخاص بك في وقت قصير.

تأتي عادةً مع محرر سحب وإفلات سهل الاستخدام يتيح لك تحديد سلوك روبوت الدردشة الآلي الخاص بك. يمكن نشرها بسهولة على منصات مختلفة بما في ذلك مواقع الويب، وFacebook ماسنجر، وSlack، وWhatsapp، وما إلى ذلك.

فهي توفر مستوى أقل من التحكم والتخصيص من الروبوتات المخصصة. الجانب السلبي الأكبر في هذه المنصات هو تثبيت البائعين. فبمجرد اختيارك للمنصة لا يمكنك الانتقال بسهولة إلى منصة أخرى.

بعض الأمثلة على هذه المنصات هي Tidio و Landbot و ChatBot و AgentBot.

روبوت مخصص

تُعد الروبوتات المخصصة حلولاً مرنة وقابلة للتخصيص بدرجة كبيرة ويمكن تصميمها لتلبية الاحتياجات المحددة لأي عمل تجاري. وهي تتيح التكامل السلس مع الأنظمة وقواعد البيانات الموجودة بالفعل.

نظرًا لأن إنشاء روبوت محادثة من الألف إلى الياء مهمة صعبة، يمكنك أن تتوقع أن تستغرق وقتًا أطول وتكلفة أكبر من استخدام منصة روبوت محادثة جاهزة. إذا كان هدفك هو إنشاء روبوت ذكاء اصطناعي متقدم، فستحتاج على الأرجح إلى فريق من المطورين المتخصصين.

يمكن كتابة الروبوتات المخصصة بأي لغة برمجة تقريبًا. يختار معظم المطورين لغة Python و Node.js و JavaScript و Java. لتبسيط عملية إنشاء الروبوتات بشكل أكبر، هناك عدد من مكتبات روبوتات الدردشة الآلية مفتوحة المصدر التي يمكنك الاختيار من بينها.

كيف تنشئ روبوت المحادثة؟

في هذا الجزء من البرنامج التعليمي، سنقوم بإنشاء روبوت دردشة آلي مخصص قائم على القواعد. سنستخدم React للواجهة الأمامية و Back4app للواجهة الخلفية.

ما هو تطبيق Back4app؟

Back4app عبارة عن منصة خلفية مستضافة على السحابة كخدمة (BaaS) تسهّل على المطورين إنشاء تطبيقات مخصصة للهاتف المحمول وصيانتها. وهي توفر واجهة مستخدم سهلة الاستخدام، ولوحة تحكم قوية، وأدوات مفيدة مثل واجهة سطر الأوامر (CLI)، والإشعارات الفورية، والتحليلات، وتخزين البيانات، وغير ذلك الكثير.

كما أنها توفر أيضًا حزم SDK لجميع أدواتك المفضلة مثل Flutter و React Native و Node.js و Angular و Android و iOS والمزيد!

تتضمن ميزات Back4app الرئيسية ما يلي:

• واجهة تشبه جدول البيانات
• واجهات برمجة تطبيقات REST و GraphQL – واجهات برمجة التطبيقات – APIs
• استفسارات مباشرة
• المصادقة (بما في ذلك المصادقة الاجتماعية)
• استضافة قابلة للتطوير
• الإشعارات

لمزيد من المعلومات، يرجى الاطلاع على ميزات تطبيق Back4app.

يتبع Back4app نموذج تسعير يمكن التنبؤ به وسهل الفهم. فهي تقدم باقة مجانية سخية (لا تحتاج إلى بطاقة ائتمان) وهي رائعة للنماذج الأولية واختبار المنصة. وهي تشمل:

• 25 ألف طلب واجهة برمجة التطبيقات (API)
• تخزين البيانات 250 ميغابايت
• نقل بيانات بسعة 1 جيجابايت
• تخزين كائن 1 جيجابايت

لمزيد من المعلومات حول أسعار Back4app، ألق نظرة على صفحة التسعير.

مقدمة المشروع

سنقوم ببناء روبوت محادثة بسيط مع طلبات واستجابات محددة مسبقًا. سيتمكن روبوت الدردشة الآلي من الاستجابة بالنصوص والصور وعرض خيارات مختلفة بناءً على الطلب الأخير. سيتم بناء الواجهة الأمامية باستخدام React وسنستخدم Back4app (مع Express) للواجهة الخلفية.

المتطلبات الأساسية:

• خبرة في JavaScript
• خبرة في React و React Hooks
• الفهم الأساسي لطلبات HTTP واستجاباته
• الفهم الأساسي ل BaaS (الواجهة الخلفية كخدمة)

سنعمل أولاً على الواجهة الأمامية ثم الواجهة الخلفية وأخيراً سنعمل على ربط الجزأين.

الواجهة الأمامية لروبوت المحادثة

إنشاء تطبيق React

لنبدأ بإنشاء تطبيق React جديد عبر إنشاء تطبيق React جديد عبر إنشاء تطبيق React:

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

سيؤدي هذا إلى إنشاء تطبيق React باسم react-chatbot وتغيير دليل العمل الخاص بك.

بعد ذلك، ابدأ المشروع:

$ npm start

وأخيراً، افتح http://localhost:3000/ لرؤية تطبيق الويب الخاص بك.

Material UI

لتبسيط عملية بناء واجهة المستخدم سنستخدم Material UI – مكتبة مكونات React مفتوحة المصدر التي تطبق تصميم المواد من Google. تتضمن مكتبة المكوّنات مجموعة شاملة من المكوّنات المبنية مسبقًا والتي تعمل خارج الصندوق.

لا تتردد في تبديل Material UI بإطار عمل مختلف لواجهة المستخدم مثل React Bootstrap أو Ant Design.

لإضافة Material UI إلى مشروعك قم بتشغيل:

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

تستخدم Material UI خط Roboto افتراضيًا. لنقم بتثبيته مع:

$ npm install @fontsource/roboto

بعد ذلك، انتقل إلى index.js وأضف الواردات التالية:

// src/index.js

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

واجهة المستخدم

انتقل إلى App.js داخل مجلد src واستبدل محتوياته بما يلي:

// 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. لقد عرّفنا نموذجًا بسيطًا يحتوي على مدخل رسالة يستدعي التعامل مع الإرسال() عند الإرسال.
2. استخدمنا خطاف React useState() للتعامل مع الحالة.
   • messageInput هي الرسالة الحالية
   • الرسائل هي قائمة الرسائل
3. يقوم التعامل مع الإرسال() بمسح مدخلات الرسالة ويستدعي إرسال رسالة() التي تلحق الرسالة بالحالة.

للمضي قدمًا، لننشئ مكونًا لعرض الرسائل.

أنشئ مجلدًا جديدًا باسم مكونات داخل مجلد src وداخل هذا المجلد أنشئ ملفًا جديدًا باسم Message.js بالمحتويات التالية:

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

يأخذ هذا المكوّن بعض المدخلات الاعتباطية(الدعائم) ثم يعرض رسالة.

• المحتوى – محتوى الرسالة
• صورة – صورة الرسالة
• هو عميل – صحيح إذا تم إرسال الرسالة من قبل المستخدم
• الخيارات – خيارات يمكن للمستخدم الاختيار من بينها
• التعامل مع الخيار – الدالة التي يتم استدعاؤها عند تحديد خيار ما

بعد ذلك، أنشئ مجلدًا باسم الأصول داخل مجلد src وضع صورة تريد أن يستخدمها روبوت الدردشة الآلي الخاص بك كصورة رمزية. لا تتردد في استخدام هذه الصورة.

تأكد من تسمية صورة الصورة الرمزية bot.png أو تغيير الاستيراد في Message.js.

أخيرًا، للاستفادة من المكوّن الذي تم إنشاؤه حديثًا استبدل TODO في App.js هكذا:

// App.js

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

لا تنس إضافة الاستيراد في أعلى الملف:

import Message from "./components/Message";

للتأكد من أن كل شيء يعمل بشكل جيد افتح متصفح الويب المفضل لديك وانتقل إلى http://localhost:3000. حاول إرسال بعض الرسائل. إذا كان كل شيء يعمل بشكل جيد فيجب إضافتها إلى واجهة المستخدم:

الواجهة الخلفية لروبوت المحادثة

للمضي قدماً، دعونا ننفذ الواجهة الخلفية.

إنشاء تطبيق

ستتطلب الخطوات التالية أن يكون لديك حساب Back4app. إذا كان لديك حساب بالفعل قم بتسجيل الدخول وإلا فقم بالتسجيل للحصول على حساب مجاني.

للعمل مع Back4app نحتاج أولاً إلى إنشاء تطبيق. عند تسجيل الدخول إلى لوحة التحكم الخاصة بك سترى قائمة تطبيقاتك. انقر على “إنشاء تطبيق جديد” لإنشاء تطبيق جديد.

أعطها اسمًا مخصصًا، واختر “قاعدة بيانات NoSQL” كقاعدة بياناتك ثم انقر على “متابعة”.

سيستغرق Back4app بضع لحظات لإعداد كل ما هو مطلوب لتطبيقك مثل قاعدة البيانات، وطبقة التطبيق، والتوسع، والنسخ الاحتياطية والأمان.

بمجرد أن يصبح تطبيقك جاهزاً، ستتم إعادة توجيهك إلى لوحة تحكم تطبيقك.

قاعدة البيانات

دعنا نحدد نماذج قاعدة البيانات لروبوت الدردشة الآلي.

انتقل إلى لوحة تحكم Back4app وحدد “قاعدة البيانات” على الجانب الأيسر من الشاشة. بعد ذلك انقر على “إنشاء فئة”، وقم بتسميتها BotSettings، وحدد “تمكين القراءة والكتابة العامة” وانقر على “إنشاء فئة وإضافة أعمدة”.

أضف الأعمدة التالية:

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

1. سيتم عرض المحتوى الترحيبي عندما يفتح المستخدم المحادثة
2. خيارات الترحيب هي الاختيارات الافتراضية التي يمكن للمستخدم الاختيار من بينها دون إدخال رسالة
3. يتم إرجاع responseUnknown إذا لم يتمكن برنامج المحادثة من العثور على رد على رسالة

بعد ذلك قم بإنشاء صف بالإعدادات المخصصة. مثال:

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

بعد ذلك، قم بإنشاء فئة أخرى باسم BotResponse مع الأعمدة التالية:

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

سيستخدم برنامج الدردشة الآلي هذا النموذج للبحث عن الاستجابة الصحيحة لطلب معين. سيقوم أولاً بالتحقق أولاً مما إذا كانت الرسالة تساوي أي عمود طلب بالضبط، وإذا لم يكن كذلك فسيتحقق مما إذا كانت تحتوي على أي كلمات رئيسية للطلب. إذا لم تتطابق أي من الردود مع الطلب، فسيتم إرجاع رسالة احتياطية.

بعد أن تنشئ النموذج، انطلق وأنشئ بعض الاستجابات أو استورد مجموعة البيانات هذه.

استضافة الويب

نظرًا لأننا سننشئ واجهة برمجة تطبيقات سريعة (باستخدام الرمز السحابي)، نحتاج إلى تمكين استضافة الويب لـ Back4app لاستضافة تطبيقنا وجعله متاحًا للجمهور على الإنترنت.

لتمكين خاصية استضافة الويب، انتقل إلى لوحة تحكم Back4app، وحدد تطبيقك، وانقر على “إعدادات التطبيق” على الجانب الأيسر من الشاشة، ثم “إعدادات الخادم”. ابحث عن “استضافة الويب والنطاقات المخصصة” وانقر على “الإعدادات” مرة أخرى.

انقر على “تفعيل استضافة Back4app” واختر اسم نطاق فرعي. سأستخدم الدردشة الآلية

وأخيراً، انقر فوق “حفظ”.

سيكون تطبيقك متاحاً الآن على:

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

Express مع كود السحابة

في هذا القسم من البرنامج التعليمي، سنستخدم الرمز السحابي وExpress لإنشاء واجهة برمجة تطبيقات للواجهة الأمامية لدينا لاستهلاكها. ستحتوي واجهة برمجة التطبيقات على نقاط النهاية التالية:

1. / إرجاع إعدادات روبوت الدردشة الآلي
2. /اسأل/ يبحث عن طلب في قاعدة البيانات ويعيد الرد عليه

على الجانب الأيمن من الشاشة حدد “الرمز السحابي”> “الوظائف واستضافة الويب” واستخدم واجهة الويب لإنشاء بنية الدليل التالية:

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

ضع المحتويات التالية في package.json:

// cloud/package.json

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

يستخدم Back4app هذا الملف لتنزيل الوحدات النمطية عبر npm. أضفنا أداة تحليل الجسم لأننا سنحتاجها لاحقًا لتحليل الطلبات.

ضع ما يلي داخل app.js لتهيئة خادم 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");

أخيرًا، حدد المسارات داخل routes.js هكذا:

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

يحدد هذا الرمز نقاط النهاية المذكورة سابقًا ومنطق روبوت الدردشة الآلي للبحث عن الردود الصحيحة.

بعد الانتهاء، انقر على “نشر” في أسفل يمين الشاشة. إذا سار كل شيء على ما يرام، يجب أن ترى رسالة خضراء تقول “نجاح في نشر تغييراتك!”.

تأكد من أن واجهة برمجة التطبيقات تعمل عن طريق إرسال طلب GET إلى فهرس واجهة برمجة التطبيقات:

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

ربط الواجهة الأمامية بالواجهة الخلفية

لجعل معالجة طلب HTTP والاستجابة أسهل قليلاً سنقوم بتثبيت أكسيوس – وهو عميل HTTP سهل الاستخدام وقابل للتوسيع وقابل للتوسيع قائم على الوعود للمتصفح و Node.js.

لتثبيته قم بتشغيله:

$ npm install axios

أضف الاستيراد في أعلى App.js:

import axios from "axios";

بعد ذلك، عرّف baseURL في الجزء العلوي من App.js هكذا :

// src/App.js

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

سنقوم بتمرير baseURL إلى Axios مع كل طلب.

لتحميل رسالة الترحيب عندما يفتح المستخدم موقع الويب يمكننا استخدام خطاف useEffect(). الصق الشيفرة التالية في App.js الخاص بك :

// src/App.js

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

يرسل هذا الرمز طلب GET إلى واجهة برمجة التطبيقات Express API الخاصة بنا ويلحق الرد بالرسائل.

آخر شيء علينا القيام به هو تعديل sendMessage() لإرسال طلب POST إلى الواجهة الخلفية وإلحاق الرد بالرسائل. للقيام بذلك قم بتغيير sendMessage() هكذا:

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

لتحسين تجربة المستخدم، يمكنك لصق الشيفرة التالية في App.js للتمرير تلقائيًا إلى الأسفل مع كل رد:

// src/App.js

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

عظيم، هذا كل شيء!

قم بتشغيل خادم التطوير وتحقق مما إذا كان كل شيء يعمل.

الخاتمة

لا عجب أن تصبح روبوتات الدردشة الآلية أكثر شيوعاً. حيث تسمح مزاياها الرائعة للشركات بتحسين خدمة العملاء، وزيادة مشاركة العملاء، وخفض التكاليف، وما إلى ذلك. يقول الخبراء أن عصر روبوتات الدردشة الآلية قد بدأ للتو وأن الروبوتات ستصبح أكثر شعبية في المستقبل!

خلال البرنامج التعليمي، قمنا بشرح ما هو روبوت الدردشة الآلي، وألقينا نظرة على أنواع روبوتات الدردشة الآلية المختلفة، ومنصات الدردشة الآلية، وعلمناك كيفية إنشاء روبوت الدردشة الآلي الخاص بك. سيعمل روبوت الدردشة الآلي الذي أنشأناه بشكل رائع في بيئة دعم العملاء للإجابة على الأسئلة البسيطة.

احصل على الكود المصدري النهائي من مستودع GitHub.

الخطوات المستقبلية:

1. اجعل الروبوت “أكثر ذكاءً” بإضافة المزيد من الردود إلى قاعدة البيانات.
2. قم بدمج روبوت الدردشة مع موقعك الإلكتروني.
3. ابحث عن كيفية تحسين روبوت الدردشة الآلي الخاص بك باستخدام الذكاء الاصطناعي.

الأسئلة الشائعة