建立人工智慧驅動的 WhatsApp 聊天機器人：逐步指南

已發表: 2024-03-22

人工智慧/機器學習9 分鐘4

2024 年 3 月 22 日

概括：

了解如何利用 Node.js 和 OpenAI 的功能逐步建立由 AI 驅動的 WhatsApp 聊天機器人。從設定 Meta 企業帳戶到整合 WhatsApp API 和 OpenAI，本指南可讓企業簡化客戶互動並釋放自動化通訊的新可能性。

在當今的數位時代，利用人工智慧 (AI) 的力量來增強客戶互動對於努力保持市場領先地位的企業至關重要。 WhatsApp 是全球使用最廣泛的訊息平台之一，為企業提供了有效與受眾互動的絕佳機會。進入人工智慧驅動的 WhatsApp 聊天機器人領域。這些虛擬助理正在徹底改變客戶服務，提供全天候支援並簡化溝通流程。

無論您是新興的新創公司還是成熟的企業，透過正確的方法都可以使開發步驟變得更加簡單。在這份綜合指南中，我們將探討將 WhatsApp Business API 與 Node.js 應用程式整合所需的基本原則、逐步流程以及關鍵注意事項。利用 OpenAI 自然語言處理功能的力量，我們將打造與您的受眾產生共鳴的無縫用戶體驗。

從設定 WhatsApp Business 帳戶到將 OpenAI 的 API 與 Node.js 程式碼集成，請跟隨我們揭開流程的神秘面紗，讓您能夠建立自己的 AI 驅動解決方案。這一進入人工智慧驅動的對話代理領域的變革之旅並不是您必須獨自承擔的。 人工智慧聊天機器人開發公司可以作為您值得信賴的合作夥伴，一路提供寶貴的見解和專業知識。讓我們一起踏上這趟令人興奮的探險之旅。

第 1 步：設定 Meta (Facebook) 企業帳戶和應用程式

首先建立一個元企業帳戶（點擊此處）。

填寫詳細資料並點擊“提交”。

2. 建立一個新的 Meta (Facebook) 應用程式（按此處）。

（登入）您的 Meta (Facebook) 開發者帳號。

登入後，點擊“我的應用程式”

3.現在點擊“創建應用程式”

4. 選擇“其他”，然後按一下“下一步”。

5. 選擇應用程式類型：“商業”，然後按一下“下一步”。

6. 提供應用程式詳細信息，然後按一下“建立應用程式”

步驟 2：設定 Meta (Facebook) 應用程式以進行 WhatsApp 集成

1. 將 WhatsApp 新增至您的 Meta (Facebook) 應用程式。

在“開發人員儀表板”中，選擇您的應用程式。
在應用程式的儀表板標籤中找到「將產品新增至您的應用程式」。

選擇“WhatsApp”進行設定。

選擇您的元 (Facebook) 企業帳戶
從側邊欄導覽至應用程式設定 > 基本

儲存更改。
將應用程式模式設定為即時

第 3 步：產生 WhatsApp 令牌

若要取得永久 WhatsApp 存取權令牌，請執行 1 至 3 個步驟：

1. 建立“系統使用者”：

存取元商務套件。
在左上角的下拉式選單中找到您的企業帳戶，然後按一下其設定（齒輪）圖示。
點選業務設定。

轉至使用者 > 系統使用者。

新增管理員系統使用者。

2. 添加資產。

建立系統使用者後，按一下「新增資產」。

導航至“應用程式”>“您的應用程式名稱”。
選擇您的應用程式並授予管理該應用程式的完全控制權。

3. 產生系統使用者存取令牌。

點選系統使用者上的“產生新令牌”按鈕。

選擇將使用令牌的應用程式並將令牌過期設為永不。

選擇“whatsapp_business_messaging”和“whatsapp_business_management”權限。

產生令牌。
複製存取令牌並安全儲存。

4. 為 WhatsApp 新增新的企業號碼

您可以使用自己的企業號碼或使用為您的 WhatsApp 聊天機器人提供的測試號碼。
在 WhatsApp 開發人員儀表板中，從側邊欄導覽至 WhatsApp > API 設定。

