Como construir uma plataforma de compartilhamento de código ao vivo com Dyte e ReactJs

O compartilhamento de código é um aspecto essencial da programação .

Com o aumento do trabalho remoto e da colaboração virtual, os desenvolvedores precisam de ferramentas confiáveis para compartilhamento de código que ofereçam comunicação em tempo real, conferência de áudio e vídeo e uma interface de usuário amigável. Codeshare.io é um desses exemplos.

Mas hoje vamos arregaçar as mangas e construir nosso próprio playground de compartilhamento de código usando o Dyte.io . Preparar-se! 🎢 Dyte é uma plataforma amigável ao desenvolvedor que oferece SDKs poderosos para criar experiências ao vivo em nosso produto. Neste blog, vamos orientá-lo no processo de construção de uma plataforma de compartilhamento de código com Dyte.io e ReactJs. Vamos começar! 🏃

Passo 0: Configurando a conta Dyte

Antes de qualquer coisa, precisaríamos criar uma conta Dyte. Para isso, primeiro visite Dyte.io e depois clique em Start Building. Na próxima página, faça login com a conta do Google ou GitHub para obter sua conta Dyte gratuita 🎉. Você encontrará suas chaves de API na guia Chaves de API na barra lateral esquerda. Mantenha suas chaves de API seguras e não as compartilhe com ninguém.

Passo 1: Configurando o ambiente

Acertando mais um ponto de verificação antes de mergulharmos na codificação.

Estaremos usando Node.js, um popular ambiente de tempo de execução JavaScript, e create-react-app, uma ferramenta que gera um projeto React com uma configuração pré-configurada.

Para começar, criaremos três pastas client , server e plugin .

Nota: 🧑‍💻 Se você estiver no Mac, desative o “AirPlay Receiver” nas configurações do sistema, pois ocupa a porta 5000 por padrão.

Apenas para referência, é assim que nossa final folder structure ficaria no final deste blog.

Iremos em frente e instalaremos Dyte CLI usando o comando abaixo.

 $ npm install -g @dytesdk/cli

Prosseguindo com a parte de autorização e selecionando a organização com os seguintes comandos.

 $ dyte auth login $ dyte auth org

Para obter mais informações, visite Dyte CLI Docs .

Etapa 2: Configurando um novo plug-in personalizado

Para começar a construir um plug-in Dyte personalizado, vamos clonar Dyte Plugin Template usando o seguinte comando. O modelo de plug-in nos permite começar mais rapidamente.

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

Este modelo usa @dytesdk/plugin-sdk e nos permite criar nossos próprios plugins em tempo real que funcionam perfeitamente com as reuniões do Dyte. Possui muitos recursos interessantes para nos ajudar a resolver problemas complexos em minutos. Agora, vamos instalar as dependências usando o comando “npm install”.

 $ npm install

Em seguida, adicionaremos algumas dependências executando o seguinte comando.

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

Aqui, estamos adicionando react-codemirror , que fornece um editor de código pré-construído com suporte a idiomas. Também estamos instalando o UUID que nos ajudará a gerar UUIDs com apenas uma chamada de função. Isso será útil em breve.

Agora que temos tudo configurado, podemos usar este comando para iniciar e testar nosso Custom Plugin Setup.

 $ npm start

Passo 3: Experimentando nosso novo Plug-in Personalizado

Para tentar usar nosso novo plug-in personalizado, teremos que visitar http://staging.dyte.io

Aqui, seremos solicitados a criar uma nova reunião. É super simples, basta adicionar seu nome e o nome da reunião e clicar em Create . Na próxima página, ele solicitará que você join da reunião. Clique em entrar e você está dentro.

Encontre o botão Plugins no canto inferior direito e clique nele para revelar todos os plug-ins existentes. Estamos interessados em um plugin chamado, clique em launch e ele revelará seu plugin dentro da própria reunião 🤯.

Temos tudo pronto conosco. Agora, podemos começar a escrever algum código real!

Vamos começar com nosso componente Code Editor.

