PythonおよびFlaskを使用したブラウザー通話
このFlask Webアプリケーションで、Twilio Clientを使用してブラウザー <-> 電話間、およびブラウザー間の通話を発信する方法についてご紹介します。
このアプリケーションは、「王様のスポーツ」を楽しむ人達に用品を販売する Birchwood Bicycle Polo Co. のサポートサイトを動かします。3 つの主要な機能があります。
- 悩みを抱えたお客様はサポートチケットを送信し、自分の電話番号と問題を知らせることができます。
- サポート担当者は、サポートチケットに対応するために、ブラウザーからお客様の電話番号に電話をかけることができます。
- また、お客様もブラウザーを使って、可能であれば、サポート担当者と直に話すことができます。
このチュートリアルでは、このアプリケーションを実行するための主要なコードをいくつか紹介します。コードを実行する方法については、GitHub のプロジェクトの README をお読みください。
サポートチケットを送信する
アプリケーションのホームページには、顧客がサポート・チケットを送信するためのフォームを表示します。 Flaskコミュニティーによるコンポーネント、Flask-WTFを使用してフォームを作成、ページの機能を組み込みます。
The SupportTicket is a SQLAlchemy model and has just a few fields. The international_phone_number formatter uses the python-phonenumbers library.
class SupportTicket(db.Model): """ Represents a support ticket """ __tablename__ = "tickets" id = db.Column(db.Integer, primary_key=True) name = db.Column(db.String, nullable=False) phone_number = db.Column(db.String, nullable=False) description = db.Column(db.String, nullable=False) timestamp = db.Column(db.DateTime) @property def international_phone_number(self): parsed_number = phonenumbers.parse(self.phone_number) return phonenumbers.format_number( parsed_number, PhoneNumberFormat.INTERNATIONAL)
Now we can create a ticket. Next up, let's work on the dashboard for the support agent.
サポートダッシュボード
サポート担当者が /dashboard にアクセスすると、投稿された全サポートチケットが表示されます。
また、各チケットには「Call Customer」ボタンがあり、callCustomer() という名前の JavaScript 関数を呼び出します。この関数は、まず、Twilio クライアントから、唯一のパラメーターとして渡された電話番号に電話をかけます。
Great, now we have an interface good enough for our support agents. Next up, in order to let our agents make calls to their customers through the browser, we need to provide them a capability token.
ケイパビリティートークンを生成する
We use the Twilio Python helper library to generate and configure our capability tokens. To allow our support agents to call the phone numbers on our tickets, we use the allow_client_outgoing() method.
そのメソッドでは、TwiML アプリケーションの識別子が必要です。ユーザーが Twilio クライアントを呼び出すと、Twilio はバックエンドに POST リクエストを送信します。TwiML アプリケーションは、そのリクエストの送信先の URL を Twilio に伝えます。
ケイパビリティートークンが取得できたら、次のステップはブラウザー内でTwilio Device Clientをセットアップすることです。
Set up a Twilio Device Client
ブラウザー内でTwilio Device Clientを使用するには、Twilio.jsライブラリーを使用します。
We start by retrieving a capability token from the view we defined in the previous step with a POST request through AJAX. Then we enable the Twilio Device Client for this page by passing our token to Twilio.Device.setup().
After that the Twilio.Device.ready() callback will let us know when the browser is ready to make and receive calls.
これで必要なものはほぼ全て揃いました。 いよいよチュートリアルの核心部分を見てみましょう。 ブラウザーからエージェントが通話を開始できるようにする方法を見ていきましょう。
顧客への通話発信（ブラウザーから電話へ）
When our support agents click on the Call Customer button on a support ticket, the function highlighted on the code snippet will initiate the call.
Twilio.Device.connect() を使って、新しい発信通話を開始します。バックエンドはTwilioにこの通話の処理方法を指示するので、Connectルートで使用するphoneNumberパラメーターを含めます。
お見事！ これでエージェントが顧客に電話をかけられるようになりました。 続いて、通話を電話番号に接続する方法を確認しましょう。
通話を電話番号に接続する
エンドユーザーが通話を発信すると、TwiMLアプリケーション - この例では /support/call - に設定したURLにTwilioはPOSTリクエストを送信します。
TwiML を使い、リクエストに応答し、その通話をどのように処理するか Twilio に指示します。Twilio は前のステップの phoneNumber パラメーターをリクエストに受け渡し、TwiML にダイヤルします。
After our call view responds, Twilio completes the connection between our support agent's browser and the customer's phone. Let's go back to the browser code and look at how to notify the agent of a call in progress.
発信中です
We use the Twilio.Device.connect() callback to update some UI elements to notify our users that they are in a call. This function receives a Connection object, which offers some additional details about the call.
これで、ブラウザーから電話への通話サンプルはおしまいです。 続いてさらにその先に進み、ブラウザー間のサンプルをお見せしましょう。
サポート担当者に電話をかける（ブラウザーからブラウザー）
Support tickets are useful, but sometimes a customer needs help right now. With just a little more work we let customers talk to a support agent live via a browser-to-browser call.
When a customer clicks the Call support button on the home page we again use Twilio.Device.connect() to initiate the call. This time we don't pass any additional parameters — our backend will route this call to our support agent.
Setting up the browser-to-browser call was rather simple right? Now let's look at how our backend will route this call to our support agent.
サポート担当に通話を接続する
サポート担当者に着信通話を受けられるようにするには、ケイパビリティ・トークンの生成時に allow_client_incoming() メソッドを使用します。 また、このメソッドにクライアント名として support_agent を渡す必要もあります。
Twilio が call ビューに POST リクエストを送信すると、<Client> TwiML 名詞と support_agent 名で応答することで、サポート担当者に通話を接続できます。
これで、着信通話を取るための準備は以上です。 ここでブラウザーに戻って今回の接続の処理方法を見てみましょう。
電話に応答する
サポート担当者のクライアントは着信を受け取ると、Twilio.Device.incoming() コールバックで定義した関数をトリガーします。
「応答」ボタンに紐づけられた関数内で.accept()メソッドが呼び出されるまで、着信接続 (connection) は保留状態になります。
また、通話中になると UI を更新するように、.accept() コールバックを設定します。
お見事！ これで両方のケース、すなわちブラウザーから電話への通話、そしてブラウザー間の通話における仕組みが理解できました！ 続いて、電話を切ることにした場合はどうなるか見ていきましょう。
通話を切断する
In order to finish a call we invoke Twilio.Device.disconnectAll(), which we wired to the Hang up button in our UI.
We also pass a callback function to Twilio.Device.disconnect() above, to reset some UI elements.
That's it! Our Flask application now powers browser-to-phone and browser-to-browser calls using Twilio Client.
次はどこでしょうか?
Twilio を使う Python 開発者であれば、以下のチュートリアルもお楽しみください。
Pythonによる到着予定通知の実装 - FlaskとTwilio
Twilioを使用して、異なる販促施策の効果を測定します。
これは役に立ちましたか?
Thanks for checking this tutorial out! If you have any feedback to share with us please contact us on Twitter, we'd love to hear it
ヘルプが必要ですか？
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.