Construye una plataforma de Video Conversación para Reuniones Online con Nuxt.js

En una época en la que muchos eventos se celebran en línea, uno de los retos a los que todavía nos enfrentamos como organizadores de comunidades es cómo facilitar las conversaciones entre los asistentes durante los descansos y una vez finalizadas las charlas.

Hoy, el equipo de la comunidad de desarrolladores de Vonage publicó sobre cómo estamos apoyando los eventos para que se realicen en línea. Una parte de esto es el Social Cafe, una aplicación en la que los eventos tienen sus propios vestíbulos con múltiples mesas de conversación. Cada mesa es una videollamada impulsada por la Video API de Vonage (anteriormente TokBox OpenTok).

¿Cómo puedo utilizar ahora el Social Café?

Ahora mismo hay dos formas de utilizar esta demo de Social Cafe:

1. Añada gratuitamente su propio evento a nuestra demostración alojada. Encontrará las directrices en nuestras directrices de contribución.

2. Coge nuestra demo y despliégala en Netlify en cinco minutos desde nuestro repositorio GitHub para este proyecto.

En este tutorial, veremos cómo se construyó la aplicación para que puedas crear la tuya desde cero.

Requisitos previos

• A API de Video de Vonage Account

• Node.js instalado en su máquina

Crear una nueva aplicación Nuxt.js

Ejecute npx create-nuxt-app social-cafe en tu terminal. Se le presentarán una serie de preguntas: elija los valores predeterminados para todas, excepto para la siguiente:

• Elegir lenguaje de programación - JavaScript

• Elija el gestor de paquetes - npm

• Elija el modo de renderizado - Single Page App

Una vez que haya respondido a todas las preguntas, se creará un nuevo proyecto en el directorio social-cafe directorio. Navega al directorio en tu editor de código y terminal.

Punto de control Asegúrese de que su aplicación está configurada correctamente ejecutando npm run dev y abriendo http://localhost:3000

Cree su primer evento

El flujo de esta aplicación es:

1. Los usuarios empiezan en la página de aterrizaje. Proporcionan un código de evento.

2. Si es válido, los usuarios son redirigidos a un vestíbulo de eventos. Contiene información sobre el evento y una lista de tablas relacionadas.

3. Una mesa es una videollamada única. Los usuarios pueden volver al vestíbulo de un evento.

Existen múltiples formas de almacenar datos de eventos, muchas de ellas incluyen bases de datos externas, pero para esta aplicación, los almacenará en un archivo. El archivo puede editarse para añadir o editar información sobre eventos.

Cree store/index.js y añade el siguiente código en el nuevo archivo:

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 archivo representa el almacén de toda la aplicación, y se puede acceder al contenido en cualquier página utilizando this.$store.state. Cada evento debe ser su propio objeto en el events array. La dirección slug se utilizarán como código del evento y como texto en la URL, así que asegúrate de que son válidos para una URL y fáciles de escribir.

Reinicie su servidor Nuxt y vuelva a cargar su navegador.

Construir la página de destino

Abra pages/index.vueborre el contenido y sustitúyalo por una plantilla mínima:

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

Deberías notar que la página de tu navegador se ha actualizado automáticamente al guardar el archivo. Esto se llama recarga en caliente y es una característica que Nuxt.js proporciona sin necesidad de configuración.

Vamos a añadir una entrada de texto a nuestra plantilla con data-binding:

<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>

Cuando los usuarios pulsen enter, deberás validar que el código es un slug de evento válido antes de navegar al vestíbulo del evento. Así evitarás que los usuarios acaben en un evento que no existe y no tengan con quién chatear.

<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>

En este método, estás comprobando si el eventName existe como un slug de evento en el almacén de aplicaciones que configuró anteriormente. Poner ambas cadenas en minúsculas significa que se trata de una comprobación que no distingue entre mayúsculas y minúsculas y que, si tiene éxito, enviará al usuario a la página /event-name.

Tenga en cuenta que también debe llamar a este método. En este proyecto, lo llamamos cuando se pulsa enter y la entrada tiene foco. También puede optar por vincular esto a un botón.

Antes de que puedas probar que esto ha funcionado, debes configurar la página a la que dirigirás a la gente. Cree un archivo en pages/_event/index.vue y crea una plantilla mínima:

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

El guión bajo en el nombre del directorio significa que se trata de un valor dinámico. Puede acceder a él mediante this.$route.params.event.

¡Punto de control! Reinicie su aplicación, vaya a http://localhost:3000escriba example-eventy pulsa intro. Prueba también con otro código de evento no válido y deberías ver un error.

Crear el vestíbulo del evento

Existe la posibilidad de que los usuarios sean redirigidos directamente a la URL de un lobby de eventos, por lo que debes validar el slug del evento de nuevo cuando se cargue la página. Añada este script a pages/_event/index.vue:

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

Basándose en la URL, sólo tiene un slug de evento. Utilizando una lógica similar a la del método goToEvent() de la página de destino, cree una propiedad computada que devuelva el objeto de 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>

El nombre de su evento y el enlace al código de conducta deberían ser visibles ahora, lo que significa que está obteniendo con éxito los datos individuales del evento del almacén de aplicaciones. Al recorrer la matriz event.rooms produce un nuevo elemento de lista para cada sala y un enlace a /event-name/room-name.

Antes de realizar las pruebas, debería crear de nuevo una página mínima. Cree un archivo en pages/_event/_room/index.vue con lo siguiente:

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

Punto de control Desde la página de tu evento haz clic en el enlace de una mesa. Deberías ir a una nueva página y ser capaz de ver el slug de la sala.

Crear una sala con una Video Llamada

Debe validar la babosa actual mediante la construcción de la validate() método:

<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>

Si aún no lo has hecho, inscríbete en una API de Video de Vonage y crea un nuevo proyecto de incrustación. La URL del sitio web debe ser http://localhost:3000. Toma nota de tu embedId.

Añada la siguiente línea de código debajo del elemento <h1> recordando sustituir el elemento 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" />

Con la inclusión de este iframe tenemos un Video Chat básico totalmente implementado. Se pueden crear múltiples salas con una embedId utilizando el parámetro room parámetro URL. Esta aplicación utiliza los parámetros de ruta para crear dinámicamente una sala basada en la URL.

Hay algunas pequeñas tareas domésticas de las que ocuparse antes de terminar.

Añadir un enlace al vestíbulo del evento y al código de conducta

Al igual que el vestíbulo de eventos, tendrá que añadir una propiedad event debajo del método validate() método:

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

En la plantilla ya puede acceder a la información del evento:

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

Añada la pregunta de la sala

Crear una room propiedad calculada:

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

En la plantilla ahora puede acceder a toda la información del room objeto:

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

¿Y ahora qué?

Este es un comienzo fantástico, y hay muchas direcciones para tomar esta aplicación. Puede optar por:

• Añade un poco de estilo

• Crear una página 404

• Impleméntelo en línea (recuerde cambiar la URL del sitio web en la configuración del proyecto de incrustación en el portal de la cuenta de la Video API)

• Utiliza la Video API de Vonage para implementar este proyecto y agregar funciones como mostrar nombres, pantalla compartida y chat.

Consulta nuestra publicación sobre cómo crear un videochat básico, como éste, con la Video API de Vonage.

El código completo del proyecto puede consultarse en https://github.com/nexmo-community/social-cafe.

Como siempre, si necesitas ayuda, no dudes en ponerte en contacto con nosotros en la Slack de la comunidad de Vonage y esperamos que encuentres utilidad en este proyecto para las comunidades.