Partager:
){kind=small}
Un professeur d'anglais devenu ingénieur logiciel empathique. Un optimiste curieux, passionné par la création de contenus accessibles et par l'aide apportée aux développeurs pour qu'ils améliorent leurs compétences.
Comment construire un tableau de bord des conversations en direct avec Flask et React
Temps de lecture : 10 minutes
Vonage a récemment introduit l Conversation API. Cette API vous permet de disposer de différents styles de communication (Voice, Messages et Video) et de les connecter les uns aux autres.
Il est désormais possible de faire coïncider plusieurs conversations au sein d'une application et de conserver le contexte sur l'ensemble de ces canaux ! La possibilité d'enregistrer et d'exploiter l'historique d'une conversation est extrêmement précieuse pour les entreprises comme pour les clients, et comme vous pouvez l'imaginer, nous sommes très enthousiastes.
Ce tutoriel explique comment construire un tableau de bord avec Flask et React qui surveille toutes les conversations en cours dans une application. L'objectif est de présenter des données pertinentes à partir des conversations en direct qui se déroulent actuellement en temps réel.
Lorsqu'une seule conversation est sélectionnée dans la liste des conversations en cours, les membres connectés membres et les événements s'affichent. Il est possible de sélectionner un membre en particulier pour obtenir encore plus d'informations à son sujet. l'utilisateur.
dashboard gif
L'API de conversation de Vonage Conversation API vous permet de créer des fonctions de conversation où la communication peut avoir lieu sur plusieurs supports, notamment la messagerie IP, la voix RTC, les SMS, ainsi que l'audio et la Video WebRTC. Le contexte des conversations est maintenu à travers chaque événement de communication ayant lieu dans une conversation, quel que soit le support.
Une conversation est un ensemble de communications échangées entre deux ou plusieurs utilisateurs. Il peut s'agir d'une seule interaction ou de l'historique complet de toutes les interactions entre eux.
L'API permet également de créer des événements et des segments pour permettre des communications textuelles, vocales et vidéo entre deux utilisateurs et de les stocker dans des Conversations.
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.
Ce tutoriel suppose également que vous exécutez Ngrok pour exécuter votre webhook localement.
Si vous n'êtes pas familier avec Ngrok, veuillez vous référer à notre tutoriel Ngrok avant de poursuivre.
Tout d'abord, vous devez créer une Application :
Ensuite, si vous avez déjà loué un numéro Vonage (NEXMO_NUMBER), vous pouvez relier votre numéro Vonage à votre application via la ligne de commande :
Pour faire fonctionner cette application sur votre machine locale, commencez par cloner ce dépôt:
Installez ensuite les dépendances :
Copiez le fichier exemple .env.example à l'aide de la commande suivante :
Ouvrez ce nouveau fichier .env et indiquez l'identifiant de l'application et le chemin d'accès à votre fichier private.key que nous venons de générer lors de la création de notre application Nexmo.
Le document important à inspecter dans nos fichiers Flask est le document server.py car elle établit tous les différents points de terminaison de l'application Conversation API.
La fonction, make_capi_request() se connecte à Vonage et authentifie l'application :
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)En dessous, nous créons les itinéraires nécessaires :
@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")Une fois authentifiée, chacune de ces routes accède à l'API Conversation en fonction de l'identifiant de l'application et éventuellement de l'identifiant de la conversation ou de l'utilisateur.
Nous utiliserons la capacité de React à décomposer notre code en composants modulaires et réutilisables. Les composants dont nous aurons besoin sont les suivants :
components - react tree
Au niveau App.js remarquez que le point de terminaison "/conversations" est appelé dans le constructeur. Cela signifie que s'il y a des conversations en cours dans l'application, elles sont immédiatement affichées sur la page.
fetch("/conversations").then(response =>
response.json().then(
data => {
this.setState({ conversations: data._embedded.conversations });
},
err => console.log(err)
)
);
L'utilisateur a alors la possibilité de sélectionner l'une des conversations de la liste et les méta-détails de cette conversation, tels que le nom et l'horodatage, s'affichent.
<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>Remarquez qu'une fois qu'un conversation a été sélectionné, deux onglets deviennent visibles : Events et Members.
Members est défini comme l'état par défaut, ce qui signifie qu'il est affiché en premier. C'est à ce moment-là que les boutons "/conversation" et "/events" sont appelés. En utilisant l'élément cid qui est passé dans l'état, les détails des membres et des événements actuels sont maintenant disponibles.
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 });
});
};
Le composant MembersList.js appellera le point de terminaison /user pour récupérer encore plus de données sur cet utilisateur particulier, qui seront ensuite affichées dans le composant MemberDetail.js dans le composant.
showMemberDetails = user_id => {
fetch("/user?uid=" + user_id)
.then(results => results.json())
.then(data => {
this.setState({ member: data });
});
};
Pour démarrer le backend, exécutez la commande Flask :
Et dans un autre onglet de votre terminal, lancez la commande React :
Ouvrez http://localhost:3000 dans un navigateur, et votre application sera opérationnelle !
Toutes les conversations en cours dans cette application connectée seront désormais visibles dans ce tableau de bord.
Félicitations ! Vous avez maintenant créé une application avec Flask, React et l'API de conversation de Vonage. Conversation API de Vonage. Vous pouvez maintenant surveiller toutes sortes de choses liées aux conversations de votre application. Nous vous encourageons à continuer à jouer avec les capacités de cette API et à les explorer.
L'API Conversation API est actuellement en version bêta et évolue constamment en fonction de vos commentaires et de vos réactions. Comme toujours, nous sommes heureux de répondre à vos questions dans notre communauté slack.