การสร้าง LINE Chatbot โดยใช้ Dialogflow ร่วมกับ Next.js 14 Startup Website Template สามารถช่วยให้บอทของคุณมีความสามารถในการประมวลผลภาษาธรรมชาติ (NLP) และตอบสนองได้อย่างชาญฉลาดยิ่งขึ้น เนื่องจาก Dialogflow สามารถวิเคราะห์ข้อความของผู้ใช้และส่งคำตอบตามบริบทที่กำหนดไว้ได้อย่างดี

ขั้นตอนการสร้าง LINE Chatbot ร่วมกับ Dialogflow บน Next.js 14 Template

1. ตั้งค่าโปรเจค Next.js 14 Template

หากคุณยังไม่มีโปรเจค Next.js 14 Template สามารถ clone ได้จาก GitHub หรือใช้โปรเจคที่มีอยู่แล้ว:

git clone https://github.com/your-template-repo/nextjs-14-startup.git
cd nextjs-14-startup

จากนั้นติดตั้งแพ็กเกจ:

npm install

2. ติดตั้งไลบรารีที่จำเป็น

ติดตั้ง line-bot-sdk สำหรับเชื่อมต่อกับ LINE Messaging API และ dialogflow สำหรับสื่อสารกับ Dialogflow:

npm install line-bot-sdk dialogflow

npm install line-bot-sdk

3. สร้างและตั้งค่า Dialogflow Agent

1. ไปที่ Dialogflow Console
2. สร้างโปรเจคใหม่ หรือเลือกโปรเจคที่มีอยู่แล้ว
3. ตั้งชื่อ Agent และเชื่อมต่อกับ Google Cloud Platform Project
4. สร้าง Intent (ชุดคำตอบ) ตามต้องการ เช่น การทักทาย, การถามคำถามต่างๆ และการสั่งซื้อสินค้า เป็นต้น
5. ไปที่ Fulfillment ใน Dialogflow Console และเปิดใช้งาน Webhook
6. ระบุ Webhook URL ของคุณ เช่น https://your-domain.com/api/dialogflow-webhook

4. สร้างไฟล์ Environment Variables (.env.local)

ที่ root ของโปรเจค ให้สร้างไฟล์ .env.local และเพิ่มข้อมูลดังนี้:

LINE_CHANNEL_ACCESS_TOKEN=ใส่_Channel_Access_Token_ของคุณ
LINE_CHANNEL_SECRET=ใส่_Channel_Secret_ของคุณ
DIALOGFLOW_PROJECT_ID=ใส่_Project_ID_ของคุณ
DIALOGFLOW_CLIENT_EMAIL=ใส่_Client_Email_ของคุณ
DIALOGFLOW_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nYourPrivateKey\n-----END PRIVATE KEY-----\n"

หมายเหตุ: ข้อมูล DIALOGFLOW_PRIVATE_KEY สามารถหาได้จากไฟล์ Service Account JSON ที่คุณดาวน์โหลดจาก Google Cloud Console

5. สร้างไฟล์ line-webhook.js ในโฟลเดอร์ pages/api

สร้าง API Route เพื่อรองรับการทำงานของ LINE Webhook:

import { Client, middleware } from 'line-bot-sdk';
import { SessionsClient } from 'dialogflow';

const lineConfig = {
  channelAccessToken: process.env.LINE_CHANNEL_ACCESS_TOKEN,
  channelSecret: process.env.LINE_CHANNEL_SECRET,
};

const client = new Client(lineConfig);

// สร้าง client สำหรับ Dialogflow
const dialogflowConfig = {
  credentials: {
    client_email: process.env.DIALOGFLOW_CLIENT_EMAIL,
    private_key: process.env.DIALOGFLOW_PRIVATE_KEY.replace(/\\n/g, '\n'),
  },
};
const dialogflowClient = new SessionsClient(dialogflowConfig);
const projectId = process.env.DIALOGFLOW_PROJECT_ID;

const handleEvent = async (event) => {
  if (event.type === 'message' && event.message.type === 'text') {
    const sessionPath = dialogflowClient.projectAgentSessionPath(
      projectId,
      'unique-session-id'
    );

    // สร้างคำขอไปยัง Dialogflow
    const request = {
      session: sessionPath,
      queryInput: {
        text: {
          text: event.message.text,
          languageCode: 'en-US', // กำหนดภาษาที่ใช้
        },
      },
    };

    // ส่งคำขอและรับคำตอบจาก Dialogflow
    const responses = await dialogflowClient.detectIntent(request);
    const result = responses[0].queryResult;

    return client.replyMessage(event.replyToken, {
      type: 'text',
      text: result.fulfillmentText,
    });
  }
  return Promise.resolve(null);
};

export default async function handler(req, res) {
  const middlewareCheck = middleware(lineConfig);
  await middlewareCheck(req, res, async () => {
    const events = req.body.events;
    const results = await Promise.all(events.map(handleEvent));
    return res.status(200).json({ status: 'success', results });
  });
}

export const config = {
  api: {
    bodyParser: false,
  },
};

6. สร้าง Webhook สำหรับ Dialogflow

สร้างไฟล์ dialogflow-webhook.js ในโฟลเดอร์ pages/api:

export default async function handler(req, res) {
  const queryResult = req.body.queryResult;

  // ตอบกลับข้อความแบบต่างๆ
  let responseText = 'I am not sure how to respond to that.';
  if (queryResult.intent.displayName === 'Welcome Intent') {
    responseText = 'Hello! How can I assist you today?';
  } else if (queryResult.intent.displayName === 'Order Intent') {
    responseText = 'What would you like to order?';
  }

  res.json({
    fulfillmentText: responseText,
  });
}

export const config = {
  api: {
    bodyParser: false,
  },
};

7. ตั้งค่า LINE Webhook URL ใน LINE Developer Console

1. ไปที่ LINE Developer Console
2. เลือก Channel ของคุณ > ไปที่ Messaging API
3. เปิดใช้งาน Webhook
4. กำหนด Webhook URL ของ LINE: https://your-domain.com/api/line-webhook

8. ตั้งค่า Webhook URL ใน Dialogflow

1. ไปที่ Fulfillment ใน Dialogflow Console
2. เปิดใช้งาน Webhook
3. กรอก URL ของ webhook ใน Dialogflow: https://your-domain.com/api/dialogflow-webhook

9. ทดสอบการทำงาน

1. รันเซิร์ฟเวอร์ของคุณ:

npm run dev

2. ส่งข้อความใน LINE Chatbot ของคุณ และตรวจสอบว่ามีการตอบกลับตามที่คุณตั้งค่าใน Dialogflow หรือไม่

10. Deploy โปรเจคไปยังโฮสต์ที่รองรับ

Deploy โปรเจคไปยัง Vercel, Netlify, หรือโฮสต์อื่นๆ ที่รองรับการทำงานของ Next.js และทดสอบบน Live URL ของคุณ!

เพียงเท่านี้ก็สามารถสร้าง LINE Chatbot ที่ทำงานร่วมกับ Dialogflow บน Next.js 14 Template ได้สำเร็จแล้ว! หากต้องการรูปประกอบ หรือมีข้อสงสัยเพิ่มเติมในขั้นตอนใด สามารถแจ้งได้เลยครับ!