創建一個 WhatsApp 聊天機器人，而不是一個應用程序

很久以前，我為一家企業（20 萬多名員工）構建了一個 Web 應用程序。 對網絡應用程序的反饋促使我做一個實驗。 如果我要創建一個 WhatsApp 聊天機器人來解決特定的用例，而不是一個 Web 應用程序，會發生什麼？ 人們會更喜歡它嗎？ 會不會更有用？

但故事遠不止於此。 聊天機器人有很大的潛力！ 在這個 WhatsApp 聊天機器人教程中，我想分享我的學習歷程、我發現的最佳實踐以及我對應用程序與聊天機器人問題的預測。 超越：聊天機器人有朝一日會取代所有傳統應用嗎？

我工作的公司在特拉維夫市中心有一個可容納約 2,000 名員工的辦公室。 停車位非常有限，因此人們將車停在特意為雙車位設計的空間中，一輛車擋住另一輛車。 在每個雙車位，第一個司機停在裡面，第二個司機停在外面。

從白板到 Web 應用程序

在有一個應用程序之前，有一個大板。 所有司機都標明了他們停車的地方，以及他們的姓名和電話號碼。 在離開辦公室之前，司機必須檢查是否有人擋住了他們的車。 如果是這樣，他們將不得不打電話給其他司機，並希望他們沒有在開會，這樣他們就可以去把車移開。

為了使這個過程更好，我創建了一個網絡應用程序。

這很簡單。 沒有後端。 沒有服務器託管。 沒有數據庫維護。 甚至沒有任何 UI 框架。 根本沒有 webpack 和 JS 包！ 只是普通的 JavaScript。

它是使用 GitHub 的免費靜態頁面託管來託管的。 數據庫是 FireBase，所以我們有實時支持和 JSON 支持，不需要後端。

用戶界面很簡單。 用戶會看到所有停車位，然後點擊一個空的停車位來填寫他們的詳細信息。 如果它們已經停放，它將從瀏覽器的本地存儲中獲取數據。 如果他們點擊一個註冊的位置，他們會看到相關的聯繫方式，並可以選擇給司機打電話。

它工作了將近一年。 不到一天的開發幫助並為許多人節省了時間——這是一項很好的投資。

從 Web 應用程序到聊天機器人

有一天，Facebook 宣布他們將發布適用於 WhatsApp 的 API。 第二天，我哥哥買了一個亞馬遜 Echo，裡面有 Alexa。 大約在那個時候，我也開始到處看到 Google Assistant。

我開始想，也許世界正朝著聊天機器人的方向發展，所以我應該嘗試一下。 用戶會更喜歡使用聊天機器人嗎？ 我需要給予更少的支持嗎？ 它會僅僅通過利用不同的基礎設施來引入任何新的元功能嗎？

我收到了一些關於常規網絡應用程序的反饋，我相信如果我要創建一個 WhatsApp 聊天機器人，它可能會解決這個問題：

• 該應用程序在一些舊手機上運行不佳。
• 它不能在地下工作（停車場所在的地方——那裡沒有良好的移動信號）。
• 司機希望向攔截器發送消息，而不是打開電話撥號器。
• 如果有人阻止他們，司機希望收到推送通知，而不是每次離開前都打開網絡應用程序。

重要的是要記住，Telegram 或 WhatsApp 等聊天平台的開發人員多年來日夜工作以確保其應用程序的穩定性。 通過使用他們的資源並僅開發一個用於回答問題的小型引擎，這將把可維護性的艱苦工作留給聊天平台開發人員。 我所要做的就是深入研究如何製作一個 WhatsApp 聊天機器人。

在我開始開發新的停車助手聊天機器人後，我立即意識到這個想法是多麼美妙。 添加新功能非常簡單快捷，我什至不需要進行端到端測試。

沒信號？ 沒問題。

鳴叫

不僅如此，我不再需要復雜的 CI/CD 流程。 如果它在聊天模擬器中工作，它會在任何地方工作。 沒有.apk ，沒有 Xcode，沒有 App Store，也沒有 Google Play。 聊天機器人能夠向用戶發送消息，而無需我註冊設備、使用 PubSub 或類似服務進行推送通知或保存用戶令牌。 不需要身份驗證系統——我使用用戶的電話號碼作為身份證明。

沒信號？ 沒問題。 我不需要使用清單文件添加離線支持：WhatsApp 開箱即用地給了我。 消息很快就會消失，當用戶會去上層，那裡有更好的 wifi。

然後我意識到，每次聊天平台引入新功能時，我的應用程序都會立即從中受益。 哇——現在這是一項非常好的投資。 （公平地說，新功能也存在限制功能或產生需要更多開發工作的重大更改的風險，因此在實施關鍵業務任務之前請仔細考慮）。

