NextJs, Tailwind और Sia Renterd का उपयोग करके Web3 मूवी स्ट्रीमिंग dApp बनाएं

परिचय

वेब विकसित हो रहा है, और वेब3 तकनीकें पारंपरिक उद्योगों में क्रांति ला रही हैं, जिसमें वीडियो स्ट्रीमिंग भी शामिल है। ओडिसी जैसे प्लेटफ़ॉर्म इस मामले में अग्रणी हैं, जो YouTube और रंबल के लिए विकेंद्रीकृत विकल्प प्रदान करते हैं। इसी तरह, Google Drive और Dropbox जैसे पुराने प्रदाताओं के विपरीत, Sia डेटा स्टोरेज को बदल रहा है, गोपनीयता-केंद्रित और उपयोगकर्ता-केंद्रित दृष्टिकोण प्रदान कर रहा है।

NextJs, TypeScript, Tailwind CSS और Sia Renterd का उपयोग करके अत्याधुनिक Web3 मूवी स्ट्रीमिंग dApp बनाने की यात्रा पर हमारे साथ जुड़ें। यह ट्यूटोरियल श्रृंखला आपको एक विकेंद्रीकृत एप्लिकेशन बनाने में मार्गदर्शन करेगी जो उपयोगकर्ता डेटा स्वामित्व और गोपनीयता सुनिश्चित करने के लिए Sia की ब्लॉकचेन तकनीक का लाभ उठाती है।

इस ट्यूटोरियल के अंत तक, आप निम्नलिखित में विशेषज्ञता हासिल कर लेंगे:

• दोस्तों के साथ साझा करने या स्कूल प्रोजेक्ट के रूप में उपयोग करने के लिए एक पूर्ण कार्यात्मक मूवी स्ट्रीमिंग प्लेटफ़ॉर्म बनाएं
• अपना स्वयं का SaaS (सॉफ़्टवेयर ऐज़ अ सर्विस) एप्लिकेशन लॉन्च करें
• वीडियो स्ट्रीमिंग उद्योग में वेब3 प्रौद्योगिकियों की क्षमता को अनलॉक करें

परियोजना को क्रियान्वित होते देखने के लिए नीचे डेमो वीडियो देखें , तथा इस तरह की और अधिक नवीन सामग्री के लिए हमारे चैनल की सदस्यता लें !

आवश्यक शर्तें

साथ चलने के लिए, सुनिश्चित करें कि आपके पास निम्नलिखित उपकरण स्थापित हैं, और स्टैक से परिचित होने से आपकी समझ भी बढ़ेगी:

• नोडजेएस
• नेक्स्टजेएस
• टेलविंड सीएसएस
• टाइपप्रति
• डॉकर (आवश्यक)

इस तीन भाग वाली श्रृंखला में निम्नलिखित विषय शामिल होंगे:

• भाग 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 स्थापित करना होगा; कृपया नीचे दिया गया छोटा वीडियो देखें, जो काफी हद तक सब कुछ संक्षेप में बताता है।

जैसा कि ऊपर दिए गए वीडियो में दिखाया गया है, रेंटर्ड एप्लीकेशन के साथ एक सीड फ्रेज तैयार करें और इसे अपने एनवायरनमेंट वैरिएबल में शामिल करें जैसा कि ऊपर दिए गए वीडियो में बताया गया है। पासवर्ड को किसी ऐसे पासवर्ड से बदलें जिसे आप आसानी से याद रख सकें।

इसके बाद, हमें आधिकारिक वेबसाइट से Docker डाउनलोड करके इंस्टॉल करना होगा, अगर आपने पहले से ऐसा नहीं किया है। वैकल्पिक रूप से, यदि संभव हो तो Docker इंस्टेंस चलाने के लिए Gitpod या VPS जैसे किसी मुफ़्त ऑनलाइन प्लेटफ़ॉर्म का उपयोग करें। अन्यथा, इसे अपने स्थानीय कंप्यूटर पर इंस्टॉल करें।

अंत में, हम इस प्रोजेक्ट के रूट पर निम्नलिखित डॉकर कमांड चलाकर एक डॉकर कंटेनर बना सकते हैं। सुनिश्चित करें कि टर्मिनल इस docker-compose.yml फ़ाइल के समान निर्देशिका स्थान पर है।

 $ docker compose -f "docker-compose.yml" up -d --build

कंटेनर को नीचे खींचने के लिए कमांड पर ध्यान दें: $ docker compose -f "docker-compose.yml" down । इसे तब चलाएँ जब आप अपने Docker इंस्टेंस को बंद करना चाहते हैं (लेकिन अभी नहीं)।

यदि आपने उपरोक्त निर्देशों का सही ढंग से पालन किया है, तो जब आप http://localhost:9880 पर अपने ब्राउज़र पर जाएंगे तो आपको नीचे दिया गया इंटरफ़ेस दिखाई देगा।

लॉग इन करने के लिए अपना पासवर्ड (अपने पर्यावरण चर से) दर्ज करें। फिर, फ़ाइल अपलोड, डाउनलोड और स्ट्रीमिंग के लिए अपने Sia Renterd इंस्टेंस को सेट करने के लिए नीचे दिए गए वीडियो में कॉन्फ़िगरेशन प्रक्रिया का पालन करें।

उपरोक्त वीडियो 6:41 मिनट पर शुरू होता है, कृपया 20:01 मिनट पर रुकें, यह भाग आपको रेंटर्ड कॉन्फ़िगरेशन प्रक्रिया के माध्यम से मार्गदर्शन करेगा।

ध्यान रखें कि होस्ट मिलान के साथ ब्लॉकचेन सिंक्रोनाइजेशन प्रक्रिया को तैयार होने में 25 min तक का समय लगता है, इसलिए आपको पूरी प्रक्रिया में धैर्य रखना होगा।

