Cách xây dựng nền tảng chia sẻ mã trực tiếp với Dyte và ReactJs

Chia sẻ mã là một khía cạnh thiết yếu của lập trình .

Với sự gia tăng của công việc từ xa và cộng tác ảo, các nhà phát triển cần các công cụ đáng tin cậy để chia sẻ mã cung cấp khả năng liên lạc theo thời gian thực, hội thảo video và âm thanh cũng như giao diện người dùng thân thiện. Codeshare.io là một ví dụ như vậy.

Nhưng hôm nay, chúng ta sẽ xắn tay áo và xây dựng sân chơi chia sẻ mã của riêng mình bằng cách sử dụng Dyte.io . Thắt dây an toàn! 🎢 Dyte là một nền tảng thân thiện với nhà phát triển cung cấp SDK mạnh mẽ để xây dựng trải nghiệm trực tiếp trong sản phẩm của chúng tôi. Trong blog này, chúng tôi sẽ hướng dẫn bạn quy trình xây dựng nền tảng chia sẻ mã với Dyte.io và ReactJs. Hãy bắt đầu! 🏃

Bước 0: Thiết lập tài khoản Dyte

Trước bất cứ điều gì, chúng tôi sẽ cần thiết lập tài khoản Dyte. Đối với điều này, trước tiên hãy truy cập Dyte.io và sau đó nhấn Bắt đầu xây dựng. Trên trang tiếp theo, Đăng nhập bằng tài khoản Google hoặc GitHub để nhận tài khoản Dyte miễn phí của bạn 🎉. Bạn sẽ tìm thấy các khóa API của mình trong tab Khóa API trên thanh bên trái. Giữ khóa API của bạn an toàn và không chia sẻ chúng với bất kỳ ai.

Bước 1: Thiết lập môi trường

Đánh một điểm kiểm tra nữa trước khi chúng tôi đi sâu vào viết mã.

Chúng tôi sẽ sử dụng Node.js, môi trường thời gian chạy JavaScript phổ biến và ứng dụng tạo phản ứng, một công cụ tạo dự án React với thiết lập được định cấu hình trước.

Để bắt đầu, chúng ta sẽ tạo ba thư mục client , server và plugin .

Lưu ý: 🧑‍💻 Nếu bạn đang dùng Mac, bạn nên tắt “Bộ thu AirPlay” trong Cài đặt hệ thống vì nó đã chiếm Cổng 5000 theo mặc định.

Chỉ để tham khảo, đây là cách final folder structure của chúng tôi ở cuối blog này.

Chúng tôi sẽ tiếp tục và cài đặt Dyte CLI bằng lệnh bên dưới.

 $ npm install -g @dytesdk/cli

Tiếp tục với phần ủy quyền và chọn tổ chức bằng các lệnh sau.

 $ dyte auth login $ dyte auth org

Để biết thêm thông tin, hãy truy cập Tài liệu Dyte CLI .

Bước 2: Thiết lập Plugin tùy chỉnh mới

Để bắt đầu xây dựng Plugin Dyte tùy chỉnh, chúng tôi sẽ sao chép Dyte Plugin Template bằng lệnh sau. Mẫu plugin cho phép chúng tôi bắt đầu nhanh hơn.

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

Mẫu này sử dụng @dytesdk/plugin-sdk và cho phép chúng tôi tạo các plugin thời gian thực của riêng mình hoạt động trơn tru với các cuộc họp của Dyte. Nó có nhiều tính năng thú vị để giúp chúng tôi giải quyết các vấn đề phức tạp trong vài phút. Bây giờ, chúng ta sẽ cài đặt các phụ thuộc bằng cách sử dụng lệnh “npm install”.

 $ npm install

Tiếp theo, chúng tôi sẽ thêm một vài phụ thuộc bằng cách chạy lệnh sau.

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

Ở đây, chúng tôi đang thêm react-codemirror , cung cấp Trình chỉnh sửa mã dựng sẵn có hỗ trợ ngôn ngữ. Chúng tôi cũng đang cài đặt UUID sẽ giúp chúng tôi tạo UUID chỉ bằng một lệnh gọi hàm. Điều này sẽ sớm có ích.

