シェア:
){kind=small}
Vonageの元デベロッパー・アドボケイトで、ロンドンの地元テック・コミュニティをサポートする役割を担っていた。彼は経験豊富なイベントオーガナイザーであり、ボードゲーマーであり、ムーというかわいい犬のパパでもある。また、You Got This（幸せで健康的な仕事生活に必要なコア・スキルに関するイベント・ネットワーク）のリード・オーガナイザーでもある。
Nuxt.jsでオンライン集会用ビデオ会話プラットフォームを構築する
所要時間：1 分
多くのイベントがオンライン化されている現在、コミュニティ・オーガナイザーとして私たちが直面している課題のひとつは、休憩時間や講演終了後に参加者同士の会話をいかに促進するかということだ。
本日、Vonage開発者コミュニティチーム がオンライン化イベントのサポートについて投稿しました。.このアプリケーションは、イベントが複数の会話テーブルを持つ独自のロビーを持つソーシャルカフェです。各テーブルはVonage Video API (旧TokBox OpenTok)を利用したビデオ通話です。
ソーシャルカフェのデモを利用するには、2つの方法がある：
主催デモにご自身のイベントを無料で追加できます。ガイドラインは 投稿ガイドライン.
私たちのデモを参考に、Netlifyにデプロイしてみましょう。 GitHubリポジトリをご覧ください。
このチュートリアルでは、このアプリケーションがどのように作られたかを説明するので、ゼロから自分のアプリケーションを作ることができる。
A Video APIアカウント
マシンにインストールされたNode.js
実行する npx create-nuxt-app social-cafeを実行する。一連の質問が表示されるので、下記以外はデフォルトを選んでください：
プログラミング言語の選択 - JavaScript
パッケージマネージャーを選択する - npm
レンダリングモードを選択 - シングルページアプリ
すべての質問に答えると、新しいプロジェクトが social-cafeディレクトリに新しいプロジェクトが作成されます。コードエディターとターミナルでそのディレクトリに移動してください。
チェックポイントを実行して、アプリケーションが正しくセットアップされていることを確認してください。 npm run devを実行し http://localhost:3000
このアプリケーションの流れはこうだ：
ユーザーはランディングページからスタートする。イベントコードを入力します。
有効な場合、ユーザはイベント・ロビーにルーティングされる。イベント情報と関連テーブルのリストが含まれます。
テーブルとは、ユニークなビデオ通話のこと。ユーザーはイベントロビーに戻ることができる。
イベント・データを保存する方法は、外部データベースを含め複数あるが、このアプリケーションではファイルに保存する。このファイルは、イベント情報の追加や編集のために編集することができます。
作成する store/index.jsを作成し、新しいファイルに以下のコードを追加する：
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?' }
]
}
]
})
このファイルはアプリケーション全体のストアを表し、コンテンツはどのページからでも this.$store.state.すべてのイベントは events配列に格納されます。配列の slugはイベントコードとURLのテキストの両方として使われるので、URLとして有効で、入力が簡単であることを確認してください。
Nuxtサーバを再起動し、ブラウザをリロードします。
開く pages/index.vueを開き、コンテンツを削除し、最小限のテンプレートに置き換える：
<template>
<div>
<h1>Landing Page</h1>
</div>
</template>ファイルを保存すると、ブラウザのページが自動的に更新されていることに気づくはずです。これはホット・リロードと呼ばれ、Nuxt.jsが設定なしで提供する機能です。
データ・バインディングを使ってテンプレートにテキスト入力を追加してみよう：
<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>ユーザーがエンターキーを押した場合、イベントロビーに移動する前に、コードが有効なイベントスラッグであることを確認する必要があります。これにより、ユーザが存在しないイベントに行ってしまい、チャットする相手がいないという事態を避けることができます。
<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>このメソッドでは eventNameが存在するかどうかをチェックしています。両方の文字列を小文字にすることは、大文字小文字を区別しないチェックであることを意味します。 /event-name.
このメソッドも呼び出さなければならないことに注意。このプロジェクトでは、Enterが押されて入力にフォーカスが当たったときにこのメソッドを呼び出している。このメソッドをボタンにバインドすることもできます。
これがうまくいったかテストする前に、人々を誘導するページを設定する必要があります。ファイルを pages/_event/index.vueにファイルを作成し、最小限のテンプレートを作成します：
<template>
<div>
<h1>Event {{$route.params.event}}</h1>
</div>
</template>ディレクトリ名のアンダースコアは、これが動的な値であることを意味する。アクセスするには this.$route.params.event.
チェックポイントアプリケーションを再起動し http://localhost:3000にアクセスし example-eventと入力してエンターキーを押してください。また、別の無効なイベントコードも試してみてください。
ユーザーがイベントロビーのURLに直接誘導される可能性があるため、ページがロードされたときにイベントスラッグを再度検証する必要があります。このスクリプトを pages/_event/index.vue:
<script>
export default {
validate ({ params, store }) {
return store.state.events.find(e => e.slug === params.event)
}
}
</script>URLに基づくと、イベントスラッグしかありません。ランディングページの goToEvent()メソッドと同様のロジックを使用して、イベントオブジェクト全体を返すコンピューテッドプロパティを作成します。
<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>イベント名と行動規範のリンクが表示されているはずです。これは、アプリケーションストアから個々のイベントデータを取得できていることを意味します。配列 event.roomsへのリンクを生成します。 /event-name/room-name.
テストする前に、もう一度最小限のページを作成してください。ファイルを pages/_event/_room/index.vueにファイルを作成する：
<template>
<div>
<h1>Event {{$route.params.event}}, Room {{$route.params.room}}</h1>
</div>
</template>チェックポイントイベントページからテーブルのリンクをクリックしてください。新しいページが開き、ルームスラッグが表示されます。
を構築して、現在のスラッグを検証する必要があります。 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>まだの方は Video APIにサインアップしてください。アカウントにサインアップし、新しい埋め込みプロジェクトを作成してください。ウェブサイトのURLは http://localhost:3000.あなたの embedId.
以下のコードを <h1>要素の下に以下のコードを追加する。 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" />これによって iframe基本的なビデオチャットが完全に実装されています。複数のルームは embedIdで作成できます。 roomURLパラメータを使用します。このアプリケーションは、URLに基づいて動的に部屋を作成するためにルートパラメータを使用します。
最後に、ちょっとした家事がある。
イベント・ロビーと同様に eventプロパティを追加する必要があります。 validate()メソッドの下に
computed: {
event () {
return this.$store.state.events.find(e => e.slug === this.$route.params.event)
}
}テンプレートでイベント情報にアクセスできるようになりました：
<n-link :to="'/' + $route.params.event">Back to {{event.name}} lobby</n-link>
<n-link :to="event.coc">Code of Conduct</n-link>
計算プロパティを作成する room計算プロパティを作成する：
room () {
return this.event.rooms.find(r => r.slug === this.$route.params.room)
}テンプレート内のすべての情報にアクセスできるようになりました。 roomオブジェクトのすべての情報にアクセスできるようになりました：
<p>Room prompt: {{room.name}}</p>
これは素晴らしいスタートであり、このアプリケーションには多くの方向性がある。次のような選択肢がある：
スタイリングを加える
404ページを作成する
これをオンラインで配置します（Video API Account Portal の Embed project settings で、Web サイトの URL を変更することを忘れないでください）。
Vonage Video APIを使用してこのプロジェクトを実装し、名前の表示、画面共有、チャットなどの機能を追加します。
このような Vonage Video APIを使って、このような基本的なビデオチャットを作成する。.
プロジェクト・コードの全文は、以下を参照されたい。 https://github.com/nexmo-community/social-cafe.
これまで同様、サポートが必要な場合は、次の連絡先までお気軽にご連絡ください。 VonageコミュニティSlackこのプロジェクトがコミュニティにとって役立つことを願っています。