สร้าง Chatbot สำหรับ Facebook Messenger ด้วย Vonage Messaging API และ ChatGPT

Published in

odds.team

4 min readJul 2, 2024

บทนำ

ในปี 2023 ผมได้มีโอกาสเข้าร่วมงาน CityJS ที่สิงคโปร์ ซึ่งเป็นงานสัมมนาที่รวบรวมหัวข้อที่น่าสนใจในเทคโนโลยีที่เกี่ยวกับ JavaScript มากมาย หนึ่งในหัวข้อที่ได้รับความสนใจอย่างมากในยุคที่ AI กำลังมาแรงคือการพัฒนา Chatbot ที่มีการเชื่อมต่อกับ ChatGPT

ในยุคดิจิทัลที่เทคโนโลยีการสื่อสารมีบทบาทสำคัญ การสร้างและพัฒนา Chatbot ได้กลายเป็นเครื่องมือที่ทรงพลังในการเชื่อมต่อและให้บริการลูกค้าอย่างมีประสิทธิภาพ โดยเฉพาะบนแพลตฟอร์มที่มีผู้ใช้งานจำนวนมาก เช่น Facebook Messenger การผสานรวม ChatGPT ของ OpenAI ซึ่งมีความสามารถในการเข้าใจและสร้างข้อความภาษามนุษย์อย่างเป็นธรรมชาติ กับ Vonage Messaging API ที่สามารถจัดการข้อความจากหลายช่องทาง ทำให้สามารถสร้าง Chatbot ที่ตอบสนองความต้องการของผู้ใช้ได้อย่างมีประสิทธิภาพ

บทความนี้จะแนะนำขั้นตอนการสร้าง Chatbot สำหรับ Facebook Messenger โดยใช้เครื่องมือเหล่านี้ ตั้งแต่การเตรียมความพร้อมการตั้งค่าบัญชี การเชื่อมต่อ Vonage กับ OpenAI และ Facebook จนถึงการพัฒนาและทดสอบ Chatbot ที่สามารถตอบสนองและจดจำบริบทของการสนทนาได้ หวังว่าบทความนี้จะเป็นแนวทางและแรงบันดาลใจให้คุณสามารถสร้าง Chatbot ที่มีประสิทธิภาพเพื่อตอบสนองความต้องการของธุรกิจหรือโครงการส่วนตัวของคุณ

เริ่มต้นด้วยการเตรียมบัญชีที่จำเป็นต้องใช้ในการสร้าง Chatbot กันก่อนนะครับ

ตั้งค่าบัญชี OpenAI

สมัครบัญชีที่ OpenAI Sign Up.
สร้าง OpenAI API Key:

จาก Main Page ไปที่ Dashboard ในแถบด้านบนของหน้าแรก
เลือก API keys บน Menu ด้านซ้าย
คลิก Create a new secret key (อย่าลืมคัดลอก secret key เก็บไว้)

ตั้งค่าบัญชี Vonage

สมัครบัญชีที่ Vonage Registration.

สร้างแอป Vonage

1. ในหน้า Developer Dashboard เลือก Applications

2. คลิก Create a new application

3. ใส่ชื่อแอปและเปิดใช้งาน Messages ใน Capabilities section และใส่ URL ดังนี้:

Inbound URL: https://youruniquesubdomain.loca.lt/webhooks/inbound-messaging
Outbound URL: https://youruniquesubdomain.loca.lt/webhooks/callback
คลิก Generate public and private key
คลิก Generate new application

เชื่อมต่อ Vonage กับ OpenAI และ Facebook

1. ในหน้า Developer Dashboard, เลือก External Accounts

2. ภายใต้การ์ด Facebook messenger, คลิก Connect Facebook pages

3. เข้าสู่ระบบด้วย Facebook และเลือกเพจที่ต้องการ

4. คลิก Complete setup

5. ในหน้า Developer Dashboard, เลือก Applications

6. คลิกแอปที่สร้างขึ้น

