শিক্ষা ওয়েব-অ্যাপ: 13 টি ধাপ

2024 লেখক: John Day | [email protected]. সর্বশেষ পরিবর্তিত: 2024-01-30 07:57

এই প্রকল্পটি ভিডিও এবং ডিজিটাল টেলিভিশন কোর্সের জন্য একটি অ্যাসাইনমেন্ট হিসাবে তৈরি করা হয়েছিল যেখানে আমাদের তিনটি স্তরে শিক্ষণ এবং শেখার সমস্যা সমাধান করতে হয়েছিল: পদ্ধতিগত, কার্যকরী এবং ধারণাগত।

এই প্রকল্পটি ভিডিও এবং ডিজিটাল টেলিভিশন কোর্সের জন্য একটি অ্যাসাইনমেন্ট হিসাবে তৈরি করা হয়েছিল, যেখানে আমাদের এই তিনটি স্তরে শিক্ষণ ও শেখার সমস্যা সমাধান করতে হয়েছিল: পদ্ধতিগত, কার্যকরী এবং ধারণাগত। আমরা একটি ওয়েব প্ল্যাটফর্ম ব্যবহার করে এই সমস্যার সমাধান করার সিদ্ধান্ত নিয়েছি, যেখানে কোর্সের শিক্ষার্থী এবং শিক্ষকরা লগ ইন করতে পারেন। শিক্ষার্থীরা বিষয়ের ধারণাগত অংশটি শিখে নেওয়ার পরে কোডেক এবং ভিডিও ফরম্যাটের মতো বিষয়গুলি অন্তর্ভুক্ত করে শিক্ষণ ভিডিওগুলিও অ্যাক্সেস করতে পারে। মূল্যায়ন তিনটি কার্যক্রম নিয়ে গঠিত; প্রতিটি ক্রিয়াকলাপে কোডেক এবং ভিডিও ফরম্যাটের সাথে সম্পর্কিত এক ধরণের ভিডিও শিক্ষার বিষয় রয়েছে এবং একই সাথে প্রতিটি ক্রিয়াকলাপের একটি ভিন্ন উদ্দেশ্য রয়েছে, তাই এই প্ল্যাটফর্মের মাধ্যমে আমরা পদ্ধতিগত, কার্যকরী এবং ধারণাগত অংশের শিক্ষণ এবং মূল্যায়ন অর্জন করতে পারি। এই সব অর্জনের জন্য, আমরা Angular 4 এবং Firebase ব্যবহার করেছি, লাইব্রেরি ব্যবহার করে যেমন AngularFire5 এবং ড্রাগুলা। ভিডিওগুলির জন্য আমরা ওয়েব-অ্যাপ "PowToon" ব্যবহার করেছি।

এই নির্দেশের জন্য আপনার প্রয়োজন হবে:

• NodeJs
• কৌণিক 4
• ফায়ারবেস প্রকল্প
• একটি কম্পিউটার

ধাপ 1: ইনস্টলেশন

• NPM (নোড প্যাকেজ ম্যানেজার) দিয়ে nodejs 8.9.1 ইনস্টল করুন
• কনসোলে টাইপ করা Angular -CLI (কমান্ড লাইন ইন্টারফেস) ইনস্টল করুন "npm install -g @angular/cli"

পদক্ষেপ 2: প্রকল্প তৈরি করা

• "Ng new my-app" ব্যবহার করে একটি প্রকল্প তৈরি করুন
• "Npm install" দিয়ে নোড প্যাকেজ ইনস্টল করুন
• "Npm install dragula --save" দিয়ে ড্রাগুলা ইনস্টল করুন
• AngularFire2 "npm install firebase angularfire2 --save" দিয়ে ইনস্টল করুন

ধাপ 3: ফায়ারবেস

এর জন্য আপনি এই ধাপের ছবিগুলি পরীক্ষা করতে পারেন

• একটি গুগল অ্যাকাউন্ট তৈরি করুন
• "কনসোলে যান" এ ক্লিক করুন
• একটি প্রকল্প তৈরি করুন
• সাধারণের কাছে যান এবং ক্লায়েন্ট কীগুলি ধরুন

ধাপ 4: উপাদান তৈরি করা

এর জন্য আপনি এই ধাপের ছবিগুলি পরীক্ষা করতে পারেন

অ্যাপের জন্য উপাদান তৈরি করুন।

নিম্নলিখিত প্রতিটি উপাদানের জন্য "ng g c" কম্পোনেন্ট নাম "" ব্যবহার করা হচ্ছে:

• কোর্স পৃষ্ঠা
• বিষয় পাতা
• ভিডিও পৃষ্ঠা
• মূল্যায়ন পৃষ্ঠা
• পদ্ধতিগত পৃষ্ঠা
• ধারণাগত পৃষ্ঠা
• কার্যকরী পৃষ্ঠা
• মন্তব্য উপাদান
• অ্যাডমিন

ধাপ 5: কোর্স পৃষ্ঠা

এর জন্য আপনি এই ধাপের ছবিগুলি পরীক্ষা করতে পারেন

