662 測定値

Dyte と ReactJs を使用してライブコード共有プラットフォームを構築する方法

に Vishal Pratap Singh15m2023/04/24

長すぎる; 読むには

このチュートリアルの最後に、ユーザーがコードを共有し、ビデオ通話や音声通話に参加できるようにする「ライブコード共有プラットフォーム」を作成します。 🎉💻🥳

featured image - Dyte と ReactJs を使用してライブコード共有プラットフォームを構築する方法

コード共有は、プログラミングの重要な側面です。

リモートワークと仮想コラボレーションの台頭に伴い、開発者はリアルタイムコミュニケーション、ビデオおよび音声会議、使いやすいユーザーインターフェイスを提供するコード共有用の信頼できるツールを必要としています。 Codeshare.ioはその一例です。

しかし今日は、 Dyte.ioを使用して独自のコード共有プレイグラウンドを構築します。シートベルトを締める！ 🎢 Dyte は開発者にとって使いやすいプラットフォームであり、製品内でライブエクスペリエンスを構築するための強力な SDK を提供します。このブログでは、Dyte.io と ReactJs を使用してコード共有プラットフォームを構築するプロセスについて説明します。はじめましょう！ 🏃

ステップ 0: Dyte アカウントの設定

まず、Dyte アカウントを設定する必要があります。これを行うには、まず Dyte.io にアクセスしてから、[ビルドの開始] をクリックします。次のページで、Google または GitHub アカウントでサインインして無料の Dyte アカウントを取得します🎉. API キーは、左側のサイドバーの [API キー] タブの下にあります。 API キーを安全に保ち、誰とも共有しないでください。

ステップ 1: 環境のセットアップ

コーディングに飛び込む前に、もう 1 つのチェックポイントに到達します。

一般的な JavaScript ランタイム環境である Node.js と、事前構成されたセットアップで React プロジェクトを生成するツールである create-react-app を使用します。

まず、3 つのフォルダーclient 、 server 、およびpluginを作成します。

注: 🧑‍💻 Mac を使用している場合は、デフォルトでポート 5000 を占有しているため、システム設定で「AirPlay レシーバー」をオフにする必要があります。

参考までに、このブログの最後にあるfinal folder structure次のようになります。

以下のコマンドを使用してDyte CLI をインストールします。

 $ npm install -g @dytesdk/cli

次のコマンドで承認部分を進め、組織を選択します。

 $ dyte auth login $ dyte auth org

詳細については、 Dyte CLI ドキュメントを参照してください。

ステップ 2: 新しいカスタムプラグインのセットアップ

カスタム Dyte プラグインの構築を開始するには、次のコマンドを使用してDyte Plugin Templateを複製します。プラグインテンプレートを使用すると、すばやく開始できます。

 $ git clone https://github.com/dyte-in/react-plugin-template.git

このテンプレートは@dytesdk/plugin-sdkを使用しており、Dyte ミーティングとシームレスに連携する独自のリアルタイムプラグインを作成できます。複雑な問題を数分で解決するのに役立つ多くの興味深い機能があります。次に、「npm install」コマンドを使用して依存関係をインストールします。

 $ npm install

次に、次のコマンドを実行して、いくつかの依存関係を追加します。

 $ npm i @uiw/react-codemirror @codemirror/lang-javascript uuid

ここでは、言語サポートを備えたビルド済みのコードエディターを提供するreact-codemirrorを追加しています。また、関数呼び出しだけで UUID を生成するのに役立つ UUID もインストールしています。これはすぐに役に立ちます。

すべての設定が完了したので、このコマンドを使用して、カスタムプラグインの設定を開始およびテストできます。

 $ npm start

ステップ 3: 新しいカスタムプラグインを試す

新しいカスタムプラグインを試すには、 http://staging.dyte.ioにアクセスする必要があります。

ここで、新しい会議を作成するよう求められます。それは非常に簡単です。あなたの名前とミーティング名を追加してCreateをクリックするだけです。次のページで、会議joinよう求められます。 [参加] をクリックすると、参加できます。

右下隅にあるPluginsボタンを見つけてクリックし、既存のすべてのプラグインを表示します。という名前のプラグインに興味があります。 launchをクリックすると、会議自体の中にプラグインが表示されます 🤯。

私たちはすべての準備ができています。それでは、実際のコードを書き始めましょう。

Code Editor コンポーネントから始めましょう。

ステップ 4: コードエディターの作成

独自のコードエディターを作成することから始めましょう 🧑‍💻。

