アプリではなく、WhatsAppチャットボットを作成する

公開: 2022-03-11

ずっと前に、私は企業（20万人以上の従業員）向けのWebアプリを作成しました。 Webアプリへのフィードバックにより、実験を行うようになりました。 Webアプリの代わりに、特定のユースケースを解決するためにWhatsAppチャットボットを作成するとどうなりますか？ 人々はそれをもっと良くしたいですか？ もっと便利でしょうか？

しかし、話はそれよりはるかに大きいです。 チャットボットには非常に多くの可能性があります！ このWhatsAppチャットボットのチュートリアルでは、学習の過程、発見したベストプラクティス、アプリとチャットボットの質問に関する予測を共有したいと思いました。 そしてそれを超えて：チャットボットはいつの日かすべての従来のアプリに取って代わりますか？

私が働いていた会社は、テルアビブのダウンタウンの真ん中に約2,000人の従業員のためのオフィスを持っていました。 駐車スペースは非常に限られているため、人々は、ある車が別の車をブロックしている二重駐車用に意図的に設計されたスペースに駐車します。 すべての二重駐車スペースで、最初のドライバーは内側に駐車し、2番目のドライバーは外側に駐車します。

ホワイトボードからWebアプリへ

アプリが登場する前は、大きなボードがありました。 すべてのドライバーは、駐車した場所、名前、電話番号をマークしました。 運転手は、オフィスを出る前に、誰かが自分の車をブロックしていないかどうかを確認する必要がありました。 もしそうなら、彼らは他のドライバーに電話をかけ、彼らが会議の途中にいないことを望み、彼らが行って車を邪魔にならないように動かすことができるようにする必要があります。

プロセスを改善するために、私はWebアプリを作成しました。

オリジナルのウェブアプリのコンセプトで、二重駐車スペースの内側と外側に数字と名前が表示されます。名前のあるものは青、名前のないものは緑です。

シンプルでした。 バックエンドはありません。 サーバーホスティングはありません。 データベースのメンテナンスはありません。 UIフレームワークすらありません。 WebpackやJSバンドルはまったくありません！ ただバニラJavaScript。

これは、GitHubの無料の静的ページホスティングを使用してホストされていました。 データベースはFireBaseであったため、リアルタイムサポートとJSONサポートがあり、バックエンドは必要ありませんでした。

ユーザーインターフェイスは単純明快でした。 ユーザーはすべての駐車場を確認し、空の駐車場をクリックして詳細を入力します。 それらがすでにパークされている場合は、ブラウザのローカルストレージからデータを取得します。 登録されたスロットをクリックすると、関連する連絡先の詳細が表示され、ドライバーに電話することを選択できます。

それはほぼ1年間うまく機能していました。 1日未満の開発は、多くの人々の時間を助け、節約しました。これは良い投資です。

Webアプリからチャットボットへ

ある日、FacebookはWhatsAppのAPIをリリースすると発表しました。 翌日、兄はAlexaをフィーチャーしたAmazonEchoを購入しました。 その頃、私もいたるところにGoogleアシスタントを見始めました。

世界はチャットボットに向かっているのではないかと思い始めたので、実験する必要があります。 ユーザーはチャットボットの使用を好みますか？ より少ないサポートを提供する必要がありますか？ さまざまなインフラストラクチャを活用するだけで、新しいメタ機能が導入されるでしょうか。

私は通常のウェブアプリについていくつかのフィードバックを受け取りました、そして私がWhatsAppチャットボットを作成するならばそれがそれに対処するかもしれないと信じていました：

  • 一部の古い携帯電話ではアプリがうまく機能しませんでした。
  • それは地下では機能しませんでした（駐車場がある場所-そこには良いモバイル信号がありません）。
  • ドライバーは、ダイヤラを開く代わりに、ブロッカーにメッセージを送信したいと考えていました。
  • ドライバーは、離れる前に毎回Webアプリを開くのではなく、誰かがブロックしている場合にプッシュ通知を受け取りたいと考えていました。

TelegramやWhatsAppなどのチャットプラットフォームの開発者は、アプリの安定性を確保するために何年も昼夜を問わず働いてきたことを覚えておくことが重要です。 彼らのリソースを使用し、質問に答えるための小さなエンジンのみを開発することにより、チャットプラットフォーム開発者に保守性のハードワークを任せることになります。 私がしなければならなかったのは、WhatsAppチャットボットの作り方を掘り下げることだけでした。

新しい駐車アシスタントチャットボットの開発を開始した直後、私はそのアイデアがいかに素晴らしいかを実感しました。 新しい機能を追加するのはとても簡単で迅速で、エンドツーエンドのテストを行う必要さえありませんでした。

信号がありませんか？ 問題ない。

つぶやき

