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. là một ví dụ như vậy. Codeshare.io 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 . 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! 🏃 Dyte.io 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 , và . client server 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 của chúng tôi ở cuối blog này. final folder structure Chúng tôi sẽ tiếp tục và cài đặt CLI bằng lệnh bên dưới. Dyte $ 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 bằng lệnh sau. Mẫu plugin cho phép chúng tôi bắt đầu nhanh hơn. Dyte Plugin Template $ git clone https://github.com/dyte-in/react-plugin-template.git Mẫu này sử dụng 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”. @dytesdk/plugin-sdk $ 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 , 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. react-codemirror 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 . Trên trang tiếp theo, nó sẽ yêu cầu bạn cuộc họp. Nhấp vào tham gia và bạn đang ở trong. Create join Tìm nút ở 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 và nó sẽ hiển thị plugin của bạn bên trong cuộc họp 🤯. Plugins launch 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 mà chúng ta đã cài đặt trước đó. Đầu tiên, tạo một mới trong một tệp có tên bên trong và dán đoạn mã sau. CodeMirror React Functional Component CodeEditor.js src/containers 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 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 bằng cách sử dụng hàm . handleCodeChange CodeMirror 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à được tạo ngẫu nhiên và cái thứ hai là toàn bộ mã của chúng tôi. 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 ( <> ); } 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 chức năng như hình dưới đây. Hàm chấp nhận làm tham số và nhận các thay đổi mã. plugin.on() event name 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 ( <> ); } 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 cho tất cả người dùng trong cuộc họp, sử dụng lệnh gọi hàm . hàm lấy và làm đối số. CODE_CHANGE plugin.emit() emit eventName data Trong bước tiếp theo, chúng ta cần nhập thành phần CodeEditor vào tệp . Tệp của bạn sẽ trông giống như thế này. 👇 Main.tsx import { useDytePlugin } from '../context' import CodeEditor from './CodeEditor'; const Main = () => { const plugin = useDytePlugin(); return ( ) } 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ở 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 và bạn đã sẵn sàng để sử dụng. staging.dyte.io Localhost Dev 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 . Đố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 CLI 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 , chúng tôi sẽ thiết lập một dự án mới bằng cách sử dụng và tạo ứng dụng phản ứng của chúng tôi bằng lệnh sau. client ReactJS create-react-app $ npx create-react-app . Tiếp theo, chúng ta hãy cài đặt các phụ thuộc của và bằng cách chạy lệnh sau: Dyte code-editor $ 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 bên trong thư mục . Chúng tôi sẽ xóa nội dung của tệp này và thêm đoạn mã sau 👇. app.js src import Layout from './components/Layout' function App() { return ( ); } export default App; Tiếp theo, chúng tôi sẽ viết thành phần , 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. Layout Chúng tôi sẽ sử dụng một số thư viện, bao gồm 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. DyteMeeting import Meet from "./Meeting" const Layout = () => { return ( <> Collaborative Code Editor ) } 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 dưới dạng tham số tùy chọn. title Và để thêm người tham gia, chúng tôi chuyển tham số (tùy chọn), tham số (tùy chọn) và tham số (bắt buộc) cùng với . name picture preset_name 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: " ", }, ], }, }, }); setUserToken(authToken); } }; useEffect(() => { if (meetingId && !userToken) joinMeetingId(); }, [meetingId]); useEffect(() => { if (userToken) { provideDyteDesignSystem(meetingEl.current, { theme: "dark", }); } }, [userToken]); return ( <> {userToken && meetingId ? ( ) : ( Loading... )} ); }; 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 để lưu khóa API của chúng tôi trong . Bạn có thể tìm thấy các phím này trên Bảng điều khiển Dyte. .env server/src DYTE_ORG_ID= DYTE_API_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 của mình. Thêm các dòng dưới đây vào tệp của bạn bên trong thẻ. server package.json scripts "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 . Bên trong tạo một thư mục khác . server/src src utils Khởi tạo tệp bên trong và bên trong . Bây giờ, hãy thêm tệp của chúng tôi vào , tệp này sẽ giữ bí mật API của chúng tôi. index.js src dyte-api.js utils .env src Mở tệp 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. src/.env DYTE_ORG_ID= 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 để truy cập API Dyte. axios Mở và nhập đoạn mã sau. utils/dyte-api.js 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ở và thêm đoạn mã sau.👇 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! 🎩✨ 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 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! 🚀 Dyte.io