){kind=small}
FlaskとReactでライブ会話のダッシュボードを構築する方法
所要時間：7 分
Vonageは最近 Conversation API を導入した。.このAPIは、異なるスタイルのコミュニケーション（Voice、Messages、Video）を可能にし、それらを相互に接続することができます。
アプリ内の複数の会話が一致し、それらのすべてのチャネルにわたってコンテキストを保持することが可能になりました！会話の履歴を記録して作業できることは、企業にとっても顧客にとっても非常に価値のあることです。
このチュートリアルでは、FlaskとReactを使ってダッシュボードを作成する方法を説明します。 アプリケーション.目標は、現在リアルタイムで行われているライブの会話から関連するデータを表示することです。
ひとつの会話 会話現在の会話リストから1つの会話を選択すると、接続されているメンバー メンバーと イベントが表示されます。個々のメンバーを選択すると、そのユーザーに関連する詳細情報が表示されます。 ユーザー.
dashboard gif
Vonage Conversation APIを使用すると、IPメッセージング、PSTN Voice、SMS、WebRTC AudioおよびVideoを含む複数のメディア間で通信を行うことができる会話機能を構築することができます。会話のコンテキストは、媒体に関係なく、会話内で行われる各通信イベントを通じて維持されます。
会話は2人以上のユーザー間で交わされるコミュニケーションのコンテナだと考えてください。会話は1つのやりとりの場合もあれば、2人の間のすべてのやりとりの履歴の場合もあります。
また、API を使ってイベントやレッグを作成し、2 人のユーザー間でテキスト、Voice、Video の通信を可能にしたり、Conversation に保存したりすることもできます。
flow of app
To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
また、このチュートリアルでは Ngrokを実行して ウェブフックサーバーをローカルで実行することを想定しています。
Ngrok をご存知でない方は、以下のチュートリアルをご参照ください。 チュートリアルをご参照ください。
まず、アプリケーションを作成する必要があります：
次に、Vonage番号(NEXMO_NUMBER)を借りていると仮定すると、コマンドラインを使ってVonage番号とアプリケーションをリンクさせることができます：
このアプリをローカルマシンで実行するには、まず次のリポジトリをクローンします。 このリポジトリ:
その後、依存関係をインストールする：
次のコマンドで .env.exampleファイルをコピーする：
その新しい .envファイルを開き、アプリケーションIDとパスを入力します。 private.keyのパスを記入してください。
Flaskファイルの中で検査すべき重要なdocは server.pyのすべての異なるエンドポイントを確立しているからだ。 Conversation API.
機能 make_capi_request()はVonageに接続し、アプリケーションを認証します：
def make_capi_request(api_uri):
nexmo_client = nexmo.Client(
application_id=os.getenv("APPLICATION_ID"), private_key=os.getenv("PRIVATE_KEY")
)
try:
response = nexmo_client._jwt_signed_get(request_uri=api_uri)
except nexmo.errors.ClientError:
response = {}
return jsonify(response)その下に必要なルートを作る：
@app.route("/")
def index(): # Index page structure
return render_template("index.html")
@app.route("/conversations")
def conversations(): # List of conversations
return make_capi_request(api_uri="/beta/conversations")
@app.route("/conversation")
def conversation():# Conversation detail
cid = request.args.get("cid")
return make_capi_request(api_uri=f"/beta/conversations/{cid}")
@app.route("/user")
def user(): # User detail
uid = request.args.get("uid")
return make_capi_request(api_uri=f"/beta/users/{uid}")
@app.route("/events")
def events(): # Event detail
cid = request.args.get("cid")
return make_capi_request(api_uri=f"/beta/conversations/{cid}/events")認証されると、これらの各ルートはアプリケーションID、そして最終的にはConversationまたはUser IDに基づいてConversation APIにアクセスする。
コードをモジュール化された再利用可能なコンポーネントに分割するReactの機能を利用しよう。必要なコンポーネントは以下の通りだ：
components - react tree
レベルでは App.jsレベルでは "/conversations"エンドポイントがコンストラクタ内で呼び出されていることに注目してください。つまり、アプリケーション内に現在の会話があれば、それらは即座にページに表示されます。
fetch("/conversations").then(response =>
response.json().then(
data => {
this.setState({ conversations: data._embedded.conversations });
},
err => console.log(err)
)
);
ユーザーはリストから会話を1つ選択し、その会話のメタ情報（名前やタイムスタンプなど）が表示される。
<div>
<article className="message is-info">
<div className="message-header">
<p>{this.props.conversation.uuid}</p>
</div>
<div className="message-body">
<ul>
<li>Name: {this.props.conversation.name}</li>
<li>ttl: {this.props.conversation.properties.ttl}</li>
<li>Timestamp: {this.props.conversation.timestamp.created}</li>
</ul>
</div>
</article>
<Tabs
members={this.props.conversation.members}
events={this.props.events}
conversation={this.props.conversation}
/>
</div>特定の conversationが選択されると、2つのタブが表示される： Eventsそして Members.
Membersがデフォルトの状態、つまり最初に表示される状態として設定されている。この時点で "/conversation"と "/events"エンドポイントが呼び出されます。ステート内で渡される cidを使用すると、現在のメンバーとイベントの詳細が表示されます。
refreshMembers = () => {
fetch("/conversation?cid=" + this.props.conversation.uuid)
.then(results => results.json())
.then(data => {
this.setState({ members: data.members });
});
};
refreshEvents = () => {
fetch("/events?cid=" + this.props.conversation.uuid)
.then(results => results.json())
.then(data => {
this.setState({ events: data });
});
};
コンポーネントが MembersList.jsコンポーネントは /userエンドポイントを呼び出し、その特定のユーザーに関するデータをさらに取得します。 MemberDetail.jsコンポーネント内に表示されます。
showMemberDetails = user_id => {
fetch("/user?uid=" + user_id)
.then(results => results.json())
.then(data => {
this.setState({ member: data });
});
};
バックエンドを起動するには、Flaskコマンドを実行する：
そしてターミナル内の別のタブで、Reactコマンドを実行する：
ブラウザで http://localhost:3000をブラウザで開くと、あなたのアプリが起動します！
接続されているアプリケーション内で現在実行されている会話はすべて、このダッシュボードに表示されます。
おめでとう！これでFlask、React、Vonageの Conversation API を使ってアプリケーションを作成しました。.これでアプリケーションの会話に関連するあらゆることを監視できるようになりました。このAPIの機能を使って遊び、探求し続けることをお勧めします。
会話API Conversation APIは現在ベータ版であり、皆様からのご意見・ご感想をもとに日々進化しています。ご質問等ございましたら、いつでも私たちの コミュニティ・スラック.