Web-Dev-For-Beginners/translations/he/5-browser-extension/2-forms-browsers-local-storage/README.md

פרויקט הרחבת דפדפן חלק 2: קריאה ל-API ושימוש באחסון מקומי

journey
    title Your API Integration & Storage Journey
    section Foundation
      Setup DOM references: 3: Student
      Add event listeners: 4: Student
      Handle form submission: 4: Student
    section Data Management
      Implement local storage: 4: Student
      Build API calls: 5: Student
      Handle async operations: 5: Student
    section User Experience
      Add error handling: 5: Student
      Create loading states: 4: Student
      Polish interactions: 5: Student

שאלון לפני השיעור

שאלון לפני השיעור

הקדמה

זוכרים את הרחבת הדפדפן שהתחלתם לבנות? כרגע יש לכם טופס שנראה טוב, אבל הוא בעצם סטטי. היום נביא אותו לחיים על ידי חיבור לנתונים אמיתיים ונתינת זיכרון.

תחשבו על מחשבי בקרת המשימה של אפולו - הם לא רק הציגו מידע קבוע. הם תקשרו באופן רציף עם החללית, התעדכנו בנתוני טלמטריה וזכרו פרמטרים קריטיים של המשימה. זה סוג ההתנהגות הדינמית שאנחנו בונים היום. ההרחבה שלכם תתחבר לאינטרנט, תאסוף נתוני סביבה אמיתיים ותזכור את ההגדרות שלכם לפעם הבאה.

אינטגרציה עם API אולי נשמעת מורכבת, אבל זה בעצם ללמד את הקוד שלכם איך לתקשר עם שירותים אחרים. בין אם אתם שולפים נתוני מזג אוויר, עדכונים מרשתות חברתיות או מידע על טביעת רגל פחמנית כמו שנעשה היום, הכל קשור ליצירת חיבורים דיגיטליים. נחקור גם איך דפדפנים יכולים לשמר מידע - בדומה לאיך ספריות השתמשו בקטלוגים כדי לזכור איפה הספרים נמצאים.

בסוף השיעור הזה, תהיה לכם הרחבת דפדפן שמביאה נתונים אמיתיים, שומרת העדפות משתמש ומספקת חוויית שימוש חלקה. בואו נתחיל!

mindmap
  root((Dynamic Extensions))
    DOM Manipulation
      Element Selection
      Event Handling
      State Management
      UI Updates
    Local Storage
      Data Persistence
      Key-Value Pairs
      Session Management
      User Preferences
    API Integration
      HTTP Requests
      Authentication
      Data Parsing
      Error Handling
    Async Programming
      Promises
      Async/Await
      Error Catching
      Non-blocking Code
    User Experience
      Loading States
      Error Messages
      Smooth Transitions
      Data Validation

✅ עקבו אחרי הקטעים הממוספרים בקבצים המתאימים כדי לדעת איפה למקם את הקוד שלכם

הגדרת האלמנטים שצריך לתפעל בהרחבה

לפני שה-JavaScript שלכם יכול לתפעל את הממשק, הוא צריך הפניות לאלמנטים ספציפיים ב-HTML. תחשבו על זה כמו טלסקופ שצריך להיות מכוון לכוכבים מסוימים - לפני שגלילאו יכול היה לחקור את ירחי צדק, הוא היה צריך לאתר ולהתמקד בצדק עצמו.

בקובץ index.js שלכם, ניצור משתני const שיתפסו הפניות לכל אלמנט חשוב בטופס. זה דומה לאיך מדענים מסמנים את הציוד שלהם - במקום לחפש בכל המעבדה בכל פעם, הם יכולים לגשת ישירות למה שהם צריכים.

flowchart LR
    A[JavaScript Code] --> B[document.querySelector]
    B --> C[CSS Selectors]
    C --> D[HTML Elements]
    
    D --> E[".form-data"]
    D --> F[".region-name"]
    D --> G[".api-key"]
    D --> H[".loading"]
    D --> I[".errors"]
    D --> J[".result-container"]
    
    E --> K[Form Element]
    F --> L[Input Field]
    G --> M[Input Field]
    H --> N[UI Element]
    I --> O[UI Element]
    J --> P[UI Element]
    
    style A fill:#e1f5fe
    style D fill:#e8f5e8
    style K fill:#fff3e0
    style L fill:#fff3e0
    style M fill:#fff3e0