それだけでなく、複雑なCI/CDプロセスも必要なくなりました。 チャットエミュレータで動作している場合は、どこでも動作します。 .apk 、Xcode、App Store、GooglePlayはありません。 チャットボットは、デバイスを登録したり、PubSubまたは同様のサービスを使用してプッシュ通知を行ったり、ユーザートークンを保存したりしなくても、ユーザーにメッセージを送信できました。 認証システムは必要ありません—ユーザーの電話番号を身分証明書として使用していました。

信号がありませんか？ 問題ない。 マニフェストファイルを使用してオフラインサポートを追加する必要はありませんでした。WhatsAppからすぐに提供されました。 ユーザーがwifiの方が優れている上位レベルに移動すると、メッセージはすぐに送信されます。

その後、チャットプラットフォームが新しい機能を導入するたびに、私のアプリはすぐにその恩恵を受けることに気づきました。 うわー、これは本当に良い投資です。 （公平を期すために、新機能によって機能が制限されたり、より多くの開発作業を必要とする重大な変更が作成されたりするリスクもあるため、ビジネスクリティカルなタスクを実装する前に慎重に検討してください）。

駐車アシスタント、プロトタイプWhatsAppチャットボットを書く

WhatsAppチャットボットを作成するための最初の課題は、WhatsAppからプログラムにメッセージを送信することです。 私が見つけた最も簡単な解決策は、共有のTwilio電話番号を使用することです。 これは開発用です。本番環境に移行する場合、開発者は専用の電話番号を使用する必要があります。

Twilioの無料番号は、それぞれ多くのTwilioユーザー間で共有されます。 アプリのエンドユーザーを他のTwilioユーザーのアプリのエンドユーザーと区別するには、エンドユーザーが事前定義されたメッセージをチャットボットに送信する必要があります。

ユーザーが共有番号に特別なメッセージを送信すると、その番号からのすべてのメッセージがTwilioアカウントとWebhookに送信されます。 これが、本番環境で専用の番号が必要な理由です。特定のユーザーが特定の共有番号で1つのアプリのみを使用したいという保証はありません。

WhatsAppメッセージの送信

Twilioの「ProgrammableSMSDashboard」には、左側のナビゲーションバーに「WhatsAppBeta」リンクがあります。

Twilioの「ProgrammableSMSDashboard」のスクリーンショット。最近のメッセージのグラフと、最近のエラーと警告の別のグラフを示しています。ナビゲーションバーの4番目のオプションは「WhatsAppBeta」です。

それをクリックすると、開発者には「サンドボックス」オプションのあるページが表示されます。

特別なWhatsAppメッセージが特定の番号に送信されるのを待っているTwilioのWhatsAppサンドボックスのセットアップ手順のスクリーンショット。

ユーザーを関連付けるには、Twilioが提供する番号に1つの特別なメッセージを送信する必要があります。 ユーザーがこれを行うと、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メッセージの2つの最も重要な技術的制限を覚えておくことが重要です。

  1. ボットがメッセージを受信すると、1つのテキスト返信を無料で送信できます。 それ以上はお金がかかります。
  2. ボットは、ユーザーからメッセージを受信して​​から24時間以内にのみ、ユーザーにメッセージを送信できます。 このウィンドウの外では、ボットは承認されたテンプレートを使用してメッセージのみを送信できます。これについては後で説明します。

WhatsAppメッセージの受信

メッセージの送信はかなり簡単でしたが、メッセージの受信と処理はさらに簡単です。

「WhatsApp用のTwilioサンドボックス」ページのスクリーンショット。 Sandbox Configurationセクションには、「メッセージが届いたとき」と「ステータスコールバックURL」の2つのエンドポイントURLフィールドがあります。サンドボックス参加者セクションには、ユーザーID（「whatsapp：」の後に電話番号が続く形式）が一覧表示され、特別なメッセージを送信してサンドボックスに友達を招待する方法について、以前と同じ手順が示されています。

Twilioの「サンドボックス」ページで、開発者はTwilioが共有WhatsApp番号で受信したメッセージを送信する場所を定義できます。 開発中、NgrokやServeoなどのサービスは、ローカルの開発者マシンにルーティングするパブリックURLを提供できます。

