12 KiB

Raw Permalink Blame History

Browserudvidelsesprojekt Del 2: Kald en API, brug lokal lagring

Quiz før lektionen

Introduktion

I denne lektion vil du kalde en API ved at indsende din browserudvidelses formular og vise resultaterne i din browserudvidelse. Derudover vil du lære, hvordan du kan gemme data i din browsers lokale lagring til fremtidig reference og brug.

✅ Følg de nummererede segmenter i de relevante filer for at vide, hvor du skal placere din kode.

Opsæt elementerne til manipulation i udvidelsen:

På dette tidspunkt har du opbygget HTML'en til formularen og resultaternes <div> for din browserudvidelse. Fra nu af skal du arbejde i filen /src/index.js og bygge din udvidelse lidt efter lidt. Henvis til den forrige lektion for at få din projektopsætning og byggeprocessen på plads.

Arbejd i din index.js-fil, og start med at oprette nogle const-variabler til at holde værdierne forbundet med forskellige felter:

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

Alle disse felter refereres til via deres CSS-klasse, som du opsatte i HTML'en i den forrige lektion.

Tilføj lyttere

Tilføj derefter event listeners til formularen og nulstillingsknappen, der nulstiller formularen, så hvis en bruger indsender formularen eller klikker på nulstillingsknappen, sker der noget, og tilføj kaldet til at initialisere appen nederst i filen:

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

✅ Bemærk den forkortede metode, der bruges til at lytte efter en submit- eller klikbegivenhed, og hvordan begivenheden sendes til handleSubmit- eller reset-funktionerne. Kan du skrive den længere version af denne forkortelse? Hvilken foretrækker du?

Byg init()-funktionen og reset()-funktionen:

Nu skal du bygge funktionen, der initialiserer udvidelsen, kaldet init():

function init() {
	//if anything is in localStorage, pick it up
	const storedApiKey = localStorage.getItem('apiKey');
	const storedRegion = localStorage.getItem('regionName');

	//set icon to be generic green
	//todo

	if (storedApiKey === null || storedRegion === null) {
		//if we don't have the keys, show the form
		form.style.display = 'block';
		results.style.display = 'none';
		loading.style.display = 'none';
		clearBtn.style.display = 'none';
		errors.textContent = '';
	} else {
        //if we have saved keys/regions in localStorage, show results when they load
        displayCarbonUsage(storedApiKey, storedRegion);
		results.style.display = 'none';
		form.style.display = 'none';
		clearBtn.style.display = 'block';
	}
};

function reset(e) {
	e.preventDefault();
	//clear local storage for region only
	localStorage.removeItem('regionName');
	init();
}

I denne funktion er der noget interessant logik. Når du læser igennem den, kan du se, hvad der sker?

To const oprettes for at kontrollere, om brugeren har gemt en APIKey og regionskode i lokal lagring.
Hvis en af dem er null, vis formularen ved at ændre dens stil til at blive vist som 'block'.
Skjul resultaterne, loading og clearBtn, og sæt eventuel fejltekst til en tom streng.
Hvis der findes en nøgle og region, start en rutine for at:
- Kalde API'en for at få data om kulstofbrug.
- Skjule resultatområdet.
- Skjule formularen.
- Vise nulstillingsknappen.

Før du går videre, er det nyttigt at lære om et meget vigtigt koncept, der er tilgængeligt i browsere: LocalStorage. LocalStorage er en nyttig måde at gemme strenge i browseren som et key-value-par. Denne type webopbevaring kan manipuleres af JavaScript til at administrere data i browseren. LocalStorage udløber ikke, mens SessionStorage, en anden slags webopbevaring, ryddes, når browseren lukkes. De forskellige typer opbevaring har fordele og ulemper ved deres brug.

Bemærk - din browserudvidelse har sin egen lokale lagring; hovedbrowser-vinduet er en anden instans og opfører sig separat.

Du sætter din APIKey til at have en strengværdi, for eksempel, og du kan se, at den er sat i Edge ved at "inspicere" en webside (du kan højreklikke på en browser for at inspicere) og gå til fanen Applications for at se opbevaringen.

✅ Tænk over situationer, hvor du IKKE ville ønske at gemme nogle data i LocalStorage. Generelt er det en dårlig idé at placere APIKeys i LocalStorage! Kan du se hvorfor? I vores tilfælde, da vores app udelukkende er til læring og ikke vil blive udgivet i en app-butik, vil vi bruge denne metode.

Bemærk, at du bruger Web API'en til at manipulere LocalStorage, enten ved at bruge getItem(), setItem() eller removeItem(). Det er bredt understøttet på tværs af browsere.

Før du bygger funktionen displayCarbonUsage(), der kaldes i init(), lad os bygge funktionaliteten til at håndtere den indledende formularindsendelse.

Håndter formularindsendelsen

Opret en funktion kaldet handleSubmit, der accepterer et event-argument (e). Stop begivenheden fra at propagere (i dette tilfælde vil vi stoppe browseren fra at opdatere) og kald en ny funktion, setUpUser, med argumenterne apiKey.value og region.value. På denne måde bruger du de to værdier, der bringes ind via den indledende formular, når de relevante felter er udfyldt.

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