कृपया Renterd पर vidtv नाम से एक नई बकेट बनाएँ, जहाँ इस प्रोजेक्ट के लिए हमारी सभी फ़ाइलें संग्रहीत की जाएँगी। यदि आपने उपरोक्त निर्देशों को सफलतापूर्वक निष्पादित किया है, तो आपका Renterd नोड अपलोड और डाउनलोड के लिए तैयार होना चाहिए। नीचे दी गई छवि देखें।

अद्भुत। इस बिंदु पर, हमारी रेंटर्ड सेवा फ़ाइलें प्राप्त करना शुरू करने के लिए तैयार है, लेकिन हमें इसके साथ प्रोग्रामेटिक रूप से संवाद करने की आवश्यकता है।

आइये, बैकएंड और फ्रंटएंड के लिए पैकेज और एनवायरनमेंट वैरिएबल सेट अप करके इस ट्यूटोरियल के पहले भाग को पूरा करें।

बैकएंड परियोजना सेटअप बैकएंड सेवा पैकेजों को स्थापित करने और आगे के विकास के लिए तैयार करने के लिए निम्नलिखित निर्देशों का पालन करें।

निम्नलिखित कमांड का उपयोग करके नए टर्मिनल इंस्टेंस से बैकएंड निर्देशिका पर नेविगेट करें:

 $ 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 पर जाने पर "स्वागत" संदेश प्रदर्शित करता है। आइए इस आधार पर निर्माण करें।

हमारे पास वर्तमान में ये कोड बैकएंड की सोर्स डायरेक्टरी में हैं। मैं आपको संक्षेप में इनके बारे में बताता हूँ।

उपयोगिता फ़ाइलें यह फ़ोल्डर, जिसे पूर्णतः backend/src/utils को संबोधित किया जा सकता है, में दो आवश्यक फ़ाइलें हैं: एक HTTP अपवाद हैंडलर फ़ंक्शन और फ़ाइल अपलोड जानकारी को संभालने के लिए एक इंटरफ़ेस।

यह कोड एक कस्टम HttpException वर्ग को परिभाषित करता है जो अंतर्निहित जावास्क्रिप्ट Error वर्ग का विस्तार करता है, जिससे विशिष्ट HTTP स्थिति कोड और संदेशों के साथ त्रुटि उदाहरणों के निर्माण की अनुमति मिलती है।

https://gist.github.com/Daltonic/bb37e1d4c5f84bc9c10fcbb8c3e19621

यह कोड एक इंटरफ़ेस FileUpload को परिभाषित करता है जो अपलोड की गई फ़ाइल का प्रतिनिधित्व करता है, इसके गुणों जैसे नाम, डेटा, आकार, एन्कोडिंग और अधिक को निर्दिष्ट करता है, इस बैकएंड एप्लिकेशन में फ़ाइल अपलोड को संभालने के लिए एक संरचित तरीका प्रदान करता है।

https://gist.github.com/Daltonic/64fb31bf3b19668a17d14f59e087a77e

और फिर backend/src रूट फ़ोल्डर में, हमारे पास यह index.ts फ़ाइल है जो CORS और फ़ाइल अपलोड समर्थन के साथ Express.js सर्वर सेट अप करती है, एक एकल GET रूट को परिभाषित करती है जो "स्वागत" संदेश लौटाती है, और त्रुटियों को पकड़कर उन्हें कस्टम HttpExceptions के रूप में पुनः फेंककर संभालती है, फिर पर्यावरण चर में निर्दिष्ट पोर्ट 9000 पर सर्वर शुरू करती है।

https://gist.github.com/Daltonic/8d76c3a212681d7bfe89b0792b0e707f

अब जबकि हमने मुख्य फाइलों को कवर कर लिया है, आइए services फ़ोल्डर में दो नई फाइलें बनाएं, जिनमें से प्रत्येक हमारे एप्लिकेशन में एक अलग उद्देश्य पूरा करेगी।

सेवा फ़ाइलें

backend/src फ़ोल्डर में, इस स्थान पर services नाम से एक नया फ़ोल्डर बनाएं, यहीं पर हम दो सेवाएँ बनाएंगे:

1. सिया सेवा : फ़ाइल अपलोड, डाउनलोड, स्ट्रीमिंग और कैशिंग को संभालती है, तथा रेंटर्ड सेवा के साथ संचार करती है।
2. पृष्ठभूमि सेवा : कैश्ड फ़ाइलों का प्रबंधन करती है, उन्हें प्रतिदिन 7 दिनों के बाद मध्य रात्रि में स्वचालित रूप से हटा देती है।

सिया सेवा

आइए backend/src/services फ़ोल्डर में sia.service.ts नाम से एक फ़ाइल बनाएं और इस सेवा को तैयार करने के लिए नीचे दिए गए चरणों का पालन करें।

यह कोड एक SiaService क्लास को परिभाषित करता है जो Sia API सेटिंग्स और एक मूल URL के लिए पर्यावरण चर के साथ आरंभ होता है, जो Sia सेवा के साथ इंटरैक्शन को प्रबंधित करने के लिए एक आधार प्रदान करता है। अब, आइए इस सेवा के लिए बाकी कोड प्रदान करें।

सिया नेटवर्क पर फ़ाइलें अपलोड करना सिया नेटवर्क पर फ़ाइलें अपलोड करने के लिए, हमें क्लास में इन तीन विधियों को जोड़ना होगा, दो निजी होंगी जबकि एक सार्वजनिक होगी।

यह कोड एक निजी विधि generateRandomString को परिभाषित करता है जो एक निर्दिष्ट लंबाई की एक यादृच्छिक स्ट्रिंग उत्पन्न करता है, जो अपरकेस और लोअरकेस अक्षरों और संख्याओं से बना होता है, एक पूर्वनिर्धारित स्ट्रिंग से यादृच्छिक रूप से वर्णों का चयन करने के लिए लूप का उपयोग करता है। हम Renterd को फ़ाइल भेजने से पहले प्रत्येक फ़ाइल का नाम बदलने के लिए इसका उपयोग करेंगे।

