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

pull/1793/head
localizeflow[bot] 5 months ago
parent fcd22d3e7e
commit eeb49d1ae2

@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-04-06T17:25:14+00:00", "translation_date": "2026-04-20T16:49:57+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "he" "language_code": "he"
}, },

@ -2,27 +2,27 @@
## סקירת הפרויקט ## סקירת הפרויקט
זהו מאגר תוכן חינוכי ללימוד יסודות הפיתוח לאינטרנט למתחילים. התכנית היא קורס מקיף בן 12 שבועות שפותח על ידי Microsoft Cloud Advocates, ומכיל 24 שיעורים מעשיים בנושא JavaScript, CSS ו-HTML. זהו מאגר תוכן חינוכי ללימוד יסודות פיתוח ווב למתחילים. תוכנית הלימודים היא קורס מקיף בן 12 שבועות שפותח על ידי Microsoft Cloud Advocates, הכולל 24 שיעורים מעשיים העוסקים ב-JavaScript, CSS ו-HTML.
### רכיבים מרכזיים ### רכיבים מרכזיים
- **תוכן חינוכי**: 24 שיעורים מסודרים המאורגנים במודולים מבוססי פרויקטים - **תוכן חינוכי**: 24 שיעורים מאורגנים במודולים מבוססי פרויקטים
- **פרויקטים מעשיים**: Terrarium, משחק הקלדה, תוסף דפדפן, משחק חלל, אפליקציית בנקאות, עורך קוד ועוזר צ'אט מבוסס AI - **פרויקטים מעשיים**: טראריום, משחק הקלדה, תוסף דפדפן, משחק חלל, אפליקציית בנקאות, עורך קוד ועוזר צ׳אט מבוסס AI
- **חידונים אינטראקטיביים**: 48 חידונים עם 3 שאלות כל אחד (הערכות לפני/אחרי השיעור) - **חידונים אינטראקטיביים**: 48 חידונים עם 3 שאלות כל אחד (הערכות לפני/אחרי השיעור)
- **תמיכה רב-שפתית**: תרגומים אוטומטיים ל-50+ שפות באמצעות GitHub Actions - **תמיכה רב-שפתית**: תרגומים אוטומטיים ל-50+ שפות דרך GitHub Actions
- **טכנולוגיות**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (לפרויקטי AI) - **טכנולוגיות**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (לפרויקטים מבוססי AI)
### ארכיטקטורה ### ארכיטקטורה
- מאגר חינוכי עם מבנה מבוסס שיעורים - מאגר חינוכי עם מבנה מבוסס שיעורים
- בכל תיקיית שיעור יש README, דוגמאות קוד ופתרונות - כל תיקיית שיעור מכילה README, דוגמאות קוד ופתרונות
- פרויקטים עצמאיים בתיקיות נפרדות (quiz-app, פרויקטי שיעורים שונים) - פרויקטים עצמאיים בתיקיות נפרדות (quiz-app, פרויקטים שונים מתוך השיעורים)
- מערכת תרגום באמצעות GitHub Actions (co-op-translator) - מערכת תרגום באמצעות GitHub Actions (co-op-translator)
- תיעוד מוגש באמצעות Docsify וזמין גם בקובץ PDF - תיעוד המוגש דרך Docsify וזמין גם כ-PDF
## פקודות התקנה ## פקודות התקנה
מאגר זה מיועד בעיקר לצריכת תוכן חינוכי. לעבודה עם פרויקטים ספציפיים: המאגר מיועד בעיקר לצריכת תוכן חינוכי. לעבודה עם פרויקטים ספציפיים:
### התקנת המאגר הראשי ### התקנת המאגר הראשי
@ -30,44 +30,44 @@
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners cd Web-Dev-For-Beginners
``` ```
### התקנת אפליקציית חידונים (Vue 3 + Vite) ### התקנת אפליקציית החידונים (Vue 3 + Vite)
```bash ```bash
cd quiz-app cd quiz-app
npm install npm install
npm run dev # הפעל שרת פיתוח npm run dev # הפעל שרת פיתוח
npm run build # בנייה לסביבה יצרנית npm run build # בנה להפקה
npm run lint # הרץ ESLint npm run lint # הפעל ESLint
``` ```
### API לפרויקט הבנק (Node.js + Express) ### API לפרויקט הבנק (Node.js + Express)
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm install npm install
npm start # הפעל שרת API npm start # הפעל שרת API
npm run lint # הפעל ESLint npm run lint # הפעל את ESLint
npm run format # עיצוב עם Prettier npm run format # עצב עם Prettier
``` ```
### פרויקטים של תוספי דפדפן ### פרויקטים של תוסף דפדפן
```bash ```bash
cd 5-browser-extension/solution cd 5-browser-extension/solution
npm install npm install
# עקוב אחר הוראות טעינת התוספים הספציפיות לדפדפן # עקוב אחר הוראות הטעינה לסיומות הספציפיות לדפדפן
``` ```
### פרויקטים של משחקי חלל ### פרויקטים של משחק חלל
```bash ```bash
cd 6-space-game/solution cd 6-space-game/solution
npm install npm install
# פתח את index.html בדפדפן או השתמש ב-Live Server # פתח את index.html בדפדפן או השתמש ב-Live Server
``` ```
### פרויקט צ'אט (Backend ב-Python) ### פרויקט צ׳אט (Backend בפייתון)
```bash ```bash
cd 9-chat-project/solution/backend/python cd 9-chat-project/solution/backend/python
@ -75,208 +75,208 @@ pip install openai
# הגדר את משתנה הסביבה GITHUB_TOKEN # הגדר את משתנה הסביבה GITHUB_TOKEN
python api.py python api.py
``` ```
## זרימת פיתוח
### לתורמים לתוכן ## זרימת עבודה בפיתוח
1. **בצע fork של המאגר** לחשבון ה-GitHub שלך ### עבור תורמים לתוכן
2. **שכפל את ה-fork** באופן מקומי
3. **צור סניף חדש** עבור השינויים שלך
4. בצע שינויים בתוכן השיעור או בדוגמאות הקוד
5. בדוק שינויים בקוד בתיקיות הפרויקטים הרלוונטיים
6. הגש בקשות משיכה על פי הנחיות התרומה
### ללומדים 1. **צור Fork למאגר** לחשבון ה-GitHub שלך
2. **שכפל את ה-Fork** במחשב המקומי שלך
3. **צור סניף חדש** לשינויים שלך
4. בצע שינויים בתוכן השיעורים או בדוגמאות הקוד
5. בדוק כל שינויי קוד בתיקיות הפרויקט הרלוונטיות
6. הגש בקשות משיכה בהתאם להנחיות התרומה
1. בצע fork או שכפל את המאגר ### עבור הלומדים
2. נווט בתיקיות השיעורים לפי סדר
3. קרא את קבצי README של כל שיעור 1. צור Fork או שכפל את המאגר
4. מלא את חידוני טרום-שיעור בכתובת https://ff-quizzes.netlify.app/web/ 2. עבור רצוף בין תיקיות השיעורים
5. עבוד עם דוגמאות הקוד בתיקיות השיעור 3. קרא את קבצי README עבור כל שיעור
6. השלם מטלות ואתגרים 4. השלם חידוני לפני שיעור בכתובת https://ff-quizzes.netlify.app/web/
7. ענה על חידוני לאחר השיעור 5. עבד על דוגמאות הקוד בתיקיות השיעורים
6. השלם משימות ואתגרים
7. בצע חידוני לאחר השיעור
### פיתוח חי ### פיתוח חי
- **תיעוד**: הפעל `docsify serve` בתיקיית השורש (פורט 3000) - **תיעוד**: הפעל `docsify serve` בתיקיית השורש (פורט 3000)
- **אפליקציית חידונים**: הפעל `npm run dev` בתיקיית quiz-app - **אפליקציית חידונים**: הפעל `npm run dev` בתיקיית quiz-app
- **פרויקטים**: השתמש בתוסף VS Code Live Server לפרויקטי HTML - **פרויקטים**: השתמש ב-VS Code Live Server להפעלת פרויקטים HTML
- **פרויקטי API**: הפעל `npm start` בתיקיות ה-API המתאימות - **פרויקטי API**: הפעל `npm start` בתיקיות ה-API המתאימות
## הנחיות לבדיקות ## הוראות בדיקה
### בדיקות אפליקציית חידונים ### בדיקת אפליקציית חידונים
```bash ```bash
cd quiz-app cd quiz-app
npm run lint # בדוק בעיות סגנון קוד npm run lint # בדוק שגיאות בסגנון הקוד
npm run build # אמת שהבנייה מצליחה npm run build # אמת שהבניין מצליח
``` ```
### בדיקות API בנק ### בדיקת API של הבנק
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm run lint # בדוק בעיות בסגנון הקוד npm run lint # לבדוק בעיות בסגנון הקוד
node server.js # אמת שהשרת מתחיל ללא שגיאות node server.js # לאמת שהשרת מתחיל ללא שגיאות
``` ```
### גישת בדיקות כללית
- זהו מאגר חינוכי ללא בדיקות אוטומטיות מקיפות ### גישת בדיקה כללית
- בדיקות ידניות מתמקדות ב:
- הרצת דוגמאות קוד ללא שגיאות
- קישורים בתיעוד עובדים כראוי
- בניית פרויקטים בהצלחה
- סילוק דוגמאות ע"פ שיטות עבודה מומלצות
### בדיקות לפני שליחה - זהו מאגר חינוכי ללא בדיקות אוטומטיות מקיפות
- בדיקות ידניות מתמקדות ב:
- הפעלת דוגמאות הקוד ללא שגיאות
- קישורים בתיעוד עובדים כשורה
- פרויקטים נבנים בהצלחה
- דוגמאות עוקבות אחר נהלי עבודה מומלצים
- הפעל `npm run lint` בתיקיות עם package.json ### בדיקות לפני הגשה
- אמת את תקינות הקישורים במרקדאון
- בדוק דוגמאות קוד בדפדפן או ב-Node.js - הפעל `npm run lint` בתיקיות המכילות package.json
- וודא שהתרגומים שומרים על המבנה הנכון - ודא כי קישורי markdown תקינים
- בדוק דוגמאות קוד בדפדפן או ב-Node.js
- וודא שהתרגומים שומרים על המבנה הנכון
## קווי הנחיה לסגנון קוד ## קווי הנחיה לסגנון קוד
### JavaScript ### JavaScript
- השתמש בתחביר מודרני ES6+ - השתמש בתחביר מודרני ES6+
- פעל לפי הגדרות ESLint הסטנדרטיות בפרויקטים - עקוב אחר הגדרות ESLint סטנדרטיות בפרויקטים
- השתמש בשמות משתנים ופונקציות בעלי משמעות ברורה עבור לימוד - השתמש בשמות משתנים ופונקציות משמעותיים לצורך הבהרה חינוכית
- הוסף הערות המסבירות מושגים ללומדים - הוסף הערות המסבירות מושגים ללומדים
- עיצוב הקוד באמצעות Prettier במקומות שהוגדרו - עיצוב באמצעות Prettier כשמוגדר
### HTML/CSS ### HTML/CSS
- אלמנטים סמנטיים של HTML5 - אלמנטים סמליים ב-HTML5
- עקרונות עיצוב רספונסיבי - עקרונות עיצוב רספונסיבי
- קונבנציות שמות ברורות למחלקות - קונבנציות ברורות לשמות מחלקות
- הערות המסבירות טכניקות CSS ללומדים - הערות המסבירות טכניקות CSS ללומדים
### Python ### Python
- הנחיות סגנון PEP 8 - קווי הנחיה בסגנון PEP 8
- דוגמאות קוד ברורות וחינוכיות - דוגמאות קוד ברורות וחינוכיות
- רמזי טיפוס (type hints) במידת הצורך ללמידה - רמזי טיפוס כאשר זה מועיל ללמידה
### תיעוד Markdown ### תיעוד ב-Markdown
- היררכיית כותרות ברורה - היררכיית כותרות ברורה
- בלוקים עם ציון שפת הקוד - בלוקי קוד עם הגדרת שפה
- קישורים למשאבים נוספים - קישורים למשאבים נוספים
- צילומי מסך ותמונות בתיקיות `images/` - צילומי מסך ותמונות בתיקיות `images/`
- טקסט אלטרנטיבי לתמונות לנגישות - טקסט חלופי לתמונות לנגישות
### ארגון קבצים ### ארגון קבצים
- שיעורים ממוספרים ברצף (1-getting-started-lessons, 2-js-basics וכו') - שיעורים ממוספרים בסדר (1-getting-started-lessons, 2-js-basics וכו׳)
- לכל פרויקט תיקיית `solution/` ולעיתים גם `start/` או `your-work/` - לכל פרויקט תיקיות `solution/` ולעיתים `start/` או `your-work/`
- תמונות מאוחסנות בתיקיות `images/` ייעודיות לשיעור - תמונות מאוחסנות בתיקיות `images/` ספציפיות לשיעור
- תרגומים בתיקיות `translations/{language-code}/` - תרגומים במבנה `translations/{language-code}/`
## בנייה ופריסה ## בנייה ופריסה
### פריסת אפליקציית חידונים (Azure Static Web Apps) ### פריסת אפליקציית חידונים (Azure Static Web Apps)
האפליקציה מוגדרת לפריסת Azure Static Web Apps: אפליקציית החידונים מוגדרת לפריסה בשירות Azure Static Web Apps:
```bash ```bash
cd quiz-app cd quiz-app
npm run build # יוצרת תיקיה dist/ npm run build # יוצרת את התיקיה dist/
# מפרסמת דרך תהליך GitHub Actions בלחיצה על main # מבצעת פריסה דרך זרימת עבודה של GitHub Actions בעת דחיפה לענף main
``` ```
ההגדרות לפריסת Azure Static Web Apps:
- **מיקום האפליקציה**: `/quiz-app`
- **מיקום הפלט**: `dist`
- **זרימת עבודה**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### יצירת PDF של התיעוד הגדרות Azure Static Web Apps:
- **מיקום האפליקציה**: `/quiz-app`
- **מיקום הפלט**: `dist`
- **זרימת עבודה**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### יצירת PDF לתיעוד
```bash ```bash
npm install # התקן docsify-to-pdf npm install # התקן docsify-to-pdf
npm run convert # יצירת PDF מ-docs npm run convert # יצירת PDF מ-docs
``` ```
### תיעוד Docsify ### תיעוד Docsify
```bash ```bash
npm install -g docsify-cli # התקן את Docsify בצורה גלובלית npm install -g docsify-cli # התקן את Docsify באופן גלובלי
docsify serve # הפעל על localhost:3000 docsify serve # שרת על localhost:3000
``` ```
### תהליכי בנייה ספציפיים לפרויקטים
לכל פרויקט יכול להיות תהליך בנייה משלו: ### בניות ייחודיות לפרויקט
- פרויקטי Vue: `npm run build` ליצירת חבילות הפצה
- פרויקטים סטטיים: אין שלב בנייה, שרת קבצים ישירות לכל תיקיית פרויקט יכול להיות תהליך בנייה משלה:
- פרויקטים ב-Vue: הפעל `npm run build` ליצירת חבילות ייצור
- פרויקטים סטטיים: אין שלב בנייה, מגישים את הקבצים ישירות
## הנחיות להגשת בקשות משיכה ## קווי הנחיה לבקשות משיכה
### פורמט הכותרת ### פורמט הכותרת
השתמש בכותרות ברורות ומתארות את תחום השינוי: השתמש בכותרות ברורות ומתארות עם אזור השינוי:
- `[Quiz-app] הוסף חידון חדש לשיעור X` - `[Quiz-app] הוסף חידון חדש לשיעור X`
- `[Lesson-3] תקן טעות בפרויקט terrarium` - `[Lesson-3] תיקון שגיאת הקלדה בפרויקט טראריום`
- `[Translation] הוסף תרגום לספרדית לשיעור 5` - `[Translation] הוסף תרגום ספרדי לשיעור 5`
- `[Docs] עדכן הוראות התקנה` - `[Docs] עדכן הוראות התקנה`
### בדיקות דרושות ### בדיקות נדרשות
לפני הגשת PR: לפני הגשת PR:
1. **איכות קוד**: 1. **איכות קוד**:
- הפעל `npm run lint` בתיקיות הפרויקט הרלוונטיות - הפעל `npm run lint` בתיקיות הפרויקט הרלוונטיות
- תקן את כל שגיאות ואזהרות הלינטר - תקן כל שגיאה או אזהרה
2. **אימות בנייה**: 2. **אימות בנייה**:
- הפעל `npm run build` אם רלוונטי - הפעל `npm run build` אם נדרש
- וודא שאין שגיאות בנייה - וודא שאין שגיאות בנייה
3. **תיקוף קישורים**: 3. **אימות קישורים**:
- בדוק את כל הקישורים במרקדאון - בדוק את כל קישורי ה-markdown
- אמת הפניות לתמונות - ודא שהקישורים לתמונות תקינים
4. **סקירת תוכן**: 4. **סקירת תוכן**:
- בדוק איות ודקדוק - ערוך הגהה לאיות ותחביר
- ודא שהדוגמאות בקוד נכונות ומלמדות - ודא שהדוגמאות נכונות וחינוכיות
- אמת שהתרגומים שומרים על המשמעות המקורית - וודא שהתרגומים שומרים על המשמעות המקורית
### דרישות לתרומה ### דרישות לתרומה
- הסכמה על Microsoft CLA (בדיקה אוטומטית בבקשה הראשונה) - אישור CLA של מיקרוסופט (בדיקה אוטומטית בעת PR ראשון)
- פועלים לפי [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) - עקוב אחר [קוד ההתנהגות של Microsoft Open Source](https://opensource.microsoft.com/codeofconduct/)
- ראו [CONTRIBUTING.md](./CONTRIBUTING.md) להנחיות מפורטות - עיין בקובץ [CONTRIBUTING.md](./CONTRIBUTING.md) להנחיות מפורטות
- ציין מספרי נושאים בתיאור הבקשה אם רלוונטי - התייחס למספרי נושאים בתיאור ה-PR אם רלוונטי
### תהליך סיקור ### תהליך סקירה
- בקשות משיכה נסקרות על ידי מנחים והקהילה - בקשות משיכה נסקרות על ידי מנהלים והקהילה
- עדיפות לבריאות חינוכית - דגש על בהירות חינוכית
- יש לעקוב אחרי שיטות עבודה מומלצות בדוגמאות קוד - דוגמאות קוד צריכות לעקוב אחר נהלי עבודה מומלצים
- התרגומים נסקרים לדיוק ולהתאמה תרבותית - תרגומים נבדקים לדיוק והתאמה תרבותית
## מערכת תרגום ## מערכת תרגום
### תרגום אוטומטי ### תרגום אוטומטי
- משתמש ב-GitHub Actions עם זרימת עבודה co-op-translator - משתמש ב-GitHub Actions עם זרימת עבודה co-op-translator
- מתרגם ל-50+ שפות באופן אוטומטי - מתרגם ל-50+ שפות אוטומטית
- קבצי מקור בתיקיות הראשיות - קבצי מקור בתיקיות הראשיות
- קבצים מתורגמים בתיקיות `translations/{language-code}/` - קבצי תרגום בתיקיות `translations/{language-code}/`
### הוספת שיפורים ידניים לתרגום ### הוספת שיפורים ידניים לתרגום
1. אתר את הקובץ בתיקיית `translations/{language-code}/` 1. אתר את הקובץ בתיקיית `translations/{language-code}/`
2. בצע שיפורים תוך שמירה על המבנה 2. בצע שיפורים תוך שמירת המבנה
3. ודא שדוגמאות הקוד נשארות תקינות 3. וודא שדוגמאות הקוד נשארות פונקציונליות
4. בדוק כל תוכן חידון מקומי 4. בדוק כל תוכן חידונים מותאם
### מטא-נתוני תרגום ### מטא-דאטה לתרגומים
קבצים מתורגמים כוללים כותרת מטא-נתונים: קבצי התרגום כוללים כותרת מטא-דאטה:
```markdown ```markdown
<!-- <!--
CO_OP_TRANSLATOR_METADATA: CO_OP_TRANSLATOR_METADATA:
@ -288,121 +288,121 @@ CO_OP_TRANSLATOR_METADATA:
} }
--> -->
``` ```
## איתור שגיאות ופתרון בעיות ## איתור באגים ופתרון בעיות
### בעיות נפוצות ### בעיות נפוצות
**האפליקציית חידונים נכשלת בהפעלה**: **אפליקציית החידונים לא מתחילה**:
- בדוק גרסת Node.js (מומלץ v14+) - בדוק את גרסת Node.js (מומלץ v14+)
- מחק `node_modules` ו-`package-lock.json` והפעל `npm install` מחדש - מחק את `node_modules` ו-`package-lock.json`, והפעל מחדש `npm install`
- בדוק סתירות פורטים (ברירת מחדל: Vite משתמש בפורט 5173) - בדוק סתירות פורטים (ברירת מחדל: Vite משתמש ב-5173)
**שרת ה-API לא מתחיל**: **שרת ה-API לא מתחיל**:
- אמת שגרסת Node.js מתאימה (node >=10) - ודא שגרסת Node.js מתאימה (node >=10)
- בדוק אם הפורט כבר בשימוש - בדוק אם הפורט כבר בשימוש
- ודא שכל התלויות מותקנות עם `npm install` - ודא שכל התלויות מותקנות עם `npm install`
**תוסף הדפדפן לא נטען**: **הרחבת הדפדפן לא נטענת**:
- אמת ש-manifest.json מעוצב כראוי - בדוק שהקובץ manifest.json מעוצב כראוי
- בדוק קונסול דפדפן לשגיאות - בדוק בלוג הדפדפן לשגיאות
- פעל לפי הוראות התקנת תוסף ספציפיות לדפדפן - עקוב אחר הוראות ההתקנה הספציפיות לדפדפן
**בעיות בפרויקט צ'אט ב-Python**: **בעיות בפרויקט צ׳אט בפייתון**:
- ודא שמותקן חבילת OpenAI: `pip install openai` - ודא שהחבילה OpenAI מותקנת: `pip install openai`
- אמת ש-GITHUB_TOKEN מוגדר בסביבה - בדוק שהמשתנה הסביבתי GITHUB_TOKEN מוגדר
- בדוק הרשאות גישה ל-GitHub Models - בדוק הרשאות גישה למודלים דרך GitHub
**Docsify לא מגיש את התיעוד**: **Docsify לא מגישה תיעוד**:
- התקן docsify-cli גלובלי: `npm install -g docsify-cli` - התקן docsify-cli גלובלית: `npm install -g docsify-cli`
- הפעל מתיקיית השורש של המאגר - הפעל מהתיקייה השורשית של המאגר
- בדוק שקיים `docs/_sidebar.md` - ודא שקיים הקובץ `docs/_sidebar.md`
### טיפים לסביבת פיתוח ### טיפים לסביבת פיתוח
- השתמש ב-VS Code עם תוסף Live Server לפרויקטים HTML - השתמש ב-VS Code עם הרחבת Live Server לפרויקטים ב-HTML
- התקן את תוספי ESLint ו-Prettier לעיצוב עקבי - התקן את ההרחבות ESLint ו-Prettier לעיצוב עקבי
- השתמש בכלי הפיתוח של הדפדפן לדיבוג JavaScript - השתמש בכלי הפיתוח של הדפדפן לניפוי שגיאות ב-JavaScript
- לפרויקטי Vue, התקן תוסף Vue DevTools לדפדפן - לפרויקטים ב-Vue התקן Vue DevTools בדפדפן
### שיקולי ביצועים ### שיקולי ביצועים
- מספר רב של קבצים מתורגמים (50+ שפות) גורם לשכפולים גדולים - מספר גדול של קבצי תרגום (50+ שפות) גורם לשכפולים מלאים להיות כבדים
- השתמש בשכפול רדוד אם עובד רק עם התוכן: `git clone --depth 1` - השתמש בשכפול רדוד אם עובד רק על תוכן: `git clone --depth 1`
- הוצא תרגומים מחיפושים בעת עבודה על תוכן באנגלית - וחרג תוצאות חיפוש מתרגומים בעת עבודה על תוכן באנגלית
- תהליכי בנייה עשויים להיות איטיים בהרצה ראשונה (npm install, Vite build) - תהליכי בנייה עלולים להיות איטיים בהרצה הראשונה (npm install, בניית Vite)
## שיקולי אבטחה ## שיקולי אבטחה
### משתני סביבה ### משתני סביבה
- אסור להכניס מפתחות API למאגר - אסור לשמור מפתחות API במאגר
- השתמש בקבצי `.env` (כבר ב-`.gitignore`) - השתמש בקבצי `.env` (כבר ב-.gitignore)
- תעד משתני סביבה נדרשים בקבצי README של הפרויקטים - תעד משתני סביבה נדרשים בקבצי README של הפרויקטים
### פרויקטים ב-Python ### פרויקטים בפייתון
- השתמש בסביבות וירטואליות: `python -m venv venv` - השתמש בסביבות וירטואליות: `python -m venv venv`
- שמור על עדכון תלותים - שמור על עדכון התלויות
- טוקנים ל-GitHub צריכים להיות בעלי הרשאות מינימליות - אסימונים של GitHub צריכים להיות עם הרשאות מינימליות
### גישה ל-GitHub Models ### גישה למודלים של GitHub
- דרושים Personal Access Tokens (PAT) ל-GitHub Models - דרושים Personal Access Tokens (PAT) לגישה למודלים
- יש לאחסן טוקנים במשתני סביבה - יש לאחסן אסימונים במשתני סביבה
- אף פעם לא להכניס טוקנים או אישורים למאגר - לעולם לא לשמור אסימונים או אישורים בקוד
## הערות נוספות ## הערות נוספות
### קהל יעד ### קהל יעד
- מתחילים מלאים בפיתוח אינטרנט - מתחילים מלאים בפיתוח ווב
- תלמידים ולומדים עצמאיים - סטודנטים ולומדים עצמאיים
- מורים שמשתמשים בתכנית בכיתות - מורים המשתמשים בתוכנית בכיתות לימוד
- התוכן מותאם לנגישות ולהתפתחות מיומנויות הדרגתית - התוכן מיועד לנגישות ובניית מיומנויות בהדרגה
### פילוסופיית הלימוד ### הפילוסופיה החינוכית
- גישה מבוססת פרויקטים - גישה מבוססת פרויקטים ללמידה
- בדיקות ידע תכופות (חידונים) - בדיקות ידע תכופות (חידונים)
- תרגילי קידוד מעשיים - תרגילי קידוד מעשיים
- דוגמאות ליישומים בעולם האמיתי - דוגמאות לשימוש בעולם האמיתי
- התמקדות ביסודות לפני מסגרות עבודה - דגש על יסודות לפני מבני עבודה
### תחזוקת המאגר ### תחזוקת המאגר
- קהילה פעילה של לומדים ותורמים - קהילה פעילה של לומדים ותורמים
- עדכונים סדירים לתלויות ותוכן - עדכונים שוטפים לתלויות ולתוכן
- ניהול נושאים ודיונים על ידי מנהלים - מעקב אחר נושאים ודיונים על ידי מנהלים
- עדכוני תרגום אוטומטיים באמצעות GitHub Actions - עדכוני תרגום אוטומטיים באמצעות GitHub Actions
### משאבים קשורים ### משאבים נלווים
- [Microsoft Learn modules](https://docs.microsoft.com/learn/) - [מודולי Microsoft Learn](https://docs.microsoft.com/learn/)
- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/) - [משאבי Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) מומלץ ללומדים - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) מומלץ ללומדים
- קורסים נוספים: AI גנרטיבי, מדעי נתונים, למידת מכונה, IoT - קורסים נוספים: AI גנרטיבי, מדעי נתונים, למידת מכונה, IoT זמינים
### עבודה עם פרויקטים ספציפיים ### עבודה עם פרויקטים ספציפיים
להוראות מפורטות לפרויקטים בודדים, עיין בקבצי README ב: להוראות מפורטות על פרויקטים בודדים, עיין בקבצי README ב:
- `quiz-app/README.md` - אפליקציית חידונים ב-Vue 3 - `quiz-app/README.md` - אפליקציית חידונים ב-Vue 3
- `7-bank-project/README.md` - אפליקציית בנקאות עם אימות - `7-bank-project/README.md` - אפליקציית בנקאות עם אימות
- `5-browser-extension/README.md` - פיתוח תוסף דפדפן - `5-browser-extension/README.md` - פיתוח תוסף דפדפן
- `6-space-game/README.md` - פיתוח משחק מבוסס Canvas - `6-space-game/README.md` - פיתוח משחק מבוסס קנבס
- `9-chat-project/README.md` - פרויקט עוזר צ'אט מבוסס AI - `9-chat-project/README.md` - פרויקט עוזר צ׳אט מבוסס AI
### מבנה מונורפו ### מבנה מונורפו
אף שזו לא מונורפו קלאסית, המאגר מכיל מספר פרויקטים עצמאיים: למרות שאינו מונורפו מסורתי, מאגר זה מכיל מספר פרויקטים עצמאיים:
- כל שיעור הוא עצמאי - כל שיעור עצמאי
- אין שיתוף תלותים בין פרויקטים - הפרויקטים אינם חולקים תלותיות
- העבודה על פרויקטים בודדים ללא השפעה על האחרים - עבוד על פרויקטים נפרדים ללא השפעה על אחרים
- שכפל את כל המאגר לחוויית הלימוד המלאה - שכפל את כל המאגר לחוויית תוכנית לימודים מלאה
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**כתב ויתור**: **כתב ויתור**:
מסמך זה תורגם באמצעות שירות התרגום בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לשים לב כי תרגומים ממוחשבים עלולים להכיל טעויות או אי-דיוקים. יש להתייחס למסמך המקורי בשפתו המקורית כמקור הסמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי על ידי מתרגם אנושי. אנו לא אחראיים לכל אי-הבנה או פרשנות שגויה הנובעות מהשימוש בתרגום זה. מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש להיות מודעים לכך שתירגומים אוטומטיים עלולים להכיל שגיאות או אי-דיוקים. המסמך המקורי בשפת המקור שלו הוא המקור הסמכותי. למידע קריטי מומלץ להשתמש בתרגום מקצועי של אדם. אנו לא אחראים לכל אי-הבנה או פרשנות שגויה הנובעת משימוש בתרגום זה.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-04-06T17:24:17+00:00", "translation_date": "2026-04-20T16:48:51+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "nl" "language_code": "nl"
}, },

