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

pull/1793/head
localizeflow[bot] 3 weeks ago
parent 08efa3b0e3
commit 1198925a44

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-04-06T18:36:30+00:00",
"translation_date": "2026-04-20T16:29:40+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
- **Διαδραστικά Κουίζ**: 48 κουίζ με 3 ερωτήσεις το καθένα (εκτιμήσεις πριν/μετά το μάθημα)
- **Υποστήριξη Πολλών Γλωσσών**: Αυτόματες μεταφράσεις για πάνω από 50 γλώσσες μέσω GitHub Actions
- **Τεχνολογίες**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (για έργα AI)
- **Εκπαιδευτικό Περιεχόμενο**: 24 δομημένα μαθήματα οργανωμένα σε μονάδες βασισμένες σε έργα
- **Πρακτικά Έργα**: Terrarium, Παιχνίδι Πληκτρολόγησης, Επέκταση Περιηγητή, Παιχνίδι Διαστήματος, Τραπεζική Εφαρμογή, Κώδικας Επεξεργαστή και Βοηθός Συνομιλίας με Τεχνητή Νοημοσύνη
- **Διαδραστικά Κουίζ**: 48 κουίζ με 3 ερωτήσεις το καθένα (αξιολογήσεις πριν/μετά το μάθημα)
- **Υποστήριξη Πολλαπλών Γλωσσών**: Αυτόματες μεταφράσεις για πάνω από 50 γλώσσες μέσω GitHub Actions
- **Τεχνολογίες**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (για έργα ΤΝ)
### Αρχιτεκτονική
- Εκπαιδευτικό αποθετήριο με δομή βασισμένη στα μαθήματα
- Κάθε φάκελος μαθήματος περιέχει README, παραδείγματα κώδικα και λύσεις
- Εκπαιδευτικό αποθετήριο με δομή βάσει μαθημάτων
- Οφάκελοι κάθε μαθήματος περιέχουν README, παραδείγματα κώδικα και λύσεις
- Αυτόνομα έργα σε ξεχωριστούς φακέλους (quiz-app, διάφορα έργα μαθημάτων)
- Σύστημα μετάφρασης με χρήση GitHub Actions (co-op-translator)
- Τεκμηρίωση διαθέσιμη μέσω Docsify και ως PDF
- Σύστημα μετάφρασης μέσω GitHub Actions (co-op-translator)
- Τεκμηρίωση διατίθεται μέσω Docsify και ως PDF
## Εντολές Ρύθμισης
Αυτό το αποθετήριο είναι κυρίως για την κατανάλωση εκπαιδευτικού περιεχομένου. Για εργασία με συγκεκριμένα έργα:
Αυτό το αποθετήριο προορίζεται κυρίως για κατανάλωση εκπαιδευτικού περιεχομένου. Για εργασία με συγκεκριμένα έργα:
### Ρύθμιση Κύριου Αποθετηρίου
@ -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
```
### API Έργου Τράπεζας (Node.js + Express)
### API Τραπεζικού Έργου (Node.js + Express)
```bash
cd 7-bank-project/api
@ -56,7 +56,7 @@ npm run format # Μορφοποίηση με Prettier
```bash
cd 5-browser-extension/solution
npm install
# Ακολουθήστε τις οδηγίες φόρτωσης επεκτάσεων ειδικές για τον περιηγητή
# Ακολουθήστε τις οδηγίες φόρτωσης επεκτάσεων που είναι ειδικές για τον περιηγητή
```
### Έργα Παιχνιδιού Διαστήματος
@ -67,41 +67,41 @@ npm install
# Ανοίξτε το index.html σε πρόγραμμα περιήγησης ή χρησιμοποιήστε Live Server
```
### Έργο Συνομιλίας (Python Backend)
### Έργο Συνομιλίας (Backend Python)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Ορίστε τη μεταβλητή περιβάλλοντος GITHUB_TOKEN
# Ορισμός μεταβλητής περιβάλλοντος GITHUB_TOKEN
python api.py
```
## Ροή Ανάπτυξης
### Για Συνεργάτες Περιεχομένου
### Για Συνεισφέροντες Περιεχομένου
1. **Διακλάδωση (Fork)** του αποθετηρίου στο GitHub σας
2. **Κλωνοποίηση (Clone)** του fork τοπικά
3. **Δημιουργία νέου κλάδου** για τις αλλαγές σας
4. Κάντε αλλαγές στο περιεχόμενο μαθημάτων ή στα παραδείγματα κώδικα
5. Δοκιμάστε τις αλλαγές κώδικα στους σχετικούς φακέλους έργων
6. Υποβάλετε ζητήματα συγχώνευσης (pull requests) ακολουθώντας τις οδηγίες συμβολής
1. **Δημιουργήστε fork** του αποθετηρίου στον λογαριασμό σας στο GitHub
2. **Κλωνοποιήστε το fork** τοπικά
3. **Δημιουργήστε νέο κλαδί** για τις αλλαγές σας
4. Κάντε αλλαγές στο περιεχόμενο των μαθημάτων ή τα παραδείγματα κώδικα
5. Δοκιμάστε τις αλλαγές κώδικα στους αντίστοιχους φακέλους έργων
6. Υποβάλετε pull requests ακολουθώντας τις οδηγίες συνεισφοράς
### Για Μαθητές
1. Διακλάδωση ή κλωνοποίηση του αποθετηρίου
2. Πλοηγηθείτε στους φακέλους μαθημάτων με σειρά
1. Κάντε fork ή κλωνοποιήστε το αποθετήριο
2. Πλοηγηθείτε διαδοχικά στους φακέλους των μαθημάτων
3. Διαβάστε τα αρχεία README κάθε μαθήματος
4. Ολοκληρώστε τα κουίζ πριν το μάθημα στη διεύθυνση https://ff-quizzes.netlify.app/web/
5. Εργαστείτε στα παραδείγματα κώδικα στους φακέλους μαθημάτων
4. Ολοκληρώστε τα προ-μαθήματος κουίζ στο https://ff-quizzes.netlify.app/web/
5. Επεξεργαστείτε τα παραδείγματα κώδικα στους φακέλους μαθημάτων
6. Ολοκληρώστε εργασίες και προκλήσεις
7. Κάντε τα κουίζ μετά το μάθημα
7. Πραγματοποιήστε τα μετα-μαθήματος κουίζ
### Ζωντανή Ανάπτυξη
- **Τεκμηρίωση**: Εκτελέστε `docsify serve` στο ριζικό φάκελο (θύρα 3000)
- **Τεκμηρίωση**: Εκτελέστε `docsify serve` από τη ρίζα (θύρα 3000)
- **Quiz App**: Εκτελέστε `npm run dev` στον φάκελο quiz-app
- **Έργα**: Χρησιμοποιήστε την επέκταση Live Server του VS Code για έργα HTML
- **Έργα**: Χρησιμοποιήστε το Live Server extension του VS Code για έργα HTML
- **API Έργα**: Εκτελέστε `npm start` στους αντίστοιχους φακέλους API
## Οδηγίες Δοκιμών
@ -110,85 +110,85 @@ python api.py
```bash
cd quiz-app
npm run lint # Ελέγξτε για προβλήματα στυλ κώδικα
npm run build # Επαληθεύστε ότι η κατασκευή ολοκληρώνεται με επιτυχία
npm run lint # Έλεγχος για θέματα στυλ κώδικα
npm run build # Επαλήθευση επιτυχίας κατασκευής
```
### Δοκιμές API Τράπεζας
### Δοκιμές Bank API
```bash
cd 7-bank-project/api
npm run lint # Ελέγξτε για προβλήματα στυλ κώδικα
node server.js # Επαληθεύστε ότι ο διακομιστής ξεκινά χωρίς σφάλματα
npm run lint # Έλεγχος για θέματα στυλ κώδικα
node server.js # Επιβεβαίωση ότι ο διακομιστής ξεκινά χωρίς σφάλματα
```
### Γενική Προσέγγιση Δοκιμών
- Πρόκειται για εκπαιδευτικό αποθετήριο χωρίς πλήρεις αυτοματοποιημένες δοκιμές
- Η χειροκίνητη δοκιμή εστιάζει σε:
- Εκτέλεση παραδειγμάτων χωρίς σφάλματα
- Πρόκειται για εκπαιδευτικό αποθετήριο χωρίς ολοκληρωμένες αυτοματοποιημένες δοκιμές
- Οι χειροκίνητες δοκιμές εστιάζουν σε:
- Εκτέλεση παραδειγμάτων κώδικα χωρίς σφάλματα
- Οι σύνδεσμοι στην τεκμηρίωση λειτουργούν σωστά
- Οι διαδικασίες κατασκευής έργων ολοκληρώνονται επιτυχώς
- Τα παραδείγματα ακολουθούν βέλτιστες πρακτικές
- Οι κατασκευές έργων ολοκληρώνονται επιτυχώς
- Τα παραδείγματα ακολουθούν τις βέλτιστες πρακτικές
### Έλεγχοι Πριν την Υποβολή
- Εκτελέστε `npm run lint` σε φακέλους με package.json
- Εκτελέστε `npm run lint` στους φακέλους με package.json
- Επαληθεύστε ότι οι σύνδεσμοι markdown είναι έγκυροι
- Δοκιμάστε τα παραδείγματα κώδικα στον περιηγητή ή Node.js
- Δοκιμάστε παραδείγματα κώδικα στον περιηγητή ή Node.js
- Ελέγξτε ότι οι μεταφράσεις διατηρούν τη σωστή δομή
## Οδηγίες Στυλ Κώδικα
### JavaScript
- Χρήση σύγχρονης σύνταξης ES6+
- Χρησιμοποιήστε τον σύγχρονο σύνταξη ES6+
- Ακολουθήστε τις τυπικές ρυθμίσεις ESLint που παρέχονται στα έργα
- Χρησιμοποιήστε ουσιαστικά ονόματα μεταβλητών και συναρτήσεων για εκπαιδευτική σαφήνεια
- Προσθέστε σχόλια που εξηγούν έννοιες για τους μαθητές
- Μορφοποιήστε με Prettier όπου έχει ρυθμιστεί
- Μορφοποιήστε με Prettier όπου είναι ρυθμισμένο
### HTML/CSS
- Σημαντικά στοιχεία HTML5
- Αρχές σχεδίασης για ευέλικτο σχεδιασμό (responsive)
- Καθαρούς κανόνες ονοματοδοσίας κλάσεων
- Σχόλια που εξηγούν τις τεχνικές CSS για εκπαιδευτικούς σκοπούς
- Αρχές σχεδιασμού προσαρμοστικής εμφάνισης (responsive)
- Καθαρούς κανόνες ονοματολογίας κλάσεων
- Σχόλια που εξηγούν τεχνικές CSS για μαθητές
### Python
- Οδηγίες στυλ PEP 8
- Χρήση οδηγιών στυλ PEP 8
- Καθαρά, εκπαιδευτικά παραδείγματα κώδικα
- Τύποι (type hints) όπου είναι χρήσιμο για τη μάθηση
- Χρήση δηλώσεων τύπων όπου βοηθούν στην εκμάθηση
### Τεκμηρίωση Markdown
### Τεκμηρίωση σε Markdown
- Σαφής ιεραρχία επικεφαλίδων
- Σαφή ιεραρχία επικεφαλίδων
- Μπλοκ κώδικα με καθορισμένη γλώσσα
- Συνδέσμους σε επιπλέον πόρους
- Σύνδεσμοι για επιπλέον πόρους
- Στιγμιότυπα και εικόνες στους φακέλους `images/`
- Εναλλακτικό κείμενο (alt text) για πρόσβαση
- Εναλλακτικό κείμενο (alt text) για τις εικόνες για προσβασιμότητα
### Οργάνωση Αρχείων
- Τα μαθήματα αριθμούνται διαδοχικά (1-getting-started-lessons, 2-js-basics, κ.λπ.)
- Μαθήματα με αριθμημένη ακολουθία (1-getting-started-lessons, 2-js-basics κ.ά.)
- Κάθε έργο έχει φακέλους `solution/` και συχνά `start/` ή `your-work/`
- Εικόνες αποθηκεύονται σε φακέλους `images/` ανά μάθημα
- Εικόνες φυλαγμένες σε φακέλους `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 κατά την αποστολή στον κλάδο main
npm run build # Δημιουργεί φάκελο dist/
# Αναπτύσσει μέσω ροής εργασίας GitHub Actions κατά την ώθηση στο main
```
Διαμόρφωση Azure Static Web Apps:
Ρυθμίσεις Azure Static Web Apps:
- **Τοποθεσία εφαρμογής**: `/quiz-app`
- **Τοποθεσία εξόδου**: `dist`
- **Ροή εργασίας**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
@ -196,7 +196,7 @@ npm run build # Δημιουργεί τον φάκελο dist/
### Δημιουργία PDF Τεκμηρίωσης
```bash
npm install # Εγκατάσταση docsify-to-pdf
npm install # Εγκαταστήστε το docsify-to-pdf
npm run convert # Δημιουργία PDF από docs
```
@ -204,75 +204,75 @@ npm run convert # Δημιουργία PDF από docs
```bash
npm install -g docsify-cli # Εγκαταστήστε το Docsify παγκοσμίως
docsify serve # Υπηρετήστε στο localhost:3000
docsify serve # Εκτελέστε στον localhost:3000
```
### Κατασκευές ανά Έργο
Κάθε φάκελος έργου μπορεί να έχει τη δική του διαδικασία κατασκευής:
- Vue έργα: `npm run build` δημιουργεί bundles παραγωγής
- Στατικά έργα: Δεν απαιτείται βήμα κατασκευής, εξυπηρετούνται απευθείας τα αρχεία
Κάθε φάκελος έργου μπορεί να έχει δική του διαδικασία κατασκευής:
- Έργα Vue: `npm run build` δημιουργεί παραγωγικά πακέτα
- Στατικά έργα: Δεν απαιτείται βήμα κατασκευής, σερβίρονται απευθείας τα αρχεία
## Οδηγίες Pull Request
### Μορφή Τίτλου
Χρησιμοποιήστε σαφείς, περιγραφικούς τίτλους που υποδεικνύουν την περιοχή αλλαγής:
- `[Quiz-app] Προσθήκη νέου κουίζ για μάθημα X`
- `[Quiz-app] Προσθήκη νέου κουίζ για μάθημα Χ`
- `[Lesson-3] Διόρθωση τυπογραφικού λάθους στο έργο terrarium`
- `[Translation] Προσθήκη ισπανικής μετάφρασης για μάθημα 5`
- `[Translation] Προσθήκη ισπανικής μετάφρασης για το μάθημα 5`
- `[Docs] Ενημέρωση οδηγιών ρύθμισης`
### Απαιτούμενοι Έλεγχοι
Πριν την υποβολή PR:
Πριν από την υποβολή PR:
1. **Ποιότητα Κώδικα**:
- Εκτελέστε `npm run lint` στους επηρεασμένους φακέλους έργων
- Διορθώστε όλα τα σφάλματα και προειδοποιήσεις lint
- Διορθώστε όλα τα σφάλματα και προειδοποιήσεις linting
2. **Επαλήθευση Κατασκευής**:
- Εκτελέστε `npm run build` αν ισχύει
- Εκτελέστε `npm run build` εάν ισχύει
- Βεβαιωθείτε ότι δεν υπάρχουν σφάλματα κατασκευής
3. **Επαλήθευση Συνδέσμων**:
- Δοκιμάστε όλους τους συνδέσμους markdown
- Επαληθεύστε ότι οι αναφορές εικόνων λειτουργούν
4. **Ανασκόπηση Περιεχομένου**:
- Διορθώστε ορθογραφία και γραμματική
- Βεβαιωθείτε ότι τα παραδείγματα κώδικα είναι σωστά και εκπαιδευτικά
- Επαληθεύστε ότι οι μεταφράσεις διατηρούν την αρχική έννοια
4. **Αναθεώρηση Περιεχομένου**:
- Διόρθωση ορθογραφίας και γραμματικής
- Επιβεβαίωση ότι τα παραδείγματα κώδικα είναι σωστά και εκπαιδευτικά
- Επαλήθευση σωστής διατήρησης νοήματος στις μεταφράσεις
### Απαιτήσεις Συμβολής
### Απαιτήσεις Συνεισφοράς
- Αποδοχή Microsoft CLA (αυτόματος έλεγχος στο πρώτο PR)
- Ακολουθήστε τον [Κώδικα Συμπεριφοράς Ανοικτού Κώδικα Microsoft](https://opensource.microsoft.com/codeofconduct/)
- Δείτε το [CONTRIBUTING.md](./CONTRIBUTING.md) για λεπτομερείς οδηγίες
- Αναφέρετε αριθμούς ζητημάτων στη περιγραφή PR, εφόσον εφαρμόζεται
- Αποδοχή του Microsoft CLA (αυτόματος έλεγχος στην πρώτη PR)
- Ακολουθήστε τον [Κώδικα Συμπεριφοράς Ανοιχτού Κώδικα της Microsoft](https://opensource.microsoft.com/codeofconduct/)
- Διαβάστε το [CONTRIBUTING.md](./CONTRIBUTING.md) για λεπτομερείς οδηγίες
- Αναφέρετε αριθμούς ζητημάτων στην περιγραφή PR αν ισχύει
### Διαδικασία Αναθεώρησης
- Τα PR αναθεωρούνται από διαχειριστές και κοινότητα
- Οι PR ελέγχονται από συντηρητές και την κοινότητα
- Προτεραιότητα στην εκπαιδευτική σαφήνεια
- Τα παραδείγματα κώδικα πρέπει να ακολουθούν τις τρέχουσες βέλτιστες πρακτικές
- Οι μεταφράσεις ελέγχονται για ακρίβεια και πολιτιστική καταλληλότητα
- Τα παραδείγματα κώδικα να ακολουθούν τις τρέχουσες βέλτιστες πρακτικές
- Οι μεταφράσεις ελέγχονται για ακρίβεια και πολιτισμική καταλληλότητα
## Σύστημα Μετάφρασης
### Αυτόματη Μετάφραση
- Χρήση GitHub Actions με ροή εργασίας co-op-translator
- Μετάφραση σε πάνω από 50 γλώσσες αυτόματα
- Αρχεία πηγής στους κύριους φακέλους
- Μεταφρασμένα αρχεία σε `translations/{language-code}/`
- Χρησιμοποιεί GitHub Actions με ροή εργασίας co-op-translator
- Μεταφράζει σε πάνω από 50 γλώσσες αυτόματα
- Αρχεία πηγής σε κύριους φακέλους
- Τα μεταφρασμένα αρχεία βρίσκονται σε `translations/{language-code}/`
### Προσθήκη Χειροκίνητων Βελτιώσεων
### Προσθήκη Χειροκίνητων Βελτιώσεων Μετάφρασης
1. Βρείτε το αρχείο σε `translations/{language-code}/`
1. Εντοπίστε το αρχείο σε `translations/{language-code}/`
2. Κάντε βελτιώσεις διατηρώντας τη δομή
3. Εξασφαλίστε ότι τα παραδείγματα κώδικα παραμένουν λειτουργικά
4. Δοκιμάστε το τοπικό κουίζ αν υπάρχει
4. Δοκιμάστε όλο το τοπικοποιημένο περιεχόμενο κουίζ
### Μεταδεδομένα Μετάφρασης
@ -289,120 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Αντιμετώπιση Σφαλμάτων και Επίλυση Προβλημάτων
## Αντιμετώπιση και Επίλυση Προβλημάτων
### Συνηθισμένα Προβλήματα
### Συνήθη Θέματα
**Το quiz app δεν ξεκινά**:
**Η εφαρμογή Quiz δεν ξεκινά**:
- Ελέγξτε την έκδοση 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 είναι >=10
- Ελέγξτε αν θύρα είναι ήδη σε χρήση
- Εξασφαλίστε ότι όλες οι εξαρτήσεις έχουν εγκατασταθεί με `npm install`
**Ο διακομιστής API δεν ξεκινά**:
- Επαληθεύστε ότι η έκδοση Node.js είναι ≥10
- Ελέγξτε αν η θύρα είναι ήδη σε χρήση
- Βεβαιωθείτε ότι όλες οι εξαρτήσεις είναι εγκατεστημένες με `npm install`
**Η επέκταση περιηγητή δεν φορτώνει**:
- Βεβαιωθείτε ότι το manifest.json είναι σωστά διαμορφωμένο
- Ελέγξτε την κονσόλα του περιηγητή για σφάλματα
- Ακολουθήστε τις οδηγίες εγκατάστασης για επεκτάσεις συγκεκριμένου περιηγητή
- Επαληθεύστε ότι το manifest.json είναι σωστά μορφοποιημένο
- Ελέγξτε τα σφάλματα στην κονσόλα περιηγητή
- Ακολουθήστε τις οδηγίες εγκατάστασης για την επέκταση ανά περιηγητή
**Προβλήματα στο έργο συνομιλίας Python**:
- Εγκαταστήστε το πακέτο OpenAI: `pip install openai`
- Βεβαιωθείτε ότι το περιβάλλον μεταβλητής GITHUB_TOKEN είναι ρυθμισμένο
- Βεβαιωθείτε ότι το πακέτο OpenAI είναι εγκατεστημένο: `pip install openai`
- Επαληθεύστε ότι το περιβάλλον GITHUB_TOKEN έχει οριστεί
- Ελέγξτε τα δικαιώματα πρόσβασης στα GitHub Models
**Το Docsify δεν εξυπηρετεί τεκμηρίωση**:
- Εγκαταστήστε το docsify-cli παγκοσμίως: `npm install -g docsify-cli`
- Εκτελέστε από το ριζικό φάκελο του αποθετηρίου
- Βεβαιωθείτε ότι το αρχείο `docs/_sidebar.md` υπάρχει
**Η Docsify δεν σερβίρει τεκμηρίωση**:
- Εγκαταστήστε docsify-cli παγκοσμίως: `npm install -g docsify-cli`
- Εκτελέστε από την ρίζα του αποθετηρίου
- Ελέγξτε ότι υπάρχει το αρχείο `docs/_sidebar.md`
### Συμβουλές Περιβάλλοντος Ανάπτυξης
- Χρησιμοποιήστε VS Code με την επέκταση Live Server για έργα HTML
- Εγκαταστήστε τις επεκτάσεις ESLint και Prettier για συνεπή μορφοποίηση
- Χρησιμοποιήστε τα εργαλεία ανάπτυξης του περιηγητή για αποσφαλμάτωση JavaScript
- Για έργα Vue, εγκαταστήστε την επέκταση Vue DevTools στον περιηγητή
- Χρησιμοποιήστε VS Code με το Live Server extension για έργα HTML
- Εγκαταστήστε τις επεκτάσεις ESLint και Prettier για ομοιόμορφη μορφοποίηση
- Χρησιμοποιήστε τα DevTools του περιηγητή για αποσφαλμάτωση JavaScript
- Για έργα Vue, εγκαταστήστε την επέκταση Vue DevTools για περιηγητές
### Θέματα Απόδοσης
- Ο μεγάλος αριθμός μεταφρασμένων αρχείων (πάνω από 50 γλώσσες) καθιστά τους πλήρεις κλώνους μεγάλους
- Χρησιμοποιήστε shallow clone αν εργάζεστε μόνο με περιεχόμενο: `git clone --depth 1`
- Αποφύγετε τη συμπερίληψη μεταφράσεων σε αναζητήσεις όταν εργάζεστε σε αγγλικό περιεχόμενο
- Οι διαδικασίες κατασκευής μπορεί να είναι αργές στην πρώτη εκτέλεση (npm install, Vite build)
- Ο μεγάλος αριθμός μεταφρασμένων αρχείων (50+ γλώσσες) κάνει τα πλήρη κλωνοποιημένα αρχεία μεγάλα
- Χρησιμοποιήστε επιφανειακό κλώνο αν εργάζεστε μόνο με το περιεχόμενο: `git clone --depth 1`
- Εξαιρέστε τις μεταφράσεις από αναζητήσεις όταν δουλεύετε σε αγγλικό περιεχόμενο
- Οι διαδικασίες κατασκευής μπορεί να είναι αργές στην πρώτη εκτέλεση (npm install, κατασκευή Vite)
## Θέματα Ασφαλείας
### Περιβάλλον Μεταβλητών
### Μεταβλητές Περιβάλλοντος
- Τα κλειδιά API δεν πρέπει ποτέ να δεσμεύονται στο αποθετήριο
- Τα κλειδιά API δεν πρέπει ποτέ να αποθηκεύονται στο αποθετήριο
- Χρησιμοποιήστε αρχεία `.env` (ήδη στο `.gitignore`)
- Τεκμηριώστε τις απαιτούμενες περιβαλλοντικές μεταβλητές στα README των έργων
- Καταγράψτε τις απαιτούμενες μεταβλητές περιβάλλοντος στα README των έργων
### Έργα Python
- Χρησιμοποιήστε εικονικά περιβάλλοντα: `python -m venv venv`
- Κρατήστε τις εξαρτήσεις ενημερωμένες
- Τα tokens GitHub πρέπει να έχουν ελάχιστα απαιτούμενα δικαιώματα
- Διατηρήστε τις εξαρτήσεις ενημερωμένες
- Τα GitHub tokens πρέπει να έχουν τα ελάχιστα απαιτούμενα δικαιώματα
### Πρόσβαση στα GitHub Models
### Πρόσβαση σε GitHub Models
- Απαιτούνται Personal Access Tokens (PAT)
- Τα tokens πρέπει να αποθηκεύονται ως περιβάλλον μεταβλητές
- Ποτέ μην δεσμεύετε tokens ή διαπιστευτήρια
- Απαιτούνται Personal Access Tokens (PAT) για GitHub Models
- Τα tokens πρέπει να αποθηκεύονται ως μεταβλητές περιβάλλοντος
- Ποτέ μην αποθηκεύετε tokens ή διαπιστευτήρια στο αποθετήριο
## Πρόσθετες Σημειώσεις
### Στοχευμένο Κοινό
### Στόχος Κοινού
- Απόλυτοι αρχάριοι στην ανάπτυξη ιστοσελίδων
- Μαθητές και αυτοδίδακτοι
- Εκπαιδευτικοί που χρησιμοποιούν το πρόγραμμα σε τάξεις
- Το περιεχόμενο σχεδιάστηκε με προσβασιμότητα και σταδιακή ανάπτυξη δεξιοτήτων
- Απόλυτα αρχάριοι στην ανάπτυξη ιστοσελίδων
- Φοιτητές και αυτοδίδακτοι
- Εκπαιδευτικοί που χρησιμοποιούν το πρόγραμμα στην τάξη
- Το περιεχόμενο σχεδιάστηκε για προσβασιμότητα και σταδιακή ανάπτυξη δεξιοτήτων
### Εκπαιδευτική Φιλοσοφία
- Προσέγγιση μάθησης βασισμένη σε έργα
- Συχνές αξιολογήσεις γνώσης (κουίζ)
- Πρακτικές ασκήσεις κώδικα
- Συχνές αξιολογήσεις γνώσεων (κουίζ)
- Πρακτικές ασκήσεις κωδικοποίησης
- Παραδείγματα εφαρμογών πραγματικού κόσμου
- Εστίαση στα βασικά πριν τα πλαίσια εργασίας
- Εστίαση στα βασικά πριν τα frameworks
### Συντήρηση Αποθετηρίου
### Διαχείριση Αποθετηρίου
- Ενεργή κοινότητα μαθητών και συνεργατών
- Ενεργή κοινότητα μαθητών και συνεισφερόντων
- Τακτικές ενημερώσεις εξαρτήσεων και περιεχομένου
- Παρακολούθηση ζητημάτων και συζητήσεων από τους διαχειριστές
- Αυτόματες ενημερώσεις μεταφράσεων μέσω GitHub Actions
- Παρακολούθηση ζητημάτων και συζητήσεων από συντηρητές
- Αυτοματοποιημένες ενημερώσεις μεταφράσεων μέσω GitHub Actions
### Σχετικοί Πόροι
- [Microsoft Learn modules](https://docs.microsoft.com/learn/)
- [Μονάδες 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 curricula διαθέσιμα
- Πρόσθετα μαθήματα: Γενετική ΤΝ, Επιστήμη Δεδομένων, ML, IoT διαθέσιμα
### Εργασία με Συγκεκριμένα Έργα
Για λεπτομερείς οδηγίες στα επιμέρους έργα, ανατρέξτε στα αρχεία README στα:
Για λεπτομερείς οδηγίες για κάθε έργο, ανατρέξτε στα README αρχεία:
- `quiz-app/README.md` - Εφαρμογή quiz Vue 3
- `7-bank-project/README.md` - Εφαρμογή τραπεζικού με αυθεντικοποίηση
- `7-bank-project/README.md` - Τραπεζική εφαρμογή με ταυτοποίηση
- `5-browser-extension/README.md` - Ανάπτυξη επέκτασης περιηγητή
- `6-space-game/README.md` - Ανάπτυξη παιχνιδιού με Canvas
- `9-chat-project/README.md` - Έργο βοηθού συνομιλίας AI
- `6-space-game/README.md` - Ανάπτυξη παιχνιδιού με καμβά
- `9-chat-project/README.md` - Έργο βοηθού συνομιλίας με ΤΝ
### Δομή Monorepo
Αν και δεν είναι παραδοσιακό monorepo, αυτό το αποθετήριο περιέχει πολλαπλά ανεξάρτητα έργα:
- Κάθε μάθημα είναι αυτόνομο
- Τα έργα δεν μοιράζονται εξαρτήσεις
- Μπορείτε να εργαστείτε σε μεμονωμένα έργα χωρίς να επηρεάζονται τα υπόλοιπα
- Κλωνοποιήστε ολόκληρο το repo για πλήρη εμπειρία προγράμματος
- Εργαστείτε σε μεμονωμένα έργα χωρίς να επηρεάζετε τα άλλα
- Κλωνοποιήστε ολόκληρο το αποθετήριο για πλήρη εμπειρία προγράμματος σπουδών
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Αποποίηση ευθυνών**:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία μετάφρασης με τεχνητή νοημοσύνη [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που προσπαθούμε για ακρίβεια, παρακαλούμε να γνωρίζετε ότι οι αυτοματοποιημένες μεταφράσεις μπορεί να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα πρέπει να θεωρείται η επίσημη πηγή. Για κρίσιμες πληροφορίες συνιστάται η επαγγελματική μετάφραση από ανθρώπους. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που απορρέουν από τη χρήση αυτής της μετάφρασης.
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που προσπαθούμε για ακρίβεια, παρακαλούμε να γνωρίζετε ότι οι αυτοματοποιημένες μεταφράσεις μπορεί να περιέχουν σφάλματα ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για οποιεσδήποτε παρερμηνείες ή παρανοήσεις προκύψουν από τη χρήση αυτής της μετάφρασης.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-04-06T18:38:38+00:00",
"translation_date": "2026-04-20T16:32:07+00:00",
"source_file": "AGENTS.md",
"language_code": "sv"
},

@ -2,36 +2,36 @@
## Projektöversikt
Detta är ett utbildningscurriculum-repository för att undervisa grundläggande webbutveckling för nybörjare. Curriculumet är en omfattande 12-veckors kurs utvecklad av Microsoft Cloud Advocates, med 24 praktiska lektioner som täcker JavaScript, CSS och HTML.
Detta är ett utbildningscurriculum för att lära ut grunderna i webbutveckling till nybörjare. Curriculumet är en omfattande 12-veckorskurs utvecklad av Microsoft Cloud Advocates, med 24 praktiska lektioner som täcker JavaScript, CSS och HTML.
### Viktiga komponenter
- **Utbildningsinnehåll**: 24 strukturerade lektioner organiserade i projektbaserade moduler
- **Praktiska projekt**: Terrarium, Typningsspel, Webbläsartillägg, Rymdspel, Bankapp, Kodredigerare och AI-chattassistent
- **Interaktiva quiz**: 48 quiz med 3 frågor vardera (före/efter lektion)
- **Fler språkstöd**: Automatiska översättningar till 50+ språk via GitHub Actions
- **Praktiska projekt**: Terrarium, Skrivspel, Webbläsartillägg, Rymdspel, Bankapp, Kodredigerare och AI-chattassistent
- **Interaktiva quiz**: 48 quiz med 3 frågor vardera (före- och efter-lektionsbedömningar)
- **Flerspråkigt stö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
- Utbildningsrepository med lektionbaserad struktur
- Utbildningsrepository med lektionsbaserad struktur
- Varje lektionsmapp innehåller README, kodexempel och lösningar
- Fristående projekt i separata kataloger (quiz-app, olika lektionsprojekt)
- Översättningssystem med GitHub Actions (co-op-translator)
- Dokumentation serveras via Docsify och finns som PDF
- Självständiga projekt i separata kataloger (quiz-app, olika lektionsprojekt)
- Översättningssystem som använder GitHub Actions (co-op-translator)
- Dokumentation tillgänglig via Docsify och som PDF
## Installationskommandon
Detta repository är huvudsakligen för konsumtion av utbildningsinnehåll. För arbete med specifika projekt:
Detta repository är främst för konsumtion av utbildningsinnehåll. För arbete med specifika projekt:
### Huvudrepository Setup
### Huvudrepositoryinstallation
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Quiz App Setup (Vue 3 + Vite)
### Quiz App Installation (Vue 3 + Vite)
```bash
cd quiz-app
@ -72,7 +72,7 @@ npm install
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# Ställ in miljövariabeln GITHUB_TOKEN
# Sätt miljövariabeln GITHUB_TOKEN
python api.py
```
@ -80,29 +80,29 @@ python api.py
### För innehållsbidragare
1. **Gaffla repositoryt** till ditt GitHub-konto
2. **Klona din gaffel** lokalt
1. **Forka repositoryt** 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 projektkataloger
6. Skicka pull requests enligt riktlinjer för bidrag
4. Gör ändringar av lektioninnehåll eller kodexempel
5. Testa kodändringar i relevanta projektmappar
6. Skicka pull requests enligt riktlinjerna för bidrag
### För elever
1. Gaffla eller klona repositoryt
2. Navigera sekventiellt till lektionskatalogerna
1. Forka eller klona repositoryt
2. Navigera sekventiellt till lektionsmappar
3. Läs README-filer för varje lektion
4. Gör förlektion-quiz på https://ff-quizzes.netlify.app/web/
5. Arbeta med kodexempel i lektionsmapparna
4. Genomför quiz före lektioner på https://ff-quizzes.netlify.app/web/
5. Arbeta igenom kodexempel i lektionsmappar
6. Slutför uppgifter och utmaningar
7. Gör efterlektion-quiz
7. Gör quiz efter lektioner
### Livsutveckling
### Live-utveckling
- **Dokumentation**: Kör `docsify serve` i root (port 3000)
- **Quiz App**: Kör `npm run dev` i quiz-app-mappen
- **Projekt**: Använd VS Code Live Server-extension för HTML-projekt
- **API-projekt**: Kör `npm start` i respektive API-kataloger
- **Dokumentation**: Kör `docsify serve` i 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
- **API-projekt**: Kör `npm start` i respektive API-katalog
## Testinstruktioner
@ -111,7 +111,7 @@ python api.py
```bash
cd quiz-app
npm run lint # Kontrollera kodstilproblem
npm run build # Verifiera att byggnaden lyckas
npm run build # Verifiera att kompilering lyckas
```
### Bank API-testning
@ -127,24 +127,24 @@ node server.js # Verifiera att servern startar utan fel
- Detta är ett utbildningsrepository utan omfattande automatiserade tester
- Manuell testning fokuserar på:
- Kodexempel körs utan fel
- Länkar i dokumentationen fungerar korrekt
- Projekt bygger klart utan fel
- Länkar i dokumentation fungerar korrekt
- Projekt bygger klart utan problem
- Exempel följer bästa praxis
### Kontroll före inskickning
- Kör `npm run lint` i kataloger med package.json
- Verifiera att alla markdownlänkar är giltiga
- Verifiera att markdown-länkar är giltiga
- Testa kodexempel i webbläsare eller Node.js
- Kontrollera att översättningar bibehåller korrekt struktur
- Kontrollera att översättningar behåller korrekt struktur
## Kodstilriktlinjer
### JavaScript
- Använd modern ES6+-syntax
- Använd modern ES6+ syntax
- Följ standard ESLint-konfigurationer i projekten
- Använd meningsfulla variabel- och funktionsnamn för utbildningsklarhet
- Använd meningsfulla variabel- och funktionsnamn för tydlighet i utbildningen
- Lägg till kommentarer som förklarar koncept för elever
- Formatera med Prettier där det är konfigurerat
@ -152,19 +152,19 @@ node server.js # Verifiera att servern startar utan fel
- Semantiska HTML5-element
- Responsiva designprinciper
- Tydliga klassnamngivningskonventioner
- Klara och tydliga klassnamn
- Kommentarer som förklarar CSS-tekniker för elever
### Python
- PEP 8-stilriktlinjer
- Följ PEP 8-stilriktlinjer
- Tydliga, pedagogiska kodexempel
- Typanvisningar där det är hjälpsamt för lärandet
- Typanvisningar där det är hjälpsamt för lärande
### Markdown-dokumentation
- Tydlig rubrikhierarki
- Kodblock med språkspecifikation
- 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
@ -172,28 +172,28 @@ node server.js # Verifiera att servern startar utan fel
### Filorganisation
- Lektioner numrerade sekventiellt (1-getting-started-lessons, 2-js-basics, etc.)
- Varje projekt har `solution/` och ofta `start/` eller `your-work/` kataloger
- Bilder lagras i lektionsspecifika `images/`-mappar
- Översättningar i `translations/{language-code}/` struktur
- Varje projekt har `solution/` och ofta `start/` eller `your-work/`-mappar
- Bilder lagras i lektion-specifika `images/`-mappar
- Översättningar i `translations/{language-code}/`-struktur
## Bygg och distribution
### Quiz App Distribution (Azure Static Web Apps)
### Distribution av Quiz App (Azure Static Web Apps)
Quiz-appen är konfigurerad för Azure Static Web Apps-distribution:
quiz-app är konfigurerad för deployment via Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Skapar mappen dist/
# Distribuerar via GitHub Actions-arbetsflöde vid push till main
npm run build # Skapar dist/-mappen
# Distribuerar via GitHub Actions arbetsflöde vid push till main
```
Azure Static Web Apps-konfiguration:
- **App-läge**: `/quiz-app`
- **Utmatningsplats**: `dist`
- **App-lokalisation**: `/quiz-app`
- **Output-lokalisation**: `dist`
- **Arbetsflöde**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Dokumentations-PDF-generering
### PDF-generering av dokumentation
```bash
npm install # Installera docsify-to-pdf
@ -207,11 +207,11 @@ npm install -g docsify-cli # Installera Docsify globalt
docsify serve # Servera på localhost:3000
```
### Projektspecifika byggprocesser
### Projekt-specifika byggprocesser
Varje projektkatalog kan ha egen byggprocess:
Varje projektkatalog kan ha sin egen byggprocess:
- Vue-projekt: `npm run build` skapar produktionspaket
- Statisk projekt: Ingen byggsteg, servera filer direkt
- Statiska projekt: Ingen byggsteg, servera filer direkt
## Pull Request-riktlinjer
@ -219,34 +219,34 @@ Varje projektkatalog kan ha egen byggprocess:
Använd tydliga, beskrivande titlar som anger ändringsområde:
- `[Quiz-app] Lägg till nytt quiz för lektion X`
- `[Lesson-3] Rätta stavfel i terrariumprojekt`
- `[Lesson-3] Åtgärda stavfel i terrariumprojekt`
- `[Translation] Lägg till spansk översättning för lektion 5`
- `[Docs] Uppdatera installationsinstruktioner`
### Obligatoriska kontroller
Innan PR skickas in:
Innan PR skickas:
1. **Kodkvalitet**:
- Kör `npm run lint` i berörda projektkataloger
- Fixa alla lint-fel och varningar
- Kör `npm run lint` i berörda projektmappar
- Åtgärda alla lintfel och varningar
2. **Byggverifiering**:
- Kör `npm run build` om tillämpligt
- Säkerställ inga byggfel
- Säkerställ att inga byggfel uppstår
3. **Länkverifiering**:
- Testa alla markdownlänkar
- Kontrollera att bildreferenser fungerar
3. **Länkvalidering**:
- Testa alla markdown-länkar
- Verifiera bildreferenser fungerar
4. **Innehållsgranskning**:
- Korrekturläs för stavning och grammatik
- Säkerställ att kodexempel är korrekta och pedagogiska
- Verifiera att översättningar bevarar ursprungligt innehåll
- Säkerställ kodexempel är korrekta och pedagogiska
- Kontrollera att översättningar bevarar ursprungligt budskap
### Krav på bidrag
### Bidragskrav
- Godkänn Microsoft CLA (automatiskt vid första PR)
- Acceptera Microsoft CLA (automatisk kontroll vid första PR)
- Följ [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Se [CONTRIBUTING.md](./CONTRIBUTING.md) för detaljerade riktlinjer
- Referera ärendenummer i PR-beskrivning om tillämpligt
@ -254,29 +254,29 @@ Innan PR skickas in:
### Granskningsprocess
- PR granskas av underhållare och community
- Utbildningsklarhet prioriteras
- Pedagogisk tydlighet prioriteras
- Kodexempel ska följa aktuella bästa praxis
- Översättningar granskas för korrekthet och kulturell lämplighet
- Översättningar granskas för korrekthet och kulturell anpassning
## Översättningssystem
### Automatisk översättning
- Använder GitHub Actions med co-op-translator workflow
- Använder GitHub Actions med co-op-translator arbetsflöde
- Översätter automatiskt till 50+ språk
- Källfiler i huvudkataloger
- Översatta filer i `translations/{language-code}/` kataloger
- Översatta filer i `translations/{language-code}/`-mappar
### Lägga till manuella förbättringar
1. Lokalisera fil i `translations/{language-code}/`
2. Gör förbättringar samtidigt som struktur bevaras
3. Säkerställ att kodexempel förblir fungerande
4. Testa eventuell lokaliserad quiz-innehåll
2. Gör förbättringar med bibehållen struktur
3. Säkerställ att kodexempel fortsätter att fungera
4. Testa lokaliserat quiz-innehåll
### Översättningsmetadata
### Metadata för översättningar
Översatta filer inkluderar metadataheader:
Översatta filer inkluderar metadata-header:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,87 +289,87 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Felsökning och Problemlösning
## Felsökning och problemlösning
### Vanliga problem
**Quiz app startar inte**:
- Kontrollera Node.js-version (v14+ rekommenderas)
- Ta bort `node_modules` och `package-lock.json`, kör `npm install` igen
- Kontrollera portkonflikter (default: Vite använder port 5173)
- Kontrollera portkonflikter (standard: Vite använder port 5173)
**API-server startar inte**:
- Kontrollera Node.js-version uppfyller miniminivå (node >=10)
- Kontrollera att port ej används av annat
- Säkerställ att alla beroenden är installerade med `npm install`
- Verifiera att Node.js-version uppfyller minimikrav (node >=10)
- Kontrollera om port redan används
- Se till att alla beroenden är installerade med `npm install`
**Webbläsartillägg laddas inte**:
- Kontrollera att manifest.json är korrekt formaterad
- Kolla webbläsarkonsolen för fel
- Följ webbläsarspecifika installationsinstruktioner
- Verifiera att manifest.json är korrekt formaterad
- Kontrollera webbläsarkonsol för fel
- Följ webbläsarspecifika installationsinstruktioner för tillägg
**Problem med Python chat-projekt**:
**Problem med Python-chattprojekt**:
- Säkerställ att OpenAI-paket är installerat: `pip install openai`
- Verifiera att GITHUB_TOKEN miljövariabel är satt
- Kontrollera GitHub Models-åtkomstbehörigheter
- Kontrollera att miljövariabeln GITHUB_TOKEN är satt
- Kontrollera tillgång till GitHub Models
**Docsify serverar inte dokumentation**:
- Installera docsify-cli globalt: `npm install -g docsify-cli`
- Kör från repositoryts rotkatalog
- Kör från repositories rotkatalog
- Kontrollera att `docs/_sidebar.md` finns
### Utvecklingsmiljötips
### Tips för utvecklingsmiljö
- Använd VS Code med Live Server-extension för HTML-projekt
- Installera ESLint- och Prettier-extensions för konsekvent formatering
- Använd webbläsarens DevTools för JavaScript-felsökning
- För Vue-projekt, installera Vue DevTools-webbläsartillägg
- Använd VS Code med Live Server-tillägg för HTML-projekt
- Installera ESLint och Prettier-tillägg för konsekvent formatering
- Använd webbläsarens utvecklarverktyg för att felsöka JavaScript
- För Vue-projekt, installera Vue DevTools webbläsartillägg
### Prestandabetraktelser
### Prestandaöverväganden
- Stort antal översatta filer (50+ språk) gör hela klon stora
- Använd shallow clone om du bara jobbar med innehåll: `git clone --depth 1`
- Stort antal översatta filer (50+ språk) gör att fulla kloner blir stora
- Använd shallow clone vid arbete enbart med innehåll: `git clone --depth 1`
- Exkludera översättningar från sökningar vid arbete med engelskt innehåll
- Byggprocesser kan vara långsamma vid första körning (npm install, Vite build)
## Säkerhetshänsyn
## Säkerhetsöverväganden
### Miljövariabler
- API-nycklar ska aldrig committas till repository
- Använd `.env`-filer (redan i `.gitignore`)
- Dokumentera nödvändiga miljövariabler i projektens README-filer
- API-nycklar ska aldrig committas till repositoryt
- Använd `.env`-filer (är redan med 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-token bör ha minimala nödvändiga behörigheter
- GitHub-token bör ha minimala tillåtna behörigheter
### GitHub Models-åtkomst
### GitHub Models access
- Personliga access tokens (PAT) krävs för GitHub Models
- Tokens ska sparas som miljövariabler
- Commita aldrig tokens eller autentiseringsuppgifter
- Personliga Access Tokens (PAT) krävs för GitHub Models
- Tokens bör lagras som miljövariabler
- Aldrig commit tokens eller inloggningsuppgifter
## Ytterligare anmärkningar
## Ytterligare anteckningar
### Målgrupp
- Kompletta nybörjare inom webbutveckling
- Kompletta nybörjare i webbutveckling
- Studenter och självstudenter
- Lärare som använder curriculum i klassrum
- Innehållet är utformat för tillgänglighet och gradvis färdighetsträning
- Innehåll designat för tillgänglighet och gradvis kompetensuppbyggnad
### Pedagogisk filosofi
- Projektbaserat lärande
- Frekventa kunskapskontroller (quiz)
- Praktiska programmeringsövningar
- Verklighetsnära exempel
- Fokus på grunderna före ramverk
- Praktiska kodningsövningar
- Exempel från verkliga applikationer
- Fokus på grunder innan ramverk
### Underhåll av repository
### Repositoryunderhåll
- Aktiv community av elever och bidragsgivare
- Regelbundna uppdateringar av beroenden och innehåll
@ -381,28 +381,28 @@ CO_OP_TRANSLATOR_METADATA:
- [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 curriculum tillgängliga
### Arbeta med specifika projekt
För detaljerade instruktioner om enskilda projekt, se README-filer i:
- `quiz-app/README.md` - Vue 3 quiz-applikation
För detaljerade instruktioner om individuella projekt, se README-filer i:
- `quiz-app/README.md` - Vue 3 quizapplikation
- `7-bank-project/README.md` - Bankapplikation med autentisering
- `5-browser-extension/README.md` - Utveckling av webbläsartillägg
- `6-space-game/README.md` - Canvasbaserat spelutveckling
- `5-browser-extension/README.md` - Webbläsartilläggsutveckling
- `6-space-game/README.md` - Canvas-baserat spel
- `9-chat-project/README.md` - AI-chattassistentprojekt
### Monorepo-struktur
Även om detta inte är ett traditionellt monorepo, innehåller detta repository flera oberoende projekt:
Även om det inte är ett traditionellt monorepo innehåller detta repository flera oberoende projekt:
- Varje lektion är självständig
- Projekt delar inte beroenden
- Arbeta med enskilda projekt utan att påverka andra
- Klona hela repo för fullständig curriculumupplevelse
- Arbeta med individuella projekt utan påverkan på andra
- Klona hela repositoryt för hela curriculum-upplevelsen
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfriskrivning**:
Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, vänligen observera att automatiska översättningar kan innehålla fel eller unøyaktigheter. Det ursprungliga dokumentet på dess ursprungliga språk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår 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, var vänlig notera att automatiska översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess modersmål bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för några missförstånd eller feltolkningar som uppstår från användningen av denna översättning.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-04-06T18:37:35+00:00",
"translation_date": "2026-04-20T16:30:58+00:00",
"source_file": "AGENTS.md",
"language_code": "th"
},

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