उपरोक्त कोड एक निजी विधि uploadToSiaService को परिभाषित करता है जो Axios का उपयोग करके Sia Renterd पर एक फ़ाइल अपलोड करता है, अपलोड प्रगति और त्रुटियों को संभालता है, और अपलोड विफल होने पर Axios प्रतिक्रिया लौटाता है या त्रुटि फेंकता है।

रेंटर्ड एंडपॉइंट्स एपीआई डॉक्यूमेंटेशन में लिखे गए हैं, जिन्हें आप देख सकते हैं या नीचे दिए गए वीडियो को देख सकते हैं, जहां मैंने समझाया है कि सिया रेंटर्ड एपीआई डॉक्यूमेंटेशन कैसे काम करता है।

अब आइए सार्वजनिक विधि को शामिल करें जिसे हम बाद में अपने अनुप्रयोग में समापन बिंदु के रूप में प्रदर्शित करेंगे।

यह कोड एक सार्वजनिक विधि uploadFile को परिभाषित करता है, जो एक अद्वितीय पहचानकर्ता उत्पन्न करके फ़ाइल अपलोड करता है, फ़ाइल को स्थानीय कैश में सहेजता है, और फिर इसे सिया रेंटर्ड पर अपलोड करता है, फ़ाइल का URL और सफलता संदेश लौटाता है या अपलोड विफल होने पर त्रुटि फेंकता है।

सिया नेटवर्क पर फ़ाइलें डाउनलोड करना सिया नेटवर्क पर फ़ाइलें डाउनलोड करने के लिए, हमें क्लास में इन दो विधियों को जोड़ना होगा, एक निजी होगी और दूसरी सार्वजनिक होगी।

यह कोड एक निजी विधि downloadFromSiaService को परिभाषित करता है जो Sia सेवा से एक फ़ाइल प्राप्त करता है, इसे स्थानीय रूप से कैश करता है, और फ़ाइल की एक पठनीय स्ट्रीम लौटाता है, त्रुटियों को संभालता है और यदि फ़ाइल नहीं मिलती है तो 404 छवि लौटाता है।

आइए उन response_files को बैकएंड निर्देशिका में उपलब्ध रखें, अन्यथा हमें 404.png फ़ाइल को कॉल करने में त्रुटि का अनुभव होगा। backend निर्देशिका में response_files नामक एक और फ़ोल्डर बनाएँ और उसमें निम्नलिखित छवियों को कॉपी करें।

बढ़िया, अब इस फ़ाइल डाउनलोड सेवा को पूरा करते हैं। SiaService क्लास में नीचे दी गई विधि भी जोड़ें।

यह कोड एक सार्वजनिक विधि downloadFile को परिभाषित करता है जो Sia Renterd से फ़ाइल प्राप्त करने के लिए निजी विधि downloadFromSiaService को कॉल करता है और प्राप्त फ़ाइल की पठनीय स्ट्रीम लौटाता है।

सेवा समापन बिंदु

अब समय आ गया है कि हम इन विभिन्न विधियों को उनके संबंधित एंडपॉइंट से जोड़ दें, वर्तमान में, हमारे पास केवल एक ही है, लेकिन हमें फ़ाइलों को अपलोड करने और डाउनलोड करने के लिए दो अतिरिक्त की आवश्यकता होगी। फ़ाइल स्ट्रीमिंग भी डाउनलोड एंडपॉइंट का उपयोग करेगी।

backend/src/index.ts फ़ाइल पर जाएं और इसकी सामग्री को इन कोडों से अपडेट करें।

यह कोड CORS और फ़ाइल अपलोड समर्थन के साथ एक Express.js सर्वर स्थापित करता है, जिसमें तीन समापन बिंदु परिभाषित किए गए हैं: एक स्वागत संदेश, Sia नेटवर्क पर फ़ाइल अपलोड, और Sia नेटवर्क से फ़ाइल डाउनलोड, फ़ाइल संचालन को संभालने के लिए SiaService वर्ग और त्रुटि प्रबंधन के लिए HttpException का उपयोग करना।

यदि आपको कुछ दृश्य सहायता की आवश्यकता है तो नीचे दिए गए वीडियो के इस भाग को देखें, सुनिश्चित करें कि आप 01:50:44 टाइमस्टैम्प पर रुकें।

हमें यह सुनिश्चित करने के लिए एक कैश प्रबंधन सेवा बनाने की आवश्यकता है कि हमारा सर्वर अप्रयुक्त फ़ाइलों से न भर जाए, यह नियंत्रित करके कि फ़ाइलें कैश में कितनी देर तक रहती हैं। यह जानना महत्वपूर्ण है कि हमें इस सेवा की आवश्यकता केवल डेटा विलंबता को कम करने के लिए है।

पृष्ठभूमि सेवा

backend/src/services फ़ोल्डर पर जाएं और background.service.ts नामक फ़ाइल बनाएं और उसमें कोड के ये अनुक्रम जोड़ें।

यह कोड एक BackgroundService क्लास को परिभाषित करता है जो कैश निर्देशिका सेट करता है और node-cron लाइब्रेरी का उपयोग करके दैनिक कार्यों को शेड्यूल करता है, पृष्ठभूमि कार्यों को आरंभ करता है और एक पुष्टिकरण संदेश लॉग करता है। आइए एक ऐसी विधि बनाएं जो कैश में 7 दिनों से पुरानी फ़ाइलों को हटाने के लिए ज़िम्मेदार होगी।

पुरानी फ़ाइल हटाना इस विधि को BackgroundService वर्ग में जोड़ें।

यह कोड deleteOldFiles नामक एक विधि को परिभाषित करता है, जो कैश निर्देशिका से 7 दिनों से अधिक पुरानी फ़ाइलों को हटाता है, निर्देशिका को पढ़कर, प्रत्येक फ़ाइल के निर्माण समय की जांच करके, लक्ष्य समय से अधिक समय वाली फ़ाइलों को हटाकर, कार्य के प्रारंभ और समाप्ति को लॉग करके, और किसी भी त्रुटि या सफल विलोपन को लॉग करके।