7. คลิก Link social channels และเลือก Link สำหรับรายการที่สร้าง

เราก็ได้ทำการเตรียม Account ที่จำเป็นเสร็จหมดแล้ว หลังจากนี้เราจะทำการสร้าง Chatbot กันนะครับ

การสร้าง Chatbot

หลักการทำงานคร่าวๆ ของโปรแกรม Chatbot ที่เรากำลังจะสร้างคือ จะเป็นตัวกลางที่จัดการการเชื่อมต่อระหว่าง ChatGPT และ Vonage API

โดยที่หลักการการทำงานคร่าวๆ เป็นดังในรูป

เมื่อ Chatbot ได้รับข้อความจาก Facebook Messenger เข้ามาผ่านทาง Vonage Webhook แล้ว Chatbot จะนำข้อความนั้นไปส่งต่อให้กับ ChatGPT เพื่อสร้างข้อความสำหรับตอบกลับ หลังจากนั้น็จะส่งคืนไปยัง Facebook Messenger ผ่านทาง Vonage API อีกทีหนึ่ง

Coding

1. ขั้นตอนการจัดเตรียม และทดสอบเบื้องต้น

เราจะใช้ NodeJS Version 18 สำหรับสร้าง ChatBot
ให้สร้าง Folder ขึ้นมาแล้วก็ Install Packages ที่จำเป็นต่างๆ ดังนี้

npm init es6
npm install express chatgpt @vonage/server-sdk localtunnel isomorphic-fetch

หลังจากนั้นก็สร้างไฟล์ app.js แล้วก็ Copy Code ตั้งต้นสำหรับ Server ด้วย Express ข้างล่างไปวาง

// Importing and Initializing Express
import express from 'express';

const PORT = 3003;
const app = express();

// Starting the Server
app.listen(PORT, async () => {
  console.log(`Starting server at port: ${PORT}`);
});

// Middleware Setup
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

// Defining Routes
app.get('/', (req, res) => {
  res.json(200);
});

app.post('/webhooks/callback', async (req, res) => {
  res.json(200);
});

app.post('/webhooks/inbound-messaging', async (req, res) => {
  res.json(200);
  const message_to = req.body.to;
  const message_from = req.body.from;
  const received_text = req.body.text;
  console.log("Received message: ", received_text, "from: ", message_from);
});

// Tunneling with Localtunnel
import localtunnel from 'localtunnel'
(async () => {
  const tunnel = await localtunnel({
    subdomain: "youruniquesubdomain",
    port: PORT
  });
  console.log(`App available at: ${tunnel.url}`);
})();

โดยที่ App ตั้งต้นนี้จะพิมพ์ข้อความที่ได้รับจาก Facebook
สามารถลองรัน Server ด้วยคำสั่งข้างล่าง แล้วลองส่งข้อความจาก User ใดๆ ไปยัง Facebook Page ที่ได้เลือกไว้ใน Vonage

node app.js

จะได้ผลลัพท์ดังนี้

Starting server at port: 3003
App available at: https://youruniquesubdomain.loca.lt
Received message:  Hello from:  3579546725462011

2. เพิ่ม Code ส่วนที่ติดต่อ ChatGPT
โดยนำ OPENAI_API_KEY ที่ได้จากขั้นตอนการตั้งค่าบัญชี OpenAI มาใส่เป็นค่าของตัวแปร

...
// Importing and Initializing ChatGPT
import { ChatGPTAPI } from "chatgpt";

const OPENAI_API_KEY =
  "XXX";
const openAI = new ChatGPTAPI({
  apiKey: OPENAI_API_KEY,
});

...

หลังจากนั้นให้แก้ไขโค้ดในส่วนที่จัดการกับข้อความขาเข้าจาก Facebook โดยโค้ดนี้จะส่งข้อความที่ได้รับไปยัง ChatGPT และมีการเก็บ ID ของข้อความที่ CharGPT เคยส่งมาไว้ใน message_from_to_parent_message_id_map และส่งไปให้ ChatGPT ทุกครั้งเพื่อให้ ChatGPT เข้าใจบริบทของการสนทนาและตอบกลับได้อย่างต่อเนื่อง

