19 KiB

Raw Blame History

Webbläsartillägg Projekt Del 2: Anropa en API, använd Lokal Lagring

Förföreläsningsquiz

Introduktion

Kommer du ihåg det webbläsartillägg du började bygga? Just nu har du ett snyggt formulär, men det är i princip statiskt. Idag ska vi ge det liv genom att koppla det till verklig data och ge det minne.

Tänk på Apollo-uppdragskontrollens datorer - de visade inte bara fast information. De kommunicerade ständigt med rymdfarkosten, uppdaterades med telemetridata och kom ihåg kritiska uppdragsparametrar. Det är den typen av dynamiskt beteende vi bygger idag. Ditt tillägg kommer att nå ut på internet, hämta verklig miljödata och komma ihåg dina inställningar till nästa gång.

API-integrering kan låta komplext, men det handlar egentligen bara om att lära din kod att kommunicera med andra tjänster. Oavsett om du hämtar väderdata, sociala medieflöden eller information om koldioxidavtryck som vi ska göra idag, handlar det om att etablera dessa digitala kopplingar. Vi kommer också att utforska hur webbläsare kan lagra information - ungefär som hur bibliotek har använt kortkataloger för att komma ihåg var böcker hör hemma.

I slutet av denna lektion kommer du att ha ett webbläsartillägg som hämtar verklig data, lagrar användarpreferenser och ger en smidig upplevelse. Låt oss sätta igång!

✅ Följ de numrerade segmenten i de relevanta filerna för att veta var du ska placera din kod.

Ställ in elementen att manipulera i tillägget

Innan din JavaScript kan manipulera gränssnittet behöver det referenser till specifika HTML-element. Tänk på det som ett teleskop som behöver riktas mot specifika stjärnor - innan Galileo kunde studera Jupiters månar, var han tvungen att lokalisera och fokusera på Jupiter själv.

I din index.js-fil skapar vi const-variabler som fångar referenser till varje viktigt formulärelement. Detta liknar hur forskare märker sin utrustning - istället för att söka genom hela laboratoriet varje gång kan de direkt komma åt det de behöver.

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

Vad denna kod gör:

Fångar formulärelement med document.querySelector() och CSS-klassväljare
Skapar referenser till inmatningsfält för regionnamn och API-nyckel
Etablerar kopplingar till resultatvisningselement för koldioxidanvändningsdata
Ställer in åtkomst till UI-element som laddningsindikatorer och felmeddelanden
Lagrar varje elementreferens i en const-variabel för enkel återanvändning i din kod

Lägg till händelselyssnare

Nu ska vi få ditt tillägg att reagera på användarens handlingar. Händelselyssnare är din kods sätt att övervaka användarinteraktioner. Tänk på dem som operatörerna i tidiga telefonväxlar - de lyssnade efter inkommande samtal och kopplade rätt kretsar när någon ville göra en anslutning.

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

Förstå dessa koncept:

Fäster en lyssnare för inskickning till formuläret som triggas när användare trycker på Enter eller klickar på skicka
Kopplar en klicklyssnare till rensa-knappen för att återställa formuläret
Skickar händelseobjektet (e) till hanteringsfunktioner för ytterligare kontroll
Anropar funktionen init() direkt för att ställa in tilläggets initiala tillstånd

✅ Lägg märke till den korta pilfunktionssyntaxen som används här. Denna moderna JavaScript-metod är renare än traditionella funktionsuttryck, men båda fungerar lika bra!

Bygg initialiserings- och återställningsfunktioner

Låt oss skapa initialiseringslogiken för ditt tillägg. Funktionen init() är som ett skepps navigationssystem som kontrollerar sina instrument - den avgör det aktuella tillståndet och justerar gränssnittet därefter. Den kontrollerar om någon har använt ditt tillägg tidigare och laddar deras tidigare inställningar.

Funktionen reset() ger användare en ny start - ungefär som hur forskare återställer sina instrument mellan experiment för att säkerställa ren 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();
}

Bryta ner vad som händer här:

Hämtar lagrad API-nyckel och region från webbläsarens lokala lagring
Kontrollerar om detta är en förstagångsanvändare (inga lagrade uppgifter) eller återkommande användare
Visar inställningsformuläret för nya användare och döljer andra gränssnittselement
Laddar sparad data automatiskt för återkommande användare och visar återställningsalternativet
Hantera användargränssnittets tillstånd baserat på tillgänglig data

Nyckelkoncept om Lokal Lagring:

Består data mellan webbläsarsessioner (till skillnad från sessionslagring)
Lagrar data som nyckel-värdepar med getItem() och setItem()
Returnerar null när ingen data finns för en given nyckel
Ger ett enkelt sätt att komma ihåg användarpreferenser och inställningar

