Comment créer une plate-forme de partage de code en direct avec Dyte et ReactJs

Le partage de code est un aspect essentiel de la programmation .

Avec l'essor du travail à distance et de la collaboration virtuelle, les développeurs ont besoin d'outils fiables pour le partage de code qui offrent une communication en temps réel, des conférences vidéo et audio et une interface utilisateur conviviale. Codeshare.io en est un exemple.

Mais aujourd'hui, nous allons retrousser nos manches et construire notre propre terrain de jeu de partage de code en utilisant Dyte.io. Bouclez votre ceinture ! 🎢 Dyte est une plate-forme conviviale pour les développeurs qui propose de puissants SDK pour créer des expériences en direct au sein de notre produit. Dans ce blog, nous vous expliquerons le processus de création d'une plateforme de partage de code avec Dyte.io et ReactJs. Commençons! 🏃

Étape 0 : Configuration du compte Dyte

Avant toute chose, nous aurions besoin de créer un compte Dyte. Pour cela, visitez d'abord Dyte.io, puis appuyez sur Démarrer la construction. Sur la page suivante, connectez-vous avec un compte Google ou GitHub pour obtenir votre compte Dyte gratuit 🎉. Vous trouverez vos clés API sous l'onglet Clés API dans la barre latérale gauche. Conservez vos clés API en sécurité et ne les partagez avec personne.

Étape 1 : Configurer l'environnement

Frapper un point de contrôle de plus avant de plonger dans le codage.

Nous utiliserons Node.js, un environnement d'exécution JavaScript populaire, et create-react-app, un outil qui génère un projet React avec une configuration préconfigurée.

Pour commencer, nous allons créer trois dossiers client , server et plugin .

Remarque : 🧑‍💻 Si vous êtes sur Mac, vous devez désactiver "Récepteur AirPlay" dans les paramètres système car il occupait le port 5000 par défaut.

Juste pour référence, voici à quoi ressemblerait notre final folder structure à la fin de ce blog.

Nous allons continuer et installer Dyte CLI en utilisant la commande ci-dessous.

 $ npm install -g @dytesdk/cli

Poursuivez avec la partie autorisation et sélectionnez l'organisation avec les commandes suivantes.

 $ dyte auth login $ dyte auth org

Pour plus d'informations, consultez Dyte CLI Docs .

Étape 2 : Configurer un nouveau plugin personnalisé

Pour commencer à créer un plug-in Dyte personnalisé, nous allons cloner Dyte Plugin Template à l'aide de la commande suivante. Le modèle de plugin nous permet de démarrer plus rapidement.

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

Ce modèle utilise @dytesdk/plugin-sdk et nous permet de créer nos propres plugins en temps réel qui fonctionnent de manière transparente avec les réunions Dyte. Il possède de nombreuses fonctionnalités intéressantes pour nous aider à résoudre des problèmes complexes en quelques minutes. Maintenant, nous allons installer les dépendances à l'aide de la commande "npm install".

 $ npm install

Ensuite, nous ajouterons quelques dépendances en exécutant la commande suivante.

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

Ici, nous ajoutons react-codemirror , qui fournit un éditeur de code pré-construit avec prise en charge de la langue. Nous installons également un UUID qui nous aidera à générer des UUID avec juste un appel de fonction. Cela vous sera bientôt utile.

Maintenant que tout est configuré, nous pouvons utiliser cette commande pour démarrer et tester notre configuration de plug-in personnalisée.

 $ npm start

Étape 3 : Essayer notre nouveau plugin personnalisé

Pour essayer d'utiliser notre nouveau plugin personnalisé, nous devrons visiter http://staging.dyte.io

Ici, nous serons invités à créer une nouvelle réunion. C'est super simple, ajoutez simplement votre nom et un nom de réunion et appuyez sur Create . Sur la page suivante, il vous demandera de join la réunion. Cliquez sur rejoindre et vous êtes dedans.

Trouvez le bouton Plugins dans le coin inférieur droit et cliquez dessus pour afficher tous les plugins existants. Nous sommes intéressés par un plugin nommé, cliquez sur launch et il révélera votre plugin à l'intérieur même de la réunion 🤯.

Nous avons tout prêt avec nous. Maintenant, nous pouvons commencer à écrire du code réel !

Commençons par notre composant Éditeur de code.

