29 KiB
AGENTS.md
Project Overview
இது துவக்கக்காரர்களுக்கு வலைத் தள மேம்பாட்டு அடிப்படைகளை கற்பிப்பதற்கான கல்வித் திட்ட இருப்பகம். இந்த பாடத்திட்டம் Microsoft Cloud Advocates உருவாக்கிய முழுமையான 12 வார பாடநெறி, இதில் JavaScript, CSS மற்றும் HTML என்ற 24 செயலில் குறைந்த பாடங்கள் உள்ளன.
Key Components
- கல்வி உள்ளடக்கம்: திட்ட அடிப்படையிலான தொகுதிகளில் ஒழுங்குபடுத்தப்பட்ட 24 கட்டமைக்கப்பட்ட பாடங்கள்
- உண்மையான திட்டங்கள்: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, மற்றும் AI Chat Assistant
- இணையவழி வினாடி வினாக்கள்: ஒவ்வொரு பாடத்திற்கும் முன்/பிறகு 3 கேள்விகளுடன் 48 வினாடி வினாக்கள்
- பல மொழி ஆதரவு: GitHub Actions மூலம் 50+ மொழிகளுக்கு தானாக மொழிபெயர்ப்பு செய்யப்படுகிறது
- தொழில்நுட்பங்கள்: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI திட்டங்களுக்காக)
Architecture
- பாடத்திட்ட அடிப்படையிலான கல்வி இருப்பகம்
- ஒவ்வொரு பாட பைல்டர் README, குறியீட்டு உதாரணங்கள், மற்றும் தீர்வுகள் கொண்டது
- quiz-app, பல்வேறு பாடத் திட்டங்களில் தனித்திட்ட திட்டங்கள்
- GitHub Actions (co-op-translator) பயன்படுத்தி மொழிபெயர்ப்பு முறை
- Docsify வழியே ஆவணப்படுத்தல் மற்றும் PDF வடிவில் கிடைக்கும்
Setup Commands
இந்த இருப்பகம் முதன்மையாக கல்வி உள்ளடக்கங்களைப் பயன்படுத்துவதற்காக உள்ளது. குறிப்பிட்ட திட்டங்களுடன் பணியாற்ற:
Main Repository Setup
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
Quiz App Setup (Vue 3 + Vite)
cd quiz-app
npm install
npm run dev # மேம்பாட்டு சர்வரைத் துவங்கவும்
npm run build # உற்பத்திக்காக கட்டமைக்கவும்
npm run lint # ESLint ஐ இயக்கு
Bank Project API (Node.js + Express)
cd 7-bank-project/api
npm install
npm start # API சேவையகத்தை துவங்குங்கள்
npm run lint # ESLint ஐ இயக்கவும்
npm run format # Prettier உடன் வடிவமைக்கவும்
Browser Extension Projects
cd 5-browser-extension/solution
npm install
# உலாவி-சிறப்பான நீட்டிப்பு ஏற்றும் வழிமுறைகளைப் பின்பற்றவும்
Space Game Projects
cd 6-space-game/solution
npm install
# index.html ஐ உலாவியில் திறக்கவும் அல்லது Live Server ஐ பயன்படுத்தவும்
Chat Project (Python Backend)
cd 9-chat-project/solution/backend/python
pip install openai
# GITHUB_TOKEN சுற்றுப்புற மாறியை அமைக்கவும்
python api.py
Development Workflow
For Content Contributors
- உங்கள் GitHub கணக்குக்குள் repositoryஐ fork செய்யவும்
- உங்கள் forkஐ உள்ளகமாக clone செய்யவும்
- உங்கள் மாற்றங்களுக்கு புதிய பிரஞ்சை உருவாக்கவும்
- பாட உள்ளடக்கம் அல்லது குறியீடு உதாரணங்களில் மாற்றங்கள் செய்யவும்
- தொடர்புடைய திட்ட அடைவு கோப்புகளில் எந்த குறியீடு மாற்றங்களையும் சோதிக்கவும்
- பங்களிப்பு வழிகாட்டுதல்களை பின்பற்றி pull request சமர்ப்பிக்கவும்
For Learners
- Repositoryஐ fork அல்லது clone செய்யவும்
- பாடக் கோப்புறைகளுக்கு தொடர்வதாக செல்லவும்
- ஒவ்வொரு பாடத்திற்கான README கோப்புகளை படியவும்
- https://ff-quizzes.netlify.app/web/ இல் முன்-பாட வினாடி வினாக்களை முடிக்கவும்
- பாடக் கோப்புறையில் குறியீடு உதாரணங்களைக் கடைப்பிடிக்கவும்
- கடமைகள் மற்றும் சவால்களை முடிக்கவும்
- பாடத்துக்குப் பிறகு வினாடி வினாக்களில் கலந்து கொள்ளவும்
Live Development
- ஆவணப்படுத்தல்: root இல்
docsify serveஇயக்கவும் (port 3000) - Quiz App: quiz-app அடைவில்
npm run devஇயக்கவும் - திட்டங்கள்: HTML திட்டங்களுக்கு VS Code Live Server நீட்டிப்பைப் பயன்படுத்தவும்
- API திட்டங்கள்: தொடர்புடைய API அடைவுகளில்
npm startஇயக்கவும்
Testing Instructions
Quiz App Testing
cd quiz-app
npm run lint # குறியீட்டு பாணி சிக்கல்களை சரிபார்க்கவும்
npm run build # கட்டுமானம் வெற்றிகரமாக நடந்ததா என்பதை உறுதிப்படுத்தவும்
Bank API Testing
cd 7-bank-project/api
npm run lint # குறியீடு பாணி பிரச்சனைகள் இருப்பதை சரிபார்க்கவும்
node server.js # எர்ரர்கள் இல்லாமல் சர்வர் துவங்குமா என்று பரிசோதிக்கவும்
General Testing Approach
- இது முழுமையான தானியங்கி சோதனைகள் இல்லாத கல்விப்பொருள் இருப்பகம்
- கையேடு சோதனைகள் கவனம் செலுத்தும்:
- குறியீடு உதாரணங்கள் பிழைகள் இல்லாமல் ஓடுவது
- ஆவணங்களில் உள்ள இணைப்புகள் சரியாக செயல்படுவது
- திட்ட கட்டமைப்புகள் வெற்றிகரமாக கிடைக்கிறது
- உதாரணங்கள் சிறந்த நடைமுறைகளை பின்பற்றுகிறது
Pre-submission Checks
- package.json உள்ள அடைவுகளில்
npm run lintஇயக்கவும் - மாறி இணைப்புகள் சரியானதா என்று சோதிக்கவும்
- குறியீடு உதாரணங்களை உலாவியிலும் Node.js இலும் சோதிக்கவும்
- மொழிபெயர்ப்புகள் சரியான அமைப்போடு உள்ளதா பார்வையிடவும்
Code Style Guidelines
JavaScript
- நவீன ES6+ இலக்கணத்தை பயன்படுத்தவும்
- திட்டங்களில் வழங்கப்பட்ட நிலையான ESLint கட்டமைப்புகளை பின்பற்றவும்
- கல்வி தெளிவிற்காக அர்த்தமுள்ள மாறி மற்றும் செயல்முறை பெயர்களைப் பயன்படுத்தவும்
- கற்றறிதலைக்கான கருத்துக்களைச் சேர்
- Prettier கொள்நிலைகளுக்கு உட்பட்டு வடிவமைக்கவும்
HTML/CSS
- பொருத்தமான HTML5 கூறுகள்
- பதிலளிக்கும் வடிவமைப்பு 원칙ங்கள்
- தெளிவான வகுப்பு பெயரிடல்கள்
- CSS தொழில்நுட்பங்களை விளக்கும் கருத்துக்கள்
Python
- PEP 8 வடிவமைப்பு கொள்கைகள்
- தெளிவான கல்வி குறியீடு உதாரணங்கள்
- கற்றல் உதவிக்கு தயாரிப்பு குறிப்புகள்
Markdown Documentation
- தெளிவான தலைப்பு அடிக்குறிச் சொத்து
- மொழி குறிப்பிடப்பட்ட குறியீடு தொகுதிகள்
- கூடுதல் வளங்களுக்கான இணைப்புகள்
images/அடைவுகளில் திரைபடங்கள் மற்றும் புகைப்படங்கள்- அணுகல் வசதிக்குப் படங்கள் க்கான alt உரை
File Organization
- பாடங்கள் தொடர் எண்களுடன் (1-getting-started-lessons, 2-js-basics, மற்றும் பிற)
- ஒவ்வொரு திட்டத்தில்
solution/மற்றும் பெரும்பாலும்start/அல்லதுyour-work/அடைவுகள் உள்ளன - படங்கள் பாடங்களுக்கு ஏற்ப தனியான
images/அடைவுகளில் சேமிக்கப்பட்டவை - மொழிபெயர்ப்புகள்
translations/{language-code}/அமைப்பில் உள்ளன
Build and Deployment
Quiz App Deployment (Azure Static Web Apps)
quiz-app Azure Static Web Apps சட்டப்படியாக அமைக்கப்பட்டுள்ளது:
cd quiz-app
npm run build # dist/ கோப்புறை உருவாக்குகிறது
# முக்கிய கிளையில் (main) திருத்தங்களைச் செய்தால் GitHub Actions வேலைபாட்டின் மூலம் பயன்படுத்துகிறது
Azure Static Web Apps அமைப்புகள்:
- App இடம்:
/quiz-app - வெளியீட்டு இடம்:
dist - Workflow:
.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml
Documentation PDF Generation
npm install # docsify-to-pdf ஐ நிறுவவும்
npm run convert # docs இல் இருந்து PDF உருவாக்கவும்
Docsify Documentation
npm install -g docsify-cli # Docsify-ஐ உலகளாவிய அளவில் நிறுவவும்
docsify serve # localhost:3000-ல் சேவை செய்யவும்
Project-specific Builds
ஒவ்வொரு திட்ட அடைவுக்கும் தனிப்பட்ட கட்டமைப்பு இருக்கலாம்:
- Vue திட்டங்கள்:
npm run buildமூலம் தயாரிப்பு தொகுதிகள் உருவாக்கப்படுகிறது - நிலையான திட்டங்கள்: கட்டமைப்பு படிகள் வேண்டாம், கோப்புகளை நேரடியாக சேவை செய்கின்றன
Pull Request Guidelines
Title Format
மாற்றத் துறையை தெளிவாக வெளிப்படுத்தும் தலைப்புகள் பயன்படுத்தவும்:
[Quiz-app] புதிய பாடத்திற்கான வினாடி வினா சேர்க்கவும்[Lesson-3] terrarium திட்டத்தில் தட்டுப்பாடு சரி செய்யவும்[Translation] பாடம் 5க்கான ஸ்பானிஷ் மொழிபெயர்ப்பு சேர்க்கவும்[Docs] அமைப்புத் தகவல்களை புதுப்பிக்கவும்
Required Checks
PR சமர்ப்பிக்கும்போது:
-
குறியீடு தரம்:
- பாதிக்கப்பட்ட திட்ட அடைவுகளில்
npm run lintஇயக்கவும் - அனைத்து நிலைபாடுகளையும் தவிர்க்கவும்
- பாதிக்கப்பட்ட திட்ட அடைவுகளில்
-
கட்டமைப்பு சரிபார்:
- தேவையானால்
npm run buildஇயக்கவும் - கட்டமைப்பு பிழைகள் இல்லாததைக் உறுதி செய்யவும்
- தேவையானால்
-
இணைப்பு சரிபார்:
- அனைத்து மார்க்டவுன் இணைப்புகளையும் சோதிக்கவும்
- படங்கள் தொடர்பிலான இணைப்புகளை சரிபார்க்கவும்
-
உள்ளடக்கு மதிப்பீடு:
- எழுத்துப்பிழைகள் மற்றும் இலக்கண பிழைகள் சரிபார்க்கவும்
- குறியீடு உதாரணங்கள் சரியதாகவும் கற்றலுக்குத் தகுதியதாகவும் இருக்க வேண்டும்
- மொழிபெயர்ப்புகள் உண்மையான பொருளை பறைய வைக்க வேண்டும்
Contribution Requirements
- Microsoft CLA (முதலாவது PRல் தானாக சரிபார்க்கப்படுகிறது) ஏற்க வேண்டும்
- Microsoft Open Source Code of Conduct பின்பற்ற வேண்டும்
- விரிவான வழிகாட்டலுக்கு CONTRIBUTING.md பார்க்கவும்
- சம்பந்தப்பட்ட.issue எண்களை PR விளக்கத்தில் குறிப்பிடவும்
Review Process
- PRகள் பராமரிப்பாளர்களாலும் சமூகவினராலும் மதிப்பாய்வு செய்யப்படுகின்றன
- கல்வி தெளிவு முதன்மை
- குறியீடு உதாரணங்கள் தற்போதைய சிறந்த நடைமுறைகளை பின்பற்ற வேண்டும்
- மொழிபெயர்ப்புகள் சரியானவை மற்றும் பண்பாட்டு பொருத்தமானவையாக இருக்க வேண்டும்
Translation System
Automated Translation
- GitHub Actions co-op-translator workflow பயன்படுத்துகிறது
- 50+ மொழிகளுக்கு தானாக மொழிபெயர்க்கிறது
- மூலம் கோப்புக்கள் மெயின் அடைவுகளில் உள்ளன
- மொழிபெயர்க்கப்பட்ட கோப்புகள்
translations/{language-code}/அடைவுகளில் உள்ளன
Adding Manual Translation Improvements
translations/{language-code}/உள்ள கோப்புகளை கண்டறியவும்- அமைப்பை மாறாமல் மேம்படுத்துக
- குறியீடு உதாரணங்கள் செயல்படுவதை உறுதி செய்யவும்
- உள்ளூர் வினாடி வினா உள்ளடக்கத்தை சோதிக்கவும்
Translation Metadata
மொழிபெயர்க்கப்பட்ட கோப்புகள் metadata தலைப்பை கொண்டுள்ளன:
<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "...",
"translation_date": "...",
"source_file": "...",
"language_code": "..."
}
-->
Debugging and Troubleshooting
Common Issues
Quiz app ஆரம்பமாவதில் தோல்வி:
- Node.js பதிப்பு (v14+ பரிந்துரைக்கப்படுகிறது) பரிசோதிக்கவும்
node_modulesமற்றும்package-lock.jsonநீக்கி, மீண்டும்npm installஇயக்கவும்- போர்ட் முரண்பாடுகள் உள்ளதா பரிசோதிக்கவும் (இயல்புநிலை: Vite போர்ட் 5173 பயன்படுத்துகிறது)
API சர்வர் துவங்கவில்லை:
- Node.js பதிப்பு குறைந்தபட்சம் node >=10 என்பதை உறுதி செய்யவும்
- போர்ட் பயன்படுத்தப்படுகிறதா பாருங்கள்
- அனைத்து நாயகங்கள்
npm installமூலம் நிறுவப்பட்டுள்ளன என்பதை உறுதி செய்க
Browser extension ஏற்ற முடியவில்லை:
- manifest.json சரியாக வடிவமைக்கப்பட்டுள்ளது என்பதை பரிசோதிக்கவும்
- உலாவி கான்சோலில் பிழைகள் உள்ளதா பாருங்கள்
- உலாவி குறிப்பிட்ட நீட்டிப்பு நிறுவல் வழிகாட்டுதல்களை பின்பற
Python chat திட்ட சிக்கல்கள்:
- OpenAI package நிறுவப்பட்டுள்ளது என உறுதி செய்யவும்:
pip install openai - GITHUB_TOKEN சுற்றுச்சூழல் மாறி அமைக்கப்பட்டுள்ளது என்பதைச் சரிபார்க்கவும்
- GitHub Models அணுகல் அனுமதிகளை பார்
Docsify ஆவணங்களை சேவை செய்யவில்லை:
- docsify-cli இன்ஸ்டால் செய்யவும்:
npm install -g docsify-cli - repo ரூட் அடைவில் இருந்து இயக்கவும்
docs/_sidebar.mdஉள்ளதா என சோதிக்கவும்
Development Environment Tips
- HTML திட்டங்களுக்கு VS Code Live Server நீட்டிப்பைப் பயன்படுத்தவும்
- UMLint மற்றும் Prettier நீட்டிப்புகளை நிறுவி ஒரே மாதிரியில் வடிவமைக்கவும்
- JavaScript டீபக்கிங் க்காக உலாவி DevTools பயன்படுத்தவும்
- Vue திட்டங்களுக்கு Vue DevTools உலாவி நீட்டிப்பை நிறுவவும்
Performance Considerations
- 50+ மொழிகளுக்கு மொழிபெயர்ப்பு கோப்புக்கள் அதிகமாக இருப்பதால் முழு கிளோன்ஸ் பெரிதாக இருக்கும்
- உள்ளடக்கத்தில் மட்டும் பணியாற்ற shallow clone பயன்படுத்தவும்:
git clone --depth 1 - ஆங்கில உள்ளடக்க பணியாற்றும்போது மொழிபெயர்ப்புகளை தேடலில் இருந்து விலக்கவும்
- முதலாவது இயக்கத்தில் கட்டுமான செயல்பாடுகள் மெதுவாக இருக்கலாம் (npm install, Vite build)
Security Considerations
Environment Variables
- API விசைகள் repositoryக்கு யாரும் கொடுக்கக்கூடாது
.envகோப்புகளை பயன்படுத்தவும் (.gitignoreயில் உள்ளது)- தேவைப்பட்ட சுற்றுச்சூழல் மாறிகள் திட்ட READMEகளில் ஆவணப்படுத்துங்கள்
Python Projects
- விர்சுவல் சூழல்கள் பயன்படுத்தவும்:
python -m venv venv - சார்பிலான பாகங்கள் புதுப்பித்து வைக்கவும்
- GitHub tokens குறைந்தபட்ச அனுமதிகளுடன் கொண்டிருக்க வேண்டும்
GitHub Models Access
- GitHub Modelsக்கு தனிப்பட்ட அணுகல் டோக்கன்கள் (PAT) அவசியம்
- டோக்கன்களை சுற்றுச்சூழல் மாறிகளாக சேமிக்கவும்
- டோக்கன்கள் மற்றும் அங்கீகார தகவல்களை commit செய்ய வேண்டாம்
Additional Notes
Target Audience
- வலை மேம்பாட்டில் முழுமையாக தொடங்குபவர்கள்
- மாணவர்கள் மற்றும் தன்னின்றிக் கற்றவர்கள்
- வகுப்பறையில் பாடத்திட்டத்தைப் பயன்படுத்தும் ஆசிரியர்கள்
- உள்ளடக்கம் அணுகல் வசதிக்கும் படிப்படியாக திறன்கள் வளர்ப்புக்கும் வடிவமைக்கப்பட்டுள்ளது
Educational Philosophy
- திட்ட அடிப்படையிலான கற்றல் முறை
- அதிரடிக் குறுந்தொகுப்புகள் (quizzes)
- செயலில் கையடக்க நிகழ்ச்சிகள்
- உலக உண்மையான பயன்பாட்டு உதாரணங்கள்
- கட்டுமானங்களுக்குக் முன் அடிப்படைகள்
Repository Maintenance
- செயலில் உள்ள கற்றலும் பங்களிப்பாளர்களின் சமூகத்துடன்
- சார்பில்லாத புதுப்பிப்புகள் மற்றும் உள்ளடக்க மேலாண்மை
- பராமரிப்பாளர்களால் தீர்வுகள் மற்றும் விவாதங்கள் கண்காணிக்கப்படுகின்றன
- GitHub Actions மூலம் மொழிபெயர்ப்பு புதுப்பிப்புகள் தானாக நடக்கின்றன
Related Resources
- Microsoft Learn modules
- Student Hub resources
- GitHub Copilot கற்றவர்களுக்கு பரிந்துரைக்கப்படுகிறது
- கூடுதல் பாடநெறிகள்: Generative AI, Data Science, ML, IoT பாடங்கறுத்தான் கிடைக்கின்றன
Working with Specific Projects
தனித்தனியான திட்டங்களுக்கான விரிவான அறிவுறுத்தல்களுக்கு பின்வரும் 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 Structure
இது பாரம்பரிய monorepo அல்லாவிட்டாலும், இந்த இருப்பகத்தில் பல தனித்திட்டங்கள் உள்ளன:
- ஒவ்வொரு பாடமும் தனித்திணைக்களமாக உள்ளது
- திட்டங்கள் பொதுவான சார்புகளை பகிர்வதில்லை
- தனித்திட்டங்களில் வேலை செய்தாலும் மற்றவற்றுக்கு பாதிப்பு ஏற்படாது
- முழுமையான பாடநெறி அனுபவத்திற்கு முழு repoஐ கிளோன் செய்யவும்
பிரதி நிபந்தனை: இந்த ஆவணம் AI மொழி மாற்ற சேவை Co-op Translator பயன்படுத்தி மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயலும்போதும், தானியங்கி மொழி மாற்றங்களில் பிழைகள் அல்லது தவறான தகவல்கள் இருக்க வாய்ப்பு உள்ளது என்பதை தயவுசெய்து நினைத்துக் கொள்ளவும். உண்மையான ஆவணம் அதன் சொந்த மொழியில் அதிகாரபூர்வ மூலமாக கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பு பரிந்துரைக்கப்படுகிறது. இந்த மொழிபெயர்ப்பின் பயன்படுத்துதலால் ஏற்பட்ட எந்த தவறான புரிதல்கள் அல்லது தவறான விளக்கங்களுக்கும் நாங்கள் பொறுப்பற்றவர்கள்.