|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "d0a02cb117e91a5b5f24178080068a3d",
|
|
|
"translation_date": "2025-10-23T01:30:29+00:00",
|
|
|
"source_file": "7-bank-project/3-data/assignment.md",
|
|
|
"language_code": "he"
|
|
|
}
|
|
|
-->
|
|
|
# משימת תיעוד ושיפור קוד
|
|
|
|
|
|
## מטרות למידה
|
|
|
|
|
|
על ידי השלמת משימה זו, תתרגלו מיומנויות פיתוח תוכנה חיוניות שמשתמשים בהן מפתחים מקצועיים מדי יום. תלמדו לארגן קוד לשם תחזוקה, להפחית כפילויות באמצעות הפשטה, ולתעד את עבודתכם עבור מפתחים עתידיים (כולל אתם עצמכם!).
|
|
|
|
|
|
קוד נקי ומתועד היטב הוא קריטי בפרויקטים אמיתיים של פיתוח אתרים, בהם משתפים פעולה מספר מפתחים וקוד הבסיס מתפתח לאורך זמן.
|
|
|
|
|
|
## סקירת המשימה
|
|
|
|
|
|
קובץ `app.js` של אפליקציית הבנקאות שלכם גדל משמעותית עם פונקציות של התחברות, הרשמה ולוח מחוונים. הגיע הזמן לשפר את הקוד הזה באמצעות שיטות פיתוח מקצועיות כדי לשפר את הקריאות, התחזוקה ולהפחית כפילויות.
|
|
|
|
|
|
## הוראות
|
|
|
|
|
|
שפרו את קובץ `app.js` שלכם על ידי יישום שלוש טכניקות שיפור קוד מרכזיות:
|
|
|
|
|
|
### 1. חילוץ קבועי תצורה
|
|
|
|
|
|
**משימה**: צרו חלק תצורה בראש הקובץ עם קבועים לשימוש חוזר.
|
|
|
|
|
|
**הנחיות ליישום**:
|
|
|
- חילצו את כתובת הבסיס של API השרת (כרגע מקודדת במספר מקומות)
|
|
|
- צרו קבועים עבור הודעות שגיאה שמופיעות במספר פונקציות
|
|
|
- שקלו לחלץ נתיבי מסלולים ומזהי אלמנטים שמשתמשים בהם שוב ושוב
|
|
|
|
|
|
**מבנה לדוגמה**:
|
|
|
```javascript
|
|
|
// Configuration constants
|
|
|
const API_BASE_URL = 'http://localhost:5000/api';
|
|
|
const ROUTES = {
|
|
|
LOGIN: '/login',
|
|
|
DASHBOARD: '/dashboard'
|
|
|
};
|
|
|
```
|
|
|
|
|
|
### 2. יצירת פונקציית בקשה מאוחדת
|
|
|
|
|
|
**משימה**: בנו פונקציה לשימוש חוזר בשם `sendRequest()` שמבטלת קוד כפול בין `createAccount()` ו-`getAccount()`.
|
|
|
|
|
|
**דרישות**:
|
|
|
- טיפול בבקשות GET ו-POST
|
|
|
- הכללת טיפול בשגיאות מתאים
|
|
|
- תמיכה בנקודות קצה שונות של URL
|
|
|
- קבלת נתוני גוף בקשה אופציונליים
|
|
|
|
|
|
**הנחיות למבנה הפונקציה**:
|
|
|
```javascript
|
|
|
async function sendRequest(endpoint, method = 'GET', data = null) {
|
|
|
// Your implementation here
|
|
|
}
|
|
|
```
|
|
|
|
|
|
### 3. הוספת תיעוד קוד מקצועי
|
|
|
|
|
|
**משימה**: תעדו את הקוד שלכם עם הערות ברורות ומועילות שמסבירות את ה"מדוע" מאחורי הלוגיקה.
|
|
|
|
|
|
**סטנדרטים לתיעוד**:
|
|
|
- הוסיפו תיעוד פונקציות שמסביר את המטרה, הפרמטרים וערכי ההחזרה
|
|
|
- כללו הערות בתוך הקוד עבור לוגיקה מורכבת או כללי עסק
|
|
|
- קבצו פונקציות קשורות יחד עם כותרות חלקים
|
|
|
- הסבירו כל דפוס קוד שאינו ברור או פתרונות ספציפיים לדפדפן
|
|
|
|
|
|
**סגנון תיעוד לדוגמה**:
|
|
|
```javascript
|
|
|
/**
|
|
|
* Authenticates user and redirects to dashboard
|
|
|
* @param {Event} event - Form submission event
|
|
|
* @returns {Promise<void>} - Resolves when login process completes
|
|
|
*/
|
|
|
async function login(event) {
|
|
|
// Prevent default form submission to handle with JavaScript
|
|
|
event.preventDefault();
|
|
|
|
|
|
// Your implementation...
|
|
|
}
|
|
|
```
|
|
|
|
|
|
## קריטריונים להצלחה
|
|
|
|
|
|
הקוד המשופר שלכם צריך להציג את שיטות הפיתוח המקצועיות הבאות:
|
|
|
|
|
|
### יישום מצטיין
|
|
|
- ✅ **קבועים**: כל המחרוזות והכתובות המקודדות הוחלפו בקבועים עם שמות ברורים
|
|
|
- ✅ **עקרון DRY**: לוגיקת בקשות משותפת אוחדה לפונקציה לשימוש חוזר בשם `sendRequest()`
|
|
|
- ✅ **תיעוד**: לפונקציות יש הערות JSDoc ברורות שמסבירות את המטרה והפרמטרים
|
|
|
- ✅ **ארגון**: הקוד מקובץ בצורה לוגית עם כותרות חלקים ועיצוב עקבי
|
|
|
- ✅ **טיפול בשגיאות**: טיפול בשגיאות משופר באמצעות פונקציית הבקשה החדשה
|
|
|
|
|
|
### יישום מספק
|
|
|
- ✅ **קבועים**: רוב הערכים החוזרים הוחלצו, עם מעט ערכים מקודדים שנותרו
|
|
|
- ✅ **פקטוריזציה**: פונקציית `sendRequest()` בסיסית נוצרה אך עשויה לא לטפל בכל מקרי הקצה
|
|
|
- ✅ **הערות**: פונקציות מרכזיות מתועדות, אם כי חלק מההסברים יכולים להיות יותר מפורטים
|
|
|
- ✅ **קריאות**: הקוד מאורגן היטב באופן כללי עם כמה אזורים לשיפור
|
|
|
|
|
|
### דורש שיפור
|
|
|
- ❌ **קבועים**: מחרוזות וכתובות רבות עדיין מקודדות ברחבי הקובץ
|
|
|
- ❌ **כפילות**: נותרת כפילות משמעותית בין פונקציות דומות
|
|
|
- ❌ **תיעוד**: הערות חסרות או לא מספקות שאינן מסבירות את מטרת הקוד
|
|
|
- ❌ **ארגון**: הקוד חסר מבנה ברור וקיבוץ לוגי
|
|
|
|
|
|
## בדיקת הקוד המשופר שלכם
|
|
|
|
|
|
לאחר השיפור, ודאו שאפליקציית הבנקאות שלכם עדיין פועלת כראוי:
|
|
|
|
|
|
1. **בדקו את כל זרימות המשתמש**: הרשמה, התחברות, תצוגת לוח מחוונים וטיפול בשגיאות
|
|
|
2. **אמתו קריאות API**: ודאו שפונקציית `sendRequest()` שלכם פועלת הן ליצירת חשבון והן לשליפת חשבון
|
|
|
3. **בדקו תרחישי שגיאה**: בדקו עם אישורים לא תקינים ושגיאות רשת
|
|
|
4. **סקירת פלט הקונסולה**: ודאו שלא הוכנסו שגיאות חדשות במהלך השיפור
|
|
|
|
|
|
## הנחיות להגשה
|
|
|
|
|
|
הגישו את קובץ `app.js` המשופר שלכם עם:
|
|
|
- כותרות חלקים ברורות שמארגנות פונקציונליות שונה
|
|
|
- עיצוב ואינדנטציה עקביים של הקוד
|
|
|
- תיעוד JSDoc מלא לכל הפונקציות
|
|
|
- הערה קצרה בראש שמסבירה את גישת השיפור שלכם
|
|
|
|
|
|
**אתגר בונוס**: צרו קובץ תיעוד קוד פשוט (`CODE_STRUCTURE.md`) שמסביר את הארכיטקטורה של האפליקציה שלכם וכיצד הפונקציות השונות פועלות יחד.
|
|
|
|
|
|
## חיבור לעולם האמיתי
|
|
|
|
|
|
משימה זו משקפת את סוג תחזוקת הקוד שמפתחים מקצועיים מבצעים באופן קבוע. בסביבות תעשייתיות:
|
|
|
- **סקירות קוד** מעריכות קריאות ותחזוקה כמו במשימה זו
|
|
|
- **חוב טכני** מצטבר כאשר קוד לא משופר ומתועד באופן קבוע
|
|
|
- **שיתוף פעולה בצוות** תלוי בקוד ברור ומתועד היטב שמפתחים חדשים יכולים להבין
|
|
|
- **תיקוני באגים** הרבה יותר קלים בקוד מאורגן היטב עם הפשטות מתאימות
|
|
|
|
|
|
המיומנויות שאתם מתרגלים כאן - חילוץ קבועים, ביטול כפילויות וכתיבת תיעוד ברור - הן יסודיות לפיתוח תוכנה מקצועי.
|
|
|
|
|
|
---
|
|
|
|
|
|
**הצהרת אחריות**:
|
|
|
מסמך זה תורגם באמצעות שירות תרגום מבוסס AI [Co-op Translator](https://github.com/Azure/co-op-translator). למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. עבור מידע קריטי, מומלץ להשתמש בתרגום מקצועי אנושי. אנו לא נושאים באחריות לאי הבנות או פרשנויות שגויות הנובעות משימוש בתרגום זה. |
