メニュー

Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Twilio Studioでチャットボットを構築する

チャットボットはエンドユーザーが親しみやすい会話ベースの方法で簡単なタスクを完遂するのに役立ちます。 受信テキストメッセージに返信し、エンドユーザーとチャットしてコーヒーの注文の手助けをする簡単なFlowの構築方法を見てみましょう。

Flowを作成する

素の状態のTwilio Studio Flowから開始します。 Twilioアカウントにログインし、Studioダッシュボードに移動し、+アイコンをタップして新規Flowを作成します。 Flowにお好きな名前を付けることができます。 このサンプルではBarista Botという名前にすることにします。

Barista BotのFlow

キャンバスにはすでにWidgetが配置されています。 これはTrigger Widgetであり、指定されたTriggerが発動したときにこのFlowが開始されます。 今回使用するTriggerは受信メッセージですので、電話番号にSMSを送信してきたユーザーをチャットボットに誘導しようと思います。

Incoming Message Trigger

ユーザーに注文の入力を促す

まず、Send & Wait For Reply Widgetをキャンバスにドラッグすることから始めます。 続いて赤いドットを新しいWidgetの端にある灰色の点にドラッグしてIncoming Message Triggerに接続します。 このWidgetを使用すると、エンドユーザーに返信を促すSMSを送信できます。 今回のケースでは、お客さんにどんな種類のコーヒーを注文したいかを尋ね、相手は提示された選択肢のひとつを返信することになります。

注文プロンプト


入力に基づいて分岐させる

We want to make sure our user gets a coffee from our list, so we’ll need to use a Split Based On... widget to distinguish valid inputs from other messages. First, we’ll set the variable to test in the right sidebar. Find the Send & Wait For Reply widget in the dropdown, and select inbound.Body from the list to capture the reply to your prompt.

Split order variable

Next, we’ll need to declare the choices we’re looking for in those responses -- latte, cappuccino, americano, cortado, and cold brew. Tap the red New at the bottom of the Split widget to reveal the Transition On... dropdown menu. Select Condition Matches to create a new Transition.

新規Match Condition

右側のサイドバーで、先ほど作成した新規Transitionを見つけ、ドロップダウンからMatches Any Of(以下のいずれかに一致)を選択します。 すべてのコーヒーの品揃えを網羅するため、この値をラテ, カプチーノ, アメリカーノ, コルタード, コールドブリューに設定します。 新規Transitionを保存すると、これがWidget上に表示されます。

コーヒー Condition Machine

Triggering Twilio Function

If the user enters something that the bot recognizes (one of our five drinks), we should send a request to our barista system so the order can be completed. The Twilio Function widget will help us do this; simply drag one of these widgets onto the canvas and connect it to the Transition you just created.

Create Barista Order Function Flow

Before we can configure our widget we need to create a Twilio Function. Go to the Manage Twilio Functions section of the Twilio Console and create a new Function with a blank template.

Create Barista Order Function Template

For now we will simply log our order here but you could write at this point to a database for example. Give it a name like "Barista Create Order" and a path such as "/create-order". Afterwards insert the following code in it:

exports.handler = function(context, event, callback) {
  console.log(event.drink);
  callback(null, 'success');
};

Make sure to save your Function and go back to the Function widget inside your Twilio Studio flow. Pick your Twilio Function in the Function URL dropdown menu in the right sidebar. You can also add a parameter to the request. Scroll down to the section for Function Parameters, and create a field called drink. The value can then be set to the same variable we’re checking in our split above: {{widgets.order_prompt.inbound.Body}} (where order_prompt matches the name of your initial prompt widget).

Function Configuration Widget

バリスタAPIにリクエストが送信されると、これで一丁上がりです! このとてもシンプルなやり取りだけで、お客さんには注文したコーヒーが手渡されます。

人間にバトンタッチ

でも、ユーザーが5種類のコーヒーの選択肢以外のものを入力した場合はどうでしょうか? それでもなお、お客様にはおもてなしをしたいものです。 時として、チャットボットから人間に交代するのが最良のソリューションになります。 ユーザーがリストにないものを注文したら、お客さんに電話をかけて、バリスタが直接注文を受けられるようにしましょう。 別のSend & Wait For Reply Widgetをキャンバスにドラッグし、今回はこれをSplit WidgetのNo Matches(一致なし)の条件に接続します。

Split on Order to Call or Function Flow

確認メッセージとして、「どのように受け取られるか皆目見当がつきませんが、お客様にはぜひコーヒーをお楽しみいただきたいと思います。 これから直接バリスタにおつなぎします - 今お電話してもよろしいですか?」 別のSplit Widgetは、ここでのユーザーからの返信の処理に役立ちます。 「Y」または「はい」を選択したら、バリスタへの通話を発信できます。 Widgetをキャンバスにドラッグして、Variable to Test として直近の Send & Wait for Reply の inbound.Body を選択し、条件を作成します。

Split on Call Choice

通話を発信する

ここから、Make Outgoing Call(通話を発信する)Widgetをキャンバスにドラッグし、「はい」の条件に接続できます。 StudioはFlowから発信通話をトリガーし、バリスタと通話できるようになります。

Make Outgoing Call

お客さんが受話器を取ると、Say/Play Widgetを使用してバリスタに取り次ぐ旨のメッセージをアナウンスし、それからConnect Call To(通話を接続)Widgetを使用して、メッセージの再生が終了したらお客さんをバリスタに接続します。 これらのWidgetをキャンバスにドラッグし、点を接続します。

バリスタに通話を接続する

完成版のプロダクト

The final state of the canvas is that we have our Trigger widget take an incoming message, connect to a Send & Wait For Reply widget, then to a Split Based On... widget, with transitions to either a Twilio Function (successful order) or another Send & Wait For Reply (unsuccessful order). This second Send & Wait For Reply connects to a Split Based On... widget, which ultimately leads to a Make Outgoing Call widget which calls the the user from the bot, a Say/Play which announces the connection, and a Connect Call To widget which connects the user to the barista by voice.

Barista Chat Flow

Flowを保存および公開した後、最後にするべきことはFlowを電話番号に接続することです! Twilio Consoleで、電話番号の管理を選択し、チャットボットへの接続に使用したい電話番号を選択します。 日本のTwilio番号ではチャットボットとメッセージを送受信できませんのでご注意ください。

番号の管理

メッセージの送受信セクションに移動し、最初のドロップダウンからStudio Flowを選択、そして2番目のドロップダウンからBarista Bot(あるいはFlowにご自身の付けた名前)を選択します。 「保存」をクリックすればすべて完了です。

Twilio番号にバリスタボットを設定する

おめでとうございます! チャットボットが完成し、コーヒーの注文をバリスタシステムにルーティングしたり、人間に取り次いだりするだけの賢さを備えたチャットボットが出来上がりました。 お次はどんなチャットボットを構築しますか?

Brent Schooley Dominik Kundel David Prothero
Rate this page:

ヘルプが必要ですか?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.