Html এবং ts তৈরি করুন

টিএস -এ আপনি অটেন্টিকেশনের পিছনে যুক্তি লিখবেন, যদি ব্যবহারকারী ছাত্র বা প্রশাসক হয় এবং আপনি শিক্ষার্থীর কাছ থেকে কোর্সের তথ্য সহ একটি টেবিল লিখবেন। এর জন্য আপনি এই নির্দেশের শেষে প্রদত্ত একটি প্রমাণীকরণ পরিষেবা এবং একটি ডাটাবেস পরিষেবা ব্যবহার করতে পারেন।

ধাপ 6: বিষয় পৃষ্ঠা

এর জন্য আপনি এই ধাপের ছবিগুলি পরীক্ষা করতে পারেন

এই কম্পোনেন্টে আপনি html এবং ts লিখবেন।

কোর্স পৃষ্ঠার অনুরূপ আপনি ব্যবহারকারী অ্যাডমিন বা ছাত্র কিনা তা পরীক্ষা করতে হবে না, আপনাকে কেবল প্রমাণীকরণ লিখতে হবে এবং কোর্সের বিষয়গুলির তালিকা সরবরাহ করতে হবে।

ধাপ 7: ভিডিও পৃষ্ঠা

এর জন্য আপনি এই ধাপের ছবিগুলি পরীক্ষা করতে পারেন

এই কম্পোনেন্টে আপনি html এবং ts লিখবেন।

এই উপাদানটির জন্য আপনি ভিডিওটি চালানোর জন্য PowToon থেকে লিঙ্ক এবং মন্তব্য উপাদান প্রদান করবেন

ধাপ 8: মূল্যায়ন পৃষ্ঠা

এর জন্য আপনি এই ধাপের ছবিগুলি পরীক্ষা করতে পারেন

এই উপাদানটির জন্য আপনি একটি ভিন্ন ভিডিও সহ একই ভিডিও উপাদান ব্যবহার করবেন যা আপনি মূল্যায়ন প্রক্রিয়া ব্যাখ্যা করবেন।

তারপর শুধু একটি বোতাম আছে যা ধারণাগত পৃষ্ঠায় লিঙ্ক করে

ধাপ 9: ধারণাগত পৃষ্ঠা

এর জন্য আপনি এই ধাপের ছবিগুলি পরীক্ষা করতে পারেন

এই পৃষ্ঠায় আপনি html এবং ts উভয়ই তৈরি করবেন।

• একটি বোতাম দিয়ে দুটি ভিডিও উপাদান তৈরি করুন
• একটি বুলিয়ান "isCorrect" দিয়ে দুটি ভিডিওর একটি অ্যারে তৈরি করুন
• একটি CheckScore () ফাংশন লিখুন
• ডাটাবেসে স্কোর আপলোড করুন
• পরবর্তী পৃষ্ঠায় পরিবহন

ধাপ 10: পদ্ধতিগত পৃষ্ঠা

এর জন্য আপনি এই ধাপের ছবিগুলি পরীক্ষা করতে পারেন

এই পৃষ্ঠায় আপনি html এবং ts উভয়ই তৈরি করবেন।

• আপনি ড্রাগুলার ব্যবহার করবেন, তার জন্য ড্রাগুলার ডক্স পড়ুন
• ভিডিও এর অ্যারে তৈরি করুন
• ভিডিওর ক্রম তৈরি করুন
• একটি চেক স্কোর লিখুন
• আপলোড স্কোর
• পরবর্তী পৃষ্ঠায় যান

ধাপ 11: কার্যকরী পৃষ্ঠা

এর জন্য আপনি এই ধাপের ছবিগুলি পরীক্ষা করতে পারেন

এই পৃষ্ঠায় আপনি html এবং ts উভয়ই তৈরি করবেন।

• ধারণাগত পৃষ্ঠার মতোই আপনার কাছে বিকল্প হিসাবে বোতাম এবং ভিডিও থাকবে।
• এইচটিএমএলে ব্যবহারকারীর সমাধানের জন্য একটি সমস্যা লিখুন
• তারপর একটি বুলিয়ান "IsCorrect" দিয়ে একটি অ্যারেতে ভিডিওগুলি রাখুন
• ডাটাবেসে স্কোর আপলোড করুন

ধাপ 12: লগইন পৃষ্ঠা

এর জন্য আপনি এই ধাপের ছবিগুলি পরীক্ষা করতে পারেন

• Html এবং ts তৈরি করুন
• এইচটিএমএল ছবিতে রাখুন
• Html এ ফর্মটি লিখুন
• TS- এ ফর্মটি auth সার্ভিসে জমা দিন
• ডাটাবেজে ব্যবহারকারীকে সংরক্ষণ করুন

ধাপ 13: উপাদান এবং পরিষেবার সম্পূর্ণ কোড ডাউনলোড করুন

যদি আপনার সমস্যা হয়, এখানে উপাদান এবং পরিষেবাগুলির সাথে rar রয়েছে