// form fields
const form = document.querySelector('.form-data');
const region = document.querySelector('.region-name');
const apiKey = document.querySelector('.api-key');

// results
const errors = document.querySelector('.errors');
const loading = document.querySelector('.loading');
const results = document.querySelector('.result-container');
const usage = document.querySelector('.carbon-usage');
const fossilfuel = document.querySelector('.fossil-fuel');
const myregion = document.querySelector('.my-region');
const clearBtn = document.querySelector('.clear-btn');

מה הקוד הזה עושה:

• תופס אלמנטים בטופס באמצעות document.querySelector() עם בוררי CSS
• יוצר הפניות לשדות קלט עבור שם האזור ומפתח ה-API
• מקים חיבורים לאלמנטים להצגת תוצאות נתוני שימוש בפחמן
• מגדיר גישה לאלמנטים בממשק כמו אינדיקטורים לטעינה והודעות שגיאה
• שומר כל הפניה לאלמנט במשתנה const לשימוש חוזר בקוד שלכם

הוספת מאזיני אירועים

עכשיו נעשה שההרחבה שלכם תגיב לפעולות המשתמש. מאזיני אירועים הם הדרך של הקוד שלכם לעקוב אחרי אינטראקציות משתמש. תחשבו עליהם כמו המפעילים במרכזיות טלפון מוקדמות - הם הקשיבו לשיחות נכנסות וחיברו את המעגלים הנכונים כשמישהו רצה לבצע שיחה.

sequenceDiagram
    participant User
    participant Form
    participant JavaScript
    participant API
    participant Storage
    
    User->>Form: Fills out region/API key
    User->>Form: Clicks submit
    Form->>JavaScript: Triggers submit event
    JavaScript->>JavaScript: handleSubmit(e)
    JavaScript->>Storage: Save user preferences
    JavaScript->>API: Fetch carbon data
    API->>JavaScript: Returns data
    JavaScript->>Form: Update UI with results
    
    User->>Form: Clicks clear button
    Form->>JavaScript: Triggers click event
    JavaScript->>Storage: Clear saved data
    JavaScript->>Form: Reset to initial state

form.addEventListener('submit', (e) => handleSubmit(e));
clearBtn.addEventListener('click', (e) => reset(e));
init();

הבנת המושגים האלה:

• מצמידים מאזין שליחת טופס שמופעל כשהמשתמשים לוחצים Enter או על כפתור השליחה
• מחברים מאזין לחיצה לכפתור הניקוי לאיפוס הטופס
• מעבירים את אובייקט האירוע (e) לפונקציות מטפלות לשליטה נוספת
• קוראים לפונקציה init() מיד כדי להגדיר את מצב ההרחבה הראשוני

✅ שימו לב לקיצור התחביר של פונקציות חץ שמשמש כאן. הגישה המודרנית הזו ב-JavaScript נקייה יותר מביטויי פונקציה מסורתיים, אבל שניהם עובדים באותה מידה!

🔄 בדיקה פדגוגית

הבנת טיפול באירועים: לפני המעבר לאתחול, ודאו שאתם יכולים:

• ✅ להסביר איך addEventListener מחבר פעולות משתמש לפונקציות JavaScript
• ✅ להבין למה אנחנו מעבירים את אובייקט האירוע (e) לפונקציות מטפלות
• ✅ לזהות את ההבדל בין אירועי submit ו-click
• ✅ לתאר מתי הפונקציה init() פועלת ולמה

מבחן עצמי מהיר: מה יקרה אם תשכחו את e.preventDefault() בשליחת טופס? תשובה: הדף ייטען מחדש, יאבד את כל מצב ה-JavaScript ויפריע לחוויית המשתמש

בניית פונקציות אתחול ואיפוס

