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

pull/1690/head
localizeflow[bot] 3 weeks ago
parent 8097450416
commit 891a2f0f27

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-02-06T09:21:07+00:00",
"translation_date": "2026-02-06T11:42:09+00:00",
"source_file": "AGENTS.md",
"language_code": "he"
},

@ -1,24 +1,24 @@
# AGENTS.md
## סקירת פרויקט
## סקירת הפרויקט
מאגר זה הוא תוכנית לימודים חינוכית להוראת יסודות פיתוח ווב למתחילים. התוכנית היא קורס מקיף בן 12 שבועות שפותח על ידי Microsoft Cloud Advocates, הכולל 24 שיעורים מעשיים המכסים JavaScript, CSS ו-HTML.
זהו מאגר תוכן חינוכי ללימוד יסודות פיתוח ווב למתחילים. התוכנית היא קורס מקיף בן 12 שבועות שפותח על ידי Microsoft Cloud Advocates, עם 24 שיעורים מעשיים המכסים JavaScript, CSS ו-HTML.
### רכיבים מרכזיים
### רכיבים עיקריים
- **תוכן חינוכי**: 24 שיעורים מובנים המאורגנים למודולים מבוססי פרויקטים
- **פרויקטים מעשיים**: Terrarium, משחק הקלדה, תוסף דפדפן, משחק חלל, אפליקציית בנקאות, עורך קוד, ועוזר שיחה מבוסס AI
- **חידונים אינטראקטיביים**: 48 חידונים עם 3 שאלות כל אחד (הערכות לפני/אחרי השיעורים)
- **תמיכה בריבוי שפות**: תרגומים אוטומטיים ל-50+ שפות באמצעות GitHub Actions
- **טכנולוגיות**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (לפרויקטים מבוססי AI)
- **תוכן חינוכי**: 24 שיעורים מובנים המאורגנים במודולים מבוססי פרויקטים
- **פרויקטים מעשיים**: Terrarium, משחק הקלדה, הרחבת דפדפן, משחק חלל, אפליקציית בנקאות, עורך קוד, ועוזר שיחה מבוסס בינה מלאכותית
- **מבחנים אינטראקטיביים**: 48 מבחנים, כל אחד עם 3 שאלות (הערכות לפני/אחרי השיעור)
- **תמיכה בריבוי שפות**: תרגומים אוטומטיים ל-50+ שפות באמצעות GitHub Actions
- **טכנולוגיות**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (לפרויקטים עם AI)
### ארכיטקטורה
- מאגר חינוכי עם מבנה מבוסס שיעורים
- כל תיקיית שיעור מכילה README, דוגמאות קוד ופתרונות
- פרויקטים עצמאיים בתיקיות נפרדות (quiz-app, פרויקטים שונים של שיעורים)
- מערכת תרגום באמצעות GitHub Actions (co-op-translator)
- תיעוד המוגש באמצעות Docsify וזמין גם כקובץ PDF
- מאגר חינוכי עם מבנה מבוסס שיעורים
- כל תיקיית שיעור מכילה README, דוגמאות קוד ופתרונות
- פרויקטים עצמאיים בתיקיות נפרדות (quiz-app, פרויקטים שונים של שיעורים)
- מערכת תרגום המשתמשת ב-GitHub Actions (co-op-translator)
- תיעוד מוצג דרך Docsify וזמין גם כ-PDF
## פקודות התקנה
@ -31,252 +31,252 @@ 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)
### פרויקט בנק 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 format # עיצוב עם Prettier
```
### פרויקטים לתוסף דפדפן
### פרויקטים של הרחבות דפדפן
```bash
cd 5-browser-extension/solution
npm install
# עקוב אחר הוראות טעינת התוספים הספציפיות לדפדפן
# עקוב אחר הוראות טעינת התוסף הספציפיות לדפדפן
```
### פרויקטים למשחק חלל
### פרויקטים של משחק חלל
```bash
cd 6-space-game/solution
npm install
# פתח index.html בדפדפן או השתמש ב-Live Server
# פתח את index.html בדפדפן או השתמש ב-Live Server
```
### פרויקט שיחה (Backend בפייתון)
### פרויקט שיח (Backend בפייתון)
```bash
cd 9-chat-project/solution/backend/python
pip install openai
# הגדר את משתנה הסביבה GITHUB_TOKEN
# הגדר משתנה סביבה GITHUB_TOKEN
python api.py
```
## תהליך פיתוח
## זרימת עבודה לפיתוח
### למשתפי תוכן
### לתורמים תוכן
1. **בצע fork** של המאגר לחשבון ה-GitHub שלך
2. **שכפל את ה-fork** במחשבך
3. **צור ענף חדש** לשינויים שלך
4. בצע שינויים בתוכן השיעורים או בדוגמאות הקוד
5. בדוק שינויים בקוד בתיקיות הפרויקט הרלוונטיות
6. הגש pull requests לפי הנחיות התרומה
1. **שורש את המאגר** לחשבון הגיטהאב שלך
2. **שכפל את השורש** מקומית
3. **צור ענף חדש** לשינויים שלך
4. בצע שינויים בתוכן השיעור או בדוגמאות הקוד
5. בדוק שינויים בקוד בתיקיות הפרויקט הרלוונטיות
6. הגש בקשות משיכה בהתאם להנחיות התרומה
### ללומדים
1. בצע fork או שכפל את המאגר
2. עבור בתיקיות השיעורים בסדר כרונולוגי
3. קרא את קבצי README של כל שיעור
4. השלם את החידונים לפני השיעור בכתובת https://ff-quizzes.netlify.app/web/
5. עבוד עם דוגמאות הקוד שבתיקיות השיעור
6. השלם מטלות ואתגרים
7. צלם חידונים לאחר השיעור
1. שורש או שכפל את המאגר
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
- **פרויקטים**: השתמש בהרחבת Live Server של VS Code לפרויקטים ב-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 # אמת שהשרת מתחיל ללא שגיאות
node server.js # ודא שהשרת מתחיל ללא שגיאות
```
### גישת בדיקה כללית
- זהו מאגר חינוכי ללא בדיקות אוטומטיות מקיפות
- בדיקות ידניות מתמקדות ב:
- דוגמאות קוד רצות ללא שגיאות
- קישורים בתיעוד עובדים כראוי
- בניית הפרויקטים בהצלחה
- דוגמאות עוקבות אחרי שיטות עבודה מומלצות
- זהו מאגר חינוכי ללא בדיקות אוטומטיות מקיפות
- בדיקות ידניות מתמקדות ב:
- הרצת דוגמאות קוד ללא שגיאות
- בדיקת תקינות קישורים בתיעוד
- השלמת תהליכי בנייה של פרויקטים
- דוגמאות בהתאם לפרקטיקות מיטביות
### בדיקות לפני הגשה
- הרץ `npm run lint` בתיקיות עם package.json
- וודא שקישורי markdown תקינים
- בדוק דוגמאות קוד בדפדפן או ב-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
- דוגמאות קוד ברורות וחינוכיות
- רמזי טיפוס היכן שמועילים ללמידה
- קווי הנחיה לסגנון לפי 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:
האפליקציה מוגדרת לפריסה ב-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`
קונפיגורציית Azure Static Web Apps:
- **מיקום האפליקציה**: `/quiz-app`
- **מיקום הפלט**: `dist`
- **זרימת עבודה**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### יצירת PDF תיעודי
### יצירת PDF לתיעוד
```bash
npm install # התקן את docsify-to-pdf
npm run convert # צור PDF מ-docs
npm run convert # יצירת PDF מ-docs
```
### תיעוד Docsify
```bash
npm install -g docsify-cli # התקן את Docsify באופן גלובלי
docsify serve # הפעל על localhost:3000
docsify serve # הפעל בכתובת localhost:3000
```
### בניות לפי פרויקט
### תהליכי בנייה לפרויקטים ספציפיים
לכל תיקיית פרויקט עשויה להיות תהליך בנייה משלה:
- פרויקטי Vue: `npm run build` ליצירת בנדלים לפרודקשן
- פרויקטים סטטיים: ללא שלב בנייה, הגשת קבצים ישירות
לתיקיית כל פרויקט עלול להיות תהליך בנייה משלו:
- פרויקטי Vue: `npm run build` יוצר חבילות ייצור
- פרויקטים סטטיים: ללא שלב בנייה, הגשה ישירה של קבצים
## הנחיות להגשות Pull Request
## הנחיות לבקשות משיכה
### פורמט כותרת
השתמש בכותרות ברורות המתארות את תחום השינוי:
- `[Quiz-app] הוסף חידון חדש לשיעור X`
- `[Lesson-3] תיקון שגיאה בפרויקט terrarium`
- `[Translation] הוסף תרגום לספרדית לשיעור 5`
- `[Docs] עדכן הוראות התקנה`
השתמש בכותרות ברורות ותיאורתיות המציינות את תחום השינוי:
- `[Quiz-app] הוסף מבחן חדש לשיעור X`
- `[Lesson-3] תקן טעות בפרויקט terrarium`
- `[Translation] הוסף תרגום ספרדית לשיעור 5`
- `[Docs] עדכן הוראות התקנה`
### בדיקות נדרשות
### בדיקות הנדרשות
לפני הגשת PR:
לפני הגשת PR:
1. **איכות קוד**:
- הרץ `npm run lint` בתיקיות הפרויקט המושפעות
- תקן את כל השגיאות והאזהרות
1. **איכות קוד**:
- הרץ `npm run lint` בתיקיות הפרויקטים הרלוונטיות
- תקן את כל השגיאות והאזהרות
2. **אימות בנייה**:
- הרץ `npm run build` אם רלוונטי
- ודא שאין שגיאות בנייה
2. **אימות בנייה**:
- הרץ `npm run build` אם רלוונטי
- ודא שאין שגיאות בנייה
3. **אימות קישורים**:
- בדוק את כל קישורי המארקדאון
- אמת הפניות לתמונות
3. **אימות קישורים**:
- בדוק את כל קישורי markdown
- ודא שהפניות לתמונות תקינות
4. **ביקורת תוכן**:
- הגהה לאיות ולדקדוק
- ודא שדוגמאות הקוד נכונות וחינוכיות
- אמת שתרגומים שומרים על המשמעות המקורית
4. **סקירת תוכן**:
- הגהה של שגיאות כתיב ותחביר
- ודא שדוגמאות הקוד נכונות וחינוכיות
- אימות שהתרגומים שומרים על המשמעות המקורית
### דרישות תרומה
### דרישות לתרומה
- הסכמה ל-CLA של מיקרוסופט (בדיקה אוטומטית ב-PR הראשון)
- עקוב אחרי [קוד ההתנהגות של Microsoft Open Source](https://opensource.microsoft.com/codeofconduct/)
- ראה [CONTRIBUTING.md](./CONTRIBUTING.md) להנחיות מלאות
- הפנה מספרי נושאים בתיאור PR במידת הצורך
- הסכמה ל-CLA של מיקרוסופט (בדיקה אוטומטית בבקשת PR ראשונה)
- עקוב אחרי [קוד ההתנהגות של מיקרוסופט בקוד פתוח](https://opensource.microsoft.com/codeofconduct/)
- עיין ב-[CONTRIBUTING.md](./CONTRIBUTING.md) להנחיות מפורטות
- תייחס מספרי סוגיות בתיאור ה-PR במידת הצורך
### תהליך סקירה
- PR נבדקים על ידי מנהלים והקהילה
- עדיפויות להבהרת תכנים חינוכיים
- דוגמאות קוד צריכות לעקוב אחרי שיטות עבודה מומלצות עדכניות
- תרגומים נבדקים לדיוק ולהתאמה תרבותית
- PRs נסקרים על ידי מנהלים וקהילה
- יש עדיפות לבהירות חינוכית
- דוגמאות הקוד צריכות לעקוב אחרי מיטב הפרקטיקות העדכניות
- תרגומים נסקרים לאיכות ודיוק תרבותי
## מערכת התרגום
## מערכת תרגום
### תרגום אוטומטי
- משתמש ב-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:
@ -289,120 +289,120 @@ 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 מעוצב נכון
- בדוק את קונסולת הדפדפן לשגיאות
- עקוב אחרי הוראות התקנה ספציפיות לדפדפן
**בעיות בפרויקט שיחה בפייתון**:
- ודא שהחבילה openai מותקנת: `pip install openai`
- אמת ששינוי הגדרת GITHUB_TOKEN מוגדר
- בדוק הרשאות גישה ל-GitHub Models
**בעיות בפרויקט שיח בפייתון**:
- ודא ש-package openai מותקן: `pip install openai`
- בדוק שהמשתנה הסביבתי GITHUB_TOKEN מוגדר
- בדוק הרשאות גישה ל-GitHub Models
**Docsify לא מגיש תיעוד**:
- התקן docsify-cli גלובלית: `npm install -g docsify-cli`
- הרץ מהספרייה הראשית של המאגר
- ודא שקיים `docs/_sidebar.md`
**Docsify לא מציג תיעוד**:
- התקן את docsify-cli גלובלית: `npm install -g docsify-cli`
- הרץ מתיקיית השורש של המאגר
- וודא שקובץ `docs/_sidebar.md` קיים
### טיפים לסביבת פיתוח
- השתמש ב-VS Code עם תוסף Live Server לפרויקטי HTML
- התקן את תוספי ESLint ו-Prettier לעיצוב עקבי
- השתמש ב-DevTools של הדפדפן לניפוי שגיאות ב-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+ שפות) גורם לשכפולים כבדים
- השתמש ב-clone רדוד אם עובדים רק על תוכן: `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
- דרושים Personal Access Tokens (PAT) ל-GitHub Models
- tokens יש לאחסן כמשתני סביבה
- לעולם אל תתחייב tokens או אישורים
- נדרשים אסימוני גישה אישיים (PAT) ל-GitHub Models
- שמור את האסימונים כמספרי סביבה
- אין לשמור אסימונים או אישורים בקוד
## הערות נוספות
### קהל יעד
- מתחילים מוחלטים בפיתוח ווב
- סטודנטים ולומדים עצמאיים
- מורים המשתמשים בתוכנית בכיתות
- התוכן מותאם לנגישות ולבניית מיומנויות הדרגתית
- מתחילים מוחלטים בפיתוח ווב
- סטודנטים ולומדים עצמאיים
- מורים המשתמשים בתוכנית בכיתות לימוד
- התוכן מעוצב לנגישות ולבניית מיומנויות בהדרגה
### הפילוסופיה החינוכית
### פילוסופיה חינוכית
- למידה מבוססת פרויקט
- בדיקות ידע תכופות (חידונים)
- תרגילי קוד מעשיים
- דוגמאות לשימוש במציאות
- דגש על יסודות לפני מסגרות עבודה
- גישת למידה מבוססת פרויקטים
- בדיקות ידע תכופות (מבחנים)
- תרגילי קידוד מעשיים
- דוגמאות ליישום בעולם האמיתי
- התמקדות ביסודות לפני מסגרות עבודה
### תחזוקת המאגר
- קהילה פעילה של לומדים ומשתפים
- עדכונים שוטפים לתלויות ולתוכן
- ניטור נושאים ודיונים על ידי מנהלים
- עדכוני תרגום מתבצעים אוטומטית דרך 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 גנרטיבי, מדעי הנתונים, ML, מחשוב IoT זמינים
### עבודה עם פרויקטים ספציפיים
להוראות מפורטות על פרויקטים בודדים, ראה קבצי 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
להוראות מפורטות לפרויקטים בודדים, עיין בקבצי 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
### מבנה מונורפוזיטורי
### מבנה מונורפו
למרות שאינו מונורפוזיטורי מסורתי, המאגר כולל מספר פרויקטים עצמאיים:
- כל שיעור הוא עצמאי
- פרויקטים אינם משתפים תלויות
- עבודה על פרויקטים בודדים ללא השפעה על אחרים
- שכפל את כל המאגר כדי לקבל את חוויית התוכנית המלאה
למרות שאינו מונורפו קלאסי, המאגר מכיל פרויקטים עצמאיים מרובים:
- כל שיעור עצמאי לחלוטין
- פרויקטים אינם חולקים תלויות
- עבודה על פרויקטים בודדים ללא השפעה על אחרים
- שכפל את כל המאגר עבור חוויית קורס מלאה
---
<!-- 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-02-06T09:23:39+00:00",
"translation_date": "2026-02-06T11:44:16+00:00",
"source_file": "AGENTS.md",
"language_code": "id"
},