💡 Förstå Webbläsarlagring: LocalStorage är som att ge ditt tillägg ett bestående minne. Tänk på hur det antika biblioteket i Alexandria lagrade skriftrullar - informationen förblev tillgänglig även när forskare lämnade och återvände.

Nyckelkarakteristika:

Består data även efter att du stänger din webbläsare

Överlever omstarter av datorn och webbläsarkrascher

Ger betydande lagringsutrymme för användarpreferenser

Erbjuder omedelbar åtkomst utan nätverksfördröjningar

Du kan se din lagrade data genom att öppna webbläsarens utvecklarverktyg (F12), navigera till fliken Application och expandera sektionen Local Storage.

⚠️ Säkerhetsövervägande: I produktionsapplikationer utgör lagring av API-nycklar i LocalStorage säkerhetsrisker eftersom JavaScript kan komma åt denna data. För inlärningsändamål fungerar denna metod bra, men riktiga applikationer bör använda säker serverlagring för känsliga uppgifter.

Hantera formulärinskickning

Nu ska vi hantera vad som händer när någon skickar in ditt formulär. Som standard laddar webbläsare om sidan när formulär skickas in, men vi kommer att avbryta detta beteende för att skapa en smidigare upplevelse.

Denna metod speglar hur uppdragskontroll hanterar rymdfarkostkommunikation - istället för att återställa hela systemet för varje överföring, upprätthåller de kontinuerlig drift medan de bearbetar ny information.

Skapa en funktion som fångar formulärinskickningshändelsen och extraherar användarens inmatning:

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

I ovanstående har vi:

Förhindrar standardbeteendet för formulärinskickning som skulle uppdatera sidan
Extraherar användarinmatningsvärden från API-nyckel- och regionfälten
Skickar formulärdata till funktionen setUpUser() för bearbetning
Upprätthåller en en-sidig applikationsbeteende genom att undvika siduppdateringar

✅ Kom ihåg att dina HTML-formulärfält inkluderar attributet required, så webbläsaren validerar automatiskt att användare tillhandahåller både API-nyckel och region innan denna funktion körs.

Ställ in användarpreferenser

Funktionen setUpUser ansvarar för att spara användarens uppgifter och initiera det första API-anropet. Detta skapar en smidig övergång från inställning till att visa resultat.

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 för steg, här är vad som händer:

Sparar API-nyckeln och regionnamnet i lokal lagring för framtida användning
Visar en laddningsindikator för att informera användare om att data hämtas
Rensar eventuella tidigare felmeddelanden från visningen
Avslöjar rensa-knappen för användare att återställa sina inställningar senare
Initierar API-anropet för att hämta verklig koldioxidanvändningsdata

Denna funktion skapar en sömlös användarupplevelse genom att hantera både datalagring och gränssnittsuppdateringar i en samordnad åtgärd.

Visa koldioxidanvändningsdata

Nu ska vi koppla ditt tillägg till externa datakällor via API:er. Detta förvandlar ditt tillägg från ett fristående verktyg till något som kan få tillgång till realtidsinformation från hela internet.

Förstå API:er

API:er är hur olika applikationer kommunicerar med varandra. Tänk på dem som telegrafsystemet som kopplade avlägsna städer på 1800-talet - operatörer skickade förfrågningar till avlägsna stationer och fick svar med den begärda informationen. Varje gång du kollar sociala medier, ställer en fråga till en röstassistent eller använder en leveransapp, underlättar API:er dessa datautbyten.

Nyckelkoncept om REST API:er:

REST står för 'Representational State Transfer'
Använder standard HTTP-metoder (GET, POST, PUT, DELETE) för att interagera med data
Returnerar data i förutsägbara format, vanligtvis JSON
Tillhandahåller konsekventa, URL-baserade slutpunkter för olika typer av förfrågningar

✅ CO2 Signal API vi ska använda tillhandahåller realtidsdata om koldioxidintensitet från elektriska nät världen över. Detta hjälper användare att förstå miljöpåverkan av deras elförbrukning!

💡 Förstå Asynkron JavaScript: Nyckelordet async gör det möjligt för din kod att hantera flera operationer samtidigt. När du begär data från en server vill du inte att hela tillägget ska frysa - det skulle vara som att flygtrafikledningen stoppar all verksamhet medan de väntar på svar från ett flygplan.

Nyckelfördelar:

Upprätthåller tilläggets responsivitet medan data laddas

Tillåter annan kod att fortsätta exekveras under nätverksförfrågningar