@ -2,27 +2,27 @@
## Projectoverzicht ## Projectoverzicht
Dit is een educatieve curriculumrepository voor het aanleren van webontwikkelingbasisprincipes aan beginners. Het curriculum is een uitgebreide cursus van 12 weken, ontwikkeld door Microsoft Cloud Advocates, met 24 praktische lessen die JavaScript, CSS en HTML behandelen. Dit is een educatieve curriculumrepository voor het onderwijzen van de basisprincipes van webontwikkeling aan beginners. Het curriculum is een uitgebreide cursus van 12 weken, ontwikkeld door Microsoft Cloud Advocates, met 24 praktische lessen over JavaScript, CSS en HTML.
### Belangrijkste Componenten ### Belangrijkste Componenten
- **Educatieve Inhoud**: 24 gestructureerde lessen georganiseerd in projectgebaseerde modules - **Educatieve Inhoud**: 24 gestructureerde lessen georganiseerd in projectgebaseerde modules
- **Praktische Projecten**: Terrarium, Typspel, Browserextensie, Ruimtespel, Bankapp, Code-editor en AI Chat-assistent - **Praktische Projecten**: Terrarium, Typwedstrijd, Browserextensie, Ruimtegame, Bankapp, Code-editor en AI Chatassistent
- **Interactieve Quizzen**: 48 quizzen met elk 3 vragen (pre-/post-les evaluaties) - **Interactieve Quizzen**: 48 quizzen met elk 3 vragen (voor-/nabesprekingen)
- **Meertalige Ondersteuning**: Geautomatiseerde vertalingen voor 50+ talen via GitHub Actions - **Meertalige Ondersteuning**: Geautomatiseerde vertalingen voor meer dan 50 talen via GitHub Actions
- **Technologieën**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (voor AI-projecten) - **Technologieën**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (voor AI-projecten)
### Architectuur ### Architectuur
- Educatieve repository met lesgebaseerde structuur - Educatieve repository met op lessen gebaseerde structuur
- Elke lesmap bevat README, codevoorbeelden en oplossingen - Elke lesmap bevat README, codevoorbeelden en oplossingen
- Zelfstandige projecten in aparte mappen (quiz-app, diverse lesprojecten) - Losstaande projecten in aparte mappen (quiz-app, diverse lesprojecten)
- Vertalingssysteem met behulp van GitHub Actions (co-op-translator) - Vertalingssysteem via GitHub Actions (co-op-translator)
- Documentatie geleverd via Docsify en beschikbaar als PDF - Documentatie verzorgd via Docsify en beschikbaar als PDF
## Setup Commando's ## Setup Commando's
Deze repository is primair bedoeld voor het consumeren van educatieve inhoud. Voor het werken met specifieke projecten: Deze repository is hoofdzakelijk bedoeld voor het consumeren van educatieve inhoud. Voor het werken met specifieke projecten:
### Hoofdrepository Setup ### Hoofdrepository Setup
@ -48,10 +48,10 @@ cd 7-bank-project/api
npm install npm install
npm start # Start API-server npm start # Start API-server
npm run lint # Voer ESLint uit npm run lint # Voer ESLint uit
npm run format # Formatteer met Prettier npm run format # Opmaak met Prettier
``` ```
### Browser Extensie Projecten ### Browserextensie Projecten
```bash ```bash
cd 5-browser-extension/solution cd 5-browser-extension/solution
@ -59,7 +59,7 @@ npm install
# Volg browser-specifieke instructies voor het laden van extensies # Volg browser-specifieke instructies voor het laden van extensies
``` ```
### Ruimtespel Projecten ### Ruimtegame Projecten
```bash ```bash
cd 6-space-game/solution cd 6-space-game/solution
@ -80,29 +80,29 @@ python api.py
### Voor Inhoudbijdragers ### Voor Inhoudbijdragers
1. **Fork de repository** naar je GitHub-account 1. **Fork de repository** naar je GitHub-account
2. **Clone je fork** lokaal 2. **Clone je fork** lokaal
3. **Maak een nieuwe branch** aan voor je wijzigingen 3. **Maak een nieuwe branch** voor je wijzigingen
4. Breng wijzigingen aan in lesinhoud of codevoorbeelden 4. Breng wijzigingen aan in lesinhoud of codevoorbeelden
5. Test eventuele codewijzigingen in relevante projectmappen 5. Test eventuele codewijzigingen in relevante projectmappen
6. Dien pull requests in volgens de bijdrage richtlijnen 6. Dien pull requests in volgens de bijdrage-richtlijnen
### Voor Studenten ### Voor Leerlingen
1. Fork of clone de repository 1. Fork of clone de repository
2. Navigeer sequentieel door de lesmappen 2. Navigeer sequentieel door lesmappen
3. Lees de README-bestanden van elke les 3. Lees README-bestanden voor elke les
4. Maak pre-les quizzen bij https://ff-quizzes.netlify.app/web/ 4. Maak pre-les quizzen via https://ff-quizzes.netlify.app/web/
5. Werk de codevoorbeelden in lesmappen door 5. Doorloop codevoorbeelden in lesmappen
6. Voltooi opdrachten en uitdagingen 6. Maak opdrachten en uitdagingen
7. Maak post-les quizzen 7. Maak post-les quizzen
### Live Ontwikkeling ### Live Ontwikkeling
- **Documentatie**: Voer `docsify serve` uit in de root (poort 3000) - **Documentatie**: Run `docsify serve` in root (poort 3000)
- **Quiz App**: Voer `npm run dev` uit in de quiz-app map - **Quiz App**: Run `npm run dev` in quiz-app map
- **Projecten**: Gebruik VS Code Live Server extensie voor HTML-projecten - **Projecten**: Gebruik VS Code Live Server extensie voor HTML-projecten
- **API Projecten**: Voer `npm start` uit in de betreffende API-mappen - **API Projecten**: Run `npm start` in respectievelijke API mappen
## Testinstructies ## Testinstructies
@ -110,71 +110,71 @@ python api.py
```bash ```bash
cd quiz-app cd quiz-app
npm run lint # Controleren op problemen met de code stijl npm run lint # Controleer op codeerstijlfouten
npm run build # Verifiëren dat de build slaagt npm run build # Verifieer dat de build slaagt
``` ```
### Bank API Testen ### Bank API Testen
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm run lint # Controleer op codeerstijl problemen npm run lint # Controleer op problemen met de code-stijl
node server.js # Controleer of de server zonder fouten start node server.js # Controleer of de server zonder fouten start
``` ```
### Algemene Testaanpak ### Algemene Testaanpak
- Dit is een educatieve repository zonder uitgebreide geautomatiseerde tests - Dit is een educatieve repository zonder uitgebreide geautomatiseerde tests
- Handmatig testen richt zich op: - Handmatig testen richt zich op:
- Codevoorbeelden draaien zonder fouten - Codevoorbeelden draaien zonder fouten
- Links in documentatie werken correct - Links in documentatie werken correct
- Project builds voltooien succesvol - Projectbuilds worden succesvol afgerond
- Voorbeelden volgen best practices - Voorbeelden volgen best practices
### Pre-submissie Checks ### Pre-submissie Controles
- Voer `npm run lint` uit in mappen met package.json - Run `npm run lint` in mappen met package.json
- Controleer of markdown links geldig zijn - Controleer of markdown links geldig zijn
- Test codevoorbeelden in browser of Node.js - Test codevoorbeelden in browser of Node.js
- Controleer dat vertalingen de juiste structuur behouden - Controleer dat vertalingen juiste structuur behouden
## Code Style Richtlijnen ## Code Stijlgids
### JavaScript ### JavaScript
- Gebruik moderne ES6+ syntaxis - Gebruik moderne ES6+ syntax
- Volg standaard ESLint-configuraties uit projecten - Volg standaard ESLint configuraties die in projecten zijn opgenomen
- Gebruik betekenisvolle variabele- en functienamen voor educatieve duidelijkheid - Gebruik betekenisvolle variabele- en functienamen om educatief inzicht te bieden
- Voeg commentaar toe die concepten uitleggen voor studenten - Voeg commentaar toe ter uitleg van concepten voor leerlingen
- Format gebruikmakend van Prettier waar ingesteld - Formatteer met Prettier waar geconfigureerd
### HTML/CSS ### HTML/CSS
- Semantische HTML5 elementen - Semantische HTML5 elementen
- Responsive design principes - Responsive design principes
- Duidelijke naamgevingsconventies voor classes - Duidelijke class naamgevingsconventies
- Commentaar dat CSS-technieken uitlegt voor studenten - Commentaar met uitleg over CSS-technieken voor leerlingen
### Python ### Python
- PEP 8 stijl richtlijnen - PEP 8 stijlrichtlijnen
- Duidelijke, educatieve codevoorbeelden - Duidelijke, educatieve codevoorbeelden
- Type hints waar nuttig voor het leren - Type hints waar nuttig voor het leren
### Markdown Documentatie ### Markdown Documentatie
- Duidelijke kopstructuur - Duidelijke kopjeshiërarchie
- Codeblokken met taal specificatie - Codeblokken met taal specificatie
- Links naar aanvullende bronnen - Links naar aanvullende bronnen
- Screenshots en afbeeldingen in `images/` mappen - Screenshots en afbeeldingen in `images/` mappen
- Alternatieve tekst voor afbeeldingen voor toegankelijkheid - Alt-tekst voor afbeeldingen voor toegankelijkheid
### Bestandsorganisatie ### Bestandsorganisatie
- Lessen genummerd op volgorde (1-getting-started-lessons, 2-js-basics, enz.) - Lessen genummerd in volgorde (1-getting-started-lessons, 2-js-basics, etc.)
- Elk project heeft `solution/` en vaak `start/` of `your-work/` mappen - Elk project heeft `solution/` en vaak `start/` of `your-work/` mappen
- Afbeeldingen opgeslagen in les-specifieke `images/` mappen - Afbeeldingen opgeslagen in les-specifieke `images/` mappen
- Vertalingen in `translations/{taalcode}/` structuur - Vertalingen in `translations/{language-code}/` structuur
## Build en Deployment ## Build en Deployment
@ -184,14 +184,14 @@ De quiz-app is geconfigureerd voor Azure Static Web Apps deployment:
```bash ```bash
cd quiz-app cd quiz-app
npm run build # Maakt map dist/ aan npm run build # Maakt de dist/ map aan
# Zet uit via GitHub Actions workflow bij push naar main # Zet uit via GitHub Actions workflow bij push naar main
``` ```
Azure Static Web Apps configuratie: Azure Static Web Apps configuratie:
- **App locatie**: `/quiz-app` - **App-locatie**: `/quiz-app`
- **Output locatie**: `dist` - **Output-locatie**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` - **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Documentatie PDF Generatie ### Documentatie PDF Generatie
@ -204,79 +204,79 @@ npm run convert # Genereer PDF van docs
```bash ```bash
npm install -g docsify-cli # Installeer Docsify globaal npm install -g docsify-cli # Installeer Docsify globaal
docsify serve # Server op localhost:3000 docsify serve # Serveer op localhost:3000
``` ```
### Projectspecifieke Builds ### Project-specifieke Builds
Elke projectmap kan een eigen buildproces hebben: Elke projectmap kan een eigen buildproces hebben:
- Vue projecten: `npm run build` genereert productie bundles - Vue-projecten: `npm run build` maakt productiebundels
- Statische projecten: Geen build stap, lever bestanden direct aan - Statische projecten: Geen build-stap, bestanden direct serveren
## Pull Request Richtlijnen ## Pull Request Richtlijnen
### Titel Formaat ### Titel Formaat
Gebruik duidelijke, beschrijvende titels die het wijzigingsgebied aangeven: Gebruik duidelijke, beschrijvende titels die het wijzigingsgebied aangeven:
- `[Quiz-app] Voeg nieuwe quiz toe voor les X` - `[Quiz-app] Nieuwe quiz toegevoegd voor les X`
- `[Lesson-3] Verander typefout in terrarium project` - `[Lesson-3] Typfout opgelost in terrarium-project`
- `[Translation] Voeg Spaanse vertaling toe voor les 5` - `[Translation] Spaanse vertaling toegevoegd voor les 5`
- `[Docs] Werk installatie-instructies bij` - `[Docs] Setup instructies bijgewerkt`
### Verplichte Checks ### Vereiste Controles
Voor het indienen van een PR: Voor het indienen van een PR:
1. **Codekwaliteit**: 1. **Codekwaliteit**:
- Voer `npm run lint` uit in de betrokken projectmappen - Run `npm run lint` in de betrokken projectmappen
- Los alle lintfouten en waarschuwingen op - Los alle lintfouten en waarschuwingen op
2. **Build Validatie**: 2. **Buildverificatie**:
- Voer `npm run build` uit indien van toepassing - Run `npm run build` indien van toepassing
- Zorg dat er geen build-fouten zijn - Zorg dat er geen buildfouten zijn
3. **Link Validatie**: 3. **Link Validatie**:
- Test alle markdown links - Test alle markdown links
- Controleer of afbeeldingsreferenties werken - Controleer of afbeeldingsreferenties werken
4. **Inhoud Review**: 4. **Inhoud Review**:
- Controleer spelling en grammatica - Controleer spelling en grammatica
- Zorg dat codevoorbeelden correct en educatief zijn - Zorg dat codevoorbeelden correct en educatief zijn
- Verifieer dat vertalingen de oorspronkelijke betekenis behouden - Controleer dat vertalingen oorspronkelijke betekenis behouden
### Bijdragevereisten ### Bijdragereisen
- Stem in met Microsoft CLA (automatische controle bij eerste PR) - Akkoord gaan met Microsoft CLA (geautomatiseerde check bij eerste PR)
- Volg de [Microsoft Open Source Gedragscode](https://opensource.microsoft.com/codeofconduct/) - Volg de [Microsoft Open Source Gedragscode](https://opensource.microsoft.com/codeofconduct/)
- Zie [CONTRIBUTING.md](./CONTRIBUTING.md) voor gedetailleerde richtlijnen - Zie [CONTRIBUTING.md](./CONTRIBUTING.md) voor gedetailleerde richtlijnen
- Verwijs in de PR-beschrijving naar issue-nummers indien van toepassing - Verwijs naar issue nummers in PR-omschrijving indien van toepassing
### Reviewproces ### Reviewproces
- PR’s worden beoordeeld door maintainers en de community - PR's worden beoordeeld door maintainers en community
- Educatieve duidelijkheid heeft prioriteit - Educatieve helderheid krijgt prioriteit
- Codevoorbeelden moeten huidige best practices volgen - Codevoorbeelden volgen huidige best practices
- Vertalingen worden gecontroleerd op nauwkeurigheid en culturele gepastheid - Vertalingen worden beoordeeld op nauwkeurigheid en culturele relevantie
## Vertalingssysteem ## Vertalingssysteem
### Geautomatiseerde Vertaling ### Geautomatiseerde Vertaling
- Maakt gebruik van GitHub Actions met co-op-translator workflow - Maakt gebruik van GitHub Actions met co-op-translator workflow
- Vertaalt automatisch naar 50+ talen - Vertalingen in meer dan 50 talen automatisch
- Bronbestanden in hoofdmap - Bronbestanden in hoofdmappen
- Vertaalde bestanden in `translations/{taalcode}/` mappen - Vertaalde bestanden in `translations/{language-code}/` mappen
### Handmatige Vertalingsverbeteringen Toevoegen ### Manuele Vertaalverbeteringen Toevoegen
1. Zoek bestand in `translations/{taalcode}/` 1. Zoek bestand in `translations/{language-code}/`
2. Breng verbeteringen aan terwijl structuur behouden blijft 2. Breng verbeteringen aan en behoud de structuur
3. Zorg dat codevoorbeelden functioneel blijven 3. Zorg dat codevoorbeelden functioneel blijven
4. Test eventuele gelokaliseerde quizinhoud 4. Test alle gelokaliseerde quizinhoud
### Vertaal Metadata ### Vertaalmetadata
Vertaalde bestanden bevatten een metadata-header: Vertaalde bestanden bevatten metadata-header:
```markdown ```markdown
<!-- <!--
CO_OP_TRANSLATOR_METADATA: CO_OP_TRANSLATOR_METADATA:
@ -293,116 +293,116 @@ CO_OP_TRANSLATOR_METADATA:
### Veelvoorkomende Problemen ### Veelvoorkomende Problemen
**Quiz-app start niet**: **Quiz-app start niet**:
- Controleer Node.js versie (v14+ aanbevolen) - Controleer Node.js versie (v14+ aanbevolen)
- Verwijder `node_modules` en `package-lock.json`, voer daarna `npm install` opnieuw uit - Verwijder `node_modules` en `package-lock.json`, run `npm install` opnieuw
- Controleer op poortconflicten (standaard: Vite gebruikt poort 5173) - Controleer op poortconflicten (standaard: Vite gebruikt poort 5173)
**API-server start niet**: **API-server start niet**:
- Controleer of Node.js versie voldoet aan minimum (node >=10) - Controleer Node.js versie (node >=10 vereist)
- Controleer of poort al in gebruik is - Controleer of poort al in gebruik is
- Zorg dat alle dependencies geïnstalleerd zijn met `npm install` - Zorg dat alle dependencies geïnstalleerd zijn met `npm install`
**Browserextensie laadt niet**: **Browserextensie laadt niet**:
- Controleer of manifest.json correct is geformatteerd - Controleer of manifest.json correct is geformatteerd
- Bekijk browserconsole op fouten - Check browserconsole op fouten
- Volg browser-specifieke extensie installatie-instructies - Volg browser-specifieke installatie-instructies voor extensies
**Python chat project problemen**: **Problemen met Python chat project**:
- Zorg dat OpenAI package geïnstalleerd is: `pip install openai` - Zorg dat OpenAI package is geïnstalleerd: `pip install openai`
- Controleer of GITHUB_TOKEN omgevingsvariabele is ingesteld - Controleer of GITHUB_TOKEN omgevingsvariabele is ingesteld
- Controleer GitHub Models toegangsrechten - Controleer toegangsrechten voor GitHub Models
**Docsify serveert geen docs**: **Docsify serveert geen documentatie**:
- Installeer docsify-cli globaal: `npm install -g docsify-cli` - Installeer docsify-cli globaal: `npm install -g docsify-cli`
- Voer uit vanuit de root directory van de repository - Run vanuit root van repository
- Controleer of `docs/_sidebar.md` aanwezig is - Controleer dat `docs/_sidebar.md` bestaat
### Tips Ontwikkelomgeving ### Tips Ontwikkelomgeving
- Gebruik VS Code met Live Server extensie voor HTML-projecten - Gebruik VS Code met Live Server extensie voor HTML-projecten
- Installeer ESLint- en Prettier-extensies voor consistente formattering - Installeer ESLint en Prettier extensies voor consistente formattering
- Gebruik browser DevTools voor het debuggen van JavaScript - Gebruik browser DevTools voor debugging van JavaScript
- Voor Vue-projecten, installeer Vue DevTools browserextensie - Voor Vue-projecten: installeer Vue DevTools browser extensie
### Prestatieoverwegingen ### Prestatie-overwegingen
- Groot aantal vertaalde bestanden (50+ talen) betekent dat volledige clones groot zijn - Groot aantal vertaalde bestanden (50+ talen) betekent grote klonen
- Gebruik shallow clone als je alleen aan inhoud werkt: `git clone --depth 1` - Gebruik shallow clone als je alleen aan inhoud werkt: `git clone --depth 1`
- Sluit vertalingen uit van zoekopdrachten bij het werken aan Engelse inhoud - Sluit vertalingen uit bij zoekopdrachten tijdens Engels werken
- Buildprocessen kunnen traag zijn bij eerste uitvoering (npm install, Vite build) - Buildprocessen kunnen traag zijn bij eerste run (npm install, Vite build)
## Beveiligingsoverwegingen ## Beveiligingsoverwegingen
### Omgevingsvariabelen ### Omgevingsvariabelen
- API-sleutels mogen nooit in de repository worden gecommit - API-sleutels nooit aan repository toevoegen
- Gebruik `.env` bestanden (reeds opgenomen in `.gitignore`) - Gebruik `.env` bestanden (staan al in `.gitignore`)
- Documenteer vereiste omgevingsvariabelen in project-READMEs - Documenteer benodigde omgevingsvariabelen in project-READMEs
### Python Projecten ### Python Projecten
- Gebruik virtuele omgevingen: `python -m venv venv` - Gebruik virtuele omgevingen: `python -m venv venv`
- Houd dependencies up-to-date - Houd dependencies up-to-date
- GitHub-tokens moeten minimale benodigde rechten hebben - GitHub tokens met minimale benodigde rechten
### GitHub Models Toegang ### GitHub Models Toegang
- Persoonlijke toegangstokens (PAT) zijn vereist voor GitHub Models - Persoonlijke Toegangstokens (PAT) vereist voor GitHub Models
- Tokens moeten worden opgeslagen als omgevingsvariabelen - Tokens opslaan als omgevingsvariabelen
- Tokens of inloggegevens nooit committen - Nooit tokens of inloggegevens committen
## Aanvullende Notities ## Aanvullende Notities
### Doelgroep ### Doelgroep
- Volledige beginners in webontwikkeling - Volledig beginners in webontwikkeling
- Studenten en zelflerenden - Studenten en zelflerenden
- Docenten die het curriculum in de klas gebruiken - Docenten die het curriculum in klassen gebruiken
- Inhoud is ontworpen voor toegankelijkheid en geleidelijke vaardigheidsopbouw - Inhoud ontworpen voor toegankelijkheid en geleidelijke vaardigheidsopbouw
### Educatieve Filosofie ### Educatieve Filosofie
- Projectgebaseerde leerbenadering - Projectgebaseerde leerbenadering
- Frequente kenniscontroles (quizzen) - Regelmatige kennischecks (quizzen)
- Praktische codeer oefeningen - Praktische code-oefeningen
- Voorbeelden van toepassing in de praktijk - Voorbeelden van toepassingen uit de echte wereld
- Focus op basisprincipes voordat frameworks aan bod komen - Focus op basisprincipes voor frameworks
### Repository Onderhoud ### Repository Onderhoud
- Actieve community van lerenden en bijdragers - Actieve gemeenschap van leerlingen en bijdragers
- Regelmatige updates van dependencies en inhoud - Regelmatige updates van dependencies en inhoud
- Issues en discussies worden gemonitord door maintainers - Issues en discussies worden door maintainers gemonitord
- Vertaalupdates geautomatiseerd via GitHub Actions - Vertaalupdates geautomatiseerd via GitHub Actions
### Gerelateerde Bronnen ### Gerelateerde Bronnen
- [Microsoft Learn modules](https://docs.microsoft.com/learn/) - [Microsoft Learn modules](https://docs.microsoft.com/learn/)
- [Student Hub bronnen](https://docs.microsoft.com/learn/student-hub/) - [Student Hub bronnen](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) aanbevolen voor lerenden - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) aanbevolen voor leerlingen
- Extra cursussen: Generatieve AI, Data Science, ML, IoT curricula beschikbaar - Extra cursussen: Generative AI, Data Science, ML, IoT curricula beschikbaar
### Werken met Specifieke Projecten ### Werken met Specifieke Projecten
Voor gedetailleerde instructies over individuele projecten, zie de README-bestanden in: Voor gedetailleerde instructies over individuele projecten, zie de README-bestanden in:
- `quiz-app/README.md` - Vue 3 quiz applicatie - `quiz-app/README.md` - Vue 3 quizapplicatie
- `7-bank-project/README.md` - Bankapplicatie met authenticatie - `7-bank-project/README.md` - Banking app met authenticatie
- `5-browser-extension/README.md` - Browserextensie ontwikkeling - `5-browser-extension/README.md` - Browserextensie ontwikkeling
- `6-space-game/README.md` - Canvas-gebaseerd spel - `6-space-game/README.md` - Canvas-gebaseerde gameontwikkeling
- `9-chat-project/README.md` - AI chat-assistent project - `9-chat-project/README.md` - AI chatassistent project
### Monorepo-structuur ### Monorepo Structuur
Hoewel geen traditionele monorepo, bevat deze repository meerdere onafhankelijke projecten: Hoewel het geen traditionele monorepo is, bevat deze repository meerdere onafhankelijke projecten:
- Elke les is zelfstandig - Elke les is zelfstandig
- Projecten delen geen dependencies - Projecten delen geen dependencies
- Werk aan individuele projecten zonder anderen te beïnvloeden - Werk aan individuele projecten zonder anderen te beïnvloeden
- Clone hele repo voor de volledige curriculumervaring - Clone de gehele repo voor de volledige curriculumervaring
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Disclaimer**: **Disclaimer**:
Dit document is vertaald met behulp van de AI vertaaldienst [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onjuistheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet als de gezaghebbende bron worden beschouwd. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling. Dit document is vertaald met behulp van de AI-vertalingsservice [Co-op Translator](https://github.com/Azure/co-op-translator). Hoewel we streven naar nauwkeurigheid, dient u er rekening mee te houden dat automatische vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het oorspronkelijke document in de oorspronkelijke taal moet als de gezaghebbende bron worden beschouwd. Voor kritieke informatie wordt een professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
}, },
"AGENTS.md": { "AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34", "original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-04-06T17:26:14+00:00", "translation_date": "2026-04-20T16:51:16+00:00",
"source_file": "AGENTS.md", "source_file": "AGENTS.md",
"language_code": "vi" "language_code": "vi"
}, },

@ -1,47 +1,47 @@
# AGENTS.md # AGENTS.md
## Tổng quan dự án ## Giới Thiệu Dự Án
Đây là khoá học giáo dục dành cho việc giảng dạy các kiến thức cơ bản về phát triển web cho người mới bắt đầu. Khóa học là một chương trình toàn diện kéo dài 12 tuần được phát triển bởi Microsoft Cloud Advocates, bao gồm 24 bài học thực hành với các chủ đề về JavaScript, CSS và HTML. Đây là kho tài liệu giáo dục dành cho việc giảng dạy các kiến thức cơ bản về phát triển web cho người mới bắt đầu. Chương trình học là một khóa học toàn diện kéo dài 12 tuần được phát triển bởi Microsoft Cloud Advocates, bao gồm 24 bài học thực hành về JavaScript, CSS và HTML.
### Các thành phần chính ### Thành Phần Chính
- **Nội dung giáo dục**: 24 bài học có cấu trúc được tổ chức theo các mô-đun dự án - **Nội dung giáo dục**: 24 bài học có cấu trúc, tổ chức thành các mô-đun dự án
- **Dự án thực hành**: Terrarium, Trò chơi gõ phím, Tiện ích mở rộng trình duyệt, Trò chơi không gian, Ứng dụng ngân hàng, Trình chỉnh sửa mã và Trợ lý chat AI - **Dự án thực hành**: Terrarium, Trò chơi gõ chữ, Tiện ích mở rộng trình duyệt, Trò chơi không gian, Ứng dụng ngân hàng, Trình soạn thảo mã, và Trợ lý trò chuyện AI
- **Bài kiểm tra tương tác**: 48 bài kiểm tra với 3 câu hỏi mỗi bài (đánh giá trước và sau bài học) - **Bài kiểm tra tương tác**: 48 bài kiểm tra với 3 câu hỏi mỗi bài (đánh giá trước/sau bài học)
- **Hỗ trợ đa ngôn ngữ**: Dịch tự động cho hơn 50 ngôn ngữ thông qua GitHub Actions - **Hỗ trợ đa ngôn ngữ**: Dịch tự động sang hơn 50 ngôn ngữ qua GitHub Actions
- **Công nghệ**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (cho dự án AI) - **Công nghệ**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (cho các dự án AI)
### Kiến trúc ### Kiến Trúc
- Khoá học có cấu trúc dựa trên từng bài học - Kho tài liệu giáo dục theo cấu trúc dựa trên bài học
- Mỗi thư mục bài học chứa README, ví dụ mã nguồn và các giải pháp - Mỗi thư mục bài học chứa README, ví dụ mã và giải pháp
- Các dự án độc lập được đặt trong các thư mục riêng biệt (quiz-app, các dự án bài học khác nhau) - Các dự án độc lập trong các thư mục riêng (quiz-app, các dự án bài học khác)
- Hệ thống dịch thuật sử dụng GitHub Actions (co-op-translator) - Hệ thống dịch thuật sử dụng GitHub Actions (co-op-translator)
- Tài liệu được phục vụ qua Docsify và có sẵn dưới dạng PDF - Tài liệu được phục vụ qua Docsify và có sẵn dưới dạng PDF
## Các lệnh thiết lập ## Các Lệnh Thiết Lập
Kho lưu trữ này chủ yếu dành cho việc tiêu thụ nội dung giáo dục. Để làm việc với các dự án cụ thể: Kho này chủ yếu dùng để truy cập nội dung giáo dục. Để làm việc với các dự án cụ thể:
### Thiết lập kho chính ### Thiết Lập Kho Chính
```bash ```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners cd Web-Dev-For-Beginners
``` ```
### Thiết lập Ứng dụng Quiz (Vue 3 + Vite) ### Thiết Lập Ứng Dụng Quiz (Vue 3 + Vite)
```bash ```bash
cd quiz-app cd quiz-app
npm install npm install
npm run dev # Khởi động máy chủ phát triển npm run dev # Khởi động máy chủ phát triển
npm run build # Xây dựng cho môi trường sản xuất npm run build # Xây dựng cho sản xuất
npm run lint # Chạy ESLint npm run lint # Chạy ESLint
``` ```
### API dự án ngân hàng (Node.js + Express) ### API Dự Án Ngân Hàng (Node.js + Express)
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
@ -51,15 +51,15 @@ npm run lint # Chạy ESLint
npm run format # Định dạng với Prettier npm run format # Định dạng với Prettier
``` ```
### Dự án tiện ích mở rộng trình duyệt ### Các Dự Án Tiện Ích Mở Rộng Trình Duyệt
```bash ```bash
cd 5-browser-extension/solution cd 5-browser-extension/solution
npm install npm install
# Làm theo hướng dẫn tải tiện ích mở rộng dành riêng cho trình duyệt # Làm theo hướng dẫn tải tiện ích mở rộng theo trình duyệt cụ thể
``` ```
### Dự án trò chơi không gian ### Các Dự Án Trò Chơi Không Gian
```bash ```bash
cd 6-space-game/solution cd 6-space-game/solution
@ -67,7 +67,7 @@ npm install
# Mở index.html trong trình duyệt hoặc sử dụng Live Server # Mở index.html trong trình duyệt hoặc sử dụng Live Server
``` ```
### Dự án chat (Backend Python) ### Dự Án Trò Chuyện (Backend Python)
```bash ```bash
cd 9-chat-project/solution/backend/python cd 9-chat-project/solution/backend/python
@ -76,207 +76,207 @@ pip install openai
python api.py python api.py
``` ```
## Quy trình phát triển ## Quy Trình Phát Triển
### Dành cho người đóng góp nội dung ### Dành Cho Người Đóng Góp Nội Dung
1. **Fork kho lưu trữ** sang tài khoản GitHub của bạn 1. **Fork kho** về tài khoản GitHub của bạn
2. **Clone bản fork** về máy tính cá nhân 2. **Clone bản fork** về máy cục bộ
3. **Tạo nhánh mới** cho các thay đổi của bạn 3. **Tạo nhánh mới** để thực hiện thay đổi
4. Thực hiện thay đổi nội dung bài học hoặc ví dụ mã 4. Thay đổi nội dung bài học hoặc ví dụ mã
5. Kiểm tra các thay đổi mã trong thư mục dự án liên quan 5. Kiểm thử các thay đổi mã trong thư mục dự án liên quan
6. Gửi pull request theo hướng dẫn đóng góp 6. Gửi pull request theo hướng dẫn đóng góp
### Dành cho người học ### Dành Cho Người Học
1. Fork hoặc clone kho lưu trữ 1. Fork hoặc clone kho về
2. Điều hướng lần lượt đến các thư mục bài học 2. Di chuyển tuần tự đến các thư mục bài học
3. Đọc file README của mỗi bài học 3. Đọc các file README cho mỗi bài học
4. Hoàn thành bài kiểm tra trước bài học tại https://ff-quizzes.netlify.app/web/ 4. Hoàn thành bài kiểm tra trước bài học tại https://ff-quizzes.netlify.app/web/
5. Làm các ví dụ mã trong thư mục bài học 5. Làm các ví dụ mã trong thư mục bài học
6. Hoàn thành các bài tập và thử thách 6. Hoàn thành các bài tập và thử thách
7. Tham gia bài kiểm tra sau bài học 7. Tham gia bài kiểm tra sau bài học
### Phát triển trực tiếp ### Phát Triển Trực Tiếp
- **Tài liệu**: Chạy `docsify serve` trong thư mục gốc (cổng 3000) - **Tài liệu**: Chạy `docsify serve` ở thư mục gốc (cổng 3000)
- **Ứng dụng Quiz**: Chạy `npm run dev` trong thư mục quiz-app - **Ứng dụng Quiz**: Chạy `npm run dev` trong thư mục quiz-app
- **Dự án**: Sử dụng extension Live Server của VS Code cho các dự án HTML - **Dự án**: Dùng tiện ích VS Code Live Server cho các dự án HTML
- **API**: Chạy `npm start` trong thư mục API tương ứng - **Dự án API**: Chạy `npm start` trong các thư mục API tương ứng
## Hướng dẫn kiểm tra ## Hướng Dẫn Kiểm Thử
### Kiểm tra ứng dụng Quiz ### Kiểm Thử Ứng Dụng Quiz
```bash ```bash
cd quiz-app cd quiz-app
npm run lint # Kiểm tra các vấn đề về phong cách mã npm run lint # Kiểm tra các vấn đề về phong cách mã
npm run build # Xác minh rằng việc xây dựng thành công npm run build # Xác minh xây dựng thành công
``` ```
### Kiểm tra API ngân hàng ### Kiểm Thử API Ngân Hàng
```bash ```bash
cd 7-bank-project/api cd 7-bank-project/api
npm run lint # Kiểm tra các vấn đề về kiểu mã npm run lint # Kiểm tra các vấn đề về phong cách mã
node server.js # Xác minh máy chủ khởi động không có lỗi node server.js # Xác minh máy chủ khởi động không có lỗi
``` ```
### Cách tiếp cận kiểm tra chung ### Phương Pháp Kiểm Thử Chung
- Đây là kho giáo dục không có các bài kiểm tra tự động toàn diện - Kho giáo dục này không có các bài kiểm thử tự động đầy đủ
- Kiểm tra thủ công tập trung vào: - Kiểm thử thủ công tập trung vào:
- Ví dụ mã chạy không lỗi - Ví dụ mã chạy không lỗi
- Các liên kết trong tài liệu hoạt động đúng - Các liên kết trong tài liệu hoạt động chính xác
- Các bản build dự án hoàn tất thành công - Các dự án build thành công
- Ví dụ tuân thủ các thực hành tốt nhất - Ví dụ theo đúng thực tiễn tốt nhất
### Kiểm tra trước khi gửi ### Kiểm Tra Trước Khi Gửi
- Chạy `npm run lint` trong các thư mục có package.json - Chạy `npm run lint` trong các thư mục có package.json
- Xác minh liên kết markdown có hợp lệ - Xác minh các liên kết markdown hợp lệ
- Thử các ví dụ mã trên trình duyệt hoặc Node.js - Kiểm thử các ví dụ mã trong trình duyệt hoặc Node.js
- Đảm bảo bản dịch giữ đúng cấu trúc - Kiểm tra dịch thuật duy trì cấu trúc chính xác
## Hướng dẫn phong cách mã ## Hướng Dẫn Phong Cách Mã
### JavaScript ### JavaScript
- Sử dụng cú pháp ES6+ hiện đại - Dùng cú pháp ES6+ hiện đại
- Tuân theo cấu hình ESLint chuẩn có trong dự án - Tuân thủ cấu hình ESLint tiêu chuẩn trong các dự án
- Đặt tên biến và hàm có ý nghĩa rõ ràng để dễ học - Đặt tên biến và hàm rõ nghĩa, dễ hiểu cho học viên
- Thêm chú thích giải thích các khái niệm cho người học - Thêm chú thích giải thích khái niệm cho người học
- Định dạng mã sử dụng Prettier khi đã thiết lập - Định dạng mã bằng Prettier nếu được cấu hình
### HTML/CSS ### HTML/CSS
- Sử dụng các phần tử HTML5 mang tính ngữ nghĩa - Các thành phần HTML5 có ngữ nghĩa
- Nguyên tắc thiết kế đáp ứng - Nguyên tắc thiết kế đáp ứng (responsive)
- Quy ước đặt tên lớp rõ ràng - Quy ước đặt tên class rõ ràng
- Chú thích giải thích kỹ thuật CSS cho người học - Chú thích kỹ thuật CSS giải thích cho học viên
### Python ### Python
- Tuân theo chuẩn style PEP 8 - Tuân thủ hướng dẫn phong cách PEP 8
- Ví dụ mã nguồn rõ ràng, phục vụ mục đích học tập - Ví dụ mã rõ ràng, phù hợp giáo dục
- Gợi ý kiểu dữ liệu (type hints) khi hữu ích - Thêm chỉ dẫn kiểu (type hints) nếu giúp người học
### Tài liệu Markdown ### Tài Liệu Markdown
- Cấu trúc tiêu đề rõ ràng - Cấp độ tiêu đề rõ ràng
- Khối mã kèm định nghĩa ngôn ngữ - Khối mã khai báo ngôn ngữ lập trình
- Liên kết đến tài nguyên bổ sung - Liên kết nguồn tài liệu bổ sung
- Ảnh chụp màn hình và hình ảnh trong thư mục `images/` - Ảnh chụp màn hình và hình ảnh trong thư mục `images/`
- Văn bản thay thế (alt text) cho ảnh để truy cập tốt hơn - Văn bản thay thế (alt text) cho hình ảnh để tăng khả năng tiếp cận
### Tổ chức tệp ### Tổ Chức Tệp
- Các bài học được đánh số tuần tự (1-getting-started-lessons, 2-js-basics, v.v.) - Bài học đánh số tuần tự (1-getting-started-lessons, 2-js-basics, vv)
- Mỗi dự án có thư mục `solution/` thường kèm theo `start/` hoặc `your-work/` - Mỗi dự án có thư mục `solution/` và thường có thư mục `start/` hoặc `your-work/`
- Ảnh lưu trong thư mục `images/` riêng của từng bài học - Hình ảnh lưu trong thư mục `images/` riêng từng bài học
- Các bản dịch nằm trong cấu trúc `translations/{language-code}/` - Bản dịch trong cấu trúc `translations/{language-code}/`
## Xây dựng và Triển khai ## Xây Dựng và Triển Khai
### Triển khai Ứng dụng Quiz (Azure Static Web Apps) ### Triển Khai Ứng Dụng Quiz (Azure Static Web Apps)
Ứng dụng quiz-app được cấu hình để triển khai trên Azure Static Web Apps: Ứng dụng quiz đã được cấu hình để triển khai với Azure Static Web Apps:
```bash ```bash
cd quiz-app cd quiz-app
npm run build # Tạo thư mục dist/ npm run build # Tạo thư mục dist/
# Triển khai qua workflow GitHub Actions khi đẩy lên main # Triển khai thông qua quy trình làm việc GitHub Actions khi đẩy lên nhánh main
``` ```
Cấu hình Azure Static Web Apps: Cấu hình Azure Static Web Apps:
- **Đường dẫn ứng dụng**: `/quiz-app` - **Vị trí ứng dụng**: `/quiz-app`
- **Đường dẫn đầu ra**: `dist` - **Vị trí đầu ra**: `dist`
- **Quy trình làm việc**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` - **Quy trình làm việc**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Tạo tài liệu PDF ### Tạo PDF Tài Liệu
```bash ```bash
npm install # Cài đặt docsify-to-pdf npm install # Cài đặt docsify-to-pdf
npm run convert # Tạo PDF từ docs npm run convert # Tạo PDF từ docs
``` ```
### Tài liệu Docsify ### Tài Liệu Docsify
```bash ```bash
npm install -g docsify-cli # Cài đặt Docsify toàn cục npm install -g docsify-cli # Cài đặt Docsify toàn cục
docsify serve # Phục vụ trên localhost:3000 docsify serve # Phục vụ trên localhost:3000
``` ```
### Xây dựng theo dự án ### Build Riêng Cho Dự Án
Mỗi thư mục dự án có thể có quy trình build riêng: Mỗi thư mục dự án có thể có quy trình build riêng:
- Dự án Vue: `npm run build` tạo các bundle production - Dự án Vue: chạy `npm run build` để tạo gói sản xuất
- Dự án tĩnh: không cần bước build, phục vụ file trực tiếp - Dự án tĩnh: không cần bước build, phục vụ file trực tiếp
## Hướng dẫn Pull Request ## Hướng Dẫn Pull Request
### Định dạng tiêu đề ### Định Dạng Tiêu Đề
Sử dụng tiêu đề rõ ràng, mô tả vùng thay đổi: Dùng tiêu đề rõ ràng, mô tả khu vực thay đổi:
- `[Quiz-app] Thêm bài quiz mới cho bài học X` - `[Quiz-app] Thêm bài kiểm tra mới cho bài học X`
- `[Lesson-3] Sửa lỗi đánh máy trong dự án terrarium` - `[Lesson-3] Sửa lỗi chính tả trong dự án terrarium`
- `[Translation] Thêm bản dịch tiếng Tây Ban Nha cho bài 5` - `[Translation] Thêm bản dịch tiếng Tây Ban Nha cho bài học 5`
- `[Docs] Cập nhật hướng dẫn thiết lập` - `[Docs] Cập nhật hướng dẫn thiết lập`
### Các kiểm tra bắt buộc ### Kiểm Tra Bắt Buộc
Trước khi gửi PR: Trước khi gửi PR:
1. **Chất lượng mã**: 1. **Chất lượng mã**:
- Chạy `npm run lint` trong thư mục dự án bị ảnh hưởng - Chạy `npm run lint` trong các thư mục dự án ảnh hưởng
- Sửa tất cả lỗi và cảnh báo lint - Sửa tất cả lỗi và cảnh báo lint
2. **Kiểm tra build**: 2. **Xác minh build**:
- Chạy `npm run build` nếu có - Chạy `npm run build` nếu có
- Đảm bảo không có lỗi build - Đảm bảo không có lỗi build
3. **Kiểm tra liên kết**: 3. **Kiểm tra liên kết**:
- Thử tất cả các liên kết markdown - Thử tất cả các liên kết markdown
- Xác minh tham chiếu ảnh - Xác nhận hình ảnh hiển thị đúng
4. **Đánh giá nội dung**: 4. **Kiểm duyệt nội dung**:
- Đọc lại, kiểm tra lỗi chính tả và ngữ pháp - Đọc lại chính tả và ngữ pháp
- Đảm bảo ví dụ mã đúng và phục vụ giáo dục - Đảm bảo ví dụ mã chính xác và phù hợp học thuật
- Kiểm tra bản dịch giữ nguyên ý nghĩa gốc - Xác nhận bản dịch giữ nguyên nghĩa
### Yêu cầu đóng góp ### Yêu Cầu Đóng Góp
- Đồng ý với Microsoft CLA (kiểm tra tự động lần đầu PR) - Đồng ý với Microsoft CLA (kiểm tra tự động khi PR đầu tiên)
- Tuân theo [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) - Tuân thủ [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Xem [CONTRIBUTING.md](./CONTRIBUTING.md) để biết hướng dẫn chi tiết - Tham khảo [CONTRIBUTING.md](./CONTRIBUTING.md) để biết hướng dẫn chi tiết
- Tham chiếu số issue trong mô tả PR nếu có - Tham chiếu số issue trong mô tả PR nếu có
### Quy trình đánh giá ### Quy Trình Đánh Giá
- Các PR được đánh giá bởi người duy trì và cộng đồng - PR được duyệt bởi người duy trì và cộng đồng
- Ưu tiên tính rõ ràng trong giáo dục - Ưu tiên tính rõ ràng trong giáo dục
- Ví dụ mã nên tuân theo các thực hành tốt nhất hiện tại - Ví dụ mã tuân thủ thực tiễn tốt nhất hiện hành
- Bản dịch được xem xét về độ chính xác và phù hợp văn hóa - Kiểm tra độ chính xác và phù hợp văn hóa của bản dịch
## Hệ thống dịch thuật ## Hệ Thống Dịch Thuật
### Dịch tự động ### Dịch Tự Động
- Sử dụng GitHub Actions với quy trình co-op-translator - Dùng GitHub Actions với workflow co-op-translator
- Dịch sang hơn 50 ngôn ngữ tự động - Dịch tự động sang hơn 50 ngôn ngữ
- Tệp nguồn ở các thư mục chính - Tệp nguồn trong các thư mục chính
- Tệp dịch ở các thư mục `translations/{language-code}/` - Tệp được dịch lưu trong thư mục `translations/{language-code}/`
### Thêm cải tiến dịch thủ công ### Thêm Cải Tiến Dịch Thủ Công
1. Tìm tệp trong `translations/{language-code}/` 1. Tìm tệp trong `translations/{language-code}/`
2. Thực hiện cải tiến mà vẫn giữ cấu trúc 2. Cải tiến nội dung giữ nguyên cấu trúc
3. Đảm bảo ví dụ mã vẫn hoạt động 3. Đảm bảo các ví dụ mã hoạt động
4. Kiểm tra nội dung quiz bản địa hóa nếu có 4. Kiểm thử nội dung quiz đã dịch
### Metadata bản dịch ### Siêu Dữ Liệu Dịch Thuật
Tệp dịch có header metadata: Tệp dịch có bao gồm đầu mục metadata:
```markdown ```markdown
<!-- <!--
CO_OP_TRANSLATOR_METADATA: CO_OP_TRANSLATOR_METADATA:
@ -289,120 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
--> -->
``` ```
## Gỡ lỗi và Xử lý sự cố ## Gỡ Lỗi và Khắc Phục Sự Cố
### Các vấn đề phổ biến ### Vấn Đề Thường Gặp
**Ứng dụng quiz không khởi động**: **Ứng dụng quiz không khởi động**:
- Kiểm tra phiên bản Node.js (khuyến nghị v14+) - Kiểm tra phiên bản Node.js (khuyến nghị v14+)
- Xóa `node_modules` và `package-lock.json`, chạy lại `npm install` - Xóa thư mục `node_modules` và file `package-lock.json`, chạy lại `npm install`
- Kiểm tra xung đột cổng (mặc định: Vite dùng cổng 5173) - Kiểm tra xung đột cổng (mặc định Vite dùng cổng 5173)
**API server không khởi động**: **API server không khởi động**:
- Kiểm tra phiên bản Node.js đáp ứng tối thiểu (node >=10) - Đảm bảo phiên bản Node.js >= 10
- Kiểm tra xem cổng có đang bị chiếm dụng không - Kiểm tra xem cổng có đang được sử dụng không
- Đảm bảo đã cài đặt đầy đủ dependencies bằng `npm install` - Đảm bảo cài đặt tất cả phụ thuộc với `npm install`
**Tiện ích mở rộng trình duyệt không tải**: **Tiện ích mở rộng trình duyệt không tải được**:
- Kiểm tra tệp manifest.json đúng định dạng - Kiểm tra file manifest.json đúng định dạng
- Kiểm tra console trình duyệt có lỗi không - Xem console trình duyệt để phát hiện lỗi
- Làm theo hướng dẫn cài đặt tiện ích mở rộng riêng cho từng trình duyệt - Làm theo hướng dẫn cài đặt riêng của trình duyệt
**Vấn đề dự án chat Python**: **Vấn đề dự án chat Python**:
- Đảm bảo gói OpenAI được cài đặt: `pip install openai` - Cài đặt gói OpenAI: `pip install openai`
- Kiểm tra biến môi trường GITHUB_TOKEN đã được thiết lập - Xác nhận biến môi trường GITHUB_TOKEN đã được thiết lập
- Kiểm tra quyền truy cập Models trên GitHub - Kiểm tra quyền truy cập Models GitHub
**Docsify không phục vụ tài liệu**: **Docsify không phục vụ tài liệu**:
- Cài đặt docsify-cli toàn cục: `npm install -g docsify-cli` - Cài docsify-cli toàn cục: `npm install -g docsify-cli`
- Chạy từ thư mục gốc của kho lưu trữ - Chạy từ thư mục gốc của kho
- Kiểm tra file `docs/_sidebar.md` có tồn tại - Kiểm tra file `docs/_sidebar.md` tồn tại
### Mẹo về môi trường phát triển ### Mẹo Phát Triển Môi Trường
- Dùng VS Code với extension Live Server cho các dự án HTML - Dùng VS Code với tiện ích Live Server cho các dự án HTML
- Cài đặt ESLint và Prettier để định dạng mã nhất quán - Cài ESLint và Prettier để định dạng nhất quán
- Sử dụng DevTools trình duyệt để gỡ lỗi JavaScript - Dùng DevTools trình duyệt để gỡ lỗi JavaScript
- Với Vue, cài đặt extension Vue DevTools trên trình duyệt - Với dự án Vue, cài đặt tiện ích Vue DevTools cho trình duyệt
### Lưu ý về hiệu năng ### Cân Nhắc Hiệu Suất
- Số lượng tệp dịch lớn (hơn 50 ngôn ngữ) làm bản clone đầy đủ lớn - Số lượng tệp dịch lớn (hơn 50 ngôn ngữ) làm cho clone đầy đủ nặng
- Dùng shallow clone nếu chỉ làm việc với nội dung: `git clone --depth 1` - Dùng clone nông nếu chỉ làm việc nội dung: `git clone --depth 1`
- Loại trừ thư mục dịch khỏi tìm kiếm khi chỉ làm việc với nội dung tiếng Anh - Loại trừ thư mục dịch khỏi tìm kiếm khi làm việc với nội dung tiếng Anh
- Quy trình build có thể chậm lần đầu (npm install, build Vite) - Quá trình build có thể chậm lần đầu (npm install, build Vite)
## Các lưu ý bảo mật ## Cân Nhắc Bảo Mật
### Biến môi trường ### Biến Môi Trường
- Không bao giờ commit khóa API vào kho lưu trữ - Không được commit khóa API vào kho
- Sử dụng tệp `.env` (đã có trong `.gitignore`) - Dùng các file `.env` (đã có trong `.gitignore`)
- Tài liệu yêu cầu biến môi trường trong README từng dự án - Ghi lại các biến môi trường cần thiết trong README dự án
### Dự án Python ### Dự Án Python
- Sử dụng môi trường ảo: `python -m venv venv` - Sử dụng môi trường ảo: `python -m venv venv`
- Cập nhật dependencies thường xuyên - Giữ phụ thuộc luôn được cập nhật
- Token GitHub chỉ cấp quyền cần thiết tối thiểu - Token GitHub chỉ cần quyền tối thiểu cần thiết
### Quyền truy cập Models GitHub ### Quyền Truy Cập GitHub Models
- Cần Personal Access Tokens (PAT) cho GitHub Models - Cần Personal Access Tokens (PAT) cho GitHub Models
- Lưu trữ token dưới dạng biến môi trường - Lưu tokens dưới dạng biến môi trường
- Không bao giờ commit token hay thông tin đăng nhập - Không được commit tokens hoặc thông tin đăng nhập
## Ghi chú bổ sung ## Ghi Chú Thêm
### Đối tượng mục tiêu ### Đối Tượng Hướng Đến
- Người mới hoàn toàn trong phát triển web - Người mới bắt đầu hoàn toàn về phát triển web
- Sinh viên và người tự học - Học sinh và người tự học
- Giáo viên sử dụng chương trình trong lớp học - Giáo viên sử dụng chương trình trong lớp học
- Nội dung thiết kế dễ tiếp cận và xây dựng kỹ năng từng bước - Nội dung thiết kế để dễ tiếp cận và xây dựng kỹ năng dần dần
### Triết lý giáo dục ### Triết Lý Giáo Dục
- Học theo dự án - Học qua dự án
- Kiểm tra kiến thức thường xuyên (quiz) - Kiểm tra kiến thức thường xuyên (quiz)
- Thực hành lập trình trực tiếp - Thực hành viết mã trực tiếp
- Ví dụ áp dụng thực tế - Ví dụ ứng dụng thực tế
- Tập trung vào kiến thức cơ bản trước khi học framework - Tập trung vào kiến thức nền tảng trước khi học framework
### Bảo trì kho lưu trữ ### Bảo Trì Kho
- Cộng đồng người học và đóng góp tích cực - Cộng đồng học viên và người đóng góp năng động
- Thường xuyên cập nhật dependencies và nội dung - Cập nhật thường xuyên các phụ thuộc và nội dung
- Giám sát issue và thảo luận bởi người duy trì - Người quản lý theo dõi các issue và thảo luận
- Cập nhật dịch tự động qua GitHub Actions - Cập nhật dịch tự động qua GitHub Actions
### Tài nguyên liên quan ### Tài Nguyên Liên Quan
- [Các mô-đun Microsoft Learn](https://docs.microsoft.com/learn/) - [Microsoft Learn modules](https://docs.microsoft.com/learn/)
- [Tài nguyên Student Hub](https://docs.microsoft.com/learn/student-hub/) - [Student Hub resources](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) đề xuất cho người học - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) được khuyến nghị cho học viên
- Các khóa học thêm: AI Generative, Khoa học dữ liệu, ML, IoT - Các khoá học bổ sung: AI tạo sinh, Khoa học dữ liệu, ML, IoT
### Làm việc với các dự án cụ thể ### Làm Việc Với Các Dự Án Cụ Thể
Hướng dẫn chi tiết trong file README của các thư mục: Hướng dẫn chi tiết cho từng dự án xem trong các tệp README:
- `quiz-app/README.md` - Ứng dụng quiz Vue 3 - `quiz-app/README.md` - Ứng dụng quiz Vue 3
- `7-bank-project/README.md` - Ứng dụng ngân hàng với xác thực - `7-bank-project/README.md` - Ứng dụng ngân hàng có xác thực
- `5-browser-extension/README.md` - Phát triển tiện ích mở rộng trình duyệt - `5-browser-extension/README.md` - Phát triển tiện ích mở rộng trình duyệt
- `6-space-game/README.md` - Phát triển trò chơi dựa trên Canvas - `6-space-game/README.md` - Phát triển trò chơi canvas
- `9-chat-project/README.md` - Dự án trợ lý chat AI - `9-chat-project/README.md` - Dự án trợ lý chat AI
### Cấu trúc Monorepo ### Cấu Trúc Monorepo
Không phải monorepo kiểu truyền thống, kho này chứa nhiều dự án độc lập: Mặc dù không phải monorepo truyền thống, kho này chứa nhiều dự án độc lập:
- Mỗi bài học là một đơn vị riêng biệt - Mỗi bài học tự chứa
- Các dự án không chia sẻ dependencies - Các dự án không chia sẻ phụ thuộc
- Làm việc trên từng dự án riêng biệt không ảnh hưởng dự án khác - Làm việc riêng biệt từng dự án mà không ảnh hưởng lẫn nhau
- Clone toàn bộ repo để trải nghiệm toàn diện khóa học - Clone toàn bộ kho để trải nghiệm đầy đủ chương trình học
--- ---
<!-- CO-OP TRANSLATOR DISCLAIMER START --> <!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Tuyên bố từ chối trách nhiệm**: **Tuyên bố từ chối trách nhiệm**:
Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng bản dịch tự động có thể chứa lỗi hoặc sai sót. Tài liệu gốc bằng ngôn ngữ nguyên bản của nó nên được coi là nguồn chính xác nhất. Đối với thông tin quan trọng, nên sử dụng dịch thuật chuyên nghiệp do con người thực hiện. Chúng tôi không chịu trách nhiệm đối với bất kỳ sự hiểu nhầm hoặc diễn giải sai nào phát sinh từ việc sử dụng bản dịch này. Tài liệu này đã được dịch bằng dịch vụ dịch thuật AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mặc dù chúng tôi cố gắng đảm bảo độ chính xác, xin lưu ý rằng bản dịch tự động có thể chứa lỗi hoặc sai sót. Tài liệu gốc bằng ngôn ngữ bản địa nên được xem là nguồn thông tin chính thức. Đối với những thông tin quan trọng, nên sử dụng dịch vụ dịch thuật chuyên nghiệp do con người thực hiện. Chúng tôi không chịu trách nhiệm về bất kỳ sự hiểu lầm hay giải thích sai nào phát sinh từ việc sử dụng bản dịch này.
<!-- CO-OP TRANSLATOR DISCLAIMER END --> <!-- CO-OP TRANSLATOR DISCLAIMER END -->
Loading…
Cancel
Save