README.md

Brauserilaiendi projekt Osa 2: API kõne tegemine, lokaalse salvestuse kasutamine

journey
    title Teie API integreerimise ja salvestamise teekond
    section Alus
      Määra DOM-i viited: 3: Student
      Lisa sündmuste kuulajad: 4: Student
      Töötle vormi esitamine: 4: Student
    section Andmehaldus
      Rakenda kohalik salvestus: 4: Student
      Koosta API päringud: 5: Student
      Töötle asünkroonne tegevused: 5: Student
    section Kasutajakogemus
      Lisa veahaldus: 5: Student
      Loo laadimise olekud: 4: Student
      Viimine interaktsioone: 5: Student

Loading

Eel-loengu viktoriin

Eel-loengu viktoriin

Sissejuhatus

Kas mäletad seda brauserilaiendit, mida hakkasid ehitama? Praegu on sul ilus vorm, kuid see on sisuliselt staatiline. Täna anname sellele elu, ühendades selle tõelise andmeallikaga ja andes sellele mälu.

Mõtle Apollo missioonikontrolli arvutitele – nad ei näidanud vaid fikseeritud teavet. Nad suhtlesid pidevalt kosmoselaevadega, uuendasid telemeetria andmeid ning mäletasid olulisi missiooni parameetreid. Just sellist dünaamilist käitumist me täna loome. Sinu laiend võtab internetist päris keskkonnateavet ja mäletab sinu seadeid järgmiseks korraks.

API integreerimine võib tunduda keeruline, kuid see on lihtsalt õpetamine sinu koodile, kuidas suhelda teiste teenustega. Olgu see siis ilmastikuandmete, sotsiaalmeedia voogude või süsiniku jalajälje info pärimine nagu täna teeme — kõik seisneb nende digitaalsete ühenduste loomises. Vaatame ka, kuidas brauserid suudavad teavet salvestada — sarnaselt sellele, kuidas raamatukogud kasutasid kaardikatalooge raamatute asukoha meelespidamiseks.

Selle tunni lõpuks on sul brauserilaiend, mis toob tavalise andmetest, salvestab kasutajaelistused ja pakub sujuvat kasutuskogemust. Alustame!

mindmap
  root((Dünaamilised laiendused))
    DOM Manipulation
      Element Selection
      Event Handling
      State Management
      UI Updates
    Local Storage
      Andmete säilitamine
      Võtme-väärtuse paarid
      Seansi haldamine
      Kasutaja eelistused
    API Integration
      HTTP Requests
      Authentication
      Data Parsing
      Error Handling
    Async Programming
      Promises
      Async/Await
      Error Catching
      Non-blocking Code
    User Experience
      Laadimisolekud
      Veateated
      Sujuvad üleminekud
      Andmete valideerimine

Loading

✅ Järgi nummerdatud segmentide juhiseid vastavates failides, et teada, kuhu oma koodi paigutada

Määratle laiendi elemendid, mida manipuleerida

Enne kui su JavaScript saab kasutajaliidest muuta, vajab see viiteid konkreetsetele HTML elementidele. Võid seda mõelda nagu teleskoop, mis peab olema suunatud kindlatele tähtedele – enne kui Galileo võis uurida Jupiteri kuid, pidi ta esmalt Jupiteri üles leidma ja fookusesse seadma.

Sinu index.js failis loome const muutujad, mis salvestavad viited igale olulisemale vormi elemendile. See on nagu teadlased, kes märgistavad oma seadmed — selle asemel, et otsida kogu labori ulatuses, saavad nad otse ligi sellele, mida vajavad.

flowchart LR
    A[JavaScript Kood] --> B[document.querySelector]
    B --> C[CSS Valijad]
    C --> D[HTML Elemendid]
    
    D --> E[".form-data"]
    D --> F[".region-name"]
    D --> G[".api-key"]
    D --> H[".loading"]
    D --> I[".errors"]
    D --> J[".result-container"]
    
    E --> K[Vormi Element]
    F --> L[Sisestusväli]
    G --> M[Sisestusväli]
    H --> N[Kasutajaliidese Element]
    I --> O[Kasutajaliidese Element]
    J --> P[Kasutajaliidese Element]
    
    style A fill:#e1f5fe
    style D fill:#e8f5e8
    style K fill:#fff3e0
    style L fill:#fff3e0
    style M fill:#fff3e0

