Crie uma plataforma de conversação por Video para encontros online com o Nuxt.js

Numa época em que muitos eventos estão sendo realizados online, um desafio que ainda enfrentamos como organizadores comunitários é como facilitar as conversas entre os participantes durante os intervalos e após o término das palestras.

Hoje, a equipe da Comunidade de Desenvolvedores da Vonage publicou um post sobre como estamos apoiando a realização de eventos online. Parte disso é o Social Cafe — um aplicativo no qual os eventos têm seus próprios lobbies com várias mesas de conversa. Cada mesa é uma videochamada viabilizada pela Video API da Vonage (anteriormente TokBox OpenTok).

Como posso usar o Social Cafe agora?

Existem duas maneiras de usar esta versão de demonstração do Social Cafe neste momento:

1. Adicione seu próprio evento à nossa demonstração hospedada, sem nenhum custo. As diretrizes podem ser encontradas em nossas orientações para contribuições.

2. Experimente nossa demonstração e implante-a no Netlify em cinco minutos a partir do nosso repositório do GitHub deste projeto.

Neste tutorial, vamos explicar como o aplicativo foi desenvolvido para que você possa criar o seu próprio do zero.

Pré-requisitos

• A Video API da Vonage Vonage Video API

• Node.js instalado no seu computador

Criar uma nova aplicação Nuxt.js

Execute npx create-nuxt-app social-cafe no seu terminal. Você verá uma série de perguntas — escolha as opções padrão para todas, exceto as seguintes:

• Escolha a linguagem de programação - JavaScript

• Escolha o gerenciador de pacotes — npm

• Escolha o modo de renderização - Aplicativo de página única

Depois de responder a todas as perguntas, um novo projeto será criado no social-cafe diretório. Acesse o diretório no seu editor de código e no terminal.

Verificação! Certifique-se de que seu aplicativo esteja configurado corretamente executando npm run dev e abrindo http://localhost:3000

Crie seu primeiro evento

O fluxo deste aplicativo é o seguinte:

1. Os usuários começam na página inicial. Eles informam um código de evento.

2. Se for válido, os usuários são direcionados para uma página inicial do evento. Ela contém informações sobre o evento e uma lista de tabelas relacionadas.

3. Uma mesa corresponde a uma videochamada específica. Os usuários podem voltar ao lobby do evento.

Existem várias maneiras de armazenar dados de eventos, muitas delas envolvendo bancos de dados externos, mas, para este aplicativo, você os armazenará em um arquivo. O arquivo pode ser editado para adicionar ou alterar informações sobre os eventos.

Crie store/index.js e adicione o seguinte código no novo arquivo:

export const state = () => ({
  events: [
    {
      slug: 'example-event',
      name: 'Event Name',
      coc: 'https://hackcodeofconduct.org',
      rooms: [
        { slug: 'built', name: 'What did you build this week?' },
        { slug: 'work', name: 'Where do you work?' },
        { slug: 'hobby', name: 'What are your hobbies?' }
      ]
    }
  ]
})

Este arquivo representa o armazenamento de dados de todo o seu aplicativo, e seu conteúdo pode ser acessado em qualquer página usando this.$store.state. Cada evento deve ser um objeto próprio na events matriz. O slug será usado tanto como código do evento quanto como texto na URL; portanto, certifique-se de que seja válido para uma URL e fácil de digitar.

Reinicie o servidor Nuxt e atualize a página no navegador.

Crie a página de destino

Abrir pages/index.vue, exclua o conteúdo e substitua-o por um modelo básico:

<template>
  <div>
    <h1>Landing Page</h1>
  </div>
</template>

Você deve ter notado que a página do seu navegador foi atualizada automaticamente quando você salvou o arquivo. Isso é chamado de recarregamento dinâmico e é um recurso que o Nuxt.js oferece sem precisar de nenhuma configuração.

Vamos adicionar um campo de entrada de texto ao nosso modelo usando vinculação de dados:

<template>
  <div>
    <h1>Landing Page</h1>
    <label for="event">Event Code</label>
    <input id="event" type="text" v-model="eventName">
  </div>
</template>

<script>
export default {
  data() {
    return {
      eventName: ''
    }
  }
}
</script>

Quando os usuários pressionarem Enter, é preciso verificar se o código é um slug de evento válido antes de navegar para o lobby do evento. Isso evitará que os usuários acabem em um evento que não existe e fiquem sem ninguém com quem conversar.

<template>
  <div>
    <h1>Landing Page</h1>
    <label for="event">Event Code</label>
    <input id="event" type="text" v-model="eventName" @keyup.enter="goToEvent">
  </div>
</template>

<script>
export default {
  data() {
    return {
      eventName: ''
    }
  },
  methods: {
    goToEvent() {
      if (this.$store.state.events.find(e => e.slug.toLowerCase() === this.eventName.trim().toLowerCase())) {
        this.$router.push(`/${this.eventName}`)
      } else {
        alert('No event with that code')
      }
    }
  }
}
</script>

Nesse método, você verifica se o eventName existe como um slug de evento na loja de aplicativos que você configurou anteriormente. Converter ambas as sequências de caracteres para minúsculas significa que essa é uma verificação que não diferencia maiúsculas de minúsculas e, se for bem-sucedida, redirecionará o usuário para /event-name.

