Web-Dev-For-Beginners/translations/hu/5-browser-extension/2-forms-browsers-local-storage

Böngészőbővítmény Projekt 2. rész: API hívás, helyi tárolás használata

journey
    title Az API integrációs és tárolási utad
    section Alapok
      Állítsd be a DOM hivatkozásokat: 3: Student
      Adj hozzá eseményfigyelőket: 4: Student
      Kezeld az űrlap beküldését: 4: Student
    section Adatkezelés
      Valósítsd meg a helyi tárolást: 4: Student
      Építs API hívásokat: 5: Student
      Kezeld az aszinkron műveleteket: 5: Student
    section Felhasználói élmény
      Adj hozzá hiba kezelést: 5: Student
      Hozz létre betöltési állapotokat: 4: Student
      Csiszold az interakciókat: 5: Student

Előadás előtti kvíz

Előadás előtti kvíz

Bevezetés

Emlékszel arra a böngészőbővítményre, amit elkezdtél építeni? Jelenleg egy szép kinézetű űrlapod van, de alapvetően statikus. Ma életre keltjük azzal, hogy összekapcsoljuk valós adatokkal és memóriát adunk neki.

Gondolj az Apollo küldetés irányító számítógépeire – nemcsak rögzített információkat jelenítettek meg. Folyamatosan kommunikáltak az űrhajóval, frissítették a telemetriai adatokat, és megjegyezték a kritikus küldetésparamétereket. Ez a fajta dinamikus viselkedés lesz a mi célunk ma. A kiegészítőd eléri az internetet, valós környezeti adatokat szerez be, és megjegyzi a beállításaidat a következő alkalomra.

Az API integráció bonyolultnak hangozhat, de igazából csak azt tanítja meg a kódodnak, hogy kommunikáljon más szolgáltatásokkal. Akár időjárási adatokat, közösségi média híreket, vagy szénlábnyom-információkat kérsz le, mint mi ma, mindez a digitális kapcsolatok létrehozásáról szól. Megvizsgáljuk azt is, hogyan őrizhetik meg a böngészők az információkat – hasonlóan ahhoz, ahogy a könyvtárak használják a kartotékokat, hogy emlékezzenek, hová tartoznak a könyvek.

A lecke végére egy olyan böngészőbővítményed lesz, amely valós adatokat szerez be, tárolja a felhasználói beállításokat, és gördülékeny élményt nyújt. Kezdjük!

mindmap
  root((Dinamikus Kiterjesztések))
    DOM Manipuláció
      Elem Kiválasztás
      Esemény Kezelés
      Állapot Kezelés
      Felhasználói Felület Frissítések
    Helyi Tárolás
      Adat Tartósság
      Kulcs-Érték Párok
      Munkamenet Kezelés
      Felhasználói Beállítások
    API Integráció
      HTTP Kérések
      Hitelesítés
      Adat Elemzés
      Hibakezelés
    Aszinkron Programozás
      Ígéretek
      Async/Await
      Hibák Elfogása
      Nem Blokkoló Kód
    Felhasználói Élmény
      Betöltési Állapotok
      Hiba Üzenetek
      Sima Átmenetek
      Adat Érvényesítés

✅ Kövesd a megfelelő fájlokban található sorszámozott szegmenseket, hogy tudd, hová helyezd a kódodat

Az elemek beállítása a bővítményben való manipulációhoz

Mielőtt a JavaScripted manipulálhatná a felületet, szüksége van hivatkozásokra bizonyos HTML elemekre. Gondolj rá úgy, mint egy távcsőre, amelyet bizonyos csillagokra kell irányítani – mielőtt Galileo tanulmányozhatta volna a Jupiter holdjait, először meg kellett találnia és fókuszálnia kellett magára a Jupiterre.

Az index.js fájlodban const változókat hozunk létre, amelyek megőrzik a fontos űrlapelemek referenciáit. Ez hasonló ahhoz, ahogy a tudósok megjelölik a felszerelésüket – ahelyett, hogy minden alkalommal át kellene kutatniuk a laboratóriumot, közvetlenül elérhetik, amire szükségük van.

