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

pull/1690/head
localizeflow[bot] 3 weeks ago
parent 9f8dbd5eed
commit aad7d1fd52

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

@ -2,36 +2,36 @@
## Projektoversigt
Dette er et uddannelsespensum-repositorium til undervisning i webudviklingsgrundlag for begyndere. Pensum består af et omfattende 12-ugers kursus udviklet af Microsoft Cloud Advocates, med 24 praktiske lektioner, der dækker JavaScript, CSS og HTML.
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.
### Centrale komponenter
### Hovedkomponenter
- **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 (forud/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)
- **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)
### Arkitektur
- Uddannelses-repositorium med lektionbaseret struktur
- Hver lektionsmappe indeholder README, kodeeksempler og løsninger
- Fritstående projekter i separate mapper (quiz-app, forskellige lektionsprojekter)
- Oversættelsessystem med GitHub Actions (co-op-translator)
- Dokumentation serveret via Docsify og tilgængelig som PDF
- 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
## Opsætningskommandoer
## Setup-kommandoer
Dette repositorium er primært til forbrug af uddannelsesindhold. For at arbejde med specifikke projekter:
Dette arkiv er primært til forbrug af undervisningsindhold. For arbejde med specifikke projekter:
### Hoved-repositorium opsætning
### Hoved Arkiv Setup
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Quiz App opsætning (Vue 3 + Vite)
### Quiz App Setup (Vue 3 + Vite)
```bash
cd quiz-app
@ -40,8 +40,8 @@ npm run dev # Start udviklingsserver
npm run build # Byg til produktion
npm run lint # Kør ESLint
```
### Bank Project API (Node.js + Express)
### Bank Projekt API (Node.js + Express)
```bash
cd 7-bank-project/api
@ -50,23 +50,23 @@ npm start # Start API-server
npm run lint # Kør ESLint
npm run format # Formater med Prettier
```
### Browser Extension projekter
### Browser Extension Projekter
```bash
cd 5-browser-extension/solution
npm install
# Følg browser-specifikke instruktioner til indlæsning af udvidelser
```
### Space Game projekter
### Space Game Projekter
```bash
cd 6-space-game/solution
npm install
# Åbn index.html i browser eller brug Live Server
```
### Chat Projekt (Python Backend)
```bash
@ -75,208 +75,208 @@ pip install openai
# Indstil miljøvariablen GITHUB_TOKEN
python api.py
```
## Udviklingsworkflow
## Udviklingsarbejdsgang
### For indholds-bidragsydere
### For Indholdsbidragydere
1. **Fork repositoriet** til din GitHub-konto
2. **Klon din fork** lokalt
3. **Lav en ny branch** til dine ændringer
4. Lav ændringer i lektionsindhold eller kodeeksempler
5. Test eventuelle kodeændringer i relevante projektmapper
6. Indsend pull requests i henhold til bidragsretningslinjer
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
### For elever
### For Lærende
1. Fork eller klon repositoriet
2. Naviger sekventielt til lektionsmapperne
3. Læs README-filer for hver lektion
4. Gennemfør for-lektion-quizzer på https://ff-quizzes.netlify.app/web/
5. Arbejd med kodeeksempler i lektionsmapperne
6. Lav opgaver og udfordringer
7. Tag efter-lektion-quizzer
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
### 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-udvidelsen 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
### Quiz App test
### Quiz App Test
```bash
cd quiz-app
npm run lint # Tjek for kode stil problemer
npm run build # Bekræft at build lykkes
npm run build # Bekræft at bygningen lykkes
```
### Bank API test
### Bank API Test
```bash
cd 7-bank-project/api
npm run lint # Tjek for kode stil problemer
node server.js # Bekræft at serveren starter uden fejl
```
### Generel Test Tilgang
### Generel testmetode
- Dette er et uddannelses-repositorium 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
- 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
### Forud for indsendelse checks
### Før-indsendelses Kontroller
- Kør `npm run lint` i mapper med package.json
- Bekræft at markdown-links er gyldige
- Test kodeeksempler i browser eller Node.js
- Tjek at oversættelser bevarer korrekt struktur
- 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
## Kodestil-retningslinjer
## Kode Stil Retningslinjer
### JavaScript
- Brug moderne ES6+ syntaks
- Følg standard ESLint-konfigurationer fra projekterne
- Brug meningsfulde variabel- og funktionsnavne for uddannelsesmæssig klarhed
- Tilføj kommentarer, der forklarer koncepter for elever
- Formatér med Prettier hvor det er konfigureret
- 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
### HTML/CSS
- Semantiske HTML5-elementer
- Responsive designprincipper
- Klare klasse-navngivningskonventioner
- Kommentarer, der forklarer CSS-teknikker for elever
- Semantiske HTML5 elementer
- Responsivt design principper
- Klare klassifikationsnavne
- Kommentarer der forklarer CSS teknikker for de lærende
### Python
- PEP 8 stil-retningslinjer
- Klare, uddannelsesmæssige kodeeksempler
- Type hints hvor det er hjælpsomt for læring
- PEP 8 stil retningslinjer
- Klare, undervisningsvenlige kodeeksempler
- Type hints hvor hjælpsomt for læring
### Markdown dokumentation
### Markdown Dokumentation
- Klar overskriftshierarki
- Kodeblokke med sprogspecificering
- Links til yderligere ressourcer
- Skærmbilleder og billeder i `images/`-mapper
- ALT-tekst til billeder for tilgængelighed
- Klar overskriftshierarki
- Kodeblokke med sprog angivelse
- Links til yderligere ressourcer
- Skærmbilleder og billeder i `images/` mapper
- Alternativ tekst til billeder for tilgængelighed
### Filorganisation
- Lektioner nummereret sekventielt (1-getting-started-lessons, 2-js-basics, etc.)
- Hvert projekt har `solution/` og ofte `start/` eller `your-work/` mapper
- Billeder gemt 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 opbevaret i lektion-specifikke `images/` mapper
- Oversættelser i `translations/{language-code}/` struktur
## Build og deploy
## Build og Udrulning
### Quiz App deploy (Azure Static Web Apps)
### Quiz App Udrulning (Azure Static Web Apps)
quiz-app er konfigureret til Azure Static Web Apps deployment:
quiz-app er konfigureret til Azure Static Web Apps udrulning:
```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`
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
### Dokumentation PDF Generering
```bash
npm install # Installer docsify-to-pdf
npm run convert # Generer PDF fra docs
```
### Docsify dokumentation
### Docsify Dokumentation
```bash
npm install -g docsify-cli # Installer Docsify globalt
docsify serve # Server på localhost:3000
```
### Projektspecifikke Builds
### Projekt-specifikke builds
Hver projektmappe kan have sin egen build-proces:
- Vue-projekter: `npm run build` skaber produktionsbundles
- Statiske projekter: Ingen build-step, server filer direkte
Hver projektmappe kan have sin egen buildproces:
- Vue projekter: `npm run build` skaber produktionsbundles
- Statiske projekter: Intet build trin, servér filer direkte
## Pull Request retningslinjer
## Pull Request Retningslinjer
### Titel-format
### Titel Format
Brug klare, beskrivende titler, der angiver område for ændring:
- `[Quiz-app] Tilføj ny quiz for lektion X`
- `[Lesson-3] Ret stavefejl i terrarium projekt`
- `[Translation] Tilføj spansk oversættelse for lektion 5`
- `[Docs] Opdater opsætningsinstruktioner`
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`
### Nødvendige checks
### Krævede Kontroller
Før PR indsendes:
Før indsendelse af en 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 linting-fejl og advarsler
2. **Build verifikation**:
- Kør `npm run build` hvis relevant
- Sikr at der ikke er build-fejl
2. **Build Verifikation**:
- Kør `npm run build` hvis relevant
- Sikr ingen build-fejl
3. **Link validering**:
- Test alle markdown-links
- Bekræft at billedreferencer virker
3. **Linkvalidering**:
- Test alle markdown links
- Bekræft at billedreferencer virker
4. **Indholds-gennemgang**:
- Korrekturlæs for stave- og grammatikfejl
- Sikr, at kodeeksempler er korrekte og pædagogiske
- Bekræft, at oversættelser bevarer oprindelig mening
4. **Indholds Gennemgang**:
- Korrekturlæs for stave- og grammatikefejl
- Sikr at kodeeksempler er korrekte og undervisende
- Bekræft at oversættelser bevarer original mening
### Bidragskrav
- Accepter Microsoft CLA (automatisk tjek på første PR)
- Følg [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Se [CONTRIBUTING.md](./CONTRIBUTING.md) for detaljerede retningslinjer
- Referer issues i PR-beskrivelse hvis 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
- Henvis til issues i PR-beskrivelse hvor relevant
### Gennemgangsproces
### Review Proces
- PR'er gennemgås af vedligeholdere og community
- Uddannelsesmæssig klarhed prioriteres
- Kodeeksempler skal følge nuværende bedste praksis
- Oversættelser gennemgås for nøjagtighed og kulturel passendehed
- 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
## Oversættelsessystem
### Automatisk oversættelse
### 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
- Kildefiler i hovedmapper
- Oversatte filer i `translations/{language-code}/` mapper
### Tilføjelse af manuelle oversættelsesforbedringer
### Tilføjelse af Manuel Oversættelsesforbedring
1. Find fil i `translations/{language-code}/`
2. Lav forbedringer mens struktur bevares
3. Sørg for, at kodeeksempler forbliver funktionelle
4. Test eventuelt lokaliseret quiz-indhold
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
### Oversættelsesmetadata
Oversatte filer inkluderer metadata-header:
Oversatte filer indeholder metadata header:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -288,121 +288,121 @@ CO_OP_TRANSLATOR_METADATA:
}
-->
```
## Fejlfinding og Problemløsning
## Debugging og fejlfinding
### Almindelige problemer
### Almindelige Problemer
**Quiz app starter ikke**:
- Tjek Node.js version (v14+ anbefales)
- Slet `node_modules` og `package-lock.json`, kør `npm install` igen
- Tjek for portkonflikter (default: Vite bruger port 5173)
**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)
**API server starter ikke**:
- Bekræft Node.js version opfylder minimum (node >=10)
- Tjek om port allerede er i brug
- Sørg for at alle afhængigheder er installeret med `npm install`
**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`
**Browser extension loader ikke**:
- Bekræft manifest.json er korrekt formateret
- Tjek browserkonsol for fejl
- Følg browser-specifikke installationsinstruktioner
**Browser extension loader ikke**:
- Bekræft manifest.json er korrekt formateret
- Tjek browserkonsol for fejl
- Følg browser-specifikke installationsinstruktioner for extensions
**Python chat projekt problemer**:
- Sørg for at OpenAI-pakken er installeret: `pip install openai`
- Bekræft at GITHUB_TOKEN miljøvariabel er sat
- Tjek GitHub Models adgangstilladelser
**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
**Docsify serverer ikke docs**:
- Installer docsify-cli globalt: `npm install -g docsify-cli`
- Kør fra repositoriets rodmappe
- Tjek at `docs/_sidebar.md` findes
**Docsify serverer ikke docs**:
- Installer docsify-cli globalt: `npm install -g docsify-cli`
- Kør fra arkivets rodmappe
- Tjek at `docs/_sidebar.md` findes
### Tips til udviklingsmiljø
### Udviklingsmiljø Tips
- Brug VS Code med Live Server-udvidelse til HTML-projekter
- Installer ESLint og Prettier-udvidelser for konsistent formatering
- Brug browser DevTools til JavaScript-debugging
- For Vue projekter, installer Vue DevTools browserudvidelse
- 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
### Performance overvejelser
### Ydelsesmæssige Overvejelser
- Mange 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 med 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 ved arbejde på engelsk indhold
- Build processer kan være langsomme ved første kørsel (npm install, Vite build)
## Sikkerhedsovervejelser
### Miljøvariabler
- API-nøgler må aldrig committes til repositoriet
- Brug `.env` filer (allerede i `.gitignore`)
- Dokumenter nødvendige miljøvariabler i projekt-README'er
- API nøgler må aldrig committes til arkivet
- Brug `.env` filer (allerede i `.gitignore`)
- Dokumenter nødvendige miljøvariabler i projekt READMEs
### Python projekter
### Python Projekter
- Brug virtuelle miljøer: `python -m venv venv`
- Hold afhængigheder opdaterede
- GitHub tokens skal have minimale nødvendige tilladelser
- Brug virtuelle miljøer: `python -m venv venv`
- Hold dependencies opdaterede
- GitHub tokens bør have minimale nødvendige tilladelser
### GitHub Models adgang
### GitHub Models Adgang
- Personlige Access Tokens (PAT) kræves til GitHub Models
- Tokens skal opbevares som miljøvariabler
- Aldrig commit tokens eller legitimationsoplysninger
- Personal Access Tokens (PAT) kræves for GitHub Models
- Tokens bør gemmes som miljøvariabler
- Committ aldrig tokens eller credentials
## Yderligere noter
## Yderligere Noter
### Målgruppe
- Komplette begyndere til webudvikling
- Studerende og selvstuderende
- Lærere, der bruger pensum i klasseværelser
- Indhold designet til tilgængelighed og gradvist færdighedsopbygning
- 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
### Uddannelsesfilosofi
### Undervisningsfilosofi
- Projektbaseret læringsmetode
- Hyppige videnscheck (quizzer)
- Praktiske kodningsøvelser
- Virkelighedsnære anvendelseseksempler
- Fokus på grundlæggende før frameworks
- Projektbaseret læringstilgang
- Hyppige videnschecks (quizzer)
- Praktiske kodningsøvelser
- Virkelige applikationseksempler
- Fokus på grundlæggende før frameworks
### Vedligeholdelse af repositorium
### Arkiv Vedligeholdelse
- Aktivt fællesskab af elever og bidragsydere
- Regelmæssige opdateringer af afhængigheder og indhold
- Issues og diskussioner overvåges af vedligeholdere
- Oversættelsesopdateringer automatiseret via GitHub Actions
- 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
### Relaterede ressourcer
### Relaterede Ressourcer
- [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 pensum tilgængeligt
- [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
### 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 autentifikation
- `5-browser-extension/README.md` - Browser extension udvikling
- `6-space-game/README.md` - Canvas-baseret spiludvikling
- `9-chat-project/README.md` - AI chat assistent projekt
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
### Monorepo struktur
### Monorepo Struktur
Selvom det ikke er et traditionelt monorepo, indeholder dette repositorium flere uafhængige projekter:
- Hver lektion er selvstændig
- Projekter deler ikke afhængigheder
- Arbejd med individuelle projekter uden at påvirke andre
- Klon hele repo for den komplette penumsoplevelse
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
---
<!-- 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, bedes du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det oprindelige dokument på originalsproget bør betragtes som den autoritative kilde. For vigtig information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der måtte opstå 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 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.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

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

@ -2,13 +2,13 @@
## Projektöversikt
Detta är ett utbildningsmaterial för att lära ut grunderna i webbutveckling till nybörjare. Kursen är en omfattande 12-veckors kurs utvecklad av Microsoft Cloud Advocates, med 24 praktiska lektioner som täcker JavaScript, CSS och HTML.
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.
### Viktiga komponenter
### Huvudkomponenter
- **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-lektion bedömningar)
- **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)
@ -17,21 +17,21 @@ Detta är ett utbildningsmaterial för att lära ut grunderna i webbutveckling t
- 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 som använder GitHub Actions (co-op-translator)
- Dokumentation serveras via Docsify och finns som PDF
- Översättningssystem med GitHub Actions (co-op-translator)
- Dokumentation serveras via Docsify och finns tillgänglig som PDF
## Uppstarts-kommandon
## Uppstartskommandon
Det här arkivet är främst för konsumtion av utbildningsinnehåll. För att arbeta med specifika projekt:
Detta förråd är främst för konsumtion av utbildningsinnehåll. För arbete med specifika projekt:
### Huvudförrådets uppsättning
### Huvudförråd Uppstart
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Quiz App-uppsättning (Vue 3 + Vite)
### Quiz App Setup (Vue 3 + Vite)
```bash
cd quiz-app
@ -59,7 +59,7 @@ npm install
# Följ webbläsarspecifika instruktioner för att ladda tillägg
```
### Rymdspelsprojekt
### Rymdspelprojekt
```bash
cd 6-space-game/solution
@ -72,7 +72,7 @@ npm install
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Sätt miljövariabeln GITHUB_TOKEN
# Sätt GITHUB_TOKEN-miljövariabeln
python api.py
```
@ -82,27 +82,27 @@ python api.py
1. **Fork:a förrådet** till ditt GitHub-konto
2. **Klon:a din fork** lokalt
3. **Skapa en ny gren** för dina ändringar
3. **Skapa en ny branch** för dina ändringar
4. Gör ändringar i lektionsinnehåll eller kodexempel
5. Testa ändringar i motsvarande projektkataloger
6. Skicka in pull requests i enlighet med bidragsriktlinjer
5. Testa eventuella kodändringar i relevanta projektmappar
6. Skicka pull requests enligt bidragsriktlinjerna
### För elever
### För lärande
1. Fork:a eller klona förrådet
2. Navigera sekventiellt genom lektionskataloger
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. Utför uppgifter och utmaningar
7. Gör efter-lektionsquiz
6. Slutför uppgifter och utmaningar
7. Gör efter-lektionsquizzen
### Live-utveckling
- **Dokumentation**: Kör `docsify serve` i roten (port 3000)
- **Quiz App**: Kör `npm run dev` i quiz-app-katalogen
- **Projekt**: Använd VS Code Live Server tillägg för HTML-projekt
- **API-projekt**: Kör `npm start` i respektive API-katalog
- **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
## Testinstruktioner
@ -110,7 +110,7 @@ python api.py
```bash
cd quiz-app
npm run lint # Kontrollera kodstilsproblem
npm run lint # Kontrollera kodstilproblem
npm run build # Verifiera att bygget lyckas
```
@ -124,26 +124,26 @@ node server.js # Verifiera att servern startar utan fel
### Allmän testmetod
- Detta är ett utbildningsförråd utan omfattande automatiska tester
- Manuella tester fokuserar på:
- 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
- Projekten byggs klart utan problem
- Projekt byggs utan problem
- Exempel följer bästa praxis
### Kontroll före inskick
### Kontroller 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 behåller korrekt struktur
- Kontrollera att översättningar bibehåller korrekt struktur
## Kodstilriktlinjer
### JavaScript
- Använd modern ES6+ syntax
- Följ standard ESLint-konfigurationer som finns i projekten
- 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
@ -151,49 +151,49 @@ node server.js # Verifiera att servern startar utan fel
### HTML/CSS
- Semantiska HTML5-element
- Responsiv designprinciper
- Klara klassnamnskonventioner
- Responsiva designprinciper
- Tydliga klassnamnskonventioner
- Kommentarer som förklarar CSS-tekniker för elever
### Python
- PEP 8-stilriktlinjer
- Klara, pedagogiska kodexempel
- Typanvisningar där det är hjälpsamt för lärande
- Typangivelser där det är hjälpsamt för lärande
### Markdown-dokumentation
### Markdown Dokumentation
- Klar rubrikhierarki
- Kodblock med språkspecifikation
- Länkar till ytterligare resurser
- Skärmdumpar och bilder i `images/` mappar
- Skärmdumpar och bilder i `images/`-mappar
- Alt-text för bilder för tillgänglighet
### Filorganisation
- Lektioner numrerade sekventiellt (1-getting-started-lessons, 2-js-basics, etc.)
- 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 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
## Bygg och distribution
### Distribution av Quiz App (Azure Static Web Apps)
### Quiz App-distribution (Azure Static Web Apps)
quiz-app är konfigurerad för distribution via Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Skapar dist/-mappen
# Distribuerar via GitHub Actions-arbetsflöde vid push till main
npm run build # Skapar mappen dist/
# Distribuerar via GitHub Actions workflow vid push till main
```
Azure Static Web Apps-konfiguration:
- **App plats**: `/quiz-app`
- **Utdata plats**: `dist`
- **App-plats**: `/quiz-app`
- **Utdata-plats**: `dist`
- **Arbetsflöde**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Generering av PDF-dokumentation
### Generering av dokumentations-PDF
```bash
npm install # Installera docsify-to-pdf
@ -207,76 +207,76 @@ npm install -g docsify-cli # Installera Docsify globalt
docsify serve # Servera på localhost:3000
```
### Projekt-specifika byggen
### Projekt-specifika byggprocesser
Varje projektmapp kan ha egen byggprocess:
Varje projektkatalog kan ha sin egen byggprocess:
- Vue-projekt: `npm run build` skapar produktionspaket
- Statiska projekt: Ingen byggsteg, filer serveras direkt
- Statiska projekt: Ingen byggsteg, servera filer direkt
## Pull Request-riktlinjer
## Riktlinjer för Pull Requests
### Titelformat
Använd klara, beskrivande titlar som tydligt anger ändringsområde:
Använd klara, beskrivande titlar som anger ändringsområde:
- `[Quiz-app] Lägg till nytt quiz för lektion X`
- `[Lesson-3] Rätta stavfel i terrarium-projekt`
- `[Lesson-3] Åtgärda skrivfel i terrarium-projektet`
- `[Translation] Lägg till spansk översättning för lektion 5`
- `[Docs] Uppdatera installationsinstruktioner`
- `[Docs] Uppdatera uppstartsinstruktioner`
### Obligatoriska kontroller
Innan PR skickas in:
Innan inskickande av PR:
1. **Kodkvalitet**:
- Kör `npm run lint` i berörda projektkataloger
- Kör `npm run lint` i berörda projektmappar
- Åtgärda alla lint-fel och varningar
2. **Byggverifiering**:
- Kör `npm run build` om tillämpligt
- Säkerställ inga byggfel
- Säkerställ att inga byggfel förekommer
3. **Länkvalidering**:
- Testa alla markdown-länkar
- Verifiera bildreferenser fungerar
4. **Innehållsgranskning**:
- Korrekturläs för stavning och grammatik
- Korrekturläs stavning och grammatik
- Säkerställ att kodexempel är korrekta och pedagogiska
- Kontrollera att översättningar bevarar ursprungligt innehåll
- Kontrollera att översättningar bibehåller ursprunglig betydelse
### Bidragskrav
- Godkänn Microsoft CLA (automatiskt vid första PR)
- 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 vid behov
- Referera ärendenummer i PR-beskrivning om tillämpligt
### Granskningsprocess
- PR granskas av underhållare och community
- PR:er granskas av underhållare och community
- Pedagogisk tydlighet prioriteras
- Kodexempel ska följa aktuella bästa praxis
- Översättningar granskas för korrekthet och kulturell anpassning
- Kodexempel ska följa aktuell 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 till 50+ språk automatiskt
- Källfiler i huvuddirektorier
- Översatta filer i `translations/{language-code}/` kataloger
- 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
### Lägg till manuella förbättringar
1. Hitta fil i `translations/{language-code}/`
2. Gör förbättringar medan strukturen bevaras
3. Säkerställ att kodexempel fungerar som de ska
4. Testa eventuellt lokalt quiz-innehåll
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
### Översättningsmetadata
Översatta filer inkluderar metadata-header:
Översatta filer innehåller metadata-huvud:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -293,44 +293,44 @@ CO_OP_TRANSLATOR_METADATA:
### Vanliga problem
**Quiz app startar inte**:
- Kontrollera Node.js version (v14+ rekommenderas)
- Radera `node_modules` och `package-lock.json`, kör `npm install` igen
- Kontrollera om porten är upptagen (standard: Vite använder port 5173)
**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)
**API-servern startar inte**:
- Kontrollera att Node.js version är tillräckligt hög (node >=10)
- Kontrollera om porten redan används
**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`
**Webbläsartillägg laddas inte**:
- Kontrollera att manifest.json är korrekt formaterad
- Kontrollera webbläsarkonsolen för fel
- Följ installationsinstruktioner för webbläsarspecifika tillägg
- Granska webbläsarkonsolen för fel
- Följ webbläsarspecifika installationsinstruktioner
**Problem med Python-chattprojektet**:
- Säkerställ att OpenAI-paketet är installerat: `pip install openai`
- Verifiera att miljövariabeln GITHUB_TOKEN är satt
- Kontrollera åtkomsttillstånd för GitHub Models
**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
**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
### Utvecklingsmiljötips
### Tips för utvecklingsmiljö
- Använd VS Code med Live Server-tillägg för HTML-projekt
- Installera ESLint och Prettier-tillägg för konsekvent formatering
- Använd webbläsarens DevTools för JavaScript-felsökning
- 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
### Prestandaöverväganden
- Stort antal översatta filer (50+ språk) gör fulla kloningar stora
- Använd grundlig kloning för endast innehåll: `git clone --depth 1`
- Exkludera översättningar från sökningar när du arbetar med engelskt innehåll
- Byggprocesser kan vara långsamma vid första körning (npm install, Vite build)
- 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)
## Säkerhetsöverväganden
@ -338,71 +338,71 @@ CO_OP_TRANSLATOR_METADATA:
- API-nycklar ska aldrig committas till förrådet
- Använd `.env`-filer (redan i `.gitignore`)
- Dokumentera nödvändiga miljövariabler i projektets README
- Dokumentera nödvändiga miljövariabler i projekt-README-filer
### Python-projekt
- Använd virtuella miljöer: `python -m venv venv`
- Håll beroenden uppdaterade
- GitHub-tokens bör ha minimala nödvändiga behörigheter
- GitHub-token bör ha minimala behörigheter
### GitHub Models-åtkomst
### GitHub Models Access
- Personliga access tokens (PAT) krävs för GitHub Models
- Tokens ska lagras som miljövariabler
- Aldrig committa tokens eller credentials
- Personliga Access Tokens (PAT) krävs för GitHub Models
- Tokens bör lagras som miljövariabler
- Commita aldrig tokens eller inloggningsuppgifter
## Ytterligare anteckningar
## Ytterligare Noteringar
### Målgrupp
- Fullständiga nybörjare i webbutveckling
- Absoluta nybörjare inom webbutveckling
- Studenter och självlärande
- Lärare som använder kursmaterial i klassrum
- Innehållet är utformat för tillgänglighet och gradvis kompetensuppbyggnad
- 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 kodningsövningar
- Exempel på verkliga tillämpningar
- Fokus på grunder innan ramverk
- Praktiska kodövningar
- Verklighetsnära exempel
- Fokus på grunderna innan ramverk
### Underhåll av förrådet
### Förrådsunderhåll
- Aktiv community av elever och bidragsgivare
- Regelbundna uppdateringar av beroenden och innehåll
- Ärenden och diskussioner övervakas av underhållare
- Översättningsuppdateringar automatiseras via GitHub Actions
- Ö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-kurser tillgängliga
- 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
- `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 chatassistentprojekt
- `9-chat-project/README.md` - AI-chattassistentprojekt
### Monorepo-struktur
Även om detta inte är ett traditionellt monorepo, innehåller förrådet flera fristående projekt:
Även om detta inte är ett traditionellt monorepo innehåller förrådet flera oberoende projekt:
- Varje lektion är självständig
- Projekten delar inte beroenden
- Arbeta med enskilda projekt utan att påverka andra
- Klona hela förrådet för att få hela kursupplevelsen
- 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
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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 observera att automatiska översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess modersmål ska 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 vid användning av denna översättning.
**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.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

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

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