Erstellen einer sicheren Video-Applikation für Termine mit der Vonage API

In der heutigen Welt ist Video ein unverzichtbares und leistungsfähiges Werkzeug für viele Anwendungsfälle: ob Sie sich aus der Ferne in ein Klassenzimmer begeben, Ihren Arzt konsultieren oder sogar Ihren Aufenthaltsort in einem Notfall mitteilen. Dies sind nur einige Beispiele dafür, was Entwickler mit unserer Plattform entwickelt haben, und sie alle haben mindestens eines gemeinsam: ihre Lösung bietet ein personalisiertes Erlebnis mit Video.

In diesem Blogbeitrag stellen wir Ihnen eine Referenzanwendung für Videotermine vor. Wir haben sie erstellt, um eine Grundlage für verschiedene Implementierungen zu schaffen. Wir zeigen Ihnen, wie Sie Funktionen hinzufügen können und wie Sie sie auf verschiedene Anwendungsfälle anwenden können.

In wenigen Schritten haben Sie eine Lösung gefunden, mit der Sie Videotermine erstellen, eine Nachricht mit einem Terminlink an die Teilnehmer senden und natürlich ein Videogespräch beginnen können. Sie werden auch lernen, wie Sie das Aussehen und die Bedienung anpassen können.

Sie können den vollständigen Code der Beispielanwendung finden auf GitHub.

Hintergrund

Als Solution Engineers erfahren wir, was Entwickler mit unseren APIs entwickeln - sei es ein einzigartiger Anwendungsfall, eine coole Integration oder sogar ein Workaround für einen Fehler.

Ein Teil unserer Arbeit besteht darin, Muster in den Entwicklungen unserer Kunden zu erkennen und daraus Referenzanwendungen zu erstellen. Unser Ziel ist es, die Entwicklungszeit zu verkürzen und eine bessere Ausgangsbasis zu schaffen.

Bei den Überlegungen zur Anwendung für Videotermine haben wir an drei wesentliche Merkmale gedacht:

1. Termine im Voraus planen und deren Uhrzeit und Datum durchsetzen.

2. Benachrichtigung der Teilnehmer mit Links zur Teilnahme an der Telefonkonferenz.

3. Einfache Benutzeroberfläche für Videoanrufe mit Schaltflächen, mit denen die Teilnehmer sich stummschalten und ihren Bildschirm freigeben können.

Unsere Erwartung an dieses Projekt war es, unseren Kunden einen Vorsprung bei ihrem Videoprojekt zu verschaffen.

Es gibt eine Vielzahl von Anwendungsfällen, die auf der Anwendung implementiert werden können, und wir erklären, wie.

Konzept

Dieser Beitrag wird Ihnen helfen, zwei Komponenten anzupassen: Eine Vue-Web-Anwendung und ein Express-NodeJS-Anwendungsserver. Nach Beendigung dieses Walkthroughs werden Sie eine grundlegende und konfigurierbare Video-Termine Anwendung haben.

Hinweis: Wir haben auf GitHub eine Schaltfläche "Zu Heroku bereitstellen" hinzugefügt, um Ihnen die Arbeit zu erleichtern.

Beispiel Gesundheitswesen

Gehen wir von einem einfachen Anwendungsfall im Gesundheitswesen für die Anwendung aus, die wir erstellen wollen. Normalerweise hätten wir die folgenden Rollen: Ein Kliniker, ein Arzt und ein Patient.

Der Arzt vereinbart mit Hilfe der Anwendung einen Termin zwischen dem Patienten und dem Arzt, woraufhin zwei Links erstellt werden. Ein Link wird an den Patienten gesendet, der andere wird an den Arzt geschickt oder in dessen Kalender eingetragen.

Der Link zum Patienten könnte per SMS oder über einen anderen Nachrichtenkanal wie WhatsApp verschickt werden. Wenn die Zeit gekommen ist, wird der Patient dem Termin beitreten und auch der Arzt, indem er die Links benutzt.

Über diese Links wird eine Videokonsultation in der Anwendung gestartet. Je nachdem, wie Sie Ihre Lösung implementieren, kann jede Rolle unterschiedliche Berechtigungen haben. Der Arzt kann beispielsweise jederzeit in den Termin einsteigen, während der Patient nur zu der für ihn vorgesehenen Zeit einsteigen kann.

Voraussetzungen

• Vonage Video API Account

• NodeJS-Erfahrung auf Anfängerniveau