Loading

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

// tulemused
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');

See kood teeb järgmist:

• Püüab kinni vormi elemendid kasutades document.querySelector() koos CSS klassi selektoritega
• Loodab viited sisendväljadele regiooni nime ja API võtme jaoks
• Ühendab tulemite kuvamise elementidega süsiniku kasutusandmete jaoks
• Seadistab juurdepääsu kasutajaliidese elementidele nagu laadimisindikaatorid ja tõrketeated
• Salvestab iga elemendi viite const muutujatesse, et neid oleks lihtne kogu koodis korduvkasutada

Lisa sündmuste kuulajad

Nüüd paneme laiendi reageerima kasutaja tegevustele. Sündmuste kuulajad on su koodi viis jälgida kasutaja interaktsioone. Võid neid mõelda nagu varased telefonivahetuskeskuse operaatorid — nad kuulasid saabuvat kõnet ja ühendasid õiged traatkeskused, kui keegi soovis ühendust luua.

sequenceDiagram
    participant User
    participant Form
    participant JavaScript
    participant API
    participant Storage
    
    User->>Form: Täidab piirkonna/API võtme
    User->>Form: Vajutab esita
    Form->>JavaScript: Käivitab esita sündmuse
    JavaScript->>JavaScript: handleSubmit(e)
    JavaScript->>Storage: Salvesta kasutaja eelistused
    JavaScript->>API: Hangi süsinikuandmed
    API->>JavaScript: Tagastab andmed
    JavaScript->>Form: Uuenda kasutajaliidest tulemustega
    
    User->>Form: Vajutab tühjenda nuppu
    Form->>JavaScript: Käivitab klikisündmuse
    JavaScript->>Storage: Kustuta salvestatud andmed
    JavaScript->>Form: Lähtesta algseisundisse

Loading

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

Nende mõistete selgitus:

• Lisab esitamissündmuse kuulaja vormile, mis käivitub, kui kasutaja vajutab Enter või klõpsab esita nuppu
• Seob klikikuulaja tühjendusnupuga, et vormi lähtestada
• Annetab sündmuse objekti (e) käsitlejafunktsioonidele täiendavaks kontrolliks
• Kutsutakse init() funktsioon kohe algsesse seisu seadmiseks

✅ Pane tähele siin kasutatud noolefunktsiooni süntaksit. See kaasaegne JavaScripti lähenemine on organiseeritum kui traditsioonilised funktsioonid, kuid mõlemad töötavad võrdselt hästi!

🔄 Pedagoogiline kontrollpunkt

Sündmuste käsitlemise mõistmine: Enne initsialiseerimise juurde liikumist kontrolleeri, kas sa suudad:

• ✅ Selgitada, kuidas addEventListener ühendab kasutaja tegevused JavaScripti funktsioonidega
• ✅ Mõista, miks me edastame sündmuse objekti (e) käsitlejatele
• ✅ Erinevustada submit ja click sündmusi
• ✅ Kirjeldada, millal ja miks init() funktsioon käivitatakse

Kiire enese-test: Mis juhtub, kui unustad vormi esitamises e.preventDefault()? Vastus: Leht laeb ümber, kaotades kogu JavaScripti oleku ja katkestades kasutajakogemuse

Ehita initsialiseerimise ja lähtestamise funktsioonid

Loome nüüd initsialiseerimisloogika sinu laiendile. init() funktsioon on nagu laeva navigatsioonisüsteem, mis kontrollib oma instrumente – ta määrab praeguse seisundi ja kohandab liidest vastavalt. Ta kontrollib, kas keegi on sinu laiendit juba kasutanud, ja laadib nende eelmised seaded.

reset() funktsioon annab kasutajatele võimaluse alustada nullist — nagu teadlased, kes lähtestavad seadmed katsete vahel, et tagada puhtad andmed.