このために、最初にコンポーネントを作成してから、以前にインストールしたCodeMirrorパッケージを使用します。まず、 src/containers内のCodeEditor.jsという名前のファイルに新しいReact Functional Componentを作成し、次のコードを貼り付けます。

 <CodeMirror style={{ fontSize: "32px", textAlign: "left" }} value={code} onChange={handleCodeChange} height="100vh" width="100vw" theme={'dark'} extensions={[javascript({ jsx: true })]}/>

CodeMirror コンポーネントは、ビルド済みのコードエディターを提供します。さまざまな構文強調表示機能が付属しています。

ステップ 5: コード変更の処理

ライブコードの変更を処理するために、最初にcodeという名前の新しい状態を作成しましょう

import { useEffect, useState, useRef } from "react"; const [code, setCode] = useState("function add(a, b) { return a + b;}");

次に、 plugin.emit()関数を使用して、 CodeMirrorのコードに変更があるたびにイベントを発行するhandleCodeChange関数を作成します。

ここでは、2 つのプロパティを持つオブジェクトを発行しています。 1 つ目はランダムに生成されたuser idで、2 つ目はコード全体です。

 import { useEffect, useState, useRef } from "react"; import CodeMirror from '@uiw/react-codemirror'; import { javascript } from '@codemirror/lang-javascript'; const CodeEditor = ({ plugin }) => { const [code, setCode] = useState("function add(a, b) {return a + b;}"); const [userId, setUserId] = useState() const handleCodeChange = async (code) => { plugin.emit(`CODE_CHANGE`, { code, user }) } return ( <> <CodeMirror style={{ fontSize: "32px", textAlign: "left" }} value={code} onChange={handleCodeChange} height="100vh" width="100vw" theme={'dark'} extensions={[javascript({ jsx: true })]} /> </> ); } export default CodeEditor;

ステップ 6: コード変更イベントをリッスンする

他の人がコードを変更したときのイベントをリッスンする必要があります。このために、以下に示すようにplugin.on()関数を使用します。この関数は、 event nameパラメーターとして受け取り、コードの変更を受け取ります。

ここで注意すべきもう 1 つの点は、他のユーザーから送信された場合にのみ、現在のコードを更新する必要があるということです。このために、単純な条件文if(data.user != userId){}を配置する必要があります。

 import { useEffect, useState, useRef } from "react"; import CodeMirror from '@uiw/react-codemirror'; import { javascript } from '@codemirror/lang-javascript'; import {v4} from 'uuid'; const user = v4() const CodeEditor = ({ plugin }) => { const [code, setCode] = useState("function add(a, b) {\n return a + b;\n}"); const [userId, setUserId] = useState() useEffect(() => { if (plugin) { const startListening = async () => { plugin.on(`CODE_CHANGE`, (data) => { if(data.user != user) { setCode(data.code) } }); } startListening() } }, [plugin]) const handleCodeChange = async (code) => { plugin.emit(`CODE_CHANGE`, { code, user }) } return ( <> <CodeMirror style={{ fontSize: "32px", textAlign: "left" }} value={code} onChange={handleCodeChange} height="100vh" width="100vw" theme={'dark'} extensions={[javascript({ jsx: true })]} /> </> ); } export default CodeEditor;

このコンポーネントでは、CodeMirror を使用してコードエディターを作成しています。エディターに変更を加えると、 plugin.emit()関数呼び出しを使用して、イベントCODE_CHANGEがミーティング内のすべてのユーザーに発行されます。 emit関数は、 eventNameとdata引数として取ります。

次のステップでは、CodeEditor コンポーネントをMain.tsxファイルにインポートする必要があります。ファイルは次のようになります。 👇

 import { useDytePlugin } from '../context' import CodeEditor from './CodeEditor'; const Main = () => { const plugin = useDytePlugin(); return ( <div style={{ height: "100%" }}> <CodeEditor plugin={plugin} /> </div> ) } export default Main

「Collaborative Code Editor Plugin」のコード 😉 の準備が整いました。誰かがコードエディターなしで最初のコードエディターをどのように作成したのか 😂?冗談はさておき、プラグイン 🎉 の準備が整いました。

チェックアウトするには、 staging.dyte.io を開いて手順に従ってください。名前とミーティングのタイトルを入力して参加します。[ミーティングに参加] をクリックします。 Localhost Devプラグインを開くと、準備完了です。

ステップ 7: コンポーネントを公開する

