chore(i18n): sync translations with latest source changes (chunk 1/1, 6 changes)

pull/1690/head
localizeflow[bot] 3 weeks ago
parent 8a1ee18723
commit b58da518b5

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-02-06T11:34:57+00:00",
"translation_date": "2026-02-06T13:01:25+00:00",
"source_file": "AGENTS.md",
"language_code": "da"
},

@ -2,36 +2,36 @@
## Projektoversigt
Dette er et undervisningspensum-arkiv til at undervise nybegyndere i grundlæggende webudvikling. Pensumet er et omfattende 12-ugers kursus udviklet af Microsoft Cloud Advocates, med 24 praktiske lektioner, der dækker JavaScript, CSS og HTML.
Dette er et uddannelsesmæssigt læseplansdepot til undervisning i webudviklingsgrundlag for begyndere. Læseplanen er et omfattende 12-ugers kursus udviklet af Microsoft Cloud Advocates, med 24 praktiske lektioner, der dækker JavaScript, CSS og HTML.
### Hovedkomponenter
### Nøglekomponenter
- **Undervisningsindhold**: 24 strukturerede lektioner organiseret i projektbaserede moduler
- **Praktiske projekter**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor og AI Chat Assistant
- **Interaktive quizzer**: 48 quizzer med 3 spørgsmål hver (før/efter lektion vurderinger)
- **Flersproget support**: Automatiske oversættelser til 50+ sprog via GitHub Actions
- **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (til AI-projekter)
- **Uddannelsesindhold**: 24 strukturerede lektioner organiseret i projektbaserede moduler
- **Praktiske projekter**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor og AI Chat Assistant
- **Interaktive quizzer**: 48 quizzer med 3 spørgsmål hver (for/efter lektion evalueringer)
- **Fler-sprogs støtte**: Automatiske oversættelser til 50+ sprog via GitHub Actions
- **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (til AI projekter)
### Arkitektur
- Undervisningsarkiv med lektionbaseret struktur
- Hver lektion mappe indeholder README, kodeeksempler og løsninger
- Selvstændige projekter i separate mapper (quiz-app, diverse lektionprojekter)
- Oversættelsessystem ved hjælp af GitHub Actions (co-op-translator)
- Dokumentation serveret via Docsify og tilgængelig som PDF
- Uddannelsesrepository med lektion-baseret struktur
- Hver lektionsmappe indeholder README, kodeeksempler og løsninger
- Selvstændige projekter i separate mapper (quiz-app, forskellige lektionsprojekter)
- Oversættelsessystem ved hjælp af GitHub Actions (co-op-translator)
- Dokumentation serveret via Docsify og tilgængelig som PDF
## Setup-kommandoer
## Opsætningskommandoer
Dette arkiv er primært til forbrug af undervisningsindhold. For arbejde med specifikke projekter:
Dette repository er primært til forbrug af uddannelsesindhold. For arbejde med specifikke projekter:
### Hoved Arkiv Setup
### Hovedrepository opsætning
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Quiz App Setup (Vue 3 + Vite)
### Quiz App Opsætning (Vue 3 + Vite)
```bash
cd quiz-app
@ -40,7 +40,7 @@ npm run dev # Start udviklingsserver
npm run build # Byg til produktion
npm run lint # Kør ESLint
```
### Bank Projekt API (Node.js + Express)
```bash
@ -50,7 +50,7 @@ npm start # Start API-server
npm run lint # Kør ESLint
npm run format # Formater med Prettier
```
### Browser Extension Projekter
```bash
@ -58,7 +58,7 @@ cd 5-browser-extension/solution
npm install
# Følg browser-specifikke instruktioner til indlæsning af udvidelser
```
### Space Game Projekter
```bash
@ -66,7 +66,7 @@ cd 6-space-game/solution
npm install
# Åbn index.html i browser eller brug Live Server
```
### Chat Projekt (Python Backend)
```bash
@ -75,34 +75,34 @@ pip install openai
# Indstil miljøvariablen GITHUB_TOKEN
python api.py
```
## Udviklingsworkflow
### For Indholdsbidragydere
### For indholds-bidragydere
1. **Fork arkivet** til din GitHub-konto
2. **Klon din fork** lokalt
3. **Opret en ny gren** til dine ændringer
4. Lav ændringer i lektionens indhold eller kodeeksempler
5. Test eventuelle kodeændringer i relevante projektmapper
6. Indsend pull requests i henhold til bidragsretningslinjer
1. **Fork repositoryet** til din GitHub-konto
2. **Klon din fork** lokalt
3. **Opret en ny gren** til dine ændringer
4. Foretag ændringer i lektionsindhold eller kodeeksempler
5. Test eventuelle kodeændringer i relevante projektmapper
6. Indsend pull requests efter bidragsretningslinjerne
### For Lærende
### For elever
1. Fork eller klon arkivet
2. Naviger gennem lektionmapper sekventielt
3. Læs README-filer for hver lektion
4. Gennemfør før-lektions quizzer på https://ff-quizzes.netlify.app/web/
5. Arbejd igennem kodeeksempler i lektionsmapper
6. Fuldfør opgaver og udfordringer
7. Tag efter-lektions quizzer
1. Fork eller klon repositoryet
2. Naviger til lektionsmapper i rækkefølge
3. Læs README-filer for hver lektion
4. Gennemfør for-lesson quizzer på https://ff-quizzes.netlify.app/web/
5. Arbejd med kodeeksempler i lektionsmapper
6. Fuldfør opgaver og udfordringer
7. Tag efter-lesson quizzer
### Live Udvikling
### Live udvikling
- **Dokumentation**: Kør `docsify serve` i roden (port 3000)
- **Quiz App**: Kør `npm run dev` i quiz-app mappen
- **Projekter**: Brug VS Code Live Server extension til HTML projekter
- **API Projekter**: Kør `npm start` i respektive API mapper
- **Dokumentation**: Kør `docsify serve` i roden (port 3000)
- **Quiz App**: Kør `npm run dev` i quiz-app mappen
- **Projekter**: Brug VS Code Live Server extension til HTML projekter
- **API Projekter**: Kør `npm start` i respektive API mapper
## Testinstruktioner
@ -110,173 +110,173 @@ python api.py
```bash
cd quiz-app
npm run lint # Tjek for kode stil problemer
npm run build # Bekræft at bygningen lykkes
npm run lint # Tjek for problemer med kodestil
npm run build # Bekræft at build lykkes
```
### Bank API Test
```bash
cd 7-bank-project/api
npm run lint # Tjek for kode stil problemer
npm run lint # Tjek for problemer med kodestil
node server.js # Bekræft at serveren starter uden fejl
```
### Generel Test Tilgang
- Dette er et undervisningsarkiv uden omfattende automatiserede tests
- Manuel test fokuserer på:
- Kodeeksempler kører uden fejl
- Links i dokumentationen virker korrekt
- Projekt builds gennemføres succesfuldt
- Eksempler følger bedste praksis
### Generel test tilgang
- Dette er et uddannelsesrepository uden omfattende automatiserede tests
- Manuel test fokuserer på:
- Kodeeksempler kører uden fejl
- Links i dokumentationen fungerer korrekt
- Projekt builds gennemføres succesfuldt
- Eksempler følger bedste praksis
### Før-indsendelses Kontroller
### Forhåndskontrol før indsendelse
- Kør `npm run lint` i mapper med package.json
- Bekræft at markdown-links er valide
- Test kodeeksempler i browser eller Node.js
- Tjek at oversættelser bevarer korrekt struktur
- Kør `npm run lint` i mapper med package.json
- Verificer at markdown-links er gyldige
- Test kodeeksempler i browser eller Node.js
- Kontroller at oversættelser bevarer korrekt struktur
## Kode Stil Retningslinjer
## Kodekonventioner
### JavaScript
- Brug moderne ES6+ syntaks
- Følg standard ESLint konfigurationer leveret i projekterne
- Brug meningsfulde variabel- og funktionsnavne for undervisningsklarhed
- Tilføj kommentarer der forklarer koncepter for de lærende
- Formater med Prettier hvor konfigureret
- Brug moderne ES6+ syntaks
- Følg standard ESLint konfigurationer i projekterne
- Brug meningsfulde variabel- og funktionsnavne for pædagogisk klarhed
- Tilføj kommentarer der forklarer koncepter for elever
- Formater med Prettier hvor konfigureret
### HTML/CSS
- Semantiske HTML5 elementer
- Responsivt design principper
- Klare klassifikationsnavne
- Kommentarer der forklarer CSS teknikker for de lærende
- Semantiske HTML5-elementer
- Responsive designprincipper
- Klare class-navngivningskonventioner
- Kommentarer der forklarer CSS-teknikker for elever
### Python
- PEP 8 stil retningslinjer
- Klare, undervisningsvenlige kodeeksempler
- Type hints hvor hjælpsomt for læring
- PEP 8 stilretningslinjer
- Klare, uddannelsesmæssige kodeeksempler
- Type hints hvor hjælpsomt for læring
### Markdown Dokumentation
- Klar overskriftshierarki
- Kodeblokke med sprog angivelse
- Links til yderligere ressourcer
- Skærmbilleder og billeder i `images/` mapper
- Alternativ tekst til billeder for tilgængelighed
- Klar overskriftsstruktur
- Kodeblokke med sprogspecifikation
- Links til yderligere ressourcer
- Screenshots og billeder i `images/` mapper
- Alt-tekst på billeder til tilgængelighed
### Filorganisation
### Filerorganisering
- Lektioner nummereret sekventielt (1-getting-started-lessons, 2-js-basics, osv.)
- Hvert projekt har `solution/` og ofte `start/` eller `your-work/` mapper
- Billeder opbevaret i lektion-specifikke `images/` mapper
- Oversættelser i `translations/{language-code}/` struktur
- Lektioner nummereret sekventielt (1-getting-started-lessons, 2-js-basics osv.)
- Hvert projekt har `solution/` og ofte `start/` eller `your-work/` mapper
- Billeder gemt i lektionsspecifikke `images/` mapper
- Oversættelser i `translations/{language-code}/` struktur
## Build og Udrulning
## Build og Deployment
### Quiz App Udrulning (Azure Static Web Apps)
### Quiz App Deployment (Azure Static Web Apps)
quiz-app er konfigureret til Azure Static Web Apps udrulning:
quiz-app er konfigureret til Azure Static Web Apps deployment:
```bash
cd quiz-app
npm run build # Opretter dist/ mappe
# Udruller via GitHub Actions workflow ved push til main
```
Azure Static Web Apps konfiguration:
- **App placering**: `/quiz-app`
- **Output placering**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Dokumentation PDF Generering
Azure Static Web Apps konfiguration:
- **App-placering**: `/quiz-app`
- **Output placering**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Dokumentations PDF Generering
```bash
npm install # Installer docsify-to-pdf
npm run convert # Generer PDF fra docs
```
### Docsify Dokumentation
```bash
npm install -g docsify-cli # Installer Docsify globalt
docsify serve # Server på localhost:3000
```
### Projektspecifikke Builds
Hver projektmappe kan have sin egen buildproces:
- Vue projekter: `npm run build` skaber produktionsbundles
- Statiske projekter: Intet build trin, servér filer direkte
Hver projektmappe kan have sin egen build-proces:
- Vue projekter: `npm run build` skaber produktionsbundles
- Statisk projekter: Ingen build-step, filer serveres direkte
## Pull Request Retningslinjer
### Titel Format
Brug klare, beskrivende titler, der angiver ændringsområdet:
- `[Quiz-app] Tilføj ny quiz til lektion X`
- `[Lesson-3] Ret stavefejl i terrarium projekt`
- `[Translation] Tilføj spansk oversættelse for lektion 5`
- `[Docs] Opdater installationsinstruktioner`
Brug klare, beskrivende titler, der angiver ændringsområde:
- `[Quiz-app] Tilføj ny quiz til lektion X`
- `[Lesson-3] Ret stavefejl i terrarium projektet`
- `[Translation] Tilføj spansk oversættelse til lektion 5`
- `[Docs] Opdater opsætningsinstruktioner`
### Krævede Kontroller
### Krævede kontroller
Før indsendelse af en PR:
Før indsendelse af PR:
1. **Kodekvalitet**:
- Kør `npm run lint` i berørte projektmapper
- Ret alle linting-fejl og advarsler
1. **Kodekvalitet**:
- Kør `npm run lint` i berørte projektmapper
- Ret alle lint fejl og advarsler
2. **Build Verifikation**:
- Kør `npm run build` hvis relevant
- Sikr ingen build-fejl
2. **Build verifikation**:
- Kør `npm run build` hvis relevant
- Sørg for ingen build fejl
3. **Linkvalidering**:
- Test alle markdown links
- Bekræft at billedreferencer virker
3. **Link validering**:
- Test alle markdown links
- Verificer billedreferencer fungerer
4. **Indholds Gennemgang**:
- Korrekturlæs for stave- og grammatikefejl
- Sikr at kodeeksempler er korrekte og undervisende
- Bekræft at oversættelser bevarer original mening
4. **Indholds gennemgang**:
- Korrekturlæs for stavning og grammatik
- Sørg for kodeeksempler er korrekte og pædagogiske
- Bekræft at oversættelser bevarer oprindelig mening
### Bidragskrav
- Accepter Microsoft CLA (automatisk kontrol ved første PR)
- Følg [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Se [CONTRIBUTING.md](./CONTRIBUTING.md) for detaljerede retningslinjer
- Henvis til issues i PR-beskrivelse hvor relevant
- Accepter Microsoft CLA (automatisk kontrol ved første PR)
- Følg [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Se [CONTRIBUTING.md](./CONTRIBUTING.md) for detaljerede retningslinjer
- Referér issue-numre i PR beskrivelsen hvis relevant
### Review Proces
### Review proces
- PR'er gennemgås af vedligeholdere og community
- Undervisningsklarhed prioriteres
- Kodeeksempler skal følge bedste praksis
- Oversættelser gennemgås for nøjagtighed og kulturel hensigtsmæssighed
- PRer gennemgås af vedligeholdere og community
- Pædagogisk klarhed prioriteres
- Kodeeksempler skal følge gældende bedste praksis
- Oversættelser gennemgås for nøjagtighed og kulturel korrekthed
## Oversættelsessystem
### Automatisk Oversættelse
- Bruger GitHub Actions med co-op-translator workflow
- Oversætter til 50+ sprog automatisk
- Kildefiler i hovedmapper
- Oversatte filer i `translations/{language-code}/` mapper
- Bruger GitHub Actions med co-op-translator workflow
- Oversætter til 50+ sprog automatisk
- Kilde filer i hovedmapper
- Oversatte filer i `translations/{language-code}/` mapper
### Tilføjelse af Manuel Oversættelsesforbedring
### Tilføjelse af manuelle oversættelsesforbedringer
1. Find fil i `translations/{language-code}/`
2. Foretag forbedringer mens struktur bevares
3. Sikr at kodeeksempler forbliver funktionelle
4. Test eventuelt lokaliseret quiz indhold
1. Find fil i `translations/{language-code}/`
2. Foretag forbedringer under bevarelse af struktur
3. Sørg for kodeeksempler forbliver funktionelle
4. Test eventuelt lokaliseret quizindhold
### Oversættelsesmetadata
Oversatte filer indeholder metadata header:
Oversatte filer indeholder metadataheader:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -288,121 +288,121 @@ CO_OP_TRANSLATOR_METADATA:
}
-->
```
## Fejlfinding og Problemløsning
### Almindelige Problemer
## Debugging og Fejlfinding
### Almindelige problemer
**Quiz app starter ikke**:
- Tjek Node.js version (v14+ anbefalet)
- Slet `node_modules` og `package-lock.json`, kør `npm install` igen
- Tjek for portkonflikter (standard: Vite bruger port 5173)
**Quiz app starter ikke**:
- Tjek Node.js version (v14+ anbefales)
- Slet `node_modules` og `package-lock.json`, kør `npm install` igen
- Tjek for port konflikter (standard: Vite bruger port 5173)
**API server starter ikke**:
- Bekræft Node.js version er minimum (node >=10)
- Tjek om port allerede er i brug
- Sørg for alle dependencies er installeret med `npm install`
**API server starter ikke**:
- Bekræft Node.js version minimum (node >=10)
- Tjek om port allerede er i brug
- Sørg for alle afhængigheder er installeret med `npm install`
**Browser extension loader ikke**:
- Bekræft manifest.json er korrekt formateret
- Tjek browserkonsol for fejl
- Følg browser-specifikke installationsinstruktioner for extensions
**Browser extension loader ikke**:
- Bekræft at manifest.json er korrekt formatteret
- Tjek browserens konsol for fejl
- Følg browserspecifikke installationsinstruktioner for extension
**Python chat projekt problemer**:
- Sørg for OpenAI pakken er installeret: `pip install openai`
- Bekræft miljøvariablen GITHUB_TOKEN er sat
- Tjek GitHub Models adgangstilladelser
**Python chat projekt problemer**:
- Sørg for OpenAI-pakken er installeret: `pip install openai`
- Bekræft at GITHUB_TOKEN miljøvariablen er sat
- Tjek adgangstilladelser til GitHub Models
**Docsify serverer ikke docs**:
- Installer docsify-cli globalt: `npm install -g docsify-cli`
- Kør fra arkivets rodmappe
- Tjek at `docs/_sidebar.md` findes
**Docsify serverer ikke dokumentationen**:
- Installer docsify-cli globalt: `npm install -g docsify-cli`
- Kør fra repositorys rodmappe
- Bekræft at `docs/_sidebar.md` findes
### Udviklingsmiljø Tips
### Udviklingsmiljø tips
- Brug VS Code med Live Server extension til HTML projekter
- Installer ESLint og Prettier extensions for konsistent formatering
- Brug browser DevTools til JavaScript debugging
- For Vue projekter, installer Vue DevTools browser extension
- Brug VS Code med Live Server extension til HTML projekter
- Installer ESLint og Prettier extensions til konsistent formatering
- Brug browser DevTools til JavaScript debugging
- Til Vue projekter, installer Vue DevTools browser extension
### Ydelsesmæssige Overvejelser
### Ydelsesovervejelser
- Stort antal oversatte filer (50+ sprog) betyder store fulde kloner
- Brug shallow clone hvis du kun arbejder med indhold: `git clone --depth 1`
- Ekskluder oversættelser fra søgninger ved arbejde på engelsk indhold
- Build processer kan være langsomme ved første kørsel (npm install, Vite build)
- Stort antal oversatte filer (50+ sprog) betyder store fulde kloner
- Brug shallow clone hvis du kun arbejder med indhold: `git clone --depth 1`
- Ekskluder oversættelser fra søgninger når du arbejder med engelsk indhold
- Build-processer kan være langsomme første gang (npm install, Vite build)
## Sikkerhedsovervejelser
### Miljøvariabler
- API nøgler må aldrig committes til arkivet
- Brug `.env` filer (allerede i `.gitignore`)
- Dokumenter nødvendige miljøvariabler i projekt READMEs
- API-nøgler må aldrig committes til repository
- Brug `.env` filer (allerede i `.gitignore`)
- Dokumenter nødvendige miljøvariabler i projekternes READMEs
### Python Projekter
- Brug virtuelle miljøer: `python -m venv venv`
- Hold dependencies opdaterede
- GitHub tokens bør have minimale nødvendige tilladelser
- Brug virtuelle miljøer: `python -m venv venv`
- Hold afhængigheder opdaterede
- GitHub tokens skal have minimale nødvendige tilladelser
### GitHub Models Adgang
- Personal Access Tokens (PAT) kræves for GitHub Models
- Tokens bør gemmes som miljøvariabler
- Committ aldrig tokens eller credentials
- Personlige Access Tokens (PAT) kræves til GitHub Models
- Tokens skal gemmes som miljøvariabler
- Committ aldrig tokens eller adgangsoplysninger
## Yderligere Noter
## Yderligere noter
### Målgruppe
- Absolutte begyndere til webudvikling
- Studerende og selvstuderende
- Lærere der bruger pensum i klasseværelser
- Indhold er designet til tilgængelighed og gradvis færdighedsopbygning
- Fuldstændige begyndere til webudvikling
- Studerende og selvstuderende
- Lærere, der bruger læseplanen i klasselokaler
- Indholdet er designet til tilgængelighed og gradvis færdighedsopbygning
### Undervisningsfilosofi
### Uddannelsesfilosofi
- Projektbaseret læringstilgang
- Hyppige videnschecks (quizzer)
- Praktiske kodningsøvelser
- Virkelige applikationseksempler
- Fokus på grundlæggende før frameworks
- Projektbaseret læringstilgang
- Hyppige videnskontrol (quizzer)
- Praktiske kodningsøvelser
- Eksempler med virkelige anvendelser
- Fokus på grundlæggende koncepter før frameworks
### Arkiv Vedligeholdelse
### Repository vedligeholdelse
- Aktiv community af lærende og bidragydere
- Regelmæssige opdateringer af dependencies og indhold
- Issues og diskussioner overvåges af vedligeholdere
- Oversættelsesopdateringer automatiseres via GitHub Actions
- Aktivt community af elever og bidragydere
- Regelmæssige opdateringer af afhængigheder og indhold
- Issues og diskussioner overvåges af vedligeholdere
- Oversættelsesopdateringer automatiseret via GitHub Actions
### Relaterede Ressourcer
### Relaterede ressourcer
- [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) anbefalet for lærende
- Yderligere kurser: Generativ AI, Data Science, ML, IoT pensum tilgængelig
- [Microsoft Learn moduler](https://docs.microsoft.com/learn/)
- [Student Hub ressourcer](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) anbefales til elever
- Yderligere kurser: Generativ AI, Data Science, ML, IoT læseplaner tilgængelige
### Arbejde med Specifikke Projekter
### Arbejde med specifikke projekter
For detaljerede instruktioner om individuelle projekter, se README-filer i:
- `quiz-app/README.md` - Vue 3 quiz applikation
- `7-bank-project/README.md` - Bankapplikation med autentificering
- `5-browser-extension/README.md` - Browser extension udvikling
- `6-space-game/README.md` - Canvas-baseret spiludvikling
- `9-chat-project/README.md` - AI chat assistant projekt
For detaljerede instruktioner om individuelle projekter, se README-filer i:
- `quiz-app/README.md` - Vue 3 quiz applikation
- `7-bank-project/README.md` - Banking applikation med autentifikation
- `5-browser-extension/README.md` - Udvikling af browser extension
- `6-space-game/README.md` - Canvas-baseret spiludvikling
- `9-chat-project/README.md` - AI chat assistent projekt
### Monorepo Struktur
### Monorepo struktur
Selvom det ikke er et traditionelt monorepo, indeholder dette arkiv flere uafhængige projekter:
- Hver lektion er selvstændig
- Projekterne deler ikke dependencies
- Arbejd på individuelle projekter uden at påvirke andre
- Klon hele repo for fuld pensumerfaring
Selvom det ikke er et traditionelt monorepo, indeholder dette repository flere uafhængige projekter:
- Hver lektion er selvstændig
- Projekter deler ikke afhængigheder
- Arbejd på individuelle projekter uden at påvirke andre
- Klon hele repoet for den fulde læseplansoplevelse
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfraskrivelse**:
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiske oversættelser kan indeholde fejl eller unøjagtigheder. Det oprindelige dokument på dets modersmål bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, som opstår som følge af brugen af denne oversættelse.
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det oprindelige dokument på dets oprindelige sprog skal betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os ikke ansvar for misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-02-06T11:33:55+00:00",
"translation_date": "2026-02-06T13:00:22+00:00",
"source_file": "AGENTS.md",
"language_code": "sv"
},

@ -2,29 +2,29 @@
## Projektöversikt
Detta är ett utbildningskursförråd för att lära ut grunderna i webbutveckling till nybörjare. Kursplanen är en omfattande 12-veckorskurs utvecklad av Microsoft Cloud Advocates, med 24 praktiskt inriktade lektioner som täcker JavaScript, CSS och HTML.
Detta är ett utbildningsrepository för att lära ut grunderna i webbutveckling till nybörjare. Kursplanen är en omfattande 12-veckors kurs utvecklad av Microsoft Cloud Advocates, med 24 praktiska lektioner som täcker JavaScript, CSS och HTML.
### Huvudkomponenter
### Nyckelkomponenter
- **Utbildningsinnehåll**: 24 strukturerade lektioner organiserade i projektbaserade moduler
- **Praktiska Projekt**: Terrarium, Skrivspel, Webbläsartillägg, Rymdspel, Bankapp, Kodredigerare och AI-chattassistent
- **Interaktiva Quiz**: 48 quiz med 3 frågor vardera (före/efter-lektionsbedömningar)
- **Fler språkstöd**: Automatiska översättningar till 50+ språk via GitHub Actions
- **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (för AI-projekt)
- **Utbildningsinnehåll**: 24 strukturerade lektioner organiserade i projektbaserade moduler
- **Praktiska projekt**: Terrarium, Typ-spel, Webbläsartillägg, Rymdspel, Bank-app, Kodredigerare och AI-chattassistent
- **Interaktiva quiz**: 48 quiz med 3 frågor vardera (före/efter lektion)
- **Fler språkstöd**: Automatiska översättningar till 50+ språk via GitHub Actions
- **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (för AI-projekt)
### Arkitektur
- Utbildningsförråd med lektionsbaserad struktur
- Varje lektionsmapp innehåller README, kodexempel och lösningar
- Fristående projekt i separata kataloger (quiz-app, olika lektionsprojekt)
- Översättningssystem med GitHub Actions (co-op-translator)
- Dokumentation serveras via Docsify och finns tillgänglig som PDF
- Utbildningsrepository med lektionbaserad struktur
- Varje lektionsmapp innehåller README, kodexempel och lösningar
- Självständiga projekt i separata kataloger (quiz-app, olika lektionsprojekt)
- Översättningssystem med GitHub Actions (co-op-translator)
- Dokumentation serveras via Docsify och finns tillgänglig som PDF
## Uppstartskommandon
## Uppställningskommandon
Detta förråd är främst för konsumtion av utbildningsinnehåll. För arbete med specifika projekt:
Detta repository är främst för konsumtion av utbildningsinnehåll. För arbete med specifika projekt:
### Huvudförråd Uppstart
### Huvudrepository Setup
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
@ -72,37 +72,37 @@ npm install
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Sätt GITHUB_TOKEN-miljövariabeln
# Ange miljövariabeln GITHUB_TOKEN
python api.py
```
## Utvecklingsarbetsflöde
### För innehållsbidragsgivare
### För innehållsbidragare
1. **Fork:a förrådet** till ditt GitHub-konto
2. **Klon:a din fork** lokalt
3. **Skapa en ny branch** för dina ändringar
4. Gör ändringar i lektionsinnehåll eller kodexempel
5. Testa eventuella kodändringar i relevanta projektmappar
6. Skicka pull requests enligt bidragsriktlinjerna
1. **Fork:a repositoryt** till ditt GitHub-konto
2. **Klona din fork** lokalt
3. **Skapa en ny gren** för dina ändringar
4. Gör ändringar i lektionsinnehåll eller kodexempel
5. Testa eventuella kodändringar i relevanta projektmappar
6. Skicka pull requests enligt bidragsriktlinjer
### För lärande
### För elever
1. Forka eller klona förrådet
2. Navigera sekventiellt till lektionsmapparna
3. Läs README-filer för varje lektion
4. Gör för-lektionsquiz på https://ff-quizzes.netlify.app/web/
5. Arbeta igenom kodexempel i lektionsmapparna
6. Slutför uppgifter och utmaningar
7. Gör efter-lektionsquizzen
1. Fork:a eller klona repositoryt
2. Navigera igenom lektionsmappar i ordning
3. Läs README-filer för varje lektion
4. Gör för-lektionsquiz på https://ff-quizzes.netlify.app/web/
5. Arbeta igenom kodexemplen i lektionsmapparna
6. Slutför uppgifter och utmaningar
7. Gör efter-lektionsquiz
### Live-utveckling
### Liveutveckling
- **Dokumentation**: Kör `docsify serve` i root (port 3000)
- **Quiz App**: Kör `npm run dev` i quiz-app-mappen
- **Projekt**: Använd VS Code Live Server-extension för HTML-projekt
- **API-projekt**: Kör `npm start` i respektive API-mapp
- **Dokumentation**: Kör `docsify serve` i rotmappen (port 3000)
- **Quiz App**: Kör `npm run dev` i quiz-app-mappen
- **Projekt**: Använd VS Code Live Server-tillägg för HTML-projekt
- **API-projekt**: Kör `npm start` i respektive API-mapp
## Testinstruktioner
@ -122,76 +122,76 @@ npm run lint # Kontrollera kodstilproblem
node server.js # Verifiera att servern startar utan fel
```
### Allmän testmetod
### Generell teststrategi
- Detta är ett utbildningsförråd utan fullständiga automatiserade tester
- Manuell testning fokuserar på:
- Kodexempel körs utan fel
- Länkar i dokumentationen fungerar korrekt
- Projekt byggs utan problem
- Exempel följer bästa praxis
- Detta är ett utbildningsrepository utan omfattande automatiserade tester
- Manuell testning fokuserar på:
- Kodexempel körs utan fel
- Länkar i dokumentationen fungerar korrekt
- Projektbyggen slutförs utan problem
- Exempel följer bästa praxis
### Kontroller före inskickning
### Kontroll före inskickning
- Kör `npm run lint` i kataloger med package.json
- Verifiera att markdown-länkar är giltiga
- Testa kodexempel i webbläsare eller Node.js
- Kontrollera att översättningar bibehåller korrekt struktur
- Kör `npm run lint` i kataloger med package.json
- Verifiera att markdown-länkar är giltiga
- Testa kodexempel i webbläsare eller Node.js
- Kontrollera att översättningar bibehåller korrekt struktur
## Kodstilriktlinjer
### JavaScript
- Använd modern ES6+ syntax
- Följ angivna ESLint-konfigurationer i projekten
- Använd meningsfulla variabel- och funktionsnamn för pedagogisk tydlighet
- Lägg till kommentarer som förklarar koncept för elever
- Formatera med Prettier där det är konfigurerat
- Använd modern ES6+ syntax
- Följ standard ESLint-konfigurationer i projekten
- Använd meningsfulla variabel- och funktionsnamn för utbildningsklarhet
- Lägg till kommentarer som förklarar koncept för elever
- Formatera med Prettier där det är konfigurerat
### HTML/CSS
- Semantiska HTML5-element
- Responsiva designprinciper
- Tydliga klassnamnskonventioner
- Kommentarer som förklarar CSS-tekniker för elever
- Semantiska HTML5-element
- Responsiv designprinciper
- Tydliga klassnamnskonventioner
- Kommentarer som förklarar CSS-tekniker för elever
### Python
- PEP 8-stilriktlinjer
- Klara, pedagogiska kodexempel
- Typangivelser där det är hjälpsamt för lärande
- PEP 8-stilriktlinjer
- Klara, utbildande kodexempel
- Typanvisningar där det är hjälpsamt för inlärning
### Markdown Dokumentation
### Markdown-dokumentation
- Klar rubrikhierarki
- Kodblock med språkspecifikation
- Länkar till ytterligare resurser
- Skärmdumpar och bilder i `images/`-mappar
- Alt-text för bilder för tillgänglighet
- Tydlig rubrikhierarki
- Kodblock med språkdefinition
- Länkar till ytterligare resurser
- Skärmdumpar och bilder i `images/`-kataloger
- Alt-text för bilder för tillgänglighet
### Filorganisation
- Lektioner numrerade sekventiellt (1-getting-started-lessons, 2-js-basics, osv)
- Varje projekt har `solution/` och ofta `start/` eller `your-work/`-mappar
- Bilder lagras i lektionsspecifika `images/`-mappar
- Översättningar i `translations/{language-code}/`-struktur
- Lektioner numrerade i följd (1-getting-started-lessons, 2-js-basics, osv.)
- Varje projekt har `solution/` och ofta `start/` eller `your-work/` kataloger
- Bilder lagras i lektonspecifika `images/`-mappar
- Översättningar i `translations/{language-code}/` struktur
## Bygg och distribution
## Bygg och distributionsinstruktioner
### Quiz App-distribution (Azure Static Web Apps)
quiz-app är konfigurerad för distribution via Azure Static Web Apps:
Quiz-app är konfigurerad för distribution via Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Skapar mappen dist/
# Distribuerar via GitHub Actions workflow vid push till main
# Distribuerar via GitHub Actions-workflow vid push till main
```
Azure Static Web Apps-konfiguration:
- **App-plats**: `/quiz-app`
- **Utdata-plats**: `dist`
- **Arbetsflöde**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
Azure Static Web Apps-konfiguration:
- **Appplats**: `/quiz-app`
- **Utmatningsplats**: `dist`
- **Arbetsflöde**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Generering av dokumentations-PDF
@ -204,79 +204,79 @@ npm run convert # Generera PDF från docs
```bash
npm install -g docsify-cli # Installera Docsify globalt
docsify serve # Servera på localhost:3000
docsify serve # Kör på localhost:3000
```
### Projekt-specifika byggprocesser
### Projekt-specifika byggen
Varje projektkatalog kan ha sin egen byggprocess:
- Vue-projekt: `npm run build` skapar produktionspaket
- Statiska projekt: Ingen byggsteg, servera filer direkt
Varje projektmapp kan ha sin egen byggprocess:
- Vue-projekt: `npm run build` skapar produktionspaket
- Statisk projekt: Inget byggsteg, serva filer direkt
## Riktlinjer för Pull Requests
## Regler för Pull Requests
### Titelformat
### Titelmall
Använd klara, beskrivande titlar som anger ändringsområde:
- `[Quiz-app] Lägg till nytt quiz för lektion X`
- `[Lesson-3] Åtgärda skrivfel i terrarium-projektet`
- `[Translation] Lägg till spansk översättning för lektion 5`
- `[Docs] Uppdatera uppstartsinstruktioner`
Använd tydliga, beskrivande titlar som anger ändringsområde:
- `[Quiz-app] Lägg till nytt quiz för lektion X`
- `[Lektion-3] Rätta stavfel i terrariumprojekt`
- `[Översättning] Lägg till spansk översättning för lektion 5`
- `[Docs] Uppdatera installationsinstruktioner`
### Obligatoriska kontroller
Innan inskickande av PR:
Innan du skickar en PR:
1. **Kodkvalitet**:
- Kör `npm run lint` i berörda projektmappar
- Åtgärda alla lint-fel och varningar
1. **Kodkvalitet**:
- Kör `npm run lint` i berörda projektmappar
- Åtgärda alla lintfel och varningar
2. **Byggverifiering**:
- Kör `npm run build` om tillämpligt
- Säkerställ att inga byggfel förekommer
2. **Byggverifiering**:
- Kör `npm run build` om tillämpligt
- Säkerställ att inga byggfel uppstår
3. **Länkvalidering**:
- Testa alla markdown-länkar
- Verifiera bildreferenser fungerar
3. **Länkverifiering**:
- Testa alla markdown-länkar
- Kontrollera att bildreferenser fungerar
4. **Innehållsgranskning**:
- Korrekturläs stavning och grammatik
- Säkerställ att kodexempel är korrekta och pedagogiska
- Kontrollera att översättningar bibehåller ursprunglig betydelse
4. **Innehållsgranskning**:
- Korrekturläs stavning och grammatik
- Säkerställ att kodexempel är korrekta och pedagogiska
- Verifiera att översättningar bibehåller ursprunglig mening
### Bidragskrav
- Godkänn Microsoft CLA (automatisk kontroll vid första PR)
- Följ [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Se [CONTRIBUTING.md](./CONTRIBUTING.md) för detaljerade riktlinjer
- Referera ärendenummer i PR-beskrivning om tillämpligt
- Godkänn Microsoft CLA (automatisk kontroll vid första PR)
- Följ [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Se [CONTRIBUTING.md](./CONTRIBUTING.md) för detaljerade riktlinjer
- Referera eventuella issues i PR-beskrivningen
### Granskningsprocess
- PR:er granskas av underhållare och community
- Pedagogisk tydlighet prioriteras
- Kodexempel ska följa aktuell bästa praxis
- Översättningar granskas för noggrannhet och kulturell lämplighet
- PR:er granskas av underhållare och community
- Utbildningsklarhet prioriteras
- Kodexempel ska följa nuvarande bästa praxis
- Översättningar granskas för noggrannhet och kulturell lämplighet
## Översättningssystem
### Automatisk översättning
- Använder GitHub Actions med co-op-translator-arbetsflöde
- Översätter automatiskt till 50+ språk
- Källfiler i huvudkataloger
- Översatta filer i `translations/{language-code}/`-mappar
- Använder GitHub Actions med co-op-translator-arbetsflöde
- Översätter automatiskt till 50+ språk
- Källfiler i huvudkataloger
- Översatta filer i `translations/{language-code}/` kataloger
### Lägg till manuella förbättringar
### Lägga till manuella förbättringar i översättningar
1. Lokalisera fil i `translations/{language-code}/`
2. Gör förbättringar samtidigt som strukturen bevaras
3. Säkerställ att kodexempel förblir funktionella
4. Testa eventuell lokaliserad quiz-innehåll
1. Leta upp fil i `translations/{language-code}/`
2. Gör förbättringar utan att ändra struktur
3. Säkerställ att kodexempel förblir funktionella
4. Testa eventuellt lokaliserat quiz-innehåll
### Översättningsmetadata
Översatta filer innehåller metadata-huvud:
Översatta filer inkluderar metadata-header:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -293,116 +293,116 @@ CO_OP_TRANSLATOR_METADATA:
### Vanliga problem
**Quiz-appen startar inte**:
- Kontrollera Node.js-version (v14+ rekommenderas)
- Radera `node_modules` och `package-lock.json`, kör `npm install` på nytt
- Kontrollera portar (standard: Vite använder port 5173)
**Quiz-app startar inte**:
- Kontrollera Node.js-version (v14+ rekommenderas)
- Radera `node_modules` och `package-lock.json`, kör `npm install` igen
- Kolla portkonflikter (standard: Vite använder port 5173)
**API-server startar inte**:
- Verifiera att Node.js-version är tillräcklig (node >=10)
- Kontrollera om port redan används
- Säkerställ att alla beroenden är installerade med `npm install`
**API-server startar inte**:
- Verifiera att Node.js-versionen uppfyller minimikrav (node >=10)
- Kontrollera om port redan används
- Säkerställ att alla beroenden är installerade med `npm install`
**Webbläsartillägg laddas inte**:
- Kontrollera att manifest.json är korrekt formaterad
- Granska webbläsarkonsolen för fel
- Följ webbläsarspecifika installationsinstruktioner
**Webbläsartillägg laddas inte**:
- Kontrollera att manifest.json är korrekt formaterad
- Kolla webbläsarkonsolen efter fel
- Följ webbläsarspecifika instruktioner för tilläggsinstallation
**Problem med Python-chatprojekt**:
- Kontrollera att OpenAI-paket är installerat: `pip install openai`
- Verifiera att GITHUB_TOKEN-miljövariabel är satt
- Kontrollera GitHub Models-accessbehörigheter
**Problem med Python-chatprojektet**:
- Säkerställ att OpenAI-paketet är installerat: `pip install openai`
- Kontrollera att GITHUB_TOKEN-miljövariabeln är satt
- Kontrollera GitHub Models behörigheter
**Docsify serverar inte dokumentation**:
- Installera docsify-cli globalt: `npm install -g docsify-cli`
- Kör från förrådets rotkatalog
- Kontrollera att `docs/_sidebar.md` finns
**Docsify serverar inte docs**:
- Installera docsify-cli globalt: `npm install -g docsify-cli`
- Kör från repositoryts rotmapp
- Kontrollera att `docs/_sidebar.md` finns
### Tips för utvecklingsmiljö
### Tips för utvecklingsmiljön
- Använd VS Code med Live Server-extension för HTML-projekt
- Installera ESLint- och Prettier-extensions för konsekvent formatering
- Använd webbläsarens DevTools för att felsöka JavaScript
- För Vue-projekt, installera Vue DevTools webbläsartillägg
- Använd VS Code med Live Server-tillägg för HTML-projekt
- Installera ESLint och Prettier-tillägg för konsekvent formattering
- Använd webbläsarens utvecklarverktyg för att felsöka JavaScript
- För Vue-projekt, installera Vue DevTools webbläsartillägg
### Prestandaöverväganden
- Stort antal översatta filer (50+ språk) gör fulla kloner stora
- Använd shallow clone om du bara jobbar med innehåll: `git clone --depth 1`
- Exkludera översättningar från sökningar vid arbete med engelskt innehåll
- Byggprocesserna kan vara långsamma vid första körningen (npm install, Vite build)
- Stort antal översättningsfiler (50+ språk) gör fullständiga kloner stora
- Använd shallow clone om du bara arbetar med innehåll: `git clone --depth 1`
- Exkludera översättningar från sökningar när du jobbar med engelska innehållet
- Byggprocesser kan vara långsamma vid första körning (npm install, Vite build)
## Säkerhetsöverväganden
### Miljövariabler
- API-nycklar ska aldrig committas till rrådet
- Använd `.env`-filer (redan i `.gitignore`)
- Dokumentera nödvändiga miljövariabler i projekt-README-filer
- API-nycklar ska aldrig committas till repository
- Använd `.env`-filer (redan i `.gitignore`)
- Dokumentera nödvändiga miljövariabler i projektens README-filer
### Python-projekt
- Använd virtuella miljöer: `python -m venv venv`
- Håll beroenden uppdaterade
- GitHub-token bör ha minimala behörigheter
- Använd virtuella miljöer: `python -m venv venv`
- Håll beroenden uppdaterade
- GitHub-tokens ska ha minsta nödvändiga behörigheter
### GitHub Models Access
### GitHub Models-åtkomst
- Personliga Access Tokens (PAT) krävs för GitHub Models
- Tokens bör lagras som miljövariabler
- Commita aldrig tokens eller inloggningsuppgifter
- Personliga åtkomsttoken (PAT) krävs för GitHub Models
- Token bör lagras som miljövariabler
- Commita aldrig token eller autentiseringsuppgifter
## Ytterligare Noteringar
## Ytterligare anmärkningar
### Målgrupp
- Absoluta nybörjare inom webbutveckling
- Studenter och självlärande
- Lärare som använder kursplanen i klassrum
- Innehållet är utformat för tillgänglighet och gradvis färdighetsuppbyggnad
- Helt nya inom webbutveckling
- Studenter och självlärande
- Lärare som använder kursplanen i klassrum
- Innehållet är utformat för tillgänglighet och gradvis färdighetsuppbyggnad
### Pedagogisk filosofi
- Projektbaserat lärande
- Frekventa kunskapskontroller (quiz)
- Praktiska kodövningar
- Verklighetsnära exempel
- Fokus på grunderna innan ramverk
- Projektbaserat lärande
- Frekventa kunskapskontroller (quiz)
- Praktiska kodningsövningar
- Exempel med verkliga tillämpningar
- Fokuserar på grunder innan ramverk
### Förrådsunderhåll
### Underhåll av repository
- Aktiv community av elever och bidragsgivare
- Regelbundna uppdateringar av beroenden och innehåll
- Ärenden och diskussioner övervakas av underhållare
- Översättningsuppdateringar automatiserade via GitHub Actions
- Aktiv community av elever och bidragsgivare
- Regelbundna uppdateringar av beroenden och innehåll
- Issues och diskussioner övervakas av underhållare
- Översättningsuppdateringar automatiserade via GitHub Actions
### Relaterade resurser
- [Microsoft Learn-moduler](https://docs.microsoft.com/learn/)
- [Student Hub-resurser](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) rekommenderas för elever
- Ytterligare kurser: Generativ AI, Data Science, ML, IoT kursplaner tillgängliga
- [Microsoft Learn-moduler](https://docs.microsoft.com/learn/)
- [Student Hub-resurser](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) rekommenderas för elever
- Ytterligare kurser: Generativ AI, Data Science, ML, IoT kursplaner tillgängliga
### Arbeta med specifika projekt
För detaljerade instruktioner om individuella projekt, se README-filer i:
- `quiz-app/README.md` - Vue 3 quiz-applikation
- `7-bank-project/README.md` - Bankapplikation med autentisering
- `5-browser-extension/README.md` - Utveckling av webbläsartillägg
- `6-space-game/README.md` - Canvas-baserat spel
- `9-chat-project/README.md` - AI-chattassistentprojekt
För detaljerade instruktioner om enskilda projekt, se README-filer i:
- `quiz-app/README.md` - Vue 3 quizapplikation
- `7-bank-project/README.md` - Bankapplikation med autentisering
- `5-browser-extension/README.md` - Webbläsartilläggsutveckling
- `6-space-game/README.md` - Canvas-baserat spelutveckling
- `9-chat-project/README.md` - AI-chattassistentprojekt
### Monorepo-struktur
Även om detta inte är ett traditionellt monorepo innehåller förrådet flera oberoende projekt:
- Varje lektion är självständig
- Projekten delar inga beroenden
- Arbeta med individuella projekt utan att påverka andra
- Klona hela förrådet för att få hela kursplanen upplevelse
Även om det inte är ett traditionellt monorepo innehåller detta repository flera oberoende projekt:
- Varje lektion är självständig
- Projekt delar inte beroenden
- Arbeta med enskilda projekt utan att påverka andra
- Klona hela repot för full kursupplevelse
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Friskrivning**:
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, var god observera att automatiska översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess modersmål bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för några missförstånd eller feltolkningar som uppstår från användningen av denna översättning.
**Ansvarsfriskrivning**:
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, vänligen var medveten om att automatiska översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess modersmål bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår från användningen av denna översättning.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-02-06T11:32:49+00:00",
"translation_date": "2026-02-06T12:59:18+00:00",
"source_file": "AGENTS.md",
"language_code": "th"
},

@ -1,47 +1,47 @@
# AGENTS.md
## ภาพรวมของโปรเจกต์
## ภาพรวมโครงการ
นี่คือคลังหลักสูตรเพื่อการศึกษา สำหรับสอนพื้นฐานการพัฒนาเว็บให้กับผู้เริ่มต้นหลักสูตรนี้เป็นหลักสูตรครอบคลุมระยะเวลา 12 สัปดาห์ ที่พัฒนาโดย Microsoft Cloud Advocates มีบทเรียนเชิงปฏิบัติ 24 บทเรียนที่ครอบคลุม JavaScript, CSS และ HTML
นี่คือที่เก็บหลักสูตรเพื่อการศึกษา สำหรับการสอนพื้นฐานการพัฒนาเว็บสำหรับผู้เริ่มต้น หลักสูตรนี้เป็นคอร์สครบถ้วน 12 สัปดาห์ ที่พัฒนาโดย Microsoft Cloud Advocates พร้อมด้วยบทเรียนปฏิบัติ 24 บทที่ครอบคลุม JavaScript, CSS และ HTML
### องค์ประกอบสำคัญ
### ส่วนประกอบหลัก
- **เนื้อหาการศึกษา**: บทเรียน 24 บทที่จัดเป็นโมดูลตามโครงการ
- **เนื้อหาการศึกษา**: บทเรียน 24 บทที่จัดเรียงอย่างมีโครงสร้างในโมดูลที่เน้นโครงการ
- **โครงการเชิงปฏิบัติ**: Terrarium, เกมพิมพ์, ส่วนขยายเบราว์เซอร์, เกมอวกาศ, แอปธนาคาร, ตัวแก้ไขโค้ด และผู้ช่วยแชท AI
- **แบบทดสอบเชิงปฏิสัมพันธ์**: แบบทดสอบ 48 ชุด แต่ละชุดมี 3 คำถาม (ประเมินก่อน/หลังบทเรียน)
- **รองรับหลายภาษา**: แปลอัตโนมัติสำหรับกว่า 50 ภาษา ผ่าน GitHub Actions
- **เทคโนโลยี**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (สำหรับโปรเจกต์ AI)
- **แบบทดสอบเชิงโต้ตอบ**: แบบทดสอบ 48 ชุด มี 3 คำถามต่อชุด (ประเมินก่อน/หลังบทเรียน)
- **รองรับหลายภาษา**: การแปลอัตโนมัติสำหรับกว่า 50 ภาษาโดยใช้ GitHub Actions
- **เทคโนโลยี**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (สำหรับโครงการ AI)
### สถาปัตยกรรม
- คลังการศึกษาโดยมีโครงสร้างตามบทเรียน
- โฟลเดอร์แต่ละบทเรียนมี README, ตัวอย่างโค้ด และโซลูชัน
- โปรเจกต์แยกต่างหากในไดเรกทอรีที่ต่างกัน (quiz-app, โปรเจกต์บทเรียนต่างๆ)
- ระบบแปลด้วย GitHub Actions (co-op-translator)
- เอกสารให้บริการผ่าน Docsify และสามารถดาวน์โหลดเป็น PDF
- ที่เก็บเพื่อการศึกษาที่มีโครงสร้างเป็นบทเรียน
- โฟลเดอร์บทเรียนแต่ละบทประกอบด้วย 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
```
### การตั้งค่าแอปแบบทดสอบ (Vue 3 + Vite)
### การตั้งค่า Quiz App (Vue 3 + Vite)
```bash
cd quiz-app
npm install
npm run dev # เริ่มเซิร์ฟเวอร์พัฒนา
npm run dev # เริ่มเซิร์ฟเวอร์สำหรับการพัฒนา
npm run build # สร้างสำหรับการผลิต
npm run lint # รัน ESLint
```
### โปรเจกต์ API ธนาคาร (Node.js + Express)
### API โครงการธนาคาร (Node.js + Express)
```bash
cd 7-bank-project/api
@ -51,7 +51,7 @@ npm run lint # รัน ESLint
npm run format # จัดรูปแบบด้วย Prettier
```
### โปรเจกต์ส่วนขยายเบราว์เซอร์
### โครงการส่วนขยายเบราว์เซอร์
```bash
cd 5-browser-extension/solution
@ -59,15 +59,15 @@ npm install
# ปฏิบัติตามคำแนะนำการโหลดส่วนขยายเฉพาะเบราว์เซอร์
```
### โปรเจกต์เกมอวกาศ
### โครงการเกมอวกาศ
```bash
cd 6-space-game/solution
npm install
# เปิดไฟล์ index.html ในเบราว์เซอร์หรือตั้งค่า Live Server
# เปิดไฟล์ index.html ในเบราว์เซอร์หรือใช้ Live Server
```
### โปรเจกต์แชท (Backend ภาษา Python)
### โครงการแชท (Backend ด้วย Python)
```bash
cd 9-chat-project/solution/backend/python
@ -76,207 +76,207 @@ pip install openai
python api.py
```
## กระบวนการพัฒนา
## ขั้นตอนการพัฒนา
### สำหรับผู้ร่วมสร้างเนื้อหา
### สำหรับผู้ร่วมเนื้อหา
1. **Fork คลังนี้** ไปยังบัญชี GitHub ของคุณ
2. **Clone fork ของคุณ** ลงในเครื่อง
3. **สร้างสาขาใหม่** สำหรับการเปลี่ยนแปลง
4. แก้ไขเนื้อหาบทเรียนหรือโค้ดตัวอย่าง
5. ทดสอบโค้ดในโฟลเดอร์โปรเจกต์ที่เกี่ยวข้อง
6. ส่ง pull request ตามแนวทางการร่วมสร้าง
1. **Fork ที่เก็บ** ไปยังบัญชี GitHub ของคุณ
2. **Clone** fork ของคุณลงในเครื่อง
3. **สร้างสาขาใหม่** สำหรับการเปลี่ยนแปลงของคุณ
4. แก้ไขเนื้อหาบทเรียนหรือตัวอย่างโค้ด
5. ทดสอบการเปลี่ยนแปลงโค้ดในไดเรกทอรีโครงการที่เกี่ยวข้อง
6. ส่ง pull request ตามแนวทางการร่วมมือ
### สำหรับผู้เรียน
1. Fork หรือ clone คลังนี้
2. ไปที่โฟลเดอร์บทเรียนตามลำดับ
3. อ่านไฟล์ README ในแต่ละบทเรียน
1. Fork หรือ clone ที่เก็บนี้
2. ไปยังไดเรกทอรีบทเรียนตามลำดับ
3. อ่านไฟล์ README ของแต่ละบทเรียน
4. ทำแบบทดสอบก่อนบทเรียนที่ https://ff-quizzes.netlify.app/web/
5. ฝึกทำตัวอย่างโค้ดในโฟลเดอร์บทเรียน
6. ทำการบ้านและท้าทาย
5. ทำงานผ่านตัวอย่างโค้ดในโฟลเดอร์บทเรียน
6. ทำแบบฝึกหัดและความท้าทายให้เสร็จ
7. ทำแบบทดสอบหลังบทเรียน
### การพัฒนาแบบถ่ายทอดสด
### การพัฒนาแบบสด
- **เอกสาร**: รัน `docsify serve` ในโฟลเดอร์หลัก (พอร์ต 3000)
- **แอปแบบทดสอบ**: รัน `npm run dev` ในโฟลเดอร์ quiz-app
- **ปรเจกต์**: ใช้ส่วนขยาย VS Code Live Server สำหรับโปรเจกต์ HTML
- **ปรเจกต์ API**: รัน `npm start` ในโฟลเดอร์ API ที่เกี่ยวข้อง
- **Quiz App**: รัน `npm run dev` ในไดเรกทอรี quiz-app
- **ครงการ**: ใช้ส่วนขยาย VS Code Live Server สำหรับโครงการ HTML
- **ครงการ API**: รัน `npm start` ในไดเรกทอรี API ที่เกี่ยวข้อง
## คำแนะนำสำหรับการทดสอบ
## คำแนะนำการทดสอบ
### การทดสอบแอปแบบทดสอบ
### การทดสอบ Quiz App
```bash
cd quiz-app
npm run lint # ตรวจสอบปัญหาสไตล์โค้ด
npm run build # ยืนยันการสร้างโค้ดสำเร็จ
npm run lint # ตรวจสอบปัญหาสไตล์ของโค้ด
npm run build # ตรวจสอบว่าการสร้างสำเร็จหรือไม่
```
### การทดสอบ API ธนาคาร
### การทดสอบ Bank API
```bash
cd 7-bank-project/api
npm run lint # ตรวจสอบปัญหาสไตล์โค้ด
npm run lint # ตรวจสอบปัญหาเกี่ยวกับสไตล์โค้ด
node server.js # ยืนยันว่าเซิร์ฟเวอร์เริ่มต้นโดยไม่มีข้อผิดพลาด
```
### แนวทางการทดสอบทั่วไป
- นี่คือคลังการศึกษา ไม่มีการทดสอบอัตโนมัติครบถ้วน
- การทดสอบด้วยตนเองเน้นที่:
- ตัวอย่างโค้ดทำงานได้โดยไม่มีข้อผิดพลาด
- ลิงก์ในเอกสารใช้งานได้ถูกต้อง
- การสร้างโปรเจกต์สำเร็จลุล่วง
- ที่เก็บนี้เน้นการศึกษาโดยไม่มีการทดสอบอัตโนมัติครบวงจร
- การทดสอบด้วยมือเน้นที่:
- ตัวอย่างโค้ดทำงานไม่มีข้อผิดพลาด
- ลิงก์ในเอกสารทำงานถูกต้อง
- การสร้างโครงการสำเร็จเรียบร้อย
- ตัวอย่างปฏิบัติตามแนวทางที่ดีที่สุด
### การตรวจสอบก่อนส่ง
- รัน `npm run lint` ในโฟลเดอร์ที่มี package.json
- รัน `npm run lint` ในไดเรกทอรีที่มี package.json
- ตรวจสอบลิงก์ markdown ให้ถูกต้อง
- ทดสอบตัวอย่างโค้ดนเบราว์เซอร์หรือ Node.js
- ตรวจสอบให้แน่ใจว่าการแปลยังคงโครงสร้างถูกต้อง
- ทดสอบตัวอย่างโค้ดนเบราว์เซอร์หรือ Node.js
- ตรวจสอบให้แปลภาษายังคงโครงสร้างถูกต้อง
## แนวทางการเขียนโค้ด
### JavaScript
- ใช้ไวยากรณ์ ES6+ รุ่นใหม่
- ปฏิบัติตามการตั้งค่า ESLint มาตรฐานในโปรเจกต์
- เลือกชื่อตัวแปรและฟังก์ชันที่มีความหมายเพื่อความเข้าใจง่าย
- ใช้ไวยากรณ์ ES6+ ที่ทันสมัย
- ปฏิบัติตามการตั้งค่า ESLint มาตรฐานในโครงการ
- ใช้ชื่อตัวแปรและฟังก์ชันที่มีความหมายเพื่อความเข้าใจทางการศึกษา
- เพิ่มคอมเมนต์อธิบายแนวคิดสำหรับผู้เรียน
- ฟอร์แมตด้วย Prettier เมื่อมีการตั้งค่า
- ฟอร์แมตด้วย Prettier เมื่อกำหนดค่าไว้
### HTML/CSS
- ใช้องค์ประกอบ HTML5 เชิงความหมาย
- ใช้หลักการออกแบบที่ตอบสนองได้ดี
- ใช้ระบบตั้งชื่อคลาสที่ชัดเจน
- ใส่ความคิดเห็นอธิบายเทคนิค CSS สำหรับผู้เรียน
- ใช้องค์ประกอบ HTML5 ที่มีความหมาย
- หลักการออกแบบตอบสนอง (responsive)
- การตั้งชื่อคลาสที่ชัดเจน
- คอมเมนต์อธิบายเทคนิค CSS สำหรับผู้เรียน
### Python
- ตามแนวทาง PEP 8
- ตัวอย่างโค้ดชัดเจนและเน้นการศึกษา
- ใช้ type hints เมื่อช่วยในการเรียนรู้
- ปฏิบัติตามแนวทาง PEP 8
- ตัวอย่างโค้ดที่ชัดเจนและเพื่อการศึกษา
- ใส่คำบอกประเภท (type hints) เมื่อเหมาะสมสำหรับการเรียนรู้
### เอกสาร Markdown
- การจัดลำดับหัวข้อชัดเจน
- บล็อกโค้ดระบุภาษา
- ใส่ลิงก์ไปยังแหล่งข้อมูลเพิ่มเติม
- รูปภาพและสกรีนช็อตในโฟลเดอร์ `images/`
- ใส่ข้อความแสดงแทนภาพ (alt text) เพื่อการเข้าถึง
- โครงสร้างหัวข้อชัดเจน
- บล็อกโค้ดมีการระบุภาษา
- ลิงก์ไปยังแหล่งข้อมูลเพิ่มเติม
- รูปภาพและภาพหน้าจอในโฟลเดอร์ `images/`
- ข้อความ alt สำหรับภาพเพื่อการเข้าถึง
### การจัดการไฟล์
### การจัดระเบียบไฟล์
- บทเรียนมีหมายเลขเรียงลำดับ (1-getting-started-lessons, 2-js-basics, เป็นต้น)
- โปรเจกต์แต่ละอันมีโฟลเดอร์ `solution/` และมักจะมี `start/` หรือ `your-work/`
- รูปภาพถูกเก็บในโฟลเดอร์ `images/` เฉพาะบทเรียน
- ไฟล์แปลอยู่ในโครงสร้าง `translations/{language-code}/`
- บทเรียนมีการนับหมายเลขเรียงลำดับ (1-getting-started-lessons, 2-js-basics, ฯลฯ)
- โครงการแต่ละโครงการมีไดเรกทอรี `solution/` และมักจะมี `start/` หรือ `your-work/`
- ภาพจัดเก็บในโฟลเดอร์ `images/` เฉพาะสำหรับแต่ละบทเรียน
- แฟ้มแปลภาษาจัดเก็บในโครงสร้าง `translations/{language-code}/`
## การสร้างและนำไปใช้งาน
## การสร้างและการปล่อย
### การนำแอปแบบทดสอบขึ้นใช้งาน (Azure Static Web Apps)
### การปล่อย Quiz App (Azure Static Web Apps)
แอปแบบทดสอบนี้ตั้งค่าการใช้งานบน Azure Static Web Apps ดังนี้:
แอป quiz-app ถูกตั้งค่าสำหรับการปล่อยบน Azure Static Web Apps:
```bash
cd quiz-app
npm run build # สร้างโฟลเดอร์ dist/
# ดำเนินการใช้ผ่านเวิร์กโฟลว์ GitHub Actions เมื่อทำการ push ไปที่ main
# ปล่อยใช้งานผ่าน workflow ของ GitHub Actions เมื่อมีการ push ไปยัง main
```
การตั้งค่า Azure Static Web Apps:
การกำหนดค่า Azure Static Web Apps:
- **ตำแหน่งแอป**: `/quiz-app`
- **ตำแหน่งเอา์พุต**: `dist`
- **ตำแหน่งเอา์พุต**: `dist`
- **เวิร์กโฟลว์**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### การสร้างเอกสาร PDF
### การสร้าง PDF เอกสาร
```bash
npm install # ติดตั้ง docsify-to-pdf
npm run convert # สร้าง PDF จาก docs
```
### เอกสารด้วย Docsify
### เอกสาร Docsify
```bash
npm install -g docsify-cli # ติดตั้ง Docsify ทั่วระบบ
npm install -g docsify-cli # ติดตั้ง Docsify แบบทั่วโลก
docsify serve # ให้บริการที่ localhost:3000
```
### การสร้างโปรเจกต์เฉพาะราย
### การสร้างสำหรับโครงการเฉพาะ
แต่ละโปรเจกต์อาจมีกระบวนการสร้างของตนเอง:
- โปรเจกต์ Vue: `npm run build` เพื่อสร้างไฟล์สำหรับการใช้งานจริง
- โปรเจกต์แบบ static: ไม่มีขั้นตอนการสร้าง ให้บริการไฟล์โดยตรง
แต่ละโฟลเดอร์โครงการอาจมีขั้นตอนการสร้างของตัวเอง:
- โครงการ Vue: รัน `npm run build` เพื่อสร้างแพ็กเกจสำหรับการผลิต
- โครงการสแตติก: ไม่ต้องสร้างขั้นตอนใด ๆ ให้เสิร์ฟไฟล์โดยตรง
## แนวทางการส่ง Pull Request
## แนวทาง Pull Request
### รูปแบบหัวเรื่อง
### รูปแบบหัวข้อ
ใช้หัวข้อชัดเจนและบ่งชี้ส่วนที่เปลี่ยนแปลง:
ใช้หัวข้อที่ชัดเจนและสื่อความหมายบ่งชี้พื้นที่เปลี่ยนแปลง:
- `[Quiz-app] เพิ่มแบบทดสอบใหม่สำหรับบทเรียน X`
- `[Lesson-3] แก้ไขคำผิดในโปรเจกต์ terrarium`
- `[Translation] เพิ่มคำแปลภาษาสเปนสำหรับบทเรียน 5`
- `[Docs] ปรับปรุงคำแนะนำการตั้งค่า`
- `[Lesson-3] แก้ไขข้อผิดพลาดในโครงการ terrarium`
- `[Translation] เพิ่มแปลภาษาสเปนสำหรับบทเรียน 5`
- `[Docs] อัปเดตคำแนะนำการตั้งค่า`
### การตรวจสอบที่ต้องทำ
### การตรวจสอบที่จำเป็น
ก่อนส่ง PR:
1. **คุณภาพโค้ด**:
- รัน `npm run lint` ในโปรเจกต์ที่มีการเปลี่ยนแปล
- รัน `npm run lint` ในโฟลเดอร์โครงการที่เกี่ยวข้อ
- แก้ไขข้อผิดพลาดและคำเตือนทั้งหมด
2. **การตรวจสอบการสร้าง**:
- รัน `npm run build` หากมี
- ตรวจสอบว่าไม่มีข้อผิดพลาดการสร้าง
2. **ตรวจสอบการสร้าง**:
- รัน `npm run build` หากใช้ได้
- ตรวจสอบว่าไม่มีข้อผิดพลาดจากการสร้าง
3. **การตรวจสอบลิงก์**:
3. **ตรวจสอบลิงก์**:
- ทดสอบลิงก์ markdown ทั้งหมด
- ตรวจสอบไฟล์รูปภาพทำงานถูกต้อง
- ตรวจสอบการอ้างอิงรูปภาพ
4. **ตรวจสอบเนื้อหา**:
- ตรวจทานการสะกดคำและไวยากรณ์
- ตรวจสอบตัวอย่างโค้ดให้ถูกต้องและเหมาะสมสำหรับการศึกษา
- ตรวจสอบคำแปลว่าถูกต้องและรักษาความหมายเดิม
4. **ทบทวนเนื้อหา**:
- ตรวจสอบการสะกดคำและไวยากรณ์
- ตรวจสอบความถูกต้องและความชัดเจนของตัวอย่างโค้ดเพื่อการศึกษา
- ตรวจสอบให้การแปลยังคงความหมายเดิม
### ข้อกำหนดการร่วมสร้าง
### ข้อกำหนดการร่วมมือ
- ยอมรับ Microsoft CLA (มีการตรวจสอบอัตโนมัติใน PR แรก)
- ปฏิบัติตาม [จรรยาบรรณโอเพนซอร์สของ Microsoft](https://opensource.microsoft.com/codeofconduct/)
- ยอมรับ Microsoft CLA (ตรวจสอบอัตโนมัติใน PR แรก)
- ปฏิบัติตาม [กฎจรรยาบรรณรหัสเปิด Microsoft](https://opensource.microsoft.com/codeofconduct/)
- ดูรายละเอียดใน [CONTRIBUTING.md](./CONTRIBUTING.md)
- อ้างอิงหมายเลข issue ในคำอธิบาย PR หากมี
- อ้างอิงหมายเลข issue ในคำอธิบาย PR หากเกี่ยวข้อง
### กระบวนการรีวิ
### กระบวนการรวจสอบ
- PR จะถูกรีวิวโดยผู้ดูแลและชุมชน
- ให้ความสำคัญกับความชัดเจนด้านการศึกษา
- ตัวอย่างโค้ดต้องเป็นไปตามแนวทางที่ดีที่สุดในปัจจุบัน
- รีวิวคำแปลเพื่อความถูกต้องและเหมาะสมทางวัฒนธรรม
- PR จะถูกตรวจโดยผู้ดูแลและชุมชน
- ให้ความสำคัญกับความชัดเจนทางการศึกษา
- ตัวอย่างโค้ดควรปฏิบัติตามแนวทางปัจจุบันที่ดีที่สุด
- การแปลตรวจสอบความถูกต้องและเหมาะสมทางวัฒนธรรม
## ระบบแปลภาษา
### การแปลแบบอัตโนมัติ
### การแปลอัตโนมัติ
- ใช้ GitHub Actions กับเวิร์กโฟลว์ co-op-translator
- แปลเป็นกว่า 50 ภาษาโดยอัตโนมัติ
- ไฟล์ต้นฉบับในไดเรกทอรีหลัก
- ไฟล์แปลอยู่ในโฟลเดอร์ `translations/{language-code}/`
- ใช้งาน GitHub Actions กับเวิร์กโฟลว์ co-op-translator
- แปลอัตโนมัติเป็นมากกว่า 50 ภาษา
- ไฟล์ต้นฉบับอยู่ในไดเรกทอรีหลัก
- ไฟล์แปลเก็บในโฟลเดอร์ `translations/{language-code}/`
### การเพิ่มการแปลด้วยตนเอง
### การเพิ่มการปรับปรุงแปลด้วยตนเอง
1. ค้นหาไฟล์ในโฟลเดอร์ `translations/{language-code}/`
2. ปรับปรุงโดยรักษาโครงสร้างเดิม
1. หาไฟล์ใน `translations/{language-code}/`
2. ปรับปรุงเนื้อหาโดยรักษาโครงสร้างให้เหมือนเดิม
3. ตรวจสอบให้ตัวอย่างโค้ดยังคงทำงานได้
4. ทดสอบเนื้อหาแบบทดสอบเฉพาะภาษานั้
4. ทดสอบเนื้อหาแบบทดสอบในท้องถิ่
### ข้อมูลเมตาการแปล
### เมตาดาต้าการแปล
ไฟล์แปลมีส่วนหัว metadata:
ไฟล์แปลรวมส่วนหัวข้อมูลเมตาดาต้า:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,120 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## การดีบักและแก้ไขปัญหา
## การแก้ไขปัญหาและการดีบัก
### ปัญหาทั่วไป
**แอปแบบทดสอบเริ่มต้นไม่ขึ้น**:
**แอป quiz เริ่มไม่ขึ้น**:
- ตรวจสอบเวอร์ชัน Node.js (แนะนำ v14+)
- ลบ `node_modules` และ `package-lock.json` แล้วรัน `npm install` ใหม่
- ตรวจสอบพอร์ตที่ใช้งาน (ค่าเริ่มต้น Vite ใช้พอร์ต 5173)
- ตรวจสอบการชนกันของพอร์ต (ค่าเริ่มต้น Vite ใช้พอร์ต 5173)
**เซิร์ฟเวอร์ API ไม่เริ่มทำงาน**:
- ตรวจสอบว่า Node.js เป็นเวอร์ชันขั้นต่ำ (node >=10)
- ตรวจสอบว่าพอร์ตไม่ได้ถูกใช้งานอยู่แล้ว
- ติดตั้ง dependencies ครบถ้วนด้วย `npm install`
- ยืนยันเวอร์ชัน Node.js อย่างน้อย node >=10
- ตรวจสอบว่าพอร์ตไม่ถูกใช้งานอยู่
- ติดตั้ง dependencies ทั้งหมดด้วย `npm install`
**ส่วนขยายเบราว์เซอร์โหลดไม่ขึ้น**:
- ตรวจสอบให้ manifest.json ถูกฟอร์แมตอย่างถูกต้อง
- ตรวจสอบว่า manifest.json ถูกฟอร์แมตถูกต้อง
- ดูข้อผิดพลาดในคอนโซลเบราว์เซอร์
- ปฏิบัติตามคำแนะนำการติดตั้งส่วนขยายสำหรับเบราว์เซอร์นั้นๆ
**ปัญหาโปรเจกต์แชท Python**:
- ตรวจสอบติดตั้งแพ็กเกจ OpenAI: `pip install openai`
- ตรวจสอบให้ตัวแปรสภาพแวดล้อม GITHUB_TOKEN ตั้งค่าแล้ว
**ปัญหาโครงการแชท Python**:
- ติดตั้งแพ็กเกจ OpenAI: `pip install openai`
- ตรวจสอบว่าตัวแปรสิ่งแวดล้อม GITHUB_TOKEN ถูกตั้งค่า
- ตรวจสอบสิทธิ์การเข้าถึง GitHub Models
**Docsify ไม่แสดงเอกสาร**:
**Docsify ไม่ให้บริการเอกสาร**:
- ติดตั้ง docsify-cli แบบ global: `npm install -g docsify-cli`
- รันจากโฟลเดอร์หลักของคลัง
- ตรวจสอบไฟล์ `docs/_sidebar.md` มีอยู่
- รันจากโฟลเดอร์ root ของที่เก็บ
- ตรวจสอบว่า `docs/_sidebar.md` มีอยู่
### เคล็ดลับสภาพแวดล้อมการพัฒนา
- ใช้ VS Code พร้อมส่วนขยาย Live Server สำหรับโปรเจกต์ HTML
- ติดตั้งส่วนขยาย ESLint และ Prettier สำหรับการฟอร์แมตที่สม่ำเสมอ
- ใช้เครื่องมือ DevTools ของเบราว์เซอร์สำหรับดีบัก JavaScript
- สำหรับโปรเจกต์ Vue ให้ติดตั้ง Vue DevTools ในเบราว์เซอร์
- ใช้ VS Code พร้อมส่วนขยาย Live Server สำหรับโครงการ HTML
- ติดตั้งส่วนขยาย ESLint และ Prettier เพื่อความสม่ำเสมอในการฟอร์แมต
- ใช้ DevTools ในเบราว์เซอร์สำหรับดีบัก JavaScript
- สำหรับโครงการ Vue, ติดตั้ง Vue DevTools ส่วนขยายเบราว์เซอร์
### ข้อควรระวังด้านประสิทธิภาพ
### การพิจารณาด้านประสิทธิภาพ
- จำนวนไฟล์แปลมาก (50+ ภาษา) ทำให้การ clone แบบเต็มใหญ่
- ใช้ shallow clone ถ้าทำงานเฉพาะเนื้อหา: `git clone --depth 1`
- ยกเว้นการค้นหาไฟล์แปลเมื่อทำงานกับเนื้อหาอังกฤษ
- การสร้างโปรเจกต์อาจช้าในรันแรก (npm install, สร้างด้วย Vite)
- จำนวนไฟล์แปลมาก (50+ ภาษา) ทำให้การโคลนเต็มมีขนาดใหญ่
- ใช้ clone แบบตื้นหากทำงานแค่กับเนื้อหา: `git clone --depth 1`
- ยกเว้นการค้นหาในโฟลเดอร์แปลเมื่อทำงานกับเนื้อหาอังกฤษ
- ขั้นตอนสร้างอาจช้าในรันแรก (npm install, การสร้าง Vite)
## ข้อควรระวังด้านความปลอดภัย
## การพิจารณาความปลอดภัย
### ตัวแปรสภาพแวดล้อม
### ตัวแปรสิ่งแวดล้อม
- API key ห้าม commit ลงคล
- คีย์ API ห้ามคอมมิตลงที่เก็บ
- ใช้ไฟล์ `.env` (มีใน `.gitignore` แล้ว)
- ระบุตัวแปรสภาพแวดล้อมที่ต้องใช้ใน README ของโปรเจกต์
- บันทึกตัวแปรสิ่งแวดล้อมที่จำเป็นใน README ของโครงการ
### โปรเจกต์ Python
### โครงการ Python
- ใช้ virtual environment: `python -m venv venv`
- อัพเดต dependencies อย่างสม่ำเสมอ
- โทเคน GitHub ควรมีสิทธิ์ขั้นต่ำ
- ใช้สภาพแวดล้อมเสมือน: `python -m venv venv`
- อัพเดต dependencies อย่างต่อเนื่อง
- โทเคน GitHub ควรมีสิทธิ์ตามจำเป็นขั้นต่ำ
### การเข้าถึง GitHub Models
- ต้องใช้ Personal Access Tokens (PAT)
- โทเค็นต้องเก็บเป็นตัวแปรสภาพแวดล้อม
- ห้าม commit โทเค็นหรือข้อมูลรับรอง
- ต้องใช้ Personal Access Tokens (PAT) สำหรับ GitHub Models
- เก็บโทเคนเป็นตัวแปรสิ่งแวดล้อม
- หลีกเลี่ยงการคอมมิตโทเคนหรือข้อมูลรับรอง
## หมายเหตุเพิ่มเติม
### กลุ่มเป้าหมาย
- ผู้เริ่มต้นเรียนรู้การพัฒนาเว็บอย่างสมบูรณ์
- ผู้เริ่มต้นใหม่ทั้งหมดในการพัฒนาเว็บ
- นักเรียนและผู้เรียนด้วยตนเอง
- ครูที่ใช้หลักสูตรในห้องเรียน
- เนื้อหาออกแบบเพื่อการเข้าถึงและสร้างทักษะอย่างค่อยเป็นค่อยไป
- ครูผู้ใช้หลักสูตรในห้องเรียน
- เนื้อหาออกแบบเพื่อให้ทุกคนเข้าถึงได้และสร้างทักษะอย่างเป็นขั้นตอน
### ปรัชญาการศึกษา
- การเรียนรู้แบบโครงการ
- การตรวจสอบความรู้บ่อยครั้ง (แบบทดสอบ)
- การฝึกเขียนโค้ดด้วยตนเอง
- ตัวอย่างการใช้งานจริงในโลกจริง
- มุ่งเน้นพื้นฐานก่อนเรียนรู้เฟรมเวิร์ก
- แนวทางการเรียนรู้แบบเน้นโครงการ
- การทดสอบความรู้บ่อยๆ (แบบทดสอบ)
- แบบฝึกหัดเขียนโค้ดเชิงปฏิบัติ
- ตัวอย่างการใช้งานจริง
- เน้นพื้นฐานก่อนใช้เฟรมเวิร์ก
### การบำรุงรักษาคลัง
### การบำรุงรักษาที่เก็บ
- ชุมชนผู้เรียนและผู้ร่วมสร้างที่แข็งขั
- อัพเดต dependencies และเนื้อหาเป็นประจำ
- ติดตามปัญหาและสนทนาโดยผู้ดูแล
- อัพเดตคำแปลอัตโนมัติผ่าน GitHub Actions
- ชุมชนผู้เรียนและผู้ร่วมมือที่กระตือรือร้
- อัปเดต dependencies และเนื้อหาอย่างสม่ำเสมอ
- ติดตาม issues และการอภิปรายโดยผู้ดูแล
- อัปเดตการแปลอัตโนมัติผ่าน GitHub Actions
### แหล่งข้อมูลที่เกี่ยวข้อง
- [โมดูล Microsoft Learn](https://docs.microsoft.com/learn/)
- [ทรัพยากร Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [แหล่งข้อมูล Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) แนะนำสำหรับผู้เรียน
- หลักสูตรเสริม: Generative AI, Data Science, ML, IoT
- คอร์สเพิ่มเติม: Generative AI, Data Science, ML, IoT หลักสูตรมีให้
### การทำงานกับโปรเจกต์เฉพาะ
### การทำงานกับโครงการเฉพาะ
ู่มือการใช้งานแต่ละโปรเจกต์ดูที่ไฟล์ README:
- `quiz-app/README.md` - แอปแบบทดสอบ Vue 3
ำแนะนำรายละเอียดโครงการแต่ละโครงการดูได้จากไฟล์ README ใน:
- `quiz-app/README.md` - แอป quiz Vue 3
- `7-bank-project/README.md` - แอปธนาคารพร้อมระบบยืนยันตัวตน
- `5-browser-extension/README.md` - การพัฒนาส่วนขยายเบราว์เซอร์
- `6-space-game/README.md` - เกมบน Canvas
- `9-chat-project/README.md` - โปรเจกต์ผู้ช่วยแชท AI
- `6-space-game/README.md` - การพัฒนาเกมด้วย Canvas
- `9-chat-project/README.md` - โครงการผู้ช่วยแชท AI
### โครงสร้าง Monorepo
แม้จะไม่ใช่ monorepo แบบเดิมคลังนี้บรรจุโปรเจกต์อิสระหลายโปรเจกต์:
- บทเรียนแต่ละบทแยกตัวเอง
- โปรเจกต์ไม่แชร์ dependencies กัน
- ทำงานบนโปรเจกต์แต่ละอันได้โดยไม่กระทบอันอื่น
- Clone คลังก็จะได้ประสบการณ์หลักสูตรครบถ้วน
แม้ไม่ใช่ monorepo แบบดั้งเดิม แต่ที่เก็บนี้มีโครงการอิสระหลายโครงการ:
- บทเรียนแต่ละบทเป็นโครงการแยกตัว
- โครงการไม่แชร์ dependencies
- ทำงานกับโครงการใดโครงการหนึ่งโดยไม่กระทบคนอื่น
- โคลนที่เก็บทั้งหมดเพื่อประสบการณ์หลักสูตรครบถ้วน
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**ข้อจำกัดความรับผิดชอบ**:
เอกสารฉบับนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) โดยแม้เราจะพยายามให้การแปลมีความถูกต้อง แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาต้นทางถือเป็นแหล่งข้อมูลที่เชื่อถือได้สำหรับข้อมูลสำคัญ ขอแนะนำให้ใช้บริการแปลโดยมนุษย์มืออาชีพสำหรับข้อมูลที่มีความสำคัญสูงสุด เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดใด ๆ ที่เกิดจากการใช้การแปลนี้
เอกสารฉบับนี้ได้ถูกแปลโดยใช้บริการแปลภาษาอัตโนมัติ [Co-op Translator](https://github.com/Azure/co-op-translator) แม้เราจะพยายามให้ความถูกต้องสูงสุด แต่โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความคลาดเคลื่อนได้ เอกสารต้นฉบับในภาษาต้นทางถือเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ แนะนำให้ใช้บริการแปลโดยนักแปลมืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดใด ๆ ที่เกิดจากการใช้การแปลนี้
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Loading…
Cancel
Save