WhatsApp AI 聊天機器人：讓我們用 API 建立一個聊天機器人-js教程-PHP中文網

WhatsApp AI 聊天機器人：讓我們用 API 建立一個聊天機器人

PHPz

發布： 2024-07-30 08:26:03

原創

1006 人瀏覽過

大家好，我是 Rohan，Spur 的創辦人，Spur 是一款 WhatsApp API 和 Instagram 評論/DM 自動化軟體。

幾週前，我寫了一篇博客，討論應該在哪裡建立 WhatsApp 整合。這是一篇關於該主題的高級文章，今天我們將學習如何開始使用 WhatsApp API？

讓我們製作一個 WhatsApp AI 聊天機器人

今天，我們將製作一個在 Node 伺服器上運行的簡單機器人，從 WhatsApp Cloud API 取得 Webhook，讀取訊息並使用
OpenAI GPT 4o 發送回應。

想直接跳到程式碼嗎？鏈接在底部。

取得 WhatsApp 測試號碼和令牌

這相當簡單，Meta 已經有這方面的指南。展望未來，我將假設

您已經建立了一個元應用程式
新增了 WhatsApp 產品
已取得測試號碼，可以用它發送訊息

對於令牌，您可以使用臨時令牌，我們將在另一篇教學中介紹如何部署到生產環境。

設定節點伺服器

如果您沒有 pnpm 設定，這是最簡單的方法

corepack enable
corepack prepare pnpm@latest --activate

登入後複製

現在我們開始

mkdir whatsapp-ai-bot

# intialize npm project
pnpm init

# make the server file
touch index.js

# env file
touch .env

登入後複製

立即安裝所需的依賴項：

pnpm install express dotenv openai

登入後複製

切勿提交 API 金鑰。為了將 API 金鑰等敏感資訊保留在程式碼庫之外，我們將使用環境變數。在專案的根目錄中建立一個 .env 檔案並新增以下行：

OPENAI_API_KEY=<your-openai-api-key>

登入後複製

現在使用建立的index.js檔案並加入以下程式碼

import express from 'express';
import { config } from 'dotenv';
import OpenAI from 'openai';

// Load environment variables
config();

// Create a web server
const app = express();
const port = process.env.PORT || 3034;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

// Add middleware to parse JSON bodies
app.use(express.json());

// Initialize OpenAI API
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

app.get('/webhooks', (req, res) => {
  if (
    req.query['hub.mode'] === 'subscribe' &&
    req.query['hub.verify_token'] === '1234'
  ) {
    res.send(req.query['hub.challenge']);
  } else {
    res.sendStatus(400);
  }
});

app.post('/webhooks', async (req, res) => {
  const body = req.body.entry[0].changes[0];
  if (body.field !== 'messages') {
    // not from the messages webhook so dont process
    return res.sendStatus(200);
  }

  if (!body.value.messages) {
    return res.sendStatus(200);
  }

  const text = body.value.messages
    .map((message) => message.text.body)
    .join('\n\n');

  console.log(text);

  const completion = await openai.chat.completions.create({
    model: 'gpt-4o-mini',
    messages: [{ role: 'user', content: text }],
  });

  // Extract the response from the OpenAI completion
  const aiResponse = completion.choices[0].message.content;

  // Extract the phone number from the incoming message
  const phoneNumber = body.value.messages[0].from;

  // Prepare the message payload
  const messagePayload = {
    messaging_product: 'whatsapp',
    to: phoneNumber,
    type: 'text',
    text: {
      body: aiResponse,
    },
  };

  // Send the response back to WhatsApp
  try {
    const response = await fetch(
      `https://graph.facebook.com/v20.0/${process.env.PHONE_NUMBER_ID}/messages`,
      {
        method: 'POST',
        headers: {
          Authorization: `Bearer ${process.env.SYSTEM_TOKEN}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(messagePayload),
      },
    );

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    console.log('Message sent successfully');
  } catch (error) {
    console.error('Failed to send message:', error);
  }

  res.sendStatus(200);
});

登入後複製

並將package.json修改為

{
  "name": "whatsapp-ai-bot",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "module",
  "packageManager": "pnpm@9.6.0",
  "dependencies": {
    "dotenv": "^16.4.5",
    "express": "^4.19.2",
    "openai": "^4.53.2"
  },
  "devDependencies": {
    "nodemon": "^3.1.4"
  }
}

登入後複製