編寫停車助手，原型 WhatsApp 聊天機器人

要創建 WhatsApp 聊天機器人，第一個挑戰是從 WhatsApp 獲取消息到您的程序。 我找到的最簡單的解決方案是使用共享的 Twilio 電話號碼。 它僅用於開發——當轉向生產時，開發人員將希望使用專用電話號碼。

Twilio 的免費號碼在許多 Twilio 用戶之間共享。 為了將應用程序的最終用戶與其他 Twilio 用戶的應用程序區分開來，最終用戶必須向聊天機器人發送預定義的消息。

用戶向共享號碼發送特殊消息後，來自其號碼的所有消息都將定向到您的 Twilio 帳戶和 webhook。 這就是為什麼在生產中需要一個專用號碼的原因——不能保證給定的用戶只想在給定的共享號碼上使用一個應用程序。

發送 WhatsApp 消息

在 Twilio 的“可編程 SMS 儀表板”上，左側導航欄中有一個“WhatsApp Beta”鏈接：

單擊它，開發人員將看到一個帶有“沙盒”選項的頁面。

要關聯用戶，他們需要向 Twilio 提供的號碼發送一條特殊消息。 一旦用戶這樣做，我們就可以開始通過 Twilio 向他們發送消息並處理來自他們的消息。

以下是使用 cURL 發送消息的示例：

 curl 'https://api.twilio.com/2010-04-01/Accounts/{user_account}/Messages.json' -X POST \ --data-urlencode 'To=whatsapp:+{to_phone_number}' \ --data-urlencode 'From=whatsapp:+{from_phone_number}' \ --data-urlencode 'Body={escaped_message_body}' \ -u {user_account}:user_token

這是一條簡單的短信。 但是您也可以將媒體（圖像等）附加到您的消息中。 這是一個 Node.js 示例：

 function sendWhatsApp(to, body, media) { const auth = "twilio_clientid:twilio_api" const sendURL = "https://api.twilio.com/2010-04-01/Accounts/{account_id}/Messages.json" const res = await fetch(sendURL, { headers: { Authorization: "Basic " + Buffer.from(auth).toString("base64"), }, method: "POST", body: objToFORM( JSONRemoveUndefined({ To: "whatsapp:+972" + to.replace(/-/g, "").replace(/^0/, ""), From: "whatsapp:+18454069614", Body: body, MediaUrl: media, }), ), }) } function objToFORM(obj) { const params = new URLSearchParams() for (var a in obj) { params.append(a, obj[a]) } return params } function JSONRemoveUndefined(obj) { return JSON.parse(JSON.stringify(obj)) }

就是這樣：現在我們可以開始向客戶端發送消息了！ 但重要的是要記住 WhatsApp 消息的兩個最關鍵的技術限制：

1. 當機器人收到消息時，您可以免費發送一條短信回复。 不止這些，還要花錢。
2. 機器人只能在收到用戶消息後的 24 小時窗口內向用戶發送消息。 在這個窗口之外，機器人只能使用批准的模板發送消息，我們稍後會看到。

接收 WhatsApp 消息

發送消息相當容易，但接收和處理消息更加容易。

在 Twilio 的“沙盒”頁面上，開發人員可以定義 Twilio 應該將它在共享 WhatsApp 號碼上接收到的消息發送到哪裡。 在開發過程中，像 Ngrok 或 Serveo 這樣的服務可以提供路由到本地開發者機器的公共 URL。

Twilio WhatsApp 消息如下所示：

 { "NumMedia": "0", "SmsSid": "{sms_id}", "SmsStatus": "received", "Body": "Example Message from user", "To": "whatsapp:+{phone_number}", "NumSegments": "1", "MessageSid": "{message_sid}", "AccountSid": "{account_sid}", "From": "whatsapp:+{phone_number}", "ApiVersion": "2010-04-01" }

這就是我們所需要的。 我們可以使用任何編程語言來獲取此消息，對其進行解析，並嘗試了解用戶的要求。 這可能會導致對數據庫進行一些 CRUD 操作，之後機器人可以在其回復中將適當的信息（或成功/失敗消息）傳遞給用戶。 這些是如何創建 WhatsApp 聊天機器人的基礎知識。

消息模板

如前所述，聊天機器人只能向“當前”與其交互的用戶發送自由式消息，即在 24 小時窗口期間。 但是，如果您希望向新用戶或​​窗口外發送消息，則必須使用預先批准的消息模板。 這是為了防止垃圾郵件。