function init() {
	// Kontrolli, kas kasutaja on varem salvestanud API mandaadid
	const storedApiKey = localStorage.getItem('apiKey');
	const storedRegion = localStorage.getItem('regionName');

	// Sea laienduse ikoon üldiseks roheliseks (kohatäide tulevase tunni jaoks)
	// TODO: Rakenda ikooni uuendus järgmisel tunnil

	if (storedApiKey === null || storedRegion === null) {
		// Esmakordne kasutaja: näita seadistuse vormi
		form.style.display = 'block';
		results.style.display = 'none';
		loading.style.display = 'none';
		clearBtn.style.display = 'none';
		errors.textContent = '';
	} else {
		// Tagasi tulev kasutaja: laadige nende salvestatud andmed automaatselt
		displayCarbonUsage(storedApiKey, storedRegion);
		results.style.display = 'none';
		form.style.display = 'none';
		clearBtn.style.display = 'block';
	}
}

function reset(e) {
	e.preventDefault();
	// Tühjenda salvestatud piirkond, et lubada kasutajal valida uus asukoht
	localStorage.removeItem('regionName');
	// Taaskäivita initsialiseerimisprotsess
	init();
}

Siin toimub:

• Hangitakse salvestatud API võti ja regioon brauseri lokaalsest salvestusest
• Kontrollitakse, kas kasutaja on esimene kord (puuduvad salvestatud andmed) või korduvkasutaja
• Kuvatakse seadistusvorm uutele kasutajatele ja peidetakse teised liidese elemendid
• Laetakse automaatselt salvestatud andmed korduvkasutajatele ning kuvatakse lähtestamise võimalus
• Haldatakse kasutajaliidese seisundit vastavalt olemasolevatele andmetele

Lokaalse salvestuse peamised mõisted:

• Püsib andmed brauseri sessioonide vahel (vastandina session storage’i)
• Salvestab andmeid võtme-väärtuse paaridena kasutades getItem() ja setItem() meetodeid
• Tagastab null, kui vastavat võtit ei leita
• Pakkuge lihtsat viisi kasutajaelistuste ja seadete meelespidamiseks

💡 Brauseri salvestuse mõistmine: LocalStorage on nagu laiendi püsiv mälu. Mõtle vanale Aleksandria raamatukogule, mis hoidis käsikirju – info jäi kättesaadavaks isegi siis, kui teadlased lahkusid ja tagasi tulid.

Peamised omadused:

• Püsib andmed ka pärast brauseri sulgemist
• Üle elab arvuti taaskäivitused ja brauseri kokkujooksmised
• Pakub märkimisväärset salvestusmahtu kasutajaelistustele
• Annab viivitamatu juurdepääsu ilma võrgu viivitusteta

Tähelepanu: Sinu brauserilaiendil on oma isoleeritud lokaalne salvestus, mis on eraldatud tavapärastest veebilehtedest. See tagab turvalisuse ja takistab konflikte teiste veebisaitidega.

Sa saad oma salvestatud andmeid vaadata, avades brauseri arendajatööriistad (F12), liikudes vahekaardile Application ja avades sektsiooni Local Storage.

stateDiagram-v2
    [*] --> CheckStorage: Laiendus käivitub
    CheckStorage --> FirstTime: Salvestatud andmeid pole
    CheckStorage --> Returning: Andmed leitud
    
    FirstTime --> ShowForm: Kuvab seadistuse vormi
    ShowForm --> UserInput: Kasutaja sisestab andmed
    UserInput --> SaveData: Salvestab localStorage'i
    SaveData --> FetchAPI: Hangib süsinikuandmed
    
    Returning --> LoadData: Loeb localStorage'ist
    LoadData --> FetchAPI: Hangib süsinikuandmed
    
    FetchAPI --> ShowResults: Kuvab andmed
    ShowResults --> UserAction: Kasutaja suhtleb
    
    UserAction --> Reset: Tühjenda nuppu vajutati
    UserAction --> ShowResults: Kuvab andmed
    
    Reset --> ClearStorage: Eemaldab salvestatud andmed
    ClearStorage --> FirstTime: Tagasi seadistusse

Loading