flowchart LR
    A[JavaScript Kód] --> B[document.querySelector]
    B --> C[CSS Szelektorok]
    C --> D[HTML Elemei]
    
    D --> E[".form-data"]
    D --> F[".region-name"]
    D --> G[".api-key"]
    D --> H[".loading"]
    D --> I[".errors"]
    D --> J[".result-container"]
    
    E --> K[Űrlap Elem]
    F --> L[Bemeneti Mező]
    G --> M[Bemeneti Mező]
    H --> N[Felhasználói Felület Elem]
    I --> O[Felhasználói Felület Elem]
    J --> P[Felhasználói Felület Elem]
    
    style A fill:#e1f5fe
    style D fill:#e8f5e8
    style K fill:#fff3e0
    style L fill:#fff3e0
    style M fill:#fff3e0

// űrlapmezők
const form = document.querySelector('.form-data');
const region = document.querySelector('.region-name');
const apiKey = document.querySelector('.api-key');

// eredmények
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');

Ez a kód a következőket teszi:

• Megfogja az űrlapelemeket document.querySelector() használatával CSS osztályválasztókkal
• Létrehoz hivatkozásokat a régió név és API kulcs input mezőkhöz
• Csatlakozik az eredmény megjelenítő elemekhez a szén-dioxid használati adatok számára
• Beállítja a hozzáférést olyan UI elemekhez, mint a betöltési jelzők és hibák üzenetei
• Tárolja az egyes elemek referenciait const változókban az egyszerű újrafelhasználásért a kódod egészében

Eseményfigyelők hozzáadása

Most megadjuk a bővítményednek, hogy reagáljon a felhasználói műveletekre. Az eseményfigyelők a kódod módjai arra, hogy figyelje a felhasználói interakciókat. Gondolj rájuk úgy, mint a korai telefonközpontok kezelőire – ők hallgatták a bejövő hívásokat, és összekapcsolták a megfelelő áramköröket, amikor valaki kapcsolatot akart létesíteni.

sequenceDiagram
    participant User
    participant Form
    participant JavaScript
    participant API
    participant Storage
    
    User->>Form: Kitölti a régió/API kulcsot
    User->>Form: Rákattint a küldésre
    Form->>JavaScript: Elküldi a submit eseményt
    JavaScript->>JavaScript: handleSubmit(e)
    JavaScript->>Storage: Felhasználói beállítások mentése
    JavaScript->>API: Karbon adatok lekérése
    API->>JavaScript: Adatok visszaadása
    JavaScript->>Form: UI frissítése az eredményekkel
    
    User->>Form: Rákattint a törlés gombra
    Form->>JavaScript: Elküldi a kattintás eseményt
    JavaScript->>Storage: Mentett adatok törlése
    JavaScript->>Form: Visszaállítás kezdeti állapotra

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

Ezeknek a fogalmaknak a megértése:

• Csatol egy beküldés figyelőt az űrlaphoz, amely akkor aktiválódik, amikor a felhasználók Entert nyomnak vagy beküldik az űrlapot
• Kapcsol kattintás figyelőt a törlés gombhoz az űrlap visszaállítására
• Átadja az esemény objektumot (e) a kezelő funkcióknak további vezérlésért
• Azonnal meghívja az init() függvényt a bővítmény kezdeti állapotának beállításához

✅ Észre fogod venni a rövidített nyílfüggvény-szintaxist (arrow function), amit itt használnak. Ez a modern JavaScript megközelítés tisztább, mint a hagyományos függvény kifejezések, de mindkettő jól működik!

🔄 Pedagógiai ellenőrzés

Eseménykezelés megértése: Mielőtt az inicializációra lépnénk, győződj meg róla, hogy képes vagy:

• ✅ Elmagyarázni, hogyan köti össze az addEventListener a felhasználói műveleteket JavaScript függvényekkel
• ✅ Megérteni, miért adjuk át az esemény objektumot (e) a kezelő függvényeknek
• ✅ Felismerni a különbséget a submit és a click események között
• ✅ Leírni, mikor fut az init() függvény és miért

Gyors önellenőrzés: Mi történik, ha elfelejted az e.preventDefault() -et egy űrlap beküldésénél? Válasz: Az oldal újratöltődik, elvesznek a JavaScript állapotok és megszakad a felhasználói élmény

Az inicializáló és visszaállító függvények létrehozása