在我的用例中，我想在有人阻止驅動程序時更新驅動程序，即使他們不是聊天機器人的用戶。 在 Twilio 中，單擊“發件人”和“配置”。

這是我選擇的模板：

 {{1}} is blocking your exit from the parking lot. I will notify you when they leave.

幾天后，Facebook 批准了我的模板，我可以開始將這些消息發送給所有擁有 WhatsApp 的人，而不僅僅是向聊天機器人發送消息的司機。

從模板發送消息與發送常規消息完全一樣，使用相同的 API。 WhatsApp 會自動看到它與模板匹配並批准該消息。

不僅適用於停車助理

當我想像一個在線商店時，這個策略讓我興奮不已：也許有一天人們可以使用聊天機器人購買任何東西。 這就像發送 WhatsApp 消息和附加圖像一樣簡單。 試想一下，如果用戶能夠為每條 WhatsApp 消息附加真錢。 買東西會很簡單。 用戶可以通過與供應商的聊天機器人交談來輕鬆購買任何東西。

想像一下取代 Waze 或 Google Maps 的聊天機器人。 您向其發送目的地的短信。 聊天機器人平台正在跟踪您的位置，聊天機器人會向您發送一條錄製的消息，該消息會根據導航的實時語音方向自動播放。

這不是幻想。 WhatsApp 目前支持實時位置共享——他們所需要的只是自動播放收到的消息的選項，瞧。

想想 Waze 聊天機器人或出租車聊天機器人，而不是 Gett 或 Uber 應用程序。 您發送一條消息說您在哪裡，然後出租車到達，然後您使用 WhatsApp 付款。 很簡單。

一些讀者可能會想，“難道用戶不喜歡圖形界面，而不僅僅是打字嗎？” 我相信聊天機器人平台會給聊天機器人所有者在轉換過程中發送按鈕、圖像和純 HTML 框的選項。 Facebook 已經支持 Messenger 的 Webview。 用戶無需安裝任何東西，只需使用他們喜歡的即時消息應用程序即可。

這些優勢是開發人員希望創建 WhatsApp 聊天機器人來處理重要任務的原因，例如提供有關冠狀病毒大流行的即時權威答案，以幫助遏制錯誤信息的傳播。

TL;DR：關於將 Web 應用程序遷移到聊天機器人的 7 個結論

總之：

• 很多時候，開發聊天機器人可以顯著縮短開發時間，因為無需設計和規劃圖形用戶界面。 （也就是說，值得在開始之前查看聊天機器人 UX 設計的細節，從其他人的錯誤中學習。）
• 向聊天機器人添加新功能要容易得多。 開發人員不需要重新設計或更改任何當前元素。 聊天機器人只需要開始理解新類型的消息。
• 默認情況下，有特殊需求的人更容易使用聊天機器人。
• 無需定制跨平台解決方案。 聊天機器人平台已經這樣做了。
• 用戶更信任聊天機器人來共享信息。 您無需請求許可或顯示警告 - 例如，用戶可以簡單地從他們的圖庫中選擇一張圖片並將其發送到您的聊天機器人 - 訪問圖片庫的權限已經授予聊天平台。
• 聊天平台可以輕鬆處理推送通知。 推送通知是用戶忘記的應用程序和用戶經常使用的應用程序之間的區別。
• 聊天平台為您處理離線和在線條件之間的移動。

如何構建 WhatsApp 聊天機器人：分手建議和最佳實踐

編寫聊天機器人的優點非常明顯。 建議準備構建一個的開發人員從小處著手，使用能夠理解一條消息的聊天機器人。 並且處理得很好。

聊天機器人應該堅持短消息。 人們不閱讀長消息。 當您有重要的事情要發送而無法簡潔地表達時，最好將消息拆分為幾個小消息。

有個性的聊天機器人更受歡迎。 與“系統消息形式”方法相比，即使是一些最低限度的“人工說話”也有很長的路要走：“我會為你更新停車地圖”，而不是“數據庫已更新”。 聊天機器人應該讓用戶感覺到它是一台為用戶服務的機器，而不是一個執行他們可能無法理解的技術操作的黑匣子。

這個 WhatsApp 聊天機器人教程沒有詳細說明解析用戶將發送給聊天機器人的自然語言消息。 但是歡迎有抱負的聊天機器人開發服務提供商仔細閱讀 WhatsApp 停車助手機器人的源代碼（特別是hackparkDialogFlow.ts ，它接受用戶的請求作為操作），以了解這方面的工作原理。

有關如何檢測不同類型的用戶消息的更深入的文章（同時還遵循依賴注入方法進行編程），請參閱 Toptal 的 TypeScript 聊天機器人教程。

祝您開發自己的 WhatsApp 聊天機器人好運！