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

Nettleserutvidelsesprosjekt del 2: Koble til en API, bruk lokal lagring

Quiz før forelesning

Quiz før forelesning

Introduksjon

Husker du nettleserutvidelsen du begynte å lage? Akkurat nå har du et fint skjema, men det er i utgangspunktet statisk. I dag skal vi gi det liv ved å koble det til ekte data og gi det hukommelse.

Tenk på Apollo-misjonens kontrollsystemer - de viste ikke bare statisk informasjon. De kommuniserte konstant med romfartøyet, oppdaterte med telemetridata og husket kritiske misjonsparametere. Det er den typen dynamisk oppførsel vi skal bygge i dag. Utvidelsen din vil koble seg til internett, hente ekte miljødata og huske innstillingene dine til neste gang.

API-integrasjon kan høres komplisert ut, men det handler egentlig bare om å lære koden din å kommunisere med andre tjenester. Enten du henter værdata, sosiale medieoppdateringer eller informasjon om karbonavtrykk som vi skal gjøre i dag, handler det om å etablere disse digitale forbindelsene. Vi skal også utforske hvordan nettlesere kan lagre informasjon - på samme måte som biblioteker har brukt kortkataloger for å huske hvor bøker hører hjemme.

Ved slutten av denne leksjonen vil du ha en nettleserutvidelse som henter ekte data, lagrer brukerpreferanser og gir en smidig opplevelse. La oss komme i gang!

✅ Følg de nummererte segmentene i de relevante filene for å vite hvor du skal plassere koden din.

Sett opp elementene som skal manipuleres i utvidelsen

Før JavaScript kan manipulere grensesnittet, trenger det referanser til spesifikke HTML-elementer. Tenk på det som et teleskop som må rettes mot bestemte stjerner - før Galileo kunne studere Jupiters måner, måtte han finne og fokusere på Jupiter selv.

I filen index.js skal vi lage const-variabler som fanger referanser til hvert viktig skjemaelement. Dette er likt hvordan forskere merker utstyret sitt - i stedet for å lete gjennom hele laboratoriet hver gang, kan de direkte få tilgang til det de trenger.

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

Dette gjør koden:

• Fanger opp skjemaelementer ved hjelp av document.querySelector() med CSS-klassevelgere
• Oppretter referanser til inndatafeltene for regionnavn og API-nøkkel
• Etablerer forbindelser til resultatelementer for karbonbrukdata
• Setter opp tilgang til UI-elementer som lastindikatorer og feilmeldinger
• Lagrer hver elementreferanse i en const-variabel for enkel gjenbruk i koden din

Legg til hendelseslyttere

Nå skal vi få utvidelsen din til å reagere på brukerhandlinger. Hendelseslyttere er kodens måte å overvåke brukerinteraksjoner på. Tenk på dem som operatørene i tidlige telefonsentraler - de lyttet etter innkommende samtaler og koblet de riktige kretsene når noen ønsket å ringe.

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

Forstå disse konseptene:

• Legger til en submit-lytter til skjemaet som utløses når brukere trykker Enter eller klikker på send-knappen
• Kobler en klikklytter til klar-knappen for å tilbakestille skjemaet
• Sender hendelsesobjektet (e) til håndteringsfunksjoner for ekstra kontroll
• Kaller funksjonen init() umiddelbart for å sette opp den innledende tilstanden til utvidelsen din

✅ Legg merke til den korte pilfunksjonssyntaksen som brukes her. Denne moderne JavaScript-tilnærmingen er mer elegant enn tradisjonelle funksjonsuttrykk, men begge fungerer like bra!

Bygg initialiserings- og tilbakestillingsfunksjoner

La oss lage initialiseringslogikken for utvidelsen din. Funksjonen init() er som et skips navigasjonssystem som sjekker instrumentene sine - den bestemmer den nåværende tilstanden og justerer grensesnittet deretter. Den sjekker om noen har brukt utvidelsen din før og laster inn deres tidligere innstillinger.

Funksjonen reset() gir brukerne en ny start - på samme måte som forskere tilbakestiller instrumentene sine mellom eksperimenter for å sikre rene data.

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();
}

Hva som skjer her:

• Henter lagret API-nøkkel og region fra nettleserens lokale lagring
• Sjekker om dette er en førstegangsbruker (ingen lagrede legitimasjoner) eller en tilbakevendende bruker
• Viser oppsettskjemaet for nye brukere og skjuler andre grensesnittelementer
• Laster lagrede data automatisk for tilbakevendende brukere og viser tilbakestillingsalternativet
• Håndterer brukergrensesnittets tilstand basert på tilgjengelige data

Viktige konsepter om lokal lagring:

• Beholder data mellom nettleserøkter (i motsetning til sesjonslagring)
• Lagrer data som nøkkel-verdi-par ved hjelp av getItem() og setItem()
• Returnerer null når ingen data eksisterer for en gitt nøkkel
• Gir en enkel måte å huske brukerpreferanser og innstillinger på