अब, आइए एक फ़ंक्शन लिखें जो फ़ाइल हटाने को निष्पादित करने के लिए नोड-क्रॉन पैकेज का उपयोग करेगा।

यह कोड स्वचालित फ़ाइल क्लीनअप करने के लिए प्रतिदिन मध्य रात्रि (00:00) पर deleteOldFiles विधि को चलाने के लिए एक दैनिक क्रॉन जॉब सेट करता है।

हमें बैकग्राउंड सर्विस क्लास के इन्स्टैंसिएशन पर दैनिक जॉब्स को शेड्यूल करने के लिए कन्स्ट्रक्टर फ़ंक्शन को भी अपडेट करना होगा।

बढ़िया, अंत में, आइए इस बैकग्राउंड ऑपरेशन को इनिशियलाइज़ेशन के समय सर्वर प्रक्रिया के हिस्से के रूप में जोड़ें। backend/src/index.ts फ़ाइल पर जाएँ, और बैकग्राउंड सर्विस फ़ाइल को इम्पोर्ट करने के लिए ऐप लिसनर मेथड को अपडेट करें।

आपको $ yarn build && yarn start का उपयोग करके बैकएंड सेवा कमांड को पुनः चलाना चाहिए और नीचे दी गई छवि की तरह टर्मिनल प्रिंटआउट देखना चाहिए।

यदि आप यह देखना चाहते हैं कि मैंने संपूर्ण पृष्ठभूमि सेवा को किस प्रकार कोडित किया है, तो नीचे दिया गया वीडियो आपके लिए है; बस सुनिश्चित करें कि आप 02:16:07 टाइमस्टैम्प पर रुकें।

अगला चरण बधाई हो, अब आप इस ट्यूटोरियल के अंतिम भाग के लिए तैयार हैं जो भाग 3 है।

आइए इस ट्यूटोरियल श्रृंखला के अंतिम भाग में गोता लगाएँ, जहाँ हम बैकएंड को फ्रंटएंड के साथ एकीकृत करेंगे, फ़ाइल अपलोड एप्लिकेशन को पूरा करने के लिए टुकड़ों को जोड़ेंगे। हम यह सुनिश्चित करके शुरू करेंगे कि फ्रंटएंड में प्रमाणीकरण चालू और चालू हैं।

वेब3 मॉडल प्रमाणीकरण – भाग 3

फ्रंटएंड डायरेक्टरी में 'config' नाम से एक नया फ़ोल्डर बनाएँ और एक इंडेक्स फ़ाइल जोड़ें, जिसके परिणामस्वरूप पथ /frontend/config/index.tsx होगा। अब, इसमें निम्नलिखित कोड जोड़ें।

यह कोड हमारे Web3 एप्लिकेशन के लिए एक Wagmi कॉन्फ़िगरेशन सेट करता है, मेटाडेटा, समर्थित चेन और प्रमाणीकरण सेटिंग्स को परिभाषित करता है, जिसमें वॉलेट और सोशल लॉगिन विकल्प शामिल हैं, और इसे config एक्सपोर्ट में संग्रहीत करता है। प्रमाणीकरण स्थिति पर नज़र रखने के लिए हमें एक संदर्भ API भी बनाना होगा।

संदर्भ API इसके बाद, Frontend निर्देशिका में 'context' नाम से एक नया फ़ोल्डर बनाएँ और एक इंडेक्स फ़ाइल जोड़ें, जिसके परिणामस्वरूप पथ /frontend/context/index.tsx होगा। इसमें निम्नलिखित कोड जोड़ें।

यह कोड Wagmi और React Query का उपयोग करके Web3Modal प्रदाता को सेट करता है, प्रोजेक्ट ID और थीम वैरिएबल के साथ Web3 मॉडल को कॉन्फ़िगर करता है और एप्लिकेशन को WagmiProvider और QueryClientProvider में लपेटता है।

लेआउट अपडेट करना : आइए ऊपर दिए गए कॉन्फ़िगरेशन को शामिल करने के लिए अपने एप्लिकेशन लेआउट को अपडेट करें। /frontend/app/layout.tsx पर जाएं और इसके कोड को नीचे दिए गए कोड से बदलें।

उपरोक्त कोड Next.js अनुप्रयोग के लिए मूल लेआउट सेट करता है, जिसमें मेटाडेटा, फ़ॉन्ट, शैलियाँ, और Web3 मॉडल, टोस्ट नोटिफिकेशन, तथा हेडर और फ़ूटर जैसे लेआउट घटकों के लिए प्रदाता शामिल हैं।

लॉगिन बटन अब, हमें /frontend/app/components/layout/Header.tsx और /frontend/app/components/shared/Menu.tsx घटकों में लॉगिन बटन को सक्षम करने और नीचे दी गई जानकारी का उपयोग करके उनके कोड को अपडेट करने की आवश्यकता है।

यह कोड नेविगेशन बार के लिए एक रिएक्ट घटक को परिभाषित करता है जिसमें एक लोगो, नेविगेशन लिंक, एक कस्टम मेनू और एक लॉगिन बटन शामिल होता है जो विभिन्न स्क्रीन आकारों के लिए उत्तरदायी डिज़ाइन के साथ एक वेब 3 मॉडल लॉन्च करता है।

जब आप लॉगिन बटन पर क्लिक करते हैं और अपने पसंदीदा प्रदाता, एक्स, फेसबुक, गूगल, डिस्कॉर्ड या एथेरियम के साथ आगे बढ़ते हैं, तो निम्नलिखित चित्र इस बात के प्रमाण के रूप में सामने आएंगे कि हमने जो किया है वह काम करता है।

शानदार, आइए गहराई से जानें और अपना डेटाबेस और NextJs API-आधारित सिस्टम सेट करें। प्रक्रिया पर किसी भी भ्रम के लिए, कृपया नीचे दिए गए वीडियो अनुभाग को देखें; बस सुनिश्चित करें कि आप 02:57:59 मार्क पर रुकें।