Hozzuk létre a bővítmény inicializáló logikáját. Az init() függvény olyan, mint egy hajó navigációs rendszere, ami ellenőrzi a műszereit – meghatározza a jelenlegi állapotot és ennek megfelelően állítja be a felületet. Ellenőrzi, hogy valaki használta-e már a bővítményedet, és betölti az előző beállításokat.

A reset() függvény friss kezdést ad a felhasználóknak – hasonlóan, ahogy a tudósok visszaállítják a műszereiket kísérletek között, hogy tiszta adatokat kapjanak.

function init() {
	// Ellenőrizze, hogy a felhasználó korábban elmentette-e az API hitelesítő adatokat
	const storedApiKey = localStorage.getItem('apiKey');
	const storedRegion = localStorage.getItem('regionName');

	// Állítsa be a bővítmény ikonját általános zöldre (helyőrző a következő lecke számára)
	// TODO: Az ikon frissítésének megvalósítása a következő leckében

	if (storedApiKey === null || storedRegion === null) {
		// Első alkalommal használó: jelenítse meg a beállító űrlapot
		form.style.display = 'block';
		results.style.display = 'none';
		loading.style.display = 'none';
		clearBtn.style.display = 'none';
		errors.textContent = '';
	} else {
		// Visszatérő felhasználó: automatikusan töltse be az elmentett adatokat
		displayCarbonUsage(storedApiKey, storedRegion);
		results.style.display = 'none';
		form.style.display = 'none';
		clearBtn.style.display = 'block';
	}
}

function reset(e) {
	e.preventDefault();
	// Törölje a tárolt régiót, hogy a felhasználó új helyszínt választhasson
	localStorage.removeItem('regionName');
	// Indítsa újra az inicializációs folyamatot
	init();
}

Mit csinálunk itt lépésről lépésre:

• Lekéri a tárolt API kulcsot és régiót a böngésző helyi tárolójából
• Ellenőrzi, hogy ez-e az első használat (nincsenek mentett adatok) vagy visszatérő felhasználó
• Megjeleníti a beállító űrlapot az új felhasználók számára, és elrejti a többi felületelemet
• Betölti automatikusan a korábban mentett adatokat a visszatérő felhasználók számára, és megjeleníti a visszaállítási lehetőséget
• Kezeli a felhasználói felület állapotát az elérhető adatok alapján

A helyi tárolás (Local Storage) kulcsfogalmai:

• Megőrzi az adatokat a böngésző munkamenetek között (ellentétben a munkamenet-tárolással)
• Tárol adatokat kulcs-érték párokként a getItem() és setItem() segítségével
• Visszaad null értéket, ha nincs adat a megadott kulcshoz
• Egyszerű módot nyújt a felhasználói beállítások és preferenciák megőrzésére

💡 Böngésző tárolás megértése: A LocalStorage olyan, mintha a bővítményednek tartós memóriát adnál. Gondolj az ókori Alexandriai Könyvtárra, amely tekercseket tárolt – az információ még akkor is elérhető maradt, amikor a tudósok elmentek és visszatértek.

Fontos jellemzők:

• Megőrzi az adatokat még akkor is, ha bezárod a böngészőt
• Túléli a számítógép újraindítását és böngésző összeomlásokat
• Nagy tárolókapacitást biztosít a felhasználói beállításoknak
• Azonnali hozzáférést kínál hálózati késedelem nélkül

Fontos megjegyzés: A böngészőbővítményed saját elkülönített helyi tárolót használ, amely különválik a weboldalakétól. Ez biztonságot nyújt és megakadályozza az ütközéseket más webhelyekkel.

Megtekintheted a tárolt adataidat, ha megnyitod a böngésző Fejlesztői Eszközeit (F12), az Alkalmazás (Application) fülre navigálsz és kibontod a Local Storage szekciót.

stateDiagram-v2
    [*] --> CheckStorage: A kiterjesztés elindul
    CheckStorage --> FirstTime: Nincs tárolt adat
    CheckStorage --> Returning: Talált adat
    
    FirstTime --> ShowForm: Beállítási űrlap megjelenítése
    ShowForm --> UserInput: A felhasználó adatot ad meg
    UserInput --> SaveData: Tárolás a localStorage-ben
    SaveData --> FetchAPI: Szénadat lekérése
    
    Returning --> LoadData: Beolvasás a localStorage-ből
    LoadData --> FetchAPI: Szénadat lekérése
    
    FetchAPI --> ShowResults: Adatok megjelenítése
    ShowResults --> UserAction: A felhasználó interakciója
    
    UserAction --> Reset: Törlés gomb megnyomva
    UserAction --> ShowResults: Adatok megtekintése
    
    Reset --> ClearStorage: Mentett adatok törlése
    ClearStorage --> FirstTime: Vissza a beállításhoz