💡 Forstå nettleserlagring: LocalStorage er som å gi utvidelsen din vedvarende hukommelse. Tenk på hvordan det gamle biblioteket i Alexandria lagret skriftruller - informasjonen forble tilgjengelig selv når forskere kom og gikk.

Viktige egenskaper:

• Beholder data selv etter at du lukker nettleseren
• Overlever datamaskinens omstart og nettleserens krasj
• Gir betydelig lagringsplass for brukerpreferanser
• Tilbyr umiddelbar tilgang uten nettverksforsinkelser

Viktig merknad: Nettleserutvidelsen din har sin egen isolerte lokale lagring som er separat fra vanlige nettsider. Dette gir sikkerhet og forhindrer konflikter med andre nettsteder.

Du kan se de lagrede dataene dine ved å åpne nettleserens utviklerverktøy (F12), navigere til Application-fanen og utvide Local Storage-seksjonen.

⚠️ Sikkerhetsbetraktning: I produksjonsapplikasjoner utgjør lagring av API-nøkler i LocalStorage sikkerhetsrisikoer siden JavaScript kan få tilgang til disse dataene. For læringsformål fungerer denne tilnærmingen fint, men ekte applikasjoner bør bruke sikker serverbasert lagring for sensitive legitimasjoner.

Håndter skjemainnsending

Nå skal vi håndtere hva som skjer når noen sender inn skjemaet ditt. Som standard laster nettlesere siden på nytt når skjemaer sendes inn, men vi vil avskjære denne oppførselen for å skape en smidigere opplevelse.

Denne tilnærmingen speiler hvordan kontrollsenteret håndterer romfartøykommunikasjon - i stedet for å tilbakestille hele systemet for hver overføring, opprettholder de kontinuerlig drift mens de behandler ny informasjon.

Lag en funksjon som fanger opp skjemaets innsending og trekker ut brukerens inndata:

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

I koden ovenfor har vi:

• Forhindret standard skjemaoppførsel som ville oppdatert siden
• Trukket ut brukerens inndata fra API-nøkkel- og regionfeltene
• Sendt skjemaets data til funksjonen setUpUser() for behandling
• Opprettholdt en enkelt-sides applikasjonsopplevelse ved å unngå sideoppdateringer

✅ Husk at HTML-skjemaets felter inkluderer attributtet required, så nettleseren validerer automatisk at brukerne gir både API-nøkkel og region før denne funksjonen kjører.

Sett opp brukerpreferanser

Funksjonen setUpUser er ansvarlig for å lagre brukerens legitimasjon og starte den første API-forespørselen. Dette skaper en smidig overgang fra oppsett til visning av resultater.

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);
}

Steg for steg, her er hva som skjer:

• Lagrer API-nøkkelen og regionnavnet i lokal lagring for fremtidig bruk
• Viser en lastindikator for å informere brukerne om at data hentes
• Fjerner eventuelle tidligere feilmeldinger fra visningen
• Avslører klar-knappen for brukere som ønsker å tilbakestille innstillingene senere
• Starter API-forespørselen for å hente ekte karbonbruksdata

Denne funksjonen skaper en sømløs brukeropplevelse ved å håndtere både datalagring og oppdateringer av brukergrensesnittet i én koordinert handling.

Vis karbonbruksdata

Nå skal vi koble utvidelsen din til eksterne datakilder via API-er. Dette forvandler utvidelsen din fra et frittstående verktøy til noe som kan få tilgang til sanntidsinformasjon fra hele internett.

Forstå API-er

API-er er hvordan forskjellige applikasjoner kommuniserer med hverandre. Tenk på dem som telegrafsystemet som koblet fjerne byer på 1800-tallet - operatører sendte forespørsler til fjerne stasjoner og mottok svar med den ønskede informasjonen. Hver gang du sjekker sosiale medier, stiller en stemmeassistent et spørsmål eller bruker en leveringsapp, fasiliterer API-er disse datautvekslingene.

Viktige konsepter om REST API-er:

• REST står for 'Representational State Transfer'
• Bruker standard HTTP-metoder (GET, POST, PUT, DELETE) for å samhandle med data
• Returnerer data i forutsigbare formater, vanligvis JSON
• Tilbyr konsistente, URL-baserte endepunkter for forskjellige typer forespørsler

✅ CO2 Signal API vi skal bruke gir sanntidsdata om karbonintensitet fra elektriske nettverk over hele verden. Dette hjelper brukere med å forstå miljøpåvirkningen av deres elektrisitetsbruk!

💡 Forstå asynkron JavaScript: Nøkkelordet async gjør det mulig for koden din å håndtere flere operasjoner samtidig. Når du ber om data fra en server, vil du ikke at hele utvidelsen din skal fryse - det ville være som om flykontrollen stoppet all drift mens de ventet på svar fra ett fly.

Viktige fordeler:

• Opprettholder utvidelsens responsivitet mens data lastes
• Lar annen kode fortsette å kjøre under nettverksforespørsler
• Forbedrer lesbarheten til koden sammenlignet med tradisjonelle callback-mønstre
• Muliggjør elegant feilhåndtering for nettverksproblemer

Her er en rask video om async:

🎥 Klikk på bildet over for en video om async/await.

Lag funksjonen for å hente og vise karbonbruksdata:

// 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.';
	}
}

Hva som skjer her:

• Bruker den moderne fetch()-API-en i stedet for eksterne biblioteker som Axios for renere, avhengighetsfri kode
• Implementerer riktig feilsjekking med response.ok for å fange opp API-feil tidlig
• Håndterer asynkrone operasjoner med async/await for mer lesbar kodeflyt
• Autentiserer med CO2 Signal API ved hjelp av auth-token-headeren
• Parser JSON-responsdata og trekker ut informasjon om karbonintensitet
• Oppdaterer flere UI-elementer med formaterte miljødata
• Gir brukervennlige feilmeldinger når API-forespørsler mislykkes

Viktige moderne JavaScript-konsepter demonstrert:

• Template literals med ${}-syntaks for ren strengformatering
• Feilhåndtering med try/catch-blokker for robuste applikasjoner
• Async/await-mønster for å håndtere nettverksforespørsler elegant
• Objektdestrukturering for å trekke ut spesifikke data fra API-responser
• Metodekjeding for flere DOM-manipulasjoner

✅ Denne funksjonen demonstrerer flere viktige webutviklingskonsepter - kommunikasjon med eksterne servere, håndtering av autentisering, behandling av data, oppdatering av grensesnitt og elegant håndtering av feil. Dette er grunnleggende ferdigheter som profesjonelle utviklere bruker regelmessig.

🎉 Hva du har oppnådd: Du har laget en nettleserutvidelse som:

• Kobler seg til internett og henter ekte miljødata
• Beholder brukerinnstillinger mellom økter
• Håndterer feil elegant i stedet for å krasje
• Gir en smidig, profesjonell brukeropplevelse

Test arbeidet ditt ved å kjøre npm run build og oppdatere utvidelsen din i nettleseren. Du har nå en funksjonell karbonavtrykkssporer. Neste leksjon vil legge til dynamisk ikonfunksjonalitet for å fullføre utvidelsen.

---

GitHub Copilot Agent Challenge 🚀

Bruk Agent-modus for å fullføre følgende utfordring:

Beskrivelse: Forbedre nettleserutvidelsen ved å legge til forbedringer for feilhåndtering og brukeropplevelsesfunksjoner. Denne utfordringen vil hjelpe deg med å øve på å jobbe med API-er, lokal lagring og DOM-manipulasjon ved hjelp av moderne JavaScript-mønstre.

Oppgave: Lag en forbedret versjon av funksjonen displayCarbonUsage som inkluderer: 1) En retry-mekanisme for mislykkede API-forespørsler med eksponentiell tilbakefall, 2) Validering av regionkode før API-forespørselen gjøres, 3) En lastanimasjon med fremdriftsindikatorer, 4) Caching av API-responser i localStorage med utløpstidspunkter (cache i 30 minutter), og 5) En funksjon for å vise historiske data fra tidligere API-forespørsler. Legg også til riktige TypeScript-stil JSDoc-kommentarer for å dokumentere alle funksjonsparametere og returtyper.

Lær mer om agent-modus her.

🚀 Utfordring

Utvid forståelsen din av API-er ved å utforske rikdommen av nettleserbaserte API-er tilgjengelig for webutvikling. Velg en av disse nettleser-API-ene og bygg en liten demonstrasjon:

• Geolocation API - Få brukerens nåværende posisjon
• Notification API - Send skrivebordsvarsler
• HTML Drag and Drop API - Lag interaktive dra-grensesnitt
• Web Storage API - Avanserte teknikker for lokal lagring
• Fetch API - Moderne alternativ til XMLHttpRequest

Forskningsspørsmål å vurdere:

• Hvilke reelle problemer løser denne API-en?
• Hvordan håndterer API-en feil og kanttilfeller?
• Hvilke sikkerhetsbetraktninger finnes når man bruker denne API-en?
• Hvor bredt støttes denne API-en på tvers av forskjellige nettlesere?

Etter forskningen din, identifiser hvilke egenskaper som gjør en API brukervennlig og pålitelig.

Quiz etter forelesning

Quiz etter forelesning

Gjennomgang og selvstudium

Du lærte om LocalStorage og API-er i denne leksjonen, begge er svært nyttige for den profesjonelle webutvikleren. Kan du tenke på hvordan disse to tingene fungerer sammen? Tenk på hvordan du ville ha designet et nettsted som lagrer elementer som skal brukes av en API.

Oppgave

Adopter en API

---

Ansvarsfraskrivelse:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten Co-op Translator. Selv om vi tilstreber nøyaktighet, vær oppmerksom på at automatiserte oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på sitt opprinnelige språk bør anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi er ikke ansvarlige for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.