Teilen Sie:
){kind=small}
Ein Englischlehrer, der zum einfühlsamen Softwareentwickler wurde. Ein neugieriger Optimist mit einer Leidenschaft für die Erstellung zugänglicher Inhalte und die Unterstützung von Entwicklern bei der Verbesserung ihrer Fähigkeiten.
Wie man mit Flask und React ein Dashboard für Live-Konversationen erstellt
Lesedauer: 10 Minuten
Vonage hat kürzlich die Conversation API. Diese API ermöglicht es Ihnen, verschiedene Kommunikationsarten (Voice, Messaging und Video) zu nutzen und diese miteinander zu verbinden.
Es ist nun möglich, dass mehrere Konversationen innerhalb einer App zusammenfallen und der Kontext über alle diese Kanäle hinweg erhalten bleibt! Die Möglichkeit, den Verlauf einer Konversation aufzuzeichnen und damit zu arbeiten, ist sowohl für Unternehmen als auch für Kunden unglaublich wertvoll, und wie Sie sich vorstellen können, freuen wir uns sehr darüber.
Dieses Tutorial zeigt, wie man mit Flask und React ein Dashboard erstellt, das alle aktuellen Konversationen innerhalb einer Anwendung. Das Ziel ist es, relevante Daten aus den Live-Konversationen, die gerade in Echtzeit stattfinden, zu präsentieren.
Wenn ein einzelnes Gespräch aus der Liste der aktuellen Unterhaltungen ausgewählt wird, werden die verbundenen Mitglieder und Ereignisse angezeigt. Ein einzelnes Mitglied kann dann ausgewählt werden, um noch mehr Informationen über dieses Mitglied zu erhalten Benutzer.
dashboard gif
Die Vonage Conversation API ermöglicht es Ihnen, Konversationsfunktionen zu erstellen, bei denen die Kommunikation über verschiedene Medien wie IP Messaging, PSTN Voice, SMS und WebRTC Audio und Video erfolgen kann. Der Kontext der Konversationen wird durch jedes Kommunikationsereignis, das innerhalb einer Konversation stattfindet, beibehalten, unabhängig vom Medium.
Stellen Sie sich eine Konversation als einen Container von Mitteilungen vor, die zwischen zwei oder mehr Benutzern ausgetauscht werden. Dabei kann es sich um eine einzelne Interaktion oder um den gesamten Verlauf aller Interaktionen zwischen ihnen handeln.
Mit der API können Sie auch Ereignisse und Legs erstellen, um Text-, Sprach- und Videokommunikation zwischen zwei Benutzern zu ermöglichen und diese in Conversations zu speichern.
flow of app
Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.
Dieses Tutorial geht auch davon aus, dass Sie Ngrok zum Ausführen Ihres Webhook Server lokal auszuführen.
Wenn Sie mit Ngrok nicht vertraut sind, lesen Sie bitte unser Ngrok-Anleitung bevor Sie fortfahren.
Zunächst müssen Sie eine Anwendung erstellen:
Angenommen, Sie haben bereits eine Vonage-Nummer gemietet (NEXMO_NUMBER), können Sie Ihre Vonage-Nummer über die Befehlszeile mit Ihrer Anwendung verknüpfen:
Um diese Anwendung auf Ihrem lokalen Rechner zum Laufen zu bringen, klonen Sie zunächst dieses Repository:
Installieren Sie dann die Abhängigkeiten:
Kopieren Sie die Beispiel .env.example Datei mit dem folgenden Befehl:
Öffnen Sie diese neue .env Datei und geben Sie die Anwendungs-ID und den Pfad zu Ihrer private.key ein, die wir gerade bei der Erstellung unserer Nexmo-Anwendung erzeugt haben.
Das wichtige Dokument, das wir in unseren Flask-Dateien untersuchen müssen, ist das server.py da es alle verschiedenen Endpunkte der Conversation API.
Die Funktion, make_capi_request() stellt eine Verbindung zu Vonage her und authentifiziert die Anwendung:
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)Darunter erstellen wir die notwendigen Routen:
@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")Nach der Authentifizierung greift jede dieser Routen auf der Grundlage der Anwendungs-ID und schließlich der Gesprächs- oder Benutzer-ID auf die Conversation API zu.
Wir werden die Fähigkeit von React nutzen, unseren Code in modularisierte und wiederverwendbare Komponenten zu zerlegen. Die Komponenten, die wir benötigen, sind:
components - react tree
Auf der App.js Ebene ist zu erkennen, dass der "/conversations" Endpunkt innerhalb des Konstruktors aufgerufen wird. Das bedeutet, dass aktuelle Unterhaltungen innerhalb der Anwendung sofort auf der Seite angezeigt werden, wenn es welche gibt.
fetch("/conversations").then(response =>
response.json().then(
data => {
this.setState({ conversations: data._embedded.conversations });
},
err => console.log(err)
)
);
Der Benutzer hat dann die Möglichkeit, eine der Unterhaltungen aus der Liste auszuwählen, und die Metadetails dieser Unterhaltung, wie Name und Zeitstempel, werden angezeigt.
<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>Beachten Sie, dass nach der Auswahl eines bestimmten conversation ausgewählt wurde, zwei Registerkarten sichtbar werden: Events und Members.
Members ist als Standardzustand festgelegt, d. h. er wird zuerst angezeigt. An diesem Punkt werden die "/conversation" und "/events" Endpunkte aufgerufen werden. Mit Hilfe des cid die innerhalb des Zustands übergeben wird, sind nun die Details der aktuellen Mitglieder und Ereignisse verfügbar.
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 });
});
};
Die Komponente MembersList.js Komponente ruft den /user Endpunkt auf, um noch mehr Daten über diesen bestimmten Benutzer abzurufen, die dann in der MemberDetail.js Komponente angezeigt werden.
showMemberDetails = user_id => {
fetch("/user?uid=" + user_id)
.then(results => results.json())
.then(data => {
this.setState({ member: data });
});
};
Um das Backend zu starten, führen Sie den Flask-Befehl aus:
Führen Sie in einer anderen Registerkarte Ihres Terminals den Befehl React aus:
Öffnen Sie http://localhost:3000 in einem Browser, und schon ist Ihre Anwendung einsatzbereit!
Alle Unterhaltungen, die derzeit innerhalb der verbundenen Anwendung laufen, werden nun in diesem Dashboard angezeigt.
Herzlichen Glückwunsch! Sie haben jetzt eine Anwendung mit Flask, React und der Vonage Conversation API. Sie können nun alle möglichen Dinge im Zusammenhang mit den Gesprächen in Ihrer Anwendung überwachen. Wir ermutigen Sie, mit den Möglichkeiten dieser API weiter zu spielen und sie zu erkunden.
Die Conversation API befindet sich derzeit in der Beta-Phase und wird auf der Grundlage Ihres Inputs und Feedbacks ständig weiterentwickelt. Wie immer helfen wir Ihnen gerne bei allen Fragen in unserem Community-Slack.