⚠️ Biztonsági megfontolás: Termelési alkalmazásokban az API kulcsok LocalStorage-ben történő tárolása biztonsági kockázatokat rejt, mivel JavaScript hozzáférhet ezekhez az adatokhoz. Tanulási céllal ez az eljárás elfogadható, de éles alkalmazások esetén biztonságos szerveroldali tárolás javasolt.

Űrlap beküldésének kezelése

Most kezeljük, mi történik, amikor valaki beküldi az űrlapot. Alapértelmezés szerint a böngészők újratöltik az oldalt űrlap beküldésekor, de ezt a viselkedést megakasztjuk, hogy gördülékenyebb legyen az élmény.

Ez a megközelítés hasonló ahhoz, ahogy az irányítóközpont kezeli az űrhajóval való kommunikációt – ahelyett, hogy minden átvitelnél nullázna az egész rendszert, folyamatos működést tart fenn miközben feldolgozza az új információkat.

Hozz létre egy függvényt, amely elfogja az űrlap beküldési eseményét és kivonja a felhasználó adatát:

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

Ebben a kódrészletben:

• Megakadályozza az alapértelmezett űrlapbeküldési viselkedést, mely az oldal frissítését eredményezné
• Kinyeri a felhasználói adatokat az API kulcs és régió mezőkből
• Átadja az űrlapadatokat a setUpUser() függvénynek feldolgozásra
• Fenntartja az egyoldalas alkalmazás viselkedést az oldal újratöltése nélkül

✅ Emlékezz, hogy az űrlap HTML mezői tartalmazzák a required attribútumot, így a böngésző automatikusan ellenőrzi, hogy mind az API kulcs, mind a régió megadásra került mielőtt ez a függvény lefutna.

Felhasználói beállítások konfigurálása

A setUpUser függvény felelős a felhasználói hitelesítés mentéséért és az első API hívás elindításáért. Ez egy zökkenőmentes átmenetet teremt a beállítás és az eredmények megjelenítése között.

function setUpUser(apiKey, regionName) {
	// Mentse el a felhasználói hitelesítő adatokat a jövőbeni munkamenetekhez
	localStorage.setItem('apiKey', apiKey);
	localStorage.setItem('regionName', regionName);
	
	// Frissítse a felhasználói felületet a betöltési állapot megjelenítéséhez
	loading.style.display = 'block';
	errors.textContent = '';
	clearBtn.style.display = 'block';
	
	// Szerezze be a szén-dioxid-kibocsátási adatokat a felhasználó hitelesítő adataival
	displayCarbonUsage(apiKey, regionName);
}

Lépésenként ez történik:

• Mentésre kerül az API kulcs és a régió neve a helyi tárolóban a későbbi használathoz
• Mutat egy betöltési jelet, jelezve, hogy az adatok lekérése folyamatban van
• Törli az előző hibák üzeneteit a megjelenítésről
• Megjeleníti a tisztító gombot, hogy a felhasználók később visszaállíthassák a beállításaikat
• Elindítja az API hívást a valós szén-dioxid használati adatok lekéréséhez

Ez a függvény zökkenőmentes felhasználói élményt nyújt az adatmegtartás és a felületfrissítések együttes kezelésével.

Szén-dioxid fogyasztási adatok megjelenítése

Most összekapcsoljuk a kiegészítődet külső adatforrásokkal API-kon keresztül. Ez a bővítményt egy önálló eszközből olyan eszközzé alakítja, amely valós idejű információkat kérhet le az internetről.

API-k megértése

Az API-k teszik lehetővé az alkalmazások közötti kommunikációt. Gondolj rájuk úgy, mint a 19. századi távíró rendszerre, amely összekötötte a távoli városokat – az üzemeltetők kéréseket küldtek távoli állomásokra, és választ kaptak a kért információval. Amikor közösségi médiát nézel, hangasszisztenshez beszélsz, vagy futár appot használsz, mindig API-k segítik az adatcserét.