⚠️ Turvalisuse kaalutlus: Produktionsrakendustes tähendab API võtmete salvestamine LocalStorage’is turvariske, sest JavaScript saab neid andmeid lugeda. Õppimise eesmärgil see lähenemine sobib, aga päris rakendustes tuleb tundlikud võtmed hoida turvaliselt serveripoolses salvestuses.

Töötle vormi esitamist

Nüüd vaatame, mis juhtub, kui keegi esitab su vormi. Vaikimisi laadib brauserid pärast vormi esitamist lehe uuesti, aga me püüame selle käitumise kinni, et luua sujuvam kogemus.

See lähenemine sarnaneb missioonikontrolli suhtlemisele kosmoselaevadega – selle asemel, et kogu süsteemi iga saatmise järel lähtestada, hoitakse pidevat tööd ja töödeldakse uusi andmeid.

Loo funktsioon, mis püüab vormi esitamise sündmuse ja võtab kasutaja sisendi:

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

Ülal oleme:

• Takistanud vormi vaikimisi esitamiskäitumise, mis värskendaks lehte
• Eraldanud kasutajasisendi API võtme ja regiooni väljadest
• Edastanud vormi andmed setUpUser() funktsioonile töötlemiseks
• Hoianud ühe lehe rakenduse käitumist ilma lehe laadimisteta

✅ Pea meeles, et sinu HTML-vormi väljad sisaldavad atribuuti required, seega brauser kontrollib automaatselt, et kasutaja sisestab nii API võtme kui regiooni enne selle funktsiooni käivitumist.

Määra kasutaja eelistused

setUpUser funktsioon vastutab kasutaja mandaadi salvestamise eest ja käivitab esimese API päringu. See loob sujuva ülemineku seadistamisest tulemite kuvamiseni.

function setUpUser(apiKey, regionName) {
	// Salvesta kasutaja mandaadid tulevasteks sessioonideks
	localStorage.setItem('apiKey', apiKey);
	localStorage.setItem('regionName', regionName);
	
	// Uuenda kasutajaliidest laadimisoleku kuvamiseks
	loading.style.display = 'block';
	errors.textContent = '';
	clearBtn.style.display = 'block';
	
	// Hangige süsiniku kasutamise andmed kasutaja mandaatidega
	displayCarbonUsage(apiKey, regionName);
}

Samm-sammult toimub:

• Salvestab API võtme ja regiooni nime lokaalsesse salvestusse tulevaks kasutamiseks
• Kuvab laadimisindikatsiooni, et teada anda, et andmeid hangitakse
• Kustutab kõik varasemad tõrketeated kuvast
• Näitab tühjendusnuppu, et kasutajad saaksid oma seadeid hiljem lähtestada
• Käivitab API päringu, et tuua päris süsiniku kasutusandmed

See funktsioon loob sujuva kasutajakogemuse, haldades nii andmete püsivust kui ka kasutajaliidese värskendusi koordineeritult.

Kuvage süsiniku kasutusandmed

Nüüd ühendame su laiendi väliste andmeallikatega API-de abil. See muudab su laiendi iseseisvast tööriistast midagi, mis saab ligi reaalajas infole kogu internetist.

API mõistmine

API-d on viis, kuidas erinevad rakendused omavahel suhtlevad. Võid neid mõelda nagu telegraafisüsteemi, mis ühendas 19. sajandil kaugeid linnu — operaatorid saatsid päringuid kaugetejaamadele ja said vastuseid soovitud teabega. Iga kord, kui kontrollid sotsiaalmeediat, küsid häälassistendilt või kasutad kullerirakendust, vahendavad API-d neid andmevahetusi.

flowchart TD
    A[Teie laiendus] --> B[HTTP päring]
    B --> C[CO2 signaali API]
    C --> D{Kehtiv päring?}
    D -->|Jah| E[Päringu andmebaasist]
    D -->|Ei| F[Tagasta viga]
    E --> G[Süsinikandmed]
    G --> H[JSON vastus]
    H --> I[Teie laiendus]
    F --> I
    I --> J[Uuenda kasutajaliidest]
    
    subgraph "API päring"
        K[Päised: auth-token]
        L[Parameetrid: riigiKood]
        M[Meetod: GET]
    end
    
    subgraph "API vastus"
        N[Süsiniku intensiivsus]
        O[Fossiilkütuse %]
        P[Aja mark]
    end
    
    style C fill:#e8f5e8
    style G fill:#fff3e0
    style I fill:#e1f5fe

