Apresentando os projetos de demonstração do V-App do Vonage Client SDK

Os SDKs do Vonage para clientes para Android, iOS e Web, em conjunto com a Conversation API , ajudam você a incorporar recursos de voz e mensagens em seus aplicativos. Para demonstrar a funcionalidade multiplataforma dos SDKs e da Conversation API, criamos o V-App! O V-App é um aplicativo completo nas três plataformas, mas não paramos por aí! Para dar suporte às Applications, também criamos um backend usando Node.JS. Este blog apresentará uma breve visão geral de como os diferentes componentes são desenvolvidos; se você quiser pular essa parte, pode conferir o código no GitHub.

O back-end do V-App

Conforme mencionado anteriormente, o cliente de back-end é desenvolvido usando Node.JS e, uma vez em execução, ele processa eventos de webhook RTC da Vonage, gerados quando usuários são adicionados a conversas, mensagens são enviadas e outras situações. O cliente de back-end utiliza um banco de dados Postgres para armazenar os eventos do webhook, evitando assim a necessidade de consultar a Conversation API com muita frequência. O V-App também oferece suporte a chamadas, portanto, o cliente de back-end possui uma rota de resposta de voz que retorna um 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);
});

Graças à integração com um banco de dados, o cliente de back-end também oferece suporte a contas de usuário! Depois que o usuário se cadastra, e nos logins subsequentes, o back-end retornará um JWT na resposta, que poderá ser usado para autenticação nos SDKs do cliente:

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

O repositório do GitHub inclui um .env-sample arquivo para garantir que você tenha os segredos corretos, além de suporte para implantação com o Docker. Mas continue lendo para saber como você pode implantar o backend sem complicações.

Os clientes do V-App

O aplicativo V-App está disponível como aplicativos nativos para Android, iOS e na Web, cada um utilizando o respectivo Vonage Client SDK da plataforma. O aplicativo para Android foi desenvolvido em Kotlin, o aplicativo para iOS foi desenvolvido em Swift e UIKit, e o aplicativo para a Web foi desenvolvido em JavaScript e o Vonage Client SDK Web Components.

Conforme mencionado anteriormente, as Applications oferecem suporte a contas de usuário:

Depois de fazer login, você pode iniciar uma conversa entre dois ou mais usuários cadastrados:

As conversas também permitem o envio de imagens:

Se as conversas por texto não forem suficientes, o V-App também oferece suporte a chamadas:

As instruções de configuração para os clientes estão disponíveis em GitHub. Para facilitar a experimentação do V-App, criamos mais uma coisa!

O plug-in CLI da Vonage para o Scaffold

Para baixar, configurar e executar facilmente todos os três clientes e o backend, você pode instalar o scaffold plug-in para o Vonage CLI:

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

Após a instalação, você pode inicializar o V-App usando o comando a seguir, especificando quais clientes deseja baixar:

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

Você pode executar o comando “help” para ver as diferentes opções disponíveis:

vonage scaffold:vapp --help

Como o CLI da Vonage já está autenticado na Vonage, o plug-in pode criar um novo aplicativo da Vonage e configurar os webhooks para que fiquem prontos para serem usados pelo V-App. Os clientes também são baixados e suas dependências instaladas:

O plug-in também implanta o cliente de back-end localmente usando o Docker e configura os clientes com a URL da implantação:

Experimente o V-App e depois participe da conversa no nosso no Slack da Comunidade Vonage ou envie-nos uma mensagem no Twitter.