flowchart TD
    A[A bővítményed] --> B[HTTP kérés]
    B --> C[CO2 Signal API]
    C --> D{Érvényes kérés?}
    D -->|Igen| E[Adatbázis lekérdezése]
    D -->|Nem| F[Hiba visszaadása]
    E --> G[Szén-dioxid adatok]
    G --> H[JSON válasz]
    H --> I[A bővítményed]
    F --> I
    I --> J[Felhasználói felület frissítése]
    
    subgraph "API kérés"
        K[Fejlécek: auth-token]
        L[Paraméterek: countryCode]
        M[Módszer: GET]
    end
    
    subgraph "API válasz"
        N[Szén-intenzitás]
        O[Fosszilis üzemanyag %]
        P[Időbélyeg]
    end
    
    style C fill:#e8f5e8
    style G fill:#fff3e0
    style I fill:#e1f5fe

Kulcsfontosságú fogalmak a REST API-król:

• REST az angol 'Representational State Transfer' (Állapotábrázolás-alapú Átvitel) kifejezés rövidítése
• Használ szabványos HTTP módszereket (GET, POST, PUT, DELETE) az adatokkal való interakcióhoz
• Ad vissza adatokat előre látható formátumban, általában JSON-ben
• Biztosít konzisztens, URL-alapú végpontokat különféle lekérdezésekhez

✅ A CO2 Signal API valós idejű szén-dioxid intenzitási adatokat szolgáltat villamos hálózatokról világszerte. Segít a felhasználóknak megérteni, milyen környezeti hatással jár az áramfogyasztásuk!

💡 Az aszinkron JavaScript megértése: Az async kulcsszó lehetővé teszi, hogy a kód megfelelően kezelje a párhuzamos műveleteket. Amikor adatot kérsz egy szervertől, nem akarod, hogy a bővítményed teljesen megfagyjon – olyan lenne, mintha a légiforgalmi irányítás minden műveletet leállítana, amíg egy gép nem válaszol.

Főbb előnyök:

• Fenntartja a bővítmény válaszkészségét az adatok betöltése közben
• Lehetővé teszi, hogy más kód futjon a hálózati kérés alatt
• Javítja a kód olvashatóságát a hagyományos callback-ekhez képest
• Lehetővé teszi a hálózati hibák szép kezelését

Nézd meg ezt a rövid videót az async-ról:

🎥 Kattints a fenti képre egy videóért az async/await témában.

🔄 Pedagógiai ellenőrzés

Aszinkron programozás megértése: Mielőtt az API függvényre ugrunk, győződj meg róla, hogy érted:

• ✅ Miért használjuk az async/await-et a bővítmény blokkosítása helyett
• ✅ Hogyan kezelik a try/catch blokkok a hálózati hibákat elegánsan
• ✅ Mi a különbség a szinkron és aszinkron műveletek között
• ✅ Miért hibázhat egy API hívás, és hogyan kezeljük ezeket a hibákat

Valós példák az aszinkron működésre:

• Ételrendelés: Nem vársz a konyhánál – kapsz egy bizonylatot és közben mást csinálsz
• E-mailek küldése: Az e-mail alkalmazásod nem fagy le küldés közben – további leveleket írhatsz
• Weboldalak betöltése: Képek fokozatosan töltődnek be, miközben már olvashatod a szöveget

API hitelesítési folyamat:

sequenceDiagram
    participant Ext as Extension
    participant API as CO2 Signal API
    participant DB as Adatbázis
    
    Ext->>API: Kérés auth-token-nal
    API->>API: Token érvényesítése
    API->>DB: Szén-dioxid adatok lekérdezése
    DB->>API: Adatok visszaadása
    API->>Ext: JSON válasz
    Ext->>Ext: Felhasználói felület frissítése

Hozd létre a függvényt, amely lekéri és megjeleníti a szén-dioxid fogyasztási adatokat:

// Modern fetch API megközelítés (nem szükséges külső függőség)
async function displayCarbonUsage(apiKey, region) {
	try {
		// Szén-dioxid intenzitási adatok lekérése a CO2 Signal API-ról
		const response = await fetch('https://api.co2signal.com/v1/latest', {
			method: 'GET',
			headers: {
				'auth-token': apiKey,
				'Content-Type': 'application/json'
			},
			// Adjon hozzá lekérdezési paramétereket a konkrét régióhoz
			...new URLSearchParams({ countryCode: region }) && {
				url: `https://api.co2signal.com/v1/latest?countryCode=${region}`
			}
		});

		// Ellenőrizze, hogy az API kérés sikeres volt-e
		if (!response.ok) {
			throw new Error(`API request failed: ${response.status}`);
		}

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

		// Számolja ki a kerekített szén-dioxid intenzitási értéket
		const carbonIntensity = Math.round(carbonData.carbonIntensity);

		// Frissítse a felhasználói felületet a lekért adatokkal
		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) - valósítsa meg a következő leckében

	} catch (error) {
		console.error('Error fetching carbon data:', error);
		
		// Mutasson felhasználóbarát hibaüzenetet
		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.';
	}
}

Lépések részletesen:

• Használja a modern fetch() API-t, külső könyvtárak (pl. Axios) helyett, hogy tiszta, függőségmentes kódot kapjunk
• Megvalósítja a helyes hibakezelést a response.ok ellenőrzéssel, hogy korán észlelje az API hibákat
• Kezeli az aszinkron műveleteket async/await segítségével az olvashatóbb kódért
• Hitelesíti magát a CO2 Signal API-val az auth-token fejléccel
• Feldolgozza a JSON válaszadatot és kinyeri a szén-intenzitási információkat
• Frissíti több UI elemet formázott környezeti adatokkal
• Nyújt felhasználóbarát hibajelzéseket API hibák esetén

Fontos modern JavaScript fogalmak:

• Sablon literálok ${} szintaxissal a tiszta string formázáshoz
• Hibakezelés try/catch blokkokkal a robosztus alkalmazáshoz
• Async/await minta a hálózati kérések elegáns kezeléséhez
• Objektum destrukturálás az API válaszok adatainak kivonásához
• Metódus láncolás több DOM művelethez

✅ Ez a függvény számos fontos webfejlesztési koncepciót mutat be – külső szerverekkel kommunikál, hitelesít, feldolgoz adatokat, frissíti a felületet, és hiba esetén szépen kezeli a helyzetet. Ezek alapvető készségek a profi fejlesztők számára.

flowchart TD
    A[API hívás indítása] --> B[Kérés lekérése]
    B --> C{Hálózat sikeres?}
    C -->|Nem| D[Hálózati hiba]
    C -->|Igen| E{Válasz rendben?}
    E -->|Nem| F[API hiba]
    E -->|Igen| G[JSON feldolgozása]
    G --> H{Érvényes adatok?}
    H -->|Nem| I[Adathiba]
    H -->|Igen| J[Felület frissítése]
    
    D --> K[Hibás üzenet megjelenítése]
    F --> K
    I --> K
    J --> L[Betöltés elrejtése]
    K --> L
    
    style A fill:#e1f5fe
    style J fill:#e8f5e8
    style K fill:#ffebee
    style L fill:#f3e5f5

🔄 Pedagógiai ellenőrzés

Teljes rendszer áttekintése: Győződj meg a folyamat mesteri ismeretéről:

• ✅ Hogyan teszik lehetővé a DOM referenciák a JavaScript számára a felület vezérlését
• ✅ Miért teremt a helyi tárolás állandóságot a böngésző munkamenetek között
• ✅ Hogyan biztosítja az async/await, hogy az API hívások ne fagyasszák le a bővítményt
• ✅ Mi történik API hibák esetén és hogyan kezeljük a hibákat
• ✅ Miért része a felhasználói élménynek a betöltési állapot és a hibaüzenetek mutatása

🎉 Amit elértél: Készítettél egy böngészőbővítményt, amely:

• Csatlakozik az internethez és valós környezeti adatokat szerez be
• Megőrzi a felhasználói beállításokat munkamenetek között
• Kezeli a hibákat szépen, nem omlik össze
• Zökkenőmentes, professzionális felhasználói élményt biztosít

Teszteld le a munkádat az npm run build futtatásával, majd frissítsd a bővítményt a böngésződben. Most már egy működő szénlábnyom-követőd van. A következő lecke dinamikus ikon funkciókat fog hozzáadni, hogy teljes legyen a bővítmény.