Étape 4 : Création de notre éditeur de code

Commençons par créer notre propre éditeur de code 🧑‍💻.

Pour cela, nous allons d'abord créer un composant, puis utiliser le package CodeMirror que nous avons installé précédemment. Tout d'abord, créez un nouveau React Functional Component dans un fichier nommé CodeEditor.js à l'intérieur src/containers et collez le code suivant.

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

Le composant CodeMirror fournit un éditeur de code prédéfini. Il est livré avec diverses fonctionnalités de coloration syntaxique.

Étape 5 : Gestion des modifications de code

Pour travailler sur la gestion des changements de code en direct, créons d'abord un nouvel état nommé code

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

Maintenant, nous allons créer une fonction handleCodeChange qui émettra des événements chaque fois qu'il y aura un changement dans notre code dans CodeMirror en utilisant la fonction plugin.emit() .

Ici, nous émettons un objet, qui a deux propriétés. Le premier est un user id généré aléatoirement et le second est notre code complet.

 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;

Étape 6 : Écouter les événements de changement de code

Nous devons écouter l'événement lorsque d'autres personnes modifient le code. Pour cela, nous utiliserons la fonction plugin.on() comme indiqué ci-dessous. La fonction accepte event name en tant que paramètre et reçoit les modifications de code.

Une autre chose à noter ici est que nous devons mettre à jour notre code actuel uniquement s'il est envoyé par d'autres utilisateurs. Pour cela, nous devons mettre une simple instruction conditionnelle 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;

Dans ce composant, nous créons un éditeur de code à l'aide de CodeMirror. Toute modification apportée à l'éditeur émet un événement CODE_CHANGE à tous les utilisateurs de la réunion, en utilisant l'appel de fonction plugin.emit() . La fonction emit prend eventName et data comme arguments.

À l'étape suivante, nous devons importer le composant CodeEditor dans le fichier Main.tsx . Votre fichier devrait ressembler à ceci. 👇

 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

Le code de notre "Collaborative Code Editor Plugin" 😉 est maintenant prêt. Comment quelqu'un a-t-il pu écrire le premier éditeur de code sans éditeur de code 😂 ? Blague à part, nous sommes prêts avec notre Plugin 🎉.

Pour payer, ouvrez staging.dyte.io et suivez. Entrez votre nom et le titre de la réunion pour y accéder. Appuyez sur rejoindre la réunion. Ouvrez le plugin Localhost Dev et vous êtes prêt à partir.

Étape 7 : Publication de notre composant

🧑‍💻 Maintenant, il est temps de publier notre contenu, c'est un processus simple avec Dyte CLI . Pour cela, nous devons d'abord créer notre plugin, puis exécuter la commande dyte plugins publish .

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

Étape 8 : Premiers pas avec notre plateforme de partage de code

Maintenant que nous avons construit le plugin qui nous aidera à collaborer sur le code, nous pouvons commencer à construire la plate-forme sur laquelle utiliser ce plugin.

Commençons par le côté client. Dans le dossier client , nous allons configurer un nouveau projet ReactJS à l'aide de create-react-app et créer notre application React à l'aide de la commande suivante.

 $ npx create-react-app .

Ensuite, installons les dépendances de Dyte et code-editor en exécutant la commande suivante :

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

🎬 Maintenant, démarrons notre serveur de développement avec npm start :

 $ npm start

Étape 9 : Construire la mise en page

Ouvrons le fichier app.js dans le dossier src . Nous allons supprimer le contenu de ce fichier et ajouter l'extrait de code suivant 👇.

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

Ensuite, nous écrirons le composant Layout , nous créerons une mise en page avec notre logo, notre titre et l'interface utilisateur de la réunion.

Nous utiliserons plusieurs bibliothèques, dont DyteMeeting et PrismJS, pour créer un éditeur de code collaboratif et une interface utilisateur de réunion.

 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

Étape 10 : La composante réunion

🧑‍💻 Tout d'abord, nous devons créer quelques fonctions utilitaires dans un fichier 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 }

Ces fonctions communiquent avec notre backend pour créer des réunions et ajouter des participants. Pour la création de réunion, nous passons title en paramètre facultatif.

Et pour ajouter des participants, nous passons le paramètre name (facultatif), le paramètre picture (facultatif) et le paramètre preset_name (obligatoire) avec meetingId .

