# AGENTS.md ## திட்டத்தின் மேற்பார்வை இது தொடக்கநிலை வலை மேம்பாட்டு அடிப்படைகளை கற்பதற்கான கல்வி பாடத்திட்டக் களஞ்சியம். இந்த பாடத்திட்டம் மைக்ரோசாஃப்ட் கிளவுட் அட்வோகேட்களால் உருவாக்கப்பட்ட 12 வாரங்களுக்கான விரிவான பாடநெறியாகும், இதில் ஜாவாஸ்கிரிப்ட், CSS மற்றும் HTML ஆகியவற்றை உள்ளடக்கிய 24 நடைமுறை பாடங்கள் உள்ளன. ### முக்கிய கூறுகள் - **கல்வி உள்ளடக்கம்**: திட்ட அடிப்படையிலான தொகுதிகளாக ஒழுங்கமைக்கப்பட்ட 24 கட்டமைக்கப்பட்ட பாடங்கள் - **நடைமுறை திட்டங்கள்**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor மற்றும் AI Chat Assistant - **இணையதள கேள்விகள்**: ஒவ்வொரு பாடத்திற்கும் முன்/பின் மதிப்பீடுகளாக 48 கேள்விகள் (ஒவ்வொன்றும் 3 கேள்விகள்) - **பல மொழி ஆதரவு**: GitHub Actions மூலம் 50+ மொழிகளுக்கு தானியங்கி மொழிபெயர்ப்பு - **தொழில்நுட்பங்கள்**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI திட்டங்களுக்கு) ### கட்டமைப்பு - பாடத்திட்ட அடிப்படையிலான அமைப்புடன் கல்வி களஞ்சியம் - ஒவ்வொரு பாடத்தொகுப்பிலும் README, குறியீட்டு உதாரணங்கள் மற்றும் தீர்வுகள் உள்ளன - தனித்துவமான திட்டங்கள் தனி அடைவுகளில் (quiz-app, பல பாட திட்டங்கள்) - GitHub Actions (co-op-translator) மூலம் மொழிபெயர்ப்பு அமைப்பு - Docsify மூலம் ஆவணங்கள் வழங்கப்பட்டு PDF வடிவில் கிடைக்கின்றன ## அமைப்பு கட்டளைகள் இந்த களஞ்சியம் முதன்மையாக கல்வி உள்ளடக்கத்தை பயன்படுத்துவதற்காக உள்ளது. குறிப்பிட்ட திட்டங்களுடன் வேலை செய்ய: ### முக்கிய களஞ்சிய அமைப்பு ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` ### Quiz App அமைப்பு (Vue 3 + Vite) ```bash cd quiz-app npm install npm run dev # Start development server npm run build # Build for production npm run lint # Run ESLint ``` ### Bank Project API (Node.js + Express) ```bash cd 7-bank-project/api npm install npm start # Start API server npm run lint # Run ESLint npm run format # Format with Prettier ``` ### Browser Extension திட்டங்கள் ```bash cd 5-browser-extension/solution npm install # Follow browser-specific extension loading instructions ``` ### Space Game திட்டங்கள் ```bash cd 6-space-game/solution npm install # Open index.html in browser or use Live Server ``` ### Chat Project (Python Backend) ```bash cd 9-chat-project/solution/backend/python pip install openai # Set GITHUB_TOKEN environment variable python api.py ``` ## மேம்பாட்டு பணிச்சுற்று ### உள்ளடக்க பங்களிப்பாளர்களுக்கு 1. **களஞ்சியத்தை Fork செய்யவும்** உங்கள் GitHub கணக்கில் 2. **உங்கள் Fork ஐ உள்ளூர் கணினியில் Clone செய்யவும்** 3. **உங்கள் மாற்றங்களுக்கு புதிய branch உருவாக்கவும்** 4. பாடத்தொகுப்பு உள்ளடக்கம் அல்லது குறியீட்டு உதாரணங்களில் மாற்றங்களைச் செய்யவும் 5. தொடர்புடைய திட்ட அடைவுகளில் குறியீட்டு மாற்றங்களை சோதிக்கவும் 6. பங்களிப்பு வழிகாட்டுதல்களைப் பின்பற்றி pull requests சமர்ப்பிக்கவும் ### கற்றுக்கொள்பவர்களுக்கு 1. களஞ்சியத்தை Fork செய்யவும் அல்லது Clone செய்யவும் 2. பாடத்தொகுப்பு அடைவுகளில் வரிசையாக செல்லவும் 3. ஒவ்வொரு பாடத்தொகுப்பிற்கும் README கோப்புகளைப் படிக்கவும் 4. https://ff-quizzes.netlify.app/web/ இல் முன்-பாட கேள்விகளை முடிக்கவும் 5. பாடத்தொகுப்பு அடைவுகளில் குறியீட்டு உதாரணங்களைச் செய்யவும் 6. பணிகள் மற்றும் சவால்களை முடிக்கவும் 7. பாடத்தொகுப்பு முடிந்தவுடன் கேள்விகளை முடிக்கவும் ### நேரடி மேம்பாடு - **ஆவணங்கள்**: root இல் `docsify serve` இயக்கவும் (port 3000) - **Quiz App**: quiz-app அடைவில் `npm run dev` இயக்கவும் - **திட்டங்கள்**: HTML திட்டங்களுக்கு VS Code Live Server extension ஐ பயன்படுத்தவும் - **API திட்டங்கள்**: தொடர்புடைய API அடைவுகளில் `npm start` இயக்கவும் ## சோதனை வழிகாட்டுதல்கள் ### Quiz App சோதனை ```bash cd quiz-app npm run lint # Check for code style issues npm run build # Verify build succeeds ``` ### Bank API சோதனை ```bash cd 7-bank-project/api npm run lint # Check for code style issues node server.js # Verify server starts without errors ``` ### பொதுவான சோதனை அணுகுமுறை - இது விரிவான தானியங்கி சோதனைகள் இல்லாத கல்வி களஞ்சியம் - கையேடு சோதனை முக்கியமாக: - குறியீட்டு உதாரணங்கள் பிழையின்றி இயங்க வேண்டும் - ஆவணங்களில் உள்ள இணைப்புகள் சரியாக வேலை செய்ய வேண்டும் - திட்டங்கள் வெற்றிகரமாக உருவாக்கப்பட வேண்டும் - உதாரணங்கள் சிறந்த நடைமுறைகளை பின்பற்ற வேண்டும் ### சமர்ப்பிக்கும் முன் சோதனைகள் - `npm run lint` ஐ package.json கொண்ட அடைவுகளில் இயக்கவும் - Markdown இணைப்புகள் செல்லுபடியாக உள்ளதா என்பதை உறுதிப்படுத்தவும் - குறியீட்டு உதாரணங்களை browser அல்லது Node.js இல் சோதிக்கவும் - மொழிபெயர்ப்புகள் சரியான அமைப்பை பராமரிக்கின்றன என்பதைச் சரிபார்க்கவும் ## குறியீட்டு பாணி வழிகாட்டுதல்கள் ### ஜாவாஸ்கிரிப்ட் - ES6+ நவீன syntax ஐப் பயன்படுத்தவும் - திட்டங்களில் வழங்கப்பட்ட தரநிலை ESLint கட்டமைப்புகளைப் பின்பற்றவும் - கல்வி தெளிவுக்காக பொருத்தமான மாறி மற்றும் செயல்பாட்டு பெயர்களைப் பயன்படுத்தவும் - கற்றுக்கொள்பவர்களுக்கு கருத்துகளைச் சேர்க்கவும் - Prettier ஐ பயன்படுத்தி வடிவமைக்கவும் (கட்டமைக்கப்பட்ட இடங்களில்) ### HTML/CSS - Semantic HTML5 கூறுகள் - பதிலளிக்கக்கூடிய வடிவமைப்பு கொள்கைகள் - தெளிவான வகுப்பு பெயரிடும் முறைகள் - CSS தொழில்நுட்பங்களை கற்றுக்கொள்பவர்களுக்கு விளக்கும் கருத்துகள் ### Python - PEP 8 பாணி வழிகாட்டுதல்கள் - தெளிவான, கல்வி குறியீட்டு உதாரணங்கள் - கற்றுக்கொள்வதற்கு உதவியாக உள்ள இடங்களில் வகை குறிப்புகள் ### Markdown ஆவணங்கள் - தெளிவான தலைப்பு வரிசை - மொழி குறிப்புடன் குறியீட்டு தொகுதிகள் - கூடுதல் வளங்களுக்கான இணைப்புகள் - `images/` அடைவுகளில் screenshots மற்றும் படங்கள் - அணுகல் வசதிக்காக படங்களுக்கு Alt text ### கோப்பு அமைப்பு - பாடங்கள் வரிசையாக எண்களிடப்பட்டுள்ளன (1-getting-started-lessons, 2-js-basics, etc.) - ஒவ்வொரு திட்டத்திற்கும் `solution/` மற்றும் `start/` அல்லது `your-work/` அடைவுகள் உள்ளன - படங்கள் பாடத்தொகுப்பு குறிப்பிட்ட `images/` அடைவுகளில் சேமிக்கப்படுகின்றன - மொழிபெயர்ப்புகள் `translations/{language-code}/` அமைப்பில் ## கட்டமைப்பு மற்றும் வெளியீடு ### Quiz App வெளியீடு (Azure Static Web Apps) Quiz-app Azure Static Web Apps வெளியீட்டிற்கு கட்டமைக்கப்பட்டுள்ளது: ```bash cd quiz-app npm run build # Creates dist/ folder # Deploys via GitHub Actions workflow on push to main ``` Azure Static Web Apps கட்டமைப்பு: - **App location**: `/quiz-app` - **Output location**: `dist` - **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` ### ஆவண PDF உருவாக்கம் ```bash npm install # Install docsify-to-pdf npm run convert # Generate PDF from docs ``` ### Docsify ஆவணங்கள் ```bash npm install -g docsify-cli # Install Docsify globally docsify serve # Serve on localhost:3000 ``` ### திட்ட குறிப்பிட்ட கட்டமைப்புகள் ஒவ்வொரு திட்ட அடைவிலும் தனித்துவமான கட்டமைப்பு செயல்முறை இருக்கலாம்: - Vue திட்டங்கள்: `npm run build` உற்பத்தி தொகுதிகளை உருவாக்குகிறது - Static திட்டங்கள்: கட்டமைப்பு படி இல்லை, கோப்புகளை நேரடியாக வழங்கவும் ## Pull Request வழிகாட்டுதல்கள் ### தலைப்பு வடிவம் மாற்றத்தின் பகுதியை விளக்கும் தெளிவான, விளக்கமான தலைப்புகளைப் பயன்படுத்தவும்: - `[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 சமர்ப்பிக்கும் முன்: 1. **குறியீட்டு தரம்**: - பாதிக்கப்பட்ட திட்ட அடைவுகளில் `npm run lint` இயக்கவும் - அனைத்து linting பிழைகள் மற்றும் எச்சரிக்கைகளை சரிசெய்யவும் 2. **கட்டமைப்பு சரிபார்ப்பு**: - பொருத்தமான இடங்களில் `npm run build` இயக்கவும் - கட்டமைப்பு பிழைகள் இல்லாமல் உறுதிப்படுத்தவும் 3. **இணைப்பு சரிபார்ப்பு**: - அனைத்து markdown இணைப்புகளைச் சோதிக்கவும் - பட இணைப்புகள் வேலை செய்கின்றன என்பதை உறுதிப்படுத்தவும் 4. **உள்ளடக்க மதிப்பீடு**: - எழுத்துப்பிழை மற்றும் இலக்கணத்தை சரிபார்க்கவும் - குறியீட்டு உதாரணங்கள் சரியாகவும் கல்வி நோக்கத்திற்கும் பொருந்தும் - மொழிபெயர்ப்புகள் மூல அர்த்தத்தை பராமரிக்கின்றன என்பதை உறுதிப்படுத்தவும் ### பங்களிப்பு தேவைகள் - Microsoft CLA உடன் ஒப்புக்கொள்ளவும் (முதல் PR இல் தானியங்கி சோதனை) - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) ஐப் பின்பற்றவும் - விரிவான வழிகாட்டுதல்களுக்கு [CONTRIBUTING.md](./CONTRIBUTING.md) ஐப் பார்க்கவும் - பொருத்தமான இடங்களில் PR விளக்கத்தில் பிரச்சினை எண்களை குறிப்பிடவும் ### மதிப்பீட்டு செயல்முறை - PRக்கள் பராமரிப்பாளர்கள் மற்றும் சமூகத்தால் மதிப்பீடு செய்யப்படும் - கல்வி தெளிவு முன்னுரிமையாக உள்ளது - குறியீட்டு உதாரணங்கள் தற்போதைய சிறந்த நடைமுறைகளைப் பின்பற்ற வேண்டும் - மொழிபெயர்ப்புகள் துல்லியத்திற்கும் கலாச்சார பொருத்தத்திற்கும் மதிப்பீடு செய்யப்படும் ## மொழிபெயர்ப்பு அமைப்பு ### தானியங்கி மொழிபெயர்ப்பு - co-op-translator workflow உடன் GitHub Actions ஐப் பயன்படுத்துகிறது - தானியங்கி முறையில் 50+ மொழிகளுக்கு மொழிபெயர்க்கிறது - மூல கோப்புகள் முக்கிய அடைவுகளில் - மொழிபெயர்க்கப்பட்ட கோப்புகள் `translations/{language-code}/` அடைவுகளில் ### கையேடு மொழிபெயர்ப்பு மேம்பாடுகளைச் சேர்க்க 1. `translations/{language-code}/` இல் கோப்பை கண்டறியவும் 2. அமைப்பை பராமரிக்கும்போது மேம்பாடுகளைச் செய்யவும் 3. குறியீட்டு உதாரணங்கள் செயல்படுகின்றன என்பதை உறுதிப்படுத்தவும் 4. உள்ளூர் கேள்வி உள்ளடக்கத்தை சோதிக்கவும் ### மொழிபெயர்ப்பு மெட்டாடேட்டா மொழிபெயர்க்கப்பட்ட கோப்புகள் மெட்டாடேட்டா தலைப்பை உள்ளடக்குகின்றன: ```markdown ``` ## பிழைதிருத்தம் மற்றும் சிக்கல் தீர்வு ### பொதுவான சிக்கல்கள் **Quiz app தொடங்க முடியவில்லை**: - Node.js பதிப்பு சரிபார்க்கவும் (v14+ பரிந்துரைக்கப்படுகிறது) - `node_modules` மற்றும் `package-lock.json` ஐ நீக்கி, `npm install` மீண்டும் இயக்கவும் - port conflicts ஐ சரிபார்க்கவும் (default: Vite uses port 5173) **API server தொடங்க முடியவில்லை**: - Node.js பதிப்பு குறைந்தபட்சத்தை சந்திக்கிறது என்பதை உறுதிப்படுத்தவும் (node >=10) - port ஏற்கனவே பயன்படுத்தப்படுகிறதா என்பதை சரிபார்க்கவும் - `npm install` மூலம் அனைத்து சார்புகளை நிறுவவும் **Browser extension ஏற்ற முடியவில்லை**: - manifest.json சரியாக வடிவமைக்கப்பட்டதா என்பதை உறுதிப்படுத்தவும் - browser console இல் பிழைகளைச் சரிபார்க்கவும் - browser-specific extension நிறுவல் வழிகாட்டுதல்களைப் பின்பற்றவும் **Python chat project சிக்கல்கள்**: - OpenAI package நிறுவப்பட்டதா என்பதை உறுதிப்படுத்தவும்: `pip install openai` - GITHUB_TOKEN சூழல் மாறி அமைக்கப்பட்டதா என்பதை உறுதிப்படுத்தவும் - GitHub Models அணுகல் அனுமதிகளைச் சரிபார்க்கவும் **Docsify ஆவணங்கள் வழங்கப்படவில்லை**: - docsify-cli ஐ உலகளவில் நிறுவவும்: `npm install -g docsify-cli` - களஞ்சியத்தின் root அடைவிலிருந்து இயக்கவும் - `docs/_sidebar.md` உள்ளது என்பதைச் சரிபார்க்கவும் ### மேம்பாட்டு சூழல் குறிப்புகள் - HTML திட்டங்களுக்கு VS Code உடன் Live Server extension ஐப் பயன்படுத்தவும் - ஒரே மாதிரியான வடிவமைக்க ESLint மற்றும் Prettier extensions ஐ நிறுவவும் - JavaScript பிழைகளை சரிசெய்ய browser DevTools ஐப் பயன்படுத்தவும் - Vue திட்டங்களுக்கு Vue DevTools browser extension ஐ நிறுவவும் ### செயல்திறன் கருத்துகள் - மொழிபெயர்க்கப்பட்ட கோப்புகளின் (50+ மொழிகள்) பெரிய எண்ணிக்கை முழு clones பெரியதாக இருக்கும் - உள்ளடக்கத்தில் மட்டுமே வேலை செய்ய shallow clone ஐப் பயன்படுத்தவும்: `git clone --depth 1` - ஆங்கில உள்ளடக்கத்தில் வேலை செய்யும்போது மொழிபெயர்ப்புகளை தேடல்களில் இருந்து விலக்கவும் - முதல் இயக்கத்தில் கட்டமைப்பு செயல்முறைகள் மெதுவாக இருக்கலாம் (npm install, Vite build) ## பாதுகாப்பு கருத்துகள் ### சூழல் மாறிகள் - API கீக்கள் களஞ்சியத்தில் commit செய்யக்கூடாது - `.env` கோப்புகளைப் பயன்படுத்தவும் (`.gitignore` இல் ஏற்கனவே உள்ளது) - தேவையான சூழல் மாறிகளை திட்ட READMEக்களில் ஆவணப்படுத்தவும் ### Python திட்டங்கள் - மெய்நிகர் சூழல்களைப் பயன்படுத்தவும்: `python -m venv venv` - சார்புகளை புதுப்பித்து வைத்திருக்கவும் - GitHub tokens குறைந்தபட்ச தேவையான அனுமதிகளுடன் இருக்க வேண்டும் ### GitHub Models அணுகல் - GitHub Models க்கு Personal Access Tokens (PAT) தேவை - Tokens சூழல் மாறிகளாக சேமிக்கப்பட வேண்டும் - Tokens அல்லது அங்கீகாரங்களை commit செய்யக்கூடாது ## கூடுதல் குறிப்புகள் ### இலக்கு பார்வையாளர்கள் - வலை மேம்பாட்டில் முழுமையாக தொடக்கநிலை உள்ளவர்கள் - மாணவர்கள் மற்றும் சுய கற்றுக்கொள்பவர்கள் - பாடத்திட்டத்தை வகுப்பறைகளில் பயன்படுத்தும் ஆசிரியர்கள் - உள்ளடக்கம் அணுகல் வசதிக்காகவும் படிப்படியாக திறன்களை உருவாக்குவதற்காகவும் வடிவமைக்கப்பட்டுள்ளது ### கல்வி தத்துவம் - திட்ட அடிப்படையிலான கற்றல் அணுகுமுறை - அடிக்கடி அறிவு சோதனைகள் (கேள்விகள்) - நடைமுறை குறியீட்டு பயிற்சிகள் - உண்மையான உலக பயன்பாட்டு உதாரணங்கள் - frameworks க்கு முன்னர் அடிப்படைகளை மையமாகக் கொண்டது ### களஞ்சிய பராமரிப்பு - கற்றுக்கொள்பவர்களும் பங்களிப்பாளர்களும் கொண்ட செயலில் உள்ள சமூகத்துடன் - சார்புகள் மற்றும் உள்ளடக்கத்திற்கு முறைப்படி புதுப்பிப்புகள் - பராமரிப்பாளர்களால் கண்காணிக்கப்படும் பிரச்சினைகள் மற்றும் விவாதங்கள் - GitHub Actions மூலம் தானியங்கி மொழிபெயர்ப்பு புதுப்பிப்புகள் ### தொடர்புடைய வளங்கள் - [Microsoft Learn modules](https://docs.microsoft.com/learn/) - [Student Hub resources](https://docs.microsoft.com/learn/student-hub/) - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) கற்றுக்கொள்பவர்களுக்கு பரிந்துரைக்கப்படுகிறது - கூடுதல் பாடநெறிகள்: Generative AI, Data Science, ML, IoT பாடத்திட்டங்கள் கிடைக்கின்றன ### குறிப்பிட்ட திட்டங்களுடன் வேலை செய்ய தனிப்பட்ட திட்டங்களுக்கான விரிவான வழிகாட்டுதல்களுக்கு, README கோப்புகளைப் பார்க்கவும்: - `quiz-app/README.md` - Vue 3 quiz application - `7-bank-project/README.md` - Authentication உடன் Banking application - `5-browser-extension/README.md` - Browser extension மேம்பாடு - `6-space-game/README.md` - Canvas அடிப்படையிலான விளையாட்டு மேம்பாடு - `9-chat-project/README.md` - AI chat assistant திட்டம் ### Monorepo அமைப்பு இது பாரம்பரிய Monorepo அல்ல, ஆனால் இந்த களஞ்சியத்தில் பல தனித்துவமான திட்டங்கள் உள்ளன: - ஒவ்வொரு பாடத்தொகுப்பும் தனித்துவமானது - திட்டங்கள் சார்புகளைப் பகிர்ந்து கொள்ளவில்லை - மற்றவற்றை பாதிக்காமல் தனிப்பட்ட திட்டங்களில் வேலை செய்யவும் - முழு பாடத்திட்ட அனுபவத்திற்காக முழு களஞ்சியத்தை Clone செய்யவும் --- **குறிப்பு**: இந்த ஆவணம் [Co-op Translator](https://github.com/Azure/co-op-translator) என்ற AI மொழிபெயர்ப்பு சேவையைப் பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயற்சிக்கின்றோம், ஆனால் தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறான தகவல்கள் இருக்கக்கூடும் என்பதை தயவுசெய்து கவனத்தில் கொள்ளுங்கள். அதன் தாய்மொழியில் உள்ள மூல ஆவணம் அதிகாரப்பூர்வ ஆதாரமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதால் ஏற்படும் எந்தவொரு தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கு நாங்கள் பொறுப்பல்ல.