डेटाबेस स्क्रिप्ट

सबसे पहले, आइए NextJs कॉन्फ़िगरेशन स्क्रिप्ट को अपडेट करें ताकि हमारे पृष्ठों और समापन बिंदुओं को उचित रूप से संबोधित किया जा सके और हमारी दूरस्थ छवियों को चेतावनियों और जांच से मुक्त किया जा सके।

यह कोड एक Next.js कॉन्फ़िगरेशन ऑब्जेक्ट को परिभाषित करता है जो API रूट पुनर्लेखन और छवि अनुकूलन को सेट करता है, जिससे किसी भी HTTPS होस्टनाम से दूरस्थ छवियों और लोकलहोस्ट डोमेन से स्थानीय छवियों की अनुमति मिलती है।

डेटाबेस कॉन्फ़िगरेशन स्क्रिप्ट हम इस एप्लिकेशन के लिए SQLite का उपयोग करेंगे, लेकिन आप MYSQL या NOSQL प्रदाताओं जैसे अधिक मजबूत समाधान का उपयोग करने के लिए स्वतंत्र हैं। सरलता के लिए, आइए SQLite फ़्लैट फ़ाइल के साथ काम करें।

/frontend/app/api/database.ts फ़ाइल पथ बनाएं और उसमें नीचे दिए गए कोड जोड़ें।

यह कोड SQLite डेटाबेस कनेक्शन सेट करता है, दो API फ़ंक्शन, apiGet और apiPost परिभाषित करता है, ताकि डेटाबेस पर GET और POST अनुरोध निष्पादित किए जा सकें, त्रुटि हैंडलिंग और वादा-आधारित एसिंक्रोनस निष्पादन के साथ। जब भी हम डेटाबेस से डेटा भेजना या प्राप्त करना चाहेंगे, हम इन कोड का उपयोग करेंगे।

डेटाबेस माइग्रेशन स्क्रिप्ट हमें अपनी सभी सामग्री रखने के लिए एक डेटाबेस फ़्लैट फ़ाइल और एक टेबल दोनों बनाने की ज़रूरत है। /frontend/app/api/migrations.ts फ़ाइल पथ बनाएँ और उसमें नीचे दिए गए कोड जोड़ें।

यह कोड एक डेटाबेस माइग्रेशन फ़ंक्शन को परिभाषित करता है जो SQLite का उपयोग करके निर्दिष्ट कॉलम के साथ एक 'मूवीज़' तालिका बनाता है, यदि वह मौजूद नहीं है, और ऑपरेशन के परिणाम को लॉग करता है। अब /frontend निर्देशिका पर इंगित टर्मिनल में नीचे दिए गए कमांड को चलाएँ।

 $ cd frontend $ npx esrun app/api/migrations.ts

यह ध्यान दिया जाना चाहिए कि यह प्रक्रिया फ्रंटएंड निर्देशिका के रूट पर movies.db नामक एक डेटाबेस फ्लैट फ़ाइल भी बनाएगी। हमने इस कमांड को package.json स्क्रिप्ट में भी जोड़ा है, इसलिए फ्रंटएंड निर्देशिका पर $ yarn migrate चलाना उसी तरह काम करना चाहिए।

दृश्य सहायता के लिए नीचे दिया गया वीडियो देखें, इसे 03:10:54 पर रोक दें।

अनुप्रयोग समापन बिंदु

अब, आइए मूवी बनाने, पढ़ने, अपडेट करने और हटाने के लिए कुछ एंडपॉइंट परिभाषित करें। हम इन एंडपॉइंट को बनाने के लिए NextJs API प्रावधान का उपयोग करेंगे।

मूवी एंडपॉइंट बनाएँ मूवी बनाने के लिए, आवश्यक जानकारी में उपयोगकर्ता आईडी, मूवी का नाम, छवि, वीडियो URL, रिलीज़ दिनांक, शैली, रेटिंग, भाषा, अवधि और पृष्ठभूमि विवरण शामिल हैं। /frontend/app/api/movies/create/route.ts फ़ाइल पथ बनाएँ और उसमें नीचे दिए गए कोड जोड़ें।

यह कोड POST अनुरोधों को संभालने, मूवी डेटा को मान्य और संसाधित करने, एक अद्वितीय स्लग उत्पन्न करने और त्रुटियों को संभालने और JSON प्रतिक्रियाओं को वापस करने के दौरान apiPost फ़ंक्शन का उपयोग करके डेटाबेस में डेटा डालने के लिए एक समापन बिंदु को परिभाषित करता है।

मूवी एंडपॉइंट अपडेट करें मूवी को अपडेट करने के लिए, आवश्यक जानकारी में यूजर आईडी, स्लग और मूवी बनाते समय दी गई अन्य जानकारी शामिल है। /frontend/app/api/movies/update/route.ts फ़ाइल पथ बनाएँ और उसमें नीचे दिए गए कोड जोड़ें।

यह कोड मूवी को अद्यतन करने, आवश्यक गुणों को मान्य करने, तथा apiPost फ़ंक्शन का उपयोग करके डेटाबेस में मूवी डेटा को अद्यतन करने के लिए SQL क्वेरी निष्पादित करने के लिए POST अनुरोधों को संभालने के लिए एक समापन बिंदु को परिभाषित करता है।

मूवी एंडपॉइंट हटाएं मूवी को हटाने के लिए, आवश्यक जानकारी में मूवी का उपयोगकर्ता आईडी और स्लग शामिल है। /frontend/app/api/movies/delete/route.ts फ़ाइल पथ बनाएँ और उसमें नीचे दिए गए कोड जोड़ें।

यह कोड मूवी को हटाने के लिए POST अनुरोधों को संभालने, आवश्यक गुणों (userId और slug) को मान्य करने, और apiPost फ़ंक्शन का उपयोग करके डेटाबेस से मूवी को हटाने के लिए SQL क्वेरी निष्पादित करने के लिए एक एंडपॉइंट को परिभाषित करता है।