---

GitHub Copilot Agent kihívás 🚀

Használd az Agent módot a következő kihívás teljesítéséhez: Leírás: Fejleszd tovább a böngészőbővítményt hibakezelési fejlesztésekkel és felhasználói élményt javító funkciókkal. Ez a kihívás segít az API-k, a helyi tároló és a DOM manipuláció gyakorlásában modern JavaScript minták használatával.

Feladat: Hozz létre egy továbbfejlesztett változatot a displayCarbonUsage függvényből, amely tartalmazza: 1) egy újrapróbálkozási mechanizmust sikertelen API hívásokra exponenciális visszalépéssel, 2) bemeneti érvényesítést a régiókódra az API hívás előtt, 3) betöltési animációt előrehaladási jelzőkkel, 4) az API válaszok tárolását localStorage-ban lejárati időbélyeggel (30 percig cache-elve), valamint 5) egy funkciót a korábbi API hívások történeti adatainak megjelenítésére. Emellett adj megfelelő TypeScript-stílusú JSDoc kommenteket az összes függvényparaméter és visszatérési típus dokumentálásához.

További információ az agent mode funkcióról.

🚀 Kihívás

Bővítsd az API-kkal kapcsolatos ismereteidet azzal, hogy felfedezed a böngésző-alapú API-k gazdagságát a webfejlesztéshez. Válassz az alábbi böngésző API-k közül, és készíts egy kis bemutatót:

• Geolocation API - Szerezd meg a felhasználó aktuális helyzetét
• Notification API - Küldj asztali értesítéseket
• HTML Drag and Drop API - Hozz létre interaktív drag felületeket
• Web Storage API - Haladó helyi tárolási technikák
• Fetch API - Modern alternatíva az XMLHttpRequest helyett

Kutatási kérdések, amiket érdemes átgondolni:

• Milyen valós problémákat old meg ez az API?
• Hogyan kezeli az API a hibákat és szélsőséges eseteket?
• Milyen biztonsági megfontolások vannak az API használatakor?
• Mennyire támogatott ez az API különböző böngészőkben?

Kutatásod után határozd meg, milyen jellemzők tesznek egy API-t fejlesztőbaráttá és megbízhatóvá.

Előadás Utáni Kvíz

Előadás utáni kvíz

Áttekintés & Önálló Tanulás

Ebben a leckében megismerted a LocalStorage és az API-k működését, amelyek mind nagyon hasznosak a profi webfejlesztők számára. Gondolkodj el, hogyan működnek ezek ketten együtt! Gondold végig, hogyan terveznél meg egy weboldalt, amely elemeket tárol az API használatához.

⚡ Mit Tehetsz a Következő 5 Percben

• Nyisd meg a DevTools Alkalmazás fület és fedezd fel a localStorage-t bármely weboldalon
• Készíts egy egyszerű HTML űrlapot és teszteld az űrlap érvényesítést a böngészőben
• Próbálj meg adatokat tárolni és lekérni a localStorage segítségével a böngésző konzoljában
• Vizsgáld meg az elküldött űrlapadatokat a Hálózat fülön keresztül

🎯 Mit Érhetsz El Most Órán Belül

• Fejezd be az előadás utáni kvízt és értsd meg az űrlapkezelés koncepcióit
• Építs egy böngészőbővítményt, amely űrlap segítségével menti a felhasználói beállításokat
• Valósíts meg kliensoldali űrlapévvényesítést hasznos hibajelzésekkel
• Gyakorold a chrome.storage API használatát a bővítmény adatainak megőrzéséhez
• Készíts felhasználói felületet, amely reagál a mentett felhasználói beállításokra

📅 Hétköznapi Bővítményfejlesztés

• Készíts egy teljes funkcionalitású böngészőbővítményt űrlapfunkcióval
• Sajátítsd el a különféle tárolási opciókat: helyi, szinkronizált és munkamenet tárolás
• Valósíts meg haladó űrlapfunkciókat, mint az automatikus kiegészítés és érvényesítés
• Adj hozzá import/export funkciókat a felhasználói adatokhoz
• Teszteld bővítményedet különböző böngészőkön alaposan
• Finomhangold a felhasználói élményt és hibakezelést