Passo 4: Criando nosso Editor de Código

Vamos começar criando nosso próprio editor de código 🧑‍💻.

Para isso vamos primeiro criar um componente e depois usar o pacote CodeMirror que instalamos anteriormente. Primeiro, crie um novo React Functional Component em um arquivo chamado CodeEditor.js dentro de src/containers e cole o seguinte código.

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

O componente CodeMirror fornece um editor de código pré-criado. Ele vem com vários recursos de realce de sintaxe.

Etapa 5: lidar com alterações de código

Para lidar com as alterações de código ao vivo, vamos primeiro criar um novo estado chamado code

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

Agora, vamos criar uma função handleCodeChange que emitirá eventos sempre que houver uma alteração em nosso código no CodeMirror usando a função plugin.emit() .

Aqui, estamos emitindo um objeto, que tem duas propriedades. O primeiro é um user id gerado aleatoriamente e o segundo é todo o nosso código.

 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;

Etapa 6: ouvindo eventos de alteração de código

Precisamos ouvir o evento quando outras pessoas alteram o código. Para isso, utilizaremos a função plugin.on() conforme imagem abaixo. A função aceita event name como parâmetro e recebe as alterações de código.

Mais uma coisa a observar aqui é que temos que atualizar nosso código atual apenas se ele for enviado por outros usuários. Para isso, precisamos colocar uma instrução condicional simples 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;

Neste componente, estamos criando um Editor de Código usando o CodeMirror. Qualquer alteração no editor emite um evento CODE_CHANGE para todos os usuários na reunião, usando a chamada da função plugin.emit() . função emit leva eventName e data como argumentos.

Na próxima etapa, precisamos importar o componente CodeEditor para o arquivo Main.tsx . Seu arquivo deve se parecer com isto. 👇

 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

O código do nosso “plugin de editor de código colaborativo” 😉 está pronto. Como alguém escreveu o primeiro editor de código sem um editor de código 😂? Brincadeiras a parte, estamos prontos com nosso Plugin 🎉.

Para finalizar a compra, abra staging.dyte.io e acompanhe. Digite seu nome e título da reunião para entrar. Clique em entrar na reunião. Abra o plug-in Localhost Dev e pronto.

Passo 7: Publicando nosso Componente

🧑‍💻 Agora é hora de publicar nosso conteúdo, este é um processo simples com Dyte CLI . Para isso, primeiro temos que construir nosso plug-in e, em seguida, executar o comando dyte plugins publish .

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

Etapa 8: Introdução à nossa plataforma de compartilhamento de código

Agora que construímos o plug-in que nos ajudará a colaborar no código, podemos começar a criar a plataforma para usar esse plug-in.

Vamos começar com o lado do cliente. Dentro da pasta client , vamos configurar um novo projeto ReactJS usando create-react-app e criar nosso aplicativo react usando o seguinte comando.

 $ npx create-react-app .

Em seguida, vamos instalar as dependências do Dyte e code-editor executando o seguinte comando:

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

🎬 Agora, vamos iniciar nosso servidor de desenvolvimento com npm start:

 $ npm start

Passo 9: Construindo o Layout

Vamos abrir o arquivo app.js dentro da pasta src . Vamos remover o conteúdo deste arquivo e adicionar o seguinte trecho de código 👇.

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

Em seguida, escreveremos o componente Layout , criaremos um layout com nosso logotipo, título e interface do usuário da reunião.

Usaremos várias bibliotecas, incluindo DyteMeeting e PrismJS, para construir um editor de código colaborativo e interface de usuário de reunião.

 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

Passo 10: O Componente da Reunião

🧑‍💻 Primeiro, precisamos criar algumas funções utilitárias em um arquivo 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 }

Essas funções conversam com nosso back-end para criar reuniões e adicionar participantes. Para a criação da reunião, passamos title como um parâmetro opcional.

E para adicionar participantes, passamos o parâmetro name (opcional), o parâmetro picture (opcional) e o parâmetro preset_name (obrigatório) junto com meetingId .

