透過 WhatsApp Flows，您可以建立互動式訊息，以便用戶直接在 WhatsApp 上完成操作。流程允許您建立用於使用者互動的螢幕。例如，您可以建立簡單的輸入表單來收集潛在客戶或提交評論。此外，您可以跨多個螢幕設計複雜的流程來安排約會。
本指南將引導您建立一個 Node.js 應用程序，允許用戶透過 WhatsApp Flows 進行預約。您將在 WhatsApp Business Platform 上建立 Flow，然後配置 Webhook 以接收 Flow 的回應並預約。
要學習本教程請確保您擁有
造訪WhatsApp Business 平台
存取Meta 託管的雲端 API
Meta 上面向開發者的應用
程式
在 Meta for Developers 上新增至應用程式儀表板的電話號碼
已完成在您的帳戶中使用 Flows 所需的步驟，包括驗證您的帳戶
一個故障帳戶
了解 JavaScript 和 Node.js
建立 WhatsApp 流程
建立 WhatsApp Flow 有兩種方法：Flows Builder（可透過 WhatsApp Manager 存取）和 Flows API。本教學使用 Flows Builder。
建立流程
在 WhatsApp Manager 儀表板的左側選單中，選擇帳戶工具。然後，點擊串流。
WhatsApp 管理器圖形
點選右上角的建立流。
建立流程圖
在出現的對話方塊中填寫約會流程的詳細資訊
名稱 — 輸入BookAppointment，或選擇您喜歡的其他名稱。
類別 — 選擇預約。
範本 — 選擇「預約」。您將使用該模板，因為它 荷蘭 whatsapp 號碼數據 包含預約的必要元素。這些元素包括約會詳細資訊、用戶詳細資料輸入、約會摘要和公司條款顯示的螢幕。您可以進一步自訂範本以適合您的用例。
點擊提交以建立流程
您可以在 Builder UI 右側預覽流程。約會螢幕允許用戶選擇約會詳細信息，例如地點和日期。詳細資料畫面是使用者輸入資訊的地方。摘要畫面顯示預約摘要。最後一個畫面顯示公司的條款。
當您編輯流程時，流程仍處 購買聯絡號碼資料庫：促進業務成長的明智投資 於草稿狀態。您目前可以與您的團隊分享它，僅用於測試目的。要與大量受眾分享，您需要發布它。但是，發布後您將無法編輯流程。由於您仍需要為此約會流程新增端點 URL，因此暫時將其保留為草稿，然後繼續下一步，您將在其中設定端點。
配置流的端點
WhatsApp Flows 可讓您連線到外部端點。此端點可以為 印度數據 您的流和控制路由提供動態資料。它還接收用戶從 Flow 提交的回應。
出於測試目的，本文使用 Glitch 託管端點。使用 Glitch 完全是可選的，並且不需要使用 Flows。您可以從 GitHub 克隆端點程式碼並在您喜歡的任何環境中運行它。
存取Glitch 中的端點程式碼
並重新混合它以獲得您的唯一網域。要重新混合，請點擊頁面頂部的“重新混合” 。一個唯一的網域將會作為佔位符出現在 Glitch 頁面右側的輸入元素中。
在繼續之前，讓我們先瀏覽一下程式碼。該目錄中有四個 JavaScript 檔案src：encryption.js、flow.js、keyGenerator.js和server.js.入口文件是server.js，我們先來看一下。
伺服器.js
該server.js檔案首先配置 Express 應用程式以使用express.json中間件解析傳入的 JSON 請求。然後，它會載入端點所需的環境變數。
要存取您的APP_SECRET請導航
至 Meta for Developers 上應用程式上的儀表板。在左側導覽窗格中的「應用程式設定」下，選擇「基本」。點擊應用程式密鑰下的顯示並複製密鑰。然後，返回 Glitch，開啟文件，並建立以您複製的機密值命名的變數。.envAPP_SECRET
PRIVATE_KEY幫助解密收到的訊息。將PASSPHRASE用於驗證私鑰。除了私鑰之外，您還需要相應的公鑰，稍後您將上傳該公鑰。切勿在此使用生產帳戶的私鑰。建立一個臨時私鑰用於在 Glitch 上進行測試，然後將其替換為您自己的基礎設施中的生產金鑰。
透過在 Glitch 終端機中執行以下命令來產生公鑰-私鑰對。替換<your-passphrase>為您指定的密碼。點擊頁面底部的「終端」標籤可存取 Glitch 終端。
複製密碼和私鑰並將其貼
上到件中。點擊左側邊欄上標記為.env的文件，然。不要直接從 UI 編輯它，因為它會破壞您的金鑰格式。
設定環境變數後，複製您產生的公鑰並透過 Graph API上傳公鑰。
該server.js檔案還包含POST執行不同步驟的端點：
密鑰產生器.js
如您之前所見，此文件有助於產生私鑰和公鑰。與該文件一樣encryption.js，本教學不會keyGenerator.js詳細探討該文件。
流.js
處理流程的邏輯位 進行預約 於此文件中。它以指定名稱的物件開始SCREEN_RESPONSES。該物件包含螢幕 ID 及其相應的詳細信息，例如資料交換中使用的預設資料。在同一個物件中。