सभी मूवीज़ एंडपॉइंट मूवीज़ प्राप्त करने के लिए आवश्यक वैकल्पिक डेटा पेजसाइज़ और यूजरआईडी हैं, जिन्हें परिणामों को फ़िल्टर और पेजिनेट करने के लिए क्वेरी पैरामीटर के रूप में पास किया जा सकता है। /frontend/app/api/movies/all/route.ts फ़ाइल पथ बनाएँ और उसमें नीचे दिए गए कोड जोड़ें।

उपरोक्त कोड मूवी प्राप्त करने के लिए GET अनुरोधों को संभालने के लिए एक समापन बिंदु को परिभाषित करता है, जो userId द्वारा वैकल्पिक फ़िल्टरिंग और pageSize द्वारा पृष्ठांकन की अनुमति देता है, और JSON प्रारूप में परिणाम लौटाता है।

सिंगल मूवी एंडपॉइंट एक सिंगल मूवी को पुनः प्राप्त करने के लिए, आवश्यक डेटा मूवी का स्लग है। /frontend/app/api/movies/[slug]/route.ts फ़ाइल पथ बनाएँ और उसमें नीचे दिए गए कोड जोड़ें।

यह कोड किसी मूवी को उसके स्लग द्वारा प्राप्त करने, स्लग पैरामीटर को मान्य करने, तथा apiGet फ़ंक्शन का उपयोग करके डेटाबेस से मूवी डेटा प्राप्त करने के लिए SQL क्वेरी निष्पादित करने के लिए GET अनुरोधों को संभालने के लिए एक समापन बिंदु को परिभाषित करता है।

यह उन सभी समापन बिंदुओं को चिह्नित करता है जिनकी हमें इस एप्लिकेशन के लिए आवश्यकता होगी। यदि आपको इन समापन बिंदुओं को बेहतर ढंग से समझने में मदद करने के लिए किसी दृश्य सहायता की आवश्यकता है, तो कृपया नीचे दिया गया वीडियो देखें, बस सुनिश्चित करें कि आप 03:48:22 टाइमस्टैम्प पर रुकें।

समापन बिंदु एकीकरण

हमारा काम पहले से कोड किए गए घटकों और पृष्ठों की समीक्षा करना और उन्हें अपडेट करना है, प्रत्येक के उद्देश्य और कार्यक्षमता को समझाना और मौजूदा कोड में हमारे द्वारा किए गए परिवर्तनों का दस्तावेजीकरण करना है। हम api निर्देशिका में पहले बनाए गए एंडपॉइंट्स के साथ बातचीत करने के लिए एक सेवा बनाकर शुरू करेंगे।

/frontend/app/services/api.service.ts फ़ाइल पथ बनाएं और उसमें नीचे दिए गए कोड जोड़ें।

यह सेवा मूवी डेटाबेस के साथ इंटरैक्ट करने के लिए कार्यों का एक सेट प्रदान करती है, जिससे एप्लिकेशन को मूवी लाने, स्लग द्वारा एकल मूवी लाने, नई मूवी बनाने, मौजूदा मूवी को अपडेट करने, मूवी को हटाने और API अनुरोधों और हैंडलिंग त्रुटियों का उपयोग करके फाइल अपलोड करने की अनुमति मिलती है।

आवेदन पृष्ठ

आइए हमारे एप्लिकेशन से जुड़े विभिन्न पृष्ठों की समीक्षा करें और उन्हें अपडेट करें। आपको बहुत ज़्यादा चीज़ें बदलने की ज़रूरत नहीं होगी, बस यहाँ हाइलाइट की गई चीज़ें ही बदलेंगी।

मूवी पेज बनाएं

यह पृष्ठ एक मूवी प्रकाशन प्रपत्र है जो उपयोगकर्ताओं को वीडियो और छवि फ़ाइलें अपलोड करने, मूवी विवरण इनपुट करने और रिएक्ट और वाग्मी लाइब्रेरी का उपयोग करके सत्यापन और त्रुटि प्रबंधन के साथ मूवी प्रकाशित करने के लिए फॉर्म सबमिट करने की अनुमति देता है।

अब, /frontend/app/pages/create/page.tsx में मौजूद फ़ाइल को नीचे दिए गए कोड से अपडेट करें।

मूल कोड की तुलना में इस कोड में किये गये परिवर्तन इस प्रकार हैं:

1. api.service से createMovie फ़ंक्शन आयात किया और एक नई मूवी बनाने के लिए इसे handleSubmit फ़ंक्शन में उपयोग किया।
2. createMovie फ़ंक्शन कॉल में userId पैरामीटर जोड़ा गया, जो useAccount हुक से उपयोगकर्ता का पता पास करता है।
3. createMovie द्वारा लौटाए गए वादे को संभालने के लिए toast.promise का उपयोग करने के लिए handleSubmit फ़ंक्शन को अपडेट किया गया।
4. handleSubmit फ़ंक्शन में createMovie फ़ंक्शन कॉल में त्रुटि प्रबंधन जोड़ा गया।

ये परिवर्तन फॉर्म को API में मूवी डेटा सबमिट करने और नई मूवी प्रविष्टि बनाने के साथ-साथ त्रुटियों को संभालने और सफलता संदेश प्रदर्शित करने में सक्षम बनाते हैं।

मूवी पेज संपादित करें

यह मूवी संपादन पृष्ठ अधिकृत उपयोगकर्ताओं को मूवी विवरण अपडेट करने, पोस्टर और वीडियो अपलोड करने, तथा सत्यापन और त्रुटि प्रबंधन के साथ परिवर्तनों को सहेजने की अनुमति देता है, तथा विशेष रूप से उपयोगकर्ताओं को उनकी मूवी संपादित करने के लिए डिज़ाइन किए गए React, Wagmi और Next.js का उपयोग करता है।