• Vue-Erfahrung auf Anfängerniveau

Vonage API-Konto

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.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Video API

Die Vonage Video API ist eine WebRTC-basierte Lösung. Sie unterstützt viele Plattformen, darunter Browser, Android, iOS, Windows und macOS. Wir werden die Video API verwenden, um Live-Videositzungen zwischen unseren verschiedenen Rollen zu erstellen. Sie können mehr über die API lesen auf dem Vonage Video Developer Center.

Für diese Anwendung benötigen Sie ein "OpenTok API"-Projekt. Wenn Sie noch keins haben, können Sie ein neues Projekt im Video-Dashboard.

Messages API

Die Vonage Messages API ist ein Gateway zu mehreren Messaging-Kanälen, wie SMS, WhatsApp und Viber. Sie ermöglicht es Ihnen, Nachrichten über einen oder mehrere Kanäle zu senden und zu empfangen. Wir werden sie nutzen, um SMS-Nachrichten mit den Termindetails an unsere Nutzer zu senden. Sie können mehr über die API lesen auf dem Entwicklerportal.

Sie benötigen eine Telefonnummer, die Sie für Ihre Bewerbung verwenden können. Verwenden Sie das Account-Dashboard um eine Nummer zu finden, die Sie kaufen und für dieses Projekt verwenden können.

Werkzeuge

Wir empfehlen die Verwendung von ngrok zu verwenden, um Ihren Server und Visual Studio Code um an dem Projekt zu arbeiten.

Einrichtung

Klonen Sie die Beispielrepositorie und navigieren Sie in den Projektordner:

git clone https://github.com/nexmo-se/opentok-secure-appointment.git
cd opentok-secure-appointment

Die Datei example.env Datei enthält alle erforderlichen Parameter, um das Projekt zum Laufen zu bringen. Nach dem Einrichten müssen Sie die Datei kopieren:

cp example.env .env

Werfen wir einen Blick auf das Konfigurierbare:

Messages API

Sie müssen Anmeldeinformationen für die Messages API angeben, die Sie auf dem Vonage Communications APIs Dashboard. Zusätzlich zu API_KEY und API_SECRETsollten Sie die Telefonnummer angeben, die Sie mit Ihrem Account verknüpft haben.

Das ist die Nummer, über die Ihre Anwendung SMS-Nachrichten mit den Termindaten sendet.

Video API

Ähnlich wie bei der Einrichtung der Messages API müssen Sie auch hier die API_KEY und API_SECRET in Ihr Video-Projekt aufnehmen. Diese finden Sie im Video-Dashboard.

Es gibt zwei Arten von Sitzungen, zwischen denen Sie wählen können, indem Sie Folgendes einstellen SESSION_MEDIA_MODE: weitergeleitet oder geroutet.

Relayed-Sitzungen sind Peer-to-Peer-Sitzungen und die Medien laufen nicht über den Medienserver von Vonage. Bei gerouteten Sitzungen handelt es sich jedoch nicht um Peer-to-Peer-Sitzungen, und die Medien werden über den Medienserver von Vonage gestreamt.

Relayed-Sitzungen haben eine geringere Latenzzeit, aber wir empfehlen, dass nicht mehr als drei Teilnehmer an ihnen teilnehmen. Außerdem unterstützen sie nicht unterstützt einige Funktionen wie die Archivierung nicht. Geroutete Sitzungen hingegen funktionieren in Situationen mit sehr geringer Bandbreite schlecht, aber sie unterstützen mehr Funktionen und können eine große Anzahl von Teilnehmern verarbeiten.

Frontend

Die Client-Anwendung muss mit der URL des Servers konfiguriert werden, die von Ihnen und der Art und Weise, wie Sie Ihren Server bereitstellen, bestimmt wird. Wir empfehlen, dass Sie ngrok für die Entwicklung und das Testen Ihrer Anwendung verwenden.

Darüber hinaus verfügt die Beispielanwendung über zwei konfigurierbare UI-Komponenten - das Logo Ihres Unternehmens und den Namen Ihres Unternehmens (LOGO_URL & COMPANY_NAME jeweils).

Video-Sitzungen können bei standardmäßig ausgeschalteter Kamera und nur mit Audio verbunden werden. Überlegen Sie, was für Ihre Anwendung am besten geeignet ist, und setzen Sie das AUDIO_ONLY Flag entsprechend.