@ -2,36 +2,36 @@
## Gambaran Proyek
Ini adalah repositori kurikulum edukasi untuk mengajarkan dasar-dasar pengembangan web kepada pemula. Kurikulum ini merupakan kursus komprehensif selama 12 minggu yang dikembangkan oleh Microsoft Cloud Advocates, menampilkan 24 pelajaran langsung yang mencakup JavaScript, CSS, dan HTML.
Ini adalah repositori kurikulum pendidikan untuk mengajarkan dasar-dasar pengembangan web kepada pemula. Kurikulum ini adalah kursus 12 minggu yang komprehensif yang dikembangkan oleh Microsoft Cloud Advocates, menampilkan 24 pelajaran praktis yang mencakup JavaScript, CSS, dan HTML.
### Komponen Utama
- **Konten Edukasi**: 24 pelajaran terstruktur yang diatur dalam modul berbasis proyek
- **Proyek Praktis**: Terrarium, Game Mengetik, Ekstensi Browser, Game Luar Angkasa, Aplikasi Perbankan, Editor Kode, dan Asisten Chat AI
- **Kuis Interaktif**: 48 kuis dengan 3 pertanyaan setiap kuis (evaluasi sebelum/setelah pelajaran)
- **Dukungan Multi-bahasa**: Terjemahan otomatis untuk 50+ bahasa melalui GitHub Actions
- **Teknologi**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (untuk proyek AI)
- **Konten Edukasi**: 24 pelajaran terstruktur yang disusun dalam modul berbasis proyek
- **Proyek Praktis**: Terrarium, Game Mengetik, Ekstensi Browser, Game Antariksa, Aplikasi Perbankan, Editor Kode, dan Asisten Chat AI
- **Kuis Interaktif**: 48 kuis dengan 3 pertanyaan masing-masing (penilaian sebelum/sesudah pelajaran)
- **Dukungan Multi-bahasa**: Terjemahan otomatis untuk lebih dari 50 bahasa melalui GitHub Actions
- **Teknologi**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (untuk proyek AI)
### Arsitektur
- Repositori edukasi dengan struktur berbasis pelajaran
- Setiap folder pelajaran berisi README, contoh kode, dan solusi
- Proyek mandiri dalam direktori terpisah (quiz-app, berbagai proyek pelajaran)
- Sistem terjemahan menggunakan GitHub Actions (co-op-translator)
- Dokumentasi disajikan melalui Docsify dan tersedia dalam format PDF
- Repositori edukasi dengan struktur berbasis pelajaran
- Setiap folder pelajaran berisi README, contoh kode, dan solusi
- Proyek mandiri di direktori terpisah (quiz-app, berbagai proyek pelajaran)
- Sistem terjemahan menggunakan GitHub Actions (co-op-translator)
- Dokumentasi disajikan melalui Docsify dan tersedia dalam format PDF
## Perintah Setup
## Perintah Pengaturan
Repositori ini terutama untuk konsumsi konten edukasi. Untuk bekerja dengan proyek spesifik:
Repositori ini terutama untuk konsumsi konten edukasi. Untuk bekerja dengan proyek tertentu:
### Setup Repositori Utama
### Pengaturan Repositori Utama
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Setup Quiz App (Vue 3 + Vite)
### Pengaturan Quiz App (Vue 3 + Vite)
```bash
cd quiz-app
@ -56,10 +56,10 @@ npm run format # Format dengan Prettier
```bash
cd 5-browser-extension/solution
npm install
# Ikuti petunjuk pemuatan ekstensi khusus browser
# Ikuti instruksi pemuatan ekstensi khusus browser
```
### Proyek Game Luar Angkasa
### Proyek Game Antariksa
```bash
cd 6-space-game/solution
@ -80,29 +80,29 @@ python api.py
### Untuk Kontributor Konten
1. **Fork repositori** ke akun GitHub Anda
2. **Clone fork Anda** secara lokal
3. **Buat cabang baru** untuk perubahan Anda
4. Lakukan perubahan pada konten pelajaran atau contoh kode
5. Uji perubahan kode di direktori proyek terkait
6. Kirim pull request sesuai panduan kontribusi
1. **Fork repositori** ke akun GitHub Anda
2. **Clone fork Anda** secara lokal
3. **Buat cabang baru** untuk perubahan Anda
4. Lakukan perubahan pada konten pelajaran atau contoh kode
5. Uji perubahan kode di direktori proyek terkait
6. Kirim pull request sesuai panduan kontribusi
### Untuk Pembelajar
1. Fork atau clone repositori
2. Navigasi ke direktori pelajaran secara berurutan
3. Baca file README pada setiap pelajaran
4. Selesaikan kuis sebelum pelajaran di https://ff-quizzes.netlify.app/web/
5. Kerjakan contoh kode dalam folder pelajaran
6. Selesaikan tugas dan tantangan
7. Ikuti kuis setelah pelajaran
1. Fork atau clone repositori
2. Buka direktori pelajaran secara berurutan
3. Baca file README untuk setiap pelajaran
4. Selesaikan kuis pra-pelajaran di https://ff-quizzes.netlify.app/web/
5. Kerjakan contoh kode dalam folder pelajaran
6. Selesaikan tugas dan tantangan
7. Ikuti kuis pasca-pelajaran
### Pengembangan Langsung
- **Dokumentasi**: Jalankan `docsify serve` di root (port 3000)
- **Quiz App**: Jalankan `npm run dev` di direktori quiz-app
- **Proyek**: Gunakan ekstensi VS Code Live Server untuk proyek HTML
- **Proyek API**: Jalankan `npm start` di direktori API terkait
- **Dokumentasi**: Jalankan `docsify serve` di root (port 3000)
- **Quiz App**: Jalankan `npm run dev` di direktori quiz-app
- **Proyek**: Gunakan ekstensi VS Code Live Server untuk proyek HTML
- **Proyek API**: Jalankan `npm start` di direktori API terkait
## Instruksi Pengujian
@ -111,7 +111,7 @@ python api.py
```bash
cd quiz-app
npm run lint # Periksa masalah gaya kode
npm run build # Verifikasi pembangunan berhasil
npm run build # Verifikasi build berhasil
```
### Pengujian Bank API
@ -124,57 +124,57 @@ node server.js # Verifikasi server mulai tanpa kesalahan
### Pendekatan Pengujian Umum
- Ini adalah repositori edukasi tanpa pengujian otomatis menyeluruh
- Pengujian manual fokus pada:
- Contoh kode berjalan tanpa error
- Tautan dalam dokumentasi berfungsi dengan benar
- Build proyek berhasil dengan sukses
- Contoh mengikuti praktik terbaik
- Ini adalah repositori edukasi tanpa pengujian otomatis komprehensif
- Pengujian manual difokuskan pada:
- Contoh kode berjalan tanpa error
- Tautan dalam dokumentasi berfungsi dengan benar
- Build proyek selesai dengan sukses
- Contoh mengikuti praktik terbaik
### Pemeriksaan Sebelum Pengiriman
- Jalankan `npm run lint` di direktori dengan package.json
- Verifikasi tautan markdown valid
- Uji contoh kode di browser atau Node.js
- Periksa bahwa terjemahan mempertahankan struktur yang benar
- Jalankan `npm run lint` di direktori yang memiliki package.json
- Verifikasi tautan markdown valid
- Uji contoh kode di browser atau Node.js
- Periksa bahwa terjemahan mempertahankan struktur yang benar
## Pedoman Gaya Kode
## Panduan Gaya Kode
### JavaScript
- Gunakan sintaks ES6+ modern
- Ikuti konfigurasi ESLint standar yang disediakan dalam proyek
- Gunakan nama variabel dan fungsi yang bermakna untuk kejelasan edukasi
- Tambahkan komentar yang menjelaskan konsep untuk pembelajar
- Format menggunakan Prettier jika dikonfigurasi
- Gunakan sintaks ES6+ modern
- Ikuti konfigurasi ESLint standar yang disediakan dalam proyek
- Gunakan nama variabel dan fungsi yang bermakna untuk kejelasan edukatif
- Tambahkan komentar yang menjelaskan konsep untuk pembelajar
- Format menggunakan Prettier jika sudah dikonfigurasi
### HTML/CSS
- Elemen HTML5 semantik
- Prinsip desain responsif
- Konvensi penamaan kelas yang jelas
- Komentar yang menjelaskan teknik CSS untuk pembelajar
- Elemen HTML5 semantik
- Prinsip desain responsif
- Konvensi penamaan kelas yang jelas
- Komentar yang menjelaskan teknik CSS untuk pembelajar
### Python
- Pedoman gaya PEP 8
- Contoh kode yang jelas dan edukatif
- Hint tipe jika membantu pembelajaran
- Panduan gaya PEP 8
- Contoh kode yang jelas dan edukatif
- Tambahkan tipe hint jika membantu pembelajaran
### Dokumentasi Markdown
- Hirarki judul yang jelas
- Blok kode dengan spesifikasi bahasa
- Tautan ke sumber daya tambahan
- Screenshot dan gambar di direktori `images/`
- Teks alt untuk gambar agar aksesibilitas
- Hirarki judul yang jelas
- Blok kode dengan spesifikasi bahasa
- Tautan ke sumber daya tambahan
- Screenshot dan gambar dalam direktori `images/`
- Teks alt untuk gambar demi aksesibilitas
### Organisasi File
### Organisasi Berkas
- Pelajaran diberi nomor berurutan (1-getting-started-lessons, 2-js-basics, dll.)
- Setiap proyek memiliki direktori `solution/` dan sering `start/` atau `your-work/`
- Gambar disimpan dalam folder `images/` spesifik pelajaran
- Terjemahan dalam struktur `translations/{kode-bahasa}/`
- Pelajaran diberi nomor secara berurutan (1-getting-started-lessons, 2-js-basics, dll.)
- Setiap proyek memiliki direktori `solution/` dan seringkali `start/` atau `your-work/`
- Gambar disimpan dalam folder `images/` spesifik tiap pelajaran
- Terjemahan di struktur `translations/{kode-bahasa}/`
## Build dan Deployment
@ -185,13 +185,13 @@ quiz-app dikonfigurasi untuk deployment Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Membuat folder dist/
# Menerapkan melalui alur kerja GitHub Actions saat push ke main
# Mendistribusikan melalui alur kerja GitHub Actions saat push ke main
```
Konfigurasi Azure Static Web Apps:
- **Lokasi aplikasi**: `/quiz-app`
- **Lokasi output**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
Konfigurasi Azure Static Web Apps:
- **Lokasi aplikasi**: `/quiz-app`
- **Lokasi output**: `dist`
- **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml`
### Pembuatan PDF Dokumentasi
@ -203,80 +203,80 @@ npm run convert # Menghasilkan PDF dari docs
### Dokumentasi Docsify
```bash
npm install -g docsify-cli # Instal Docsify secara global
docsify serve # Sajikan di localhost:3000
npm install -g docsify-cli # Pasang Docsify secara global
docsify serve # Layani di localhost:3000
```
### Build Spesifik Proyek
### Build Khusus Proyek
Setiap direktori proyek dapat memiliki proses build sendiri:
- Proyek Vue: `npm run build` menghasilkan bundel produksi
- Proyek statis: Tidak ada langkah build, sajikan file secara langsung
Setiap direktori proyek mungkin memiliki proses build sendiri:
- Proyek Vue: `npm run build` membuat bundle produksi
- Proyek statis: Tidak ada langkah build, serve file langsung
## Panduan Pull Request
### Format Judul
Gunakan judul yang jelas dan deskriptif yang menunjukkan area perubahan:
- `[Quiz-app] Tambah kuis baru untuk pelajaran X`
- `[Lesson-3] Perbaiki typo di proyek terrarium`
- `[Translation] Tambah terjemahan Spanyol untuk pelajaran 5`
- `[Docs] Perbarui instruksi setup`
Gunakan judul yang jelas dan deskriptif yang menunjukkan area perubahan:
- `[Quiz-app] Tambah kuis baru untuk pelajaran X`
- `[Pelajaran-3] Perbaiki typo di proyek terrarium`
- `[Terjemahan] Tambah terjemahan Spanyol untuk pelajaran 5`
- `[Dok] Perbarui instruksi pengaturan`
### Pemeriksaan yang Diperlukan
### Pemeriksaan Wajib
Sebelum mengirim PR:
1. **Kualitas Kode**:
- Jalankan `npm run lint` di direktori proyek terkait
- Perbaiki semua error dan peringatan lint
1. **Kualitas Kode**:
- Jalankan `npm run lint` di direktori proyek terkait
- Perbaiki semua error dan peringatan linting
2. **Verifikasi Build**:
- Jalankan `npm run build` jika berlaku
- Pastikan tidak ada error build
2. **Verifikasi Build**:
- Jalankan `npm run build` jika berlaku
- Pastikan tidak ada error build
3. **Validasi Tautan**:
- Uji semua tautan markdown
- Verifikasi referensi gambar berfungsi
3. **Validasi Tautan**:
- Uji semua tautan markdown
- Verifikasi referensi gambar berfungsi
4. **Review Konten**:
- Koreksi ejaan dan tata bahasa
- Pastikan contoh kode benar dan edukatif
- Verifikasi terjemahan mempertahankan makna asli
4. **Review Konten**:
- Proofreading pengejaan dan tata bahasa
- Pastikan contoh kode benar dan edukatif
- Verifikasi terjemahan mempertahankan makna asli
### Persyaratan Kontribusi
- Setujui CLA Microsoft (cek otomatis pada PR pertama)
- Ikuti [Kode Etik Sumber Terbuka Microsoft](https://opensource.microsoft.com/codeofconduct/)
- Lihat [CONTRIBUTING.md](./CONTRIBUTING.md) untuk panduan rinci
- Referensikan nomor isu dalam deskripsi PR jika berlaku
- Setuju dengan Microsoft CLA (cek otomatis pada PR pertama)
- Ikuti [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
- Lihat [CONTRIBUTING.md](./CONTRIBUTING.md) untuk panduan detail
- Cantumkan nomor isu pada deskripsi PR jika berlaku
### Proses Review
- PR direview oleh pemelihara dan komunitas
- Kejelasan edukasi menjadi prioritas
- Contoh kode harus mengikuti praktik terbaik saat ini
- Terjemahan direview untuk akurasi dan kesesuaian budaya
- PR direview oleh pemelihara dan komunitas
- Kejelasan edukasi menjadi prioritas
- Contoh kode harus mengikuti praktik terbaik saat ini
- Terjemahan direview untuk akurasi dan kesesuaian budaya
## Sistem Terjemahan
### Terjemahan Otomatis
- Menggunakan GitHub Actions dengan workflow co-op-translator
- Menerjemahkan ke 50+ bahasa secara otomatis
- File sumber di direktori utama
- File terjemahan di direktori `translations/{kode-bahasa}/`
- Menggunakan GitHub Actions dengan alur kerja co-op-translator
- Menerjemahkan ke lebih dari 50 bahasa otomatis
- Berkas sumber di direktori utama
- Berkas terjemahan di direktori `translations/{kode-bahasa}/`
### Menambahkan Peningkatan Terjemahan Manual
### Menambahkan Perbaikan Terjemahan Manual
1. Temukan file di `translations/{kode-bahasa}/`
2. Lakukan perbaikan sambil mempertahankan struktur
3. Pastikan contoh kode tetap fungsional
4. Uji konten kuis yang telah dilokalkan
1. Cari berkas di `translations/{kode-bahasa}/`
2. Lakukan perbaikan sambil mempertahankan struktur
3. Pastikan contoh kode tetap berfungsi
4. Uji konten kuis lokal jika ada
### Metadata Terjemahan
File terjemahan menyertakan header metadata:
Berkas terjemahan menyertakan header metadata:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -293,116 +293,116 @@ CO_OP_TRANSLATOR_METADATA:
### Masalah Umum
**Quiz app gagal dimulai**:
- Periksa versi Node.js (disarankan v14+)
- Hapus `node_modules` dan `package-lock.json`, jalankan kembali `npm install`
- Periksa konflik port (default: Vite menggunakan port 5173)
**Quiz app gagal mulai**:
- Periksa versi Node.js (disarankan v14+)
- Hapus `node_modules` dan `package-lock.json`, jalankan `npm install` lagi
- Periksa konflik port (default: Vite menggunakan port 5173)
**Server API tidak mau mulai**:
- Verifikasi versi Node.js memenuhi minimum (node >=10)
- Periksa apakah port sudah digunakan
- Pastikan semua dependensi terinstal dengan `npm install`
**Server API tidak mau mulai**:
- Pastikan versi Node.js memadai (node >=10)
- Periksa apakah port sudah digunakan
- Pastikan semua dependensi terinstal dengan `npm install`
**Ekstensi browser tidak memuat**:
- Verifikasi manifest.json formatnya benar
- Periksa console browser untuk error
- Ikuti instruksi pemasangan ekstensi khusus browser
**Ekstensi browser tidak bisa dimuat**:
- Pastikan manifest.json diformat dengan benar
- Periksa konsol browser untuk error
- Ikuti instruksi pemasangan ekstensi khusus browser
**Masalah proyek chat Python**:
- Pastikan paket OpenAI terinstal: `pip install openai`
- Verifikasi variabel lingkungan GITHUB_TOKEN diset
- Periksa izin akses GitHub Models
**Masalah proyek chat Python**:
- Pastikan paket OpenAI terinstal: `pip install openai`
- Pastikan variabel lingkungan GITHUB_TOKEN diset
- Periksa izin akses GitHub Models
**Docsify tidak menyajikan dokumen**:
- Instal docsify-cli secara global: `npm install -g docsify-cli`
- Jalankan dari direktori root repositori
- Pastikan `docs/_sidebar.md` ada
**Docsify tidak menyajikan dokumentasi**:
- Instal docsify-cli secara global: `npm install -g docsify-cli`
- Jalankan dari direktori root repositori
- Pastikan `docs/_sidebar.md` ada
### Tips Lingkungan Pengembangan
- Gunakan VS Code dengan ekstensi Live Server untuk proyek HTML
- Instal ekstensi ESLint dan Prettier untuk format konsisten
- Gunakan DevTools browser untuk debugging JavaScript
- Untuk proyek Vue, instal ekstensi Vue DevTools browser
- Gunakan VS Code dengan ekstensi Live Server untuk proyek HTML
- Instal ekstensi ESLint dan Prettier untuk konsistensi format
- Gunakan DevTools browser untuk debugging JavaScript
- Untuk proyek Vue, instal ekstensi Vue DevTools browser
### Pertimbangan Performa
- Banyak file terjemahan (50+ bahasa) membuat kloning penuh besar
- Gunakan clone dangkal jika hanya mengerjakan konten: `git clone --depth 1`
- Kecualikan terjemahan dari pencarian saat mengerjakan konten Bahasa Inggris
- Proses build mungkin lambat pada jalankan pertama (npm install, build Vite)
- Banyaknya berkas terjemahan (50+ bahasa) membuat clone penuh besar
- Gunakan shallow clone jika hanya mengerjakan konten: `git clone --depth 1`
- Kecualikan terjemahan dari pencarian saat mengerjakan konten bahasa Inggris
- Proses build mungkin lambat saat pertama kali dijalankan (npm install, build Vite)
## Pertimbangan Keamanan
### Variabel Lingkungan
- Kunci API jangan pernah di-commit ke repositori
- Gunakan file `.env` (sudah dalam `.gitignore`)
- Dokumentasikan variabel lingkungan yang diperlukan di README proyek
- Kunci API tidak boleh di-commit ke repositori
- Gunakan file `.env` (sudah ada di `.gitignore`)
- Dokumentasikan variabel lingkungan yang diperlukan di README proyek
### Proyek Python
- Gunakan virtual environment: `python -m venv venv`
- Pertahankan dependensi tetap terbaru
- Token GitHub harus dengan izin minimal diperlukan
- Gunakan virtual environment: `python -m venv venv`
- Jaga dependensi tetap terbaru
- Token GitHub harus memiliki izin minimal yang diperlukan
### Akses GitHub Models
- Personal Access Tokens (PAT) diperlukan untuk GitHub Models
- Token harus disimpan sebagai variabel lingkungan
- Jangan pernah commit token atau kredensial
- Personal Access Tokens (PAT) diperlukan untuk GitHub Models
- Token harus disimpan sebagai variabel lingkungan
- Jangan pernah commit token atau kredensial
## Catatan Tambahan
### Target Audiens
- Pemula lengkap dalam pengembangan web
- Siswa dan pembelajar mandiri
- Guru yang menggunakan kurikulum di kelas
- Konten dirancang untuk aksesibilitas dan pembangunan keterampilan bertahap
- Pemula lengkap dalam pengembangan web
- Pelajar dan pembelajar mandiri
- Guru yang menggunakan kurikulum di kelas
- Konten dirancang untuk aksesibilitas dan pembangunan keterampilan bertahap
### Filosofi Edukasi
- Pendekatan pembelajaran berbasis proyek
- Pemeriksaan pengetahuan yang sering (kuis)
- Latihan coding langsung
- Contoh aplikasi dunia nyata
- Fokus pada dasar sebelum framework
- Pendekatan pembelajaran berbasis proyek
- Pemeriksaan pengetahuan berkala (kuis)
- Latihan pengkodean langsung
- Contoh aplikasi dunia nyata
- Fokus pada dasar sebelum framework
### Pemeliharaan Repositori
- Komunitas pembelajar dan kontributor yang aktif
- Pembaruan rutin pada dependensi dan konten
- Isu dan diskusi dipantau oleh pemelihara
- Pembaruan terjemahan otomatis melalui GitHub Actions
- Komunitas pembelajar dan kontributor yang aktif
- Pembaruan rutin pada dependensi dan konten
- Isu dan diskusi dipantau oleh pemelihara
- Pembaruan terjemahan otomatis lewat GitHub Actions
### Sumber Daya Terkait
- [Modul Microsoft Learn](https://docs.microsoft.com/learn/)
- [Sumber Daya Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) direkomendasikan untuk pembelajar
- Kursus tambahan: AI Generatif, Data Science, ML, kurikulum IoT tersedia
- [Modul Microsoft Learn](https://docs.microsoft.com/learn/)
- [Sumber Student Hub](https://docs.microsoft.com/learn/student-hub/)
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) direkomendasikan untuk pembelajar
- Kursus tambahan: Generative AI, Data Science, ML, kurikulum IoT tersedia
### Bekerja dengan Proyek Spesifik
### Bekerja dengan Proyek Tertentu
Untuk instruksi mendetail pada proyek individual, lihat file README di:
- `quiz-app/README.md` - aplikasi kuis Vue 3
- `7-bank-project/README.md` - aplikasi perbankan dengan autentikasi
- `5-browser-extension/README.md` - pengembangan ekstensi browser
- `6-space-game/README.md` - pengembangan game berbasis canvas
- `9-chat-project/README.md` - proyek asisten chat AI
Untuk instruksi rinci proyek individu, lihat README di:
- `quiz-app/README.md` - aplikasi kuis Vue 3
- `7-bank-project/README.md` - aplikasi perbankan dengan autentikasi
- `5-browser-extension/README.md` - pengembangan ekstensi browser
- `6-space-game/README.md` - pengembangan game berbasis canvas
- `9-chat-project/README.md` - proyek asisten chat AI
### Struktur Monorepo
Meskipun bukan monorepo tradisional, repositori ini berisi beberapa proyek independen:
- Setiap pelajaran berdiri sendiri
- Proyek tidak berbagi dependensi
- Kerjakan proyek individual tanpa memengaruhi yang lain
- Clone seluruh repo untuk pengalaman kurikulum lengkap
Meski bukan monorepo tradisional, repositori ini mengandung banyak proyek independen:
- Setiap pelajaran mandiri
- Proyek tidak berbagi dependensi
- Kerjakan proyek individual tanpa memengaruhi yang lain
- Clone seluruh repositori untuk pengalaman kurikulum lengkap
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Penafian**:
Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk memberikan terjemahan yang akurat, harap diperhatikan bahwa terjemahan otomatis mungkin mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang sah dan utama. Untuk informasi penting, disarankan menggunakan terjemahan profesional oleh manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau penafsiran yang keliru yang timbul dari penggunaan terjemahan ini.
Dokumen ini telah diterjemahkan menggunakan layanan terjemahan AI [Co-op Translator](https://github.com/Azure/co-op-translator). Meskipun kami berupaya untuk memberikan terjemahan yang akurat, harap diketahui bahwa terjemahan otomatis dapat mengandung kesalahan atau ketidakakuratan. Dokumen asli dalam bahasa aslinya harus dianggap sebagai sumber yang berwenang. Untuk informasi penting, disarankan menggunakan jasa penerjemah profesional manusia. Kami tidak bertanggung jawab atas kesalahpahaman atau kesalahan interpretasi yang timbul dari penggunaan terjemahan ini.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->

@ -493,7 +493,7 @@
},
"AGENTS.md": {
"original_hash": "a362efd06d64d4134a0cfe8515a86d34",
"translation_date": "2026-02-06T09:22:22+00:00",
"translation_date": "2026-02-06T11:43:19+00:00",
"source_file": "AGENTS.md",
"language_code": "vi"
},

@ -1,37 +1,37 @@
# AGENTS.md
## Tổng quan dự án
## Tổng Quan Dự Án
Đây là kho lưu trữ chương trình giảng dạy nhằm 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 gồm một khóa học toàn diện trong 12 tuần được phát triển bởi các Chuyên viên Hỗ trợ Microsoft Cloud, bao gồm 24 bài học thực hành về JavaScript, CSS và HTML.
Đây là khoá học giáo dục dành cho việc 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, gồm 24 bài học thực hành về JavaScript, CSS và HTML.
### Thành phần chính
### Các Thành Phần Chính
- **Nội dung giáo dục**: 24 bài học theo cấu trúc được tổ chức thành các mô-đun dự án
- **Dự án thực hành**: Terrarium, Trò chơi đánh máy, Tiện ích mở rộng trình duyệt, Trò chơi Space, Ứng dụng ngân hàng, Trình soạn thảo mã, và Trợ lý Chat AI
- **Trắc nghiệm tương tác**: 48 bài trắc nghiệm 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ữ qua GitHub Actions
- **Nội dung giáo dục**: 24 bài học có cấu trúc, tổ chức theo các module dự án
- **Dự án thực tế**: 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)
- **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 lưu trữ giáo dục có cấu trúc theo từng 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 nằm trong các thư mục riêng biệt (quiz-app, các dự án bài học khác nhau)
- Khoá học giáo dục với cấu trúc theo từng bài học
- Mỗi thư mục bài học chứa tệp README, ví dụ mã và giải pháp
- Các dự án độc lập trong các thư mục riêng biệt (quiz-app, các dự án bài học khác nhau)
- Hệ thống dịch sử dụng GitHub Actions (co-op-translator)
- Tài liệu 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ó định dạng PDF
## Lệnh thiết lập
## Lệnh Cài Đặt
Kho lưu trữ này chủ yếu dành cho việc sử dụng nội dung giáo dục. Để làm việc với các dự án cụ thể:
Kho lưu trữ này chủ yếu dùng để học tập nội dung. Để làm việc với các dự án cụ thể:
### Thiết lập kho chính
### Cài Đặt Kho Chính
```bash
git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
```
### Thiết lập Quiz App (Vue 3 + Vite)
### Cài Đặt Ứng Dụng Quiz (Vue 3 + Vite)
```bash
cd quiz-app
@ -41,7 +41,7 @@ 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
### Dự Án Tiện Ích Mở Rộng Trình Duyệt
```bash
cd 5-browser-extension/solution
npm install
# Thực hiện theo hướng dẫn tải tiện ích mở rộng của trình duyệt cụ thể
# Làm theo hướng dẫn nạp tiện ích mở rộng dành cho trình duyệt cụ thể
```
### Dự án Trò chơi Space
### 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 fork** về máy cục bộ
1. **Fork kho lưu trữ** vào tài khoản GitHub của bạn
2. **Clone fork của bạn** về máy tính
3. **Tạo nhánh mới** cho các thay đổi của bạn
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 các 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 qua các thư mục bài học theo trình tự
3. Đọc các file README của mỗi bài học
4. Hoàn thành các bài trắc nghiệm trước bài tại https://ff-quizzes.netlify.app/web/
5. Làm theo ví dụ mã trong các thư mục bài học
6. Hoàn thành bài tập và thử thách
7. Tham gia các bài trắc nghiệm sau bài học
2. Truy cập tuần tự vào các thư mục bài học
3. Đọc tệp README cho từng bài học
4. Hoàn thành các bài kiểm tra trước bài học tại https://ff-quizzes.netlify.app/web/
5. Làm theo các ví dụ mã trong các 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 các 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` tại thư mục gốc (cổng 3000)
- **Quiz App**: 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 tiện ích mở rộng Live Server của VS Code 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 thử
## Hướng Dẫn Kiểm Tra
### Kiểm thử Quiz App
### Kiểm Tra Ứ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 xây dựng thành công
npm run build # Xác minh việc xây dựng thành công
```
### Kiểm thử API Ngân hàng
### Kiểm Tra API Ngân Hàng
```bash
cd 7-bank-project/api
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
```
### Phương pháp kiểm thử chung
### Cách Thức Kiểm Tra Chung
- Đây là kho lưu trữ giáo dục không có kiểm thử tự động toàn diện
- Kiểm thử thủ công tập trung vào:
- Đây là khoá họ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:
- Ví dụ mã chạy không lỗi
- Các liên kết trong tài liệu hoạt động chính xác
- Xây dựng dự án hoàn tất thành công
- Các liên kết trong tài liệu hoạt động đúng
- Dự án được build thành công
- Ví dụ tuân theo các thực hành 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` ở các thư mục có package.json
- Xác thực các liên kết markdown hợp lệ
- Kiểm tra ví dụ mã trên trình duyệt hoặc Node.js
- Đảm bảo các bản dịch giữ đúng cấu trúc
- Chạy `npm run lint` trong các thư mục có file package.json
- Kiểm tra các liên kết markdown hợp lệ
- Kiểm tra các ví dụ mã trên trình duyệt hoặc Node.js
- Kiểm tra bảo toàn cấu trúc khi dịch thuật
## Hướng dẫn phong cách mã
## Hướng Dẫn Phong Cách Mã
### JavaScript
- ng cú pháp ES6+ hiện đại
- Tuân theo cấu hình ESLint chuẩn trong các dự án
- Đặt tên biến và hàm rõ ràng để dễ hiểu 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ã với Prettier nếu có cấu hình
- Sử dụng cú pháp ES6+ hiện đại
- Tuân theo cấu hình ESLint tiêu chuẩn trong dự án
- Đặt tên biến và hàm có ý nghĩa rõ ràng để dễ hiểu cho người học
- Thêm chú thích giải thích khái niệm cho học viên
- Định dạng bằng Prettier nếu được cấu hình
### HTML/CSS
- Sử dụng các phần tử HTML5 có ý nghĩa ngữ nghĩa
- Nguyên tắc thiết kế đáp ứng (responsive)
- Quy ước đặt tên lớp rõ ràng
- Các phần tử HTML5 ngữ nghĩa
- Nguyên tắc thiết kế đáp ứng
- Quy tắc đặt tên class rõ ràng
- Chú thích giải thích kỹ thuật CSS cho người học
### Python
- Tuân thủ hướng dẫn phong cách PEP 8
- Ví dụ mã rõ ràng, dễ hiểu, mang tính giáo dục
- Gợi ý kiểu dữ liệu khi hữu ích cho học
- Tuân thủ hướng dẫn PEP 8
- Ví dụ mã rõ ràng, mang tính giáo dục
- Gợi ý kiểu dữ liệu nếu có lợi cho việc học
### Tài liệu Markdown
### Tài Liệu Markdown
- Thứ tự tiêu đề rõ ràng
- Khối mã có chỉ định ngôn ngữ
- Cấu trúc tiêu đề rõ ràng
- Các khối mã kèm định dạng ngôn ngữ
- Liên kết tới tài nguyên 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 để hỗ trợ truy cập
- Văn bản thay thế cho hình ảnh nhằm hỗ trợ truy cập
### Tổ chức tập tin
### Tổ Chức Tệp Tin
- Bài học đánh số theo thứ tự (1-getting-started-lessons, 2-js-basics, vv)
- Các bài học đánh số theo thứ tự (1-getting-started-lessons, 2-js-basics, v.v.)
- Mỗi dự án có thư mục `solution/` và thường có `start/` hoặc `your-work/`
- Ảnh lưu trong thư mục `images/` riêng cho từng bài học
- Bản dịch nằm trong cấu trúc `translations/{mã-ngôn-ngữ}/`
- Ảnh được lưu trong các thư mục `images/` riêng cho từng bài học
- Dịch thuật nằm 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 Quiz App (Azure Static Web Apps)
### Triển Khai Ứng Dụng Quiz (Azure Static Web Apps)
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 trên Azure Static Web Apps:
```bash
cd quiz-app
npm run build # Tạo thư mục dist/
# Triển khai qua quy trình làm việc GitHub Actions khi đẩy lên nhánh main
# Triển khai qua quy trình làm việc GitHub Actions khi đẩy lên nhánh chính
```
Cấu hình Azure Static Web Apps:
- **Vị trí app**: `/quiz-app`
- **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 PDF tài liệu
### Tạo Tài Liệu PDF
```bash
npm install # Cài đặt docsify-to-pdf
npm run convert # Tạo PDF từ docs
npm run convert # Tạo file 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 # Chạy trên localhost:3000
docsify serve # Phục vụ trên localhost:3000
```
### Các quy trình build riêng của dự án
### Xây Dựng Dự Án Riêng Lẻ
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 xây dựng riêng:
- Dự án Vue: `npm run build` tạo các gói sản xuất
- Dự án tĩnh: Không có bước build, phục vụ file trực tiếp
- Dự án tĩnh: không có bước xây dựng, phục vụ tệp 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 Đ
Dùng tiêu đề rõ ràng, mô tả khu vực thay đổi:
- `[Quiz-app] Thêm câu hỏi mới cho bài học X`
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 chính tả trong dự án terrarium`
- `[Translation] Thêm bản dịch tiếng Tây Ban Nha cho bài 5`
- `[Docs] Cập nhật hướng dẫn thiết lập`
- `[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 cài đặt`
### 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` ở các dự án liên quan
- Sửa hết lỗi và cảnh báo lint
1. **Chất Lượng Mã**:
- Chạy `npm run lint` trong các thư mục dự án liên quan
- Sửa mọi lỗi và cảnh báo lint
2. **Kiểm tra xây dựng**:
- Chạy `npm run build` nếu có
2. **Xác Minh Build**:
- Chạy `npm run build` nếu có thể
- Đảm bảo không có lỗi build
3. **Xác thực liên kết**:
- Kiểm tra tất cả các liên kết markdown
- Kiểm tra tham chiếu ảnh hoạt động
3. **Kiểm Tra Liên Kết**:
- Kiểm tra tất cả liên kết markdown
- Xác nhận các tham chiếu ảnh hoạt động
4. **Rà soát nội dung**:
- Đọc lại để tránh lỗi chính tả và ngữ pháp
- Đảm bảo ví dụ mã chính xác và mang tính giáo dục
- Xác nhận bản dịch giữ nguyên ý nghĩa gốc
4. **Rà Soát Nội Dung**:
- Đọc lại chính tả và ngữ pháp
- Đảm bảo ví dụ mã đúng và mang tính giáo dục
- Đảm bảo bản dịch giữ nguyên ý nghĩa gốc
### 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 gửi PR)
- Đồng ý với CLA của Microsoft (kiểm tra tự động khi PR đầu tiên)
- Tuân theo [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ó
- Xem [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ần
### Quy trình đánh g
### Quy Trình Đánh G
- PR được đánh giá bởi người duy trì và cộng đồng
- Ưu tiên rõ ràng về mặt giáo dục
- Ví dụ mã tuân theo các thực hành tốt nhất hiện hành
- Bản dịch được đánh giá độ chính xác và phù hợp văn hóa
- PR được duyệt bởi người quản lý và cộng đồng
- Ưu tiên tính rõ ràng trong giáo dục
- Ví dụ mã phải tuân theo thực hành tốt nhất hiện nay
- Dịch thuật được xem xét về độ chính xác và phù hợp văn hóa
## Hệ thống dịch
## Hệ Thống Dịch Thuật
### Dịch tự động
### Dịch Thuật Tự Động
- Sử dụng GitHub Actions với quy trình làm việc co-op-translator
- Dịch sang hơn 50 ngôn ngữ tự động
- File nguồn nằm trong các thư mục chính
- File đã dịch trong thư mục `translations/{mã-ngôn-ngữ}/`
- Sử dụng GitHub Actions với quy trình co-op-translator
- Tự động dịch sang hơn 50 ngôn ngữ
- Tệp nguồn nằm trong các thư mục chính
- Tệp dịch nằm 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 Thuật Thủ Công
1. Tìm file trong `translations/{mã-ngôn-ngữ}/`
2. Cải tiến trong khi giữ nguyên cấu trúc
1. Tìm tệp trong `translations/{language-code}/`
2. Thực hiện cải tiến mà vẫn giữ nguyên cấu trúc
3. Đảm bảo ví dụ mã vẫn hoạt động
4. Kiểm tra nội dung trắc nghiệm địa phương hóa
4. Kiểm tra nội dung quiz đã bản địa hóa
### Metadata bản dịch
### Metadata Dịch Thuật
Các file đã dịch bao gồm tiêu đề metadata:
Các tệp dịch bao gồm phần đầu metadata:
```markdown
<!--
CO_OP_TRANSLATOR_METADATA:
@ -289,120 +289,120 @@ CO_OP_TRANSLATOR_METADATA:
-->
```
## Gỡ lỗi và Khắc phục sự c
## Gỡ Lỗi và Khắc Phục Sự C
### Các vấn đề phổ biến
### Các Vấn Đề Thường Gặp
**Ứng dụng Quiz không khởi động được**:
**Ứng dụng quiz không khởi động được**:
- 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 port có bị trùng (mặc định Vite dùng port 5173)
- Kiểm tra xung đột cổng (mặc định: Vite dùng cổng 5173)
**Máy chủ API không khởi động**:
- Đảm bảo phiên bản Node.js đáp ứng yêu cầu (node >=10)
- Kiểm tra port đã được sử dụng chưa
- Đảm bảo cài đặt đầy đủ phụ thuộc bằng `npm install`
**API server không khởi động**:
- Đảm bảo Node.js đáp ứng yêu cầu tối thiểu (node >=10)
- Kiểm tra xem cổng có đang bị sử dụng không
- Đảm bảo đã cài đặt đầy đủ dependencies bằng `npm install`
**Tiện ích mở rộng trình duyệt không nạp được**:
- Kiểm tra file manifest.json định dạng đúng
- Kiểm tra console trình duyệt xem có lỗi không
- Làm theo hướng dẫn cài tiện ích mở rộng theo trình duyệt
**Tiện ích mở rộng trình duyệt không tải được**:
- Kiểm tra manifest.json hợp lệ
- Kiểm tra console trình duyệt xem có lỗi
- Làm theo hướng dẫn cài đặt riêng cho trình duyệt
**Vấn đề dự án chat Python**:
- Đảm bảo đã cài gói OpenAI: `pip install openai`
- Kiểm tra biến môi trường GITHUB_TOKEN đã đặt chưa
- Đảm bảo đã cài đặt gói OpenAI: `pip install openai`
- Kiểm tra biến môi trường GITHUB_TOKEN đã thiết lập
- Kiểm tra quyền truy cập GitHub Models
**Docsify không phục vụ tài liệu**:
- 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ữ
- Kiểm tra file `docs/_sidebar.md` có tồn tại không
- Cài đặt docsify-cli toàn cục: `npm install -g docsify-cli`
- Chạy từ thư mục gốc kho lưu trữ
- Kiểm tra tồn tại tệp `docs/_sidebar.md`
### Mẹo môi trường phát triển
### Mẹo Môi Trường Phát Triển
- Dùng VS Code với tiện ích mở rộng 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
- Dự án Vue cài thêm tiện ích Vue DevTools trên trình duyệt
- Dùng VS Code với tiện ích Live Server cho dự án HTML
- Cài đặt tiện ích 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 tiện ích mở rộng Vue DevTools trên trình duyệt
### Cân nhắc hiệu năng
### Cân Nhắc Hiệu Năng
- Số lượng file dịch lớn (50+ ngôn ngữ) làm cho việc clone toàn bộ rất nặng
- Sử dụng clone nông nếu chỉ làm việc với nội dung: `git clone --depth 1`
- Loại trừ phần 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 lần đầu có thể chậm (npm install, build Vite)
- Số lượng tệp dịch lớn (50+ ngôn ngữ) khiến việc clone toàn bộ nặng
- ng clone nông 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 xử lý nội dung tiếng Anh
- Quy trình build có thể chậm lần đầu (npm install, build Vite)
## Cân nhắc bảo mật
## Cân Nhắc Về 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ữ
- Dùng file `.env` (đã được đưa vào `.gitignore`)
- Document các biến môi trường bắt buộc trong README dự án
- Không bao giờ commit kh API vào kho lưu trữ
- Sử dụng file `.env` (đã có trong `.gitignore`)
- Ghi chú 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 phụ thuộc thường xuyên
- Cập nhật dependencies thường xuyên
- Token GitHub nên có quyền tối thiểu cần thiết
### Truy cập GitHub Models
### Quyền Truy Cập GitHub Models
- Cần Token Truy cập Cá nhân (PAT) cho GitHub Models
- Token nên lưu dưới biến môi trường
- Cần Personal Access Tokens (PAT) để truy cập GitHub Models
- Token nên lưu trữ dưới dạng biến môi trường
- Không bao giờ commit token hoặc thông tin đăng nhập
## Ghi chú bổ sung
## Ghi Chú Bổ Sung
### Đối tượng hướng tới
### Đối Tượng Hướng Đến
- Người mới hoàn toàn với phát triển web
- Học sinh và người tự học
- Giảng viên sử dụng chương trình trong lớp học
- Nội dung thiết kế cho dễ truy cập và phát triển kỹ năng từng bước
- Sinh viên 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à phát triển kỹ năng tuần tự
### Triết lý giáo dục
### Triết Lý Giáo Dục
- Phương pháp học dựa trên dự án
- Kiểm tra kiến thức thường xuyên (trắc nghiệm)
- Phương pháp học theo dự án
- Kiểm tra kiến thức thường xuyên (quiz)
- Bài tập mã hóa thực hành
- Ví dụ ứng dụng thực tế
- Tập trung vào kiến thức nền tảng trước các framework
- Tập trung vào nền tảng trước khi học framework
### Bảo trì kho lưu trữ
### Bảo Trì Kho Lưu Trữ
- Cộng đồng người học và đóng góp viên năng động
- 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ì
- Tự động cập nhật bản dịch qua GitHub Actions
- Cộng đồng học tập và đóng góp tích cực
- Cập nhật thường xuyên các dependencies và nội dung
- Theo dõi issues và thảo luận bởi người quản lý
- 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 module Microsoft Learn](https://docs.microsoft.com/learn/)
- [Modules học 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) được khuyên dùng cho người học
- Các khóa học bổ sung: AI sinh tạo, Khoa học dữ liệu, ML, IoT có sẵn
- [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) khuyến nghị cho người học
- Các khoá học bổ sung: AI Sinh tạo, Khoa học dữ liệu, ML, IoT
### Làm việc với dự án cụ thể
### Làm Việc Với Các Dự Án Cụ Thể
Hướng dẫn chi tiết cho từng dự án trong các file README:
Hướng dẫn chi tiết về các dự án riêng lẻ xem trong 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 có 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 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
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
- 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 mà không ảnh hưởng đến các dự án khác
- Clone toàn bộ kho để trải nghiệm toàn bộ chương trình 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 là 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 không ảnh hưởng lẫn nhau
- Clone toàn bộ kho để trải nghiệm toàn bộ khóa 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 các bản dịch tự động có thể chứa lỗi hoặc không chính xác. Tài liệu gốc bằng ngôn ngữ gốc của nó nên được coi là nguồn chính xác và đáng tin cậy. Đối với các thông tin quan trọng, nên sử dụng bản dịch do con người chuyên nghiệp 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 hoặc giải thích 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 việc 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ữ gốc nên được xem là nguồn chính xác và uy tín nhất. Đố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 bởi con người. Chúng tôi không chịu trách nhiệm đối với bất kỳ sự hiểu nhầm hay giải thích sai lệch 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