בואו ניצור את הלוגיקה של האתחול להרחבה שלכם. הפונקציה init() היא כמו מערכת ניווט של ספינה שבודקת את המכשירים שלה - היא קובעת את המצב הנוכחי ומכווננת את הממשק בהתאם. היא בודקת אם מישהו השתמש בהרחבה שלכם בעבר וטוענת את ההגדרות הקודמות שלו.

הפונקציה reset() מספקת למשתמשים התחלה חדשה - בדומה לאיך שמדענים מאפסים את המכשירים שלהם בין ניסויים כדי להבטיח נתונים נקיים.

function init() {
	// Check if user has previously saved API credentials
	const storedApiKey = localStorage.getItem('apiKey');
	const storedRegion = localStorage.getItem('regionName');

	// Set extension icon to generic green (placeholder for future lesson)
	// TODO: Implement icon update in next lesson

	if (storedApiKey === null || storedRegion === null) {
		// First-time user: show the setup form
		form.style.display = 'block';
		results.style.display = 'none';
		loading.style.display = 'none';
		clearBtn.style.display = 'none';
		errors.textContent = '';
	} else {
		// Returning user: load their saved data automatically
		displayCarbonUsage(storedApiKey, storedRegion);
		results.style.display = 'none';
		form.style.display = 'none';
		clearBtn.style.display = 'block';
	}
}

function reset(e) {
	e.preventDefault();
	// Clear stored region to allow user to choose a new location
	localStorage.removeItem('regionName');
	// Restart the initialization process
	init();
}

פירוט מה קורה כאן:

• שולפת מפתח API ואזור מאוחסנים מהאחסון המקומי של הדפדפן
• בודקת אם זה משתמש בפעם הראשונה (אין אישורים מאוחסנים) או משתמש חוזר
• מציגה את טופס ההגדרות למשתמשים חדשים ומסתירה אלמנטים אחרים בממשק
• טוענת נתונים שמורים אוטומטית למשתמשים חוזרים ומציגה את אפשרות האיפוס
• מנהלת את מצב הממשק בהתאם לנתונים הזמינים

מושגים חשובים על אחסון מקומי:

• משמר נתונים בין סשנים של הדפדפן (בניגוד לאחסון סשן)
• מאחסן נתונים כזוגות מפתח-ערך באמצעות getItem() ו-setItem()
• מחזיר null כשאין נתונים קיימים עבור מפתח מסוים
• מספק דרך פשוטה לזכור העדפות והגדרות משתמש

💡 הבנת אחסון בדפדפן: LocalStorage הוא כמו לתת להרחבה שלכם זיכרון מתמשך. תחשבו איך ספריית אלכסנדריה העתיקה שמרה מגילות - המידע נשאר זמין גם כשהחוקרים עזבו וחזרו.

מאפיינים עיקריים:

• משמר נתונים גם אחרי שסוגרים את הדפדפן
• שורד הפעלות מחדש של המחשב ותקלות בדפדפן
• מספק שטח אחסון משמעותי להעדפות משתמש
• מציע גישה מיידית ללא עיכובים ברשת

הערה חשובה: להרחבת הדפדפן שלכם יש אחסון מקומי מבודד משלה, שהוא נפרד מדפי אינטרנט רגילים. זה מספק אבטחה ומונע קונפליקטים עם אתרים אחרים.

ניתן לצפות בנתונים המאוחסנים שלכם על ידי פתיחת כלי המפתחים של הדפדפן (F12), מעבר ללשונית Application, והרחבת הסעיף Local Storage.

stateDiagram-v2
    [*] --> CheckStorage: Extension starts
    CheckStorage --> FirstTime: No stored data
    CheckStorage --> Returning: Data found
    
    FirstTime --> ShowForm: Display setup form
    ShowForm --> UserInput: User enters data
    UserInput --> SaveData: Store in localStorage
    SaveData --> FetchAPI: Get carbon data
    
    Returning --> LoadData: Read from localStorage
    LoadData --> FetchAPI: Get carbon data
    
    FetchAPI --> ShowResults: Display data
    ShowResults --> UserAction: User interacts
    
    UserAction --> Reset: Clear button clicked
    UserAction --> ShowResults: View data
    
    Reset --> ClearStorage: Remove saved data
    ClearStorage --> FirstTime: Back to setup

