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. é um desses exemplos. Codeshare.io Mas hoje vamos arregaçar as mangas e construir nosso próprio playground de compartilhamento de código usando . 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! 🏃 o Dyte.io 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 , e . client server 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 ficaria no final deste blog. final folder structure Iremos em frente e instalaremos CLI usando o comando abaixo. Dyte $ 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 usando o seguinte comando. O modelo de plug-in nos permite começar mais rapidamente. Dyte Plugin Template $ git clone https://github.com/dyte-in/react-plugin-template.git Este modelo usa 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”. @dytesdk/plugin-sdk $ npm install Em seguida, adicionaremos algumas dependências executando o seguinte comando. $ npm i @uiw/react-codemirror @codemirror/lang-javascript uuid Aqui, estamos adicionando , 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. react-codemirror 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 . Na próxima página, ele solicitará que você da reunião. Clique em entrar e você está dentro. Create join Encontre o botão no canto inferior direito e clique nele para revelar todos os plug-ins existentes. Estamos interessados em um plugin chamado, clique em e ele revelará seu plugin dentro da própria reunião 🤯. Plugins launch 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 que instalamos anteriormente. Primeiro, crie um novo em um arquivo chamado dentro de e cole o seguinte 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 })]}/> 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 que emitirá eventos sempre que houver uma alteração em nosso código no usando a função . handleCodeChange CodeMirror plugin.emit() Aqui, estamos emitindo um objeto, que tem duas propriedades. O primeiro é um gerado aleatoriamente e o segundo é todo o nosso código. 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; 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 conforme imagem abaixo. A função aceita como parâmetro e recebe as alterações de código. plugin.on() event name 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 para todos os usuários na reunião, usando a chamada da função . função leva e como argumentos. CODE_CHANGE plugin.emit() emit eventName data Na próxima etapa, precisamos importar o componente CodeEditor para o arquivo . Seu arquivo deve se parecer com isto. 👇 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 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 e acompanhe. Digite seu nome e título da reunião para entrar. Clique em entrar na reunião. Abra o plug-in e pronto. staging.dyte.io Localhost Dev Passo 7: Publicando nosso Componente 🧑💻 Agora é hora de publicar nosso conteúdo, este é um processo simples com . Para isso, primeiro temos que construir nosso plug-in e, em seguida, executar o 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 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 , vamos configurar um novo projeto usando e criar nosso aplicativo react usando o seguinte comando. client ReactJS create-react-app $ npx create-react-app . Em seguida, vamos instalar as dependências do e executando o seguinte comando: Dyte code-editor $ 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 dentro da pasta . Vamos remover o conteúdo deste arquivo e adicionar o seguinte trecho de código 👇. app.js src import Layout from './components/Layout' function App() { return ( <Layout /> ); } export default App; Em seguida, escreveremos o componente , criaremos um layout com nosso logotipo, título e interface do usuário da reunião. Layout Usaremos várias bibliotecas, incluindo e PrismJS, para construir um editor de código colaborativo e interface de usuário de reunião. 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 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 como um parâmetro opcional. title E para adicionar participantes, passamos o parâmetro (opcional), o parâmetro (opcional) e o parâmetro (obrigatório) junto com . name picture preset_name 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 para armazenar nossa chave de API em . Você pode encontrar essas chaves no Dyte Dashboard. .env server/src DYTE_ORG_ID=<ID> DYTE_API_KEY=<KEY> Vamos também adicionar alguns scripts ✍️ que nos ajudarão a executar nosso aplicativo . Adicione as linhas abaixo em seu arquivo dentro dos da tag. server package.json scripts "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 . Dentro crie outra pasta . server/src src utils Inicialize um arquivo dentro de e dentro . Agora vamos adicionar nosso arquivo em , que conterá nossos segredos de API. index.js src dyte-api.js utils .env src Abra o arquivo e adicione as seguintes linhas a ele. Substitua os valores de espaço reservado pelos segredos da API do painel Dyte. src/.env 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 para acessar as APIs do Dyte. axios Abra e coloque o seguinte código. utils/dyte-api.js 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 e adicionar o seguinte trecho 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! 🎩✨ 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 e deixe sua criatividade fluir! Comece a criar seus próprios aplicativos colaborativos e você poderá criar a próxima grande novidade! 🚀 Dyte.io
