https://d226lax1qjow5r.cloudfront.net/blog/blogposts/introducing-the-vonage-client-sdk-v-app-demo-projects/v-app-demo.png

Einführung in das Vonage Client SDK V-App-Demoprojekte

Zuletzt aktualisiert am August 25, 2022

Lesedauer: 2 Minuten

Die Vonage Client-SDKs für Android, iOS und Web in Verbindung mit der Conversation API hilft Ihnen, Voice- und Messaging-Funktionen in Ihre Applikationen zu integrieren. Um die plattformübergreifende Funktionalität der SDKs und der Conversation API zu präsentieren, haben wir die V-App entwickelt! Die V-App ist eine End-to-End-Anwendung auf allen 3 Plattformen, aber das war noch nicht alles! Um die Applications zu unterstützen, haben wir auch ein Backend mit Node.JS gebaut. Dieser Blog wird einen kurzen Überblick darüber geben, wie die verschiedenen Komponenten aufgebaut sind, wenn Sie weiterspringen wollen, können Sie sich den den Code auf GitHub.

Das V-App Backend

Wie bereits erwähnt, wird der Backend-Client mit Node.JS erstellt. Sobald er läuft, verarbeitet er RTC-Webhook-Ereignisse von Vonage, die generiert werden, wenn Benutzer zu Unterhaltungen hinzugefügt werden, Nachrichten gesendet werden und mehr. Der Backend-Client verwendet eine Postgres-Datenbank, um die Webhook-Ereignisse zu speichern, damit die Conversation API nicht zu häufig abgefragt werden muss. Die V-App unterstützt auch Anrufe, daher verfügt der Backend-Client auch über eine Voice-Antwort-Route, die einen NCCO zurückgibt:

webhookRoutes.get('/voice/answer', async (req, res) => {
  var ncco = [{"action": "talk", "text": "No destination user - hanging up"}];
  var username = req.query.to;
  if (username) {
    ncco = [
      {
        "action": "talk",
        "text": "Connecting you to " + username
      },
      {
        "action": "connect",
        "endpoint": [
          {
            "type": "app",
            "user": username
          }
        ]
      }
    ]
  }
  res.json(ncco);
});

Dank der angeschlossenen Datenbank unterstützt der Backend-Client auch Benutzerkonten! Nach der Anmeldung eines Benutzers und bei späteren Anmeldungen gibt das Backend in der Antwort ein JWT zurück, das zur Authentifizierung mit den Client-SDKs verwendet werden kann:

{
  "user": {
    "id": "USR-44326d04-cd82-41f5-ad24-315c2a2eac41",
    "name": "Alice",
    "display_name": "alice"
  },
  "token": "ey...dg",
  "users": [{ ... },
  "conversations": [{ ... }]
}

Das GitHub-Repository enthält eine .env-sample Datei, um sicherzustellen, dass Sie die richtigen Geheimnisse haben, sowie Unterstützung für die Bereitstellung mit Docker. Aber lesen Sie weiter, um zu erfahren, wie Sie das Backend nahtlos bereitstellen können.

Die V-App-Kunden

Die V-App-Applikation ist als native Applikation für Android, iOS und Web verfügbar, die jeweils das Vonage Client SDK der jeweiligen Plattform verwenden. Die Android-App wird mit Kotlin erstellt, die iOS-App mit Swift und UIKit und die Web-App mit Javascript und den Vonage Client SDK Web-Komponenten.

Wie bereits erwähnt, unterstützen die Applications Benutzerkonten:

Login screen for the web client

Sobald Sie eingeloggt sind, können Sie eine Unterhaltung zwischen zwei oder mehreren registrierten Benutzern beginnen:

Web and iOS client messaging

Chats unterstützen auch das Senden von Bildern:

Android client sending an image

Wenn Textchats nicht genug sind, unterstützt V-App auch Anrufe:

Web and iOS client calling

Die Einrichtungsanweisungen für die Clients sind verfügbar auf GitHub. Um es einfacher zu machen, die V-App auszuprobieren, haben wir noch eine Sache gebaut!

Das Vonage CLI Scaffold Plugin

Um alle 3 Clients und das Backend nahtlos herunterzuladen, einzurichten und auszuführen, können Sie das scaffold Plugin für die Vonage CLI installieren:

vonage plugins:install @vonage/cli-plugin-scaffold

Nach der Installation können Sie die V-App mit dem folgenden Befehl booten, wobei Sie angeben, welche Clients Sie herunterladen möchten:

vonage scaffold:vapp --platforms=web,ios,android --backend=docker

Sie können den Befehl help ausführen, um die verschiedenen Optionen zu sehen, die Ihnen zur Verfügung stehen:

vonage scaffold:vapp --help

Da die Vonage CLI bereits bei Vonage authentifiziert ist, kann das Plugin eine neue Vonage-Anwendung erstellen und die Webhooks so konfigurieren, dass sie von der V-App verwendet werden können. Die Clients werden ebenfalls heruntergeladen und ihre Abhängigkeiten installiert:

CLI plugin downloading the clients

Das Plugin stellt auch den Backend-Client lokal mit Docker bereit und konfiguriert die Clients mit der URL der Bereitstellung:

CLI plugin deploying with docker

Probieren Sie die V-App aus und beteiligen Sie sich dann an der Diskussion in unserer Vonage Community Slack oder senden Sie uns eine Nachricht auf Twitter ..

Teilen Sie:

https://a.storyblok.com/f/270183/400x400/19c02db2d3/abdul-ajetunmobi.png
Abdul AjetunmobiVonage Ehemaliges Teammitglied

Abdul ist ein Developer Advocate für Vonage. Er hat einen Hintergrund als iOS-Ingenieur im Bereich Verbraucherprodukte. In seiner Freizeit fährt er gerne Rad, hört Musik und berät diejenigen, die gerade ihre Reise in die Technologiebranche beginnen.