⚠️ שיקול אבטחה: באפליקציות ייצור, אחסון מפתחות API ב-LocalStorage מהווה סיכון אבטחה מכיוון ש-JavaScript יכול לגשת לנתונים אלה. למטרות לימוד, הגישה הזו מתאימה, אבל באפליקציות אמיתיות יש להשתמש באחסון מאובטח בצד השרת עבור אישורים רגישים.

טיפול בשליחת טופס

עכשיו נטפל במה שקורה כשמישהו שולח את הטופס שלכם. כברירת מחדל, דפדפנים טוענים מחדש את הדף כששולחים טפסים, אבל אנחנו ניירט את ההתנהגות הזו כדי ליצור חוויית שימוש חלקה.

הגישה הזו דומה לאיך שבקרת משימה מטפלת בתקשורת עם חלליות - במקום לאפס את כל המערכת עבור כל שידור, הם שומרים על פעולה רציפה תוך עיבוד מידע חדש.

צרו פונקציה שתתפוס את אירוע שליחת הטופס ותשלוף את הקלט של המשתמש:

function handleSubmit(e) {
	e.preventDefault();
	setUpUser(apiKey.value, region.value);
}

בקטע לעיל, עשינו:

• מונעים את התנהגות ברירת המחדל של שליחת טופס שתגרום לרענון הדף
• שולפים ערכי קלט משתמש משדות מפתח ה-API והאזור
• מעבירים את נתוני הטופס לפונקציה setUpUser() לעיבוד
• שומרים על התנהגות אפליקציה בעמוד אחד על ידי הימנעות מרענון הדף

✅ זכרו ששדות הטופס ב-HTML שלכם כוללים את התכונה required, כך שהדפדפן מאמת אוטומטית שהמשתמשים מספקים גם את מפתח ה-API וגם את האזור לפני שהפונקציה הזו פועלת.

הגדרת העדפות משתמש

הפונקציה setUpUser אחראית לשמירת האישורים של המשתמש ולהתחלת הקריאה הראשונה ל-API. זה יוצר מעבר חלק מההגדרות להצגת התוצאות.

function setUpUser(apiKey, regionName) {
	// Save user credentials for future sessions
	localStorage.setItem('apiKey', apiKey);
	localStorage.setItem('regionName', regionName);
	
	// Update UI to show loading state
	loading.style.display = 'block';
	errors.textContent = '';
	clearBtn.style.display = 'block';
	
	// Fetch carbon usage data with user's credentials
	displayCarbonUsage(apiKey, regionName);
}

שלב אחר שלב, הנה מה שקורה כאן:

• שומרת את מפתח ה-API ושם האזור באחסון המקומי לשימוש עתידי
• מציגה אינדיקטור טעינה כדי ליידע את המשתמשים שהנתונים נשלפים
• מנקה כל הודעות שגיאה קודמות מהתצוגה
• מגלה את כפתור הניקוי למשתמשים כדי לאפס את ההגדרות שלהם מאוחר יותר
• מתחילה את הקריאה ל-API כדי לשלוף נתוני שימוש בפחמן אמיתיים

הפונקציה הזו יוצרת חוויית משתמש חלקה על ידי ניהול גם שימור נתונים וגם עדכוני ממשק משתמש בפעולה מתואמת אחת.

הצגת נתוני שימוש בפחמן

עכשיו נחבר את ההרחבה שלכם למקורות נתונים חיצוניים דרך APIs. זה הופך את ההרחבה שלכם מכלי עצמאי למשהו שיכול לגשת למידע בזמן אמת מכל רחבי האינטרנט.

הבנת APIs

APIs הם איך אפליקציות שונות מתקשרות זו עם זו. תחשבו עליהם כמו מערכת הטלגרף שחיברה ערים מרוחקות במאה ה-19 - מפעילים היו שולחים בקשות לתחנות מרוחקות ומקבלים תגובות עם המידע המבוקש. בכל פעם שאתם בודקים רשתות חברתיות, שואלים עוזר קולי שאלה או משתמשים באפליקציית משלוחים, APIs מאפשרים את חילופי הנתונים האלה.