...

const message_from_to_parent_message_id_map = {};
app.post("/webhooks/inbound-messaging", async (req, res) => {
  res.json(200);
  const message_to = req.body.to;
  const message_from = req.body.from;
  const received_text = req.body.text;
  console.log("Received message: ", received_text, "from: ", message_from);

  const chat_gpt_opts = {};

  if (message_from_to_parent_message_id_map[message_from]) {
    chat_gpt_opts["parentMessageId"] = message_from_to_parent_message_id_map[message_from];
  }
  openAI.sendMessage(received_text, chat_gpt_opts).then(async (chat_response) => {
    console.log("Chat GPT Response:", chat_response.text);

    message_from_to_parent_message_id_map[message_from] = chat_response.id;
  });
});

...

ลองรัน ChatBot แล้วส่งข้อความจะได้ผลลัพท์ดังนี้

Starting server at port: 3003
App available at: https://youruniquesubdomain.loca.lt
Received message:  Hello from:  3579546725462011
Chat GPT Response:  Hello! How can I assist you today?

3. เพิ่ม Code ส่วนที่ติดต่อ Vonage
โดยนำ VONAGE_API_KEY และ VONAGE_APPLICATION_ID ที่ได้จากขั้นตอนการตั้งค่าบัญชี OpenAI มาใส่เป็นค่าของตัวแปร และนำไฟล์ PRIVATE_KEY มาใส่ไว้ใน Folder เดียวกัน

// Importing and Initializing Vonage
import { Vonage } from "@vonage/server-sdk";
import { MessengerText } from "@vonage/messages";

const VONAGE_API_KEY = "b40d98b3";
const VONAGE_APPLICATION_ID = "84a028f8-44e3-4105-96bc-80494fd1659d";
const VONAGE_PRIVATE_KEY_PATH = "./private.key";

const vonage = new Vonage({
  apiKey: VONAGE_API_KEY,
  applicationId: VONAGE_APPLICATION_ID,
  privateKey: VONAGE_PRIVATE_KEY_PATH,
});

หลังจากนั้นแก้ไขส่วนจัดการกับข้อความขาเข้าจาก Facebook โดยที่ Code นี้จะนำข้อความที่ได้จาก ChatGPT ส่งต่อไปยัง Facebook ผ่าน Vonage

...

const message_from_to_parent_message_id_map = {};
app.post("/webhooks/inbound-messaging", async (req, res) => {
  res.json(200);
  const message_to = req.body.to;
  const message_from = req.body.from;
  const received_text = req.body.text;
  console.log("Received message: ", received_text, "from: ", message_from);

  const chat_gpt_opts = {};

  if (message_from_to_parent_message_id_map[message_from]) {
    chat_gpt_opts["parentMessageId"] = message_from_to_parent_message_id_map[message_from];
  }
  openAI.sendMessage(received_text, chat_gpt_opts).then(async (chat_response) => {
    console.log("Chat GPT Response:", chat_response.text);

    message_from_to_parent_message_id_map[message_from] = chat_response.id;
    vonage.messages.send(
      new MessengerText({
        to: message_from,
        from: message_to,
        text: chat_response.text.slice(0, 640),
      })
    );
  });
});

...

ลองรัน ChatBot แล้วส่งข้อความจะได้ผลลัพท์ดังนี้

สามารถเข้าไปดู Code แบบเต็มได้ที่

https://github.com/jittapong/chatbot_vonage_chatgtp

สรุป

การสร้าง Chatbot สำหรับ Facebook Messenger โดยใช้ Vonage Messaging API และ ChatGPT ของ OpenAI นั้นไม่ซับซ้อนเพียงแค่ทำตามขั้นตอนที่กำหนด คุณจะสามารถสร้าง Chatbot ที่มีความสามารถในการตอบสนองและจดจำบริบทได้อย่างมีประสิทธิภาพ