Observe que você também deve chamar esse método. Neste projeto, estamos chamando-o quando a tecla Enter é pressionada e o campo de entrada está com o foco. Você também pode optar por associá-lo a um botão.

Antes de verificar se isso funcionou, você precisa configurar a página para a qual as pessoas serão direcionadas. Crie um arquivo em pages/_event/index.vue e crie um modelo básico:

<template>
  <div>
    <h1>Event {{$route.params.event}}</h1>
  </div>
</template>

O sublinhado no nome do diretório indica que se trata de um valor dinâmico. Você pode acessá-lo usando this.$route.params.event.

Ponto de verificação! Reinicie seu aplicativo, acesse http://localhost:3000, digite example-evente pressione Enter. Tente também outro código de evento inválido; você deverá ver uma mensagem de erro.

Criar o lobby do evento

É possível que os usuários sejam direcionados diretamente para a URL do lobby de um evento; portanto, você deve validar o slug do evento novamente quando a página for carregada. Adicione este script a pages/_event/index.vue:

<script>
export default {
  validate ({ params, store }) {
    return store.state.events.find(e => e.slug === params.event)
  }
}
</script>

Com base na URL, você tem apenas um slug do evento. Usando uma lógica semelhante à do método da página de destino goToEvent() , crie uma propriedade calculada que retorne o objeto do evento completo.

<template>
  <div>
    <h1>Event {{$route.params.event}}</h1>
    <h2>{{ event.name }}</h2>
    <a :href="event.coc">Code of Conduct</a>
    <ul>
      <li v-for="room in event.rooms" :key="room.slug">
        <p>{{ room.name }}</p>
        <n-link :to="`/${$route.params.event}/${room.slug}`">Go to room</n-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  validate ({ params, store }) {
    return store.state.events.find(e => e.slug === params.event)
  },
  computed: {
    event () {
      return this.$store.state.events.find(e => e.slug === this.$route.params.event)
    }
  }
}
</script>

O nome do seu evento e o link para o código de conduta já devem estar visíveis, o que significa que você está obtendo com sucesso os dados individuais do evento na loja de aplicativos. Ao percorrer o event.rooms matriz gera um novo item na lista para cada sala e um link para /event-name/room-name.

Antes de realizar o teste, você deve criar mais uma vez uma página mínima. Crie um arquivo em pages/_event/_room/index.vue com o seguinte conteúdo:

<template>
  <div>
    <h1>Event {{$route.params.event}}, Room {{$route.params.room}}</h1>
  </div>
</template>

Verificação! Na página do seu evento, clique no link de uma mesa. Você deve ser redirecionado para uma nova página e conseguir ver o slug da sala.

Criar uma sala por meio de uma videochamada

Você deve validar o slug atual criando o validate() :

<script>
export default {
  validate ({ params, store }) {
    const event = store.state.events.find(e => e.slug === params.event)
    return event.rooms.find(r => r.slug === params.room)
  }
}
</script>

Se ainda não o fez, inscreva-se para obter uma conta da Video API da Vonage e crie um novo Account de incorporação. A URL do site deve ser http://localhost:3000. Anote seu embedId.

Adicione a seguinte linha de código abaixo do <h1> elemento, lembrando-se de substituir seu embedId:

<iframe :src="`https://tokbox.com/embed/embed/ot-embed.js?embedId=YOUR_EMBED_ID&iframe=true&room=${$route.params.event}-${$route.params.room}`" allow="microphone;camera" />

Com a inclusão desta funcionalidade iframe , temos um chat de vídeo básico totalmente implementado. É possível criar várias salas usando um embedId usando o room parâmetro de URL. Este aplicativo usa os parâmetros de rota para criar dinamicamente uma sala com base na URL.

Há algumas pequenas questões administrativas que precisam ser resolvidas antes de encerrar.

Adicionar um link para a página inicial do evento e para o Código de Conduta

Assim como no lobby do evento, você precisará adicionar uma event propriedade calculada abaixo do validate() método:

computed: {
  event () {
    return this.$store.state.events.find(e => e.slug === this.$route.params.event)
  }
}

No modelo, agora você pode acessar as informações do evento:

<n-link :to="'/' + $route.params.event">Back to {{event.name}} lobby</n-link>
<n-link :to="event.coc">Code of Conduct</n-link>

Adicionar o prompt da sala

Crie uma room propriedade calculada:

room () {
  return this.event.rooms.find(r => r.slug === this.$route.params.room)
}

No modelo, agora você pode acessar todas as informações contidas no room objeto:

<p>Room prompt: {{room.name}}</p>

E agora?

Esse é um começo fantástico, e há muitas possibilidades para o desenvolvimento desse aplicativo. Você pode optar por:

• Dê um toque de estilo

• Criar uma página 404

• Implemente isso online (lembre-se de alterar a URL do site nas configurações de incorporação do projeto no Portal do Account da Video API)

• Use a Video API da Vonage para implementar este projeto e adicionar recursos como exibição de nomes, compartilhamento de tela e bate-papo.

Confira nossa postagem sobre como criar um chat de vídeo básico, como este, com a Video API da Vonage.

O código completo do projeto pode ser encontrado em https://github.com/nexmo-community/social-cafe.

Como sempre, se precisar de ajuda, sinta-se à vontade para entrar em contato na Slack da Comunidade Vonage e esperamos que você ache utilidade neste projeto para as comunidades.