Loading

REST API põhimõtted:

• REST tähendab 'Representational State Transfer'
• Kasutab tavalisi HTTP meetodeid (GET, POST, PUT, DELETE) andmetega suhtlemiseks
• Tagastab andmed prognoositavas vormingus, tavaliselt JSON-is
• Pakub järjekindlaid, URL-põhiseid lõpp-punkte erinevate päringute jaoks

✅ CO2 Signal API, mida täna kasutame, pakub reaalajas süsiniku intensiivsuse andmeid elektrivõrkudest üle maailma. See aitab kasutajatel mõista nende elektritarbimise keskkonnamõju!

💡 Asünkroonse JavaScripti mõistmine: async märksõna võimaldab su koodil korraga mitut toimingut hallata. Kui küsid serverist andmeid, ei taha sa, et kogu allalaadimine seisaks — see oleks nagu lennujuhtimise peatamine ühe lennuki ootamise ajal.

Peamised eelised:

• Hoiab laiendi reageerimisvõimelisena andmete laadimise ajal
• Lubab muul koodil jätkata töötamist võrgu päringute käigus
• Parandab koodi loetavust võrreldes traditsiooniliste tagasiside-põhiste mustritega
• Võimaldab elegantset tõrkehalduse lahendust võrgu probleemide korral

Siin on lühike video async kohta:

🎥 Vajuta ülalpildil videole async/await teemal.

🔄 Pedagoogiline kontrollpunkt

Asünkroonse programmeerimise mõistmine: Enne API funktsiooni süübimist veendu, et sa mõistad:

• ✅ Miks kasutame async/await asemel kogu laiendi blokeerimist
• ✅ Kuidas try/catch plokid võrgutõrkeid ilusasti käsitlevad
• ✅ Milline on erinevus sünkroonse ja asünkroonse toimingu vahel
• ✅ Miks API-kõned võivad ebaõnnestuda ja kuidas neid juhtida

Igapäevased asünkroonsed näited:

• Tellige toitu: Sa ei oota köögi juures - saad kviitungi ja tegeled muude tegevustega
• Saatke e-kirju: Sinu e-posti rakendus ei jää saatmise ajal tardunuks - saad jätkata kirjade kirjutamist
• Laadige veebilehti: Pildid laadivad järk-järgult, samal ajal kui teksti näed kohe

API autentimisvoog:

sequenceDiagram
    participant Ext as Laiendus
    participant API as CO2 Signaali API
    participant DB as Andmebaas
    
    Ext->>API: Päring koos autendimärgiga
    API->>API: Märgi valideerimine
    API->>DB: Süsinikuandmete päring
    DB->>API: Andmete tagastamine
    API->>Ext: JSON vastus
    Ext->>Ext: Kasutajaliidese värskendamine

Loading

Loo funktsioon süsiniku kasutusandmete toomiseks ja kuvamiseks:

// Kaasaegne fetch API lähenemine (väliseid sõltuvusi pole vaja)
async function displayCarbonUsage(apiKey, region) {
	try {
		// Hangi süsiniku intensiivsuse andmed CO2 Signaali API-st
		const response = await fetch('https://api.co2signal.com/v1/latest', {
			method: 'GET',
			headers: {
				'auth-token': apiKey,
				'Content-Type': 'application/json'
			},
			// Lisa päringuparameetrid konkreetse piirkonna jaoks
			...new URLSearchParams({ countryCode: region }) && {
				url: `https://api.co2signal.com/v1/latest?countryCode=${region}`
			}
		});

		// Kontrolli, kas API päring õnnestus
		if (!response.ok) {
			throw new Error(`API request failed: ${response.status}`);
		}

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

		// Arvuta ümardatud süsiniku intensiivsuse väärtus
		const carbonIntensity = Math.round(carbonData.carbonIntensity);

		// Uuenda kasutajaliidest hangitud andmetega
		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) - rakenda järgmises õppetükis

	} catch (error) {
		console.error('Error fetching carbon data:', error);
		
		// Näita kasutajasõbralikku veateadet
		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.';
	}
}