Bây giờ chúng tôi đã thiết lập xong mọi thứ, chúng tôi có thể sử dụng lệnh này để bắt đầu và kiểm tra Thiết lập plugin tùy chỉnh của mình.

 $ npm start

Bước 3: Dùng thử Plugin tùy chỉnh mới của chúng tôi

Để thử sử dụng plugin tùy chỉnh mới của chúng tôi, chúng tôi sẽ phải truy cập http://staging.dyte.io

Tại đây, chúng tôi sẽ được nhắc tạo một cuộc họp mới. Nó cực kỳ đơn giản, chỉ cần thêm tên của bạn và tên cuộc họp và nhấn Create . Trên trang tiếp theo, nó sẽ yêu cầu bạn join cuộc họp. Nhấp vào tham gia và bạn đang ở trong.

Tìm nút Plugins ở góc dưới cùng bên phải và nhấp vào nút đó để hiển thị tất cả các plugin hiện có. Chúng tôi quan tâm đến một plugin có tên, hãy nhấp vào launch và nó sẽ hiển thị plugin của bạn bên trong cuộc họp 🤯.

Chúng tôi có mọi thứ đã sẵn sàng với chúng tôi. Bây giờ, chúng ta có thể bắt đầu viết một số mã thực tế!

Hãy bắt đầu với thành phần Code Editor của chúng ta.

Bước 4: Tạo Trình chỉnh sửa mã của chúng tôi

Hãy bắt đầu với việc tạo trình chỉnh sửa mã của riêng chúng ta 🧑‍💻.

Đối với điều này, trước tiên chúng ta sẽ tạo một thành phần và sau đó sử dụng gói CodeMirror mà chúng ta đã cài đặt trước đó. Đầu tiên, tạo một React Functional Component mới trong một tệp có tên CodeEditor.js bên trong src/containers và dán đoạn mã sau.

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

Thành phần CodeMirror cung cấp Trình chỉnh sửa mã dựng sẵn. Nó đi kèm với các tính năng đánh dấu cú pháp khác nhau.

Bước 5: Xử lý thay đổi mã

Để xử lý các thay đổi mã trực tiếp, trước tiên hãy tạo một trạng thái mới có tên code

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

Bây giờ, chúng ta sẽ tạo một hàm handleCodeChange sẽ phát ra các sự kiện bất cứ khi nào có thay đổi trong mã của chúng ta trong CodeMirror bằng cách sử dụng hàm plugin.emit() .

Ở đây, chúng tôi đang phát ra một đối tượng, có hai thuộc tính. Cái đầu tiên là user id được tạo ngẫu nhiên và cái thứ hai là toàn bộ mã của chúng tôi.

 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;

Bước 6: Lắng nghe sự kiện thay đổi mã

Chúng ta cần lắng nghe sự kiện khi người khác thay đổi mã. Đối với điều này, chúng tôi sẽ sử dụng plugin.on() chức năng như hình dưới đây. Hàm chấp nhận event name làm tham số và nhận các thay đổi mã.

Một điều nữa cần lưu ý ở đây là chúng tôi chỉ phải cập nhật mã hiện tại nếu nó được gửi bởi người dùng khác. Đối với điều này, chúng ta cần đặt một câu lệnh điều kiện đơn giản 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;

Trong thành phần này, chúng tôi đang tạo Trình chỉnh sửa mã bằng CodeMirror. Mọi thay đổi đối với trình chỉnh sửa đều phát ra sự kiện CODE_CHANGE cho tất cả người dùng trong cuộc họp, sử dụng lệnh gọi hàm plugin.emit() . hàm emit lấy eventName và data làm đối số.

Trong bước tiếp theo, chúng ta cần nhập thành phần CodeEditor vào tệp Main.tsx . Tệp của bạn sẽ trông giống như thế này. 👇

 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

Mã cho “Plugin Trình chỉnh sửa mã cộng tác” 😉 của chúng tôi hiện đã sẵn sàng. Làm thế nào mà ai đó viết trình chỉnh sửa mã đầu tiên mà không có trình chỉnh sửa mã 😂? Đùa sang một bên, chúng tôi đã sẵn sàng với Plugin của mình 🎉.

