Mit Nuxt.js eine Video-Konversationsplattform für Online-Versammlungen aufbauen

In einer Zeit, in der viele Veranstaltungen online stattfinden, besteht eine Herausforderung für uns als Organisatoren darin, Gespräche zwischen den Teilnehmern in den Pausen und nach Beendigung der Vorträge zu ermöglichen.

Heute hat das Vonage Developer Community Team gepostet, wie wir Veranstaltungen unterstützen, die online gehen. Ein Teil davon ist das Social Cafe - eine Anwendung, in der Veranstaltungen ihre eigenen Lobbys mit mehreren Gesprächstischen haben. Jeder Tisch ist ein Videoanruf, der von der Vonage Video API (früher TokBox OpenTok) unterstützt wird.

Wie kann ich das Sozialcafé jetzt nutzen?

Es gibt zwei Möglichkeiten, diese Social Cafe-Demo zu nutzen:

1. Fügen Sie Ihre eigene Veranstaltung kostenlos zu unserer gehosteten Demo hinzu. Richtlinien finden Sie in unseren Richtlinien zum Eintragen.

2. Nehmen Sie unsere Demo und stellen Sie sie in fünf Minuten auf Netlify bereit, von unserem GitHub-Repository für dieses Projekt.

In diesem Lernprogramm erfahren Sie, wie die Anwendung aufgebaut ist, damit Sie Ihre eigene Anwendung von Grund auf neu erstellen können.

Voraussetzungen

• A Vonage Video API Account

• Node.js auf Ihrem Rechner installiert

Eine neue Nuxt.js Anwendung erstellen

Führen Sie npx create-nuxt-app social-cafe in Ihrem Terminal aus. Sie erhalten eine Reihe von Fragen - wählen Sie für alle außer den folgenden die Standardeinstellungen:

• Programmiersprache wählen - JavaScript

• Wählen Sie den Paketmanager - npm

• Rendering-Modus wählen - Single Page App

Sobald Sie alle Fragen beantwortet haben, wird ein neues Projekt im social-cafe Verzeichnis erstellt. Navigieren Sie in Ihrem Code-Editor und Terminal zu diesem Verzeichnis.

Kontrollpunkt! Vergewissern Sie sich, dass Ihre Anwendung korrekt konfiguriert ist, indem Sie npm run dev und öffnen Sie http://localhost:3000

Erstellen Sie Ihre erste Veranstaltung

Der Ablauf dieser Anwendung ist wie folgt:

1. Die Nutzer starten auf der Landing Page. Sie geben einen Ereigniscode ein.

2. Falls gültig, werden die Benutzer zu einer Ereignislobby weitergeleitet. Sie enthält Ereignisinformationen und eine Liste der zugehörigen Tabellen.

3. Ein Tisch ist ein einmaliger Videoanruf. Benutzer können zu einer Ereignislobby zurückkehren.

Es gibt mehrere Möglichkeiten, Ereignisdaten zu speichern, viele davon in externen Datenbanken, aber für diese Anwendung werden Sie sie in einer Datei speichern. Die Datei kann bearbeitet werden, um Ereignisinformationen hinzuzufügen oder zu bearbeiten.

Erstellen Sie store/index.js und fügen Sie den folgenden Code in die neue Datei ein:

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

Diese Datei stellt Ihren anwendungsweiten Speicher dar, und auf den Inhalt kann auf jeder Seite mit this.$store.state. Jedes Ereignis sollte ein eigenes Objekt im events Array sein. Die slug wird sowohl als Ereigniscode als auch als Text in der URL verwendet. Stellen Sie also sicher, dass sie für eine URL gültig und leicht einzugeben sind.

Starten Sie Ihren Nuxt-Server neu und laden Sie Ihren Browser neu.

Erstellen Sie die Landing Page

Öffnen Sie pages/index.vue, löschen Sie den Inhalt, und ersetzen Sie ihn durch eine Minimalvorlage:

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

Sie sollten feststellen, dass Ihre Browserseite automatisch aktualisiert wurde, als Sie die Datei gespeichert haben. Dies wird als Hot-Reloading bezeichnet und ist eine Funktion, die Nuxt.js ohne jegliche Konfiguration bietet.

Fügen wir eine Texteingabe zu unserer Vorlage mit Datenbindung hinzu:

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

Wenn Benutzer die Eingabetaste drücken, müssen Sie überprüfen, ob der Code ein gültiger Ereignis-Slug ist, bevor Sie zur Ereignislobby navigieren. Auf diese Weise wird vermieden, dass Nutzer in einer Veranstaltung landen, die nicht existiert, und niemanden haben, mit dem sie chatten können.

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

In dieser Methode überprüfen Sie, ob der eventName als Ereignis-Slug in dem zuvor eingerichteten Anwendungsspeicher existiert. Wenn Sie beide Zeichenketten in Kleinbuchstaben schreiben, bedeutet dies, dass die Groß-/Kleinschreibung nicht berücksichtigt wird und der Benutzer im Erfolgsfall zu /event-name.

