डायट और रिएक्टज के साथ लाइव कोड शेयरिंग प्लेटफॉर्म कैसे बनाएं

कोड शेयरिंग का एक अनिवार्य पहलू है। प्रोग्रामिंग दूरस्थ कार्य और आभासी सहयोग के उदय के साथ, डेवलपर्स को कोड साझा करने के लिए विश्वसनीय उपकरण की आवश्यकता होती है जो वास्तविक समय संचार, वीडियो और ऑडियो कॉन्फ्रेंसिंग और एक अनुकूल उपयोगकर्ता इंटरफ़ेस प्रदान करते हैं। ऐसा ही एक उदाहरण है। Codeshare.io लेकिन आज, हम अपनी आस्तीनें चढ़ाने जा रहे हैं और का उपयोग करके अपना खुद का कोड-साझाकरण खेल का मैदान बना रहे हैं। सीट बेल्ट लगा लो! 🎢 डाइट एक डेवलपर-अनुकूल प्लेटफॉर्म है जो हमारे उत्पाद के भीतर लाइव अनुभव बनाने के लिए शक्तिशाली एसडीके प्रदान करता है। इस ब्लॉग में, हम आपको Dyte.io और ReactJs के साथ एक कोड-शेयरिंग प्लेटफॉर्म बनाने की प्रक्रिया के बारे में बताएंगे। चलो शुरू करो! 🏃 Dyte.io चरण 0: डाइट खाते की स्थापना कुछ भी करने से पहले, हमें एक डाइट खाता स्थापित करना होगा। इसके लिए पहले Dyte.io पर जाएं और फिर स्टार्ट बिल्डिंग पर क्लिक करें। अगले पेज पर, अपना मुफ्त डाइट खाता 🎉 प्राप्त करने के लिए Google या GitHub खाते से साइन इन करें। आपको अपनी API कुंजियाँ बाईं साइडबार पर API कुंजियाँ टैब के अंतर्गत मिलेंगी। अपनी एपीआई कुंजियों को सुरक्षित रखें और उन्हें किसी के साथ साझा न करें। चरण 1: पर्यावरण की स्थापना कोडिंग में गोता लगाने से पहले एक और चेकपॉइंट मारना। हम Node.js, एक लोकप्रिय जावास्क्रिप्ट रनटाइम वातावरण, और create-react-app, एक उपकरण का उपयोग करेंगे, जो एक पूर्व-कॉन्फ़िगर सेटअप के साथ एक रिएक्ट प्रोजेक्ट उत्पन्न करता है। आरंभ करने के लिए, हम तीन फ़ोल्डर , और बनाएंगे। client server plugin नोट: 🧑💻 यदि आप मैक पर हैं, तो आपको सिस्टम सेटिंग्स में "एयरप्ले रिसीवर" को बंद कर देना चाहिए क्योंकि यह डिफ़ॉल्ट रूप से पोर्ट 5000 पर कब्जा कर लेता है। केवल संदर्भ के लिए, इस ब्लॉग के अंत में हमारी इस प्रकार दिखाई देगी। final folder structure हम आगे बढ़ेंगे और नीचे दिए गए आदेश का उपयोग करके सीएलआई स्थापित करेंगे। Dyte $ npm install -g @dytesdk/cli प्राधिकरण भाग के साथ आगे बढ़ना और निम्नलिखित आदेशों के साथ संगठन का चयन करना। $ dyte auth login $ dyte auth org अधिक जानकारी के लिए पर जाएं। डाइट सीएलआई डॉक्स चरण 2: एक नया कस्टम प्लगइन स्थापित करना एक कस्टम डाईट प्लगइन का निर्माण शुरू करने के लिए हम निम्नलिखित कमांड का उपयोग करके क्लोन करेंगे। प्लगइन टेम्प्लेट हमें जल्दी शुरू करने की अनुमति देता है। Dyte Plugin Template $ git clone https://github.com/dyte-in/react-plugin-template.git यह टेम्प्लेट का उपयोग करता है और हमें अपने स्वयं के रीयल-टाइम प्लगइन्स बनाने की अनुमति देता है जो डाइट मीटिंग्स के साथ निर्बाध रूप से काम करते हैं। मिनटों में जटिल समस्याओं को हल करने में हमारी मदद करने के लिए इसमें कई दिलचस्प विशेषताएं हैं। अब, हम "npm install" कमांड का उपयोग करके निर्भरताएँ स्थापित करेंगे। @dytesdk/plugin-sdk $ npm install अगला, हम निम्नलिखित कमांड चलाकर कुछ निर्भरताएँ जोड़ेंगे। $ npm i @uiw/react-codemirror @codemirror/lang-javascript uuid यहां, हम जोड़ रहे हैं, जो भाषा समर्थन के साथ एक पूर्व-निर्मित कोड संपादक प्रदान करता है। हम यूयूआईडी भी स्थापित कर रहे हैं जो हमें केवल एक फंक्शन कॉल के साथ यूयूआईडी बनाने में मदद करेगा। यह जल्द ही काम आएगा। react-codemirror अब जब हमारे पास सब कुछ सेट हो गया है, तो हम अपने कस्टम प्लगइन सेटअप को शुरू करने और परीक्षण करने के लिए इस कमांड का उपयोग कर सकते हैं। $ npm start चरण 3: हमारे नए कस्टम प्लग इन को आज़माना हमारे नए कस्टम प्लगइन का उपयोग करने की कोशिश करने के लिए, हमें पर जाना होगा http://staging.dyte.io यहां, हमें एक नई मीटिंग बनाने के लिए कहा जाएगा। यह अत्यंत सरल है, बस अपना नाम और मीटिंग का नाम जोड़ें और दबाएं. अगले पेज पर यह आपको मीटिंग में के लिए कहेगा। ज्वाइन पर क्लिक करें और आप अंदर हैं। Create join नीचे-दाएं कोने में बटन ढूंढें, और सभी मौजूदा प्लगइन्स प्रकट करने के लिए उस पर क्लिक करें। हम नाम के एक प्लगइन में रुचि रखते हैं, पर क्लिक करें और यह मीटिंग के अंदर ही आपके प्लगइन को प्रकट कर देगा 🤯। Plugins launch हमारे पास सब कुछ तैयार है। अब, हम कुछ वास्तविक कोड लिखने के साथ आरंभ कर सकते हैं! आइए अपने कोड संपादक घटक के साथ आरंभ करें। चरण 4: हमारा कोड संपादक बनाना आइए अपना स्वयं का कोड संपादक 🧑💻 बनाने के साथ आरंभ करें। इसके लिए हम पहले एक कंपोनेंट बनाने जा रहे हैं और फिर उस पैकेज का उपयोग करेंगे जिसे हमने पहले स्थापित किया था। सबसे पहले, के अंदर नाम की फाइल में एक नया बनाएं और निम्नलिखित कोड पेस्ट करें। CodeMirror src/containers CodeEditor.js React Functional Component कोडमिरर घटक एक पूर्व-निर्मित कोड संपादक प्रदान करता है। यह विभिन्न सिंटैक्स हाइलाइटिंग सुविधाओं के साथ आता है। चरण 5: कोड परिवर्तन को संभालना लाइव कोड परिवर्तनों को संभालने के लिए काम करने के लिए, आइए पहले नाम का एक नया राज्य बनाएं code import { useEffect, useState, useRef } from "react"; const [code, setCode] = useState("function add(a, b) { return a + b;}"); अब, हम एक फ़ंक्शन बनाएंगे जो फ़ंक्शन का उपयोग करके में हमारे कोड में बदलाव होने पर घटनाओं को उत्सर्जित करेगा। handleCodeChange plugin.emit() CodeMirror यहाँ, हम एक वस्तु का उत्सर्जन कर रहे हैं, जिसमें दो गुण हैं। पहला बेतरतीब ढंग से उत्पन्न है और दूसरा हमारा पूरा कोड है। 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; चरण 6: कोड परिवर्तन की घटनाओं को सुनना जब अन्य लोग कोड बदलते हैं तो हमें उस घटना को सुनने की आवश्यकता होती है। इसके लिए हम नीचे दिखाए गए अनुसार फंक्शन का उपयोग करेंगे। फ़ंक्शन पैरामीटर के रूप में स्वीकार करता है और कोड परिवर्तन प्राप्त करता है। plugin.on() event name यहां एक और ध्यान देने वाली बात यह है कि हमें अपने वर्तमान कोड को तभी अपडेट करना होगा जब वह अन्य उपयोगकर्ताओं द्वारा भेजा गया हो। इसके लिए हमें एक साधारण कंडीशनल स्टेटमेंट 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; इस घटक में, हम कोडमिरर का उपयोग करके एक कोड संपादक बना रहे हैं। संपादक में कोई भी परिवर्तन, मीटिंग में सभी उपयोगकर्ताओं के लिए फ़ंक्शन कॉल का उपयोग करके एक ईवेंट उत्सर्जित करता है। फ़ंक्शन और तर्क के रूप में लेता है। plugin.emit() CODE_CHANGE emit eventName data अगले चरण में, हमें CodeEditor घटक को फ़ाइल में आयात करना होगा। आपकी फ़ाइल कुछ इस तरह दिखनी चाहिए। 👇 Main.tsx import { useDytePlugin } from '../context' import CodeEditor from './CodeEditor'; const Main = () => { const plugin = useDytePlugin(); return ( ) } export default Main हमारे "सहयोगी कोड संपादक प्लगइन" 😉 के लिए कोड अब तैयार है। बिना कोड एडिटर के किसी ने पहला कोड एडिटर कैसे लिखा 😂? मजाक एक तरफ, हम अपने प्लगइन 🎉 के साथ तैयार हैं। चेकआउट करने के लिए, खोलें और साथ चलें। शामिल होने के लिए अपना नाम और मीटिंग शीर्षक दर्ज करें। मीटिंग में शामिल हों पर क्लिक करें। प्लगइन खोलें और आप जाने के लिए तैयार हैं। staging.dyte.io Localhost Dev चरण 7: हमारे घटक को प्रकाशित करना 🧑💻 अब, हमारी सामग्री प्रकाशित करने का समय आ गया है, यह के साथ एक सरल प्रक्रिया है। इसके लिए हमें पहले अपना प्लगइन बनाना होगा फिर कमांड को रन करना होगा। Dyte CLI dyte plugins publish $ dyte plugins create $ npm run build $ cp dyte-config.json ./build/dyte-config.json $ cd build $ dyte plugins publish चरण 8: हमारे कोड शेयरिंग प्लेटफॉर्म के साथ शुरुआत करना अब जब हमने प्लगइन बना लिया है जो हमें कोड पर सहयोग करने में मदद करेगा, हम इस प्लगइन का उपयोग करने के लिए प्लेटफॉर्म के निर्माण के साथ आरंभ कर सकते हैं। क्लाइंट साइड से शुरू करते हैं। फोल्डर के अंदर, हम उपयोग करके एक नया प्रोजेक्ट सेटअप करेंगे और निम्न कमांड का उपयोग करके अपना रिएक्शन ऐप बनाएंगे। client create-react-app ReactJS $ npx create-react-app . इसके बाद, निम्नलिखित कमांड चलाकर और की निर्भरता स्थापित करें: Dyte code-editor $ npm i @dytesdk/react-ui-kit @dytesdk/react-web-core react-simple-code-editor 🎬 अब, एनपीएम स्टार्ट के साथ अपना विकास सर्वर शुरू करें: $ npm start चरण 9: लेआउट का निर्माण आइए हम फोल्डर के अंदर फाइल खोलें। हम इस फ़ाइल की सामग्री को हटा देंगे और निम्न कोड स्निपेट 👇 जोड़ देंगे। src app.js import Layout from './components/Layout' function App() { return ( ); } export default App; अगला, हम घटक लिखेंगे, हम अपने लोगो, शीर्षक और मीटिंग UI के साथ एक लेआउट बनाएंगे। Layout सहयोगी कोड संपादक और मीटिंग UI बनाने के लिए हम और PrismJS सहित कई पुस्तकालयों का उपयोग करेंगे। DyteMeeting import Meet from "./Meeting" const Layout = () => { return ( <> Collaborative Code Editor ) } export default Layout चरण 10: मीटिंग घटक 🧑💻 सबसे पहले, हमें फ़ाइल में कुछ यूटिलिटी फ़ंक्शंस बनाने की आवश्यकता है 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 } मीटिंग बनाने और प्रतिभागियों को जोड़ने के लिए ये फ़ंक्शन हमारे बैकएंड से बात करते हैं। मीटिंग निर्माण के लिए, हम एक वैकल्पिक पैरामीटर के रूप में पास करते हैं। title और प्रतिभागियों को जोड़ने के लिए, हम के साथ पैरामीटर (वैकल्पिक), पैरामीटर (वैकल्पिक), और पैरामीटर (आवश्यक) पास करते हैं। meetingId name picture preset_name हमारे मीटिंग घटक के लिए समय। इसके लिए, हम डाइट यूआई किट ✨ का उपयोग करेंगे जो आपके एप्लिकेशन में लाइव ऑडियो/वीडियो शेयरिंग को एकीकृत करना बेहद आसान बनाता है। हां, कोड की ये 10-15 लाइनें भारी भार उठाती हैं। 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; अब हम अपने कोड शेयरिंग प्लेटफॉर्म के UI के साथ तैयार हैं 🎉 चरण 11: बैकएंड तैयार करना 🧑💻 डायट विभिन्न प्रकार के शक्तिशाली एपीआई प्रदान करता है जो डेवलपर अनुभव को बढ़ाता है और डेवलपर आवश्यकताओं की एक विस्तृत श्रृंखला को पूरा करता है। हम डायटे के संगठनों, सत्रों, बैठकों, रिकॉर्डिंग, वेबहुक, लाइव स्ट्रीमिंग, एनालिटिक्स और बहुत कुछ का प्रबंधन कर सकते हैं। प्रक्रिया को सरल बनाने के लिए, हम बैकएंड बनाने के लिए एक्सप्रेस के साथ नोड का उपयोग करेंगे जो प्रमाणीकरण, बैठक निर्माण और प्रतिभागियों को जोड़ने में मदद करेगा। ✨ प्रोजेक्ट फ़ोल्डर में आरंभ करने के लिए, निम्न चरणों का पालन करें: $ mkdir server && cd server हम 'सर्वर' निर्देशिका में कुछ निर्भरताओं, सीडी को स्थापित करने के साथ शुरू करेंगे, और निम्न आदेश का उपयोग करेंगे। $ npm init -y $ npm install express cors axios dotenv $ npm install -g nodemon सबसे पहले, में अपनी API कुंजी को स्टोर करने के लिए एक फ़ाइल बनाते हैं। आप इन चाबियों को डाइट डैशबोर्ड पर पा सकते हैं। server/src .env DYTE_ORG_ID= DYTE_API_KEY= आइए कुछ स्क्रिप्ट ✍️ भी जोड़ते हैं जो हमारे एप्लिकेशन को चलाने में हमारी मदद करेंगी। टैग के अंदर अपनी फ़ाइल में नीचे दी गई पंक्तियां जोड़ें। server scripts package.json "start": "node dist/index.js", "dev": "nodemon src/index.js" चलिए अब अपनी फाइल और फोल्डर बनाते हैं। हमारा सारा कोड फोल्डर के अंदर रहेगा। के अंदर एक और फोल्डर बनाएं। server/src src utils एक फाइल के अंदर और के अंदर इनिशियलाइज़ करें। अब अपनी फ़ाइल को में जोड़ते हैं, जिसमें हमारे API रहस्य होंगे। index.js src dyte-api.js utils .env src फ़ाइल खोलें और उसमें निम्नलिखित पंक्तियाँ जोड़ें। डायट डैशबोर्ड से प्लेसहोल्डर मानों को एपीआई रहस्यों से बदलें। src/.env DYTE_ORG_ID= DYTE_API_KEY= हम अब कोड लिखना शुरू कर सकते हैं। आइए डायट एपीआई तक पहुँचने के लिए कॉन्फिगरेशन बनाने के साथ शुरुआत करें। axios खोलें और निम्नलिखित कोड डालें। utils/dyte-api.js यह कोड डायट एपीआई और प्रमाणीकरण के साथ संवाद करने में मदद करेगा। 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; अगला, हम मार्ग लिखेंगे। मीटिंग्स बनाने और मीटिंग्स में प्रतिभागियों को जोड़ने के लिए हमारा फ्रंट एंड इन मार्गों पर संचार करेगा। आइए खोलें और निम्नलिखित कोड स्निपेट जोड़ें।👇 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}...`) }); ता-दा! 🎩✨ हमने कर दिखाया! अब, हम अपने दोस्तों और टीम के साथियों के साथ कोडिंग करते हुए सहयोग करने के लिए आखिरकार अपने कोड-शेयरिंग प्लेटफॉर्म को आजमाएंगे। हमारे चमकदार नए कोड संपादक और डाइट मीटिंग के सभी सेटअप के साथ, हम अंत में अपने प्लेटफॉर्म को आजमाएंगे! संपूर्ण एप्लिकेशन को स्थानीय रूप से चलाने के लिए: क्लाइंट के अंदर टाइप करें PORT=3001 npm start प्लगइन के अंदर टाइप करें npm start सर्वर के अंदर टाइप करें PORT=3000 npm run dev और वहां आपके पास यह है, इन-ऐप वीडियो कॉन्फ्रेंसिंग और हमारे अपने "कोड सहयोग प्लगइन" के साथ सहयोग। 🧑💻 आप कोड-साझाकरण प्लेटफ़ॉर्म आज़मा सकते हैं . यहाँ निष्कर्ष 🎉 वाह! आपने इसे अंत तक बना दिया है, मेरे दोस्त! मुझे आशा है कि आपने आज एक या दो चीजें सीखी हैं और रास्ते में अच्छा समय बिताया है। साथ में, हमने एक आकर्षक लाइव जोड़ी प्रोग्रामिंग और कोड-शेयरिंग प्लेटफ़ॉर्म बनाया है, जो इन-ऐप मीटिंग्स के साथ पूरा होता है, यह सब केवल एक चुटकी रिएक्ट और डायट के एक बड़े हिस्से के साथ होता है। सफलता के नुस्खे के बारे में बात करें! हमें अपने प्लगइन टेम्प्लेट और शक्तिशाली एसडीके के साथ आपका समर्थन मिला है, जिससे सीधे इसमें कूदना और अपनी खुद की सहयोगी मास्टरपीस बनाना आसान हो गया है, ठीक उसी तरह जैसे आज हमने एक साथ मिलकर बनाया था। तो आप किस बात की प्रतीक्षा कर रहे हैं? पर जाएँ और अपने रचनात्मक रस को प्रवाहित होने दें! अपने स्वयं के सहयोगी अनुप्रयोगों का निर्माण शुरू करें और आप अगली बड़ी चीज़ बना सकते हैं! 🚀 Dyte.io