Để thanh toán, hãy mở staging.dyte.io và làm theo. Nhập tên và tiêu đề cuộc họp của bạn để tham gia. Nhấn tham gia cuộc họp. Mở plugin Localhost Dev và bạn đã sẵn sàng để sử dụng.

Bước 7: Xuất bản Thành phần của chúng tôi

🧑‍💻 Bây giờ, đã đến lúc xuất bản nội dung của chúng tôi, đây là một quy trình đơn giản với Dyte CLI . Đối với điều này, trước tiên chúng ta phải xây dựng plugin của mình, sau đó chạy lệnh dyte plugins publish .

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

Bước 8: Bắt đầu với Nền tảng chia sẻ mã của chúng tôi

Bây giờ chúng ta đã xây dựng plugin sẽ giúp chúng ta cộng tác viết mã, chúng ta có thể bắt đầu xây dựng nền tảng để sử dụng plugin này.

Hãy bắt đầu với phía khách hàng. Bên trong thư mục client , chúng tôi sẽ thiết lập một dự án ReactJS mới bằng cách sử dụng create-react-app và tạo ứng dụng phản ứng của chúng tôi bằng lệnh sau.

 $ npx create-react-app .

Tiếp theo, chúng ta hãy cài đặt các phụ thuộc của Dyte và code-editor bằng cách chạy lệnh sau:

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

🎬 Bây giờ, hãy bắt đầu máy chủ phát triển của chúng ta với npm start:

 $ npm start

Bước 9: Xây dựng bố cục

Hãy để chúng tôi mở tệp app.js bên trong thư mục src . Chúng tôi sẽ xóa nội dung của tệp này và thêm đoạn mã sau 👇.

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

Tiếp theo, chúng tôi sẽ viết thành phần Layout , chúng tôi sẽ tạo bố cục với logo, tiêu đề và giao diện người dùng cuộc họp của chúng tôi.

Chúng tôi sẽ sử dụng một số thư viện, bao gồm DyteMeeting và PrismJS, để xây dựng trình chỉnh sửa mã hợp tác và giao diện người dùng cuộc họp.

 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

Bước 10: Thành phần cuộc họp

🧑‍💻 Trước tiên, chúng ta cần tạo một vài hàm tiện ích trong tệp 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 }

Các chức năng này nói chuyện với chương trình phụ trợ của chúng tôi để tạo cuộc họp và thêm người tham gia. Để tạo cuộc họp, chúng tôi chuyển title dưới dạng tham số tùy chọn.

Và để thêm người tham gia, chúng tôi chuyển tham số name (tùy chọn), tham số picture (tùy chọn) và tham số preset_name (bắt buộc) cùng với meetingId .

Thời gian cho thành phần Cuộc họp của chúng tôi. Đối với điều này, chúng tôi sẽ sử dụng bộ giao diện người dùng Dyte ✨ giúp dễ dàng tích hợp tính năng chia sẻ Âm thanh/Video trực tiếp trong ứng dụng của bạn. Vâng, 10-15 dòng mã này thực hiện tất cả các công việc nặng nhọc 🏋🏼‍♂️.

 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;

Chúng tôi đã sẵn sàng với giao diện người dùng của Nền tảng chia sẻ mã của mình ngay bây giờ 🎉

Bước 11: Sẵn sàng cho chương trình phụ trợ

🧑‍💻 Dyte cung cấp nhiều API mạnh mẽ giúp nâng cao trải nghiệm của nhà phát triển và đáp ứng nhiều yêu cầu của nhà phát triển.

Chúng tôi có thể quản lý các tổ chức, phiên, cuộc họp, bản ghi, webhook, phát trực tiếp, phân tích, v.v. của Dyte.

Để đơn giản hóa quy trình, chúng tôi sẽ sử dụng Express with Node để tạo chương trình phụ trợ giúp xác thực, tạo cuộc họp và thêm người tham gia. ✨

