El código compartido es un aspecto esencial de . la programación Con el auge del trabajo remoto y la colaboración virtual, los desarrolladores necesitan herramientas confiables para compartir código que ofrezcan comunicación en tiempo real, videoconferencias y audioconferencias, y una interfaz de usuario amigable. es uno de esos ejemplos. Codeshare.io Pero hoy, vamos a arremangarnos y construir nuestro propio patio de recreo para compartir código usando ¡Cinturón de seguridad! 🎢 Dyte es una plataforma amigable para desarrolladores que ofrece potentes SDK para crear experiencias en vivo dentro de nuestro producto. En este blog, lo guiaremos a través del proceso de creación de una plataforma de código compartido con Dyte.io y ReactJs. ¡Empecemos! 🏃 Dyte.io. Paso 0: Configuración de la cuenta de Dyte Antes que nada, necesitaríamos configurar una cuenta de Dyte. Para esto, primero visite Dyte.io y luego presione Comenzar a construir. En la página siguiente, inicie sesión con la cuenta de Google o GitHub para obtener su cuenta Dyte gratuita 🎉. Encontrará sus claves de API en la pestaña Claves de API en la barra lateral izquierda. Mantenga seguras sus claves API y no las comparta con nadie. Paso 1: Configuración del entorno Llegando a un punto de control más antes de sumergirnos en la codificación. Usaremos Node.js, un popular entorno de tiempo de ejecución de JavaScript, y create-react-app, una herramienta que genera un proyecto React con una configuración preconfigurada. Para comenzar, crearemos tres carpetas , y . client server plugin Nota: 🧑💻 Si está en Mac, debe desactivar "AirPlay Receiver" en la configuración del sistema, ya que ocupaba el puerto 5000 de forma predeterminada. Solo como referencia, así es como se vería nuestra al final de este blog. final folder structure Continuaremos e instalaremos CLI usando el siguiente comando. Dyte $ npm install -g @dytesdk/cli Continuando con la parte de autorización y seleccionando la organización con los siguientes comandos. $ dyte auth login $ dyte auth org Para obtener más información, visite . Dyte CLI Docs Paso 2: configurar un nuevo complemento personalizado Para comenzar a crear un complemento Dyte personalizado, clonaremos con el siguiente comando. La plantilla de complemento nos permite comenzar más rápido. Dyte Plugin Template $ git clone https://github.com/dyte-in/react-plugin-template.git Esta plantilla usa y nos permite crear nuestros propios complementos en tiempo real que funcionan perfectamente con las reuniones de Dyte. Tiene muchas características interesantes para ayudarnos a resolver problemas complejos en minutos. Ahora, instalaremos las dependencias usando el comando "npm install". @dytesdk/plugin-sdk $ npm install A continuación, agregaremos un par de dependencias ejecutando el siguiente comando. $ npm i @uiw/react-codemirror @codemirror/lang-javascript uuid Aquí, agregamos , que proporciona un editor de código preconstruido con soporte de idiomas. También estamos instalando UUID que nos ayudará a generar UUID con solo una llamada de función. Esto será útil pronto. react-codemirror Ahora que tenemos todo configurado, podemos usar este comando para iniciar y probar nuestra configuración de complemento personalizado. $ npm start Paso 3: probar nuestro nuevo complemento personalizado Para intentar usar nuestro nuevo complemento personalizado, tendremos que visitar http://staging.dyte.io Aquí, se nos pedirá que creemos una nueva reunión. Es súper simple, solo agregue su nombre y el nombre de una reunión y presione . En la página siguiente, le pedirá que se a la reunión. Haz clic en unirte y estás dentro. Create join Busque el botón en la esquina inferior derecha y haga clic en él para revelar todos los complementos existentes. Estamos interesados en un complemento llamado, haga clic en y revelará su complemento dentro de la reunión 🤯. Plugins launch Tenemos todo listo con nosotros. ¡Ahora, podemos comenzar a escribir código real! Comencemos con nuestro componente Editor de código. Paso 4: Creando nuestro Editor de Código Comencemos con la creación de nuestro propio editor de código 🧑💻. Para esto, primero vamos a crear un componente y luego usaremos el paquete que instalamos anteriormente. Primero, cree un nuevo en un archivo llamado dentro de y pegue el siguiente código. 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 })]}/> El componente CodeMirror proporciona un editor de código preconstruido. Viene con varias funciones de resaltado de sintaxis. Paso 5: Manejo de cambios de código Para trabajar en el manejo de los cambios de código en vivo, primero creemos un nuevo con nombre de estado code import { useEffect, useState, useRef } from "react"; const [code, setCode] = useState("function add(a, b) { return a + b;}"); Ahora, crearemos una función que emitirá eventos cada vez que haya un cambio en nuestro código en usando la función . handleCodeChange CodeMirror plugin.emit() Aquí, estamos emitiendo un objeto que tiene dos propiedades. El primero es una generada aleatoriamente y el segundo es nuestro código completo. 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; Paso 6: escuchar eventos de cambio de código Necesitamos escuchar el evento cuando otras personas cambian el código. Para esto, usaremos la función como se muestra a continuación. La función acepta como parámetro y recibe los cambios de código. plugin.on() event name Una cosa más a tener en cuenta aquí es que tenemos que actualizar nuestro código actual solo si lo envían otros usuarios. Para esto necesitamos poner una declaración condicional simple 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; En este componente, estamos creando un editor de código usando CodeMirror. Cualquier cambio en el editor emite un evento para todos los usuarios de la reunión, mediante la llamada a la función . La función toma y como argumentos. CODE_CHANGE plugin.emit() emit eventName data En el siguiente paso, debemos importar el componente CodeEditor al archivo . Su archivo debería verse así. 👇 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 El código para nuestro "Complemento de editor de código colaborativo" 😉 ya está listo. ¿Cómo alguien escribió el primer editor de código sin un editor de código 😂? Bromas aparte, ya estamos listos con nuestro Plugin 🎉. Para pagar, abre y síguelo. Ingrese su nombre y el título de la reunión para ingresar. Haga clic en Unirse a la reunión. Abra el complemento y estará listo para comenzar. staging.dyte.io Localhost Dev Paso 7: Publicando nuestro Componente 🧑💻 Ahora es el momento de publicar nuestro contenido, este es un proceso simple con . Para esto, primero tenemos que construir nuestro complemento y luego ejecutar el comando . Dyte CLI dyte plugins publish $ dyte plugins create $ npm run build $ cp dyte-config.json ./build/dyte-config.json $ cd build $ dyte plugins publish Paso 8: Primeros pasos con nuestra plataforma de código compartido Ahora que hemos creado el complemento que nos ayudará a colaborar en el código, podemos comenzar a crear la plataforma para usar este complemento. Comencemos con el lado del cliente. Dentro de la carpeta , configuraremos un nuevo proyecto usando y crearemos nuestra aplicación de reacción usando el siguiente comando. client ReactJS create-react-app $ npx create-react-app . A continuación, instalemos las dependencias de y ejecutando el siguiente comando: Dyte code-editor $ npm i @dytesdk/react-ui-kit @dytesdk/react-web-core react-simple-code-editor 🎬 Ahora, comencemos nuestro servidor de desarrollo con npm start: $ npm start Paso 9: Construyendo el Diseño Abramos el archivo dentro de la carpeta . Eliminaremos el contenido de este archivo y agregaremos el siguiente fragmento de código 👇. app.js src import Layout from './components/Layout' function App() { return ( <Layout /> ); } export default App; A continuación, escribiremos el componente , crearemos un diseño con nuestro logotipo, título y IU de reunión. Layout Usaremos varias bibliotecas, incluidas y PrismJS, para crear un editor de código colaborativo y una interfaz de usuario para reuniones. 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 Paso 10: El componente de la reunión 🧑💻 Primero, necesitamos crear algunas funciones de utilidad en un archivo 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 } Estas funciones se comunican con nuestro backend para crear reuniones y agregar participantes. Para la creación de reuniones, pasamos como un parámetro opcional. title Y para agregar participantes, pasamos el parámetro (opcional), el parámetro (opcional) y el parámetro (obligatorio) junto con . name picture preset_name meetingId Hora de nuestro componente Reunión. Para esto, usaremos el kit Dyte UI ✨ que hace que sea muy fácil integrar el uso compartido de audio/video en vivo en su aplicación. Sí, estas 10-15 líneas de código hacen todo el trabajo pesado 🏋🏼♂️. 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; Ya estamos listos con la interfaz de usuario de nuestra plataforma de código compartido 🎉 Paso 11: Preparar el backend 🧑💻 Dyte proporciona una variedad de potentes API que mejoran la experiencia del desarrollador y cumplen con una amplia gama de requisitos del desarrollador. Podemos administrar las organizaciones, sesiones, reuniones, grabaciones, webhooks, transmisión en vivo, análisis y mucho más de Dyte. Para simplificar el proceso, usaremos Express con Node para crear un backend que ayudará con la autenticación, la creación de reuniones y la adición de participantes. ✨ Para comenzar en la carpeta del proyecto, siga los siguientes pasos: $ mkdir server && cd server Comenzaremos con la instalación de un par de dependencias, cd en el directorio 'servidor' y usaremos el siguiente comando. $ npm init -y $ npm install express cors axios dotenv $ npm install -g nodemon Primero, creemos un archivo para almacenar nuestra clave API en . Puede encontrar estas claves en Dyte Dashboard. .env server/src DYTE_ORG_ID=<ID> DYTE_API_KEY=<KEY> Agreguemos también algunos scripts ✍️ que nos ayudarán a ejecutar nuestra aplicación . Agregue las siguientes líneas en su archivo dentro de de la etiqueta. server package.json scripts "start": "node dist/index.js", "dev": "nodemon src/index.js" Vamos a crear nuestros archivos y carpetas ahora. Todo nuestro código vivirá dentro de la carpeta . Dentro crea otra carpeta . server/src src utils Inicialice un archivo dentro de y dentro de . Ahora agreguemos nuestro archivo en , que contendrá nuestros secretos API. index.js src dyte-api.js utils .env src Abra el archivo y agréguele las siguientes líneas. Reemplace los valores de marcador de posición con los secretos de API del panel de Dyte. src/.env DYTE_ORG_ID=<YOUR-DYTE-ORG-ID> DYTE_API_KEY=<YOUR-DYTE-API-KEY> Podemos empezar a escribir código ahora. Comencemos con la creación de la configuración para acceder a las API de Dyte. axios Abra e ingrese el siguiente código. utils/dyte-api.js Este código ayudará a comunicarse con las API y la autenticación de Dyte. 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; A continuación, escribiremos las rutas. Nuestro front-end se comunicará en estas rutas para crear reuniones y agregar participantes a las reuniones. Abramos y agreguemos el siguiente fragmento de código.👇 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! 🎩✨ ¡Lo logramos! Ahora, finalmente probaremos nuestra plataforma de código compartido para colaborar mientras programamos con nuestros amigos y compañeros de equipo. Con nuestro nuevo y brillante editor de código y Dyte reuniendo toda la configuración, ¡finalmente probaremos nuestra plataforma! Para ejecutar toda la aplicación localmente: Dentro del tipo de cliente PORT=3001 npm start Tipo de complemento interno npm start Tipo de servidor interno PORT=3000 npm run dev Y ahí lo tiene, videoconferencia en la aplicación y colaboración con nuestro propio "Complemento de colaboración de código". 🧑💻 Puedes probar la plataforma de código compartido . aquí Conclusión 🎉 ¡Guau! ¡Llegaste hasta el final, amigo mío! Espero que hayas aprendido un par de cosas hoy y te hayas divertido siguiendo el camino. Juntos, hemos construido una elegante plataforma de código compartido y programación en vivo, completa con reuniones en la aplicación, todo con solo una pizca de React y una cucharada de Dyte. Hable acerca de una receta para el éxito! Te respaldamos con nuestras plantillas de complementos y potentes SDK, lo que hace que sea muy fácil comenzar y crear tus propias obras maestras colaborativas, como la que cocinamos juntos hoy. ¿Entonces, Qué esperas? ¡Dirígete a y deja fluir tu creatividad! ¡Comience a crear sus propias aplicaciones de colaboración y puede que cree la próxima gran novedad! 🚀 Dyte.io
