Construire une plateforme de conversation Video pour les rassemblements en ligne avec Nuxt.js

À une époque où de nombreux événements se déroulent en ligne, l'un des défis auxquels nous sommes toujours confrontés en tant qu'organisateurs communautaires est de savoir comment faciliter les conversations entre les participants pendant les pauses et après la fin des exposés.

Aujourd'hui, l'équipe de la communauté des développeurs de Vonage a publié un article sur la façon dont nous soutenons les événements pour qu'ils soient en ligne. L'un des éléments de cette initiative est le Café social, une application dans laquelle les événements ont leur propre hall d'entrée avec plusieurs tables de conversation. Chaque table est un appel vidéo alimenté par l'API Video de Vonage (anciennement TokBox OpenTok).

Comment puis-je utiliser le café social maintenant ?

Il y a deux façons d'utiliser cette démo Social Cafe dès maintenant :

1. Ajoutez gratuitement votre propre événement à notre démo hébergée. Les lignes directrices peuvent être consultées dans nos directives de contribution.

2. Prenez notre démo et déployez-la sur Netlify en cinq minutes à partir de notre dépôt dépôt GitHub pour ce projet.

Dans ce tutoriel, nous verrons comment l'application a été construite afin que vous puissiez créer la vôtre à partir de zéro.

Conditions préalables

• A Video API de Vonage Account

• Node.js installé sur votre machine

Créer une nouvelle application Nuxt.js

Exécutez npx create-nuxt-app social-cafe dans votre terminal. Une série de questions vous sera présentée - choisissez les valeurs par défaut pour toutes les questions, à l'exception de la suivante :

• Choisir le langage de programmation - JavaScript

• Choisissez le gestionnaire de paquets - npm

• Choisir le mode de rendu - Single Page App

Une fois que vous aurez répondu à toutes les questions, un nouveau projet sera créé dans le répertoire social-cafe dans le répertoire Naviguez jusqu'au répertoire dans votre éditeur de code et votre terminal.

Point de contrôle ! Assurez-vous que votre application est correctement configurée en lançant npm run dev et en ouvrant http://localhost:3000

Créez votre premier événement

Le flux de cette application est le suivant :

1. Les utilisateurs commencent sur la page d'accueil. Ils fournissent un code d'événement.

2. S'il est valide, les utilisateurs sont dirigés vers un lobby d'événements. Il contient des informations sur l'événement et une liste de tableaux connexes.

3. Une table est un appel vidéo unique. Les utilisateurs peuvent retourner dans le hall d'un événement.

Il existe de nombreuses façons de stocker les données relatives aux événements, notamment dans des bases de données externes, mais pour cette application, vous les stockerez dans un fichier. Le fichier peut être édité pour ajouter ou modifier des informations sur les événements.

Créer store/index.js et ajoutez le code suivant dans le nouveau fichier :

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?' }
      ]
    }
  ]
})

Ce fichier représente le magasin de votre application, et son contenu est accessible sur n'importe quelle page à l'aide de la commande this.$store.state. Chaque événement doit être son propre objet dans le tableau events dans le tableau Les slug seront utilisés à la fois comme code de l'événement et comme texte dans l'URL, assurez-vous donc qu'ils sont valides pour une URL et faciles à taper.

Redémarrez votre serveur Nuxt et rechargez votre navigateur.

Construire la page d'atterrissage

Ouvrir pages/index.vuesupprimer le contenu et le remplacer par un modèle minimal :

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

Vous devriez remarquer que la page de votre navigateur a été mise à jour automatiquement lorsque vous avez enregistré le fichier. C'est ce qu'on appelle le chargement à chaud et c'est une fonctionnalité que Nuxt.js fournit sans aucune configuration.

Ajoutons une entrée de texte à notre modèle à l'aide d'une liaison de données :

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

Lorsque les utilisateurs appuient sur la touche "Entrée", vous devez vous assurer que le code est un nom d'événement valide avant de naviguer vers le hall d'entrée de l'événement. Cela évitera aux utilisateurs de se retrouver dans un événement qui n'existe pas et de n'avoir personne avec qui discuter.

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

Dans cette méthode, vous vérifiez si l'élément eventName existe en tant qu'étiquette d'événement dans le magasin d'applications que vous avez créé plus tôt. Le fait de mettre les deux chaînes en minuscules signifie qu'il s'agit d'une vérification insensible à la casse qui, en cas de succès, enverra l'utilisateur à la page /event-name.