Để bắt đầu trong thư mục dự án, hãy làm theo các bước sau:

 $ mkdir server && cd server

Chúng tôi sẽ bắt đầu với việc cài đặt một số phụ thuộc, cd vào thư mục 'máy chủ' và sử dụng lệnh sau.

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

Trước tiên, hãy tạo một tệp .env để lưu khóa API của chúng tôi trong server/src . Bạn có thể tìm thấy các phím này trên Bảng điều khiển Dyte.

 DYTE_ORG_ID=<ID> DYTE_API_KEY=<KEY>

Ngoài ra, hãy thêm một vài tập lệnh ✍️ sẽ giúp chúng tôi chạy ứng dụng server của mình. Thêm các dòng dưới đây vào tệp package.json của bạn bên trong scripts thẻ.

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

Hãy tạo các tệp và thư mục của chúng tôi ngay bây giờ. Tất cả mã của chúng tôi sẽ nằm trong thư mục server/src . Bên trong src tạo một thư mục khác utils .

Khởi tạo tệp index.js bên trong src và dyte-api.js bên trong utils . Bây giờ, hãy thêm tệp .env của chúng tôi vào src , tệp này sẽ giữ bí mật API của chúng tôi.

Mở tệp src/.env và thêm các dòng sau vào tệp. Thay thế các giá trị giữ chỗ bằng các bí mật API từ Bảng điều khiển Dyte.

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

Chúng ta có thể bắt đầu viết mã ngay bây giờ. Hãy bắt đầu với việc tạo cấu hình axios để truy cập API Dyte.

Mở utils/dyte-api.js và nhập đoạn mã sau.

Mã này sẽ giúp giao tiếp với API Dyte và xác thực.

 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;

Tiếp theo, chúng tôi sẽ viết các tuyến đường.

Giao diện người dùng của chúng tôi sẽ giao tiếp trên các tuyến đường này để tạo cuộc họp và thêm người tham gia vào cuộc họp.

Hãy mở index.js và thêm đoạn mã sau.👇

 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! 🎩✨ Chúng tôi đã làm được!

Bây giờ, cuối cùng chúng ta sẽ dùng thử nền tảng chia sẻ mã của mình để cộng tác trong khi viết mã với bạn bè và đồng đội của mình.

Với trình chỉnh sửa Mã mới sáng bóng của chúng tôi và Dyte đáp ứng tất cả các thiết lập, cuối cùng chúng tôi sẽ dùng thử nền tảng của chúng tôi!

Để chạy toàn bộ ứng dụng cục bộ:

Loại máy khách bên trong PORT=3001 npm start

Loại plugin bên trong npm start

Bên trong máy chủ gõ PORT=3000 npm run dev

Và bạn đã có nó, hội nghị truyền hình trong ứng dụng và cộng tác với “Plugin cộng tác mã” của riêng chúng tôi.

🧑‍💻 Bạn có thể dùng thử nền tảng chia sẻ mã đây .

Phần kết luận

🎉 Tuyệt vời! Bạn đã đi đến cuối cùng, bạn của tôi! Tôi hy vọng bạn đã học được một hoặc hai điều trong ngày hôm nay và đã có một khoảng thời gian vui vẻ khi theo dõi trên đường đi.

Cùng nhau, chúng tôi đã xây dựng một nền tảng chia sẻ mã và lập trình theo cặp trực tiếp hấp dẫn, hoàn chỉnh với các cuộc họp trong ứng dụng, tất cả chỉ với một chút React và một ít Dyte. Nói về một công thức để thành công!

Chúng tôi hỗ trợ bạn với các mẫu plugin và SDK mạnh mẽ, giúp bạn dễ dàng tham gia ngay và xây dựng những kiệt tác cộng tác của riêng mình, giống như kiệt tác mà chúng ta đã cùng nhau tạo ra ngày hôm nay.

Bạn đang chờ đợi điều gì? Truy cập Dyte.io và thỏa sức sáng tạo của bạn! Bắt đầu xây dựng các ứng dụng cộng tác của riêng bạn và bạn có thể tạo ra điều lớn lao tiếp theo! 🚀