flowchart TD
    A[Your Extension] --> B[HTTP Request]
    B --> C[CO2 Signal API]
    C --> D{Valid Request?}
    D -->|Yes| E[Query Database]
    D -->|No| F[Return Error]
    E --> G[Carbon Data]
    G --> H[JSON Response]
    H --> I[Your Extension]
    F --> I
    I --> J[Update UI]
    
    subgraph "API Request"
        K[Headers: auth-token]
        L[Parameters: countryCode]
        M[Method: GET]
    end
    
    subgraph "API Response"
        N[Carbon Intensity]
        O[Fossil Fuel %]
        P[Timestamp]
    end
    
    style C fill:#e8f5e8
    style G fill:#fff3e0
    style I fill:#e1f5fe

מושגים חשובים על REST APIs:

• REST מייצג 'העברת מצב ייצוגית'
• משתמש בשיטות HTTP סטנדרטיות (GET, POST, PUT, DELETE) כדי לתקשר עם נתונים
• מחזיר נתונים בפורמטים צפויים, בדרך כלל JSON
• מספק נקודות קצה מבוססות URL לסוגי בקשות שונים

✅ ה-CO2 Signal API שנשתמש בו מספק נתוני עוצמת פחמן בזמן אמת מרשתות חשמל ברחבי העולם. זה עוזר למשתמשים להבין את ההשפעה הסביבתית של השימוש שלהם בחשמל!

💡 הבנת JavaScript אסינכרוני: המילה async מאפשרת לקוד שלכם להתמודד עם מספר פעולות בו זמנית. כשאתם מבקשים נתונים משרת, אתם לא רוצים שכל ההרחבה שלכם תקפא - זה יהיה כמו בקרת תעבורה אווירית שעוצרת את כל הפעולות בזמן שמחכים למטוס אחד להגיב.

יתרונות עיקריים:

• שומרת על תגובתיות ההרחבה בזמן טעינת נתונים
• מאפשרת לקוד אחר להמשיך לפעול במהלך בקשות רשת
• משפרת את קריאות הקוד בהשוואה לדפוסי קריאה מסורתיים
• מאפשרת טיפול אלגנטי בשגיאות רשת

הנה סרטון קצר על async:

🎥 לחצו על התמונה למעלה לצפייה בסרטון על async/await.

🔄 בדיקה פדגוגית

הבנת תכנות אסינכרוני: לפני שתצללו לפונקציית ה-API, ודאו שאתם מבינים:

• ✅ למה אנחנו משתמשים ב-async/await במקום לחסום את כל ההרחבה
• ✅ איך בלוקים של try/catch מטפלים בשגיאות רשת בצורה אלגנטית
• ✅ ההבדל בין פעולות סינכרוניות לאסינכרוניות
• ✅ למה קריאות API יכולות להיכשל ואיך להתמודד עם הכישלונות האלה

חיבור לעולם האמיתי: שקלו את הדוגמאות האסינכרוניות היומיומיות האלה:

• הזמנת אוכל: אתם לא מחכים ליד המטבח - אתם מקבלים קבלה וממשיכים בפעילויות אחרות
• שליחת אימיילים: אפליקציית האימייל שלכם לא קופאת בזמן השליחה - אתם יכולים לכתוב עוד אימיילים
• טעינת דפי אינטרנט: תמונות נטענות בהדרגה בזמן שאתם כבר יכולים לקרוא את הטקסט

זרימת אימות API:

sequenceDiagram
    participant Ext as Extension
    participant API as CO2 Signal API
    participant DB as Database
    
    Ext->>API: Request with auth-token
    API->>API: Validate token
    API->>DB: Query carbon data
    DB->>API: Return data
    API->>Ext: JSON response
    Ext->>Ext: Update UI

צרו את הפונקציה לשליפת והצגת נתוני שימוש בפחמן:

// Modern fetch API approach (no external dependencies needed)
async function displayCarbonUsage(apiKey, region) {
	try {
		// Fetch carbon intensity data from CO2 Signal API
		const response = await fetch('https://api.co2signal.com/v1/latest', {
			method: 'GET',
			headers: {
				'auth-token': apiKey,
				'Content-Type': 'application/json'
			},
			// Add query parameters for the specific region
			...new URLSearchParams({ countryCode: region }) && {
				url: `https://api.co2signal.com/v1/latest?countryCode=${region}`
			}
		});

		// Check if the API request was successful
		if (!response.ok) {
			throw new Error(`API request failed: ${response.status}`);
		}

		const data = await response.json();
		const carbonData = data.data;

		// Calculate rounded carbon intensity value
		const carbonIntensity = Math.round(carbonData.carbonIntensity);

		// Update the user interface with fetched data
		loading.style.display = 'none';
		form.style.display = 'none';
		myregion.textContent = region.toUpperCase();
		usage.textContent = `${carbonIntensity} grams (grams CO₂ emitted per kilowatt hour)`;
		fossilfuel.textContent = `${carbonData.fossilFuelPercentage.toFixed(2)}% (percentage of fossil fuels used to generate electricity)`;
		results.style.display = 'block';

		// TODO: calculateColor(carbonIntensity) - implement in next lesson

	} catch (error) {
		console.error('Error fetching carbon data:', error);
		
		// Show user-friendly error message
		loading.style.display = 'none';
		results.style.display = 'none';
		errors.textContent = 'Sorry, we couldn\'t fetch data for that region. Please check your API key and region code.';
	}
}

פירוט מה קורה כאן:

• משתמשת ב-API המודרני fetch() במקום ספריות חיצוניות כמו Axios לקוד נקי וללא תלות
• מיישמת בדיקת שגיאות נכונה עם response.ok כדי לתפוס כישלונות API מוקדם
• מטפלת בפעולות אסינכרוניות עם async/await לזרימת קוד קריאה יותר
• מאמתת עם ה-CO2 Signal API באמצעות כותרת auth-token
• מנתחת נתוני JSON מהתגובה ושולפת מידע על עוצמת הפחמן
• מעדכנת אלמנטים שונים בממשק עם נתוני סביבה מעוצבים
• מספקת הודעות שגיאה ידידותיות למשתמש כשקריאות API נכשלות

מושגים מודרניים חשובים ב-JavaScript שמודגמים:

• תבניות טקסט עם תחביר ${} לעיצוב מחרוזות נקי
• טיפול בשגיאות עם בלוקים של try/catch לאפליקציות יציבות
• דפוס async/await לטיפול בקריאות רשת בצורה אלגנטית
• פירוק אובייקטים לשליפת נתונים ספציפיים מתגובות API
• שרשור שיטות למניפולציות רבות ב-DOM

✅ הפונקציה הזו מדגימה כמה מושגים חשובים בפיתוח ווב - תקשורת עם שרתים חיצוניים, טיפול באימות, עיבוד נתונים, עדכון ממשקים וניהול שגיאות בצורה אלגנטית. אלו מיומנויות בסיסיות שמפתחים מקצועיים משתמשים בהן באופן קבוע.

flowchart TD
    A[Start API Call] --> B[Fetch Request]
    B --> C{Network Success?}
    C -->|No| D[Network Error]
    C -->|Yes| E{Response OK?}
    E -->|No| F[API Error]
    E -->|Yes| G[Parse JSON]
    G --> H{Valid Data?}
    H -->|No| I[Data Error]
    H -->|Yes| J[Update UI]
    
    D --> K[Show Error Message]
    F --> K
    I --> K
    J --> L[Hide Loading]
    K --> L
    
    style A fill:#e1f5fe
    style J fill:#e8f5e8
    style K fill:#ffebee
    style L fill:#f3e5f5

🔄 בדיקה פדגוגית

הבנת המערכת המלאה: ודאו שאתם שולטים בכל הזרימה:

• ✅ איך הפניות ל-DOM מאפשרות ל-JavaScript לשלוט בממשק
• ✅ למה אחסון מקומי יוצר שימור בין סשנים של הדפדפן
• ✅ איך async/await מבצע קריאות API בלי להקפיא את ההרחבה
• ✅ מה קורה כשקריאות API נכשלות ואיך שגיאות מטופלות
• ✅ למה חוויית משתמש כוללת מצבי טעינה והודעות שגיאה