✅ Frisk din hukommelse op - HTML'en, du opsatte i den sidste lektion, har to inputfelter, hvis values fanges via de const, du opsatte øverst i filen, og de er begge required, så browseren stopper brugere fra at indtaste null-værdier.

Opsæt brugeren

Videre til funktionen setUpUser, her sætter du værdier for lokal lagring for apiKey og regionName. Tilføj en ny funktion:

function setUpUser(apiKey, regionName) {
	localStorage.setItem('apiKey', apiKey);
	localStorage.setItem('regionName', regionName);
	loading.style.display = 'block';
	errors.textContent = '';
	clearBtn.style.display = 'block';
	//make initial call
	displayCarbonUsage(apiKey, regionName);
}

Denne funktion viser en loading-besked, mens API'en kaldes. På dette tidspunkt er du nået til at oprette den vigtigste funktion i denne browserudvidelse!

Vis kulstofbrug

Endelig er det tid til at forespørge API'en!

Før vi går videre, bør vi diskutere API'er. API'er, eller Application Programming Interfaces, er et kritisk element i en webudviklers værktøjskasse. De giver standardmåder for programmer at interagere og grænseflade med hinanden. For eksempel, hvis du bygger en hjemmeside, der skal forespørge en database, kan nogen have oprettet en API, du kan bruge. Mens der findes mange typer API'er, er en af de mest populære en REST API.

✅ Udtrykket 'REST' står for 'Representational State Transfer' og indebærer brugen af forskellige konfigurerede URL'er til at hente data. Lav lidt research om de forskellige typer API'er, der er tilgængelige for udviklere. Hvilket format tiltaler dig?

Der er vigtige ting at bemærke om denne funktion. Først, bemærk nøgleordet async. At skrive dine funktioner, så de kører asynkront, betyder, at de venter på en handling, såsom at data returneres, før de fortsætter.

Her er en kort video om async:

🎥 Klik på billedet ovenfor for en video om async/await.

Opret en ny funktion til at forespørge C02Signal API'en:

import axios from '../node_modules/axios';

async function displayCarbonUsage(apiKey, region) {
	try {
		await axios
			.get('https://api.co2signal.com/v1/latest', {
				params: {
					countryCode: region,
				},
				headers: {
					'auth-token': apiKey,
				},
			})
			.then((response) => {
				let CO2 = Math.floor(response.data.data.carbonIntensity);

				//calculateColor(CO2);

				loading.style.display = 'none';
				form.style.display = 'none';
				myregion.textContent = region;
				usage.textContent =
					Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)';
				fossilfuel.textContent =
					response.data.data.fossilFuelPercentage.toFixed(2) +
					'% (percentage of fossil fuels used to generate electricity)';
				results.style.display = 'block';
			});
	} catch (error) {
		console.log(error);
		loading.style.display = 'none';
		results.style.display = 'none';
		errors.textContent = 'Sorry, we have no data for the region you have requested.';
	}
}

Dette er en stor funktion. Hvad sker der her?

I overensstemmelse med bedste praksis bruger du nøgleordet async for at få denne funktion til at opføre sig asynkront. Funktionen indeholder et try/catch-blok, da den vil returnere et løfte, når API'en returnerer data. Fordi du ikke har kontrol over hastigheden, som API'en vil svare med (den kan muligvis slet ikke svare!), skal du håndtere denne usikkerhed ved at kalde den asynkront.
Du forespørger co2signal API'en for at få data om din regions kulstofbrug ved hjælp af din APIKey. For at bruge den nøgle skal du bruge en type autentificering i dine header-parametre.
Når API'en svarer, tildeler du forskellige elementer af dens responsdata til de dele af din skærm, du opsatte til at vise disse data.
Hvis der opstår en fejl, eller hvis der ikke er noget resultat, viser du en fejlmeddelelse.

✅ Brug af asynkrone programmeringsmønstre er et andet meget nyttigt værktøj i din værktøjskasse. Læs om de forskellige måder, du kan konfigurere denne type kode.

Tillykke! Hvis du bygger din udvidelse (npm run build) og opdaterer den i din udvidelsespane, har du en fungerende udvidelse! Det eneste, der ikke fungerer, er ikonet, og det vil du rette i den næste lektion.

🚀 Udfordring

Vi har diskuteret flere typer API'er indtil videre i disse lektioner. Vælg en web-API og undersøg i dybden, hvad den tilbyder. For eksempel, tag et kig på API'er, der er tilgængelige i browsere, såsom HTML Drag and Drop API. Hvad gør en API fantastisk efter din mening?

Quiz efter lektionen

Gennemgang & Selvstudie

Du lærte om LocalStorage og API'er i denne lektion, begge meget nyttige for den professionelle webudvikler. Kan du tænke over, hvordan disse to ting arbejder sammen? Tænk over, hvordan du ville arkitektere en hjemmeside, der gemmer elementer til brug af en API.

Opgave

Adopt an API

Ansvarsfraskrivelse:
Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten Co-op Translator. Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der måtte opstå som følge af brugen af denne oversættelse.

12 KiB Raw Permalink Blame History