Mis siin toimub:

• Kasutab kaasaegset fetch() API-t ega vaja lisaraamatukogusid nagu Axios, muutes koodi puhtamaks ja sõltumatuks
• Rakendab õiget veakontrolli response.ok abil, et varakult tuvastada API tõrked
• Halda asünkroonseid toiminguid async/await abil koodi loetavuse tõstmiseks
• Autendib CO2 Signal API:ga kasutades auth-token päist
• Parsib JSON vastust ja eraldab süsiniku intensiivsusandmeid
• Uuendab mitut kasutajaliidese elementi vormindatud keskkonnaandmetega
• Pakub kasutajasõbralikke veateateid, kui API-kutsed ebaõnnestuvad

Näidatud kaasaegsed JavaScripti mõisted:

• Mallistamisliteralid ${} süntaksiga puhtaks stringide vormindamiseks
• Tõrkehaldus try/catch plokkidega robustsete rakenduste jaoks
• Async/await muster võrgupäringute ilusti käsitlemiseks
• Objekti destruktureerimine API vastuste andmete eraldamiseks
• Meetodite kettimine mitme DOM manipulatsiooni jaoks

✅ See funktsioon demonstreerib mitmeid olulisi veebiarenduse kontseptsioone — suhtlemist väliste serveritega, autentimist, andmetöötlust, kasutajaliidese uuendamist ja tõrgete haldamist. Need on põhilised oskused, mida professionaalsed arendajad regulaarselt kasutavad.

flowchart TD
    A[Alusta API-kõnet] --> B[Päringu toomine]
    B --> C{Võrguühendus õnnestus?}
    C -->|Ei| D[Võrguviga]
    C -->|Jah| E{Vastus okei?}
    E -->|Ei| F[API viga]
    E -->|Jah| G[Analüüsi JSON]
    G --> H{Kehtivad andmed?}
    H -->|Ei| I[Andmeviga]
    H -->|Jah| J[Uuenda kasutajaliidest]
    
    D --> K[Näita veateadet]
    F --> K
    I --> K
    J --> L[Peida laadimine]
    K --> L
    
    style A fill:#e1f5fe
    style J fill:#e8f5e8
    style K fill:#ffebee
    style L fill:#f3e5f5

Loading

🔄 Pedagoogiline kontrollpunkt

Täielik süsteemimõistmine: Kontrolli oma valdamist kogu tööprotsessist:

• ✅ Kuidas DOM viited võimaldavad JavaScriptil liidest kontrollida
• ✅ Miks lokaalne salvestus loob püsivuse brauseri sessioonide vahel
• ✅ Kuidas async/await võimaldab API-kõnesid ilma laiendi tardumiseta
• ✅ Mis juhtub API-kõnede ebaõnnestumisel ja kuidas tõrkeid käsitletakse
• ✅ Miks kasutajakogemus sisaldab laadimise staate ja veateateid

🎉 Sinu saavutus: Sa oled loonud brauserilaiendi, mis:

• Ühendub internetiga ja hangib päris keskkonnateavet
• Püsib kasutaja seadetes sessioonide vahel
• Haldb tõrkeid ilusti, ilma et äpp kokku jookseks
• Pakub sujuvat, professionaalset kasutajakogemust

Testi oma tööd, käivitades npm run build ja värskendades laiendit brauseris. Sul on nüüd toimiv süsiniku jalajälje jälgija. Järgmine tund lisab dünaamilise ikoonifunktsionaalsuse, et laiend täiendada.

---

GitHub Copilot Agenti väljakutse 🚀

Kasuta agent-režiimi, et täita järgmine väljakutse: Kirjeldus: Täienda brauserilaiendit, lisades veahaldust parandavaid funktsioone ja kasutajakogemuse täiustusi. See väljakutse aitab sul harjutada API-de, kohaliku salvestuse ja DOM-i manipuleerimisega tänapäevaste JavaScripti mustrite abil.