繼續“步驟 5：新增電話號碼”，點擊“新增電話號碼”。

在下面的表格中提供所需的詳細資訊。

使用收到的代碼驗證您的號碼。
成功新增後，在 API 設定的步驟 1 中選擇您的電話號碼。

5. 新增付款方式

要透過 WhatsApp 發送訊息，您需要有效的付款方式。請造訪此處以了解詳細資訊。
新增您的公司電話號碼後，按一下「新增付款方式」以解決「缺少有效付款方式」警報。

您將被引導至您的 WhatsApp 帳號設定。點擊“付款方式”>“新增企業付款方式”，然後按照指示新增您的卡片資訊。

6. 測試您的新 WhatsApp 公司號碼

返回 WhatsApp 開發人員儀表板，導覽至 API 設定
輸入測試“收件人”號碼。
按一下「發送訊息」以驗證訊息發送是否成功。

步驟 4：設定 WhatsApp API Webhook 設定

1. 驗證 WhatsApp Webhook 回呼。

在 WhatsApp 開發人員儀表板中，導覽至「配置」。
在 Webhook 下，按一下編輯

現在，我們需要向 WhatsApp 提供即時 Webhook URL 和代幣。即時 URL 是您的應用程式的 URL，令牌也是從您的端產生的。在下圖中，我新增了 Ngrok URL，因為我的 Node.js 應用程式在 Ngrok 上運行，並且我使用了 UUID 作為令牌。

在驗證過程中，WhatsApp 會向回呼 URL 發送 GET 請求以驗證中心令牌。以下用 Next.js（Node.js 框架）編寫的程式碼處理此驗證過程。只有當您的程式碼發送 200 狀態代碼作為回應時，驗證才會成功，如下所示。

導出異步函數 GET(req: NextRequest) {

讓 hubMode = req.nextUrl.searchParams.get("hub.mode");

讓 hubChallenge = req.nextUrl.searchParams.get("hub.challenge");

讓 hubToken = req.nextUrl.searchParams.get("hub.verify_token");

//在資料庫中尋找token

如果（

hubMode ===「訂閱」&&

hubToken ===“<來自.env的值或來自資料庫的值>”

）{

console.log("驗證成功");

返回新的回應（hubChallenge）；

}

return new Response("無效憑證", { status: 400 });

}

找到“訊息”欄位並通過選中該框來訂閱它。

現在我們需要從同一個 WhatsApp 企業帳號取得 WhatsApp 存取權杖和 Facebook 應用程式機密

在下圖中，您可以看到 Facebook 應用程式的秘密

我們還需要保留以下突出顯示的數據

在我們的代碼中，我們需要各種標識符，例如存取權杖、應用程式密鑰、測試號、電話號碼 ID 和企業帳戶 ID。這些標識符可幫助我們確定我們正在從誰接收訊息以及我們需要向誰發送訊息。

步驟5：透過API發送和接收訊息

在提供的 TypeScript 程式碼中，我們成功整合了 WhatsApp API 來傳送和接收訊息。此外，為了實現我的目標，我還結合了 OpenAI 和客製化訓練的 AI 模型來回應傳入的訊息。
提供給 WhatsApp 的回呼 URL 用於 GET 和 POST 請求。當訊息發送到企業號碼時，WhatsApp 會觸發此回調 URL 並發送訊息以及用戶詳細資訊。以下程式碼讀取該訊息並根據實現的邏輯進行回應。
POST 函數是處理傳入 POST 請求的非同步函數。它首先將傳入請求解析為 JSON，並提取用戶從 WhatsApp 發送的訊息。如果訊息未定義或為空，它將傳回狀態為 200 的回應，並且不會進一步繼續。
然後，該函數從請求中檢索公司電話號碼和寄件者的電話號碼。
然後，函數準備一個 POST 請求，透過 WhatsApp 將訊息傳回用戶。它建構請求的 URL，定義要傳送的訊息，並設定請求選項，包括方法、標頭和正文。
然後函數使用 fetch 函數發送請求。如果請求成功，它將傳回狀態為 200 的回應。如果任何時候發生錯誤，都會將其記錄到控制台。
getResponseNumber 函數是一個輔助函數，用於從傳入請求中提取寄件者的電話號碼。
此程式碼提供如何將 Node.js 應用程式與 WhatsApp Business API 整合的基本範例，從而允許自動發送和接收訊息。

