# AGENTS.md ## Project Overview இது ஆரம்பத்துக்கு வலை மேம்பாட்டுக்கான அடிப்படைகளை கற்பிப்பதற்கான கல்வி பாடத்திட்டக் கோப்பகம். இந்த பாடத்திட்டம் மைக்ரோசாஃப்ட் கிளவுட் வழிகாட்டிகள் உருவாக்கிய 12 வார முழுமையான பாடநெறி ஆகும், இதில் ஜாவாஸ்கிரிப்ட், CSS மற்றும் HTML ஆகியவை ஆன 24 பயிற்சி பாடங்கள் உள்ளன. ### Key Components - **கல்வி உள்ளடக்கம்**: திட்ட அடிப்படையான தொகுதிகளாக அமைக்கப்பட்ட 24 கட்டமைக்கப்பட்ட பாடங்கள் - **பயிற்சி திட்டங்கள்**: டெர்ரேரியம், தைப் விளையாட்டு, உலாவி நீட்டிப்பு, விண்வெளி விளையாட்டு, வங்கி செயலி, குறியீடு தொகுப்பான், மற்றும் AI அரட்டை உதவியாளர் - **இடையூறு தேர்வுகள்**: 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 ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` ### Quiz App Setup (Vue 3 + Vite) ```bash cd quiz-app npm install npm run dev # மேம்பாட்டு சேவையகத்தை துவக்கவும் npm run build # உற்பத்திக்காக கட்டமைக்கவும் npm run lint # ESLint ஐ இயக்கவும் ``` ### Bank Project API (Node.js + Express) ```bash cd 7-bank-project/api npm install npm start # API சேவையகம் துவங்கு npm run lint # ESLint ஐ இயக்கவும் npm run format # Prettier உடன் வடிவமைக்கவும் ``` ### Browser Extension Projects ```bash cd 5-browser-extension/solution npm install # உலாவிச் சிறப்பான நீட்டிப்பு ஏற்றும் வழிமுறைகளைக் பின்பற்றவும் ``` ### Space Game Projects ```bash cd 6-space-game/solution npm install # index.html ஐ உலாவியில் திறக்கவும் அல்லது Live Server ஐ பயன்படுத்தவும் ``` ### Chat Project (Python Backend) ```bash cd 9-chat-project/solution/backend/python pip install openai # GITHUB_TOKEN சுற்றுச்சூழல் மாறியினை அமைக்கவும் python api.py ``` ## Development Workflow ### For Content Contributors 1. **கோப்பகத்தை** உங்கள் GitHub கணக்குக்கு fork செய்யவும் 2. **உங்கள் fork**-ஐ உள்ளூர் கணினியில் clone செய்யவும் 3. **புதிய கிளை** உருவாக்கி மாற்றங்களுக்காக வேலை செய்யவும் 4. பாட உள்ளடக்கம் அல்லது குறியீடு எடுத்துக்காட்டுகளில் மாற்றங்கள் செய்யவும் 5. சம்பந்தப்பட்ட திட்ட அடைவுகளில் குறியீடு பரிசோதனை செய்யவும் 6. பங்களிப்பு வழிகாட்டுதல்களை பின்பற்றி pull request-ஐ சமர்ப்பிக்கவும் ### For Learners 1. கோப்பகத்தை fork அல்லது clone செய்யவும் 2. பாட அடைவுகளில் தொடர்ச்சியாக செல்லவும் 3. ஒவ்வொரு பாடத்திற்குமான README கோப்புகளை படியுங்கள் 4. பாட முன்னுரை தேர்வுகளை https://ff-quizzes.netlify.app/web/ என்ற இடத்தில் முடிக்கவும் 5. பாட அடைவுகளில் உள்ள குறியீடு எடுத்துக்காட்டுகளை செயல்படுத்தவும் 6. பணிகள் மற்றும் சவால்களை முடிக்கவும் 7. பாட பின் தேர்வுகளை எடுக்கவும் ### Live Development - **ஆவணங்கள்**: ரூட் ஃபோல்டரில் `docsify serve` இயக்கவும் (போர்ட் 3000) - **Quiz App**: quiz-app அடைவில் `npm run dev` இயக்கவும் - **திட்டங்கள்**: HTML திட்டங்களுக்கு VS Code Live Server நீட்டிப்பு பயன்படுத்தவும் - **API திட்டங்கள்**: சம்பந்தப்பட்ட API அடைவுகளில் `npm start` இயக்கவும் ## Testing Instructions ### Quiz App Testing ```bash cd quiz-app npm run lint # குறியீட்டு வடிவமைப்பு பிரச்சனைகளை சரிபார்க்கவும் npm run build # கட்டமைப்பு வெற்றி பெறுகிறதா என்று உறுதி செய்யவும் ``` ### Bank API Testing ```bash 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 அமைப்புடன் கூடியது: ```bash cd quiz-app npm run build # dist/ கோப்புறை உருவாக்குகிறது # முக்கிய கிளையில் தள்ளும்போது GitHub Actions பணிச்சுழற்சியினூடாக வெளியிடுகிறது ``` Azure Static Web Apps அமைப்பு: - **ஆபிள் இருப்பிடம்**: `/quiz-app` - **வெளியீடு இருப்பிடம்**: `dist` - **வேலைநடத்தை**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` ### Documentation PDF Generation ```bash npm install # docsify-to-pdf ஐ நிறுவவும் npm run convert # docs இலிருந்து PDF உருவாக்கவும் ``` ### Docsify Documentation ```bash npm install -g docsify-cli # Docsify-ஐ உலகளாவியமாக நிறுவவும் docsify serve # localhost:3000-ல் சேவை செய்யவும் ``` ### Project-specific Builds ஒவ்வொரு திட்ட அடைவுக்கும் தனித்துவமான கட்டுமான செயல்முறை இருக்கலாம்: - Vue திட்டங்கள்: `npm run build` மூலம் தயாரிப்பு தொகுப்புகள் உருவாக்கப்படும் - நிலையான திட்டங்கள்: கட்டுமான படிகள் இல்லாமல் நேரடியாக கோப்புகள் வழங்கப்படுvம் ## Pull Request Guidelines ### Title Format மாற்றத்தின் பகுதியைப் பற்சொல்லும் தெளிவான தலைப்புகளைப் பயன்படுத்தவும்: - `[Quiz-app] புதுப் பாடத்திற்கான புதிய தேர்வு சேர்க்கப்பட்டது` - `[Lesson-3] டெர்ரேரியம் திட்டத்தில் எழுத்து பிழை திருத்தப்பட்டது` - `[Translation] பாடம் 5 இல் ஸ்பானிஷ் மொழிபெயர்ப்பு இணைக்கப்பட்டது` - `[Docs] அமைப்பு வழிகாட்டிகள் புதுப்பிக்கப்பட்டன` ### Required Checks PR சமர்ப்பிக்கும் முன்: 1. **குறியீடு தரம்**: - பாதிக்கப்பட்ட திட்ட அடைவுகளில் `npm run lint` இயக்கவும் - அனைத்து பிழைகள் மற்றும் எச்சரிக்கைகள் சரி செய்யப்பட வேண்டும் 2. **கட்டுமான உறுதி**: - பொருத்தமாக இருந்தால் `npm run build` இயக்கவும் - கட்டுமான பிழைகள் இல்லாது இருக்க வேண்டும் 3. **இணைப்பு சரிபார்ப்பு**: - எல்லா மார்க்டவுன் இணைப்புகளும் சோதிக்கப்பட வேண்டும் - பட இணைப்புகளும் சரியாக வேலை செய்ய வேண்டும் 4. **உள்ளடக்கம் மதிப்பாய்வு**: - எழுத்துப்பிழைகள் மற்றும் இலக்கணம் சரிபார்க்கவும் - குறியீடு எடுத்துக்காட்டுகள் சரியானவை மற்றும் கல்விக்கும் உகந்ததாக இருக்க வேண்டும் - மொழிபெயர்ப்புகள் அசல் அர்த்தத்தை பராமரிக்க வேண்டும் ### Contribution Requirements - Microsoft CLA-க்கு சம்மதிக்க வேண்டும் (முதல் PR-க்கு தானாகச் சோதனை) - [Microsoft Open Source நடைமுறை சட்டத்தை](https://opensource.microsoft.com/codeofconduct/) பின்பற்றவும் - விரிவான வழிகாட்டிகளுக்கு [CONTRIBUTING.md](./CONTRIBUTING.md) பார்க்கவும் - தொடர்புடைய பிரச்சினை எண்களை PR விளக்கத்தில் குறிப்பிடவும் (அதவாக இருந்தால்) ### Review Process - PR-கள் பராமரிப்பவர்களும் சமூகத்தினராலும் ஆய்வு செய்யப்படுகின்றன - கல்விக்கான தெளிவை முன்னுரிமை வைக்கிறது - குறியீடு எடுத்துக்காட்டுகள் இதய நடைமுறைகளை பின்பற்ற வேண்டும் - மொழிபெயர்ப்புகள் துல்லியமும் பண்பாட்டு பொருத்தமும் கொண்டதாக இருக்க வேண்டும் ## Translation System ### Automated Translation - GitHub Actions உடன் co-op-translator வேலை ஓட்டத்தை உபயோகிக்கிறது - 50+ மொழிகளுக்கு தானாக மொழிபெயர்க்கின்றது - மூல கோப்புகள் முக்கிய அடைவுகளில் உள்ளன - மொழிபெயர்க்கப்பட்ட கோப்புகள் `translations/{language-code}/` அடைவுகளில் இருக்கும் ### Adding Manual Translation Improvements 1. `translations/{language-code}/` இல் கோப்புகளை கண்டறியவும் 2. கட்டமைப்பை காப்பாற்றி மேம்பாடுகள் சேர்க்கவும் 3. குறியீடு எடுத்துக்காட்டுகள் செயல் திறன் இழக்காமல் இருக்க வேண்டும் 4. உள்ளூர் தேர்வு உள்ளடக்கம் இருப்பின் சோதனை செய்யவும் ### Translation Metadata மொழிபெயர்ப்பு கோப்புகளில் metadata தலைப்பு உள்ளடக்கம்: ```markdown ``` ## Debugging and Troubleshooting ### Common Issues **தேர்வு செயலி துவங்கவில்லை**: - Node.js பதிப்பு (v14+ பரிந்துரைக்கப்படுகிறது) சரி பார்த்தல் - `node_modules` மற்றும் `package-lock.json` அழித்து, `npm install` மீண்டும் இயக்குதல் - போர்ட் முரண்பாடுகள் இருக்கிறதா என்று போக்காய்வது (இயல்பானது: Vite போர்ட் 5173 பாவிக்கிறது) **API சேவையகம் துவங்கவில்லை**: - Node.js பதிப்பு குறைந்தபட்சம் (node >=10) என்பது உறுதி செய்யவும் - போர்ட் ஏற்கனவே பயன்படுத்தப்பட்டு வருகிறதா என்று சரிபார்க்கவும் - தேவையான அனைத்து சார்ந்த பண்புகள் `npm install` மூலம் நிறுவப்பட்டுள்ளன என்பதை உறுதிசெய்யவும் **உலாவி நீட்டிப்பு ஏற்றவில்லை**: - manifest.json சரியாக வடிவமைக்கப்பட்டிருக்கிறதா என்பதைக் கண்டறியவும் - உலாவி கன்சோலில் பிழைகள் உள்ளதா பார்க்கவும் - உலாவி-சார்ந்த நீட்டிப்பு நிறுவல் வழிகாட்டுதல்களை பின்பற்றவும் **Python அரட்டை திட்ட பிரச்சினைகள்**: - OpenAI பைதான் தொகுப்பு நிறுவியுள்ளீர்களா: `pip install openai` - GITHUB_TOKEN சுற்றுச்சூழல் மாறி அமைக்கப்பட்டுள்ளதா - GitHub மாதிரிகள் அணுகல் அனுமதிகள் சரிபார்க்கவும் **Docsify ஆவணங்கள் வழங்கவில்லை**: - docsify-cli-வை உலகளாவியமாக நிறுவவும்: `npm install -g docsify-cli` - கோப்பகம் ரூட்டிலிருந்து இயக்கவும் - `docs/_sidebar.md` உள்ளதா நன்றாக பார்க்கவும் ### Development Environment Tips - HTML திட்டங்களுக்கு VS Code Live Server நீட்டுப்பயன்பாடு பயன்படுத்தவும் - ஒருமைத்தன்மை வடிவமைப்புக்கு ESLint மற்றும் Prettier நீட்டிப்புகள் நிறுவவும் - JavaScript பிழைதிருத்தத்திற்கு உலாவி DevTools பயன்படுத்தவும் - Vue திட்டங்களுக்கு Vue DevTools உலாவி நீட்டிப்பை நிறுவவும் ### Performance Considerations - 50+ மொழிகளின் ஏராளமான மொழிபெயர்ப்பு கோப்புக்கள் இருப்பதால் முழுமையான கிளோன் பெரியது - உள்ளடக்கம் மட்டுமே வேண்டுமானால், `git clone --depth 1` என்ற குறுகிய கிளோன் பயன்படுத்தவும் - ஆங்கில உள்ளடக்கம் மீது வேலைசெய்யும் போது தேடலில் மொழிபெயர்ப்புகளை தவிர்க்கவும் - முதலாவது இயக்கத்தில் கட்டுமான செயல்முறைகள் மெதுவாக இருக்கலாம் (npm install, Vite கட்டிடம்) ## Security Considerations ### Environment Variables - API மேலதிக விசைகளின் GitHub கோப்பகத்தில் கட்-பிடிக்க கூடாது - `.env` கோப்புகளை பயன்படுத்தவும் (`.gitignore`யில் முன்பிருந்தே சேர்க்கப்பட்டுள்ளது) - தேவையான சுற்றுச்சூழல் மாறிகள் README-ல் குறிப்பிடப்பட வேண்டும் ### Python Projects - மெய்நிகர் சூழலை பயன்படுத்தவும்: `python -m venv venv` - சார்ந்த பண்புகள் புதுப்பிக்கப்பட்ட நிலை வைத்திருக்கவும் - GitHub டோக்கன்களுக்கு குறைந்தபட்ச அனுமதிகள் கொடுக்கப்பட வேண்டும் ### GitHub Models Access - GitHub மாதிரிகளுக்கு தனிப்பட்ட அணுகல் டோக்கன்கள் (PAT) தேவையாம் - டோக்கன்கள் சுற்றுச்சூழல் மாறிகளாக சேமிக்கப்பட வேண்டும் - ஒருபோதும் டோக்கன்கள் அல்லது கடவுச்சொற்களை கட்-பிடிக்க கூடாது ## Additional Notes ### Target Audience - வலை மேம்பாட்டுக்கு முழுமையான புதியவர்கள் - மாணவர்கள் மற்றும் சுய கற்றல் பயில்பவர்கள் - வகுப்பறையில் பாடத்திட்டத்தை பயன்படுத்தும் ஆசிரியர்கள் - உள்ளடக்கம் அணுகும் திறன் மற்றும் படிப்படியாக திறன் வளர்ப்புக்கு வடிவமைக்கப்பட்டுள்ளது ### Educational Philosophy - திட்ட அடிப்படையிலான கற்றல் முறைகள் - அடிக்கடி அறிவு பரிசோதனைகள் (தேர்வுகள்) - கைபிடியக் கற்றல் பயிற்சிகள் - நடைமுறை பயன்பாட்டு எடுத்துக்காட்டுகள் - கட்டமைப்புகளுக்கு முன் அடிப்படைகளில் கவனம் ### Repository Maintenance - செயல்பாட்டுள்ள கற்றல்விதிச் சமூகமும் பங்களிப்பாளர்களும் - சார்ந்த பண்புகள் மற்றும் உள்ளடக்கங்கள் நிலையான புதுப்பிப்புகள் - பிரச்சினைகள் மற்றும் விவாதங்களை பராமரிப்போர் கவனிக்கின்றனர் - மொழிபெயர்ப்பு புதுப்பிப்புகள் GitHub Actions மூலம் தானியாக நடக்கும் ### Related Resources - [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) மாணவர்களுக்கு பரிந்துரைக்கப்படுகிறது - கூடுதல் பாடநெறிகள்: உருவாக்கும் AI, தரவு அறிவியல், இயற்பியல் கற்றல், 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 இனியொரு பிரமாண மொணோ ரெப்போ அல்லினும், இந்தக் கோப்பகம் பல தனித்தனி திட்டங்களை கொண்டுள்ளது: - ஒவ்வொரு பாடமும் தனித்தனியானது - திட்டங்களுக்கிடையே சார்ந்த பண்புகள் பகிர்ந்துகொள்ளப்படாது - மற்றவர்களை பாதிக்காமல் தனித்தனி திட்டங்களில் வேலை செய்யலாம் - முழு பாடத்திட்ட அனுபவத்துக்காக முழு கோப்பகத்தையும் கிளோன் செய்யலாம் --- **பிரதி அறிவிப்பு**: இந்த दस्तावेज़ம் AI மொழிபெயர்ப்பு சேவை [Co-op Translator](https://github.com/Azure/co-op-translator) மூலம் மொழிபெயர்க்கப்பட்டது. நாம் துல்லியத்திற்காக முயற்சித்தாலும், தானாக உருவாகும் மொழிபெயர்ப்புகளில் தவறுகள் அல்லது துல்லியமின்மைகள் இருக்கக்கூடும் என்பதை நினைவில் வைக்கவும். இதன் சொந்த மொழியில் உள்ள அசல் दस्तावेज़த்தை அதிகாரப்பூர்வ ஆதாரமாகக் கருத வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பை பரிந்துரைக்கிறோம். இந்த மொழிபெயர்ப்பைப் பயன்படுத்துவதிலிருந்து உருவாகும் எந்த தவறான புரிதல்களுக்கும் அல்லது தவிர்க்கும் விளக்கங்களுக்கு நாங்கள் பொறுப்பேற்கமாட்டோம்.