ربات‌های چت (Chat-bot) امروزه در حال افزایش هستند و غول‌هایی مثل IBM و گوگل در حال اجرا و ارتقاء پلت‌فرم‌های خود هستند، شما می‌توانید از این سرویس‌ها استفاده کرده و UI خود را به ساده‌ترین شیوه ممکن بسازید.

چگونه می‌توانیم این ربات را روی پروژه واقعی اجرا کنیم؟

پاسخ به نظر واضح است، این طور نیست؟ ویجت چت! پکیج مناسبی را روی NPM یا Github، برای React، Angular یا Vue پیدا کرده و از آن استفاده کنید. اما این کار آسان نیست. هیچ پکیجی برای ویجت مورد نیاز ما وجود ندارد. همه چیزهایی که ما پیدا کردیم سرویس‌های چت بود؛ برنامه‌هایی که دارای امکانات کامل هستند و برای کاربران سازمانی با خدمات پرداخت مهیا هستند، اما این چیزی نیست که ما دنبال آن هستیم. پس چگونه می‌توانیم این مسأله را حل کنیم؟

ویجت را وارد کنید!

این مرحله وقتی است که ما تصمیم گرفتیم ویجت چت React  را ایجاد کنیم. یک ویجت open source که می‌تواند به برنامه React شما و voilá اضافه شود. حالا چت خود را دارید اما نه به طور کامل، اما به زودی آن را فراهم می‌کنیم.

بیایید کد را ببینیم

API واقعا ساده و سر راست است. اول باید پکیج را با npm یا yarn اضافه کنید.

npm install react-chat-widget

yarn add react-chat-widget

حالا Widget را به کامپوننت روت برنامه ساده خود اضافه کنید.

import React, { Component } from 'react';
import { Widget } from 'react-chat-widget';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Widget />
      </div>
    );
  }
}

export default App;

تنها درخواست prop ای که نیاز دارید handleNewUserMessage است که تابعی است که پیام کاربر را دریافت می‌کند. سپس می‌توانید آن را از طریق back-end API یا هر چیزی دیگری که ممکن است لازم باشد انجام دهید، مستقیما ارسال کنید.

import React, { Component } from 'react';
import { Widget } from 'react-chat-widget';

class App extends Component {
  handleNewUserMessage = (newMessage) => {
    console.log(`New message incomig! ${newMessage}`);
    // Now send the message throught the backend API
  }

  render() {
    return (
      <div className="App">
        <Widget
          handleNewUserMessage={this.handleNewUserMessage}
        />
      </div>
    );
  }
}

export default App;

شروع به اضافه کردن پیام‌های متنی و پاسخ به پیام‌های دریافتی کنید. روش انجام این کار فراخوانی تابع addResponseMessage (متن پاسخ) است.

import React, { Component } from 'react';
import { Widget, addResponseMessage } from 'react-chat-widget';

class App extends Component {
  componentDidMount() {
    addResponseMessage("Welcome to this awesome chat!");
  }

  handleNewUserMessage = (newMessage) => {
    console.log(`New message incomig! ${newMessage}`);
    // Now send the message throught the backend API
    addResponseMessage(response);
  }

  render() {
    return (
      <div className="App">
        <Widget
          handleNewUserMessage={this.handleNewUserMessage}
        />
      </div>
    );
  } 
}

export default App;

اما بگذارید بگوییم می‌خواهید لینکی را به جای متن ساده ارسال کنید. تابع شما نیاز به فراخوانی addLinkSnippet (awesomeLink) دارد. این لینک awesome باید شی‌ای باشد مثل:

{

  title: 'Awesome page’,

  link: 'www.awesome-page.com’

}

یک قطعه کوچک با عنوانی که شما مشخص کرده‌اید و لینکی که قصد ارسال آن را دارید ساخته می‌شود. اگرچه این دو شیوه کار نمی‌کند. بنابراین فقط شما، به عنوان فرستنده می‌توانید این کار را انجام دهید.

این API پایه‌ای است که نیاز به ساخت کارهای عملیاتی دارد. می‌بینید که ویجت به صورت عادی متقابلا اثر می‌کند، پیام را با ترتیبی صحیح ارسال و دریافت می‌کند. با این شیوه، استایل Markdown برای پیام‌های متنی ساده پشتیبانی می‌شود!

اما اگر در صورتی که آن را ترک کنیم، قابل سفارشی‌سازی نیست.

استایل‌های سفارشی

اگرچه رنگ‌های پیش‌فرض شگفت‌انگیز هستند، ما فرض می‌کنیم که آن‌ها پالت رنگی برنامه شما نیستند. بیایید به خاطر طراحی شما آن را تغییر دهیم. می‌توانید یک عنوان، عنوان فرعی (subtitle) و آواتار سفارشی اضافه کنید و می‌توانید هر عنصری را تغییر دهید تا طراحی برجسته خود را در CSS مطابقت دهید.

import React, { Component } from 'react';
import { Widget, addResponseMessage, addLinkSnippet, addUserMessage } from 'react-chat-widget';
import logo from './logo.svg';

class App extends Component {
  componentDidMount() {
    addResponseMessage("Welcome to this awesome chat!");
  }

  handleNewUserMessage = (newMessage) => {
    console.log(`New message incomig! ${newMessage}`);
    // Now send the message throught the backend API
  }

  render() {
    return (
      <div className="App">
        <Widget
          handleNewUserMessage={this.handleNewUserMessage}
          profileAvatar={logo}
          title="My new awesome title"
          subtitle="And my cool subtitle"
        />
      </div>
    );
  } 
}

export default App;

.conversation-container > .header {
  background-color: red;
}

.message > .response {
  background-color: black;
  color: white;
}

نتیجه‌گیری

ویژگی‌های دیگری مثل ارائه اجزای سفارشی و صفحه نمایش کامل وجود دارند که در اینجا پوشش داده نخواهند شد. همچنین لازم به یادآوری است که باید یک لایه ارتباطی به برنامه خود اضافه کنید تا کار کرده و آن را اجرا کند.

بیایید به ابتدای این مقاله برگردیم:

ربات‌های چت امروزه در حال افزایش هستند...

این یک ماژول کامل برای شروع ربات چت است. با پایه‌ای‌ترین‌ها شروع کنید، Watson یا api.ai را امتحان کنید و ببینید که آن‌ها علاوه بر برنامه شما عالی هستند. این امر به شما کمک می‌کند به رایج‌ترین سوالات در مورد کسب و کار خودتان پاسخ دهید، بدون اینکه از طریق کپی پیس ایمیل پاسخ دهید.