26 KiB
AGENTS.md
প্রকল্পের সংক্ষিপ্ত বিবরণ
এটি ওয়েব ডেভেলপমেন্টের মৌলিক বিষয় শেখানোর জন্য একটি শিক্ষামূলক কারিকুলাম রিপোজিটরি। কারিকুলামটি মাইক্রোসফট ক্লাউড অ্যাডভোকেটদের দ্বারা তৈরি একটি ১২-সপ্তাহের কোর্স, যেখানে জাভাস্ক্রিপ্ট, CSS এবং HTML নিয়ে ২৪টি হাতে-কলমে শেখার পাঠ অন্তর্ভুক্ত রয়েছে।
প্রধান উপাদানসমূহ
- শিক্ষামূলক বিষয়বস্তু: প্রকল্পভিত্তিক মডিউলে সংগঠিত ২৪টি কাঠামোগত পাঠ
- প্রায়োগিক প্রকল্পসমূহ: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, এবং AI Chat Assistant
- ইন্টারঅ্যাকটিভ কুইজ: ৪৮টি কুইজ, প্রতিটিতে ৩টি প্রশ্ন (পাঠের আগে/পরে মূল্যায়ন)
- বহুভাষা সমর্থন: GitHub Actions এর মাধ্যমে ৫০+ ভাষায় স্বয়ংক্রিয় অনুবাদ
- প্রযুক্তি: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI প্রকল্পের জন্য)
স্থাপত্য
- পাঠভিত্তিক কাঠামো সহ শিক্ষামূলক রিপোজিটরি
- প্রতিটি পাঠের ফোল্ডারে README, কোড উদাহরণ এবং সমাধান অন্তর্ভুক্ত
- পৃথক ডিরেক্টরিতে স্বতন্ত্র প্রকল্প (quiz-app, বিভিন্ন পাঠ প্রকল্প)
- GitHub Actions ব্যবহার করে অনুবাদ ব্যবস্থা (co-op-translator)
- Docsify এর মাধ্যমে ডকুমেন্টেশন পরিবেশন এবং PDF আকারে উপলব্ধ
সেটআপ কমান্ডসমূহ
এই রিপোজিটরি মূলত শিক্ষামূলক বিষয়বস্তু ব্যবহারের জন্য। নির্দিষ্ট প্রকল্প নিয়ে কাজ করার জন্য:
প্রধান রিপোজিটরি সেটআপ
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
কুইজ অ্যাপ সেটআপ (Vue 3 + Vite)
cd quiz-app
npm install
npm run dev # Start development server
npm run build # Build for production
npm run lint # Run ESLint
ব্যাংক প্রকল্প API (Node.js + Express)
cd 7-bank-project/api
npm install
npm start # Start API server
npm run lint # Run ESLint
npm run format # Format with Prettier
ব্রাউজার এক্সটেনশন প্রকল্পসমূহ
cd 5-browser-extension/solution
npm install
# Follow browser-specific extension loading instructions
স্পেস গেম প্রকল্পসমূহ
cd 6-space-game/solution
npm install
# Open index.html in browser or use Live Server
চ্যাট প্রকল্প (Python Backend)
cd 9-chat-project/solution/backend/python
pip install openai
# Set GITHUB_TOKEN environment variable
python api.py
ডেভেলপমেন্ট ওয়ার্কফ্লো
বিষয়বস্তু অবদানকারীদের জন্য
- রিপোজিটরি ফর্ক করুন আপনার GitHub অ্যাকাউন্টে
- আপনার ফর্ক লোকালি ক্লোন করুন
- আপনার পরিবর্তনের জন্য একটি নতুন ব্রাঞ্চ তৈরি করুন
- পাঠের বিষয়বস্তু বা কোড উদাহরণে পরিবর্তন করুন
- সংশ্লিষ্ট প্রকল্প ডিরেক্টরিতে কোড পরিবর্তন পরীক্ষা করুন
- অবদান নির্দেশিকা অনুসরণ করে পুল রিকোয়েস্ট জমা দিন
শিক্ষার্থীদের জন্য
- রিপোজিটরি ফর্ক বা ক্লোন করুন
- ক্রমানুসারে পাঠের ডিরেক্টরিতে যান
- প্রতিটি পাঠের README ফাইল পড়ুন
- https://ff-quizzes.netlify.app/web/ এ প্রি-লেসন কুইজ সম্পন্ন করুন
- পাঠের ফোল্ডারে কোড উদাহরণ নিয়ে কাজ করুন
- অ্যাসাইনমেন্ট এবং চ্যালেঞ্জ সম্পন্ন করুন
- পোস্ট-লেসন কুইজ নিন
লাইভ ডেভেলপমেন্ট
- ডকুমেন্টেশন: রুটে
docsify serveচালান (পোর্ট ৩০০০) - কুইজ অ্যাপ: quiz-app ডিরেক্টরিতে
npm run devচালান - প্রকল্পসমূহ: HTML প্রকল্পের জন্য VS Code Live Server এক্সটেনশন ব্যবহার করুন
- API প্রকল্পসমূহ: সংশ্লিষ্ট API ডিরেক্টরিতে
npm startচালান
পরীক্ষার নির্দেশনা
কুইজ অ্যাপ পরীক্ষা
cd quiz-app
npm run lint # Check for code style issues
npm run build # Verify build succeeds
ব্যাংক API পরীক্ষা
cd 7-bank-project/api
npm run lint # Check for code style issues
node server.js # Verify server starts without errors
সাধারণ পরীক্ষার পদ্ধতি
- এটি একটি শিক্ষামূলক রিপোজিটরি, যেখানে ব্যাপক স্বয়ংক্রিয় পরীক্ষা নেই
- ম্যানুয়াল পরীক্ষার লক্ষ্য:
- কোড উদাহরণগুলো ত্রুটি ছাড়াই চলা
- ডকুমেন্টেশনের লিঙ্কগুলো সঠিকভাবে কাজ করা
- প্রকল্প বিল্ড সফলভাবে সম্পন্ন হওয়া
- উদাহরণগুলো সেরা অনুশীলন অনুসরণ করা
প্রি-সাবমিশন চেক
npm run lintচালান প্যাকেজ.json থাকা ডিরেক্টরিতে- নিশ্চিত করুন যে মার্কডাউন লিঙ্কগুলো বৈধ
- ব্রাউজার বা Node.js এ কোড উদাহরণ পরীক্ষা করুন
- নিশ্চিত করুন যে অনুবাদ সঠিক কাঠামো বজায় রেখেছে
কোড স্টাইল নির্দেশিকা
জাভাস্ক্রিপ্ট
- আধুনিক ES6+ সিনট্যাক্স ব্যবহার করুন
- প্রকল্পে প্রদত্ত স্ট্যান্ডার্ড ESLint কনফিগারেশন অনুসরণ করুন
- শিক্ষামূলক স্পষ্টতার জন্য অর্থবহ ভেরিয়েবল এবং ফাংশন নাম ব্যবহার করুন
- শিক্ষার্থীদের জন্য ধারণা ব্যাখ্যা করতে মন্তব্য যোগ করুন
- যেখানে কনফিগার করা আছে, Prettier ব্যবহার করে ফরম্যাট করুন
HTML/CSS
- সেমান্টিক HTML5 এলিমেন্ট
- রেসপন্সিভ ডিজাইন নীতিমালা
- স্পষ্ট ক্লাস নামকরণ কনভেনশন
- শিক্ষার্থীদের জন্য CSS কৌশল ব্যাখ্যা করতে মন্তব্য যোগ করুন
পাইথন
- PEP 8 স্টাইল নির্দেশিকা
- স্পষ্ট, শিক্ষামূলক কোড উদাহরণ
- শিক্ষার জন্য সহায়ক টাইপ হিন্ট যোগ করুন
মার্কডাউন ডকুমেন্টেশন
- স্পষ্ট শিরোনাম শ্রেণিবিন্যাস
- ভাষা নির্দিষ্টকরণ সহ কোড ব্লক
- অতিরিক্ত সম্পদের লিঙ্ক
images/ডিরেক্টরিতে স্ক্রিনশট এবং ছবি- অ্যাক্সেসিবিলিটির জন্য ছবির জন্য Alt টেক্সট
ফাইল সংগঠন
- পাঠগুলো ক্রমানুসারে নম্বরযুক্ত (1-getting-started-lessons, 2-js-basics, ইত্যাদি)
- প্রতিটি প্রকল্পে
solution/এবং প্রায়ইstart/বাyour-work/ডিরেক্টরি থাকে - পাঠ-নির্দিষ্ট
images/ফোল্ডারে ছবি সংরক্ষণ translations/{language-code}/কাঠামোতে অনুবাদ
বিল্ড এবং ডিপ্লয়মেন্ট
কুইজ অ্যাপ ডিপ্লয়মেন্ট (Azure Static Web Apps)
কুইজ-অ্যাপ Azure Static Web Apps ডিপ্লয়মেন্টের জন্য কনফিগার করা হয়েছে:
cd quiz-app
npm run build # Creates dist/ folder
# Deploys via GitHub Actions workflow on push to main
Azure Static Web Apps কনফিগারেশন:
- অ্যাপ লোকেশন:
/quiz-app - আউটপুট লোকেশন:
dist - ওয়ার্কফ্লো:
.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml
ডকুমেন্টেশন PDF তৈরি
npm install # Install docsify-to-pdf
npm run convert # Generate PDF from docs
Docsify ডকুমেন্টেশন
npm install -g docsify-cli # Install Docsify globally
docsify serve # Serve on localhost:3000
প্রকল্প-নির্দিষ্ট বিল্ড
প্রতিটি প্রকল্প ডিরেক্টরির নিজস্ব বিল্ড প্রক্রিয়া থাকতে পারে:
- Vue প্রকল্প:
npm run buildপ্রোডাকশন বান্ডেল তৈরি করে - স্ট্যাটিক প্রকল্প: কোনো বিল্ড ধাপ নেই, সরাসরি ফাইল পরিবেশন করুন
পুল রিকোয়েস্ট নির্দেশিকা
শিরোনাম ফরম্যাট
পরিবর্তনের ক্ষেত্র নির্দেশ করে স্পষ্ট, বর্ণনামূলক শিরোনাম ব্যবহার করুন:
[Quiz-app] Add new quiz for lesson X[Lesson-3] Fix typo in terrarium project[Translation] Add Spanish translation for lesson 5[Docs] Update setup instructions
প্রয়োজনীয় চেক
PR জমা দেওয়ার আগে:
-
কোডের গুণমান:
- প্রভাবিত প্রকল্প ডিরেক্টরিতে
npm run lintচালান - সমস্ত লিন্টিং ত্রুটি এবং সতর্কতা ঠিক করুন
- প্রভাবিত প্রকল্প ডিরেক্টরিতে
-
বিল্ড যাচাইকরণ:
- প্রযোজ্য হলে
npm run buildচালান - নিশ্চিত করুন যে কোনো বিল্ড ত্রুটি নেই
- প্রযোজ্য হলে
-
লিঙ্ক যাচাইকরণ:
- সমস্ত মার্কডাউন লিঙ্ক পরীক্ষা করুন
- নিশ্চিত করুন যে ছবির রেফারেন্স কাজ করছে
-
বিষয়বস্তু পর্যালোচনা:
- বানান এবং ব্যাকরণ যাচাই করুন
- নিশ্চিত করুন যে কোড উদাহরণ সঠিক এবং শিক্ষামূলক
- নিশ্চিত করুন যে অনুবাদ মূল অর্থ বজায় রেখেছে
অবদান প্রয়োজনীয়তা
- Microsoft CLA-তে সম্মতি দিন (প্রথম PR-এ স্বয়ংক্রিয় চেক)
- Microsoft Open Source Code of Conduct অনুসরণ করুন
- বিস্তারিত নির্দেশিকার জন্য CONTRIBUTING.md দেখুন
- প্রযোজ্য হলে PR বিবরণে ইস্যু নম্বর উল্লেখ করুন
পর্যালোচনা প্রক্রিয়া
- PR গুলো রক্ষণাবেক্ষণকারী এবং সম্প্রদায় দ্বারা পর্যালোচনা করা হয়
- শিক্ষামূলক স্পষ্টতাকে অগ্রাধিকার দেওয়া হয়
- কোড উদাহরণগুলো বর্তমান সেরা অনুশীলন অনুসরণ করা উচিত
- অনুবাদগুলো সঠিকতা এবং সাংস্কৃতিক উপযুক্ততার জন্য পর্যালোচনা করা হয়
অনুবাদ ব্যবস্থা
স্বয়ংক্রিয় অনুবাদ
- co-op-translator ওয়ার্কফ্লো সহ GitHub Actions ব্যবহার করে
- স্বয়ংক্রিয়ভাবে ৫০+ ভাষায় অনুবাদ করে
- মূল ফাইলগুলো প্রধান ডিরেক্টরিতে
- অনুবাদকৃত ফাইলগুলো
translations/{language-code}/ডিরেক্টরিতে
ম্যানুয়াল অনুবাদ উন্নতি যোগ করা
translations/{language-code}/এ ফাইলটি খুঁজুন- কাঠামো বজায় রেখে উন্নতি করুন
- নিশ্চিত করুন যে কোড উদাহরণ কার্যকর থাকে
- স্থানীয় কুইজ বিষয়বস্তু পরীক্ষা করুন
অনুবাদ মেটাডেটা
অনুবাদকৃত ফাইলগুলোতে মেটাডেটা হেডার অন্তর্ভুক্ত থাকে:
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "...",
"translation_date": "...",
"source_file": "...",
"language_code": "..."
}
-->
ডিবাগিং এবং সমস্যা সমাধান
সাধারণ সমস্যা
কুইজ অ্যাপ চালু হচ্ছে না:
- Node.js সংস্করণ পরীক্ষা করুন (v14+ সুপারিশকৃত)
node_modulesএবংpackage-lock.jsonমুছে ফেলুন, পুনরায়npm installচালান- পোর্ট কনফ্লিক্ট পরীক্ষা করুন (ডিফল্ট: Vite পোর্ট 5173 ব্যবহার করে)
API সার্ভার চালু হচ্ছে না:
- নিশ্চিত করুন যে Node.js সংস্করণ ন্যূনতম প্রয়োজনীয়তা পূরণ করছে (node >=10)
- পরীক্ষা করুন পোর্ট ইতিমধ্যে ব্যবহৃত হচ্ছে কিনা
npm installদিয়ে সমস্ত ডিপেনডেন্সি ইনস্টল নিশ্চিত করুন
ব্রাউজার এক্সটেনশন লোড হচ্ছে না:
- নিশ্চিত করুন manifest.json সঠিকভাবে ফরম্যাট করা আছে
- ব্রাউজার কনসোলে ত্রুটি পরীক্ষা করুন
- ব্রাউজার-নির্দিষ্ট এক্সটেনশন ইনস্টল নির্দেশিকা অনুসরণ করুন
পাইথন চ্যাট প্রকল্প সমস্যা:
- নিশ্চিত করুন OpenAI প্যাকেজ ইনস্টল করা আছে:
pip install openai - নিশ্চিত করুন GITHUB_TOKEN পরিবেশ ভেরিয়েবল সেট করা আছে
- GitHub Models অ্যাক্সেস অনুমতি পরীক্ষা করুন
Docsify ডকস পরিবেশন করছে না:
- Docsify-cli গ্লোবালি ইনস্টল করুন:
npm install -g docsify-cli - রিপোজিটরি রুট ডিরেক্টরি থেকে চালান
- নিশ্চিত করুন যে
docs/_sidebar.mdবিদ্যমান
ডেভেলপমেন্ট পরিবেশ টিপস
- HTML প্রকল্পের জন্য VS Code এর Live Server এক্সটেনশন ব্যবহার করুন
- ধারাবাহিক ফরম্যাটিংয়ের জন্য ESLint এবং Prettier এক্সটেনশন ইনস্টল করুন
- জাভাস্ক্রিপ্ট ডিবাগিংয়ের জন্য ব্রাউজার DevTools ব্যবহার করুন
- Vue প্রকল্পের জন্য Vue DevTools ব্রাউজার এক্সটেনশন ইনস্টল করুন
কর্মক্ষমতা বিবেচনা
- অনুবাদকৃত ফাইলের বড় সংখ্যা (৫০+ ভাষা) মানে সম্পূর্ণ ক্লোন বড় হয়
- শুধুমাত্র বিষয়বস্তু নিয়ে কাজ করলে শ্যালো ক্লোন ব্যবহার করুন:
git clone --depth 1 - ইংরেজি বিষয়বস্তু নিয়ে কাজ করার সময় অনুবাদগুলো অনুসন্ধান থেকে বাদ দিন
- প্রথম রান (npm install, Vite build) এ বিল্ড প্রক্রিয়া ধীর হতে পারে
নিরাপত্তা বিবেচনা
পরিবেশ ভেরিয়েবল
- API কী কখনোই রিপোজিটরিতে কমিট করা উচিত নয়
.envফাইল ব্যবহার করুন (ইতিমধ্যে.gitignoreএ অন্তর্ভুক্ত)- প্রকল্প README-তে প্রয়োজনীয় পরিবেশ ভেরিয়েবল ডকুমেন্ট করুন
পাইথন প্রকল্প
- ভার্চুয়াল পরিবেশ ব্যবহার করুন:
python -m venv venv - ডিপেনডেন্সি আপডেট রাখুন
- GitHub টোকেনের ন্যূনতম প্রয়োজনীয় অনুমতি থাকা উচিত
GitHub Models অ্যাক্সেস
- GitHub Models এর জন্য Personal Access Tokens (PAT) প্রয়োজন
- টোকেনগুলো পরিবেশ ভেরিয়েবল হিসেবে সংরক্ষণ করা উচিত
- কখনোই টোকেন বা ক্রেডেনশিয়াল কমিট করবেন না
অতিরিক্ত নোট
লক্ষ্য শ্রোতা
- ওয়েব ডেভেলপমেন্টে সম্পূর্ণ নতুন
- শিক্ষার্থী এবং স্ব-শিক্ষার্থী
- শিক্ষক যারা শ্রেণীকক্ষে কারিকুলাম ব্যবহার করছেন
- বিষয়বস্তু অ্যাক্সেসিবিলিটি এবং ধাপে ধাপে দক্ষতা বৃদ্ধির জন্য ডিজাইন করা হয়েছে
শিক্ষামূলক দর্শন
- প্রকল্পভিত্তিক শেখার পদ্ধতি
- ঘন ঘন জ্ঞান যাচাই (কুইজ)
- হাতে-কলমে কোডিং অনুশীলন
- বাস্তব জীবনের প্রয়োগ উদাহরণ
- ফ্রেমওয়ার্কের আগে মৌলিক বিষয়গুলোর উপর জোর
রিপোজিটরি রক্ষণাবেক্ষণ
- শিক্ষার্থী এবং অবদানকারীদের সক্রিয় সম্প্রদায়
- ডিপেনডেন্সি এবং বিষয়বস্তুতে নিয়মিত আপডেট
- রক্ষণাবেক্ষণকারী দ্বারা ইস্যু এবং আলোচনা পর্যবেক্ষণ
- GitHub Actions এর মাধ্যমে অনুবাদ আপডেট স্বয়ংক্রিয়
সম্পর্কিত সম্পদ
- Microsoft Learn মডিউল
- Student Hub সম্পদ
- শিক্ষার্থীদের জন্য GitHub Copilot সুপারিশকৃত
- অতিরিক্ত কোর্স: Generative AI, Data Science, ML, IoT কারিকুলাম উপলব্ধ
নির্দিষ্ট প্রকল্প নিয়ে কাজ করা
স্বতন্ত্র প্রকল্পের বিস্তারিত নির্দেশনার জন্য, README ফাইলগুলো দেখুন:
quiz-app/README.md- Vue 3 কুইজ অ্যাপ্লিকেশন7-bank-project/README.md- প্রমাণীকরণ সহ ব্যাংকিং অ্যাপ্লিকেশন5-browser-extension/README.md- ব্রাউজার এক্সটেনশন ডেভেলপমেন্ট6-space-game/README.md- ক্যানভাস-ভিত্তিক গেম ডেভেলপমেন্ট9-chat-project/README.md- AI চ্যাট অ্যাসিস্ট্যান্ট প্রকল্প
Monorepo কাঠামো
যদিও এটি একটি ঐতিহ্যবাহী Monorepo নয়, এই রিপোজিটরিতে একাধিক স্বতন্ত্র প্রকল্প রয়েছে:
- প্রতিটি পাঠ স্বতন্ত্র
- প্রকল্পগুলো ডিপেনডেন্সি শেয়ার করে না
- স্বতন্ত্র প্রকল্পে কাজ করুন অন্যগুলো প্রভাবিত না করে
- সম্পূর্ণ কারিকুলাম অভিজ্ঞতার জন্য পুরো রিপোজিটরি ক্লোন করুন
অস্বীকৃতি:
এই নথিটি AI অনুবাদ পরিষেবা Co-op Translator ব্যবহার করে অনুবাদ করা হয়েছে। আমরা যথাসাধ্য সঠিকতার জন্য চেষ্টা করি, তবে অনুগ্রহ করে মনে রাখবেন যে স্বয়ংক্রিয় অনুবাদে ত্রুটি বা অসঙ্গতি থাকতে পারে। মূল ভাষায় থাকা নথিটিকে প্রামাণিক উৎস হিসেবে বিবেচনা করা উচিত। গুরুত্বপূর্ণ তথ্যের জন্য, পেশাদার মানব অনুবাদ সুপারিশ করা হয়। এই অনুবাদ ব্যবহারের ফলে কোনো ভুল বোঝাবুঝি বা ভুল ব্যাখ্যা হলে আমরা দায়বদ্ধ থাকব না।