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

कोड शेयरिंग प्रोग्रामिंग का एक अनिवार्य पहलू है।

दूरस्थ कार्य और आभासी सहयोग के उदय के साथ, डेवलपर्स को कोड साझा करने के लिए विश्वसनीय उपकरण की आवश्यकता होती है जो वास्तविक समय संचार, वीडियो और ऑडियो कॉन्फ्रेंसिंग और एक अनुकूल उपयोगकर्ता इंटरफ़ेस प्रदान करते हैं। Codeshare.io ऐसा ही एक उदाहरण है।

लेकिन आज, हम अपनी आस्तीनें चढ़ाने जा रहे हैं और Dyte.io का उपयोग करके अपना खुद का कोड-साझाकरण खेल का मैदान बना रहे हैं। सीट बेल्ट लगा लो! 🎢 डाइट एक डेवलपर-अनुकूल प्लेटफॉर्म है जो हमारे उत्पाद के भीतर लाइव अनुभव बनाने के लिए शक्तिशाली एसडीके प्रदान करता है। इस ब्लॉग में, हम आपको Dyte.io और ReactJs के साथ एक कोड-शेयरिंग प्लेटफॉर्म बनाने की प्रक्रिया के बारे में बताएंगे। चलो शुरू करो! 🏃

चरण 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

यह टेम्प्लेट @dytesdk/plugin-sdk का उपयोग करता है और हमें अपने स्वयं के रीयल-टाइम प्लगइन्स बनाने की अनुमति देता है जो डाइट मीटिंग्स के साथ निर्बाध रूप से काम करते हैं। मिनटों में जटिल समस्याओं को हल करने में हमारी मदद करने के लिए इसमें कई दिलचस्प विशेषताएं हैं। अब, हम "npm install" कमांड का उपयोग करके निर्भरताएँ स्थापित करेंगे।

 $ 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 बनाएं और निम्नलिखित कोड पेस्ट करें।

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

कोडमिरर घटक एक पूर्व-निर्मित कोड संपादक प्रदान करता है। यह विभिन्न सिंटैक्स हाइलाइटिंग सुविधाओं के साथ आता है।

चरण 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 ( <> <CodeMirror style={{ fontSize: "32px", textAlign: "left" }} value={code} onChange={handleCodeChange} height="100vh" width="100vw" theme={'dark'} extensions={[javascript({ jsx: true })]} /> </> ); } 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 ( <> <CodeMirror style={{ fontSize: "32px", textAlign: "left" }} value={code} onChange={handleCodeChange} height="100vh" width="100vw" theme={'dark'} extensions={[javascript({ jsx: true })]} /> </> ); } 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 ( <div style={{ height: "100%" }}> <CodeEditor plugin={plugin} /> </div> ) } 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 ( <Layout /> ); } export default App;

अगला, हम Layout घटक लिखेंगे, हम अपने लोगो, शीर्षक और मीटिंग UI के साथ एक लेआउट बनाएंगे।

सहयोगी कोड संपादक और मीटिंग UI बनाने के लिए हम DyteMeeting और PrismJS सहित कई पुस्तकालयों का उपयोग करेंगे।

 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

चरण 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: "<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;

अब हम अपने कोड शेयरिंग प्लेटफॉर्म के UI के साथ तैयार हैं 🎉

चरण 11: बैकएंड तैयार करना

🧑‍💻 डायट विभिन्न प्रकार के शक्तिशाली एपीआई प्रदान करता है जो डेवलपर अनुभव को बढ़ाता है और डेवलपर आवश्यकताओं की एक विस्तृत श्रृंखला को पूरा करता है।

हम डायटे के संगठनों, सत्रों, बैठकों, रिकॉर्डिंग, वेबहुक, लाइव स्ट्रीमिंग, एनालिटिक्स और बहुत कुछ का प्रबंधन कर सकते हैं।

प्रक्रिया को सरल बनाने के लिए, हम बैकएंड बनाने के लिए एक्सप्रेस के साथ नोड का उपयोग करेंगे जो प्रमाणीकरण, बैठक निर्माण और प्रतिभागियों को जोड़ने में मदद करेगा। ✨

प्रोजेक्ट फ़ोल्डर में आरंभ करने के लिए, निम्न चरणों का पालन करें:

 $ mkdir server && cd server

हम 'सर्वर' निर्देशिका में कुछ निर्भरताओं, सीडी को स्थापित करने के साथ शुरू करेंगे, और निम्न आदेश का उपयोग करेंगे।

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

सबसे पहले, server/src में अपनी API कुंजी को स्टोर करने के लिए एक .env फ़ाइल बनाते हैं। आप इन चाबियों को डाइट डैशबोर्ड पर पा सकते हैं।

 DYTE_ORG_ID=<ID> DYTE_API_KEY=<KEY>

आइए कुछ स्क्रिप्ट ✍️ भी जोड़ते हैं जो हमारे server एप्लिकेशन को चलाने में हमारी मदद करेंगी। scripts टैग के अंदर अपनी package.json फ़ाइल में नीचे दी गई पंक्तियां जोड़ें।

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

चलिए अब अपनी फाइल और फोल्डर बनाते हैं। हमारा सारा कोड server/src फोल्डर के अंदर रहेगा। src के अंदर एक और फोल्डर utils बनाएं।

एक फाइल index.js src के अंदर और dyte-api.js utils के अंदर इनिशियलाइज़ करें। अब अपनी .env फ़ाइल को src में जोड़ते हैं, जिसमें हमारे API रहस्य होंगे।

src/.env फ़ाइल खोलें और उसमें निम्नलिखित पंक्तियाँ जोड़ें। डायट डैशबोर्ड से प्लेसहोल्डर मानों को एपीआई रहस्यों से बदलें।

 DYTE_ORG_ID=<YOUR-DYTE-ORG-ID> DYTE_API_KEY=<YOUR-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 पर जाएँ और अपने रचनात्मक रस को प्रवाहित होने दें! अपने स्वयं के सहयोगी अनुप्रयोगों का निर्माण शुरू करें और आप अगली बड़ी चीज़ बना सकते हैं! 🚀