परिचय वेब विकसित हो रहा है, और वेब3 तकनीकें पारंपरिक उद्योगों में क्रांति ला रही हैं, जिसमें वीडियो स्ट्रीमिंग भी शामिल है। जैसे प्लेटफ़ॉर्म इस मामले में अग्रणी हैं, जो YouTube और रंबल के लिए विकेंद्रीकृत विकल्प प्रदान करते हैं। इसी तरह, Google Drive और Dropbox जैसे पुराने प्रदाताओं के विपरीत, डेटा स्टोरेज को बदल रहा है, गोपनीयता-केंद्रित और उपयोगकर्ता-केंद्रित दृष्टिकोण प्रदान कर रहा है। ओडिसी Sia NextJs, TypeScript, Tailwind CSS और Sia Renterd का उपयोग करके यह ट्यूटोरियल श्रृंखला आपको एक विकेंद्रीकृत एप्लिकेशन बनाने में मार्गदर्शन करेगी जो उपयोगकर्ता डेटा स्वामित्व और गोपनीयता सुनिश्चित करने के लिए Sia की ब्लॉकचेन तकनीक का लाभ उठाती है। अत्याधुनिक Web3 मूवी स्ट्रीमिंग dApp बनाने की यात्रा पर हमारे साथ जुड़ें। इस ट्यूटोरियल के अंत तक, आप निम्नलिखित में विशेषज्ञता हासिल कर लेंगे: दोस्तों के साथ साझा करने या स्कूल प्रोजेक्ट के रूप में उपयोग करने के लिए एक पूर्ण कार्यात्मक मूवी स्ट्रीमिंग प्लेटफ़ॉर्म बनाएं अपना स्वयं का SaaS (सॉफ़्टवेयर ऐज़ अ सर्विस) एप्लिकेशन लॉन्च करें वीडियो स्ट्रीमिंग उद्योग में वेब3 प्रौद्योगिकियों की क्षमता को अनलॉक करें परियोजना को क्रियान्वित होते देखने के लिए , तथा इस तरह की और अधिक नवीन सामग्री के लिए ! नीचे डेमो वीडियो देखें हमारे चैनल की सदस्यता लें https://www.youtube.com/watch?v=Hgfdesry8Ss&embedable=true आवश्यक शर्तें साथ चलने के लिए, सुनिश्चित करें कि आपके पास निम्नलिखित उपकरण स्थापित हैं, और स्टैक से परिचित होने से आपकी समझ भी बढ़ेगी: नोडजेएस नेक्स्टजेएस टेलविंड सीएसएस टाइपप्रति डॉकर (आवश्यक) इस तीन भाग वाली श्रृंखला में निम्नलिखित विषय शामिल होंगे: - रेंटर्ड ज़ेन टेस्टनेट, पैकेज इंस्टॉलेशन और पर्यावरण चर। भाग 1: परियोजना सेटअप - बैकएंड सेवा का निर्माण भाग 2: बैकएंड विकास - फ्रंटएंड को बैकएंड सेवा के साथ एकीकृत करना। भाग 3: फ्रंटएंड विकास यदि आप संपूर्ण विकास प्रक्रिया देखना पसंद करते हैं, , प्लेलिस्ट में, यहां लिखी गई सभी चीजें और अधिक वीडियो में कैद हैं। तो मैं इस प्लेलिस्ट को देखने की सलाह देता हूं इतना कहने के बाद, आइए इस परियोजना की स्थापना शुरू करें। प्रोजेक्ट सेटअप – भाग 1 हम एक तैयार रिपॉजिटरी को क्लोन करके शुरू करेंगे जिसमें सिया रेंटर्ड डॉकर कंपोज़ स्क्रिप्ट और बैकएंड और फ्रंटएंड सेवाएँ शामिल हैं। निम्नलिखित कमांड चलाएँ: $ git clone https://github.com/Daltonic/sia_vid_tv $ cd sia_vid_tv अब, यह महत्वपूर्ण है कि हम इस नए क्लोन किए गए GitHub प्रोजेक्ट पर अपनी स्टार्टर शाखा पर स्विच करें और इसे पूरा करने के लिए नीचे दिए गए कमांड को चलाएं। $ git checkout 01_starter_branch इसके बाद, आइए इस Renterd सेवा के लिए संबंधित पर्यावरण चर सेट करें। इस प्रोजेक्ट के रूट पर एक फ़ाइल बनाएँ और नीचे दी गई कुंजियाँ लागू करें: .env RENTERD_SEED=<RENTERD_SEED_PHRASE> RENTERD_API_PASSWORD=<YOUR_PREFERED_PASSWORD> RENTERD_LOG_LEVEL=debug RENTERD_LOG_DATABASE_LEVEL=error इन API कुंजियों को प्राप्त करने के लिए, आपको अपनी मशीन पर Sia Renterd स्थापित करना होगा; कृपया नीचे दिया गया छोटा वीडियो देखें, जो काफी हद तक सब कुछ संक्षेप में बताता है। https://www.youtube.com/watch?v=78XCHGWZwhA&embedable=true जैसा कि ऊपर दिए गए वीडियो में दिखाया गया है, रेंटर्ड एप्लीकेशन के साथ एक सीड फ्रेज तैयार करें और इसे अपने एनवायरनमेंट वैरिएबल में शामिल करें जैसा कि ऊपर दिए गए वीडियो में बताया गया है। पासवर्ड को किसी ऐसे पासवर्ड से बदलें जिसे आप आसानी से याद रख सकें। इसके बाद, हमें करके इंस्टॉल करना होगा, अगर आपने पहले से ऐसा नहीं किया है। वैकल्पिक रूप से, यदि संभव हो तो Docker इंस्टेंस चलाने के लिए या VPS जैसे किसी मुफ़्त ऑनलाइन प्लेटफ़ॉर्म का उपयोग करें। अन्यथा, इसे अपने स्थानीय कंप्यूटर पर इंस्टॉल करें। आधिकारिक वेबसाइट से Docker डाउनलोड Gitpod अंत में, हम इस प्रोजेक्ट के रूट पर निम्नलिखित डॉकर कमांड चलाकर एक डॉकर कंटेनर बना सकते हैं। सुनिश्चित करें कि टर्मिनल इस फ़ाइल के समान निर्देशिका स्थान पर है। docker-compose.yml $ docker compose -f "docker-compose.yml" up -d --build कंटेनर को नीचे खींचने के लिए कमांड पर ध्यान दें: । इसे तब चलाएँ जब आप अपने Docker इंस्टेंस को बंद करना चाहते हैं (लेकिन अभी नहीं)। $ docker compose -f "docker-compose.yml" down यदि आपने उपरोक्त निर्देशों का सही ढंग से पालन किया है, तो जब आप पर अपने ब्राउज़र पर जाएंगे तो आपको नीचे दिया गया इंटरफ़ेस दिखाई देगा। http://localhost:9880 लॉग इन करने के लिए अपना पासवर्ड (अपने पर्यावरण चर से) दर्ज करें। फिर, फ़ाइल अपलोड, डाउनलोड और स्ट्रीमिंग के लिए अपने Sia Renterd इंस्टेंस को सेट करने के लिए नीचे दिए गए वीडियो में कॉन्फ़िगरेशन प्रक्रिया का पालन करें। https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=401s&embedable=true उपरोक्त वीडियो मिनट पर शुरू होता है, कृपया मिनट पर रुकें, यह भाग आपको रेंटर्ड कॉन्फ़िगरेशन प्रक्रिया के माध्यम से मार्गदर्शन करेगा। 6:41 20:01 ध्यान रखें कि होस्ट मिलान के साथ ब्लॉकचेन सिंक्रोनाइजेशन प्रक्रिया को तैयार होने में तक का समय लगता है, इसलिए आपको पूरी प्रक्रिया में धैर्य रखना होगा। 25 min कृपया Renterd पर नाम से एक नई बकेट बनाएँ, जहाँ इस प्रोजेक्ट के लिए हमारी सभी फ़ाइलें संग्रहीत की जाएँगी। यदि आपने उपरोक्त निर्देशों को सफलतापूर्वक निष्पादित किया है, तो आपका Renterd नोड अपलोड और डाउनलोड के लिए तैयार होना चाहिए। नीचे दी गई छवि देखें। vidtv अद्भुत। इस बिंदु पर, हमारी रेंटर्ड सेवा फ़ाइलें प्राप्त करना शुरू करने के लिए तैयार है, लेकिन हमें इसके साथ प्रोग्रामेटिक रूप से संवाद करने की आवश्यकता है। आइये, बैकएंड और फ्रंटएंड के लिए पैकेज और एनवायरनमेंट वैरिएबल सेट अप करके इस ट्यूटोरियल के पहले भाग को पूरा करें। बैकएंड सेवा पैकेजों को स्थापित करने और आगे के विकास के लिए तैयार करने के लिए निम्नलिखित निर्देशों का पालन करें। बैकएंड परियोजना सेटअप निम्नलिखित कमांड का उपयोग करके नए टर्मिनल इंस्टेंस से बैकएंड निर्देशिका पर नेविगेट करें: $ cd backend $ yarn install #you can also use npm install $ touch .env #or mannually create it at the root of the backend directory इसके बाद, पर्यावरण चर में निम्नलिखित जानकारी भरें। SIA_API_BUCKET=vidtv SIA_API_PASSWORD=<YOUR_PREFERED_PASSWORD> SIA_API_BASE_URL=http://localhost:9880 ORIGIN=http://localhost:9000 PORT=9000 और अब, बैकएंड को चालू करने के लिए चलाएं और यह भी पुष्टि करें कि यह किसी भी बग से मुक्त है। $ yarn build && yarn start अंत में, फ्रंटएंड से जुड़े पैकेजों को स्थापित करने के लिए निम्नलिखित कमांड चलाएँ। इसके बाद, हम इसे चलाएँगे। फ्रंटएंड प्रोजेक्ट सेटअप निम्नलिखित कमांड का उपयोग करके नए टर्मिनल इंस्टेंस से बैकएंड डायरेक्टरी पर नेविगेट करें: $ cd frontend $ yarn install #you can also use npm install $ touch .env #or mannually create it at the root of the backend directory इसके बाद, पर्यावरण चर में निम्नलिखित जानकारी भरें। NEXT_PUBLIC_PROJECT_ID=<YOUR_WALLET_CONNECT_ID> NEXT_PUBLIC_FILE_SERVICE_URL=http://localhost:9000 साइन अप करें और अपनी प्रोजेक्ट आईडी प्राप्त करने के लिए के साथ एक प्रोजेक्ट बनाएं। पर्यावरण चर को प्रोजेक्ट आईडी प्रदान करने के बाद, बैकएंड को स्पिन करने के लिए चलाएं और यह भी पुष्टि करें कि यह किसी भी बग से मुक्त है। वॉलेटकनेक्ट $ yarn build && yarn start इस बिंदु पर, जब आप पर ब्राउज़र पर जाएंगे तो आपको नीचे दिया गया इंटरफ़ेस दिखाई देगा। http://localhost:3000 इस मील के पत्थर तक पहुँचने पर बधाई! बैकएंड सेवा विकास को पूरा करने के लिए । अगला चरण भाग 2 पर आगे बढ़ें बैकएंड सेवा – भाग 2 अगर आपने अभी तक भाग 1 नहीं पढ़ा है तो कृपया पूरा पढ़ें। अब, चलिए भाग 2 पर चलते हैं: हमारे वेब3 मूवी स्ट्रीमिंग प्लेटफ़ॉर्म के लिए बैकएंड सेवा का निर्माण। आपका स्वागत है! हमने बैकएंड के लिए एक स्टार्टर कोड प्रदान किया है, जो वर्तमान में सर्वर शुरू करने और अपने ब्राउज़र में पर जाने पर "स्वागत" संदेश प्रदर्शित करता है। आइए इस आधार पर निर्माण करें। http://localhost:9000 हमारे पास वर्तमान में ये कोड बैकएंड की सोर्स डायरेक्टरी में हैं। मैं आपको संक्षेप में इनके बारे में बताता हूँ। यह फ़ोल्डर, जिसे पूर्णतः को संबोधित किया जा सकता है, में दो आवश्यक फ़ाइलें हैं: एक HTTP अपवाद हैंडलर फ़ंक्शन और फ़ाइल अपलोड जानकारी को संभालने के लिए एक इंटरफ़ेस। उपयोगिता फ़ाइलें backend/src/utils यह कोड एक कस्टम वर्ग को परिभाषित करता है जो अंतर्निहित जावास्क्रिप्ट वर्ग का विस्तार करता है, जिससे विशिष्ट HTTP स्थिति कोड और संदेशों के साथ त्रुटि उदाहरणों के निर्माण की अनुमति मिलती है। HttpException Error https://gist.github.com/Daltonic/bb37e1d4c5f84bc9c10fcbb8c3e19621 यह कोड एक इंटरफ़ेस को परिभाषित करता है जो अपलोड की गई फ़ाइल का प्रतिनिधित्व करता है, इसके गुणों जैसे नाम, डेटा, आकार, एन्कोडिंग और अधिक को निर्दिष्ट करता है, इस बैकएंड एप्लिकेशन में फ़ाइल अपलोड को संभालने के लिए एक संरचित तरीका प्रदान करता है। FileUpload https://gist.github.com/Daltonic/64fb31bf3b19668a17d14f59e087a77e और फिर रूट फ़ोल्डर में, हमारे पास यह फ़ाइल है जो CORS और फ़ाइल अपलोड समर्थन के साथ Express.js सर्वर सेट अप करती है, एक एकल GET रूट को परिभाषित करती है जो "स्वागत" संदेश लौटाती है, और त्रुटियों को पकड़कर उन्हें कस्टम HttpExceptions के रूप में पुनः फेंककर संभालती है, फिर पर्यावरण चर में निर्दिष्ट पोर्ट 9000 पर सर्वर शुरू करती है। backend/src index.ts https://gist.github.com/Daltonic/8d76c3a212681d7bfe89b0792b0e707f अब जबकि हमने मुख्य फाइलों को कवर कर लिया है, आइए फ़ोल्डर में दो नई फाइलें बनाएं, जिनमें से प्रत्येक हमारे एप्लिकेशन में एक अलग उद्देश्य पूरा करेगी। services सेवा फ़ाइलें फ़ोल्डर में, इस स्थान पर नाम से एक नया फ़ोल्डर बनाएं, यहीं पर हम दो सेवाएँ बनाएंगे: backend/src services : फ़ाइल अपलोड, डाउनलोड, स्ट्रीमिंग और कैशिंग को संभालती है, तथा रेंटर्ड सेवा के साथ संचार करती है। सिया सेवा : कैश्ड फ़ाइलों का प्रबंधन करती है, उन्हें प्रतिदिन 7 दिनों के बाद मध्य रात्रि में स्वचालित रूप से हटा देती है। पृष्ठभूमि सेवा सिया सेवा आइए फ़ोल्डर में नाम से एक फ़ाइल बनाएं और इस सेवा को तैयार करने के लिए नीचे दिए गए चरणों का पालन करें। backend/src/services sia.service.ts https://gist.github.com/Daltonic/a82a0c1cf8d3e7b31702b66eeead3718?embedable=true यह कोड एक क्लास को परिभाषित करता है जो Sia API सेटिंग्स और एक मूल URL के लिए पर्यावरण चर के साथ आरंभ होता है, जो Sia सेवा के साथ इंटरैक्शन को प्रबंधित करने के लिए एक आधार प्रदान करता है। अब, आइए इस सेवा के लिए बाकी कोड प्रदान करें। SiaService सिया नेटवर्क पर फ़ाइलें अपलोड करने के लिए, हमें क्लास में इन तीन विधियों को जोड़ना होगा, दो निजी होंगी जबकि एक सार्वजनिक होगी। सिया नेटवर्क पर फ़ाइलें अपलोड करना https://gist.github.com/Daltonic/ddf74dffc5ac1005585f7ae3ad55c286?embedable=true यह कोड एक निजी विधि को परिभाषित करता है जो एक निर्दिष्ट लंबाई की एक यादृच्छिक स्ट्रिंग उत्पन्न करता है, जो अपरकेस और लोअरकेस अक्षरों और संख्याओं से बना होता है, एक पूर्वनिर्धारित स्ट्रिंग से यादृच्छिक रूप से वर्णों का चयन करने के लिए लूप का उपयोग करता है। हम Renterd को फ़ाइल भेजने से पहले प्रत्येक फ़ाइल का नाम बदलने के लिए इसका उपयोग करेंगे। generateRandomString https://gist.github.com/Daltonic/e6a82ac4af9eca9c881f4e0bdd1d682b?embedable=true उपरोक्त कोड एक निजी विधि को परिभाषित करता है जो Axios का उपयोग करके Sia Renterd पर एक फ़ाइल अपलोड करता है, अपलोड प्रगति और त्रुटियों को संभालता है, और अपलोड विफल होने पर Axios प्रतिक्रिया लौटाता है या त्रुटि फेंकता है। uploadToSiaService रेंटर्ड एंडपॉइंट्स एपीआई डॉक्यूमेंटेशन में लिखे गए हैं, जिन्हें आप देख सकते हैं या नीचे दिए गए वीडियो को देख सकते हैं, जहां मैंने समझाया है कि सिया रेंटर्ड एपीआई डॉक्यूमेंटेशन कैसे काम करता है। https://www.youtube.com/watch?v=zOmUMz0DBQM&embedable=true अब आइए सार्वजनिक विधि को शामिल करें जिसे हम बाद में अपने अनुप्रयोग में समापन बिंदु के रूप में प्रदर्शित करेंगे। https://gist.github.com/Daltonic/ce565350160a39c4d9f0abc0b7e7dc26?embedable=true यह कोड एक सार्वजनिक विधि को परिभाषित करता है, जो एक अद्वितीय पहचानकर्ता उत्पन्न करके फ़ाइल अपलोड करता है, फ़ाइल को स्थानीय कैश में सहेजता है, और फिर इसे सिया रेंटर्ड पर अपलोड करता है, फ़ाइल का URL और सफलता संदेश लौटाता है या अपलोड विफल होने पर त्रुटि फेंकता है। uploadFile सिया नेटवर्क पर फ़ाइलें डाउनलोड करने के लिए, हमें क्लास में इन दो विधियों को जोड़ना होगा, एक निजी होगी और दूसरी सार्वजनिक होगी। सिया नेटवर्क पर फ़ाइलें डाउनलोड करना https://gist.github.com/Daltonic/b401e92d510ffddc8a0b7301d526f702?embedable=true यह कोड एक निजी विधि को परिभाषित करता है जो Sia सेवा से एक फ़ाइल प्राप्त करता है, इसे स्थानीय रूप से कैश करता है, और फ़ाइल की एक पठनीय स्ट्रीम लौटाता है, त्रुटियों को संभालता है और यदि फ़ाइल नहीं मिलती है तो 404 छवि लौटाता है। downloadFromSiaService आइए उन response_files को बैकएंड निर्देशिका में उपलब्ध रखें, अन्यथा हमें फ़ाइल को कॉल करने में त्रुटि का अनुभव होगा। निर्देशिका में नामक एक और फ़ोल्डर बनाएँ और उसमें निम्नलिखित छवियों को कॉपी करें। 404.png backend response_files बढ़िया, अब इस फ़ाइल डाउनलोड सेवा को पूरा करते हैं। क्लास में नीचे दी गई विधि भी जोड़ें। SiaService https://gist.github.com/Daltonic/1f1a99c82d5b15693eaa2d8d2482f6c2?embedable=true यह कोड एक सार्वजनिक विधि को परिभाषित करता है जो Sia Renterd से फ़ाइल प्राप्त करने के लिए निजी विधि को कॉल करता है और प्राप्त फ़ाइल की पठनीय स्ट्रीम लौटाता है। downloadFile downloadFromSiaService सेवा समापन बिंदु अब समय आ गया है कि हम इन विभिन्न विधियों को उनके संबंधित एंडपॉइंट से जोड़ दें, वर्तमान में, हमारे पास केवल एक ही है, लेकिन हमें फ़ाइलों को अपलोड करने और डाउनलोड करने के लिए दो अतिरिक्त की आवश्यकता होगी। फ़ाइल स्ट्रीमिंग भी डाउनलोड एंडपॉइंट का उपयोग करेगी। फ़ाइल पर जाएं और इसकी सामग्री को इन कोडों से अपडेट करें। backend/src/index.ts https://gist.github.com/Daltonic/c8dec40acbc47b2582c651e04fae432f?embedable=true यह कोड CORS और फ़ाइल अपलोड समर्थन के साथ एक Express.js सर्वर स्थापित करता है, जिसमें तीन समापन बिंदु परिभाषित किए गए हैं: एक स्वागत संदेश, Sia नेटवर्क पर फ़ाइल अपलोड, और Sia नेटवर्क से फ़ाइल डाउनलोड, फ़ाइल संचालन को संभालने के लिए SiaService वर्ग और त्रुटि प्रबंधन के लिए HttpException का उपयोग करना। यदि आपको कुछ दृश्य सहायता की आवश्यकता है तो नीचे दिए गए वीडियो के इस भाग को देखें, सुनिश्चित करें कि आप टाइमस्टैम्प पर रुकें। 01:50:44 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=3795&si=A6fF8n8Pd92i6weM&embedable=true हमें यह सुनिश्चित करने के लिए एक कैश प्रबंधन सेवा बनाने की आवश्यकता है कि हमारा सर्वर अप्रयुक्त फ़ाइलों से न भर जाए, यह नियंत्रित करके कि फ़ाइलें कैश में कितनी देर तक रहती हैं। यह जानना महत्वपूर्ण है कि हमें इस सेवा की आवश्यकता केवल कम करने के लिए है। डेटा विलंबता को पृष्ठभूमि सेवा फ़ोल्डर पर जाएं और नामक फ़ाइल बनाएं और उसमें कोड के ये अनुक्रम जोड़ें। backend/src/services background.service.ts https://gist.github.com/Daltonic/bc62ccefd72cec85772dedd311afbffd?embedable=true यह कोड एक क्लास को परिभाषित करता है जो कैश निर्देशिका सेट करता है और लाइब्रेरी का उपयोग करके दैनिक कार्यों को शेड्यूल करता है, पृष्ठभूमि कार्यों को आरंभ करता है और एक पुष्टिकरण संदेश लॉग करता है। आइए एक ऐसी विधि बनाएं जो कैश में 7 दिनों से पुरानी फ़ाइलों को हटाने के लिए ज़िम्मेदार होगी। BackgroundService node-cron इस विधि को वर्ग में जोड़ें। पुरानी फ़ाइल हटाना BackgroundService https://gist.github.com/Daltonic/43da392512b88b6abf068be62d14eb7e?embedable=true यह कोड नामक एक विधि को परिभाषित करता है, जो कैश निर्देशिका से 7 दिनों से अधिक पुरानी फ़ाइलों को हटाता है, निर्देशिका को पढ़कर, प्रत्येक फ़ाइल के निर्माण समय की जांच करके, लक्ष्य समय से अधिक समय वाली फ़ाइलों को हटाकर, कार्य के प्रारंभ और समाप्ति को लॉग करके, और किसी भी त्रुटि या सफल विलोपन को लॉग करके। deleteOldFiles अब, आइए एक फ़ंक्शन लिखें जो फ़ाइल हटाने को निष्पादित करने के लिए नोड-क्रॉन पैकेज का उपयोग करेगा। https://gist.github.com/Daltonic/18b60b0bc1f7414a306f01f9087db435?embedable=true यह कोड स्वचालित फ़ाइल क्लीनअप करने के लिए प्रतिदिन मध्य रात्रि (00:00) पर विधि को चलाने के लिए एक दैनिक क्रॉन जॉब सेट करता है। deleteOldFiles हमें बैकग्राउंड सर्विस क्लास के इन्स्टैंसिएशन पर दैनिक जॉब्स को शेड्यूल करने के लिए कन्स्ट्रक्टर फ़ंक्शन को भी अपडेट करना होगा। https://gist.github.com/Daltonic/5f608cd3793ff6deea56c262bdfbc395?embedable=true बढ़िया, अंत में, आइए इस बैकग्राउंड ऑपरेशन को इनिशियलाइज़ेशन के समय सर्वर प्रक्रिया के हिस्से के रूप में जोड़ें। फ़ाइल पर जाएँ, और बैकग्राउंड सर्विस फ़ाइल को इम्पोर्ट करने के लिए ऐप लिसनर मेथड को अपडेट करें। backend/src/index.ts https://gist.github.com/Daltonic/7966a7b27fa7eade2c6d1a7e60b2e530?embedable=true आपको का उपयोग करके बैकएंड सेवा कमांड को पुनः चलाना चाहिए और नीचे दी गई छवि की तरह टर्मिनल प्रिंटआउट देखना चाहिए। $ yarn build && yarn start यदि आप यह देखना चाहते हैं कि मैंने संपूर्ण पृष्ठभूमि सेवा को किस प्रकार कोडित किया है, तो नीचे दिया गया वीडियो आपके लिए है; बस सुनिश्चित करें कि आप टाइमस्टैम्प पर रुकें। 02:16:07 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=8167&si=4DZ27j0lqwufUgRf&embedable=true बधाई हो, अब आप इस ट्यूटोरियल के अंतिम भाग के लिए तैयार हैं जो है। अगला चरण भाग 3 आइए इस ट्यूटोरियल श्रृंखला के अंतिम भाग में गोता लगाएँ, जहाँ हम बैकएंड को फ्रंटएंड के साथ एकीकृत करेंगे, फ़ाइल अपलोड एप्लिकेशन को पूरा करने के लिए टुकड़ों को जोड़ेंगे। हम यह सुनिश्चित करके शुरू करेंगे कि फ्रंटएंड में प्रमाणीकरण चालू और चालू हैं। वेब3 मॉडल प्रमाणीकरण – भाग 3 फ्रंटएंड डायरेक्टरी में 'config' नाम से एक नया फ़ोल्डर बनाएँ और एक इंडेक्स फ़ाइल जोड़ें, जिसके परिणामस्वरूप पथ होगा। अब, इसमें निम्नलिखित कोड जोड़ें। /frontend/config/index.tsx https://gist.github.com/Daltonic/38bbe9fa325fb793dd59136ebdea8b43?embedable=true यह कोड हमारे Web3 एप्लिकेशन के लिए एक Wagmi कॉन्फ़िगरेशन सेट करता है, मेटाडेटा, समर्थित चेन और प्रमाणीकरण सेटिंग्स को परिभाषित करता है, जिसमें वॉलेट और सोशल लॉगिन विकल्प शामिल हैं, और इसे एक्सपोर्ट में संग्रहीत करता है। प्रमाणीकरण स्थिति पर नज़र रखने के लिए हमें एक संदर्भ API भी बनाना होगा। config इसके बाद, Frontend निर्देशिका में 'context' नाम से एक नया फ़ोल्डर बनाएँ और एक इंडेक्स फ़ाइल जोड़ें, जिसके परिणामस्वरूप पथ होगा। इसमें निम्नलिखित कोड जोड़ें। संदर्भ API /frontend/context/index.tsx https://gist.github.com/Daltonic/db7330a9159ff83727cda0a384fd907e?embedable=true यह कोड Wagmi और React Query का उपयोग करके Web3Modal प्रदाता को सेट करता है, प्रोजेक्ट ID और थीम वैरिएबल के साथ Web3 मॉडल को कॉन्फ़िगर करता है और एप्लिकेशन को WagmiProvider और QueryClientProvider में लपेटता है। : आइए ऊपर दिए गए कॉन्फ़िगरेशन को शामिल करने के लिए अपने एप्लिकेशन लेआउट को अपडेट करें। पर जाएं और इसके कोड को नीचे दिए गए कोड से बदलें। लेआउट अपडेट करना /frontend/app/layout.tsx https://gist.github.com/Daltonic/2b54f191d56fa02f0ae3974bd8ffd11b?embedable=true उपरोक्त कोड Next.js अनुप्रयोग के लिए मूल लेआउट सेट करता है, जिसमें मेटाडेटा, फ़ॉन्ट, शैलियाँ, और Web3 मॉडल, टोस्ट नोटिफिकेशन, तथा हेडर और फ़ूटर जैसे लेआउट घटकों के लिए प्रदाता शामिल हैं। अब, हमें और घटकों में लॉगिन बटन को सक्षम करने और नीचे दी गई जानकारी का उपयोग करके उनके कोड को अपडेट करने की आवश्यकता है। लॉगिन बटन /frontend/app/components/layout/Header.tsx /frontend/app/components/shared/Menu.tsx https://gist.github.com/Daltonic/f9f60e85c18da94a5bbc97d1acb3d423?embedable=true यह कोड नेविगेशन बार के लिए एक रिएक्ट घटक को परिभाषित करता है जिसमें एक लोगो, नेविगेशन लिंक, एक कस्टम मेनू और एक लॉगिन बटन शामिल होता है जो विभिन्न स्क्रीन आकारों के लिए उत्तरदायी डिज़ाइन के साथ एक वेब 3 मॉडल लॉन्च करता है। जब आप लॉगिन बटन पर क्लिक करते हैं और अपने पसंदीदा प्रदाता, एक्स, फेसबुक, गूगल, डिस्कॉर्ड या एथेरियम के साथ आगे बढ़ते हैं, तो निम्नलिखित चित्र इस बात के प्रमाण के रूप में सामने आएंगे कि हमने जो किया है वह काम करता है। शानदार, आइए गहराई से जानें और अपना डेटाबेस और NextJs API-आधारित सिस्टम सेट करें। प्रक्रिया पर किसी भी भ्रम के लिए, कृपया नीचे दिए गए वीडियो अनुभाग को देखें; बस सुनिश्चित करें कि आप मार्क पर रुकें। 02:57:59 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=9305&si=ODHxKlut7o3iLl5&embedable=true डेटाबेस स्क्रिप्ट सबसे पहले, आइए NextJs कॉन्फ़िगरेशन स्क्रिप्ट को अपडेट करें ताकि हमारे पृष्ठों और समापन बिंदुओं को उचित रूप से संबोधित किया जा सके और हमारी दूरस्थ छवियों को चेतावनियों और जांच से मुक्त किया जा सके। https://gist.github.com/Daltonic/a4ecb4d168f8bb01cb8abb600653c4cf?embedable=true यह कोड एक Next.js कॉन्फ़िगरेशन ऑब्जेक्ट को परिभाषित करता है जो API रूट पुनर्लेखन और छवि अनुकूलन को सेट करता है, जिससे किसी भी HTTPS होस्टनाम से दूरस्थ छवियों और लोकलहोस्ट डोमेन से स्थानीय छवियों की अनुमति मिलती है। हम इस एप्लिकेशन के लिए SQLite का उपयोग करेंगे, लेकिन आप MYSQL या NOSQL प्रदाताओं जैसे अधिक मजबूत समाधान का उपयोग करने के लिए स्वतंत्र हैं। सरलता के लिए, आइए SQLite फ़्लैट फ़ाइल के साथ काम करें। डेटाबेस कॉन्फ़िगरेशन स्क्रिप्ट फ़ाइल पथ बनाएं और उसमें नीचे दिए गए कोड जोड़ें। /frontend/app/api/database.ts https://gist.github.com/Daltonic/b699c52587b28c2d9435827837019633?embedable=true यह कोड SQLite डेटाबेस कनेक्शन सेट करता है, दो API फ़ंक्शन, और परिभाषित करता है, ताकि डेटाबेस पर GET और POST अनुरोध निष्पादित किए जा सकें, त्रुटि हैंडलिंग और वादा-आधारित एसिंक्रोनस निष्पादन के साथ। जब भी हम डेटाबेस से डेटा भेजना या प्राप्त करना चाहेंगे, हम इन कोड का उपयोग करेंगे। apiGet apiPost हमें अपनी सभी सामग्री रखने के लिए एक डेटाबेस फ़्लैट फ़ाइल और एक टेबल दोनों बनाने की ज़रूरत है। फ़ाइल पथ बनाएँ और उसमें नीचे दिए गए कोड जोड़ें। डेटाबेस माइग्रेशन स्क्रिप्ट /frontend/app/api/migrations.ts https://gist.github.com/Daltonic/4c213153fe53334fcf8444666587d6a5?embedable=true यह कोड एक डेटाबेस माइग्रेशन फ़ंक्शन को परिभाषित करता है जो SQLite का उपयोग करके निर्दिष्ट कॉलम के साथ एक 'मूवीज़' तालिका बनाता है, यदि वह मौजूद नहीं है, और ऑपरेशन के परिणाम को लॉग करता है। अब निर्देशिका पर इंगित टर्मिनल में नीचे दिए गए कमांड को चलाएँ। /frontend $ cd frontend $ npx esrun app/api/migrations.ts यह ध्यान दिया जाना चाहिए कि यह प्रक्रिया फ्रंटएंड निर्देशिका के रूट पर नामक एक डेटाबेस फ्लैट फ़ाइल भी बनाएगी। हमने इस कमांड को package.json स्क्रिप्ट में भी जोड़ा है, इसलिए फ्रंटएंड निर्देशिका पर चलाना उसी तरह काम करना चाहिए। movies.db $ yarn migrate दृश्य सहायता के लिए नीचे दिया गया वीडियो देखें, इसे पर रोक दें। 03:10:54 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=10679&si=-uhv8Zw0T3Gx0XgQ&embedable=true अनुप्रयोग समापन बिंदु अब, आइए मूवी बनाने, पढ़ने, अपडेट करने और हटाने के लिए कुछ एंडपॉइंट परिभाषित करें। हम इन एंडपॉइंट को बनाने के लिए NextJs API प्रावधान का उपयोग करेंगे। मूवी बनाने के लिए, आवश्यक जानकारी में उपयोगकर्ता आईडी, मूवी का नाम, छवि, वीडियो URL, रिलीज़ दिनांक, शैली, रेटिंग, भाषा, अवधि और पृष्ठभूमि विवरण शामिल हैं। फ़ाइल पथ बनाएँ और उसमें नीचे दिए गए कोड जोड़ें। मूवी एंडपॉइंट बनाएँ /frontend/app/api/movies/create/route.ts https://gist.github.com/Daltonic/bf8a431ec00aa71491ae71781fb99278?embedable=true यह कोड POST अनुरोधों को संभालने, मूवी डेटा को मान्य और संसाधित करने, एक अद्वितीय स्लग उत्पन्न करने और त्रुटियों को संभालने और JSON प्रतिक्रियाओं को वापस करने के दौरान apiPost फ़ंक्शन का उपयोग करके डेटाबेस में डेटा डालने के लिए एक समापन बिंदु को परिभाषित करता है। मूवी को अपडेट करने के लिए, आवश्यक जानकारी में यूजर आईडी, स्लग और मूवी बनाते समय दी गई अन्य जानकारी शामिल है। फ़ाइल पथ बनाएँ और उसमें नीचे दिए गए कोड जोड़ें। मूवी एंडपॉइंट अपडेट करें /frontend/app/api/movies/update/route.ts https://gist.github.com/Daltonic/2ed7d44cb8efe091675ebc0fc1bdf27c?embedable=true यह कोड मूवी को अद्यतन करने, आवश्यक गुणों को मान्य करने, तथा apiPost फ़ंक्शन का उपयोग करके डेटाबेस में मूवी डेटा को अद्यतन करने के लिए SQL क्वेरी निष्पादित करने के लिए POST अनुरोधों को संभालने के लिए एक समापन बिंदु को परिभाषित करता है। मूवी को हटाने के लिए, आवश्यक जानकारी में मूवी का उपयोगकर्ता आईडी और स्लग शामिल है। फ़ाइल पथ बनाएँ और उसमें नीचे दिए गए कोड जोड़ें। मूवी एंडपॉइंट हटाएं /frontend/app/api/movies/delete/route.ts https://gist.github.com/Daltonic/aa7ab36b982ad1f377b2a4d26930dd8d?embedable=true यह कोड मूवी को हटाने के लिए POST अनुरोधों को संभालने, आवश्यक गुणों (userId और slug) को मान्य करने, और apiPost फ़ंक्शन का उपयोग करके डेटाबेस से मूवी को हटाने के लिए SQL क्वेरी निष्पादित करने के लिए एक एंडपॉइंट को परिभाषित करता है। मूवीज़ प्राप्त करने के लिए आवश्यक वैकल्पिक डेटा पेजसाइज़ और यूजरआईडी हैं, जिन्हें परिणामों को फ़िल्टर और पेजिनेट करने के लिए क्वेरी पैरामीटर के रूप में पास किया जा सकता है। फ़ाइल पथ बनाएँ और उसमें नीचे दिए गए कोड जोड़ें। सभी मूवीज़ एंडपॉइंट /frontend/app/api/movies/all/route.ts https://gist.github.com/Daltonic/23bb2aa55446995dad87084bb7968c3e?embedable=true उपरोक्त कोड मूवी प्राप्त करने के लिए GET अनुरोधों को संभालने के लिए एक समापन बिंदु को परिभाषित करता है, जो userId द्वारा वैकल्पिक फ़िल्टरिंग और pageSize द्वारा पृष्ठांकन की अनुमति देता है, और JSON प्रारूप में परिणाम लौटाता है। एक सिंगल मूवी को पुनः प्राप्त करने के लिए, आवश्यक डेटा मूवी का स्लग है। फ़ाइल पथ बनाएँ और उसमें नीचे दिए गए कोड जोड़ें। सिंगल मूवी एंडपॉइंट /frontend/app/api/movies/[slug]/route.ts https://gist.github.com/Daltonic/64e069e9bafd026a83796eaa95334ac8?embedable=true यह कोड किसी मूवी को उसके स्लग द्वारा प्राप्त करने, स्लग पैरामीटर को मान्य करने, तथा apiGet फ़ंक्शन का उपयोग करके डेटाबेस से मूवी डेटा प्राप्त करने के लिए SQL क्वेरी निष्पादित करने के लिए GET अनुरोधों को संभालने के लिए एक समापन बिंदु को परिभाषित करता है। यह उन सभी समापन बिंदुओं को चिह्नित करता है जिनकी हमें इस एप्लिकेशन के लिए आवश्यकता होगी। यदि आपको इन समापन बिंदुओं को बेहतर ढंग से समझने में मदद करने के लिए किसी दृश्य सहायता की आवश्यकता है, तो कृपया नीचे दिया गया वीडियो देखें, बस सुनिश्चित करें कि आप टाइमस्टैम्प पर रुकें। 03:48:22 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=10679&si=3Ynq9tNLx5SZXHBE&embedable=true समापन बिंदु एकीकरण हमारा काम पहले से कोड किए गए घटकों और पृष्ठों की समीक्षा करना और उन्हें अपडेट करना है, प्रत्येक के उद्देश्य और कार्यक्षमता को समझाना और मौजूदा कोड में हमारे द्वारा किए गए परिवर्तनों का दस्तावेजीकरण करना है। हम निर्देशिका में पहले बनाए गए एंडपॉइंट्स के साथ बातचीत करने के लिए एक सेवा बनाकर शुरू करेंगे। api फ़ाइल पथ बनाएं और उसमें नीचे दिए गए कोड जोड़ें। /frontend/app/services/api.service.ts https://gist.github.com/Daltonic/fdf65c7ffaf3ea8219c617cdb7c96375?embedable=true यह सेवा मूवी डेटाबेस के साथ इंटरैक्ट करने के लिए कार्यों का एक सेट प्रदान करती है, जिससे एप्लिकेशन को मूवी लाने, स्लग द्वारा एकल मूवी लाने, नई मूवी बनाने, मौजूदा मूवी को अपडेट करने, मूवी को हटाने और API अनुरोधों और हैंडलिंग त्रुटियों का उपयोग करके फाइल अपलोड करने की अनुमति मिलती है। आवेदन पृष्ठ आइए हमारे एप्लिकेशन से जुड़े विभिन्न पृष्ठों की समीक्षा करें और उन्हें अपडेट करें। आपको बहुत ज़्यादा चीज़ें बदलने की ज़रूरत नहीं होगी, बस यहाँ हाइलाइट की गई चीज़ें ही बदलेंगी। मूवी पेज बनाएं यह पृष्ठ एक मूवी प्रकाशन प्रपत्र है जो उपयोगकर्ताओं को वीडियो और छवि फ़ाइलें अपलोड करने, मूवी विवरण इनपुट करने और रिएक्ट और वाग्मी लाइब्रेरी का उपयोग करके सत्यापन और त्रुटि प्रबंधन के साथ मूवी प्रकाशित करने के लिए फॉर्म सबमिट करने की अनुमति देता है। अब, में मौजूद फ़ाइल को नीचे दिए गए कोड से अपडेट करें। /frontend/app/pages/create/page.tsx https://gist.github.com/Daltonic/0ec440d6dfc2b46e07ecec3e81f532c6?embedable=true मूल कोड की तुलना में इस कोड में किये गये परिवर्तन इस प्रकार हैं: से फ़ंक्शन आयात किया और एक नई मूवी बनाने के लिए इसे फ़ंक्शन में उपयोग किया। api.service createMovie handleSubmit फ़ंक्शन कॉल में पैरामीटर जोड़ा गया, जो हुक से उपयोगकर्ता का पता पास करता है। createMovie userId useAccount द्वारा लौटाए गए वादे को संभालने के लिए का उपयोग करने के लिए फ़ंक्शन को अपडेट किया गया। createMovie toast.promise handleSubmit फ़ंक्शन में फ़ंक्शन कॉल में त्रुटि प्रबंधन जोड़ा गया। handleSubmit createMovie ये परिवर्तन फॉर्म को API में मूवी डेटा सबमिट करने और नई मूवी प्रविष्टि बनाने के साथ-साथ त्रुटियों को संभालने और सफलता संदेश प्रदर्शित करने में सक्षम बनाते हैं। मूवी पेज संपादित करें यह मूवी संपादन पृष्ठ अधिकृत उपयोगकर्ताओं को मूवी विवरण अपडेट करने, पोस्टर और वीडियो अपलोड करने, तथा सत्यापन और त्रुटि प्रबंधन के साथ परिवर्तनों को सहेजने की अनुमति देता है, तथा विशेष रूप से उपयोगकर्ताओं को उनकी मूवी संपादित करने के लिए डिज़ाइन किए गए React, Wagmi और Next.js का उपयोग करता है। अब, में मौजूद फ़ाइल को नीचे दिए गए कोड के साथ अपडेट करें। /frontend/app/pages/movies/edit/[slug]/page.tsx https://gist.github.com/Daltonic/63ddb6e3c65e3bcd2665ab0e3ffb6205?embedable=true कोड में किए गए उन्नयन मूल से भिन्न हैं: से और फ़ंक्शन आयातित किए गए और उनका उपयोग क्रमशः हुक और फ़ंक्शन में किया गया। @/app/services/api.service fetchMovie updateMovie useEffect handleSubmit मूवी डेटा पुनः प्राप्त करने के लिए विधि को फ़ंक्शन से प्रतिस्थापित किया गया। posters.find() fetchMovie अद्यतन मूवी विवरण के साथ फ़ंक्शन को कॉल करने के लिए फ़ंक्शन को अद्यतन किया गया। updateMovie handleSubmit फ़ंक्शन में फ़ंक्शन कॉल में त्रुटि प्रबंधन जोड़ा गया। handleSubmit updateMovie ये परिवर्तन हमारे एप्लिकेशन को मूवी डेटा को पुनः प्राप्त करने और अपडेट करने के लिए हमारे API एंडपॉइंट्स के साथ इंटरैक्ट करने में सक्षम बनाते हैं, जबकि मूल कोड हमारे स्थानीय ऐरे पर निर्भर करता था। posters होम पेज यह होम पेज बैनर घटक, फिल्मों की सूची (एपीआई स्रोत या लोडिंग यूआई से) और सदस्यता विकल्पों को प्रस्तुत करता है, तथा उपयोगकर्ताओं के लिए एक आकर्षक और सूचनात्मक लैंडिंग पेज प्रदान करने के लिए रिएक्ट और नेक्स्ट.जेएस का उपयोग करता है। में मौजूद फ़ाइल को निम्नलिखित कोड के साथ अपडेट करें। /frontend/app/pages/page.tsx https://gist.github.com/Daltonic/97cb49662ed70be9b183b4f601b529d6?embedable=true हमने होम पेज पर जो परिवर्तन किए हैं वे इस प्रकार हैं: से फ़ंक्शन को आयात किया और हमारे API से मूवी डेटा प्राप्त करने के लिए हुक में इसका उपयोग किया। ./services/api.service fetchMovies useEffect स्थानीय डेटा को फ़ंक्शन कॉल से प्रतिस्थापित किया गया, जो हमारे API से डेटा प्राप्त करता है। posters fetchMovies स्थिति निर्धारित करने से पहले द्वारा लौटाए गए वादे के पूरा होने की प्रतीक्षा करने के लिए कीवर्ड जोड़ा गया। movies fetchMovies await ये परिवर्तन हमारे एप्लिकेशन को स्थानीय डेटा पर निर्भर रहने के बजाय हमारे API से मूवी डेटा प्राप्त करने में सहायता करते हैं, जिससे एप्लिकेशन अधिक गतिशील और डेटा-संचालित हो जाता है। उपयोगकर्ता खाता पृष्ठ यह पृष्ठ वर्तमान में कनेक्टेड उपयोगकर्ता द्वारा पोस्ट की गई फिल्मों की सूची प्रदर्शित करता है, जिसमें डेटा प्राप्त करते समय लोडिंग स्केलेटन प्लेसहोल्डर होता है और एक संदेश होता है जो उपयोगकर्ता को उनके खाते को कनेक्ट करने के लिए प्रेरित करता है यदि उन्होंने ऐसा नहीं किया है, तो वाग्मी और रिएक्ट-लोडिंग-स्केलेटन का उपयोग करते हुए। में मौजूद फ़ाइल को निम्नलिखित कोड के साथ अपडेट करें। /frontend/app/pages/account/page.tsx https://gist.github.com/Daltonic/ba714bfa557f10aebacfa8b5ac3d7111?embedable=true पृष्ठ में किये गये परिवर्तन इस प्रकार हैं: से फ़ंक्शन आयात किया और हमारे API से मूवी डेटा प्राप्त करने के लिए हुक में इसका उपयोग किया। @/app/services/api.service fetchMovies useEffect स्थानीय डेटा को फ़ंक्शन कॉल से प्रतिस्थापित किया गया, जो हमारे API से डेटा प्राप्त करता है। posters fetchMovies उपयोगकर्ता-विशिष्ट मूवी डेटा को पुनः प्राप्त करने के लिए फ़ंक्शन को एक तर्क के रूप में दिया गया। fetchMovies address मूवी सूची प्रस्तुत करने से पहले के लिए सशर्त जांच को हटा दिया गया है, क्योंकि फ़ंक्शन अब इस तर्क को संभालता है। address fetchMovies लोडिंग ढांचे को प्रदर्शित करने के लिए सशर्त कथन को सरल बना दिया गया है, क्योंकि अब यह केवल स्थिति पर निर्भर करता है। loaded ये परिवर्तन हमारे API से कनेक्टेड उपयोगकर्ता के लिए विशिष्ट मूवी डेटा प्राप्त करते हैं, तथा डेटा प्राप्त करते समय लोडिंग स्केलेटन प्रदर्शित करते हैं। फ़िल्म विवरण पृष्ठ यह पृष्ठ किसी एकल फिल्म का विवरण प्रदर्शित करता है, जिसमें उसका नाम, रिलीज वर्ष, रेटिंग, अवधि, शैली और पृष्ठभूमि की जानकारी, वीडियो प्लेयर और संबंधित फिल्में शामिल हैं, और यदि उपयोगकर्ता फिल्म का स्वामी है तो Next.js और Wagmi का उपयोग करके फिल्म को संपादित करने या हटाने के विकल्प भी प्रदान करता है। में पाई गई फ़ाइल को निम्नलिखित कोड के साथ अपडेट करें। /frontend/app/pages/movies/[slug]/page.tsx https://gist.github.com/Daltonic/5e37c94db3d73005a481ffd0cd141140?embedable=true हमने यहाँ कुछ बड़े बदलाव किए हैं! हमने जो किया उसका सारांश यहाँ दिया गया है: से , और फ़ंक्शन आयात किए और उन्हें हमारे API एंडपॉइंट्स के साथ इंटरैक्ट करने के लिए उपयोग किया। @/app/services/api.service deleteMovie fetchMovie fetchMovies मूवी डेटा पुनः प्राप्त करने के लिए स्थानीय डेटा को API कॉल से प्रतिस्थापित किया गया। फ़ंक्शन का उपयोग करके मूवी हटाने की कार्यक्षमता को कार्यान्वित किया गया। deleteMovie मूवी हटाते समय अधिसूचना प्रदर्शित करने के लिए उपयोग किया गया। toast.promise स्थानीय डेटा हटा दिया गया और उसकी जगह API कॉल लगा दी गई। posters फ़ंक्शन को कॉल करने और प्रतिक्रिया को संभालने के लिए फ़ंक्शन को अपडेट किया गया। deleteMovie handleSubmit और फ़ंक्शन को कॉल करने के लिए हुक को अपडेट किया गया। fetchMovie fetchMovies useEffect इन परिवर्तनों के कारण हमारा एप्लिकेशन मूवी डेटा को पुनः प्राप्त करने और हटाने के लिए हमारे API के साथ इंटरैक्ट करता है और हटाने की प्रक्रिया के दौरान उपयोगकर्ता को सूचनाएं प्रदर्शित करता है। नीचे दिए गए वीडियो का यह हिस्सा आपको दिखाएगा कि हमने इन पृष्ठों को एंडपॉइंट के साथ कैसे एकीकृत किया है, अगर आपको कोई समस्या आती है तो कृपया उस भाग को देखने के लिए स्वतंत्र महसूस करें। बस सुनिश्चित करें कि आप टाइमस्टैम्प पर रुकें। 04:57:41 https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=14070&si=XCKxX3HvX3RjtNHY&embedable=true अनुप्रयोग घटक आइए हमारे एप्लिकेशन में प्रत्येक घटक के उद्देश्य पर चर्चा करें। हम किसी भी घटक को अपडेट करेंगे जिसे संशोधित करने की आवश्यकता है। बैनर घटक यह घटक मूवी बैनर की एक घूमती हुई पृष्ठभूमि छवि प्रदर्शित करता है, जो हर 5 सेकंड में मूवी छवियों की एक सरणी के माध्यम से चक्रित होता है, जिससे एक सरल और स्वचालित स्लाइड शो प्रभाव बनता है। इस घटक कोड का मूल्यांकन पर किया जा सकता है। /frontend/app/components/home/Banner.tsx पोस्टर घटक यह घटक स्वाइपर लाइब्रेरी का उपयोग करके मूवी पोस्टर का एक उत्तरदायी और इंटरैक्टिव कैरोसेल प्रदर्शित करता है, जिसमें ऑटोप्ले, पेजिनेशन और नेविगेशन जैसी विशेषताएं हैं, जो एक प्रोप के रूप में पास की गई फिल्मों की सूची प्रदर्शित करता है, जिसमें अलग-अलग स्क्रीन आकारों के अनुकूल एक गतिशील लेआउट होता है। इस घटक कोड का मूल्यांकन पर किया जा सकता है। /frontend/app/components/home/Posters.tsx पोस्टर यूआई घटक यह घटक मूवी पोस्टर अनुभाग के लिए एक प्लेसहोल्डर कंकाल लेआउट प्रदर्शित करता है, जो रिएक्ट-लोडिंग-स्केलेटन लाइब्रेरी का उपयोग करता है, जो "पोस्टर्स" प्रॉप के आधार पर कंकाल पोस्टर की एक गतिशील संख्या दिखाता है, जिसमें विभिन्न स्क्रीन आकारों के अनुकूल एक उत्तरदायी डिज़ाइन होता है, जो वास्तविक पोस्टर डेटा प्राप्त होने और प्रदर्शित होने तक लोडिंग स्थिति को इंगित करता है। इस घटक कोड का मूल्यांकन पर किया जा सकता है। /frontend/app/components/home/PosterUI.tsx सदस्यता घटक यह घटक सदस्यता योजना अनुभाग प्रदर्शित करता है, जिसमें विभिन्न डमी योजनाओं को उनके विवरण, मूल्य और लाभों के साथ प्रदर्शित किया जाता है। यह उपयोगकर्ताओं को अपनी आवश्यकताओं के अनुरूप योजना चुनने की अनुमति देता है, उपयोगकर्ता अनुभव को बढ़ाने के लिए उत्तरदायी ग्रिड लेआउट और इंटरैक्टिव होवर प्रभावों का उपयोग करता है। इस घटक कोड का मूल्यांकन पर किया जा सकता है। /frontend/app/components/home/Subscription.tsx हेडर घटक यह घटक पृष्ठ के शीर्ष पर एक निश्चित नेविगेशन बार प्रस्तुत करता है, जिसमें एक लोगो, विभिन्न अनुभागों के लिंक के साथ एक नेविगेशन मेनू, उत्तरदायी डिज़ाइन के लिए एक मेनू टॉगल बटन और एक लॉगिन बटन होता है, जो पूरे एप्लिकेशन में एक सुसंगत और सुलभ हेडर अनुभाग प्रदान करता है। इस घटक कोड का मूल्यांकन पर किया जा सकता है। /frontend/app/components/layout/Header.tsx पाद घटक यह घटक पृष्ठ के निचले भाग में एक फ़ुटर अनुभाग प्रस्तुत करता है, जिसमें एप्लिकेशन का लोगो, एक संक्षिप्त विवरण, नेविगेशन लिंक, संपर्क जानकारी और सिया फ़ाउंडेशन द्वारा संचालित विकेंद्रीकृत भंडारण समाधान का उल्लेख करने वाला क्रेडिट शामिल है, जो प्रासंगिक जानकारी और लिंक के साथ एक स्पष्ट और व्यवस्थित फ़ुटर अनुभाग प्रदान करता है। इस घटक कोड का मूल्यांकन पर किया जा सकता है। /frontend/app/components/layout/Footer.tsx मेनू घटक यह घटक एक उत्तरदायी मेनू टॉगल बटन प्रदान करता है, जिस पर क्लिक करने पर नेविगेशन लिंक युक्त ड्रॉपडाउन मेनू खुलता या बंद होता है, जिससे उपयोगकर्ता छोटी स्क्रीन पर एप्लिकेशन के विभिन्न अनुभागों तक पहुँच सकते हैं, जबकि बड़ी स्क्रीन पर मेनू छिपा रहता है जहाँ नेविगेशन लिंक पहले से ही दिखाई दे रहे हैं। इस घटक कोड का मूल्यांकन पर किया जा सकता है। /frontend/app/components/shared/Menu.tsx मूवी कार्ड घटक यह घटक एक एकल मूवी के पोस्टर को होवर इफ़ेक्ट के साथ प्रदर्शित करता है, जिसमें मूवी का नाम, रिलीज़ वर्ष और पृष्ठभूमि सारांश जैसी अतिरिक्त जानकारी दिखाई देती है, साथ ही यह मूवी के विवरण पृष्ठ के लिए एक लिंक के रूप में भी काम करता है, उपयोगकर्ता अनुभव को बढ़ाने के लिए उत्तरदायी डिज़ाइन और एनिमेटेड संक्रमण का उपयोग करता है। इस घटक कोड का मूल्यांकन पर किया जा सकता है। /frontend/app/components/shared/MovieCard.tsx अपलोड किया गया घटक यह घटक अपलोड की गई फ़ाइल, चाहे वह कोई छवि हो या वीडियो, का पूर्वावलोकन प्रदर्शित करता है, जिसमें प्रगति बार और एक हटाने वाला बटन होता है, जिससे उपयोगकर्ता अपलोड की गई फ़ाइल की समीक्षा और उसे हटा सकते हैं, साथ ही एनिमेशन और होवर प्रभावों के साथ एक आकर्षक और इंटरैक्टिव इंटरफ़ेस भी प्रदान करता है। इस घटक कोड का मूल्यांकन पर किया जा सकता है। /frontend/app/components/shared/Uploaded.tsx अपलोडर घटक यह घटक फ़ाइलों, विशेष रूप से वीडियो या पोस्टरों को अपलोड करने के लिए एक उपयोगकर्ता इंटरफ़ेस प्रदान करता है, जिसमें ड्रैग-एंड-ड्रॉप, फ़ाइल प्रकार सत्यापन, आकार सीमा, अपलोड प्रगति ट्रैकिंग और सफलता/त्रुटि अधिसूचना जैसी विशेषताएं होती हैं, जो अपलोड प्रक्रिया को संभालने के लिए रिएक्ट स्टेट मैनेजमेंट, इवेंट हैंडलिंग और API एकीकरण के संयोजन का उपयोग करती हैं। में मौजूद फ़ाइल को निम्नलिखित कोड के साथ अपडेट करें। /frontend/app/components/shared/uploader.tsx https://gist.github.com/Daltonic/2aee8838dedcd6f14ef0f25103106a3a?embedable=true इस घटक में किये गये परिवर्तन इस प्रकार हैं: : मूल कोड में वास्तविक अपलोड फ़ाइल कार्यक्षमता लागू नहीं थी। यह फ़ाइल अपलोड किए बिना केवल एक सफलता टोस्ट अधिसूचना दिखाता था। इस अपडेट किए गए कोड में से फ़ंक्शन शामिल है जो फ़ाइल अपलोड को संभालता है। फ़ाइल अपलोड करने की कार्यक्षमता api.service uploadFile : अद्यतन कोड अपलोड प्रगति को ट्रैक करता है और इसे UI पर प्रदर्शित करता है। प्रगति ट्रैकिंग : अद्यतन कोड में फ़ाइल अपलोड प्रक्रिया के लिए त्रुटि प्रबंधन शामिल है। त्रुटि प्रबंधन : अद्यतन कोड नियमित अभिव्यक्ति का उपयोग करके अधिक मजबूत फ़ाइल प्रकार सत्यापन का उपयोग करता है। फ़ाइल प्रकार सत्यापन : अद्यतन कोड बेहतर ढंग से संगठित है, जिसमें विभिन्न कार्यों को संभालने के लिए अलग-अलग फ़ंक्शन हैं, जिससे इसे पढ़ना और रखरखाव करना आसान हो जाता है। कोड संगठन : अपडेट किए गए कोड में कुछ यूआई अपडेट शामिल हैं, जैसे अपलोड की प्रगति दिखाना और अपलोड के दौरान रद्द करें बटन। यूआई अपडेट यह अद्यतन कोड अधिक पूर्ण और मजबूत है, जिसमें वास्तविक फ़ाइल अपलोड कार्यक्षमता, प्रगति ट्रैकिंग, त्रुटि प्रबंधन और बेहतर कोड संगठन शामिल है। नीचे दिया गया वीडियो प्रत्येक घटक के कार्य को अधिक विस्तार से समझाता है, कृपया अपनी बेहतरी के लिए इसे देखें। https://www.youtube.com/watch?v=ZJ8YWdVTWUA&t=17861&si=LNxLwBkKeE7kH3Xt&embedable=true और बस दोस्तों, हमने यह प्रोजेक्ट पूरा कर लिया है, और अब हमें जो आखिरी कदम उठाना है, वह है इस प्रोजेक्ट को ब्राउज़र पर लॉन्च करना। प्रोजेक्ट को ब्राउज़र पर लाइव देखने के लिए चलाएँ। $ yarn build && yarn start यदि आपको कोई समस्या आती है, तो समस्या निवारण के लिए निम्नलिखित संसाधनों का संदर्भ लें। अगली बार तक, शुभकामनाएँ! 🏠 सिया वेबसाइट 🔥सिया रेंटर्ड 👨💻 सिया रेंटर्ड एपीआई 🚀सिया डिस्कॉर्ड चैनल 💡 यूट्यूब वीडियो प्लेलिस्ट लेखक के बारे में मैं एक वेब3 डेवलपर हूँ और का संस्थापक हूँ, जो एक ऐसी कंपनी है जो व्यवसायों और व्यक्तियों को विकेंद्रीकृत एप्लिकेशन बनाने और लॉन्च करने में मदद करती है। मुझे सॉफ़्टवेयर उद्योग में 8 वर्षों से अधिक का अनुभव है, और मैं नए और अभिनव एप्लिकेशन बनाने के लिए ब्लॉकचेन तकनीक का उपयोग करने के बारे में भावुक हूँ। मैं चलाता हूँ जहाँ मैं वेब3 विकास पर ट्यूटोरियल और टिप्स साझा करता हूँ, और मैं नियमित रूप से ब्लॉकचेन स्पेस में नवीनतम रुझानों के बारे में ऑनलाइन लेख पोस्ट करता हूँ। डैप मेंटर्स डैप मेंटर्स नाम से एक YouTube चैनल