🎉 מה שהשגתם: יצרתם הרחבת דפדפן ש:

• מתחברת לאינטרנט ושולפת נתוני סביבה אמית תיאור: שפר את תוסף הדפדפן על ידי הוספת שיפורים בטיפול בשגיאות ותכונות לשיפור חוויית המשתמש. אתגר זה יעזור לך לתרגל עבודה עם APIs, אחסון מקומי ומניפולציה של DOM באמצעות תבניות מודרניות של JavaScript.

הנחיה: צור גרסה משופרת של הפונקציה displayCarbonUsage הכוללת: 1) מנגנון ניסיון חוזר לקריאות API שנכשלו עם backoff אקספוננציאלי, 2) אימות קלט עבור קוד האזור לפני ביצוע קריאת ה-API, 3) אנימציית טעינה עם אינדיקטורים להתקדמות, 4) שמירת תגובות API ב-localStorage עם תוקף (שמירה ל-30 דקות), ו-5) תכונה להצגת נתונים היסטוריים מקריאות API קודמות. כמו כן, הוסף הערות JSDoc בסגנון TypeScript לתיעוד כל הפרמטרים של הפונקציה וסוגי ההחזרה.

למד עוד על מצב סוכן כאן.

🚀 אתגר

הרחב את הבנתך לגבי APIs על ידי חקר המגוון הרחב של APIs מבוססי דפדפן הזמינים לפיתוח אתרים. בחר אחד מ-APIs אלו ובנה הדגמה קטנה:

• Geolocation API - קבלת מיקום המשתמש הנוכחי
• Notification API - שליחת התראות שולחן עבודה
• HTML Drag and Drop API - יצירת ממשקים אינטראקטיביים לגרירה
• Web Storage API - טכניקות מתקדמות לאחסון מקומי
• Fetch API - חלופה מודרנית ל-XMLHttpRequest

שאלות מחקר לשקול:

• אילו בעיות בעולם האמיתי ה-API הזה פותר?
• כיצד ה-API מטפל בשגיאות ובמקרים קיצוניים?
• אילו שיקולי אבטחה קיימים בשימוש ב-API הזה?
• עד כמה ה-API נתמך בדפדפנים שונים?

לאחר המחקר שלך, זהה אילו מאפיינים הופכים API לידידותי למפתחים ואמין.

מבחן לאחר ההרצאה

מבחן לאחר ההרצאה

סקירה ולימוד עצמי

למדת על LocalStorage ו-APIs בשיעור זה, שניהם מאוד שימושיים למפתח אתרים מקצועי. האם תוכל לחשוב כיצד שני הדברים הללו עובדים יחד? חשוב כיצד היית מתכנן אתר אינטרנט שיאחסן פריטים לשימוש על ידי API.

⚡ מה תוכל לעשות ב-5 הדקות הקרובות

• פתח את לשונית ה-DevTools Application וחקור את ה-localStorage בכל אתר
• צור טופס HTML פשוט ובדוק את אימות הטופס בדפדפן
• נסה לשמור ולשלוף נתונים באמצעות localStorage בקונסול הדפדפן
• בדוק את נתוני הטופס המוגשים באמצעות לשונית הרשת

🎯 מה תוכל להשיג בשעה הקרובה

• השלם את מבחן לאחר השיעור והבנת מושגי טיפול בטפסים
• בנה טופס תוסף דפדפן ששומר העדפות משתמש
• יישם אימות טפסים בצד הלקוח עם הודעות שגיאה מועילות
• תרגל שימוש ב-chrome.storage API לשמירת נתוני תוסף
• צור ממשק משתמש שמגיב להגדרות משתמש שנשמרו

📅 בניית תוסף לשבוע שלם

• השלם תוסף דפדפן מלא עם פונקציונליות טפסים
• שלוט באפשרויות אחסון שונות: local, sync ו-session storage
• יישם תכונות טופס מתקדמות כמו השלמה אוטומטית ואימות
• הוסף פונקציונליות ייבוא/ייצוא לנתוני משתמש
• בדוק את התוסף שלך באופן יסודי בדפדפנים שונים
• שפר את חוויית המשתמש של התוסף שלך וטיפול בשגיאות

