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

update-translations
localizeflow[bot] 2 weeks ago
parent 120ab74c70
commit ae46f697d9

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-04-24T16:20:57+00:00",
"translation_date": "2026-04-24T16:46:58+00:00",
"source_file": "AGENTS.md",
"language_code": "el"
},

@ -2,27 +2,27 @@
## Επισκόπηση Έργου
Αυτό είναι ένα αποθετήριο εκπαιδευτικού προγράμματος για τη διδασκαλία βασικών αρχών ανάπτυξης ιστοσελίδων σε αρχάριους. Το πρόγραμμα σπουδών είναι ένα ολοκληρωμένο μάθημα 12 εβδομάδων που έχει αναπτυχθεί από τους Microsoft Cloud Advocates, περιλαμβάνοντας 24 πρακτικά μαθήματα που καλύπτουν JavaScript, CSS και HTML.
Αυτό είναι ένα εκπαιδευτικό αποθετήριο προγράμματος σπουδών για τη διδασκαλία των βασικών της ανάπτυξης ιστοσελίδων σε αρχάριους. Το πρόγραμμα σπουδών είναι ένα ολοκληρωμένο 12 εβδομάδων μάθημα που αναπτύχθηκε από τους Microsoft Cloud Advocates, με 24 πρακτικά μαθήματα που καλύπτουν JavaScript, CSS και HTML.
### Κύρια Συστατικά
### Κύρια Στοιχεία
- **Εκπαιδευτικό Περιεχόμενο**: 24 δομημένα μαθήματα οργανωμένα σε μονάδες με βάση έργα
- **Πρακτικά Έργα**: Terrarium, Παιχνίδι Πληκτρολόγησης, Πρόσθετο Περιηγητή, Παιχνίδι Διαστήματος, Εφαρμογή Τραπεζικής, Επεξεργαστής Κώδικα, και Βοηθός Συνομιλίας AI
- **Διαδραστικά Quiz**: 48 κουίζ με 3 ερωτήσεις το καθένα (αξιολογήσεις πριν/μετά το μάθημα)
- **Εκπαιδευτικό Περιεχόμενο**: 24 δομημένα μαθήματα οργανωμένα σε μονάδες βασισμένες σε έργα
- **Πρακτικά Έργα**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor και AI Chat Assistant
- **Διαδραστικά Κουίζ**: 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
- Σύστημα μετάφρασης με χρήση GitHub Actions (co-op-translator)
- Τεκμηρίωση με Docsify και διαθέσιμη ως PDF
## Εντολές Ρύθμισης
Αυτό το αποθετήριο είναι κυρίως για κατανάλωση εκπαιδευτικού περιεχομένου. Για εργασία με συγκεκριμένα έργα:
Αυτό το αποθετήριο προορίζεται κυρίως για κατανάλωση εκπαιδευτικού περιεχομένου. Για εργασία με συγκεκριμένα έργα:
### Ρύθμιση Κύριου Αποθετηρίου
@ -41,22 +41,22 @@ 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 run lint # Εκτέλεση ESLint
npm run format # Μορφοποίηση με Prettier
npm start # Ξεκινήστε τον διακομιστή API
npm run lint # Εκτελέστε το ESLint
npm run format # Μορφοποιήστε με το Prettier
```
### Έργα Πρόσθετου Περιηγητή
### Έργα Επέκτασης Περιηγητή
```bash
cd 5-browser-extension/solution
npm install
# Ακολουθήστε τις οδηγίες φόρτωσης επεκτάσεων ανά πρόγραμμα περιήγησης
# Ακολουθήστε τις οδηγίες φόρτωσης επεκτάσεων ειδικές για το πρόγραμμα περιήγησης
```
### Έργα Παιχνιδιού Διαστήματος
@ -67,7 +67,7 @@ npm install
# Ανοίξτε το index.html σε πρόγραμμα περιήγησης ή χρησιμοποιήστε το Live Server
```
### Έργο Συνομιλίας (Backend Python)
### Έργο Chat (Backend Python)
```bash
cd 9-chat-project/solution/backend/python
@ -76,32 +76,32 @@ pip install openai
python api.py
```
## Ροή Εργασίας Ανάπτυξης
## Ροή Ανάπτυξης
### Για Συμβολή Περιεχομένου
### Για Συνεργάτες Περιεχομένου
1. **Κάντε Fork το αποθετήριο** στον λογαριασμό σας στο GitHub
2. **Κλωνοποιήστε το Fork σας** τοπικά
3. **Δημιουργήστε ένα νέο branch** για τις αλλαγές σας
1. **Φορκάρετε το αποθετήριο** στον λογαριασμό σας στο GitHub
2. **Κλωνοποιήστε το fork σας** τοπικά
3. **Δημιουργήστε νέο branch** για τις αλλαγές σας
4. Κάντε αλλαγές στο περιεχόμενο των μαθημάτων ή στα παραδείγματα κώδικα
5. Δοκιμάστε οποιεσδήποτε αλλαγές κώδικα στους αντίστοιχους καταλόγους έργων
6. Υποβάλετε pull requests σύμφωνα με τις οδηγίες συμβολής
5. Δοκιμάστε τις αλλαγές κώδικα στους αντίστοιχους καταλόγους έργων
6. Υποβάλετε pull requests ακολουθώντας τις οδηγίες συνεισφοράς
### Για Μαθητές
1. Κάντε fork ή κλωνοποίηση του αποθετηρίου
2. Περιηγηθείτε στους καταλόγους μαθημάτων κατά σειρά
1. Φορκάρετε ή κλωνοποιήστε το αποθετήριο
2. Πλοηγηθείτε διαδοχικά στους καταλόγους των μαθημάτων
3. Διαβάστε τα αρχεία README για κάθε μάθημα
4. Ολοκληρώστε τα κουίζ πριν το μάθημα στο https://ff-quizzes.netlify.app/web/
5. Εργαστείτε με τα παραδείγματα κώδικα στους καταλόγους των μαθημάτων
6. Ολοκληρώστε εργασίες και προκλήσεις
7. Πραγματοποιήστε τα κουίζ μετά το μάθημα
4. Ολοκληρώστε τα προ-μάθημα κουίζ στο https://ff-quizzes.netlify.app/web/
5. Εργαστείτε μέσα από τα παραδείγματα κώδικα στους φακέλους μαθημάτων
6. Ολοκληρώστε τις ασκήσεις και προκλήσεις
7. Κάντε τα μετα-μάθημα κουίζ
### Ζωντανή Ανάπτυξη
- **Τεκμηρίωση**: Εκτελέστε `docsify serve` στον ριζικό φάκελο (θύρα 3000)
- **Τεκμηρίωση**: Εκτελέστε `docsify serve` στη ρίζα (θύρα 3000)
- **Quiz App**: Εκτελέστε `npm run dev` στον κατάλογο quiz-app
- **Έργα**: Χρησιμοποιήστε την επέκταση VS Code Live Server για έργα HTML
- **Έργα**: Χρησιμοποιήστε την επέκταση Live Server του VS Code για έργα HTML
- **API Έργα**: Εκτελέστε `npm start` στους αντίστοιχους καταλόγους API
## Οδηγίες Δοκιμών
@ -110,152 +110,152 @@ python api.py
```bash
cd quiz-app
npm run lint # Έλεγχος για ζητήματα στυλ κώδικα
npm run build # Επαλήθευση επιτυχίας της κατασκευής
npm run lint # Έλεγχος για ζητήματα μορφής κώδικα
npm run build # Επαλήθευση επιτυχίας κατασκευής
```
### Δοκιμή Bank API
```bash
cd 7-bank-project/api
npm run lint # Ελέγξτε για ζητήματα στυλ κώδικα
npm run lint # Ελέγξτε για προβλήματα στο στυλ κώδικα
node server.js # Επαληθεύστε ότι ο διακομιστής ξεκινά χωρίς σφάλματα
```
### Γενική Προσέγγιση Δοκιμών
- Πρόκειται για εκπαιδευτικό αποθετήριο χωρίς πλήρεις αυτοματοποιημένες δοκιμές
- Οι χειροκίνητες δοκιμές επικεντρώνονται σε:
- Εκτέλεση παραδειγμάτων κώδικα χωρίς σφάλματα
- Εργασία συνδέσμων στην τεκμηρίωση
- Επιτυχής ολοκλήρωση build έργων
- Παραδείγματα που ακολουθούν βέλτιστες πρακτικές
- Αυτό είναι εκπαιδευτικό αποθετήριο χωρίς πλήρεις αυτοματοποιημένες δοκιμές
- Οι χειροκίνητες δοκιμές εστιάζουν σε:
- Παράδειγματα κώδικα να εκτελούνται χωρίς σφάλματα
- Οι σύνδεσμοι στην τεκμηρίωση να λειτουργούν σωστά
- Ολοκληρωμένα επιτυχημένα builds έργων
- Παραδείγματα να ακολουθούν καλές πρακτικές
### Έλεγχοι Πριν την Υποβολή
- Εκτελέστε `npm run lint` σε καταλόγους που έχουν package.json
- Επαληθεύστε ότι οι σύνδεσμοι markdown είναι έγκυροι
- Δοκιμάστε παραδείγματα κώδικα στον περιηγητή ή στο Node.js
- Ελέγξτε ότι οι μεταφράσεις διατηρούν σωστή δομή
- Εκτελέστε `npm run lint` σε καταλόγους με package.json
- Ελέγξτε την εγκυρότητα των συνδέσμων markdown
- Δοκιμάστε παραδείγματα κώδικα σε browser ή Node.js
- Επιβεβαιώστε ότι οι μεταφράσεις διατηρούν τη σωστή δομή
## Οδηγίες Στυλ Κώδικα
### JavaScript
- Χρησιμοποιείτε σύγχρονη σύνταξη ES6+
- Ακολουθείστε τα πρότυπα ESLint που παρέχονται στα έργα
- Χρησιμοποιείτε περιγραφικά ονόματα μεταβλητών και συναρτήσεων για εκπαιδευτική σαφήνεια
- Προσθέστε σχόλια που εξηγούν τις έννοιες για τους μαθητές
- Μορφοποιήστε με Prettier όπου είναι ρυθμισμένο
- Χρήση μοντέρνας σύνταξης ES6+
- Ακολουθήστε τις προεπιλεγμένες ρυθμίσεις ESLint των έργων
- Χρησιμοποιήστε περιγραφικά ονόματα μεταβλητών και συναρτήσεων για εκπαιδευτική σαφήνεια
- Προσθέστε σχόλια που εξηγούν έννοιες για τους μαθητές
- Μορφοποίηση με Prettier όπου είναι ρυθμισμένο
### HTML/CSS
- Σημασιολογικά στοιχεία HTML5
- Αρχές σχεδιασμού responsive
- Καθαρές συμβάσεις ονομασίας κλάσεων
- Αρχές σχεδίασης responsive
- Καθαρούς κανόνες ονοματοδοσίας κλάσεων
- Σχόλια που εξηγούν τεχνικές CSS για τους μαθητές
### Python
- Οδηγίες στυλ PEP 8
- Καθαρά, εκπαιδευτικά παραδείγματα κώδικα
- Σημειώσεις τύπων όπου βοηθούν στη μάθηση
- Τύποι όπου βοηθούν στην εκμάθηση
### Τεκμηρίωση Markdown
- Σαφής ιεραρχία επικεφαλίδων
- Μπλοκ κώδικα με καθορισμό γλώσσας
- Σύνδεσμοι για επιπλέον πόρους
- Στιγμιότυπα και εικόνες στους καταλόγους `images/`
- Εναλλακτικό κείμενο για πρόσβαση σε εικόνες
- Καθαρή ιεραρχία κεφαλίδων
- Μπλοκ κώδικα με καθορισμένη γλώσσα
- Σύνδεσμοι σε επιπλέον πόρους
- Στιγμιότυπα και εικόνες στους φακέλους `images/`
- Εναλλακτικό κείμενο για τις εικόνες για πρόσβαση
### Οργάνωση Αρχείων
- Μαθήματα αριθμημένα διαδοχικά (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)
Το quiz-app είναι ρυθμισμένο για ανάπτυξη μέσω Azure Static Web Apps:
Το quiz-app έχει ρυθμιστεί για ανάπτυξη Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Δημιουργεί τον φάκελο dist/
# Αναπτύσσεται μέσω ροής εργασίας GitHub Actions κατά το push στο main
npm run build # Δημιουργεί φάκελο dist/
# Αναπτύσσει μέσω ροής εργασίας GitHub Actions με ώθηση στο main
```
Ρύθμιση Azure Static Web Apps:
- **Τοποθεσία εφαρμογής**: `/quiz-app`
- **Τοποθεσία εξόδου**: `dist`
Ρυθμίσεις Azure Static Web Apps:
- **Θέση εφαρμογής**: `/quiz-app`
- **Θέση εξόδου**: `dist`
- **Ροή εργασίας**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Δημιουργία PDF Τεκμηρίωσης
```bash
npm install # Εγκαταστήστε το docsify-to-pdf
npm run convert # Δημιουργήστε PDF από το docs
npm run convert # Δημιουργία PDF από docs
```
### Τεκμηρίωση Docsify
### Docsify Τεκμηρίωση
```bash
npm install -g docsify-cli # Εγκαταστήστε το Docsify παγκοσμίως
docsify serve # Εκτελέστε στο localhost:3000
docsify serve # Εξυπηρέτηση στο localhost:3000
```
### Κατασκευές Ειδικές για Έργα
### Builds Ανά Έργο
Κάθε κατάλογος έργου μπορεί να έχει τη δική του διαδικασία κατασκευής:
- Έργα Vue: `npm run build` δημιουργεί παραγωγικά bundles
- Στατικά έργα: Δεν απαιτείται βήμα κατασκευής, εξυπηρέτηση αρχείων απευθείας
Κάθε φάκελος έργου μπορεί να έχει δική του διαδικασία build:
- Vue έργα: `npm run build` δημιουργεί bundles παραγωγής
- Στατικά έργα: Δεν υπάρχει βήμα build, σερβίρετε τα αρχεία απευθείας
## Οδηγίες Pull Request
### Μορφή Τίτλου
Χρησιμοποιήστε σαφείς, περιγραφικούς τίτλους που υποδεικνύουν την περιοχή αλλαγής:
- `[Quiz-app] Προσθήκη νέου κουίζ για μάθημα X`
Χρησιμοποιήστε σαφείς, περιγραφικούς τίτλους που υποδεικνύουν το κομμάτι αλλαγής:
- `[Quiz-app] Προσθήκη νέου κουίζ για το μάθημα X`
- `[Lesson-3] Διόρθωση ορθογραφικού λάθους στο έργο terrarium`
- `[Translation] Προσθήκη μετάφρασης στα Ισπανικά για μάθημα 5`
- `[Docs] Ενημέρωση οδηγιών εγκατάστασης`
- `[Translation] Προσθήκη ισπανικής μετάφρασης για το μάθημα 5`
- `[Docs] Ενημέρωση οδηγιών ρύθμισης`
### Απαιτούμενοι Έλεγχοι
### Απαραίτητοι Έλεγχοι
Πριν την υποβολή PR:
Πριν υποβάλετε PR:
1. **Ποιότητα Κώδικα**:
- Εκτελέστε `npm run lint` στους αντίστοιχους καταλόγους έργων
- Διορθώστε όλα τα λάθη και τις προειδοποιήσεις linting
- Εκτελέστε `npm run lint` στους επηρεαζόμενους καταλόγους έργων
- Διορθώστε όλα τα λάθη και προειδοποιήσεις lint
2. **Επαλήθευση Κατασκευής**:
2. **Επαλήθευση Build**:
- Εκτελέστε `npm run build` όπου εφαρμόζεται
- Βεβαιωθείτε ότι δεν υπάρχουν σφάλματα κατασκευής
- Βεβαιωθείτε ότι δεν υπάρχουν σφάλματα build
3. **Επαλήθευση Συνδέσμων**:
3. **Επικύρωση Συνδέσμων**:
- Δοκιμάστε όλους τους συνδέσμους markdown
- Επαληθεύστε ότι οι αναφορές εικόνων λειτουργούν
- Επιβεβαιώστε ότι οι εικόνες φορτώνουν σωστά
4. **Ανασκόπηση Περιεχομένου**:
- Διορθώστε ορθογραφικά και γραμματικά λάθη
- Διορθώστε ορθογραφία και γραμματική
- Βεβαιωθείτε ότι τα παραδείγματα κώδικα είναι σωστά και εκπαιδευτικά
- Επαληθεύστε ότι οι μεταφράσεις διατηρούν την αρχική σημασία
- Επιβεβαιώστε ότι οι μεταφράσεις διατηρούν το αρχικό νόημα
### Απαιτήσεις Συμβολής
### Απαιτήσεις Συνεισφοράς
- Αποδοχή Microsoft CLA (αυτόματος έλεγχος στο πρώτο PR)
- Τήρηση του [Κώδικα Συμπεριφοράς Open Source της Microsoft](https://opensource.microsoft.com/codeofconduct/)
- Ανατρέξτε στο [CONTRIBUTING.md](./CONTRIBUTING.md) για λεπτομερείς οδηγίες
- Αναφορά αριθμών θεμάτων στην περιγραφή PR όπου ισχύει
- Αποδοχή του Microsoft CLA (αυτόματος έλεγχος στην πρώτη PR)
- Ακολουθήστε τον [Κώδικα Συμπεριφοράς Ανοιχτού Κώδικα Microsoft](https://opensource.microsoft.com/codeofconduct/)
- Δείτε το [CONTRIBUTING.md](./CONTRIBUTING.md) για λεπτομερείς οδηγίες
- Αναφέρετε αριθμούς issue στην περιγραφή PR αν ισχύει
### Διαδικασία Ανασκόπησης
- Τα PR ελέγχονται από διαχειριστές και την κοινότητα
- Προτεραιότητα στην εκπαιδευτική σαφήνεια
- Τα παραδείγματα κώδικα πρέπει να ακολουθούν τρέχουσες βέλτιστες πρακτικές
- Οι PR ελέγχονται από διαχειριστές και κοινότητα
- Η εκπαιδευτική σαφήνεια είναι προτεραιότητα
- Τα παραδείγματα κώδικα πρέπει να ακολουθούν τις τρέχουσες βέλτιστες πρακτικές
- Οι μεταφράσεις ελέγχονται για ακρίβεια και πολιτισμική καταλληλότητα
## Σύστημα Μετάφρασης
@ -264,19 +264,19 @@ docsify serve # Εκτελέστε στο localhost:3000
- Χρησιμοποιεί GitHub Actions με ροή εργασίας co-op-translator
- Μεταφράζει σε 50+ γλώσσες αυτόματα
- Αρχεία πηγής στους κύριους καταλόγους
- Μεταφρασμένα αρχεία σε καταλόγους `translations/{language-code}/`
- Αρχεία προέλευσης στους κύριους καταλόγους
- Μεταφρασμένα αρχεία στους φακέλους `translations/{language-code}/`
### Προσθήκη Εγχειρίδιων Βελτιώσεων Μετάφρασης
### Προσθήκη Βελτιώσεων Χειροκίνητης Μετάφρασης
1. Βρείτε το αρχείο σε `translations/{language-code}/`
2. Κάντε βελτιώσεις διατηρώντας τη δομή
3. Βεβαιωθείτε ότι τα παραδείγματα κώδικα παραμένουν λειτουργικά
4. Δοκιμάστε οποιοδήποτε τοπικό περιεχόμενο κουίζ
4. Δοκιμάστε τυχόν τοπικά κουίζ που έχουν εντοπιστεί
### Μεταδεδομένα Μετάφρασης
Τα μεταφρασμένα αρχεία περιλαμβάνουν επικεφαλίδα μεταδεδομένων:
Τα μεταφρασμένα αρχεία περιέχουν κεφαλίδα μεταδεδομένων:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,91 +289,91 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Αντιμετώπιση Σφαλμάτων και Επίλυση Προβλημάτων
## Αποσφαλμάτωση και Επίλυση Προβλημάτων
### Συνήθη Ζητήματα
### Συχνά Προβλήματα
**Δεν ξεκινά η εφαρμογή του quiz**:
**Το quiz app δεν ξεκινάει**:
- Ελέγξτε την έκδοση Node.js (συνιστάται v14+)
- Διαγράψτε τους φακέλους `node_modules` και το `package-lock.json`, τρέξτε ξανά `npm install`
- Ελέγξτε για σύγκρουση θυρών (προεπιλογή: Vite χρησιμοποιεί θύρα 5173)
- Διαγράψτε `node_modules` και `package-lock.json`, τρέξτε ξανά `npm install`
- Ελέγξτε για συγκρούσεις θυρών (προεπιλεγμένη: Vite χρησιμοποιεί θύρα 5173)
**Ο server API δεν ξεκινά**:
- Επαληθεύστε ότι η έκδοση Node.js πληροί τις ελάχιστες απαιτήσεις (node >=10)
**Ο διακομιστής API δεν ξεκινά**:
- Ελέγξτε ότι η έκδοση Node.js είναι >=10
- Ελέγξτε αν η θύρα χρησιμοποιείται ήδη
- Βεβαιωθείτε ότι έχουν εγκατασταθεί όλες οι εξαρτήσεις με `npm install`
**Δεν φορτώνει το πρόσθετο περιηγητή**:
- Επαληθεύστε ότι το manifest.json είναι σωστά μορφοποιημένο
- Ελέγξτε την κονσόλα του περιηγητή για σφάλματα
- Ακολουθήστε τις οδηγίες εγκατάστασης πρόσθετου που είναι ειδικές για τον περιηγητή
**Η επέκταση περιηγητή δεν φορτώνει**:
- Επιβεβαιώστε ότι το manifest.json είναι σωστά διαμορφωμένο
- Ελέγξτε την κονσόλα του browser για σφάλματα
- Ακολουθήστε τις οδηγίες εγκατάστασης της επέκτασης για τον αντίστοιχο browser
**Προβλήματα στο έργο συνομιλίας Python**:
**Προβλήματα έργου chat Python**:
- Βεβαιωθείτε ότι το πακέτο OpenAI είναι εγκατεστημένο: `pip install openai`
- Επαληθεύστε ότι η μεταβλητή περιβάλλοντος GITHUB_TOKEN είναι ορισμένη
- Ελέγξτε ότι η μεταβλητή περιβάλλοντος GITHUB_TOKEN είναι ορισμένη
- Ελέγξτε τα δικαιώματα πρόσβασης στα GitHub Models
**Δεν εξυπηρετεί η Docsify τα docs**:
- Εγκαταστήστε το docsify-cli παγκοσμίως: `npm install -g docsify-cli`
- Τρέξτε από τον ριζικό κατάλογο του αποθετηρίου
**Docsify δεν σερβίρει τεκμηρίωση**:
- Εγκαταστήστε docsify-cli παγκοσμίως: `npm install -g docsify-cli`
- Τρέξτε από το ριζικό κατάλογο του αποθετηρίου
- Βεβαιωθείτε ότι το `docs/_sidebar.md` υπάρχει
### Συμβουλές Περιβάλλοντος Ανάπτυξης
- Χρησιμοποιήστε VS Code με την επέκταση Live Server για έργα HTML
- Εγκαταστήστε τις επεκτάσεις ESLint και Prettier για ομοιόμορφο στυλ
- Χρησιμοποιήστε τα DevTools του περιηγητή για εντοπισμό σφαλμάτων JavaScript
- Για έργα Vue, εγκαταστήστε την επέκταση Vue DevTools στον περιηγητή
- Εγκαταστήστε τις επεκτάσεις ESLint και Prettier για συνεπή μορφοποίηση
- Χρησιμοποιήστε τα DevTools του browser για αποσφαλμάτωση JavaScript
- Για έργα Vue, εγκαταστήστε την επέκταση Vue DevTools του browser
### Παράγοντες Απόδοσης
### Θέματα Απόδοσης
- Ο μεγάλος αριθμός μεταφρασμένων αρχείων (50+ γλώσσες) κάνει τις κλωνοποιήσεις πλήρεις βαριές
- Χρησιμοποιήστε shallow clone αν εργάζεστε μόνο με περιεχόμενο: `git clone --depth 1`
- Εξαιρέστε τις μεταφράσεις από τις αναζητήσεις όταν εργάζεστε στα Αγγλικά
- Οι διαδικασίες κατασκευής μπορεί να είναι αργές στην πρώτη εκτέλεση (npm install, vite build)
- Μεγάλος αριθμός μεταφρασμένων αρχείων (50+ γλώσσες) σημαίνει μεγάλα ολοκληρωτικά κλώνους
- Χρησιμοποιήστε ρηχό κλώνο αν εργάζεστε μόνο με περιεχόμενο: `git clone --depth 1`
- Αποκλείστε τις μεταφράσεις από τις αναζητήσεις όταν εργάζεστε με αγγλικό περιεχόμενο
- Οι διαδικασίες build μπορεί να είναι αργές στην πρώτη εκτέλεση (npm install, Vite build)
## Θέματα Ασφαλείας
### Μεταβλητές Περιβάλλοντος
- Τα API keys δεν πρέπει να δεσμεύονται στο αποθετήριο
- Τα κλειδιά API δεν πρέπει ποτέ να δεσμεύονται στο αποθετήριο
- Χρησιμοποιήστε αρχεία `.env` (ήδη στο `.gitignore`)
- Τεκμηριώστε τις απαιτούμενες μεταβλητές περιβάλλοντος στα README των έργων
### Έργα Python
- Χρησιμοποιήστε εικονικά περιβάλλοντα: `python -m venv venv`
- Κρατήστε τις εξαρτήσεις ενημερωμένες
- Τα GitHub tokens πρέπει να έχουν τα ελάχιστα αναγκαία δικαιώματα
- Κρατήστε ενημερωμένες τις εξαρτήσεις
- Τα tokens GitHub πρέπει να έχουν ελάχιστα απαιτούμενα δικαιώματα
### Πρόσβαση GitHub Models
### Πρόσβαση σε GitHub Models
- Χρειάζονται Personal Access Tokens (PAT) για GitHub Models
- Αποθηκεύονται ως μεταβλητές περιβάλλοντος
- Μην δεσμεύετε ποτέ tokens ή διαπιστευτήρια
- Απαιτούνται Personal Access Tokens (PAT) για GitHub Models
- Τα tokens να αποθηκεύονται ως μεταβλητές περιβάλλοντος
- Ποτέ μη δεσμεύετε tokens ή διαπιστευτήρια στον κώδικα
## Πρόσθετες Σημειώσεις
### Στόχος Κοινού
- Αρχάριοι πλήρως στην ανάπτυξη ιστοσελίδων
- Φοιτητές και αυτοδίδακτοι
- Εκπαιδευτικοί που χρησιμοποιούν το πρόγραμμα σε αίθουσες διδασκαλίας
- Το περιεχόμενο σχεδιάζεται για προσβασιμότητα και σταδιακή ανάπτυξη δεξιοτήτων
- Απόλυτα αρχάριοι στην ανάπτυξη ιστοσελίδων
- Μαθητές και αυτοδίδακτοι
- Καθηγητές που χρησιμοποιούν το πρόγραμμα σε τάξεις
- Το περιεχόμενο σχεδιάστηκε για προσβασιμότητα και σταδιακή ανάπτυξη δεξιοτήτων
### Εκπαιδευτική Φιλοσοφία
- Προσέγγιση μάθησης με βάση έργα
- Συχνές αξιολογήσεις γνώσεων (κουίζ)
- Πρακτικές ασκήσεις προγραμματισμού
- Προσέγγιση μάθησης βασισμένη σε έργα
- Συχνές επαληθεύσεις γνώσης (κουίζ)
- Πρακτικές ασκήσεις κώδικα
- Παραδείγματα εφαρμογών πραγματικού κόσμου
- Εστίαση στα θεμέλια πριν από τα frameworks
- Εστίαση στα θεμελιώδη πριν τα πλαίσια εργασίας
### Συντήρηση Αποθετηρίου
- Ενεργή κοινότητα μαθητών και συμβολής
- Ενεργή κοινότητα μαθητών και συνεργατών
- Τακτικές ενημερώσεις εξαρτήσεων και περιεχομένου
- Παρακολούθηση θεμάτων και συζητήσεων από τους διαχειριστές
- Παρακολούθηση ζητημάτων και συζητήσεων από διαχειριστές
- Αυτόματες ενημερώσεις μεταφράσεων μέσω GitHub Actions
### Σχετικοί Πόροι
@ -385,24 +385,24 @@ CO_OP_TRANSLATOR_METADATA:
### Εργασία με Συγκεκριμένα Έργα
Για λεπτομερείς οδηγίες για μεμονωμένα έργα, ανατρέξτε στα αρχεία README στα:
- `quiz-app/README.md` - Εφαρμογή quiz με Vue 3
- `7-bank-project/README.md` - Εφαρμογή τραπεζικής με αυθεντικοποίηση
- `5-browser-extension/README.md` - Ανάπτυξη πρόσθετου περιηγητή
- `6-space-game/README.md` - Ανάπτυξη παιχνιδιού βασισμένου σε Canvas
Για αναλυτικές οδηγίες σε μεμονωμένα έργα, ανατρέξτε στα αρχεία README:
- `quiz-app/README.md` - Εφαρμογή κουίζ Vue 3
- `7-bank-project/README.md` - Εφαρμογή τραπεζικού συστήματος με αυθεντικοποίηση
- `5-browser-extension/README.md` - Ανάπτυξη επέκτασης περιηγητή
- `6-space-game/README.md` - Ανάπτυξη παιχνιδιού καμβά
- `9-chat-project/README.md` - Έργο βοηθού συνομιλίας AI
### Δομή Monorepo
### Δομή Μονό-αποθετηρίου (Monorepo)
Αν και δεν είναι παραδοσιακό monorepo, το αποθετήριο περιέχει πολλαπλά ανεξάρτητα έργα:
Παρότι δεν είναι παραδοσιακό monorepo, αυτό το αποθετήριο περιέχει πολλαπλά ανεξάρτητα έργα:
- Κάθε μάθημα είναι αυτόνομο
- Τα έργα δεν μοιράζονται εξαρτήσεις
- Εργαστείτε σε ανεξάρτητα έργα χωρίς να επηρεάζετε τα άλλα
- Κλωνοποιήστε ολόκληρο το αποθετήριο για πλήρη εμπειρία προγράμματος σπουδών
- Εργαστείτε σε μεμονωμένα έργα χωρίς να επηρεάζετε άλλα
- Κλωνοποιήστε ολόκληρο το αποθετήριο για την πλήρη εμπειρία προγράμματος σπουδών
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Αποποίηση ευθυνών**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας υπηρεσία μετάφρασης AI [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 -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-04-24T16:23:42+00:00",
"translation_date": "2026-04-24T16:49:31+00:00",
"source_file": "AGENTS.md",
"language_code": "sv"
},

@ -2,36 +2,36 @@
## Projektöversikt
Detta är ett utbildningscurriculum för att lära ut grunderna i webbutveckling för nybörjare. Curriculumen är en omfattande 12-veckorskurs utvecklad av Microsoft Cloud Advocates, med 24 praktiska lektioner som täcker JavaScript, CSS och HTML.
Detta är ett utbildningsprogram för att lära ut grunderna i webbutveckling för nybörjare. Kursplanen är en omfattande 12-veckors kurs utvecklad av Microsoft Cloud Advocates, med 24 praktiska lektioner som täcker JavaScript, CSS och HTML.
### Viktiga komponenter
### Huvudkomponenter
- **Utbildningsinnehåll**: 24 strukturerade lektioner organiserade i projektbaserade moduler
- **Praktiska projekt**: Terrarium, Typningsspel, Webbläsartillägg, Rymdspel, Bankapp, Kodredigerare och AI-chatassistent
- **Interaktiva quiz**: 48 quiz med 3 frågor vardera (för- och efterlektionstest)
- **Fler språkstöd**: Automatiska översättningar till över 50 språk via GitHub Actions
- **Praktiska projekt**: Terrarium, Typningsspel, Browser Extension, Rymdspel, Bankapp, Kodeditor och AI-chattassistent
- **Interaktiva quiz**: 48 quiz med 3 frågor vardera (före/efter lektionstest)
- **Fler språkstöd**: Automatiska översättningar till 50+ språk via GitHub Actions
- **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (för AI-projekt)
### Arkitektur
- Utbildningsrepo med lektionbaserad struktur
- Utbildningsförråd med lektionsbaserad struktur
- Varje lektionsmapp innehåller README, kodexempel och lösningar
- Självständiga projekt i separata kataloger (quiz-app, olika lektionsprojekt)
- Översättningssystem via GitHub Actions (co-op-translator)
- Dokumentation serverad via Docsify och tillgänglig som PDF
- Fristående projekt i separata kataloger (quiz-app, olika lektionsprojekt)
- Översättningssystem med GitHub Actions (co-op-translator)
- Dokumentation serveras via Docsify och finns som PDF
## Setup-kommandon
Detta repository ä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 utbildningsinnehållskonsumtion. För arbete med specifika projekt:
### Huvudrepo Setup
### Huvudförrådets installation
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Quiz Apps Setup (Vue 3 + Vite)
### Quiz App Setup (Vue 3 + Vite)
```bash
cd quiz-app
@ -51,7 +51,7 @@ npm run lint # Kör ESLint
npm run format # Formatera med Prettier
```
### Webbläsartilläggsprojekt
### Browser Extension-projekt
```bash
cd 5-browser-extension/solution
@ -59,7 +59,7 @@ npm install
# Följ webbläsarspecifika instruktioner för att ladda tillägg
```
### Rymdspelprojekt
### Rymdspel-projekt
```bash
cd 6-space-game/solution
@ -67,76 +67,76 @@ npm install
# Öppna index.html i webbläsaren eller använd Live Server
```
### Chatprojekt (Python backend)
### Chattprojekt (Python backend)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Sätt GITHUB_TOKEN miljövariabeln
# Sätt miljövariabeln GITHUB_TOKEN
python api.py
```
## Utvecklingsflöde
## Utvecklingsarbetsflöde
### För innehållsbidragare
### För innehållsbidragsgivare
1. **Forka repot** till ditt GitHub-konto
1. **Fork:a förrådet** till ditt GitHub-konto
2. **Klona din fork** lokalt
3. **Skapa en ny branch** för dina ändringar
4. Gör ändringar i lektionsinnehåll eller kodexempel
5. Testa eventuella kodändringar i relevanta projektmappar
6. Skicka pull requests enligt riktlinjer för bidrag
6. Skicka in pull-requests enligt riktlinjer för bidrag
### För elever
1. Forka eller klona repot
2. Navigera till lektionskataloger i ordning
1. Fork:a eller klona rrådet
2. Navigera till lektionsmapparna i ordning
3. Läs README-filer för varje lektion
4. Gör för-lektions quiz på https://ff-quizzes.netlify.app/web/
4. Gör för-lektionsquiz på https://ff-quizzes.netlify.app/web/
5. Arbeta igenom kodexempel i lektionsmapparna
6. Slutför uppgifter och utmaningar
7. Gör efter-lektions quiz
7. Gör efter-lektionsquiz
### Liveutveckling
- **Dokumentation**: Kör `docsify serve` från rotmappen (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
- **Dokumentation**: Kör `docsify serve` i root (port 3000)
- **Quiz App**: Kör `npm run dev` i quiz-app-mappen
- **Projekt**: Använd VS Codes Live Server-tillägg för HTML-projekt
- **API-projekt**: Kör `npm start` i respektive API-katalog
## Testinstruktioner
### Quiz App-testning
### Test av Quiz App
```bash
cd quiz-app
npm run lint # Kontrollera kodstilsproblem
npm run lint # Kontrollera efter kodstilproblem
npm run build # Verifiera att bygget lyckas
```
### Bank API-testning
### Test av Bank API
```bash
cd 7-bank-project/api
npm run lint # Kontrollera efter kodstilsproblem
npm run lint # Kontrollera kodstilproblem
node server.js # Verifiera att servern startar utan fel
```
### Allmän testmetod
- Detta är ett utbildningsrepo utan omfattande automatiserade tester
- Detta är ett utbildningsförråd utan omfattande automatiserade tester
- Manuell testning fokuserar på:
- Kodexempel körs utan fel
- Länkar i dokumentationen fungerar korrekt
- Projekt byggs framgångsrikt
- Projekt bygger klart utan fel
- Exempel följer bästa praxis
### Kontroll före inskickning
### Kontroll före inskick
- Kör `npm run lint` i kataloger med package.json
- Verifiera att markdown-länkar är giltiga
- Kör `npm run lint` i mappar med package.json
- Kontrollera 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
@ -144,56 +144,56 @@ node server.js # Verifiera att servern startar utan fel
- Använd modern ES6+ syntax
- Följ standard ESLint-konfigurationer i projekten
- Använd meningsfulla variabel- och funktionsnamn för pedagogisk tydlighet
- Använd meningsfulla variabel- och funktionsnamn för utbildningsklarhet
- Lägg till kommentarer som förklarar koncept för elever
- Formatera med Prettier där det är konfigurerat
### HTML/CSS
- Semantiska HTML5-element
- Responsiva designprinciper
- Tydliga klassnamns-konventioner
- Responsiv designprinciper
- Tydliga namngivningskonventioner för klasser
- Kommentarer som förklarar CSS-tekniker för elever
### Python
- PEP 8 stilriktlinjer
- Klara, pedagogiska kodexempel
- Typanvisningar där det hjälper inlärningen
- PEP 8 kodstilriktlinjer
- Tydliga, utbildande kodexempel
- Typangivelser där det är hjälpsamt för lärande
### Markdown-dokumentation
- Tydlig rubrikhierarki
- Kodblock med språk-syntax
- Kodblock med språkangivelse
- Länkar till ytterligare resurser
- Skärmdumpar och bilder i `images/`-mappar
- Alt-text för bilder för tillgänglighet
- Alt-text bilder för tillgänglighet
### Filorganisation
- Lektioner numrerade sekventiellt (1-getting-started-lessons, 2-js-basics, etc.)
- Lektioner numrerade i följd (1-getting-started-lessons, 2-js-basics, osv.)
- Varje projekt har `solution/` och ofta `start/` eller `your-work/` mappar
- Bilder lagras i lektonspecifika `images/`-mappar
- Översättningar i `translations/{language-code}/` struktur
- Bilder lagras i lektionsspecifika `images/`-mappar
- Översättningar i `translations/{language-code}/`-struktur
## Bygg och distribution
### Quiz App-distribution (Azure Static Web Apps)
Quiz-appen är konfigurerad för distribution Azure Static Web Apps:
Quiz-appen är konfigurerad för distribution till 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 dist/ mapp
# Distribuerar via GitHub Actions arbetsflöde vid push till main
```
Azure Static Web Apps-konfiguration:
- **Appplats**: `/quiz-app`
- **Outputplats**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
- **App-läge**: `/quiz-app`
- **Utmatningsplats**: `dist`
- **Arbetsflöde**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### PDF-generering av dokumentation
### Generering av PDF för dokumentation
```bash
npm install # Installera docsify-to-pdf
@ -204,31 +204,31 @@ npm run convert # Generera PDF från docs
```bash
npm install -g docsify-cli # Installera Docsify globalt
docsify serve # Kör på localhost:3000
docsify serve # Servera på localhost:3000
```
### Projektspecifika byggsteg
### Projektsspecifika byggsteg
Varje projektkatalog kan ha sin egen byggprocess:
- Vue-projekt: `npm run build` skapar produktionspaket
- Statiska projekt: Inget byggsteg, filerna serveras direkt
Varje projektkatalog kan ha egen byggprocess:
- Vue-projekt: `npm run build` skapar produktionsbundlar
- Statiska projekt: Ingen byggsteg, filer serveras direkt
## Riktlinjer för pull requests
## Pull request-riktlinjer
### Titelformat
Använd tydliga, beskrivande titlar som visar ändringsområde:
Använd tydliga, beskrivande titlar som anger ändringsområde:
- `[Quiz-app] Lägg till nytt quiz för lektion X`
- `[Lektion-3] Fixar stavfel i terrariumprojekt`
- `[Översättning] Lägg till spanskt översättning för lektion 5`
- `[Docs] Uppdatera installationsanvisningar`
- `[Lesson-3] Rätta stavfel i terrarium-projektet`
- `[Translation] Lägg till spansk översättning för lektion 5`
- `[Docs] Uppdatera installationsinstruktioner`
### Obligatoriska kontroller
Innan PR skickas:
Innan PR skickas in:
1. **Kodkvalitet**:
- Kör `npm run lint` i berörda projektmappar
- Kör `npm run lint` i påverkade projektmappar
- Åtgärda alla lint-fel och varningar
2. **Byggverifiering**:
@ -240,43 +240,43 @@ Innan PR skickas:
- Verifiera att bildreferenser fungerar
4. **Innehållsgranskning**:
- Korrekturläs stavning och grammatik
- Korrekturläs för stavning och grammatik
- Säkerställ att kodexempel är korrekta och pedagogiska
- Kontrollera att översättningar behåller originalmening
- Kontrollera att översättningar bibehåller ursprunglig mening
### Bidragskrav
### Krav på bidrag
- 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 issue-nummer i PR-beskrivning om möjligt
- Referera ärendenummer i PR-beskrivning vid behov
### Granskningsprocess
- PR granskas av underhållare och community
- PR granskas av underhållare och gemenskap
- Pedagogisk tydlighet prioriteras
- Kodexempel ska följa aktuella bästa praxis
- Kodexempel bör följa aktuell bästa praxis
- Översättningar granskas för korrekthet och kulturell lämplighet
## Översättningssystem
### Automatiserad översättning
### Automatisk översättning
- Använder GitHub Actions med co-op-translator workflow
- Översätter automatiskt till över 50 språk
- Använder GitHub Actions med co-op-translator-arbetsflöde
- Översätter till 50+ språk automatiskt
- Källfiler i huvudkataloger
- Översatta filer i `translations/{language-code}/` kataloger
### Lägga till manuella översättningsförbättringar
### Lägga till manuella förbättringar av översättningar
1. Lokalisera fil i `translations/{language-code}/`
2. Gör förbättringar samtidigt som struktur bevaras
3. Säkerställ att kodexempel fungerar
4. Testa lokaliserat quiz-innehåll
2. Gör förbättringar utan att ändra struktur
3. Säkerställ att kodexempel förblir fungerande
4. Testa eventuellt lokaliserat quiz-innehåll
### Översättningsmetadata
Översatta filer inkluderar metadataheader:
Översatta filer innehåller metadata-header:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -298,111 +298,111 @@ CO_OP_TRANSLATOR_METADATA:
- Ta bort `node_modules` och `package-lock.json`, kör `npm install` igen
- Kontrollera portkonflikter (standard: Vite använder port 5173)
**API-server startar inte**:
- Verifiera att Node.js-version uppfyller minimikrav (node >=10)
**API-servern startar inte**:
- Kontrollera att Node.js-versionen uppfyller minimikrav (node >=10)
- Kontrollera om port redan används
- Säkerställ att alla beroenden är installerade med `npm install`
- Säkerställ att alla beroenden installerats med `npm install`
**Webbläsartillägg laddas inte**:
**Browser extension laddas inte**:
- Kontrollera att manifest.json är korrekt formaterad
- Kolla webbläsarkonsolen efter felmeddelanden
- Följ webbläsarspecifika installationsinstruktioner för tillägg
- Kontrollera webbläsarkonsolen för fel
- Följ webbläsarspecifika instruktioner för tilläggsinstallation
**Problem med Python chatprojekt**:
**Problem med Python chattprojekt**:
- Säkerställ att OpenAI-paketet är installerat: `pip install openai`
- Verifiera att miljövariabeln GITHUB_TOKEN är satt
- Kontrollera GitHub Models-åtkomstbehörigheter
- Kontrollera att miljövariabeln GITHUB_TOKEN är satt
- Granska GitHub Models-accessbehörigheter
**Docsify serverar inte dokumentation**:
- Installera docsify-cli globalt: `npm install -g docsify-cli`
- Kör från repots rotkatalog
- Kör från rrådets rotkatalog
- Kontrollera att `docs/_sidebar.md` finns
### Tips för utvecklingsmiljö
### Utvecklingsmiljötips
- 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 utvecklarverktyg för att debugga JavaScript
- Använd webbläsarens DevTools för att felsöka JavaScript
- För Vue-projekt, installera Vue DevTools webbläsartillägg
### Prestandahänsyn
- Stort antal översatta filer (50+ språk) gör fulla kloner stora
- Stort antal översatta filer (50+ språk) gör fulla kloningar stora
- Använd shallow clone om du bara arbetar med innehåll: `git clone --depth 1`
- Exkludera översättningar från sökningar när du arbetar med engelskt innehåll
- Exkludera översättningar från sökningar när du arbetar engelskt innehåll
- Byggprocesser kan vara långsamma första gången (npm install, Vite build)
## Säkerhetshänsyn
### Miljövariabler
- API-nycklar ska aldrig checkas in i repot
- Använd `.env`-filer (finns i `.gitignore`)
- Dokumentera nödvändiga miljövariabler i projektens README
- API-nycklar ska aldrig committas till förrådet
- Använd `.env`-filer (redan i `.gitignore`)
- Dokumentera nödvändiga miljövariabler i projekts 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 rättigheter
- GitHub-token ska ha minsta nödvändiga 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 checka in tokens eller inloggningsuppgifter
- Personliga åtkomsttoken (PAT) krävs för GitHub Models
- Token ska lagras som miljövariabler
- Committa aldrig token eller användaruppgifter
## Ytterligare anmärkningar
## Ytterligare anteckningar
### Målgrupp
- Helt nybörjare inom webbutveckling
- Studenter och självlärande
- Lärare som använder curriculumen i klassrum
- Innehåll designat för tillgänglighet och gradvis färdighetsutveckling
- Studenter och självstudenter
- Lärare som använder kursplanen i klassrum
- Innehållet är utformat för tillgänglighet och gradvis kompetensuppbyggnad
### Pedagogisk filosofi
### Utbildningsfilosofi
- Projektbaserat lärande
- Frekventa kunskapskontroller (quiz)
- Praktiska kodövningar
- Exempel verkliga tillämpningar
- Fokus på grunderna innan ramverk
- Praktiska kodningsövningar
- Exempel med verkliga tillämpningar
- Fokus på grunder innan ramverk
### Repositorsunderhåll
### Förrådsunderhåll
- Aktivt community av elever och bidragsgivare
- Aktiv gemenskap av elever och bidragsgivare
- Regelbundna uppdateringar av beroenden och innehåll
- Problem och diskussioner övervakas av underhållare
- Översättningsuppdateringar automatiska via GitHub Actions
- Ärenden och diskussioner övervakas av underhållare
- Översättningsuppdateringar automatiserade via GitHub Actions
### Relaterade resurser
- [Microsoft Learn-moduler](https://docs.microsoft.com/learn/)
- [Student Hub-resurser](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) rekommenderas för elever
- Ytterligare kurser: Generativ AI, Data Science, ML, IoT curricula tillgängliga
- Ytterligare kurser: Generativ AI, Data Science, ML, IoT kursplaner finns tillgängliga
### Arbete med specifika projekt
### Arbeta med specifika projekt
För detaljerade instruktioner om enskilda projekt, se README-filer i:
- `quiz-app/README.md` - Vue 3 quizapplikation
- `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 spelutveckling
- `9-chat-project/README.md` - AI chattassistentprojekt
- `6-space-game/README.md` - Canvasbaserat spelutveckling
- `9-chat-project/README.md` - AI-chattassistentprojekt
### Monorepo-struktur
Även om detta inte är ett traditionellt monorepo innehåller repot flera oberoende projekt:
Även om detta inte är ett traditionellt monorepo innehåller rrådet flera oberoende projekt:
- Varje lektion är självständig
- Projekt delar inga beroenden
- Projekten delar inte beroenden
- Arbeta med individuella projekt utan att påverka andra
- Klona hela repot för hela curriculum-upplevelsen
- Klona hela förrådet för hela kursplanen upplevelse
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfriskrivning**:
Det här dokumentet 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 inkonsekvenser. Det ursprungliga dokumentet på dess originalspråk 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 vid användning av denna översättning.
**Ansvarsfriskrivning**:
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, bör du vara medveten om att automatiska översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess modersmål bör anses vara 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-04-24T16:22:23+00:00",
"translation_date": "2026-04-24T16:48:21+00:00",
"source_file": "AGENTS.md",
"language_code": "th"
},

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