The Vonage Client SDKs for Android, iOS, and Web in conjunction with the Conversation API helps you build voice and messaging capabilities into your applications. To showcase the multi-platform functionality of the SDKs and the Conversation API we have built the V-App! The V-App is an end-to-end application on all 3 platforms, but we didn't stop there! To support the applications, we also built a backend using Node.JS. This blog will have a brief overview of how the different components are built, if you want to jump ahead you can check out the code on GitHub.

The V-App Backend

As mentioned earlier the backend client is built using Node.JS, and once running it handles RTC webhook events from Vonage which are generated when users are added to conversations, messages are sent, and more. The backend client uses a Postgres database to store events from the webhook to avoid having to query the Conversation API too frequently. The V-App also supports calling, so the backend client also has a voice answer route that returns an NCCO:

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);
});

Thanks to having a database attached, the backend client also supports user accounts! Once a user has signed up, and on subsequent logins, the backend will return a JWT in the response that can be used to authenticate with the Client SDKs:

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

The GitHub repository includes a .env-sample file to ensure you have the correct secrets, as well as support for deploying with docker. But, read on to learn about how you can deploy the backend seamlessly.

The V-App Clients

The V-App application is available as native applications on Android, iOS, and Web each using the platform's respective Vonage Client SDK. The Android app is built using Kotlin, the iOS app is built in Swift and UIKit, and the Web app is built using Javascript and the Vonage Client SDK Web Components.

As mentioned earlier the applications support user accounts:

Login screen for the web client

Once logged in, you can start a conversation between two or more registered users:

Web and iOS client messaging

Chats also support sending images:

Android client sending an image

If text chats aren't enough, V-App supports calling too:

Web and iOS client calling

The set-up instructions for the clients are available on GitHub. To make it easier to try the V-App out, we built one more thing!

The Vonage CLI Scaffold Plugin

To seamlessly download, setup and run all 3 clients and the backend, you can install the scaffold plugin for the Vonage CLI:

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

Once installed you can bootstrap the V-App using the following command, specifying which clients you want to download:

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

You can run the help command to see the different options available to you:

vonage scaffold:vapp --help

Since the Vonage CLI is already authenticated with Vonage, the plugin can create a new Vonage application and configure the webhooks ready to be used by the V-App. The clients are also downloaded and their dependencies installed:

CLI plugin downloading the clients

The plugin also deploys the backend client locally using docker, and configures the clients with the deployment's URL:

CLI plugin deploying with docker

Give the V-App a go, then come join the conversation on our Vonage Community Slack or send us a message on Twitter.