Zu guter Letzt möchten Sie vielleicht Ihre eigene SMS-Vorlage erstellen. Sie haben drei Variablen, die standardmäßig mit der Anwendung geliefert werden: Termindatum, Terminzeit und Terminlink. Dies ist die SMS-Nachricht, die gesendet wird, wenn ein neuer Termin geplant wird, wenn der Arzt diese Option wählt.

Das kann zum Beispiel so aussehen:

You have an appointment set for {date} at {time}, please click this link to join! {link}

Oder

An appointment to our clinic has been set for you for {date}, at {time}. To join the video call please use this link: {link}

Sie können sie mit den von uns angegebenen Parametern an Ihre eigenen Bedürfnisse anpassen.

Bonus: Fügen Sie dem Code weitere Parameter hinzu, indem Sie die sendAppointmentMessage(appointment, number, shouldSendSMS) Methode in Booking.vue. Sie können den Namen des Arztes hinzufügen, um es persönlicher zu machen.

Skripte und Ausführung

Nach dem Setup installieren Sie das Projekt einfach durch Ausführen von npm install. Dann können Sie es mit npm run start-dev.

Ihr Server sollte nun lokal zusammen mit dem Client laufen. Gehen Sie zu localhost:3000 (oder den von Ihnen gewählten Port) und buchen Sie Ihren ersten Termin! Sie können die Uhrzeit wählen und entscheiden, ob Sie eine SMS an den "Patienten" senden möchten. Sobald der Termin erstellt ist, können Sie entweder die URL des Gastgebers oder des Gastes kopieren und an der Video-Konsultation teilnehmen.

Technische Referenz

Wenn Sie einen genaueren Blick auf die Routen des Kunden werfen möchten, finden Sie diese unter ./src/client/App.vue. Hier können Sie auch weitere Routen zu Ihrer Anwendung hinzufügen.

Für eine technisch detaillierte Erklärung werfen Sie bitte einen Blick in die Kunden-README und die Server-README.

Bitte beachten Sie, dass die Standardroute zu /booking.

Benutzerhandbuch

Als Kliniker sollte Ihr Einstiegspunkt sein https://SERVER_ADDRESS/booking (wobei SERVER_ADDRESS der Ort ist, an dem Sie die Anwendung bereitgestellt haben). Dies ist die Seite, auf der Sie Termine planen und die Liste der bereits geplanten Termine einsehen können.

Bei der Planung eines Termins können Sie auch eine SMS an den Patienten senden, z. B. mit dem Link zu einer Nummer. Sie können auch einfach auf "Link kopieren" in der Tabelle der Termine klicken. An dieser Stelle können Sie darüber nachdenken, das Erlebnis zu verbessern, indem Sie einen anderen Kanal integrieren, wie WhatsApp oder sogar einen Text-to-Speech-Bot, der Sie anruft, um Sie über den Termin zu informieren.

Jeder Termin hat zwei Links: einen Gastgeber-Link und einen Gast-Link. Im Anwendungsfall Gesundheitswesen wird die Gastgeber-URL an den Arzt und die Gast-URL an den Patienten gesendet.

Nach erfolgreicher Planung eines Termins können beide Seiten des Anrufs den Link verwenden, um an dem Termin teilzunehmen. Sie können das Video stummschalten, die Veröffentlichung aufheben und Ihren Bildschirm freigeben.

Rekapitulation

In den vorangegangenen Abschnitten haben wir gelernt, wie man eine einfache Videokonsultationsanwendung erstellt, und wir haben auch erörtert, wie sie im Gesundheitswesen angewendet werden kann.

Obwohl das Gesundheitswesen ein klassischer Anwendungsfall ist, ist es sicherlich nicht der einzige. Als wir mit der Arbeit an diesem Projekt begannen, hatten wir viele Anwendungsfälle im Sinn: E-Learning, Finanzen, Vorstellungsgespräche und mehr. Unser Ziel war es, den größten gemeinsamen Teiler dieser Anwendungsfälle zu finden, aber wir wissen, dass es noch mehr Arbeit zu tun gibt.

Mit der zunehmenden Multikanalisierung der Kommunikation steigt auch die Komplexität unserer Lösungen. Das Video war der Kern dieses Artikels, aber es ist noch leistungsfähiger, wenn es mit anderen Kanälen wie Social Messaging, SMS, CRM und mehr kombiniert wird.

Wenn Sie mehr darüber erfahren möchten, was Sie mit unseren APIs tun können, besuchen Sie bitte Vonage-APIs.