// 一旦用戶向機器人提出問題並回覆用戶，WhatsApp 將觸發此發布請求

導出異步函數 POST(req: NextRequest) {

令 res: any = wait req.json();

讓 QuestionFromWhatsapp =

res?.entry?.[0]?.changes?.[0]?.value?.messages?.[0]?.text?.body; // 從whatsapp收到的問題

如果（

QuestionFromWhatsapp == 未定義 ||

QuestionFromWhatsapp.trim().length <= 0

）{

//如果請求只是關於狀態，則不要進一步移動

// 回傳 NextResponse.json({ message: "已收到" });

返回新的回應（“已收到”，{狀態：200}）；

}

//從回應中取得電話號碼id。該電話號碼是公司號碼

const 電話號碼 ID =

res?.entry?.[0]?.changes?.[0]?.value?.metadata["phone_number_id"];

//此方法將傳回收到訊息的電話號碼

const 回應編號 = getResponseNumber(res);

// 從資料庫取得userId

嘗試 {

常量版本=“v18.0”；

//檢查是否達到限制

常量電話號碼；

const 收件者電話號碼 = "+" + 回應號碼;

// const accessToken = process.env.WHATSAPPTOKEN

const accessToken = "您從 facebook 獲得的令牌";

嘗試 {

//------------- 此程式碼用於向電報發送訊息

const url = `https://graph.facebook.com/${version}/${phoneNumberId}/messages`;

// 定義請求體中要傳送的數據

常量資料 = {

訊息傳遞產品：“whatsapp”，

收件者類型：“個人”，

至：`${recipientPhoneNumber}`，

類型：“文字”，

文字: {

預覽網址：假，

body: "嗨，我是一個聊天機器人，我現在很忙，我會盡快回覆你。",

};

// 定義取得請求的選項

常數選項 = {

方法：“POST”，

標題：{

“內容類型”：“應用程式/json”，

授權：`不記名${accessToken}`，

正文：JSON.stringify（資料），

};

// 使用 fetch 發出 POST 請求

嘗試 {

const 回應 = 等待 fetch(url, 選項);

如果（！response.ok）{

throw new Error(`HTTP 錯誤！狀態：${response.status}`);

}

const data =等待response.json();

// 根據需要處理數據

} 捕獲（錯誤）{

// 依需要處理錯誤

控制台.log(錯誤);

}

返回新的回應（“已收到”，{狀態：200}）；

} 捕獲（錯誤）{

console.log("錯誤", 錯誤);

}

} catch（錯誤：任何）{

控制台.log(錯誤);

//在資料庫中維護錯誤日誌，以防出現無法處理的錯誤

}

const getResponseNumber = (res: 任意) => {

返回 res?.entry?.[0]?.changes?.[0]?.value?.contacts[0]?.wa_id;

};

結論

在這份綜合指南中，我們探討了將 WhatsApp Business API 與 Node.js 應用程式整合的複雜問題。從設定 Webhooks 到處理傳入訊息和發送客製化回應，我們介紹了處理存取權杖、應用程式機密、測試號碼、電話號碼 ID 和企業帳戶 ID 等基本步驟。

這種無縫整合不僅使企業能夠在 WhatsApp 上實現自動化通信，而且還釋放了無數的可能性，無論是製作客戶支援機器人、自動化行銷工作還是追求個人專案。當您踏上這段旅程時，請記住這只是一個基礎。 WhatsApp Business API 提供了大量附加功能等待探索並整合到您的應用程式中。

當您繼續完善人工智慧聊天機器人開發工作時，請考慮利用專家的專業知識 人工智慧聊天機器人開發公司。他們的見解和支持可以促進您的進步，確保您的聊天機器人能充分發揮潛力。在您的開發之旅中不斷前進時，請務必參閱官方WhatsApp Business API 文件以獲取全面、準確的資訊。