🌟 שליטה ב-Web API לחודש שלם

• בנה יישומים מורכבים באמצעות מגוון APIs לאחסון בדפדפן
• למד על דפוסי פיתוח המעדיפים עבודה במצב לא מקוון
• תרום לפרויקטים בקוד פתוח הכוללים שמירת נתונים
• שלוט בפיתוח ממוקד פרטיות ובציות ל-GDPR
• צור ספריות לשימוש חוזר לטיפול בטפסים וניהול נתונים
• שתף ידע על APIs לאינטרנט ופיתוח תוספים

🎯 ציר הזמן לשליטה בפיתוח תוספים

timeline
    title API Integration & Storage Learning Progression
    
    section DOM Fundamentals (15 minutes)
        Element References: querySelector mastery
                          : Event listener setup
                          : State management basics
        
    section Local Storage (20 minutes)
        Data Persistence: Key-value storage
                        : Session management
                        : User preference handling
                        : Storage inspection tools
        
    section Form Handling (25 minutes)
        User Input: Form validation
                  : Event prevention
                  : Data extraction
                  : UI state transitions
        
    section API Integration (35 minutes)
        External Communication: HTTP requests
                              : Authentication patterns
                              : JSON data parsing
                              : Response handling
        
    section Async Programming (40 minutes)
        Modern JavaScript: Promise handling
                         : Async/await patterns
                         : Error management
                         : Non-blocking operations
        
    section Error Handling (30 minutes)
        Robust Applications: Try/catch blocks
                           : User-friendly messages
                           : Graceful degradation
                           : Debugging techniques
        
    section Advanced Patterns (1 week)
        Professional Development: Caching strategies
                                : Rate limiting
                                : Retry mechanisms
                                : Performance optimization
        
    section Production Skills (1 month)
        Enterprise Features: Security best practices
                           : API versioning
                           : Monitoring & logging
                           : Scalable architecture

🛠️ סיכום ערכת הכלים לפיתוח Full-Stack שלך

לאחר השלמת השיעור, יש לך:

• שליטה ב-DOM: מיקוד מדויק של אלמנטים ומניפולציה
• מומחיות באחסון: ניהול נתונים מתמשך עם localStorage
• שילוב API: שליפת נתונים בזמן אמת ואימות
• תכנות אסינכרוני: פעולות לא חוסמות עם JavaScript מודרני
• טיפול בשגיאות: יישומים חזקים שמטפלים בכשלים בצורה חלקה
• חוויית משתמש: מצבי טעינה, אימות ואינטראקציות חלקות
• תבניות מודרניות: fetch API, async/await ותכונות ES6+

מיומנויות מקצועיות שנרכשו: יישמת תבניות המשמשות ב:

• יישומי אינטרנט: אפליקציות עמוד יחיד עם מקורות נתונים חיצוניים
• פיתוח מובייל: אפליקציות מונעות API עם יכולות לא מקוונות
• תוכנות שולחן עבודה: אפליקציות Electron עם אחסון מתמשך
• מערכות ארגוניות: אימות, שמירה במטמון וטיפול בשגיאות
• מסגרות מודרניות: דפוסי ניהול נתונים ב-React/Vue/Angular

הרמה הבאה: אתה מוכן לחקור נושאים מתקדמים כמו אסטרטגיות שמירה במטמון, חיבורי WebSocket בזמן אמת או ניהול מצב מורכב!

משימה

אמצו API

---

הצהרת אחריות:
מסמך זה תורגם באמצעות שירות תרגום מבוסס בינה מלאכותית Co-op Translator. למרות שאנו שואפים לדיוק, יש לקחת בחשבון שתרגומים אוטומטיים עשויים להכיל שגיאות או אי דיוקים. המסמך המקורי בשפתו המקורית צריך להיחשב כמקור סמכותי. למידע קריטי, מומלץ להשתמש בתרגום מקצועי אנושי. אנו לא נושאים באחריות לאי הבנות או לפרשנויות שגויות הנובעות משימוש בתרגום זה.