🧑‍💻 いよいよコンテンツを公開します。これはDyte CLIを使用した簡単なプロセスです。このためには、まずプラグインをビルドしてから、 dyte plugins publishコマンドを実行する必要があります。

 $ dyte plugins create $ npm run build $ cp dyte-config.json ./build/dyte-config.json $ cd build $ dyte plugins publish

ステップ 8: コード共有プラットフォームの使用を開始する

コードでの共同作業に役立つプラグインを構築したので、このプラグインを使用するプラットフォームの構築を開始できます。

クライアント側から始めましょう。 clientフォルダー内で、 create-react-appを使用して新しいReactJSプロジェクトをセットアップし、次のコマンドを使用して反応アプリを作成します。

 $ npx create-react-app .

次に、次のコマンドを実行して、 Dyteとcode-editorの依存関係をインストールします。

 $ npm i @dytesdk/react-ui-kit @dytesdk/react-web-core react-simple-code-editor

🎬 npm start で開発サーバーを起動しましょう:

 $ npm start

ステップ 9: レイアウトの構築

srcフォルダー内のapp.jsファイルを開きます。このファイルの内容を削除し、次のコードスニペット 👇 を追加します。

 import Layout from './components/Layout' function App() { return ( <Layout /> ); } export default App;

次に、 Layoutコンポーネントを作成します。ロゴ、タイトル、会議 UI を含むレイアウトを作成します。

DyteMeetingや PrismJS などのいくつかのライブラリを使用して、共同コードエディターと会議 UI を構築します。

 import Meet from "./Meeting" const Layout = () => { return ( <> <div style={{ padding: "30px", display: "flex", justifyContent: "space-between", alignItems: "center" }}> <img src="https://dyte.io/blog/content/images/2021/09/Dyte-Logo.svg" height={"70px"}/> <span style={{ fontSize: "30px", color: "#3e75fd" }}>Collaborative Code Editor</span> <img style={{ opacity: "0"}} src="https://dyte.io/blog/content/images/2021/09/Dyte-Logo.svg" height={"80px"}/> </div> <div style={{ height: "88vh" }} ><Meet /></div> </> ) } export default Layout

ステップ 10: 会議コンポーネント

🧑‍💻 まず、ファイルclient/src/utils/api.jsにいくつかのユーティリティ関数を作成する必要があります

const createMeeting = async () => { const resp = await fetch("http://localhost:3000/meetings", { method: "POST", body: JSON.stringify({ title: "New Code pair" }), headers: { "Content-Type": "application/json" } }) const data = await resp.json() console.log(data) return data.data.id; } const joinMeeting = async (id) => { const resp = await fetch(`http://localhost:3000/meetings/${id}/participants`, { method: "POST", body: JSON.stringify({ name: "new user", preset_name: "group_call_host" }), headers: { "Content-Type": "application/json" } }) const data = await resp.json() console.log(data) return data.data.token; } export { createMeeting, joinMeeting }

これらの関数は、バックエンドと通信して会議を作成し、参加者を追加します。会議の作成では、 titleオプションのパラメーターとして渡します。

また、参加者を追加するために、 nameパラメーター (オプション)、 pictureパラメーター (オプション)、およびpreset_nameパラメーター (必須) をmeetingIdと共に渡します。

会議コンポーネントの時間です。このために、Dyte UI キット ✨ を使用します。これにより、ライブのオーディオ/ビデオ共有をアプリケーションに簡単に統合できます。はい、これらの 10 ～ 15 行のコードですべての面倒な作業が行われます🏋🏼‍♂️。

 import { useState, useEffect, useRef } from "react"; import { DyteMeeting, provideDyteDesignSystem } from "@dytesdk/react-ui-kit"; import { useDyteClient } from "@dytesdk/react-web-core"; import { createMeeting, joinMeeting } from "../utils/api"; const Meet = () => { const meetingEl = useRef(); const [meeting, initMeeting] = useDyteClient(); const [userToken, setUserToken] = useState(); const [meetingId, setMeetingId] = useState(); const createMeetingId = async () => { const newMeetingId = await createMeeting(); setMeetingId(newMeetingId); }; useEffect(() => { const id = window.location.pathname.split("/")[2]; if (!id) { createMeetingId(); } else { setMeetingId(id); } }, []); const joinMeetingId = async () => { if (meetingId) { const authToken = await joinMeeting(meetingId); await initMeeting({ authToken, modules: { plugin: true, devTools: { logs: true, plugins: [ { name: "Collaborative-code-editor", port: "5000", id: "<your-plugin-id>", }, ], }, }, }); setUserToken(authToken); } }; useEffect(() => { if (meetingId && !userToken) joinMeetingId(); }, [meetingId]); useEffect(() => { if (userToken) { provideDyteDesignSystem(meetingEl.current, { theme: "dark", }); } }, [userToken]); return ( <> {userToken && meetingId ? ( <DyteMeeting mode="fill" meeting={meeting} ref={meetingEl} /> ) : ( <div>Loading...</div> )} </> ); }; export default Meet;