Hora do nosso componente Meeting. Para isso, usaremos o kit Dyte UI ✨ que torna super fácil integrar o compartilhamento de áudio/vídeo ao vivo em seu aplicativo. Sim, essas 10 a 15 linhas de código fazem todo o trabalho 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;

Estamos prontos com a interface do usuário da nossa plataforma de compartilhamento de código agora 🎉

Etapa 11: preparando o back-end

🧑‍💻 A Dyte fornece uma variedade de APIs poderosas que aprimoram a experiência do desenvolvedor e atendem a uma ampla gama de requisitos do desenvolvedor.

Podemos gerenciar as organizações, sessões, reuniões, gravações, webhooks, transmissões ao vivo, análises e muito mais da Dyte.

Para simplificar o processo, usaremos o Express with Node para criar um back-end que ajudará na autenticação, criação de reuniões e adição de participantes. ✨

Para começar na pasta do projeto, siga os seguintes passos:

 $ mkdir server && cd server

Começaremos instalando algumas dependências, cd no diretório 'servidor' e usaremos o seguinte comando.

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

Primeiro, vamos criar um arquivo .env para armazenar nossa chave de API em server/src . Você pode encontrar essas chaves no Dyte Dashboard.

 DYTE_ORG_ID=<ID> DYTE_API_KEY=<KEY>

Vamos também adicionar alguns scripts ✍️ que nos ajudarão a executar nosso aplicativo server . Adicione as linhas abaixo em seu arquivo package.json dentro dos scripts da tag.

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

Vamos criar nossos arquivos e pastas agora. Todo o nosso código ficará dentro da pasta server/src . Dentro src crie outra pasta utils .

Inicialize um arquivo index.js dentro de src e dyte-api.js dentro utils . Agora vamos adicionar nosso arquivo .env em src , que conterá nossos segredos de API.

Abra o arquivo src/.env e adicione as seguintes linhas a ele. Substitua os valores de espaço reservado pelos segredos da API do painel Dyte.

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

Podemos começar a escrever código agora. Vamos começar criando a configuração axios para acessar as APIs do Dyte.

Abra utils/dyte-api.js e coloque o seguinte código.

Este código ajudará na comunicação com as APIs e autenticação do 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;

Em seguida, escreveremos as rotas.

Nosso front-end se comunicará nessas rotas para criar reuniões e adicionar participantes às reuniões.

Vamos abrir index.js e adicionar o seguinte trecho de código.👇

 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! 🎩✨ Conseguimos!

Agora, vamos finalmente experimentar nossa plataforma de compartilhamento de código para colaborar enquanto codificamos com nossos amigos e colegas de equipe.

Com nosso novíssimo editor de código e Dyte atendendo a todas as configurações, vamos finalmente experimentar nossa plataforma!

Para executar todo o aplicativo localmente:

Dentro do tipo de cliente PORT=3001 npm start

Tipo de plug-in interno npm start

Dentro do tipo de servidor PORT=3000 npm run dev

E aí está, videoconferência no aplicativo e colaboração com nosso próprio “plug-in de colaboração de código”.

🧑‍💻 Você pode experimentar a plataforma de compartilhamento de código aqui .

Conclusão

🎉 Uau! Você chegou ao fim, meu amigo! Espero que você tenha aprendido uma ou duas coisas hoje e tenha se divertido acompanhando ao longo do caminho.

Juntos, construímos uma plataforma de programação e compartilhamento de código ao vivo elegante, completa com reuniões no aplicativo, tudo com apenas uma pitada de React e um montão de Dyte. Fale sobre uma receita para o sucesso!

Nós protegemos você com nossos modelos de plug-in e SDKs poderosos, facilitando a criação de suas próprias obras-primas colaborativas, como a que criamos juntos hoje.

Então, o que você está esperando? Acesse Dyte.io e deixe sua criatividade fluir! Comece a criar seus próprios aplicativos colaborativos e você poderá criar a próxima grande novidade! 🚀