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

コード共有は、 の重要な側面です。 プログラミング リモート ワークと仮想コラボレーションの台頭に伴い、開発者はリアルタイム コミュニケーション、ビデオおよび音声会議、使いやすいユーザー インターフェイスを提供するコード共有用の信頼できるツールを必要としています。 はその一例です。 Codeshare.io しかし今日は、 を使用して独自のコード共有プレイグラウンドを構築します。シートベルトを締める！ 🎢 Dyte は開発者にとって使いやすいプラットフォームであり、製品内でライブ エクスペリエンスを構築するための強力な SDK を提供します。このブログでは、Dyte.io と ReactJs を使用してコード共有プラットフォームを構築するプロセスについて説明します。はじめましょう！ 🏃 Dyte.io ステップ 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 以下のコマンドを使用して CLI をインストールします。 Dyte $ 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 このテンプレートは を使用しており、Dyte ミーティングとシームレスに連携する独自のリアルタイム プラグインを作成できます。複雑な問題を数分で解決するのに役立つ多くの興味深い機能があります。次に、「npm install」コマンドを使用して依存関係をインストールします。 @dytesdk/plugin-sdk $ npm install 次に、次のコマンドを実行して、いくつかの依存関係を追加します。 $ npm i @uiw/react-codemirror @codemirror/lang-javascript uuid ここでは、言語サポートを備えたビルド済みのコード エディターを提供する を追加しています。また、関数呼び出しだけで UUID を生成するのに役立つ UUID もインストールしています。これはすぐに役に立ちます。 react-codemirror すべての設定が完了したので、このコマンドを使用して、カスタム プラグインの設定を開始およびテストできます。 $ npm start ステップ 3: 新しいカスタム プラグインを試す 新しいカスタム プラグインを試すには、 にアクセスする必要があります。 http://staging.dyte.io ここで、新しい会議を作成するよう求められます。それは非常に簡単です。あなたの名前とミーティング名を追加して をクリックするだけです。次のページで、会議 よう求められます。 [参加] をクリックすると、参加できます。 Create join 右下隅にある ボタンを見つけてクリックし、既存のすべてのプラグインを表示します。という名前のプラグインに興味があります。 をクリックすると、会議自体の中にプラグインが表示されます 🤯。 Plugins launch 私たちはすべての準備ができています。それでは、実際のコードを書き始めましょう。 Code Editor コンポーネントから始めましょう。 ステップ 4: コード エディターの作成 独自のコード エディターを作成することから始めましょう 🧑💻。 このために、最初にコンポーネントを作成してから、以前にインストールした パッケージを使用します。まず、 内の という名前のファイルに新しい を作成し、次のコードを貼り付けます。 CodeMirror src/containers CodeEditor.js React Functional Component 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 つ目はランダムに生成された で、2 つ目はコード全体です。 user id 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 ( <> ); } 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 ( <> ); } 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 ( ) } 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 ( ); } export default App; 次に、 コンポーネントを作成します。ロゴ、タイトル、会議 UI を含むレイアウトを作成します。 Layout や PrismJS などのいくつかのライブラリを使用して、共同コード エディターと会議 UI を構築します。 DyteMeeting import Meet from "./Meeting" const Layout = () => { return ( <> Collaborative Code Editor ) } 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: " ", }, ], }, }, }); setUserToken(authToken); } }; useEffect(() => { if (meetingId && !userToken) joinMeetingId(); }, [meetingId]); useEffect(() => { if (userToken) { provideDyteDesignSystem(meetingEl.current, { theme: "dark", }); } }, [userToken]); return ( <> {userToken && meetingId ? ( ) : ( Loading... )} ); }; 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 キーを に保存する ファイルを作成しましょう。これらのキーは、Dyte ダッシュボードで見つけることができます。 server/src .env DYTE_ORG_ID= DYTE_API_KEY= アプリケーションの実行に役立ついくつかのスクリプト ✍️ も追加しましょう。 タグ内の ファイルに以下の行を追加します。 server scripts package.json "start": "node dist/index.js", "dev": "nodemon src/index.js" ファイルとフォルダを作成しましょう。すべてのコードは フォルダー内に存在します。 内に別のフォルダー を作成します。 server/src src utils 内のファイル と 内の を初期化します。次に、API シークレットを保持する ファイルを に追加しましょう。 src index.js utils dyte-api.js .env src ファイルを開き、次の行を追加します。プレースホルダーの値を Dyte ダッシュボードの API シークレットに置き換えます。 src/.env DYTE_ORG_ID= 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 がすべてのセットアップを満たしているので、いよいよプラットフォームを試します。 アプリケーション全体をローカルで実行するには: 内部クライアント タイプ PORT=3001 npm start プラグイン タイプ の内部 npm start 内部サーバー タイプ PORT=3000 npm run dev これで、アプリ内ビデオ会議と、独自の「コード コラボレーション プラグイン」とのコラボレーションが実現しました。 🧑💻 コード共有プラットフォームを試すことができます . ここ 結論 🎉 ウーフー！最後までやり遂げました、友よ！今日は、1 つまたは 2 つのことを学んで、楽しい時間を過ごしていただけたでしょうか。 React をひとつまみと Dyte を 1 滴加えるだけで、アプリ内ミーティングを備えたおしゃれなライブ ペア プログラミングおよびコード共有プラットフォームを一緒に構築しました。成功の秘訣を語る！ プラグイン テンプレートと強力な SDK を利用できるので、すぐに参加して、今日一緒に作ったような独自の共同作業の傑作を簡単に作成できます。 何を求めている？ にアクセスして、創造力を発揮してください!独自のコラボレーション アプリケーションの構築を開始すると、次の大きなものを作成できる可能性があります。 🚀 Dyte.io