Ülesanne: Loo täiustatud versioon funktsioonist displayCarbonUsage, mis hõlmab: 1) Edasilükkamise mehhanismi ebaõnnestunud API-päringute korral koos eksponentsiaalse tagasilöögiga, 2) Sisevuse valideerimine piirkonna koodi jaoks enne API-päringut, 3) Laadimisanimatsioon edenemisindikaatoritega, 4) API vastuste vahemällu salvestamine localStorage-s koos aegumistähtaegadega (vahemälu kestab 30 minutit) ning 5) Võimalus kuvada ajaloolisi andmeid varasematest API-päringutest. Lisa ka korrektsete TypeScript-stiilis JSDoc kommentaaride abil dokumentatsioon kõigile funktsiooni parameetritele ja tagastustüüpidele.

Lisateavet leiad aadressilt agent mode.

🚀 Väljakutse

Suurenda oma arusaamist API-dest, uurides rohkelt brauseripõhiseid API-sid, mis on veebiarenduseks kättesaadavad. Vali üks neist brauseri API-dest ja loo väike demonstratsioon:

• Geolocation API - Kasutaja praeguse asukoha määramine
• Notification API - Lauaarvuti teavituste saatmine
• HTML Drag and Drop API - Interaktiivsete lohistamisliideste loomine
• Web Storage API - Täiustatud kohaliku salvestuse tehnikad
• Fetch API - Kaasaegne alternatiiv XMLHttpRequest-ile

Uurimisküsimused, mida kaaluda:

• Milliseid reaalse maailma probleeme see API lahendab?
• Kuidas API käsitleb vigu ja servajuhtumeid?
• Millised turvaküsimused tuleb selle API kasutamisel arvesse võtta?
• Kui laialdaselt on see API erinevates brauserites toetatud?

Pärast uurimist mõtle, millised omadused muudavad API arendajasõbralikuks ja usaldusväärseks.

Loengu järgne viktoriin

Loengu järgne viktoriin

Kordamine ja iseseisev õpe

Selles õppetükis õppisid LocalStorage’i ja API-de kohta, mis on mõlemad professionaalse veebiarendaja jaoks väga kasulikud. Kas oskad mõelda, kuidas need kaks koos töötavad? Mõtle, kuidas kavandaksid veebisaiti, mis salvestab elemente, mida API kasutab.

⚡ Mida saad teha järgmise 5 minuti jooksul

• Ava arendajatööriistades vahekaart Application ja uuri localStorage’i suvalisel veebisaidil
• Loo lihtne HTML-vorm ja testi vormi valideerimist brauseris
• Proovi salvestada ja laadida andmeid localStorage’i abil brauseri konsoolis
• Kontrolli võrgukaardil vormiandmete esitamist

🎯 Mida saad selle tunni jooksul saavutada

• Täida loengu järgne viktoriin ja mõista vormi käsitlemise kontseptsioone
• Loo brauserilaiendi vorm, mis salvestab kasutaja eelistusi
• Rakenda kliendipoolne vormi valideerimine kasulike veateadetega
• Harjuta chrome.storage API kasutamist laienduse andmete püsivuseks
• Loo kasutajaliides, mis reageerib salvestatud kasutajaseadetega

📅 Sinu nädala pikkune laiendi ehitamise plaan

• Loo täielikult funktsioneeriv brauserilaiendi vormi funktsionaalsusega
• Omandi erinevad salvestusvõimalused: local, sync ja session storage
• Rakenda täiustatud vormifunktsioone nagu automaattäitmine ja valideerimine
• Lisa kasutajaandmete importimise/eksportimise funktsionaalsus
• Testi oma laiendust põhjalikult erinevates brauserites
• Viimistle laiendi kasutajakogemust ja veakäsitlust

🌟 Sinu kuu pikkune veeb API meistriklass

• Ehita keerukaid rakendusi, kasutades erinevaid brauseri salvestuse API-sid
• Õpi offline-eelse arenduse mustreid
• Panusta avatud lähtekoodiga projektidesse, mis käsitlevad andmete püsivust
• Omandi privaatsuskeskse arenduse ja GDPR-i nõuete tundmaõppimine
• Loo korduvkasutatavaid raamatukogusid vormide käsitlemiseks ja andmete haldamiseks
• Jaga teadmisi veeb API-de ja laienduste arendamise kohta