C'est l'heure de notre volet Réunion. Pour cela, nous utiliserons le kit Dyte UI ✨ qui permet d'intégrer très facilement le partage audio/vidéo en direct dans votre application. Oui, ces 10 à 15 lignes de code font tout le gros du travail 🏋🏼‍♂️.

 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;

Nous sommes prêts avec l'interface utilisateur de notre plate-forme de partage de code maintenant 🎉

Étape 11 : Préparer le backend

🧑‍💻 Dyte fournit une variété d'API puissantes qui améliorent l'expérience des développeurs et répondent à un large éventail d'exigences des développeurs.

Nous pouvons gérer les organisations, les sessions, les réunions, les enregistrements, les webhooks, la diffusion en direct, les analyses et bien plus encore de Dyte.

Pour simplifier le processus, nous utiliserons Express avec Node pour créer un backend qui facilitera l'authentification, la création de réunions et l'ajout de participants. ✨

Pour commencer dans le dossier du projet, suivez les étapes suivantes :

 $ mkdir server && cd server

Nous allons commencer par installer quelques dépendances, cd dans le répertoire 'server' et utiliser la commande suivante.

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

Commençons par créer un fichier .env pour stocker notre clé API dans server/src . Vous pouvez trouver ces clés sur Dyte Dashboard.

 DYTE_ORG_ID=<ID> DYTE_API_KEY=<KEY>

Ajoutons également quelques scripts ✍️ qui nous aideront à faire fonctionner notre application server . Ajoutez les lignes ci-dessous dans votre fichier package.json à l'intérieur scripts de la balise.

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

Créons maintenant nos fichiers et dossiers. Tout notre code vivra dans le dossier server/src . À l'intérieur src , créez un autre dossier utils .

Initialisez un fichier index.js dans src et dyte-api.js dans utils . Ajoutons maintenant notre fichier .env dans src , qui contiendra nos secrets API.

Ouvrez le fichier src/.env et ajoutez-y les lignes suivantes. Remplacez les valeurs d'espace réservé par les secrets d'API du tableau de bord Dyte.

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

Nous pouvons commencer à écrire du code maintenant. Commençons par créer la configuration axios pour accéder aux API Dyte.

Ouvrez utils/dyte-api.js et insérez le code suivant.

Ce code aidera à communiquer avec les API Dyte et l'authentification.

 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;

Ensuite, nous allons écrire les itinéraires.

Notre frontal communiquera sur ces itinéraires pour créer des réunions et ajouter des participants aux réunions.

Ouvrons index.js et ajoutons l'extrait de code suivant.👇

 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}...`) });

Ta-da ! 🎩✨ Nous l'avons fait !

Maintenant, nous allons enfin essayer notre plateforme de partage de code pour collaborer tout en codant avec nos amis et coéquipiers.

Avec notre nouvel éditeur de code brillant et Dyte meeting tous configurés, nous allons enfin essayer notre plateforme !

Pour exécuter l'intégralité de l'application en local :

À l'intérieur du type de client PORT=3001 npm start

À l'intérieur du type de plugin npm start

À l'intérieur du type de serveur PORT=3000 npm run dev

Et voilà, la visioconférence intégrée à l'application et la collaboration avec notre propre "Code Collaboration Plugin".

🧑‍💻 Vous pouvez essayer la plateforme de partage de code ici .

Conclusion

🎉 Woohoo ! Tu es arrivé au bout mon ami ! J'espère que vous avez appris une chose ou deux aujourd'hui et que vous avez passé un bon moment à suivre le chemin.

Ensemble, nous avons créé une plate-forme de programmation et de partage de code en direct, avec des réunions intégrées à l'application, le tout avec juste une pincée de React et une cuillerée de Dyte. Parlez d'une recette pour réussir!

Nous vous soutenons avec nos modèles de plugins et nos puissants SDK, ce qui vous permet de vous lancer et de créer vos propres chefs-d'œuvre collaboratifs, tout comme celui que nous avons concocté ensemble aujourd'hui.

Alors qu'est-ce que tu attends? Rendez-vous sur Dyte.io et laissez libre cours à votre créativité ! Commencez à créer vos propres applications collaboratives et vous créerez peut-être la prochaine grande chose ! 🚀