🌟 Hónapok Alatti Web API Mesterség

• Készíts bonyolult alkalmazásokat különféle böngésző-tároló API-k felhasználásával
• Tanuld meg az offline-first fejlesztési mintákat
• Vegyél részt nyílt forráskódú projektekben adatmegőrzés témakörben
• Válj szakértővé az adatvédelmi fejlesztésben és a GDPR betartásában
• Készíts újrahasznosítható könyvtárakat űrlapkezeléshez és adatmenedzsmenthez
• Oszd meg tudásod a web API-k és bővítményfejlesztés területén

🎯 A Te Bővítményfejlesztési Mesterré Válás Idővonala

timeline
    title API Integráció & Tárolási Tanulási Folyamat
    
    section DOM Alapok (15 perc)
        Elem Referenciák: querySelector elsajátítása
                          : Eseményfigyelő beállítása
                          : Állapotkezelés alapjai
        
    section Helyi Tároló (20 perc)
        Adatmegőrzés: Kulcs-érték tárolás
                        : Munkamenet kezelés
                        : Felhasználói preferencia kezelése
                        : Tároló ellenőrző eszközök
        
    section Űrlap Kezelés (25 perc)
        Felhasználói Bevitel: Űrlap ellenőrzés
                  : Esemény megelőzés
                  : Adatkinyerés
                  : Felhasználói felület állapotváltások
        
    section API Integráció (35 perc)
        Külső Kommunikáció: HTTP kérések
                              : Hitelesítési minták
                              : JSON adat elemzés
                              : Válasz kezelése
        
    section Aszinkron Programozás (40 perc)
        Modern JavaScript: Promise kezelés
                         : Async/await minták
                         : Hibakezelés
                         : Nem blokkoló műveletek
        
    section Hibakezelés (30 perc)
        Robusztus Alkalmazások: Try/catch blokkok
                           : Felhasználóbarát üzenetek
                           : Zseniális leépítés
                           : Hibakeresési technikák
        
    section Haladó Minták (1 hét)
        Szakmai Fejlődés: Gyorsítótár stratégiák
                                : Korlátozás szabályozás
                                : Újrapróbálkozási mechanizmusok
                                : Teljesítmény optimalizálás
        
    section Termelési Készségek (1 hónap)
        Vállalati Funkciók: Biztonsági legjobb gyakorlatok
                           : API verziózás
                           : Megfigyelés és naplózás
                           : Skálázható architektúra

🛠️ A Teljes Stack Fejlesztői Eszköztárad Összefoglalója

A lecke elvégzése után most már rendelkezel a következőkkel:

• DOM Mesterség: Pontos elemkiválasztás és manipuláció
• Tárolási Szakértelem: Tartós adatkezelés localStorage segítségével
• API Integráció: Valós idejű adatlekérés és hitelesítés
• Aszinkron Programozás: Nem blokkoló műveletek modern JavaScript-tel
• Hibakezelés: Robosztus alkalmazások, amelyek szépen kezelik a hibákat
• Felhasználói Élmény: Betöltési állapotok, érvényesítés, gördülékeny interakciók
• Modern Minták: fetch API, async/await és ES6+ funkciók

Szakmai Készségek: Olyan mintákat valósítottál meg, amiket használnak:

• Webalkalmazásokban: Egylapos appok külső adatforrásokkal
• Mobilfejlesztésben: API-alapú appok offline képességekkel
• Asztali szoftverekben: Electron appok tartós tárolással
• Vállalati rendszerekben: Hitelesítés, cache-elés és hibakezelés
• Modern keretrendszerekben: React/Vue/Angular adatkezelési minták

Következő szint: Készen állsz fejlettebb témák felfedezésére, mint cache stratégiák, valós idejű WebSocket kapcsolat vagy összetett állapotkezelés!

Feladat

API átvétele

---

Felelősségkizárás:
Ezt a dokumentumot az AI fordítási szolgáltatás, a Co-op Translator segítségével fordítottuk le. Bár pontos fordításra törekszünk, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti, anyanyelvi dokumentum tekintendő hiteles forrásnak. Fontos információk esetén javasolt szakember által végzett emberi fordítás igénybevétele. Nem vállalunk felelősséget a fordítás használatából eredő félreértésekért vagy téves értelmezésekért.