🎯 Sinu laiendi arenduse meistriklassi ajakava

timeline
    title API integratsiooni ja salvestuse õppe edenemine
    
    section DOM põhitõed (15 minutit)
        Elementide viited: querySelector meisterlikkus
                          : Sündmuste kuulaja seadistamine
                          : Oleku haldamise alused
        
    section Kohalik salvestus (20 minutit)
        Andmete püsivus: Võtme-väärtuse salvestus
                        : Seansi haldamine
                        : Kasutaja eelistuste käsitlemine
                        : Salvestuse kontrollimise tööriistad
        
    section Vormide töötlemine (25 minutit)
        Kasutaja sisend: Vormide valideerimine
                  : Sündmuste takistamine
                  : Andmete väljavõtmine
                  : Kasutajaliidese oleku üleminekud
        
    section API integratsioon (35 minutit)
        Väline suhtlus: HTTP päringud
                              : Autentimismustrid
                              : JSON andmete parsimine
                              : Vastuste töötlemine
        
    section Asünkroonne programmeerimine (40 minutit)
        Moodne JavaScript: Lubaduste haldamine
                         : Async/await mustrid
                         : Vigade haldamine
                         : Mittekonkurentsivõimelised toimingud
        
    section Vigade käsitlemine (30 minutit)
        Tugevad rakendused: Try/catch plokid
                           : Kasutajasõbralikud sõnumid
                           : Sujuv degradeerumine
                           : Silumistehnikad
        
    section Täiustatud mustrid (1 nädal)
        Professionaalne areng: Vahemälu strateegiad
                                : Piirangu määramine
                                : Taastamise mehhanismid
                                : Tulemuslikkuse optimeerimine
        
    section Tootmisoskus (1 kuu)
        Ettevõtte funktsioonid: Turvalisuse parimad tavad
                           : API versioonihaldus
                           : Jälgimine ja logimine
                           : Laiendatav arhitektuur

Loading

🛠️ Sinu täisfunktsionaalne arenduskomplekti kokkuvõte

Pärast selle õppetüki lõpetamist on sul nüüd:

• DOM oskuslikkus: Täpne elementide suunamine ja manipuleerimine
• Salvestuskogemus: Andmete püsiv haldamine localStorage abil
• API integreerimine: Reaalajas andmete päring ja autentimine
• Asünkroonne programmeerimine: Mitteblokeerivad toimingud tänapäevase JavaScriptiga
• Veahaldus: Vastupidavad rakendused, mis suudavad ebaõnnestumisi väärikalt käsitleda
• Kasutajakogemus: Laadimisolekud, valideerimine ja sujuvad interaktsioonid
• Kaasaegsed mustrid: fetch API, async/await ja ES6+ omadused

Omandatud professionaalsed oskused: Sa oled rakendanud mustreid, mida kasutatakse:

• Veebirakendustes: Ühelehelised rakendused väliste andmeallikatega
• Mobiiliarenduses: API-põhised rakendused offline-võimalustega
• Lauarakendustes: Electron-rakendused püsiva salvestusega
• Ettevõttesüsteemides: Autentimine, vahemällu salvestamine ja veahaldus
• Kaasaegsetes raamistikudes: React/Vue/Angular andmehalduse mustrid

Järgmine tase: Sa oled valmis uurima keerukamaid teemasid, nagu vahemällu salvestamise strateegiad, reaalajas WebSocket ühendused või keerukas oleku haldus!

Ülesanne

Adopteeri API

---

Vastutusest loobumine: See dokument on tõlgitud kasutades tehisintellekti tõlke teenust Co-op Translator. Kuigi püüame tagada täpsust, palun arvestage, et automaatsel tõlkel võivad esineda vead või ebatäpsused. Originaaldokument selle esmases keeles tuleks pidada autoriteetseks allikaks. Kriitilise teabe puhul soovitatakse professionaalset inimtõlget. Me ei vastuta selle tõlke kasutamisest tingitud arusaamatuste ega valesti mõistmiste eest.