Notez que vous devez également appeler cette méthode. Dans ce projet, nous l'appelons lorsque vous appuyez sur la touche Entrée et que l'entrée a le focus. Vous pouvez également choisir de lier cette méthode à un bouton.

Avant de pouvoir tester cette méthode, vous devez configurer la page vers laquelle vous dirigerez les internautes. Créez un fichier dans pages/_event/index.vue et créez un modèle minimal :

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

Le trait de soulignement dans le nom du répertoire signifie qu'il s'agit d'une valeur dynamique. Vous pouvez y accéder en utilisant this.$route.params.event.

Point de contrôle ! Redémarrez votre application, allez sur http://localhost:3000tapez example-eventet appuyez sur la touche Entrée. Essayez également un autre code d'événement, non valide, et vous devriez voir une erreur.

Créer le hall d'entrée de l'événement

Il est possible que les utilisateurs soient dirigés directement vers l'URL du lobby de l'événement, vous devez donc valider à nouveau le slogan de l'événement lors du chargement de la page. Ajoutez ce script à pages/_event/index.vue:

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

D'après l'URL, vous n'avez qu'un nom d'événement. En utilisant une logique similaire à celle de la méthode goToEvent() de la page d'atterrissage, créez une propriété calculée qui renvoie l'objet complet de l'événement.

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

Le nom de votre événement et le lien vers le code de conduite devraient maintenant être visibles, ce qui signifie que vous avez réussi à récupérer les données individuelles de l'événement dans la boutique d'applications. En parcourant le tableau event.rooms produit un nouvel élément de liste pour chaque salle et un lien vers /event-name/room-name.

Avant de procéder aux tests, vous devez à nouveau créer une page minimale. Créez un fichier à l'adresse pages/_event/_room/index.vue avec ce qui suit :

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

Point de contrôle ! Depuis la page de votre événement, cliquez sur le lien d'une table. Vous devriez accéder à une nouvelle page et être en mesure de voir le nom de la salle.

Créer une salle avec un appel Video

Vous devez valider le mot-clé actuel en construisant la méthode validate() méthode :

<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 vous ne l'avez pas encore fait, inscrivez-vous à l'API vidéo de Video API de Vonage de Vonage et créez un nouveau projet Embed. L'URL du site Web doit être http://localhost:3000. Prenez note de votre embedId.

Ajoutez la ligne de code suivante sous l'élément <h1> en n'oubliant pas de remplacer votre 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" />

Avec l'inclusion de cet élément, nous disposons d'un chat vidéo de base entièrement mis en œuvre. iframe nous disposons d'un chat vidéo de base entièrement mis en œuvre. Plusieurs salles peuvent être créées avec une seule embedId en utilisant le paramètre room paramètre URL. Cette application utilise les paramètres de l'itinéraire pour créer dynamiquement une salle en fonction de l'URL.

Il y a quelques petites tâches ménagères à effectuer avant de conclure.

Ajouter un lien vers le lobby de l'événement et le code de conduite

Comme pour le lobby des événements, vous devrez ajouter une propriété event sous la méthode validate() sous la méthode

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

Dans le modèle, vous pouvez maintenant accéder aux informations relatives à l'événement :

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

Ajouter l'invite de la salle

Créer une propriété room propriété calculée :

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

Dans le modèle, vous pouvez désormais accéder à toutes les informations contenues dans l'objet room objet :

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

Quelle est la prochaine étape ?

Il s'agit d'un début fantastique, et il y a de nombreuses directions à prendre pour cette application. Vous pouvez choisir de

• Ajouter du style

• Créer une page 404

• Déployez-le en ligne (n'oubliez pas de modifier l'URL du site Web dans les paramètres du projet Embed sur le portail Video API Account).

• Utilisez l'API Video de Vonage pour mettre en œuvre ce projet et ajouter des fonctions telles que l'affichage des noms, le partage d'écran et le chat.

Consultez notre article sur la création d'un chat vidéo de base, comme celui-ci, avec l'API Video de Vonage.

Le code complet du projet est disponible à l'adresse suivante https://github.com/nexmo-community/social-cafe.

Comme toujours, si vous avez besoin d'aide, n'hésitez pas à nous contacter dans le Slack de la communauté de Vonage. Vonage Community Slack et nous espérons que vous trouverez une utilité à ce projet pour les communautés.