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

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

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"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",
"language_code": "he"
},

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

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"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",
"language_code": "nl"
},

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

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"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",
"language_code": "vi"
},

@ -1,47 +1,47 @@
# 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
- **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
- **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ướcsau 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
- **Công nghệ**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (cho dự án AI)
- **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õ 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/sau bài học)
- **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 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
- Mỗi thư mục bài học chứa README, ví dụ mã nguồn các 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)
- 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ã và giải pháp
- 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)
- 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
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
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
cd quiz-app
npm install
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
```
### API dự án ngân hàng (Node.js + Express)
### API Dự Án Ngân Hàng (Node.js + Express)
```bash
cd 7-bank-project/api
@ -51,15 +51,15 @@ npm run lint # Chạy ESLint
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
cd 5-browser-extension/solution
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
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
```
### Dự án chat (Backend Python)
### Dự Án Trò Chuyện (Backend Python)
```bash
cd 9-chat-project/solution/backend/python
@ -76,207 +76,207 @@ pip install openai
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
2. **Clone bản fork** về máy tính cá nhân
3. **Tạo nhánh mới** cho các thay đổi của bạn
4. Thực hiện 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
1. **Fork kho** về tài khoản GitHub của bạn
2. **Clone bản fork** về máy cục bộ
3. **Tạo nhánh mới** để thực hiện thay đổi
4. Thay đổi nội dung bài học hoặc ví dụ mã
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
### Dành cho người học
### Dành Cho Người Học
1. Fork hoặc clone kho lưu trữ
2. Điều hướng lần lượt đến các thư mục bài học
3. Đọc file README của mỗi bài học
1. Fork hoặc clone kho về
2. Di chuyển tuần tự đến các thư mục 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/
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
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
- **Dự án**: Sử dụng extension Live Server của VS Code cho các dự án HTML
- **API**: Chạy `npm start` trong thư mục API tương ứng
- **Dự án**: Dùng tiện ích VS Code Live Server cho các dự án HTML
- **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
cd quiz-app
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
cd 7-bank-project/api
npm run lint # Kiểm tra các vấn đề về kiểu
npm run lint # Kiểm tra các vấn đề về phong cách
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
- Kiểm tra thủ công tập trung vào:
- Kho giáo dục này không có các bài kiểm thử tự động đầy đủ
- Kiểm thử thủ công tập trung vào:
- 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 bản build dự án hoàn tất thành công
- Ví dụ tuân thủ các thực hành tốt nhất
- Các liên kết trong tài liệu hoạt động chính xác
- Các dự án build thành công
- 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
- Xác minh liên kết markdown hợp lệ
- Thử các ví dụ mã trên trình duyệt hoặc Node.js
- Đảm bảo bản dịch giữ đúng cấu trúc
- Xác minh các liên kết markdown hợp lệ
- Kiểm thử các ví dụ mã trong trình duyệt hoặc Node.js
- 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
- Sử dụng cú pháp ES6+ hiện đại
- Tuân theo cấu hình ESLint chuẩn có trong dự án
- Đặt tên biến và hàm có ý nghĩa rõ ràng để dễ học
- Thêm chú thích giải thích các khái niệm cho người học
- Định dạng mã sử dụng Prettier khi đã thiết lập
- ng cú pháp ES6+ hiện đại
- 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 rõ nghĩa, dễ hiểu cho học viên
- Thêm chú thích giải thích khái niệm cho người học
- Định dạng mã bằng Prettier nếu được cấu hình
### HTML/CSS
- Sử dụng các phần tử HTML5 mang tính ngữ nghĩa
- Nguyên tắc thiết kế đáp ứng
- Quy ước đặt tên lớp rõ ràng
- Chú thích giải thích kỹ thuật CSS cho người học
- Các thành phần HTML5 có ngữ nghĩa
- Nguyên tắc thiết kế đáp ứng (responsive)
- Quy ước đặt tên class rõ ràng
- Chú thích kỹ thuật CSS giải thích cho học viên
### Python
- Tuân theo chuẩn style PEP 8
- Ví dụ mã nguồn rõ ràng, phục vụ mục đích học tập
- Gợi ý kiểu dữ liệu (type hints) khi hữu ích
- Tuân thủ hướng dẫn phong cách PEP 8
- Ví dụ mã rõ ràng, phù hợp giáo dục
- 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
- Khối mã kèm định nghĩa ngôn ngữ
- Liên kết đến tài nguyên bổ sung
- Cấp độ tiêu đề rõ ràng
- Khối mã khai báo ngôn ngữ lập trình
- 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/`
- 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.)
- Mỗi dự án có thư mục `solution/` thường kèm theo `start/` hoặc `your-work/`
- Ảnh lưu trong thư mục `images/` riêng của từng bài học
- Các bản dịch nằm trong cấu trúc `translations/{language-code}/`
- 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/` và thường có thư mục `start/` hoặc `your-work/`
- Hình ảnh lưu trong thư mục `images/` riêng từng bài học
- 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
cd quiz-app
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:
- **Đường dẫn ứng dụng**: `/quiz-app`
- **Đường dẫn đầu ra**: `dist`
- **Vị trí ứng dụng**: `/quiz-app`
- **Vị trí đầu ra**: `dist`
- **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
npm install # Cài đặt docsify-to-pdf
npm run convert # Tạo PDF từ docs
```
### Tài liệu Docsify
### Tài Liệu Docsify
```bash
npm install -g docsify-cli # Cài đặt Docsify toàn cục
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:
- 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
## 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:
- `[Quiz-app] Thêm bài quiz mới cho bài học X`
- `[Lesson-3] Sửa lỗi đánh máy trong dự án terrarium`
- `[Translation] Thêm bản dịch tiếng Tây Ban Nha cho bài 5`
Dùng tiêu đề rõ ràng, mô tả khu vực thay đổi:
- `[Quiz-app] Thêm bài kiểm tra mới cho bài học X`
- `[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 học 5`
- `[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:
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
2. **Kiểm tra build**:
2. **Xác minh build**:
- Chạy `npm run build` nếu có
- Đảm bảo không có lỗi build
3. **Kiểm tra liên kết**:
- 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**:
- Đọc lại, kiểm tra lỗi chính tả và ngữ pháp
- Đảm bảo ví dụ mã đúng và phục vụ giáo dục
- Kiểm tra bản dịch giữ nguyên ý nghĩa gốc
4. **Kiểm duyệt nội dung**:
- Đọc lại chính tả và ngữ pháp
- Đảm bảo ví dụ mã chính xác và phù hợp học thuật
- 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)
- Tuân theo [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
- Đồng ý với Microsoft CLA (kiểm tra tự động khi PR đầu tiên)
- Tuân th [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- 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ó
### Quy trình đánh g
### Quy Trình Đánh G
- 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
- Ví dụ mã nên tuân theo các thực hành tốt nhất hiện tại
- Bản dịch được xem xét về độ chính xác và phù hợp văn hóa
- Ví dụ mã tuân thủ thực tiễn tốt nhất hiện hành
- 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ịch sang hơn 50 ngôn ngữ tự động
- Tệp nguồn các thư mục chính
- Tệp dịch ở các thư mục `translations/{language-code}/`
- Dùng GitHub Actions với workflow co-op-translator
- Dịch tự động sang hơn 50 ngôn ngữ
- Tệp nguồn trong các thư mục chính
- 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}/`
2. Thực hiện cải tiến mà vẫn giữ cấu trúc
3. Đảm bảo ví dụ mã vẫn hoạt động
4. Kiểm tra nội dung quiz bản địa hóa nếu có
2. Cải tiến nội dung giữ nguyên cấu trúc
3. Đảm bảo các ví dụ mã hoạt động
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
<!--
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**:
- Kiểm tra phiên bản Node.js (khuyến nghị v14+)
- Xóa `node_modules``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)
- Xóa thư mục `node_modules` 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)
**API server không khởi động**:
- Kiểm tra phiên bản Node.js đáp ứng tối thiểu (node >=10)
- Kiểm tra xem cổng có đang bị chiếm dụng không
- Đảm bảo đã cài đặt đầy đủ dependencies bằng `npm install`
- Đảm bảo phiên bản Node.js >= 10
- Kiểm tra xem cổng có đang được sử dụng không
- Đả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**:
- Kiểm tra tệp manifest.json đúng định dạng
- Kiểm tra console trình duyệt có lỗi không
- 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
**Tiện ích mở rộng trình duyệt không tải được**:
- Kiểm tra file manifest.json đúng định dạng
- Xem console trình duyệt để phát hiện lỗi
- Làm theo hướng dẫn cài đặt riêng của trình duyệt
**Vấn đề dự án chat Python**:
- Đảm bảo gói OpenAI được cài đặt: `pip install openai`
- Kiểm tra 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
- Cài đặt gói OpenAI: `pip install openai`
- 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 GitHub
**Docsify không phục vụ tài liệu**:
- Cài đặt 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ữ
- Kiểm tra file `docs/_sidebar.md` tồn tại
- Cài docsify-cli toàn cục: `npm install -g docsify-cli`
- Chạy từ thư mục gốc của kho
- 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
- Cài đặt ESLint và Prettier để định dạng nhất quán
- Sử 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
- Dùng VS Code với tiện ích Live Server cho các dự án HTML
- Cài ESLint và Prettier để định dạng nhất quán
- ng DevTools trình duyệt để gỡ lỗi JavaScript
- 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
- Dùng shallow clone nếu chỉ làm việc với 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
- Quy trình build có thể chậm lần đầu (npm install, build Vite)
- Số lượng tệp dịch lớn (hơn 50 ngôn ngữ) làm cho clone đầy đủ nặng
- 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 làm việc với nội dung tiếng Anh
- 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ữ
- Sử dụng tệp `.env` (đã có trong `.gitignore`)
- Tài liệu yêu cầu biến môi trường trong README từng dự án
- Không được commit khóa API vào kho
- Dùng các file `.env` (đã có trong `.gitignore`)
- 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`
- Cập nhật dependencies thường xuyên
- Token GitHub chỉ cấp quyền cần thiết tối thiểu
- Giữ phụ thuộc luôn được cập nhật
- 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
- Lưu trữ token dưới dạng biến môi trường
- Không bao giờ commit token hay thông tin đăng nhập
- Lưu tokens dưới dạng biến môi trường
- 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
- Sinh viên và người tự học
- Người mới bắt đầu hoàn toàn về phát triển web
- 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
- 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)
- Thực hành lập trình trực tiếp
- Ví dụ áp dụng thực tế
- Tập trung vào kiến thức cơ bản trước khi học framework
- Thực hành viết mã trực tiếp
- Ví dụ ứng dụng thực tế
- 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
- Thường xuyên cập nhật dependencies và nội dung
- Giám sát issue và thảo luận bởi người duy trì
- Cộng đồng học viên và người đóng góp năng động
- Cập nhật thường xuyên các phụ thuộc và nội dung
- 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
### 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/)
- [Tài nguyên Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) đề xuất cho người học
- Các khóa học thêm: AI Generative, Khoa học dữ liệu, ML, IoT
- [Microsoft Learn modules](https://docs.microsoft.com/learn/)
- [Student Hub resources](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) được khuyến nghị cho học viên
- 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
- `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 xác thực
- `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
### 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ỗi bài học là một đơn vị riêng biệt
- Các dự án không chia sẻ dependencies
- Làm việc trên từng dự án riêng biệt không ảnh hưởng dự án khác
- Clone toàn bộ repo để trải nghiệm toàn diện khóa học
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 tự chứa
- Các dự án không chia sẻ phụ thuộ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ộ kho để trải nghiệm đầy đủ chương trình học
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**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 -->
Loading…
Cancel
Save