अब, /frontend/app/pages/movies/edit/[slug]/page.tsx में मौजूद फ़ाइल को नीचे दिए गए कोड के साथ अपडेट करें।

कोड में किए गए उन्नयन मूल से भिन्न हैं:

1. @/app/services/api.service से fetchMovie और updateMovie फ़ंक्शन आयातित किए गए और उनका उपयोग क्रमशः useEffect हुक और handleSubmit फ़ंक्शन में किया गया।
2. मूवी डेटा पुनः प्राप्त करने के लिए posters.find() विधि को fetchMovie फ़ंक्शन से प्रतिस्थापित किया गया।
3. अद्यतन मूवी विवरण के साथ updateMovie फ़ंक्शन को कॉल करने के लिए handleSubmit फ़ंक्शन को अद्यतन किया गया।
4. handleSubmit फ़ंक्शन में updateMovie फ़ंक्शन कॉल में त्रुटि प्रबंधन जोड़ा गया।

ये परिवर्तन हमारे एप्लिकेशन को मूवी डेटा को पुनः प्राप्त करने और अपडेट करने के लिए हमारे API एंडपॉइंट्स के साथ इंटरैक्ट करने में सक्षम बनाते हैं, जबकि मूल कोड हमारे स्थानीय posters ऐरे पर निर्भर करता था।

होम पेज

यह होम पेज बैनर घटक, फिल्मों की सूची (एपीआई स्रोत या लोडिंग यूआई से) और सदस्यता विकल्पों को प्रस्तुत करता है, तथा उपयोगकर्ताओं के लिए एक आकर्षक और सूचनात्मक लैंडिंग पेज प्रदान करने के लिए रिएक्ट और नेक्स्ट.जेएस का उपयोग करता है।

/frontend/app/pages/page.tsx में मौजूद फ़ाइल को निम्नलिखित कोड के साथ अपडेट करें।

हमने होम पेज पर जो परिवर्तन किए हैं वे इस प्रकार हैं:

1. ./services/api.service से fetchMovies फ़ंक्शन को आयात किया और हमारे API से मूवी डेटा प्राप्त करने के लिए useEffect हुक में इसका उपयोग किया।
2. स्थानीय posters डेटा को fetchMovies फ़ंक्शन कॉल से प्रतिस्थापित किया गया, जो हमारे API से डेटा प्राप्त करता है।
3. movies स्थिति निर्धारित करने से पहले fetchMovies द्वारा लौटाए गए वादे के पूरा होने की प्रतीक्षा करने के लिए await कीवर्ड जोड़ा गया।

ये परिवर्तन हमारे एप्लिकेशन को स्थानीय डेटा पर निर्भर रहने के बजाय हमारे API से मूवी डेटा प्राप्त करने में सहायता करते हैं, जिससे एप्लिकेशन अधिक गतिशील और डेटा-संचालित हो जाता है।

उपयोगकर्ता खाता पृष्ठ

यह पृष्ठ वर्तमान में कनेक्टेड उपयोगकर्ता द्वारा पोस्ट की गई फिल्मों की सूची प्रदर्शित करता है, जिसमें डेटा प्राप्त करते समय लोडिंग स्केलेटन प्लेसहोल्डर होता है और एक संदेश होता है जो उपयोगकर्ता को उनके खाते को कनेक्ट करने के लिए प्रेरित करता है यदि उन्होंने ऐसा नहीं किया है, तो वाग्मी और रिएक्ट-लोडिंग-स्केलेटन का उपयोग करते हुए।

/frontend/app/pages/account/page.tsx में मौजूद फ़ाइल को निम्नलिखित कोड के साथ अपडेट करें।

पृष्ठ में किये गये परिवर्तन इस प्रकार हैं:

1. @/app/services/api.service से fetchMovies फ़ंक्शन आयात किया और हमारे API से मूवी डेटा प्राप्त करने के लिए useEffect हुक में इसका उपयोग किया।
2. स्थानीय posters डेटा को fetchMovies फ़ंक्शन कॉल से प्रतिस्थापित किया गया, जो हमारे API से डेटा प्राप्त करता है।
3. उपयोगकर्ता-विशिष्ट मूवी डेटा को पुनः प्राप्त करने के लिए fetchMovies फ़ंक्शन को एक तर्क के रूप में address दिया गया।
4. मूवी सूची प्रस्तुत करने से पहले address के लिए सशर्त जांच को हटा दिया गया है, क्योंकि fetchMovies फ़ंक्शन अब इस तर्क को संभालता है।
5. लोडिंग ढांचे को प्रदर्शित करने के लिए सशर्त कथन को सरल बना दिया गया है, क्योंकि अब यह केवल loaded स्थिति पर निर्भर करता है।

ये परिवर्तन हमारे API से कनेक्टेड उपयोगकर्ता के लिए विशिष्ट मूवी डेटा प्राप्त करते हैं, तथा डेटा प्राप्त करते समय लोडिंग स्केलेटन प्रदर्शित करते हैं।

फ़िल्म विवरण पृष्ठ

यह पृष्ठ किसी एकल फिल्म का विवरण प्रदर्शित करता है, जिसमें उसका नाम, रिलीज वर्ष, रेटिंग, अवधि, शैली और पृष्ठभूमि की जानकारी, वीडियो प्लेयर और संबंधित फिल्में शामिल हैं, और यदि उपयोगकर्ता फिल्म का स्वामी है तो Next.js और Wagmi का उपयोग करके फिल्म को संपादित करने या हटाने के विकल्प भी प्रदान करता है।

/frontend/app/pages/movies/[slug]/page.tsx में पाई गई फ़ाइल को निम्नलिखित कोड के साथ अपडेट करें।

हमने यहाँ कुछ बड़े बदलाव किए हैं! हमने जो किया उसका सारांश यहाँ दिया गया है:

1. @/app/services/api.service से deleteMovie , fetchMovie और fetchMovies फ़ंक्शन आयात किए और उन्हें हमारे API एंडपॉइंट्स के साथ इंटरैक्ट करने के लिए उपयोग किया।
2. मूवी डेटा पुनः प्राप्त करने के लिए स्थानीय डेटा को API कॉल से प्रतिस्थापित किया गया।
3. deleteMovie फ़ंक्शन का उपयोग करके मूवी हटाने की कार्यक्षमता को कार्यान्वित किया गया।
4. मूवी हटाते समय अधिसूचना प्रदर्शित करने के लिए toast.promise उपयोग किया गया।
5. posters स्थानीय डेटा हटा दिया गया और उसकी जगह API कॉल लगा दी गई।
6. deleteMovie फ़ंक्शन को कॉल करने और प्रतिक्रिया को संभालने के लिए handleSubmit फ़ंक्शन को अपडेट किया गया।
7. fetchMovie और fetchMovies फ़ंक्शन को कॉल करने के लिए useEffect हुक को अपडेट किया गया।

इन परिवर्तनों के कारण हमारा एप्लिकेशन मूवी डेटा को पुनः प्राप्त करने और हटाने के लिए हमारे API के साथ इंटरैक्ट करता है और हटाने की प्रक्रिया के दौरान उपयोगकर्ता को सूचनाएं प्रदर्शित करता है।

नीचे दिए गए वीडियो का यह हिस्सा आपको दिखाएगा कि हमने इन पृष्ठों को एंडपॉइंट के साथ कैसे एकीकृत किया है, अगर आपको कोई समस्या आती है तो कृपया उस भाग को देखने के लिए स्वतंत्र महसूस करें। बस सुनिश्चित करें कि आप 04:57:41 टाइमस्टैम्प पर रुकें।

अनुप्रयोग घटक

आइए हमारे एप्लिकेशन में प्रत्येक घटक के उद्देश्य पर चर्चा करें। हम किसी भी घटक को अपडेट करेंगे जिसे संशोधित करने की आवश्यकता है।

बैनर घटक

यह घटक मूवी बैनर की एक घूमती हुई पृष्ठभूमि छवि प्रदर्शित करता है, जो हर 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 में मौजूद फ़ाइल को निम्नलिखित कोड के साथ अपडेट करें।

इस घटक में किये गये परिवर्तन इस प्रकार हैं:

1. फ़ाइल अपलोड करने की कार्यक्षमता : मूल कोड में वास्तविक अपलोड फ़ाइल कार्यक्षमता लागू नहीं थी। यह फ़ाइल अपलोड किए बिना केवल एक सफलता टोस्ट अधिसूचना दिखाता था। इस अपडेट किए गए कोड में api.service से uploadFile फ़ंक्शन शामिल है जो फ़ाइल अपलोड को संभालता है।
2. प्रगति ट्रैकिंग : अद्यतन कोड अपलोड प्रगति को ट्रैक करता है और इसे UI पर प्रदर्शित करता है।
3. त्रुटि प्रबंधन : अद्यतन कोड में फ़ाइल अपलोड प्रक्रिया के लिए त्रुटि प्रबंधन शामिल है।
4. फ़ाइल प्रकार सत्यापन : अद्यतन कोड नियमित अभिव्यक्ति का उपयोग करके अधिक मजबूत फ़ाइल प्रकार सत्यापन का उपयोग करता है।
5. कोड संगठन : अद्यतन कोड बेहतर ढंग से संगठित है, जिसमें विभिन्न कार्यों को संभालने के लिए अलग-अलग फ़ंक्शन हैं, जिससे इसे पढ़ना और रखरखाव करना आसान हो जाता है।
6. यूआई अपडेट : अपडेट किए गए कोड में कुछ यूआई अपडेट शामिल हैं, जैसे अपलोड की प्रगति दिखाना और अपलोड के दौरान रद्द करें बटन।

यह अद्यतन कोड अधिक पूर्ण और मजबूत है, जिसमें वास्तविक फ़ाइल अपलोड कार्यक्षमता, प्रगति ट्रैकिंग, त्रुटि प्रबंधन और बेहतर कोड संगठन शामिल है।

नीचे दिया गया वीडियो प्रत्येक घटक के कार्य को अधिक विस्तार से समझाता है, कृपया अपनी बेहतरी के लिए इसे देखें।

और बस दोस्तों, हमने यह प्रोजेक्ट पूरा कर लिया है, और अब हमें जो आखिरी कदम उठाना है, वह है इस प्रोजेक्ट को ब्राउज़र पर लॉन्च करना। प्रोजेक्ट को ब्राउज़र पर लाइव देखने के लिए $ yarn build && yarn start चलाएँ।

यदि आपको कोई समस्या आती है, तो समस्या निवारण के लिए निम्नलिखित संसाधनों का संदर्भ लें। अगली बार तक, शुभकामनाएँ!

• 🏠 सिया वेबसाइट
• 🔥सिया रेंटर्ड
• 👨‍💻 सिया रेंटर्ड एपीआई
• 🚀सिया डिस्कॉर्ड चैनल
• 💡 यूट्यूब वीडियो प्लेलिस्ट

लेखक के बारे में

मैं एक वेब3 डेवलपर हूँ और डैप मेंटर्स का संस्थापक हूँ, जो एक ऐसी कंपनी है जो व्यवसायों और व्यक्तियों को विकेंद्रीकृत एप्लिकेशन बनाने और लॉन्च करने में मदद करती है। मुझे सॉफ़्टवेयर उद्योग में 8 वर्षों से अधिक का अनुभव है, और मैं नए और अभिनव एप्लिकेशन बनाने के लिए ब्लॉकचेन तकनीक का उपयोग करने के बारे में भावुक हूँ। मैं डैप मेंटर्स नाम से एक YouTube चैनल चलाता हूँ जहाँ मैं वेब3 विकास पर ट्यूटोरियल और टिप्स साझा करता हूँ, और मैं नियमित रूप से ब्लॉकचेन स्पेस में नवीनतम रुझानों के बारे में ऑनलाइन लेख पोस्ट करता हूँ।