Förbättrar kodläsbarheten jämfört med traditionella callback-mönster

Möjliggör graciös felhantering för nätverksproblem

Här är en snabb video om async:

🎥 Klicka på bilden ovan för en video om async/await.

Skapa funktionen för att hämta och visa koldioxidanvändningsdata:

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

Bryta ner vad som händer här:

Använder den moderna fetch()-API:n istället för externa bibliotek som Axios för renare, beroendefri kod
Implementerar korrekt felkontroll med response.ok för att fånga API-fel tidigt
Hantera asynkrona operationer med async/await för mer läsbar kodflöde
Autentiserar med CO2 Signal API med hjälp av auth-token-headern
Analyserar JSON-svar och extraherar information om koldioxidintensitet
Uppdaterar flera UI-element med formaterad miljödata
Tillhandahåller användarvänliga felmeddelanden när API-anrop misslyckas

Nyckelmoderna JavaScript-koncept som demonstreras:

Mallsträngar med ${}-syntax för ren strängformatering
Felhantering med try/catch-block för robusta applikationer
Async/await-mönster för att hantera nätverksförfrågningar graciöst
Objektdestrukturering för att extrahera specifik data från API-svar
Metodkedjning för flera DOM-manipulationer

✅ Denna funktion demonstrerar flera viktiga webbutvecklingskoncept - kommunikation med externa servrar, hantering av autentisering, bearbetning av data, uppdatering av gränssnitt och hantering av fel graciöst. Dessa är grundläggande färdigheter som professionella utvecklare använder regelbundet.

🎉 Vad du har åstadkommit: Du har skapat ett webbläsartillägg som:

Kopplar till internet och hämtar verklig miljödata
Består användarinställningar mellan sessioner
Hantera fel graciöst istället för att krascha
Tillhandahåller en smidig, professionell användarupplevelse

Testa ditt arbete genom att köra npm run build och uppdatera ditt tillägg i webbläsaren. Du har nu en fungerande spårare för koldioxidavtryck. Nästa lektion kommer att lägga till dynamisk ikonfunktionalitet för att slutföra tillägget.

GitHub Copilot Agent-utmaning 🚀

Använd Agent-läget för att slutföra följande utmaning:

Beskrivning: Förbättra webbläsartillägget genom att lägga till förbättringar för felhantering och användarupplevelsefunktioner. Denna utmaning hjälper dig att öva på att arbeta med API:er, lokal lagring och DOM-manipulation med moderna JavaScript-mönster.

Uppmaning: Skapa en förbättrad version av funktionen displayCarbonUsage som inkluderar: 1) En återförsöksmekanism för misslyckade API-anrop med exponentiell backoff, 2) Inmatningsvalidering för regionskoden innan API-anropet görs, 3) En laddningsanimation med progressindikatorer, 4) Caching av API-svar i lokal lagring med utgångstidsstämplar (cache i 30 minuter), och 5) En funktion för att visa historiska data från tidigare API-anrop. Lägg också till korrekta TypeScript-stil JSDoc-kommentarer för att dokumentera alla funktionsparametrar och returtyper.

Läs mer om agentläge här.

🚀 Utmaning

Utöka din förståelse för API:er genom att utforska den stora mängden webbläsarbaserade API:er som finns tillgängliga för webbutveckling. Välj en av dessa webbläsar-API:er och bygg en liten demonstration:

Geolocation API - Hämta användarens aktuella plats
Notification API - Skicka skrivbordsnotifikationer
HTML Drag and Drop API - Skapa interaktiva draggränssnitt
Web Storage API - Avancerade tekniker för lokal lagring
Fetch API - Modernt alternativ till XMLHttpRequest

Forskningsfrågor att överväga:

Vilka verkliga problem löser detta API?
Hur hanterar API:et fel och kantfall?
Vilka säkerhetsöverväganden finns vid användning av detta API?
Hur brett stöds detta API i olika webbläsare?

Efter din forskning, identifiera vilka egenskaper som gör ett API utvecklarvänligt och pålitligt.

Efterföreläsningsquiz

Granskning & Självstudier

Du lärde dig om LocalStorage och API:er i denna lektion, båda mycket användbara för den professionella webbutvecklaren. Kan du fundera på hur dessa två saker fungerar tillsammans? Tänk på hur du skulle designa en webbplats som lagrar objekt för att användas av ett API.

Uppgift

Adoptera ett API

Ansvarsfriskrivning:
Detta dokument har översatts med hjälp av AI-översättningstjänsten Co-op Translator. Även om vi strävar efter noggrannhet, bör det noteras att automatiserade översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess originalspråk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.

19 KiB Raw Blame History