TwilioWhatsAppメッセージは次のようになります。

 { "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で、「送信者」と「構成」をクリックします。

Twilioの「WhatsApp対応送信者」ページのスクリーンショット、リスト番号、そのビジネス表示名、およびステータス（リストされているものは承認済み、もう1つは「WhatsAppからの承認を待っています」とマークされています）

これは私が選んだテンプレートです：

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

数日後、Facebookが私のテンプレートを承認し、チャットボットにメッセージを送信したドライバーだけでなく、WhatsAppを持っているすべての人にそれらのメッセージを送信し始めることができました。

テンプレートからメッセージを送信することは、同じAPIを使用して通常のメッセージを送信することとまったく同じです。 WhatsAppは、テンプレートと一致することを自動的に認識し、メッセージを承認します。

パーキングアシスタントだけでなく

この戦略は、オンラインストアを想像するときに私にとってエキサイティングです。おそらく、いつの日か、人々はチャットボットを使用して何でも購入できるようになるでしょう。 WhatsAppメッセージを送信して画像を添付するのと同じくらい簡単です。 ユーザーが各WhatsAppメッセージに実際のお金を添付できたかどうか想像してみてください。 物を買うのはとても簡単でしょう。 ユーザーは、サプライヤーのチャットボットと話すことで、何でも簡単に購入できます。

WazeやGoogleマップに代わるチャットボットを想像してみてください。 あなたはそれにあなたの目的地のテキストメッセージを送ります。 チャットボットプラットフォームは現在地を追跡しており、チャットボットは、ナビゲーションのリアルタイムの音声方向で自動的に再生される録音メッセージを送信します。

それは空想ではありません。 WhatsAppは現在、リアルタイムでの現在地の共有をサポートしています。必要なのは、受信したメッセージを自動再生するオプションと出来上がりです。

GettまたはUberアプリの代わりに、Wazeチャットボットまたはタクシーチャットボットについて考えてみてください。 あなたはあなたがどこにいるのかというメッセージを送り、それからタクシーが到着し、そしてあなたはWhatsAppを使って支払います。 とても簡単。

一部の読者は、「ユーザーは入力だけでなく、グラフィカルインターフェイスを好まないのではないか」と考えているかもしれません。 チャットボットプラットフォームは、チャットボットの所有者に、変換中にボタン、画像、および純粋なHTMLボックスを送信するオプションを提供すると思います。 FacebookはすでにWebviewforMessengerをサポートしています。 ユーザーは何もインストールする必要はありません。好みのインスタントメッセージングアプリを使用するだけです。

これらの利点により、開発者は、コロナウイルスのパンデミックに関する信頼できる回答を即座に提供するなど、誤った情報の拡散を抑えるのに役立つ重要なタスクを処理するWhatsAppチャットボットを作成しようとしています。

TL; DR：Webアプリのチャットボットへの移行に関する7つの結論

要約すれば：

  • 多くの場合、チャットボットを開発すると、グラフィカルユーザーインターフェイスを設計および計画する必要がないため、開発時間を大幅に短縮できます。 （とはいえ、他の人の過ちから学ぶために、始める前にチャットボットUXデザインのより細かい点を見る価値があります。）
  • チャットボットに新しい機能を追加する方がはるかに簡単です。 開発者は、現在の要素を再設計または変更する必要はありません。 チャットボットは、新しいタイプのメッセージの理解を開始する必要があります。
  • チャットボットは、特別なニーズを持つ人々がデフォルトではるかにアクセスしやすくなっています。
  • クロスプラットフォームソリューションをカスタマイズする必要はありません。 チャットボットプラットフォームはすでにそれを行っています。
  • ユーザーは、情報を共有するためにチャットボットをはるかに信頼しています。 許可を求めたり警告を表示したりする必要はありません。たとえば、ユーザーはギャラリーから画像を選択してチャットボットに送信するだけです。画像ギャラリーへのアクセス許可はチャットプラットフォームにすでに付与されています。
  • チャットプラットフォームを使用すると、プッシュ通知を簡単に処理できます。 プッシュ通知は、ユーザーが忘れるアプリとユーザーが定期的に使用するアプリの違いを生むものです。
  • チャットプラットフォームは、オフライン状態とオンライン状態の間の移動を処理します。

WhatsAppチャットボットを構築する方法：別れのアドバイスとベストプラクティス

チャットボットを作成するメリットは非常に明確です。 構築する準備ができている開発者は、1つのメッセージを理解するチャットボットを使用して、小規模から始めることをお勧めします。 そしてそれをうまく処理します。

チャットボットは短いメッセージに固執する必要があります。 人々は長いメッセージを読みません。 簡潔に表現できない重要なメッセージを送信する場合は、メッセージをいくつかの小さなメッセージに分割することをお勧めします。

個性のあるチャットボットの方が好評です。 最低限の「人間の話し方」でさえ、「データベースが更新されました」ではなく、「駐車場の地図を更新します」という「システムメッセージの形式」アプローチと比較して、大いに役立ちます。 チャットボットは、ユーザーが理解できない可能性のある技術的な操作を実行するブラックボックスではなく、ユーザーにサービスを提供するために存在するマシンであるという感覚をユーザーに残す必要があります。

このWhatsAppチャットボットのチュートリアルでは、ユーザーがチャットボットに送信する自然言語メッセージの解析の詳細については説明していません。 しかし、チャットボット開発サービスの意欲的なプロバイダーは、WhatsAppパーキングアシスタントボット（特に、ユーザーからのリクエストをアクションとして受け入れるhackparkDialogFlow.ts ）のソースコードを熟読して、その側面がどのように機能するかを理解することを歓迎します。

プログラミングへの依存性注入アプローチに従いながら、さまざまなタイプのユーザーメッセージを検出する方法に関するより詳細な記事については、ToptalのTypeScriptチャットボットチュートリアルを参照してください。

独自のWhatsAppチャットボット開発で頑張ってください！