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. en est un exemple. Codeshare.io Mais aujourd'hui, nous allons retrousser nos manches et construire notre propre terrain de jeu de partage de code en utilisant 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! 🏃 Dyte.io. É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 , et . client server 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 à la fin de ce blog. final folder structure Nous allons continuer et installer CLI en utilisant la commande ci-dessous. Dyte $ 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 à l'aide de la commande suivante. Le modèle de plugin nous permet de démarrer plus rapidement. Dyte Plugin Template $ git clone https://github.com/dyte-in/react-plugin-template.git Ce modèle utilise 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". @dytesdk/plugin-sdk $ 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 , 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. react-codemirror 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 . Sur la page suivante, il vous demandera de la réunion. Cliquez sur rejoindre et vous êtes dedans. Create join Trouvez le bouton 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 et il révélera votre plugin à l'intérieur même de la réunion 🤯. Plugins launch 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 que nous avons installé précédemment. Tout d'abord, créez un nouveau dans un fichier nommé à l'intérieur et collez le code suivant. CodeMirror React Functional Component CodeEditor.js src/containers <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 qui émettra des événements chaque fois qu'il y aura un changement dans notre code dans en utilisant la fonction . handleCodeChange CodeMirror plugin.emit() Ici, nous émettons un objet, qui a deux propriétés. Le premier est un généré aléatoirement et le second est notre code complet. 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 ( <> <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 comme indiqué ci-dessous. La fonction accepte en tant que paramètre et reçoit les modifications de code. plugin.on() event name 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 à tous les utilisateurs de la réunion, en utilisant l'appel de fonction . La fonction prend et comme arguments. CODE_CHANGE plugin.emit() emit eventName data À l'étape suivante, nous devons importer le composant CodeEditor dans le fichier . Votre fichier devrait ressembler à ceci. 👇 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 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 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 et vous êtes prêt à partir. staging.dyte.io Localhost Dev Étape 7 : Publication de notre composant 🧑💻 Maintenant, il est temps de publier notre contenu, c'est un processus simple avec . Pour cela, nous devons d'abord créer notre plugin, puis exécuter la commande . Dyte CLI 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 , nous allons configurer un nouveau projet à l'aide de et créer notre application React à l'aide de la commande suivante. client ReactJS create-react-app $ npx create-react-app . Ensuite, installons les dépendances de et en exécutant la commande suivante : Dyte code-editor $ 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 dans le dossier . Nous allons supprimer le contenu de ce fichier et ajouter l'extrait de code suivant 👇. app.js src import Layout from './components/Layout' function App() { return ( <Layout /> ); } export default App; Ensuite, nous écrirons le composant , nous créerons une mise en page avec notre logo, notre titre et l'interface utilisateur de la réunion. Layout Nous utiliserons plusieurs bibliothèques, dont et PrismJS, pour créer un éditeur de code collaboratif et une interface utilisateur de réunion. DyteMeeting 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 en paramètre facultatif. title Et pour ajouter des participants, nous passons le paramètre (facultatif), le paramètre (facultatif) et le paramètre (obligatoire) avec . name picture preset_name 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 pour stocker notre clé API dans . Vous pouvez trouver ces clés sur Dyte Dashboard. .env server/src DYTE_ORG_ID=<ID> DYTE_API_KEY=<KEY> Ajoutons également quelques scripts ✍️ qui nous aideront à faire fonctionner notre application . Ajoutez les lignes ci-dessous dans votre fichier à l'intérieur de la balise. server package.json scripts "start": "node dist/index.js", "dev": "nodemon src/index.js" Créons maintenant nos fichiers et dossiers. Tout notre code vivra dans le dossier . À l'intérieur , créez un autre dossier . server/src src utils Initialisez un fichier dans et dans . Ajoutons maintenant notre fichier dans , qui contiendra nos secrets API. index.js src dyte-api.js utils .env src Ouvrez le fichier et ajoutez-y les lignes suivantes. Remplacez les valeurs d'espace réservé par les secrets d'API du tableau de bord Dyte. src/.env 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 pour accéder aux API Dyte. axios Ouvrez et insérez le code suivant. utils/dyte-api.js 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 et ajoutons l'extrait de code suivant.👇 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}...`) }); 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 et laissez libre cours à votre créativité ! Commencez à créer vos propres applications collaboratives et vous créerez peut-être la prochaine grande chose ! 🚀 Dyte.io
