शिक्षा वेब-ऐप: 13 कदम

2024 लेखक: John Day | [email protected]. अंतिम बार संशोधित: 2024-01-30 09:19

यह परियोजना वीडियो और डिजिटल टेलीविजन पाठ्यक्रम के लिए एक असाइनमेंट के रूप में बनाई गई थी जिसमें हमें शिक्षण और सीखने की समस्या को तीन स्तरों में हल करना था: पद्धतिगत, कार्यात्मक और वैचारिक।

यह परियोजना वीडियो और डिजिटल टेलीविजन के पाठ्यक्रम के लिए एक असाइनमेंट के रूप में बनाई गई थी, जिसमें हमें इन तीन स्तरों में शिक्षण और सीखने की समस्या को हल करना था: पद्धतिगत, कार्यात्मक और वैचारिक। हमने एक वेब प्लेटफॉर्म का उपयोग करके इस समस्या को हल करने का निर्णय लिया, जिसमें पाठ्यक्रम के छात्र और शिक्षक लॉग इन कर सकते हैं। छात्र कोडेक और वीडियो प्रारूप जैसे विषयों को कवर करने वाले शिक्षण वीडियो तक भी पहुंच सकते हैं, जब वे विषय के वैचारिक भाग को सीख चुके होते हैं तो वे मूल्यांकन करने के लिए आगे बढ़ सकते हैं। मूल्यांकन में तीन गतिविधियां शामिल हैं; प्रत्येक गतिविधि में कोडेक्स और वीडियो प्रारूपों से संबंधित विषयों को पढ़ाने वाले वीडियो होंगे और साथ ही प्रत्येक गतिविधि का एक अलग उद्देश्य होगा, इसलिए इस मंच के साथ हम कार्यप्रणाली, कार्यात्मक और वैचारिक भाग के शिक्षण और मूल्यांकन को प्राप्त कर सकते हैं। यह सब हासिल करने के लिए, हमने AngularFire5 और Dragula जैसे पुस्तकालयों का उपयोग करते हुए, Angular 4 और Firebase का उपयोग किया। वीडियो के लिए हमने वेब-ऐप "पॉवटून" का इस्तेमाल किया।

इस निर्देश के लिए आपको आवश्यकता होगी:

• नोडजेएस
• कोणीय4
• फायरबेस प्रोजेक्ट
• एक कंप्यूटर

चरण 1: स्थापना

• एनपीएम (नोड पैकेज मैनेजर) के साथ नोडज 8.9.1 स्थापित करें
• "npm install -g @angular/cli" कंसोल पर एंगुलर-सीएलआई (कमांड लाइन इंटरफेस) टाइपिंग इंस्टॉल करें

चरण 2: प्रोजेक्ट बनाना

• "एनजी न्यू माय-ऐप" का उपयोग करके एक प्रोजेक्ट बनाएं
• "एनपीएम इंस्टॉल" के साथ नोड पैकेज स्थापित करें
• "एनपीएम इंस्टाल ड्रैगुला --सेव" के साथ ड्रैगुला स्थापित करें
• AngularFire2 को "npm install firebase angularfire2 --save" के साथ स्थापित करें

चरण 3: फायरबेस

इसके लिए आप इस स्टेप की इमेज चेक कर सकते हैं

• एक Google खाता बनाएं
• "कंसोल पर जाएं" पर क्लिक करें
• एक प्रोजेक्ट बनाएं
• सामान्य पर जाएं और क्लाइंट कुंजियों को पकड़ें

चरण 4: अवयव बनाना

इसके लिए आप इस स्टेप की इमेज चेक कर सकते हैं

ऐप के लिए घटक बनाएं।

निम्नलिखित घटकों में से प्रत्येक के लिए "एनजी जी सी" घटक नाम "" का उपयोग करना:

• कोर्स पेज
• विषय पृष्ठ
• वीडियो पेज
• मूल्यांकन पृष्ठ
• कार्यप्रणाली पृष्ठ
• वैचारिक पृष्ठ
• कार्यात्मक पृष्ठ
• टिप्पणियाँ घटक
• व्यवस्थापक

चरण 5: पाठ्यक्रम पृष्ठ

इसके लिए आप इस स्टेप की इमेज चेक कर सकते हैं

html और ts. बनाएं

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

चरण 6: विषय पृष्ठ

इसके लिए आप इस स्टेप की इमेज चेक कर सकते हैं

इस घटक में आप html और ts लिखेंगे।

पाठ्यक्रम पृष्ठ के समान ही आपको यह जांचने की आवश्यकता नहीं है कि उपयोगकर्ता एक व्यवस्थापक या छात्र है या नहीं, आपको केवल प्रमाणीकरण लिखना होगा और पाठ्यक्रम में विषयों की सूची प्रदान करनी होगी।

चरण 7: वीडियो पृष्ठ

इसके लिए आप इस स्टेप की इमेज चेक कर सकते हैं

इस घटक में आप html और ts लिखेंगे।

इस घटक के लिए आप वीडियो चलाने के लिए पॉवटून से लिंक प्रदान करेंगे, और टिप्पणी घटक

चरण 8: मूल्यांकन पृष्ठ

इसके लिए आप इस स्टेप की इमेज चेक कर सकते हैं

इस ocmponent के लिए आप एक अलग वीडियो के साथ एक ही वीडियो घटक का उपयोग करेंगे जिसमें आप मूल्यांकन प्रक्रिया की व्याख्या करेंगे।

फिर बस एक बटन है जो वैचारिक पृष्ठ से लिंक करता है

चरण 9: वैचारिक पृष्ठ

इसके लिए आप इस स्टेप की इमेज चेक कर सकते हैं

इस पेज में आप html और ts दोनों बनाएंगे।

• एक बटन के साथ दो वीडियो घटक बनाएं
• बूलियन "isCorrect" के साथ दो वीडियो की एक सरणी बनाएं
• एक चेकस्कोर () फ़ंक्शन लिखें
• डेटाबेस में स्कोर अपलोड करें
• अगले पृष्ठ पर परिवहन

चरण 10: पद्धतिगत पृष्ठ

इसके लिए आप इस स्टेप की इमेज चेक कर सकते हैं

इस पेज में आप html और ts दोनों बनाएंगे।

• आप ड्रैगुला का उपयोग करेंगे, इसके लिए ड्रैगुला के दस्तावेज़ पढ़ें
• वीडियो की सरणी बनाएं
• वीडियो का क्रम बनाएं
• एक चेक स्कोर लिखें
• अपलोड स्कोर
• अगले पेज पर जाएं

चरण 11: कार्यात्मक पृष्ठ

इसके लिए आप इस स्टेप की इमेज चेक कर सकते हैं

इस पेज में आप html और ts दोनों बनाएंगे।

• वैचारिक पृष्ठ के समान ही आपके पास विकल्प के रूप में बटन और वीडियो होंगे।
• एचटीएमएल में उपयोगकर्ता को हल करने के लिए एक समस्या लिखें
• फिर वीडियो को एक बूलियन "IsCorrect" के साथ एक सरणी में रखें
• डेटाबेस में स्कोर अपलोड करें

चरण 12: लॉगिन पृष्ठ

इसके लिए आप इस स्टेप की इमेज चेक कर सकते हैं

• html और ts. बनाएं
• एचटीएमएल में छवि रखें
• html में फॉर्म लिखें
• टीएस में फॉर्म को ऑथेंटिक सर्विस में जमा करें
• उपयोगकर्ता को डेटाबेस में सहेजें

चरण 13: घटकों और सेवाओं का पूरा कोड डाउनलोड करें

यदि आपको समस्याएँ होती हैं, तो यहाँ घटकों और सेवाओं के साथ rar है