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

pull/1793/head
localizeflow[bot] 1 month ago
parent 56eac86043
commit 82ccaeb511

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-04-06T18:13:56+00:00",
"translation_date": "2026-04-20T15:53:57+00:00",
"source_file": "AGENTS.md",
"language_code": "da"
},

@ -2,36 +2,36 @@
## Projektoversigt
Dette er et uddannelses-kursuslager til undervisning i grundlæggende webudvikling for begyndere. Pensum 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 uddannelsesforløbsdepot til undervisning i grundlæggende webudvikling for begyndere. Forløbet er et omfattende 12-ugers kursus udviklet af Microsoft Cloud Advocates og indeholder 24 praktiske lektioner om JavaScript, CSS og HTML.
### Vigtige komponenter
### Centrale elementer
- **Læremateriale**: 24 strukturerede lektioner organiseret i projektbaserede moduler
- **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 (før/efter lektion evalueringer)
- **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)
- **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (til AI projekter)
### Arkitektur
- Uddannelseslager med lektionbaseret struktur
- Uddannelsesdepot med lektionbaseret struktur
- Hver lektionsmappe indeholder README, kodeeksempler og løsninger
- Selvstændige projekter i separate mapper (quiz-app, forskellige lektionsprojekter)
- Oversættelsessystem ved brug af GitHub Actions (co-op-translator)
- Dokumentation leveres via Docsify og er tilgængelig som PDF
- Dokumentation serveres via Docsify og er tilgængelig som PDF
## Opsætningskommandoer
Dette lager er primært til forbrug af uddannelsesindhold. For at arbejde med specifikke projekter:
Dette depot er primært til forbrug af uddannelsesindhold. For arbejde med specifikke projekter:
### Hovedlageropsætning
### Hoveddepot opsætning
```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 opsætning (Vue 3 + Vite)
```bash
cd quiz-app
@ -41,25 +41,25 @@ npm run build # Byg til produktion
npm run lint # Kør ESLint
```
### Bankprojekt API (Node.js + Express)
### Bank Projekt API (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # Start API-server
npm run lint # Kør ESLint
npm run format # Formatér med Prettier
npm run format # Formater med Prettier
```
### Browser Extension Projekter
### Browser Extension projekter
```bash
cd 5-browser-extension/solution
npm install
# Følg browser-specifikke udvidelsesindlæsningsinstruktioner
# Følg browser-specifikke instruktioner til indlæsning af udvidelser
```
### Space Game Projekter
### Space Game projekter
```bash
cd 6-space-game/solution
@ -67,103 +67,103 @@ npm install
# Åbn index.html i browseren eller brug Live Server
```
### Chat Projekt (Python Backend)
### Chat projekt (Python Backend)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Indstil GITHUB_TOKEN miljøvariabel
# Indstil miljøvariablen GITHUB_TOKEN
python api.py
```
## Udviklingsarbejdsgang
### For indholdsbidragsydere
### For indholdsleverandører
1. **Fork lageret** til din GitHub-konto
2. **Klon din fork** lokalt
1. **Fork depotet** til din GitHub konto
2. **Klon dit fork** lokalt
3. **Opret en ny gren** til dine ændringer
4. Foretag ændringer i lektionsindhold eller kodeeksempler
4. Foretag æ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 lageret
2. Naviger sekventielt til lektionsmapperne
1. Fork eller klon depotet
2. Naviger sekventielt gennem lektionsmapperne
3. Læs README-filer for hver lektion
4. Fuldfør præ-lektionsquizzer på https://ff-quizzes.netlify.app/web/
5. Arbejd med kodeeksempler i lektionsmapperne
4. Gennemfør før-lektions quizzer på https://ff-quizzes.netlify.app/web/
5. Arbejd gennem kodeeksemplerne i lektionsmapperne
6. Udfør opgaver og udfordringer
7. Tag post-lektionsquizzer
7. Tag efter-lektions quizzer
### Live udvilkling
### Live udvikling
- **Dokumentation**: Kør `docsify serve` i rodmappen (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
- **API projekter**: Kør `npm start` i de respektive API mapper
## Testinstruktioner
### Quiz App Test
### Quiz App test
```bash
cd quiz-app
npm run lint # Tjek for kode stilproblemer
npm run build # Bekræft at build lykkes
npm run build # Bekræft at byggeriet 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 server starter uden fejl
node server.js # Bekræft at serveren starter uden fejl
```
### Generel testtilgang
- Dette er et uddannelseslager uden omfattende automatiserede tests
- Dette er et uddannelsesdepot uden omfattende automatiserede tests
- Manuel test fokuserer på:
- Kodeeksempler kører uden fejl
- Links i dokumentationen fungerer korrekt
- Projekter bygger færdigt succesfuldt
- Eksempler følger bedste praksis
- At kodeeksempler kører uden fejl
- At links i dokumentationen fungerer korrekt
- At projektbygninger fuldføres succesfuldt
- At eksempler følger bedste praksis
### Kontroller før indsendelse
### Forud for indsendelse
- Kør `npm run lint` i mapper med package.json
- Bekræft at markdown-links er gyldige
- Verificer at markdown-links er gyldige
- Test kodeeksempler i browser eller Node.js
- Tjek at oversættelser bevarer korrekt struktur
- Kontroller at oversættelser bevarer korrekt struktur
## Kode-stil retningslinjer
## Kode stil retningslinjer
### JavaScript
- Brug moderne ES6+ syntaks
- Følg standard ESLint-konfigurationer leveret i projekterne
- Brug meningsfulde variabel- og funktionsnavne for bedre læring
- Tilføj kommentarer, der forklarer koncepter for elever
- Formater med Prettier hvor konfigureret
- Følg standard ESLint konfigurationer i projekterne
- Brug meningsfulde variabel- og funktionsnavne for pædagogisk klarhed
- Tilføj kommentarer der forklarer koncepter for lærende
- Formater med Prettier hvor det er konfigureret
### HTML/CSS
- Semantiske HTML5-elementer
- Responsivt design principper
- Klare klassenavnekonventioner
- Kommentarer, der forklarer CSS-teknikker for elever
- Semantiske HTML5 elementer
- Responsive designprincipper
- Klare konventioner for klassenavne
- Kommentarer der forklarer CSS-teknikker til lærende
### Python
- PEP 8 stilretningslinjer
- Klare, uddannelsesmæssige kodeeksempler
- Type hints hvor det hjælper læring
- Klare, pædagogiske kodeeksempler
- Type hints hvor det er hjælpsomt for læring
### Markdown dokumentation
- Klar overskriftshierarki
- Klar overskriftsstruktur
- Kodeblokke med sprogangivelse
- Links til yderligere ressourcer
- Skærmbilleder og billeder i `images/` mapper
@ -171,12 +171,12 @@ node server.js # Bekræft at server starter uden fejl
### Filorganisation
- Lektioner nummereret sekventielt (1-getting-started-lessons, 2-js-basics, osv.)
- 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
- Billeder gemt i lektion-specifikke `images/` mapper
- Oversættelser i `translations/{language-code}/` struktur
## Bygning og udrulning
## Byg og udrulning
### Quiz App udrulning (Azure Static Web Apps)
@ -193,7 +193,7 @@ Azure Static Web Apps konfiguration:
- **Output placering**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Dokumentations PDF generering
### Generering af PDF dokumentation
```bash
npm install # Installer docsify-to-pdf
@ -209,54 +209,54 @@ docsify serve # Kør på localhost:3000
### Projekt-specifikke builds
Hver projektmappe kan have sin egen byggeproces:
- Vue projekter: `npm run build` skaber produktionspakker
- Statisk projekter: Ingen byggeproces, server filer direkte
Hver projektmappe kan have sin egen build-proces:
- Vue projekter: `npm run build` skaber produktionsbundles
- Statiske projekter: Ingen build-step, server filer direkte
## Pull Request retningslinjer
### Titel format
Brug klare, beskrivende titler, der angiver område for ændring:
Brug klare, beskrivende titler der angiver ændringsområde:
- `[Quiz-app] Tilføj ny quiz til lektion X`
- `[Lesson-3] Ret stavefejl i terrarium projekt`
- `[Translation] Tilføj spansk oversættelse til lektion 5`
- `[Docs] Opdater opsætningsinstruktioner`
### Påkrævede kontroller
### Krævede kontroller
Før indsendelse af PR:
1. **Kodekvalitet**:
- Kør `npm run lint` i berørte projektmapper
- Ret alle lint fejl og advarsler
- Ret alle linting fejl og advarsler
2. **Build verifikation**:
- Kør `npm run build` hvis relevant
- Sikre ingen build fejl
- Sørg for ingen build fejl
3. **Link validering**:
- Test alle markdown links
- Bekræft at billedreferencer virker
- Test alle markdown-links
- Bekræft billedreferencer fungerer
4. **Indholdsrevision**:
- Korrekturlæs for stave- og grammatikfejl
- Sikre kodeeksempler er korrekte og pædagogiske
- Bekræft oversættelser bevarer oprindelig mening
- Læs korrektur for stave- og grammatikfejl
- Sørg for kodeeksempler er korrekte og pædagogiske
- Verificer at oversættelser bevarer original betydning
### Bidragskrav
- Accepter Microsoft CLA (automatisk tjek ved første PR)
- Accepter Microsoft CLA (automatisk 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
- Referer til issues i PR-beskrivelsen hvis relevant
- Henvis til issues i PR-beskrivelsen hvis relevant
### Gennemgangsproces
### Review proces
- PRer gennemgås af vedligeholdere og fællesskab
- Pædagogisk tydelighed prioriteres
- Kodeeksempler bør følge aktuelle bedste praksis
- Oversættelser gennemgås for nøjagtighed og kulturel tilpasning
- PRs gennemgås af vedligeholdere og community
- Prioritér pædagogisk klarhed
- Kodeeksempler skal følge gældende bedste praksis
- Oversættelser vurderes for nøjagtighed og kulturel relevans
## Oversættelsessystem
@ -270,13 +270,13 @@ Før indsendelse af PR:
### Tilføjelse af manuelle oversættelsesforbedringer
1. Find fil i `translations/{language-code}/`
2. Lav forbedringer mens struktur bevares
3. Sikr at kodeeksempler forbliver funktionelle
4. Test eventuelt lokaliseret quizindhold
2. Foretag forbedringer mens strukturen bevares
3. Sørg for kodeeksempler fortsat fungerer
4. Test eventuelt lokaliseret quiz-indhold
### Oversættelsesmetadata
Oversatte filer inkluderer metadata header:
Oversatte filer inkluderer metadata-header:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -294,53 +294,53 @@ CO_OP_TRANSLATOR_METADATA:
### Almindelige problemer
**Quiz app starter ikke**:
- Tjek Node.js version (v14+ anbefalet)
- Tjek Node.js version (v14+ anbefales)
- Slet `node_modules` og `package-lock.json`, kør `npm install` igen
- Tjek for porte i konflikt (standard: Vite bruger port 5173)
- Tjek for port-konflikter (standard: Vite bruger port 5173)
**API server starter ikke**:
- Bekræft Node.js version minimum (node >=10)
- Tjek om port allerede er i brug
- Sikr at alle afhængigheder er installeret med `npm install`
- Tjek at Node.js version er minimum (node >=10)
- Se om port allerede er i brug
- Sørg for alle afhængigheder installeret med `npm install`
**Browser extension loader ikke**:
- Bekræft manifest.json er korrekt formateret
- Tjek browserkonsol for fejl
- Følg browserspecifikke installationsinstruktioner
**Browser extension indlæses ikke**:
- Tjek at manifest.json er korrekt formatteret
- Se efter fejl i browserens konsol
- Følg browser-specifikke instruktioner til installation af extension
**Python chat projekt problemer**:
- Sikr OpenAI-pakken er installeret: `pip install openai`
- Bekræft GITHUB_TOKEN miljøvariabel er sat
- Tjek GitHub Models adgangstilladelser
**Problemer med Python chat projekt**:
- Sørg for OpenAI pakken er installeret: `pip install openai`
- Tjek at miljøvariablen GITHUB_TOKEN er sat
- Tjek adgangstilladelser til GitHub Models
**Docsify serverer ikke docs**:
**Docsify serverer ikke dokumentation**:
- Installer docsify-cli globalt: `npm install -g docsify-cli`
- Kør fra rodmappen i lageret
- Tjek at `docs/_sidebar.md` findes
- Kør fra depotets rodfolder
- Sørg for at `docs/_sidebar.md` findes
### Udviklingsmiljø tips
### Tips til udviklingsmiljø
- Brug VS Code med Live Server extension til HTML projekter
- Installer ESLint og Prettier extensions for ensartet formatering
- Brug browser DevTools til fejlfinding af JavaScript
- Til Vue projekter, installer Vue DevTools browser extension
- Brug browser DevTools til JavaScript-debugging
- For Vue projekter, installer Vue DevTools browser extension
### Ydelseshensyn
### Ydeevnehensyn
- Stort antal oversatte filer (50+ sprog) betyder at fulde kloner er store
- Brug shallow clone hvis kun arbejder med indhold: `git clone --depth 1`
- Udeluk 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)
- 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 med engelsk indhold
- Build-processer kan være langsomme ved første kørsel (npm install, Vite build)
## Sikkerhedshensyn
### Miljøvariabler
- API-nøgler må aldrig committes til lageret
- Brug `.env` filer (allerede i `.gitignore`)
- Dokumentér nødvendige miljøvariabler i projekt-READMEer
- API nøgler må aldrig committes til depotet
- Brug `.env` filer (er allerede i `.gitignore`)
- Dokumenter krævede miljøvariabler i projekternes README-filer
### Python Projekter
### Python projekter
- Brug virtuelle miljøer: `python -m venv venv`
- Hold afhængigheder opdaterede
@ -348,31 +348,31 @@ CO_OP_TRANSLATOR_METADATA:
### GitHub Models adgang
- Personal Access Tokens (PAT) kræves for GitHub Models
- Tokens skal gemmes som miljøvariabler
- Commit aldrig tokens eller legitimationsoplysninger
- Personlige Access Tokens (PAT) kræves til GitHub Models
- Tokens skal opbevares som miljøvariabler
- Aldrig commit tokens eller legitimationsoplysninger
## Yderligere noter
### Målgruppe
- Fuldstændige begyndere til webudvikling
- Studerende og selvrende
- Lærere, der bruger pensum i klasseværelser
- Indhold er designet til tilgængelighed og gradvis færdighedsopbygning
- Komplette begyndere i webudvikling
- Studerende og selvstuderende
- Lærere der bruger forløbet i klasserum
- Indholdet er designet til tilgængelighed og gradvis kompetenceopbygning
### Pædagogisk filosofi
### Uddannelsesfilosofi
- Projektbaseret læringstilgang
- Hyppige videnschecks (quizzer)
- Praktiske kodningsøvelser
- Virkelighedsnære anvendelsestilfælde
- Fokus på grundlæggende færdigheder før frameworks
- Eksempler på virkelige anvendelser
- Fokus på fundament før frameworks
### Lagervedligeholdelse
### Depotvedligeholdelse
- Aktivt fællesskab af elever og bidragsydere
- Regelmæssige opdateringer til afhængigheder og indhold
- Aktivt fællesskab af lærende og bidragsydere
- Regelmæssige opdateringer af afhængigheder og indhold
- Issues og diskussioner overvåges af vedligeholdere
- Oversættelsesopdateringer automatiseres via GitHub Actions
@ -380,29 +380,29 @@ CO_OP_TRANSLATOR_METADATA:
- [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) anbefalet til elever
- Yderligere kurser: Generativ AI, Data Science, ML, IoT pensum tilgængeligt
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) anbefalet til lærende
- Yderligere kurser: Generativ AI, Data Science, ML, IoT forløb tilgængelige
### Arbejde med specifikke projekter
For detaljerede instruktioner om individuelle projekter, se README-filer i:
For detaljerede instruktioner om individuelle projekter, se README-filerne i:
- `quiz-app/README.md` - Vue 3 quiz applikation
- `7-bank-project/README.md` - Banking applikation med autentifikation
- `5-browser-extension/README.md` - Browser extension udvikling
- `7-bank-project/README.md` - Banking applikation med autentificering
- `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
Selvom det ikke er et traditionelt monorepo, indeholder dette lager flere uafhængige projekter:
Selvom det ikke er et traditionelt monorepo, indeholder dette depot 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 lageret for den fulde kursusoplevelse
- Klon hele depotet for hele kursusoplevelsen
---
<!-- 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å 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 eventuelle misforståelser eller fejltolkninger, der 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 originale dokument på dets oprindelige sprog 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, der måtte opstå 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-04-06T18:16:16+00:00",
"translation_date": "2026-04-20T15:56:34+00:00",
"source_file": "AGENTS.md",
"language_code": "fi"
},

@ -1,28 +1,28 @@
# AGENTS.md
## Projektin yleiskuvaus
## Projektin yleiskatsaus
Tämä on opetuskokonaisuus, joka sisältää verkkokehityksen perusteiden opettamisen aloittelijoille. Opetussuunnitelma on kattava 12 viikon kurssi, jonka ovat kehittäneet Microsoft Cloud Advocates -tiimin jäsenet. Kurssi koostuu 24 käytännön oppitunnista, joissa käydään läpi JavaScriptiä, CSS:ää ja HTML:ää.
Tämä on opetussisältöjen arkisto, joka on tarkoitettu web-kehityksen perusteiden opettamiseen aloittelijoille. Oppimateriaali on kattava 12 viikon kurssi, jonka ovat kehittäneet Microsoft Cloud Advocates -tiimin jäsenet. Kurssi koostuu 24 käytännönlähtöisestä oppitunnista, jotka käsittelevät JavaScriptiä, CSS:ää ja HTML:ää.
### Keskeiset osat
- **Koulutussisältö**: 24 jäsenneltyä oppituntia, jotka on järjestetty projektipohjaisiin moduuleihin
- **Käytännön projektit**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor ja AI Chat Assistant
- **Interaktiiviset tietokilpailut**: 48 tietokilpailua, joissa jokaisessa on 3 kysymystä (ennakko-/jälkitestit)
- **Monikielinen tuki**: Automaattinen käännös yli 50 kielelle GitHub Actions -työkalun avulla
- **Teknologiat**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (AI-projekteihin)
- **Opetussisältö**: 24 jäsenneltyä oppituntia, jotka on järjestetty projektipohjaisiksi moduuleiksi
- **Käytännön projektit**: Terrarium, Typing Game, selainlaajennus, Space Game, Banking App, Code Editor ja AI Chat Assistant
- **Interaktiiviset tietovisat**: 48 tietovisaa, joissa on 3 kysymystä kukin (ennen ja jälkeen oppitunnin arvioinnit)
- **Monikielinen tuki**: Automaattiset käännökset yli 50 kielelle GitHub Actionsin avulla
- **Teknologiat**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (tekoälyprojekteissa)
### Arkkitehtuuri
- Opetussisältöarkisto oppituntipohjaisella rakenteella
- Jokainen oppituntikansio sisältää README-tiedoston, koodiesimerkit ja ratkaisut
- Erilliset projektit omissa hakemistoissaan (quiz-app, eri oppiprojektit)
- Käännösjärjestelmä GitHub Actions -työkalun (co-op-translator) avulla
- Dokumentaatio tarjotaan Docsify:n kautta ja on saatavilla PDF-muodossa
- Opetussisältöön perustuva arkisto oppituntirakenteella
- Jokaisessa oppitunnin kansiossa on README, koodiesimerkkejä ja ratkaisumalleja
- Itsenäiset projektit omissa hakemistoissaan (quiz-app, eri oppituntiprojektit)
- Käännösjärjestelmä käyttää GitHub Actionsia (co-op-translator)
- Dokumentaatio näytetään Docsifylla ja on saatavilla PDF-muodossa
## Asennuskomennot
Tätä arkistoa käytetään ensisijaisesti opetussisällön kuluttamiseen. Työskentelyä varten omien projektien kanssa:
Tätä arkistoa käytetään ensisijaisesti opetussisältöjen lukemiseen. Työskennellessäsi tiettyjen projektien parissa:
### Pääarkiston asennus
@ -41,17 +41,17 @@ npm run build # Rakenna tuotantoon
npm run lint # Suorita ESLint
```
### Pankkiprojektin API (Node.js + Express)
### Bank-projektin API (Node.js + Express)
```bash
cd 7-bank-project/api
npm install
npm start # Käynnistä API-palvelin
npm run lint # Suorita ESLint
npm run format # Muotoile Prettierillä
npm run format # Muotoile Prettierilla
```
### Selaimen laajennus -projektit
### Selainlaajennusprojektit
```bash
cd 5-browser-extension/solution
@ -59,7 +59,7 @@ npm install
# Noudata selaimen erityisiä laajennusten latausohjeita
```
### Avaruuspeli-projektit
### Space Game -projektit
```bash
cd 6-space-game/solution
@ -67,7 +67,7 @@ npm install
# Avaa index.html selaimessa tai käytä Live Serveriä
```
### Chat-projekti (Python-taustapalvelu)
### Chat-projekti (Python Backend)
```bash
cd 9-chat-project/solution/backend/python
@ -76,33 +76,33 @@ pip install openai
python api.py
```
## Kehitystyön työnkulku
## Kehityskäytännöt
### Sisällöntuottajille
1. **Tee fork** arkistosta omaan GitHub-tiliisi
1. **Forkkaa arkisto** omaan GitHub-tiliisi
2. **Kloonaa fork** paikallisesti
3. **Luo uusi haara** muutoksiasi varten
4. Tee muutoksia oppitunneissa tai koodiesimerkeissä
5. Testaa muutokset asianmukaisissa projektihakemistoissa
6. Lähetä pull request -pyyntöjä osallistumisohjeiden mukaisesti
3. **Luo uusi haara** muutoksillesi
4. Tee muutoksia oppimateriaalin sisältöön tai koodiesimerkkeihin
5. Testaa muutoksia liittyvissä projektihakemistoissa
6. Lähetä pull-pyyntöjä ohjeiden mukaisesti
### Oppijoille
1. Tee fork tai kloonaa arkisto
2. Siirry oppituntihakemistoihin järjestyksessä
1. Forkkaa tai kloonaa arkisto
2. Siirry oppituntien hakemistoihin peräjälkeen
3. Lue kunkin oppitunnin README-tiedostot
4. Tee ennakkotehtävät osoitteessa https://ff-quizzes.netlify.app/web/
5. Käy läpi koodiesimerkit oppituntikansioissa
6. Tee tehtävät ja haasteet
7. Suorita jälkitestit
4. Suorita ennen oppituntia tehtävät tietovisat osoitteessa https://ff-quizzes.netlify.app/web/
5. Kokeile koodiesimerkkejä oppituntikansioissa
6. Tee annettuja tehtäviä ja haasteita
7. Suorita oppitunnin jälkeiset tietovisat
### Kehitys livenä
### Live-kehitys
- **Dokumentaatio**: Suorita `docsify serve` juurikansiossa (portti 3000)
- **Quiz-sovellus**: Suorita `npm run dev` quiz-app-hakemistossa
- **Projektit**: Käytä VS Code Live Server -laajennusta HTML-projekteihin
- **API-projektit**: Suorita `npm start` niille varatuissa API-kansioissa
- **Dokumentaatio**: Aja `docsify serve` juurihakemistosta (portti 3000)
- **Quiz-sovellus**: Aja `npm run dev` quiz-app kansiossa
- **Projektit**: Käytä VS Code Live Server -laajennusta HTML-projekteissa
- **API-projektit**: Aja `npm start` vastaavissa API-kansioissa
## Testausohjeet
@ -110,11 +110,11 @@ python api.py
```bash
cd quiz-app
npm run lint # Tarkista koodityylin ongelmat
npm run lint # Tarkista koodityyliongelmat
npm run build # Varmista, että käännös onnistuu
```
### Bank API:n testaus
### Bank-API:n testaus
```bash
cd 7-bank-project/api
@ -124,29 +124,29 @@ node server.js # Varmista, että palvelin käynnistyy ilman virheitä
### Yleinen testauslähestymistapa
- Tämä on opetuskäyttöön tarkoitettu arkisto ilman kattavia automatisoituja testejä
- Manuaalitestaus painottuu:
- Koodiesimerkkien virheettömään suorittamiseen
- Tämä on opetussisältöarkisto, jossa ei ole kattavia automaattisia testejä
- Manuaalinen testaus keskittyy:
- Koodiesimerkkien toimivuuteen ilman virheitä
- Dokumentaation linkkien toimivuuteen
- Projektien onnistuneeseen käännökseen
- Esimerkkien noudattavan parhaita käytäntöjä
- Projektien kääntöjen onnistumiseen
- Esimerkkien noudattavan hyviä käytäntöjä
### Ennen lähettämistä tehtävät tarkistukset
### Ennen lähettämistä tarkistettavaa
- Suorita `npm run lint` kansioissa, joissa on package.json
- Varmista, että markdown-linkit ovat toimivia
- Aja `npm run lint` kaikissa package.json-hakemistoissa
- Tarkista markdown-linkkien toimivuus
- Testaa koodiesimerkit selaimessa tai Node.js:ssä
- Tarkista, että käännökset säilyttävät rakenteen
- Varmista, että käännökset säilyttävät oikean rakenteen
## Koodityyliohjeet
### JavaScript
- Käytä nykyaikaista ES6+-syntaksia
- Noudata projektien tarjoamia ESLint-asetuksia
- Käytä selkeitä muuttuja- ja funktioiden nimiä opetuksellisuuden vuoksi
- Käytä modernia ES6+ syntaksia
- Noudata ESLintin standardikonfiguraatioita projekteissa
- Käytä merkityksellisiä muuttujien ja funktioiden nimiä opetustarkoituksiin
- Lisää kommentteja, jotka selittävät käsitteitä oppijoille
- Muotoile Prettierillä, jos se on määritelty
- Muotoile koodi Prettierillä, kun se on asetettu
### HTML/CSS
@ -157,124 +157,126 @@ node server.js # Varmista, että palvelin käynnistyy ilman virheitä
### Python
- PEP 8 -tyyliohjeet
- Selkeät ja opetukselliset koodiesimerkit
- Tyyppivihjeet oppimisen tukena
- Noudata PEP 8 -tyyliohjeita
- Selkeät, opetukselliset koodiesimerkit
- Käytä tyyppivihjeitä, kun ne auttavat oppimista
### Markdown-dokumentaatio
- Selkeä otsikkorakenne
- Koodilohkot, joissa kielimääritys
- Linkit lisämateriaaleihin
- Kuvakaappaukset ja kuvat `images/`-hakemistoissa
- Vaihtoehtoinen teksti kuville saavutettavuuden vuoksi
- Selkeä otsikkohierarkia
- Koodilohkot kielellä merkattuina
- Linkit lisäresursseihin
- Kuvakaappaukset ja kuvat `images/` kansioissa
- Kuvien alt-tekstit saavutettavuutta varten
### Tiedostojen organisointi
### Tiedostojen järjestely
- Oppitunnit numeroitu peräkkäin (1-getting-started-lessons, 2-js-basics jne.)
- Jokaisessa projektissa on `solution/` ja usein `start/` tai `your-work/` -hakemistot
- Kuvia säilytetään oppituntikohtaisissa `images/`-kansioissa
- Käännökset kansiorakenteessa `translations/{language-code}/`
- Oppitunnit numeroitu järjestyksessä (1-getting-started-lessons, 2-js-basics jne.)
- Jokaisella projektilla on `solution/` ja usein myös `start/` tai `your-work/` kansiot
- Kuvat tallennettu oppituntikohtaisiin `images/` kansioihin
- Käännökset rakenteessa `translations/{language-code}/`
## Käännös- ja käyttöönotto
## Käännös- ja julkaisuohjeet
### Quiz-sovelluksen käyttöönotto (Azure Static Web Apps)
### Quiz-sovelluksen julkaisu (Azure Static Web Apps)
Quiz-sovellus on konfiguroitu Azure Static Web Apps -käyttöönottoa varten:
Quiz-sovellus on konfiguroitu julkaistavaksi Azure Static Web Apps -palveluun:
```bash
cd quiz-app
npm run build # Luo dist/ -kansion
# Ottaa käyttöön GitHub Actions -työnkulun päivityksessä mainiin
# Ottaa käyttöön GitHub Actions -työnkulun push-tapahtumassa main-haaraan
```
Azure Static Web Apps -asetukset:
Azure Static Web Apps -konfiguraatio:
- **Sovelluksen sijainti**: `/quiz-app`
- **Tulostehakemisto**: `dist`
- **Tulostuskansio**: `dist`
- **Työnkulku**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Dokumentaation PDF-generointi
### Dokumentaation PDF:n luonti
```bash
npm install # Asenna docsify-to-pdf
npm run convert # Luo PDF docs-sisällöstä
npm run convert # Luo PDF docsista
```
### Docsify-dokumentaatio
```bash
npm install -g docsify-cli # Asenna Docsify globaalisti
docsify serve # Tarjoa paikallisesti osoitteessa localhost:3000
docsify serve # Palvele localhost:3000:ssa
```
### Projektikohtaiset käännökset
### Projektikohtaiset buildit
Jokaisella projektihakemistolla voi olla oma rakennusprosessi:
- Vue-projekteilla: `npm run build` tuottaa tuotantopaketteja
- Staattisissa projekteissa ei ole erillistä rakennusvaihetta, tiedostot palvellaan suoraan
Jokaisella projekti-hakemistolla voi olla oma build-prosessinsa:
- Vue-projektit: `npm run build` luo tuotantokokoelmat
- Staattiset projektit: Ei build-vaihetta, tiedostot palvelimelle sellaisenaan
## Pull Request -ohjeet
## Pull request -ohjeet
### Otsikon muotoilu
### Otsikkomuoto
Käytä selkeitä ja kuvaavia otsikoita, jotka kertovat muutoksen alueen:
Käytä selkeitä ja kuvaavia otsikoita, jotka kertovat muutoksen kohteen:
- `[Quiz-app] Lisää uusi tietovisa oppitunnille X`
- `[Lesson-3] Korjaa kirjoitusvirhe terrarium-projektissa`
- `[Translation] Lisää espanjankielinen käännös oppitunnille 5`
- `[Docs] Päivitä asennusohjeet`
### Vaatimukset ennen lähettämistä
### Pakolliset tarkistukset
Ennen PR:n lähettämistä:
1. **Koodin laatu**:
- Suorita `npm run lint` vaikutuksen alaisissa projektin kansioissa
- Korjaa kaikki mahdolliset lint-virheet ja varoitukset
- Aja `npm run lint` asianomaisissa projektihakemistoissa
- Korjaa kaikki lint-virheet ja varoitukset
2. **Rakennuksen varmistus**:
- Suorita tarvittaessa `npm run build`
- Varmista, ettei rakennuksessa ole virheitä
2. **Buildin toimivuus**:
- Aja `npm run build`, jos sovellettavissa
- Varmista, ettei build-virheitä ilmene
3. **Linkkien tarkastus**:
- Testaa kaikki markdown-linkit toimiviksi
- Varmista kuvaviittausten toimivuus
3. **Linkkien toimivuus**:
- Testaa kaikki markdown-linkit
- Varmista kuvaviitteiden toimivuus
4. **Sisällön tarkastus**:
- Tarkista kirjoitus- ja kielioppivirheet
- Varmista, että koodiesimerkit ovat oikein ja opetuksellisia
- Tarkista käännösten tarkkuus ja alkuperäisen säilyminen
4. **Sisällön tarkistus**:
- Tarkista oikeinkirjoitus ja kielioppi
- Varmista koodiesimerkkien oikeellisuus ja opetuksellisuus
- Tarkista, että käännökset säilyttävät alkuperäisen merkityksen
### Osallistumisen vaatimukset
### Osallistumisvaatimukset
- Hyväksy Microsoft CLA (automaattinen tarkistus ensimmäisessä PR:ssä)
- Noudata [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) -käyttäytymisohjetta
- Lue yksityiskohtaiset ohjeet [CONTRIBUTING.md](./CONTRIBUTING.md)-tiedostosta
- Mainitse PR-kuvauksessa asiaankuuluvat issue-numerot
- Hyväksy Microsoft CLA (automaattinen tarkistus ensimmäisen PR:n yhteydessä)
- Noudata [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) -käyttäytymissääntöjä
- Katso tarkemmat ohjeet [CONTRIBUTING.md](./CONTRIBUTING.md) -tiedostosta
- Viittaa tarvittaessa issue-numeroihin PR-kuvauksessa
### Tarkistusprosessi
### Arviointiprosessi
- PR:t tarkistetaan ylläpitäjien ja yhteisön toimesta
- Opetuksellinen selkeys on etusijalla
- Koodiesimerkkien tulee noudattaa hyviä käytäntöjä
- Käännökset tarkistetaan oikeellisuuden ja kulttuurisen sopivuuden osalta
- PR:t katselmoidaan ylläpitäjien ja yhteisön toimesta
- Painotus opetuksellisessa selkeydessä
- Koodiesimerkkien tulee noudattaa ajantasaisia hyviä käytäntöjä
- Käännökset tarkistetaan paikkansapitävyyden ja kulttuurisen sopivuuden osalta
## Käännösjärjestelmä
### Automaattinen käännös
- Käyttää GitHub Actionsia co-op-translator-työnkululla
- Käyttää GitHub Actionsia ja co-op-translator -työnkulkua
- Kääntää automaattisesti yli 50 kielelle
- Lähtötiedostot ovat päähakemistoissa
- Käännetyt tiedostot sijaitsevat `translations/{language-code}/`-kansioissa
- Lähdetiedostot ovat pääkansioissa
- Käännetyt tiedostot löytyvät `translations/{language-code}/` -hakemistoista
### Käsin tehtävien parannusten lisääminen
### Manuaalisten parannusten lisääminen
1. Etsi tiedosto kansiosta `translations/{language-code}/`
2. Tee parannuksia rakenteen säilyttäen
1. Etsi tiedosto `translations/{language-code}/` -hakemistosta
2. Tee parannuksia säilyttäen rakenne
3. Varmista, että koodiesimerkit toimivat edelleen
4. Testaa lokalisoitu tietovisasisältö
4. Testaa mahdolliset paikallistetut tietovisa-aiheet
### Käännösmetadata
Käännetyt tiedostot sisältävät metatietopäätettä:
Käännetyissä tiedostoissa on mukana metadataotsikko:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -294,113 +296,113 @@ CO_OP_TRANSLATOR_METADATA:
**Quiz-sovellus ei käynnisty**:
- Tarkista Node.js:n versio (v14+ suositeltu)
- Poista `node_modules` ja `package-lock.json`, suorita `npm install` uudelleen
- Tarkista, ettei portti ole varattu (Viten oletusportti 5173)
- Tarkista, ettei portti ole käytössä (oletus: Vite käyttää porttia 5173)
**API-palvelin ei käynnisty**:
- Varmista, että Node.js:n versio on vähintään 10
- Tarkista portin varaus
- Varmista, että Node.js-versio täyttää vähimmäisvaatimuksen (node >=10)
- Tarkista portin vapautuminen
- Varmista, että kaikki riippuvuudet on asennettu komennolla `npm install`
**Selaimen laajennus ei lataudu**:
**Selainlaajennus ei lataudu**:
- Tarkista, että manifest.json on oikein muotoiltu
- Tarkista selainkonsoli virheilmoituksille
- Noudata selaimen laajennuksen asennusohjeita
- Katso selaimen konsolista virheilmoituksia
- Noudata selaimen erityisohjeita laajennuksen asennukseen
**Python-chat-projektin ongelmat**:
**Python chat -projektin ongelmat**:
- Varmista, että OpenAI-paketti on asennettu: `pip install openai`
- Tarkista GITHUB_TOKEN-ympäristömuuttuja
- Varmista GitHub-mallien käyttöoikeudet
- Tarkista, että GITHUB_TOKEN-ympäristömuuttuja on määritelty
- Tarkista GitHub Models -käyttöoikeudet
**Docsify ei tarjoa dokumentaatiota**:
**Docsify ei tarjoile dokumentaatiota**:
- Asenna docsify-cli globaalisti: `npm install -g docsify-cli`
- Aja komento arkiston juurihakemistosta
- Varmista, että `docs/_sidebar.md` on olemassa
### Kehitysympäristövinkkejä
### Kehitysympäristövinkit
- Käytä VS Codea Live Server -laajennuksella HTML-projekteissa
- Asenna ESLint- ja Prettier-laajennukset yhtenäiseen muotoiluun
- Hyödynnä selaimen kehittäjätyökaluja JavaScriptin virheenkorjaukseen
- Vue-projekteissa asenna Vue DevTools -selaimen laajennus
- Käytä VS Codea Live Server -laajennuksen kanssa HTML-projekteissa
- Asenna ESLint ja Prettier -laajennukset yhdenmukaisen muotoilun varmistamiseksi
- Käytä selaimen DevTools-työkaluja JavaScriptin debuggaamiseen
- Vue-projekteissa asenna Vue DevTools selaimen laajennus
### Suorituskykysiirtymät
### Suorituskyky
- Suuri määrä käännettyjä tiedostoja (yli 50 kieltä) tekee kloonauksesta raskaan
- Käytä kevyttä kloonausta, jos työskentelet vain sisällön parissa: `git clone --depth 1`
- Sulje käännökset hausta, kun työskentelet englanninkielisen sisällön parissa
- Rakennusprosessit voivat olla hitaita ensimmäisellä suorituskerroilla (npm install, Vite build)
- Valtava määrä käännettyjä tiedostoja (yli 50 kieltä) tekee kokonaisklooneista suuria
- Käytä pinnallista kloonausta, jos työskentelet vain sisällön parissa: `git clone --depth 1`
- Poista käännökset hausta, kun työskentelet englanninkielisen sisällön kanssa
- Build-prosessit voivat olla hitaita ensimmäisellä ajokerralla (npm install, Vite build)
## Turvallisuusseikat
## Turvakäytännöt
### Ympäristömuuttujat
- API-avaimia ei saa koskaan tallentaa arkistoon
- Käytä `.env`-tiedostoja (joita ei ole versioitu)
- Dokumentoi vaaditut ympäristömuuttujat projektien READMEissa
- API-avaimia ei koskaan saa tallentaa arkistoon
- Käytä `.env`-tiedostoja (sisältyvät jo `.gitignore`-tiedostoon)
- Dokumentoi vaaditut ympäristömuuttujat projektien READMEssa
### Python-projektit
- Käytä virtuaaliympäristöjä: `python -m venv venv`
- Pidä riippuvuudet ajan tasalla
- GitHub-tokenien käyttöoikeudet tulee olla mahdollisimman rajatut
- GitHub-tokenit tulee rajoittaa minimitason käyttöoikeuksiin
### GitHub-mallien käyttöoikeus
### GitHub Models -käyttö
- Personaaliset käyttöoikeustokenit (PAT) vaaditaan GitHub-malleihin
- Tokenit tulee säilyttää ympäristömuuttujina
- Älä koskaan tallenna tokeneita tai tunnistetietoja arkistoon
- Tarvitaan henkilökohtaiset käyttöoikeustokenit (PAT)
- Tokenit tulee tallentaa ympäristömuuttujiksi
- Älä koskaan tallenna tokeneita tai tunnuksia arkistoon
## Lisätiedot
## Lisätietoja
### Kohdeyleisö
- Täysin aloittelijat verkkokehityksessä
- Täysin aloittelijat web-kehityksessä
- Opiskelijat ja itseopiskelijat
- Opettajat, jotka käyttävät opetussuunnitelmaa luokkahuoneissa
- Sisältö on suunniteltu saavutettavaksi ja asteittaisen taitojen kehittämiseen
- Sisältö on suunniteltu saavutettavaksi ja asteittaisen taitojen kehittämisen mahdollistavaksi
### Opetuksellinen filosofia
### Opetussuunnitelman filosofia
- Projektipohjainen oppiminen
- Usein toistuvat tietovisat tiedon tarkistamiseen
- Projektipohjainen oppimismenetelmä
- Tiheät tietovisat oppimisen tarkistamiseen
- Käytännön ohjelmointiharjoitukset
- Todelliset sovellusesimerkit
- Perusteiden hallinta ennen kehysten käyttöä
- Käytännön esimerkit todellisesta maailmasta
- Perusteiden korostaminen ennen kehysten opettelua
### Arkiston ylläpito
- Aktiivinen oppijoiden ja osallistujien yhteisö
- Riittävä päivitystiheys riippuvuuksiin ja sisältöön
- Issue-ja keskusteluseuranta ylläpitäjien toimesta
- Käännösten päivitykset automatisoitu GitHub Actionsin kautta
- Aktiivinen oppijoiden ja avustajien yhteisö
- Riittävä päivitystahti riippuvuuksille ja sisällölle
- Ylläpitäjät seuraavat ongelmia ja keskusteluja
- Käännösten päivitys on automatisoitu GitHub Actionsilla
### Liresurssit
### Liittyvät resurssit
- [Microsoft Learn -moduulit](https://docs.microsoft.com/learn/)
- [Student Hub -resurssit](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) suositeltu oppijoille
- Lisäkursseja: Generatiivinen AI, Data Science, ML, IoT opetussuunnitelmat saatavilla
- [Student Hubin materiaalit](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) suositellaan oppijoille
- Lisäkursseja: Generative AI, Data Science, ML, IoT -opetussuunnitelmat ovat saatavilla
### Työskentely yksittäisten projektien kanssa
### Työskentely tietyissä projekteissa
Yksittäisiä projekteja koskevat ohjeet löytyvät README-tiedostoista:
- `quiz-app/README.md` Vue 3 quiz-sovellus
- `7-bank-project/README.md` Pankkisovellus autentikoinnilla
- `5-browser-extension/README.md` Selaimen laajennuksen kehitys
- `6-space-game/README.md` Canvas-pohjainen peli
- `9-chat-project/README.md` AI-chat avustajajärjestelmä
Yksityiskohtaiset ohjeet eri projekteihin löytyvät niihin liittyvistä README-tiedostoista:
- `quiz-app/README.md` - Vue 3 tietovisasovellus
- `7-bank-project/README.md` - Pankkisovellus autentikoinnilla
- `5-browser-extension/README.md` - Selainlaajennuksen kehitys
- `6-space-game/README.md` - Canvas-pohjainen peli
- `9-chat-project/README.md` - AI chat assistant -projekti
### Monorepo-rakenne
Vaikka tämä ei ole perinteinen monorepo, arkistossa on useita itsenäisiä projekteja:
Vaikka tämä ei ole perinteinen monorepo, arkisto sisältää useita itsenäisiä projekteja:
- Jokainen oppitunti on itsenäinen kokonaisuus
- Projektit eivät jaa riippuvuuksia
- Työskentele projekteissa erikseen toinen toisiinsa vaikuttamatta
- Kloonaa koko arkisto saadaksesi täyden opetuskokemuksen
- Projektit eivät jaa riippuvuuksia keskenään
- Työskentele yksittäisten projektien parissa vaikuttamatta muihin
- Kloonaa koko repositorio saadaksesi täyden opetussuunnitelman kokemuksen
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Vastuuvapauslauseke**:
Tämä asiakirja on käännetty käyttäen tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, ole hyvä ja huomioi, että automaattikäännökset saattavat sisältää virheitä tai epätarkkuuksia. Alkuperäinen asiakirja alkuperäiskielellä tulee pitää auktoriteettisena lähteenä. Tärkeiden tietojen osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä aiheutuvista väärinymmärryksistä tai tulkinnoista.
Tämä asiakirja on käännetty käyttämällä tekoälypohjaista käännöspalvelua [Co-op Translator](https://github.com/Azure/co-op-translator). Vaikka pyrimme tarkkuuteen, ota huomioon, että automaattikäännöksissä saattaa esiintyä virheitä tai epätarkkuuksia. Alkuperäistä asiakirjaa sen alkuperäisellä kielellä pidetään auktoritatiivisena lähteenä. Tärkeiden tietojen osalta suositellaan ammattimaista ihmiskäännöstä. Emme ole vastuussa tämän käännöksen käytöstä aiheutuvista väärinymmärryksistä tai virhetulkinnoista.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-04-06T18:15:06+00:00",
"translation_date": "2026-04-20T15:55:04+00:00",
"source_file": "AGENTS.md",
"language_code": "no"
},

@ -2,36 +2,36 @@
## Prosjektoversikt
Dette er et utdanningspensum-repositorium for å lære grunnleggende webutvikling til nybegynnere. Pensumet er et omfattende 12-ukers kurs utviklet av Microsoft Cloud Advocates, som inneholder 24 praktiske leksjoner om JavaScript, CSS og HTML.
Dette er et utdanningspensum-repositorium for å lære grunnleggende webutvikling til nybegynnere. Pensumet er et omfattende 12-ukers kurs utviklet av Microsoft Cloud Advocates, med 24 praktiske leksjoner som dekker JavaScript, CSS og HTML.
### Nøkkelkomponenter
- **Utdanningsinnhold**: 24 strukturerte leksjoner organisert i prosjektbaserte moduler
- **Praktiske prosjekter**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor, og AI Chat Assistant
- **Interaktive quizer**: 48 quizer med 3 spørsmål hver (før/etter leksjon evalueringer)
- **Flerspråklig støtte**: Automatiske oversettelser for 50+ språk via GitHub Actions
- **Praktiske Prosjekter**: Terrarium, Typingspill, Nettleserutvidelse, Romspill, Bankapp, Kodeditor og AI Chat-assistent
- **Interaktive Quizzer**: 48 quizzer med 3 spørsmål hver (før- og etter-leksjon vurderinger)
- **Flerspråklig Støtte**: Automatiske oversettelser til 50+ språk via GitHub Actions
- **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (for AI-prosjekter)
### Arkitektur
- Utdanningsrepositorium med leksjonsbasert struktur
- Utdanningsrepo med leksjonsbasert struktur
- Hver leksjonsmappe inneholder README, kodeeksempler og løsninger
- Selvstendige prosjekter i egne kataloger (quiz-app, ulike leksjonsprosjekter)
- Oversettelsessystem ved bruk av GitHub Actions (co-op-translator)
- Dokumentasjon servert via Docsify og tilgjengelig som PDF
- Selvstendige prosjekter i separate kataloger (quiz-app, ulike leksjonsprosjekter)
- Oversettelsessystem med GitHub Actions (co-op-translator)
- Dokumentasjon levert via Docsify og tilgjengelig som PDF
## Oppsett-kommandoer
## Oppsettkommandoer
Dette repositoriet er først og fremst for forbruk av utdanningsinnhold. For å jobbe med spesifikke prosjekter:
Dette repositoriet er hovedsakelig for konsum av utdanningsinnhold. For arbeid med spesifikke prosjekter:
### Hovedrepositorioppsett
### Hovedrepo-setup
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Quiz App Oppsett (Vue 3 + Vite)
### Quiz App Setup (Vue 3 + Vite)
```bash
cd quiz-app
@ -41,7 +41,7 @@ npm run build # Bygg for produksjon
npm run lint # Kjør ESLint
```
### Bankprosjekt API (Node.js + Express)
### Bank Prosjekt API (Node.js + Express)
```bash
cd 7-bank-project/api
@ -59,94 +59,94 @@ npm install
# Følg nettleserspesifikke instruksjoner for lasting av utvidelser
```
### Space Game Prosjekter
### Romspillprosjekter
```bash
cd 6-space-game/solution
npm install
# Åpne index.html i nettleseren eller bruk Live Server
# Åpne index.html i nettleser eller bruk Live Server
```
### Chatprosjekt (Python backend)
### Chatprosjekt (Python Backend)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Sett GITHUB_TOKEN miljøvariabel
# Sett GITHUB_TOKEN-miljøvariabelen
python api.py
```
## Utviklingsarbeidsflyt
### For innholdsbidragsytere
### For Innholdsbidragsytere
1. **Fork repositoriet** til din GitHub-konto
2. **Klone din fork** lokalt
3. **Lag en ny gren** for endringene dine
2. **Klon din fork** lokalt
3. **Opprett en ny gren** for dine endringer
4. Gjør endringer i leksjonsinnhold eller kodeeksempler
5. Test eventuelle kodeendringer i relevante prosjektmapper
6. Send pull-forespørsler etter retningslinjer for bidrag
6. Send inn pull requests i samsvar med bidragsretningslinjer
### For lærende
### For Lærende
1. Fork eller klon repositoriet
2. Naviger gjennom leksjonsmapper i rekkefølge
3. Les README-filene for hver leksjon
4. Fullfør for-klasse quizer på https://ff-quizzes.netlify.app/web/
5. Jobb gjennom kodeeksempler i leksjonsmapper
6. Utfør oppgaver og utfordringer
7. Ta post-klasse quizer
2. Naviger gjennom leksjonskatalogene sekvensielt
3. Les README-filer for hver leksjon
4. Fullfør før-leksjonsquizzer på https://ff-quizzes.netlify.app/web/
5. Arbeid gjennom kodeeksempler i leksjonsmapper
6. Fullfør oppgaver og utfordringer
7. Ta etter-leksjonsquizzer
### Live utvikling
- **Dokumentasjon**: Kjør `docsify serve` i rot (port 3000)
- **Quiz App**: Kjør `npm run dev` i quiz-app katalog
- **Prosjekter**: Bruk VS Code Live Server-utvidelse for HTML-prosjekter
- **API-prosjekter**: Kjør `npm start` i respektive API-kataloger
- **Dokumentasjon**: Kjør `docsify serve` i rotkatalog (port 3000)
- **Quiz App**: Kjør `npm run dev` i quiz-app katalogen
- **Prosjekter**: Bruk VS Code Live Server extension for HTML-prosjekter
- **API Prosjekter**: Kjør `npm start` i respektive API-kataloger
## Testinstruksjoner
### Quiz App-testing
### Quiz App Testing
```bash
cd quiz-app
npm run lint # Sjekk etter kode stil problemer
npm run build # Verifiser at bygging lykkes
npm run lint # Sjekk for problemer med kodestil
npm run build # Verifiser at byggingen lykkes
```
### Bank API-testing
### Bank API Testing
```bash
cd 7-bank-project/api
npm run lint # Sjekk for kode stil problemer
node server.js # Verifiser at serveren starter uten feil
npm run lint # Sjekk for problemer med kodestil
node server.js # Bekreft at serveren starter uten feil
```
### Generell testtilnærming
### Generell Testtilnærming
- Dette er et utdanningsrepositorium uten omfattende automatiske tester
- Dette er et utdanningsrepo uten omfattende automatiske tester
- Manuell testing fokuserer på:
- Kodeeksempler kjører uten feil
- Lenker i dokumentasjon fungerer korrekt
- Prosjektbygget fullføres uten feil
- Prosjektbygg fullføres suksessfullt
- Eksempler følger beste praksis
### Pre-submission sjekker
### Forhåndssjekker før innsending
- Kjør `npm run lint` i kataloger med package.json
- Verifiser at markdown-lenker er gyldige
- Test kodeeksempler i nettleser eller Node.js
- Kontroller at oversettelser opprettholder korrekt struktur
- Sjekk at oversettelser beholder riktig struktur
## Kode-stil retningslinjer
## Kode-stilretningslinjer
### JavaScript
- Bruk moderne ES6+ syntaks
- Følg standard ESLint-konfigurasjoner gitt i prosjekter
- Følg standard ESLint-konfigurasjoner gitt i prosjektene
- Bruk meningsfulle variabel- og funksjonsnavn for pedagogisk klarhet
- Legg til kommentarer som forklarer konsepter for lærende
- Formater med Prettier der det er konfigurert
- Formater med Prettier der konfigurert
### HTML/CSS
@ -157,126 +157,126 @@ node server.js # Verifiser at serveren starter uten feil
### Python
- Følg PEP 8 stilretningslinjer
- PEP 8 stilretningslinjer
- Klare, pedagogiske kodeeksempler
- Typehint der det er hjelpsomt for læring
- Typehint der nyttig for læring
### Markdown-dokumentasjon
### Markdown Dokumentasjon
- Klar overskriftshierarki
- Klar overskriftsstruktur
- Kodeblokker med språkspesifikasjon
- Lenker til tilleggsmateriale
- Skjermbilder og bilder i `images/` mapper
- Skjermbilder og bilder i `images/` kataloger
- Alt-tekst for bilder for tilgjengelighet
### Filorganisering
- Leksjoner nummerert sekvensielt (1-getting-started-lessons, 2-js-basics, etc.)
- Leksjoner nummerert sekvensielt (1-getting-started-lessons, 2-js-basics, osv.)
- Hvert prosjekt har `solution/` og ofte `start/` eller `your-work/` kataloger
- Bilder lagres i leksjons-spesifikke `images/` mapper
- Bilder lagres i leksjonsspesifikke `images/` mapper
- Oversettelser i `translations/{language-code}/` struktur
## Bygging og distribusjon
## Bygging og Distribusjon
### Quiz App distribusjon (Azure Static Web Apps)
quiz-app er konfigurert for distribusjon til Azure Static Web Apps:
quiz-app er konfigurert for Azure Static Web Apps-distribusjon:
```bash
cd quiz-app
npm run build # Lager dist/-mappen
npm run build # Oppretter dist/-mappen
# Distribuerer via GitHub Actions-arbeidsflyt ved push til main
```
Azure Static Web Apps konfigurasjon:
Azure Static Web Apps-konfigurasjon:
- **App-lokasjon**: `/quiz-app`
- **Output-lokasjon**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Generering av PDF for dokumentasjon
### Dokumentasjons PDF-generering
```bash
npm install # Installer docsify-to-pdf
npm run convert # Generer PDF fra docs
```
### Docsify dokumentasjon
### Docsify Dokumentasjon
```bash
npm install -g docsify-cli # Installer Docsify globalt
docsify serve # Server på localhost:3000
```
### Prosjektspesifikke builds
### Prosjektspesifikke bygg
Hver prosjektmappe kan ha egen byggprosess:
- Vue-prosjekter: `npm run build` lager produksjonsbundler
- Statisk prosjekter: Ingen byggeprosess, server filer direkte
- Vue-prosjekter: `npm run build` lager produksjonspakker
- Statisk prosjekter: Ingen byggesteg, tjen filer direkte
## Retningslinjer for pull requests
## Retningslinjer for Pull Requests
### Tittel-format
### Tittelformat
Bruk klare og beskrivende titler som indikerer endringsområde:
Bruk klare, beskrivende titler som angir endringsområdet:
- `[Quiz-app] Legg til ny quiz for leksjon X`
- `[Lesson-3] Rett skrivefeil i terrarium prosjekt`
- `[Lesson-3] Rett skrivefeil i terrarium-prosjektet`
- `[Translation] Legg til spansk oversettelse for leksjon 5`
- `[Docs] Oppdater oppsettsinstruksjoner`
- `[Docs] Oppdater oppsettinstruksjoner`
### Obligatoriske sjekker
### Påkrevde Sjekker
Før innsending av PR:
1. **Kodekvalitet**:
- Kjør `npm run lint` i berørte prosjektmapper
- Fiks alle linting-feil og advarsler
- Rett alle lintfeil og advarsler
2. **Byggverifikasjon**:
- Kjør `npm run build` hvis aktuelt
- Sørg for at det ikke er byggefeil
2. **Byggverifisering**:
- Kjør `npm run build` om aktuelt
- Sørg for ingen byggefeil
3. **Lenkevalidering**:
- Test alle markdown-lenker
- Verifiser at bilder refereres korrekt
- Verifiser bildehenvisninger fungerer
4. **Innholds gjennomgang**:
4. **Innholdsrevisjon**:
- Korrekturles for rettskrivning og grammatikk
- Sørg for at kodeeksempler er korrekte og pedagogiske
- Bekreft at oversettelser bevarer opprinnelig betydning
- Kontroller at oversettelser beholder opprinnelig mening
### Bidragskrav
- Godta Microsoft CLA (automatisk sjekk ved første PR)
- Aksepter Microsoft CLA (automatisk sjekk ved første PR)
- Følg [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Se [CONTRIBUTING.md](./CONTRIBUTING.md) for detaljerte retningslinjer
- Referer issues i PR-beskrivelse hvis aktuelt
- Referer til issues i PR-beskrivelse om aktuelt
### Gjennomgangsprosess
- PR-er gjennomgås av vedlikeholdere og community
- Pedagogisk klarhet prioriteres
- Kodeeksempler skal følge gjeldende beste praksis
- Oversettelser vurderes for nøyaktighet og kulturell hensyn
- Oversettelser vurderes for nøyaktighet og kulturell hensiktsmessighet
## Oversettelsessystem
### Automatisert oversettelse
### Automatisk Oversettelse
- Bruker GitHub Actions med co-op-translator workflow
- Oversetter til 50+ språk automatisk
- Kildefiler i hovedmapper
- Oversatte filer i `translations/{language-code}/` mapper
- Kildefiler i hovedkataloger
- Oversatte filer i `translations/{language-code}/` kataloger
### Legge til manuelle oversettelsesforbedringer
### Legge til Manuelle Oversettelsesforbedringer
1. Finn fil i `translations/{language-code}/`
2. Gjør forbedringer uten å endre struktur
3. Sørg for at kodeeksempler fungerer fortsatt
4. Test eventuell lokalisert quiz-innhold
2. Gjør forbedringer mens du bevarer struktur
3. Sørg for at kodeeksempler fortsatt fungerer
4. Test eventuelt lokalt quiz-innhold
### Oversettelsesmetadata
Oversatte filer inkluderer metadata-overskrift:
Oversatte filer inkluderer metadataheader:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,120 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Feilsøking og problemløsning
## Feilsøking og Problemløsning
### Vanlige problemer
### Vanlige Problemer
**Quiz app starter ikke**:
**Quiz-app starter ikke**:
- Sjekk Node.js-versjon (v14+ anbefalt)
- Slett `node_modules` og `package-lock.json`, kjør `npm install` på nytt
- Sjekk for portkonflikter (standard: Vite bruker port 5173)
**API-server starter ikke**:
- Verifiser Node.js-versjon minimum (node >=10)
- Bekreft Node.js-versjon møter minimumskrav (node >=10)
- Sjekk om port allerede er i bruk
- Sørg for at alle avhengigheter er installert med `npm install`
**Nettleserutvidelse lastes ikke**:
- Verifiser at manifest.json er korrekt formatert
- Sjekk nettleserkonsoll for feil
- Følg nettleserspesifikke utvidelsesinstallasjonsinstruksjoner
- Verifiser at manifest.json er riktig formatert
- Sjekk nettleserkonsollen for feil
- Følg nettleserspesifikke installasjonsinstrukser for utvidelser
**Python chatprosjekt-problemer**:
**Python chat-prosjekt problemer**:
- Sørg for at OpenAI-pakken er installert: `pip install openai`
- Verifiser at GITHUB_TOKEN miljøvariabel er satt
- Sjekk Github modeller-tilgangstillatelser
- Bekreft at GITHUB_TOKEN miljøvariabel er satt
- Sjekk GitHub Models adgangstillatelser
**Docsify serverer ikke dokumenter**:
**Docsify server ikke dokumentasjon**:
- Installer docsify-cli globalt: `npm install -g docsify-cli`
- Kjør fra repositoriets rotkatalog
- Kjør fra repos rotkatalog
- Sjekk at `docs/_sidebar.md` eksisterer
### Tips for utviklingsmiljø
### Tips for Utviklingsmiljø
- Bruk VS Code med Live Server-utvidelse for HTML-prosjekter
- Installer ESLint og Prettier-utvidelser for konsistent formatering
- Bruk VS Code med Live Server extension for HTML-prosjekter
- Installer ESLint og Prettier extensions for konsistent formatering
- Bruk nettleserens DevTools for JavaScript-feilsøking
- For Vue-prosjekter, installer Vue DevTools nettleserutvidelse
- For Vue-prosjekter, installer Vue DevTools nettleser-utvidelse
### Ytelseshensyn
### Ytelsesbetraktninger
- Stort antall oversatte filer (50+ språk) gjør full cloning stor
- Bruk shallow clone hvis du bare jobber med innhold: `git clone --depth 1`
- Ekskluder oversettelser fra søk når du jobber med engelsk innhold
- Byggeprosesser kan være trege første gang (npm install, Vite build)
- Mange oversatte filer (50+ språk) gjør full kloning stor
- Bruk shallow clone hvis du kun jobber med innhold: `git clone --depth 1`
- Ekskluder oversettelser i søk når du jobber med engelsk innhold
- Byggeprosesser kan være treg ved første kjøring (npm install, Vite build)
## Sikkerhetshensyn
## Sikkerhetsbetraktninger
### Miljøvariabler
- API-nøkler skal aldri legges inn i repositoriet
- API-nøkler må aldri legges i repositoriet
- Bruk `.env` filer (allerede i `.gitignore`)
- Dokumenter nødvendige miljøvariabler i prosjekt READMEs
- Dokumenter nødvendige miljøvariabler i prosjekt-READMEer
### Python-prosjekter
### Python Prosjekter
- Bruk virtuelle miljøer: `python -m venv venv`
- Hold avhengigheter oppdatert
- GitHub-tokener skal ha minimale nødvendige tillatelser
- GitHub-tokens bør ha minimale nødvendige rettigheter
### GitHub modeller tilgang
### GitHub Models-adgang
- Personlige tilgangstokener (PAT) kreves for GitHub modeller
- Token skal lagres som miljøvariabler
- Aldri legg inn tokens eller legitimasjon i koden
- Personlige tilgangstokener (PAT) kreves for GitHub Models
- Tokens skal lagres som miljøvariabler
- Aldri legg tokens eller credentials i repositoriet
## Tilleggsnotater
### Målgruppe
- Fullstendige nybegynnere i webutvikling
- Helt komplette nybegynnere til webutvikling
- Studenter og selvstudenter
- Lærere som bruker pensum i undervisning
- Innhold er designet for tilgjengelighet og gradvis ferdighetsbygging
- Lærere som bruker pensum i klasserom
- Innhold designet for tilgjengelighet og gradvis ferdighetsbygging
### Utdanningsfilosofi
### Pedagogisk Filosofi
- Prosjektbasert læringsmetode
- Hyppige kunnskapssjekker (quizer)
- Praktiske kodeøvelser
- Virkelige anvendelseseksempler
- Fokus på grunnleggende før rammeverk
- Hyppige kunnskapssjekker (quizzer)
- Praktiske kodingøvelser
- Virkelighetsnære eksempler
- Fokus på grunnprinsipper før rammeverk
### Repositorie-vedlikehold
### Repositorieveiledning
- Aktivt community av lærende og bidragsytere
- Aktiv community av lærende og bidragsytere
- Regelmessige oppdateringer av avhengigheter og innhold
- Issues og diskusjoner overvåkes av vedlikeholdere
- Oversettelsesoppdateringer automatisert via GitHub Actions
### Relaterte ressurser
### Relaterte Ressurser
- [Microsoft Learn moduler](https://docs.microsoft.com/learn/)
- [Student Hub ressurser](https://docs.microsoft.com/learn/student-hub/)
- [Student Hub-ressurser](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) anbefalt for lærende
- Flere kurs: Generativ AI, Data Science, ML, IoT pensum tilgjengelig
- Flere kurs: Generative AI, Data Science, ML, IoT pensum tilgjengelig
### Arbeide med spesifikke prosjekter
### Arbeid med Spesifikke Prosjekter
For detaljerte instruksjoner om individuelle prosjekter, se README-filene i:
For detaljerte instrukser om enkeltprosjekter, se README-filene i:
- `quiz-app/README.md` - Vue 3 quiz-applikasjon
- `7-bank-project/README.md` - Bankapplikasjon med autentisering
- `5-browser-extension/README.md` - Nettleserutvidelsesutvikling
- `6-space-game/README.md` - Canvas-basert spillutvikling
- `9-chat-project/README.md` - AI chat assistent prosjekt
- `9-chat-project/README.md` - AI chat-assistent prosjekt
### Monorepo-struktur
Selv om dette ikke er et tradisjonelt monorepo, inneholder repositoriet flere uavhengige prosjekter:
Selv om det ikke er et tradisjonelt monorepo, inneholder dette repositoriet flere uavhengige prosjekter:
- Hver leksjon er selvstendig
- Prosjekter deler ikke avhengigheter
- Jobb med individuelle prosjekter uten å påvirke andre
- Arbeid med individuelle prosjekter uten å påvirke andre
- Klon hele repo for full pensumopplevelse
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfraskrivelse**:
Dette dokumentet er oversatt ved bruk av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi streber etter nøyaktighet, vennligst vær oppmerksom på at automatiserte oversettelser kan inneholde feil eller unøyaktigheter. Det opprinnelige dokumentet på dets morsmål bør betraktes som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår fra bruk av denne oversettelsen.
**Ansvarsfraskrivelse**:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi streber etter nøyaktighet, vennligst vær oppmerksom på at automatiserte oversettelser kan inneholde feil eller unøyaktigheter. Det opprinnelige dokumentet på originalspråket skal anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for misforståelser eller feiltolkninger som følge av bruken av denne oversettelsen.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->
Loading…
Cancel
Save