Beachten Sie, dass Sie diese Methode auch aufrufen müssen. In diesem Projekt rufen wir sie auf, wenn die Eingabetaste gedrückt wird und die Eingabe den Fokus hat. Sie können diese Methode auch an eine Schaltfläche binden.

Bevor Sie testen können, ob dies funktioniert, müssen Sie die Seite einrichten, auf die Sie die Besucher leiten werden. Erstellen Sie eine Datei in pages/_event/index.vue und erstellen Sie eine minimale Vorlage:

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

Der Unterstrich im Verzeichnisnamen bedeutet, dass es sich um einen dynamischen Wert handelt. Sie können auf ihn zugreifen mit this.$route.params.event.

Kontrollpunkt! Starten Sie Ihre Anwendung neu, gehen Sie zu http://localhost:3000, geben Sie example-eventein, und drücken Sie die Eingabetaste. Versuchen Sie auch einen anderen, ungültigen Ereigniscode und Sie sollten einen Fehler sehen.

Erstellen Sie die Veranstaltungslobby

Es besteht die Möglichkeit, dass Benutzer direkt zu einer URL der Veranstaltungslobby weitergeleitet werden. Daher müssen Sie den Slug der Veranstaltung erneut validieren, wenn die Seite geladen wird. Fügen Sie dieses Skript zu pages/_event/index.vue:

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

Ausgehend von der URL haben Sie nur einen Ereignis-Slug. Verwenden Sie eine ähnliche Logik wie bei der Methode der Landing Page goToEvent() Methode, erstellen Sie eine berechnete Eigenschaft, die das gesamte Ereignisobjekt zurückgibt.

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

Der Name Ihrer Veranstaltung und der Link zum Verhaltenskodex sollten jetzt sichtbar sein, was bedeutet, dass Sie die einzelnen Veranstaltungsdaten erfolgreich aus dem Anwendungsspeicher abgerufen haben. Das Schleifen durch das event.rooms Array erzeugt ein neues Listenelement für jeden Raum und einen Link zu /event-name/room-name.

Vor dem Testen sollten Sie noch einmal eine minimale Seite erstellen. Erstellen Sie eine Datei unter pages/_event/_room/index.vue mit folgendem Inhalt:

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

Kontrollpunkt! Klicken Sie auf Ihrer Veranstaltungsseite auf einen Tisch-Link. Sie sollten auf eine neue Seite gehen und den Raum-Slug sehen können.

Einen Raum mit einem Videoanruf erstellen

Sie müssen den aktuellen Slug validieren, indem Sie die validate() Methode:

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

Wenn Sie es noch nicht getan haben, melden Sie sich für eine Vonage Video API Account an und erstellen Sie ein neues Einbettungsprojekt. Die Website-URL sollte lauten http://localhost:3000. Notieren Sie sich Ihre embedId.

Fügen Sie die folgende Codezeile unter dem <h1> Element ein und denken Sie daran, Ihre 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" />

Mit der Aufnahme dieses iframe haben wir einen grundlegenden Video-Chat vollständig implementiert. Mehrere Räume können mit einem embedId unter Verwendung des room URL-Parameter. Diese Anwendung verwendet die Routenparameter, um dynamisch einen Raum auf der Grundlage der URL zu erstellen.

Bevor Sie einpacken, müssen Sie noch ein paar Kleinigkeiten erledigen.

Link zur Lobby und zum Verhaltenskodex der Veranstaltung hinzufügen

Wie bei der Ereignislobby müssen Sie auch hier eine event berechnete Eigenschaft unterhalb der validate() Methode hinzufügen:

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

In der Vorlage können Sie nun auf Ereignisinformationen zugreifen:

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

Die Aufforderung des Raums hinzufügen

Erstellen Sie eine room berechnete Eigenschaft:

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

In der Vorlage können Sie nun auf alle Informationen im room Objekt zugreifen:

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

Wie geht es weiter?

Dies ist ein fantastischer Anfang, und es gibt viele Möglichkeiten, diese Anwendung zu nutzen. Sie können wählen:

• Etwas Styling hinzufügen

• Erstellen einer 404-Seite

• Stellen Sie dies online bereit (denken Sie daran, die Website-URL in den Projekteinstellungen für die Einbettung im Video API Account Portal zu ändern)

• Verwenden Sie die Vonage Video API, um dieses Projekt zu implementieren und Funktionen wie die Anzeige von Namen, Bildschirmfreigabe und Chat hinzuzufügen.

Lesen Sie unseren Beitrag über Erstellen eines einfachen Video-Chats, wie diesem, mit Vonage Video API.

Der vollständige Projektcode ist zu finden unter https://github.com/nexmo-community/social-cafe.

Wie immer, wenn Sie Unterstützung benötigen, können Sie sich gerne an die Vonage Community Slack und wir hoffen, dass Sie dieses Projekt für die Community nutzen können.