コード共有プラットフォームの UI の準備が整いました 🎉

ステップ 11: バックエンドの準備

🧑‍💻 Dyte は、開発者のエクスペリエンスを強化し、幅広い開発者の要件を満たすさまざまな強力な API を提供します。

Dyte の組織、セッション、会議、録音、Webhook、ライブストリーミング、分析などを管理できます。

プロセスを簡素化するために、Express と Node を使用して、認証、会議の作成、および参加者の追加に役立つバックエンドを作成します。 ✨

プロジェクトフォルダーで開始するには、次の手順に従います。

 $ mkdir server && cd server

いくつかの依存関係をインストールすることから始め、cd で「server」ディレクトリに移動し、次のコマンドを使用します。

 $ npm init -y $ npm install express cors axios dotenv $ npm install -g nodemon

まず、API キーをserver/srcに保存する.envファイルを作成しましょう。これらのキーは、Dyte ダッシュボードで見つけることができます。

 DYTE_ORG_ID=<ID> DYTE_API_KEY=<KEY>

serverアプリケーションの実行に役立ついくつかのスクリプト ✍️ も追加しましょう。 scriptsタグ内のpackage.jsonファイルに以下の行を追加します。

 "start": "node dist/index.js", "dev": "nodemon src/index.js"

ファイルとフォルダを作成しましょう。すべてのコードはserver/srcフォルダー内に存在します。 src内に別のフォルダーutilsを作成します。

src内のファイルindex.jsとutils内のdyte-api.jsを初期化します。次に、API シークレットを保持する.envファイルをsrcに追加しましょう。

src/.envファイルを開き、次の行を追加します。プレースホルダーの値を Dyte ダッシュボードの API シークレットに置き換えます。

 DYTE_ORG_ID=<YOUR-DYTE-ORG-ID> DYTE_API_KEY=<YOUR-DYTE-API-KEY>

これでコードを書き始めることができます。 Dyte API にアクセスするためのaxios構成の作成から始めましょう。

utils/dyte-api.jsを開き、次のコードを入力します。

このコードは、Dyte API および認証との通信に役立ちます。

 const axios = require('axios'); require('dotenv').config(); const DYTE_API_KEY = process.env.DYTE_API_KEY; const DYTE_ORG_ID = process.env.DYTE_ORG_ID; const API_HASH = Buffer.from( `${DYTE_ORG_ID}:${DYTE_API_KEY}`, 'utf-8' ).toString('base64'); const DyteAPI = axios.create({ baseURL: 'https://api.cluster.dyte.in/v2', headers: { Authorization: `Basic ${API_HASH}`, }, }); module.exports = DyteAPI;

次にルートを書いていきます。

フロントエンドはこれらのルートで通信して、会議を作成し、参加者を会議に追加します。

index.jsを開いて、次のコードスニペットを追加しましょう。

 const express = require('express'); const cors = require('cors'); const DyteAPI = require('./utils/dyte-api') const PORT = process.env.PORT || 3000; const app = express(); app.use(cors("http://localhost:3001")); app.use(express.json()); app.post('/meetings', async (req, res) => { const { title } = req.body const response = await DyteAPI.post('/meetings', { title, }); return res.status(response.status).json(response.data); }); app.post('/meetings/:meetingId/participants', async (req, res) => { const meetingId = req.params.meetingId const { name, picture, preset_name } = req.body const client_specific_id = `react-samples::${name.replaceAll(' ', '-')}-${Math.random().toString(36).substring(2, 7)}`; const response = await DyteAPI.post(`/meetings/${meetingId}/participants`, { name, picture, preset_name, client_specific_id, }); return res.status(response.status).json(response.data); }); app.listen(PORT, () => { console.log(`Started listening on ${PORT}...`) });

タダ！ 🎩✨ やりました！

いよいよコード共有プラットフォームを試して、友人やチームメイトとコーディングしながら共同作業を行います。

光沢のある新しいコードエディターと Dyte がすべてのセットアップを満たしているので、いよいよプラットフォームを試します。