20 KiB

Raw Permalink Blame History Unescape Escape

Έργο Επέκτασης Περιηγητή Μέρος 2: Κλήση API, χρήση Τοπικής Αποθήκευσης

Κουίζ πριν το μάθημα

Εισαγωγή

Σε αυτό το μάθημα, θα καλέσετε ένα API υποβάλλοντας τη φόρμα της επέκτασης του περιηγητή σας και θα εμφανίσετε τα αποτελέσματα στην επέκταση. Επιπλέον, θα μάθετε πώς μπορείτε να αποθηκεύσετε δεδομένα στην τοπική αποθήκευση του περιηγητή σας για μελλοντική αναφορά και χρήση.

✅ Ακολουθήστε τα αριθμημένα τμήματα στα κατάλληλα αρχεία για να ξέρετε πού να τοποθετήσετε τον κώδικά σας.

Ρύθμιση στοιχείων για χειρισμό στην επέκταση:

Μέχρι τώρα έχετε δημιουργήσει το HTML για τη φόρμα και το <div> των αποτελεσμάτων για την επέκταση του περιηγητή σας. Από εδώ και στο εξής, θα χρειαστεί να εργαστείτε στο αρχείο /src/index.js και να χτίσετε την επέκτασή σας βήμα-βήμα. Ανατρέξτε στο προηγούμενο μάθημα για να ρυθμίσετε το έργο σας και να μάθετε για τη διαδικασία δημιουργίας.

Εργαζόμενοι στο αρχείο index.js, ξεκινήστε δημιουργώντας κάποιες μεταβλητές const για να κρατήσετε τις τιμές που σχετίζονται με διάφορα πεδία:

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

Όλα αυτά τα πεδία αναφέρονται από την css κλάση τους, όπως τα ορίσατε στο HTML στο προηγούμενο μάθημα.

Προσθήκη ακροατών

Στη συνέχεια, προσθέστε ακροατές συμβάντων στη φόρμα και στο κουμπί εκκαθάρισης που επαναφέρει τη φόρμα, ώστε αν ένας χρήστης υποβάλει τη φόρμα ή κάνει κλικ στο κουμπί εκκαθάρισης, να συμβεί κάτι, και προσθέστε την κλήση για την αρχικοποίηση της εφαρμογής στο τέλος του αρχείου:

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

✅ Παρατηρήστε τη συντομογραφία που χρησιμοποιείται για την ακρόαση ενός συμβάντος υποβολής ή κλικ και πώς το συμβάν περνάει στις συναρτήσεις handleSubmit ή reset. Μπορείτε να γράψετε το ισοδύναμο αυτής της συντομογραφίας σε μεγαλύτερη μορφή; Ποια προτιμάτε;

Δημιουργία της συνάρτησης init() και reset():

Τώρα θα δημιουργήσετε τη συνάρτηση που αρχικοποιεί την επέκταση, η οποία ονομάζεται 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();
}

Σε αυτή τη συνάρτηση, υπάρχει κάποια ενδιαφέρουσα λογική. Διαβάζοντάς την, μπορείτε να δείτε τι συμβαίνει;

Δύο const ορίζονται για να ελέγξουν αν ο χρήστης έχει αποθηκεύσει ένα APIKey και έναν κωδικό περιοχής στην τοπική αποθήκευση.
Αν κάποιο από αυτά είναι null, εμφανίστε τη φόρμα αλλάζοντας το στυλ της σε 'block'.
Κρύψτε τα αποτελέσματα, το φόρτωμα και το clearBtn και ορίστε οποιοδήποτε κείμενο σφάλματος σε κενή συμβολοσειρά.
Αν υπάρχει κλειδί και περιοχή, ξεκινήστε μια ρουτίνα για:
- Κλήση του API για λήψη δεδομένων κατανάλωσης άνθρακα.
- Απόκρυψη της περιοχής αποτελεσμάτων.
- Απόκρυψη της φόρμας.
- Εμφάνιση του κουμπιού επαναφοράς.

Πριν προχωρήσετε, είναι χρήσιμο να μάθετε για μια πολύ σημαντική έννοια που είναι διαθέσιμη στους περιηγητές: Τοπική Αποθήκευση. Η Τοπική Αποθήκευση είναι ένας χρήσιμος τρόπος αποθήκευσης συμβολοσειρών στον περιηγητή ως ζεύγος κλειδί-τιμή. Αυτός ο τύπος αποθήκευσης ιστού μπορεί να χειριστεί από τη JavaScript για τη διαχείριση δεδομένων στον περιηγητή. Η Τοπική Αποθήκευση δεν λήγει, ενώ η SessionStorage, ένας άλλος τύπος αποθήκευσης ιστού, διαγράφεται όταν κλείνει ο περιηγητής. Οι διάφοροι τύποι αποθήκευσης έχουν πλεονεκτήματα και μειονεκτήματα στη χρήση τους.

Σημείωση - η επέκταση του περιηγητή σας έχει τη δική της τοπική αποθήκευση· το κύριο παράθυρο του περιηγητή είναι διαφορετική περίπτωση και λειτουργεί ξεχωριστά.

Ορίστε το APIKey σας να έχει μια τιμή συμβολοσειράς, για παράδειγμα, και μπορείτε να δείτε ότι έχει οριστεί στον Edge "επιθεωρώντας" μια ιστοσελίδα (μπορείτε να κάνετε δεξί κλικ σε έναν περιηγητή για να επιθεωρήσετε) και πηγαίνοντας στην καρτέλα Εφαρμογές για να δείτε την αποθήκευση.

✅ Σκεφτείτε καταστάσεις όπου ΔΕΝ θα θέλατε να αποθηκεύσετε κάποια δεδομένα στην Τοπική Αποθήκευση. Γενικά, η τοποθέτηση API Keys στην Τοπική Αποθήκευση είναι κακή ιδέα! Μπορείτε να δείτε γιατί; Στην περίπτωσή μας, δεδομένου ότι η εφαρμογή μας είναι καθαρά για μάθηση και δεν θα αναπτυχθεί σε κατάστημα εφαρμογών, θα χρησιμοποιήσουμε αυτή τη μέθοδο.

Παρατηρήστε ότι χρησιμοποιείτε το Web API για να χειριστείτε την Τοπική Αποθήκευση, είτε χρησιμοποιώντας getItem(), setItem(), είτε removeItem(). Υποστηρίζεται ευρέως σε όλους τους περιηγητές.

Πριν δημιουργήσετε τη συνάρτηση displayCarbonUsage() που καλείται στο init(), ας δημιουργήσουμε τη λειτουργικότητα για τη διαχείριση της αρχικής υποβολής φόρμας.

Διαχείριση υποβολής φόρμας

Δημιουργήστε μια συνάρτηση που ονομάζεται handleSubmit που δέχεται ένα όρισμα συμβάντος (e). Σταματήστε τη διάδοση του συμβάντος (σε αυτή την περίπτωση, θέλουμε να σταματήσουμε τον περιηγητή από το να ανανεωθεί) και καλέστε μια νέα συνάρτηση, setUpUser, περνώντας τα ορίσματα apiKey.value και region.value. Με αυτόν τον τρόπο, χρησιμοποιείτε τις δύο τιμές που εισάγονται μέσω της αρχικής φόρμας όταν τα κατάλληλα πεδία είναι συμπληρωμένα.

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

✅ Φρεσκάρετε τη μνήμη σας - το HTML που δημιουργήσατε στο τελευταίο μάθημα έχει δύο πεδία εισαγωγής των οποίων οι τιμές καταγράφονται μέσω των const που ορίσατε στην κορυφή του αρχείου, και είναι και τα δύο απαιτούμενα, ώστε ο περιηγητής να εμποδίζει τους χρήστες από το να εισάγουν κενές τιμές.

Ρύθμιση χρήστη

Προχωρώντας στη συνάρτηση setUpUser, εδώ είναι που ορίζετε τις τιμές τοπικής αποθήκευσης για το apiKey και το regionName. Προσθέστε μια νέα συνάρτηση:

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

Αυτή η συνάρτηση ορίζει ένα μήνυμα φόρτωσης για εμφάνιση ενώ καλείται το API. Σε αυτό το σημείο, έχετε φτάσει στη δημιουργία της πιο σημαντικής συνάρτησης αυτής της επέκτασης περιηγητή!

Εμφάνιση Κατανάλωσης Άνθρακα

Τέλος, ήρθε η ώρα να κάνετε ερώτημα στο API!

Πριν προχωρήσουμε, ας συζητήσουμε για τα APIs. Τα APIs, ή Διεπαφές Προγραμματισμού Εφαρμογών, είναι ένα κρίσιμο στοιχείο στη φαρέτρα ενός προγραμματιστή ιστού. Παρέχουν τυποποιημένους τρόπους για τα προγράμματα να αλληλεπιδρούν και να διασυνδέονται μεταξύ τους. Για παράδειγμα, αν δημιουργείτε έναν ιστότοπο που χρειάζεται να κάνει ερώτημα σε μια βάση δεδομένων, κάποιος μπορεί να έχει δημιουργήσει ένα API για να χρησιμοποιήσετε. Ενώ υπάρχουν πολλοί τύποι APIs, ένας από τους πιο δημοφιλείς είναι ένα REST API.

✅ Ο όρος 'REST' σημαίνει 'Μεταφορά Αναπαραστασιακής Κατάστασης' και περιλαμβάνει τη χρήση διαμορφωμένων URLs για την ανάκτηση δεδομένων. Κάντε λίγη έρευνα για τους διάφορους τύπους APIs που είναι διαθέσιμοι στους προγραμματιστές. Ποια μορφή σας ελκύει;

Υπάρχουν σημαντικά πράγματα που πρέπει να σημειώσετε για αυτή τη συνάρτηση. Πρώτον, παρατηρήστε τη λέξη-κλειδί async. Η συγγραφή των συναρτήσεών σας ώστε να εκτελούνται ασύγχρονα σημαίνει ότι περιμένουν μια ενέργεια, όπως η επιστροφή δεδομένων, να ολοκληρωθεί πριν συνεχίσουν.

Δείτε ένα σύντομο βίντεο για το async:

🎥 Κάντε κλικ στην εικόνα παραπάνω για ένα βίντεο σχετικά με το async/await.

Δημιουργήστε μια νέα συνάρτηση για να κάνετε ερώτημα στο API C02Signal:

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

Αυτή είναι μια μεγάλη συνάρτηση. Τι συμβαίνει εδώ;

Ακολουθώντας τις βέλτιστες πρακτικές, χρησιμοποιείτε τη λέξη-κλειδί async για να κάνετε αυτή τη συνάρτηση να λειτουργεί ασύγχρονα. Η συνάρτηση περιέχει ένα μπλοκ try/catch, καθώς θα επιστρέψει μια υπόσχεση όταν το API επιστρέψει δεδομένα. Επειδή δεν έχετε έλεγχο στην ταχύτητα με την οποία θα απαντήσει το API (μπορεί να μην απαντήσει καθόλου!), πρέπει να χειριστείτε αυτή την αβεβαιότητα καλώντας το ασύγχρονα.
Κάνετε ερώτημα στο API co2signal για να λάβετε δεδομένα της περιοχής σας, χρησιμοποιώντας το API Key σας. Για να χρησιμοποιήσετε αυτό το κλειδί, πρέπει να χρησιμοποιήσετε έναν τύπο αυθεντικοποίησης στις παραμέτρους κεφαλίδας.
Μόλις το API απαντήσει, αναθέτετε διάφορα στοιχεία των δεδομένων απόκρισης στα μέρη της οθόνης που ορίσατε για να εμφανίσετε αυτά τα δεδομένα.
Αν υπάρχει σφάλμα ή αν δεν υπάρχει αποτέλεσμα, εμφανίζετε ένα μήνυμα σφάλματος.

✅ Η χρήση ασύγχρονων προτύπων προγραμματισμού είναι ένα ακόμη πολύ χρήσιμο εργαλείο στη φαρέτρα σας. Διαβάστε για τους διάφορους τρόπους που μπορείτε να διαμορφώσετε αυτόν τον τύπο κώδικα.

Συγχαρητήρια! Αν δημιουργήσετε την επέκτασή σας (npm run build) και την ανανεώσετε στον πίνακα επεκτάσεων, έχετε μια λειτουργική επέκταση! Το μόνο που δεν λειτουργεί είναι το εικονίδιο, και θα το διορθώσετε στο επόμενο μάθημα.

🚀 Πρόκληση

Έχουμε συζητήσει διάφορους τύπους API μέχρι τώρα σε αυτά τα μαθήματα. Επιλέξτε ένα web API και ερευνήστε σε βάθος τι προσφέρει. Για παράδειγμα, ρίξτε μια ματιά στα APIs που είναι διαθέσιμα στους περιηγητές, όπως το HTML Drag and Drop API. Τι κάνει ένα API εξαιρετικό κατά τη γνώμη σας;

Κουίζ μετά το μάθημα

Ανασκόπηση & Αυτομελέτη

Μάθατε για την Τοπική Αποθήκευση και τα APIs σε αυτό το μάθημα, και τα δύο πολύ χρήσιμα για τον επαγγελματία προγραμματιστή ιστού. Μπορείτε να σκεφτείτε πώς αυτά τα δύο πράγματα συνεργάζονται; Σκεφτείτε πώς θα σχεδιάζατε έναν ιστότοπο που θα αποθήκευε αντικείμενα για χρήση από ένα API.

Εργασία

Υιοθετήστε ένα API

Αποποίηση ευθύνης:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI Co-op Translator. Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν σφάλματα ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.

20 KiB Raw Permalink Blame History Unescape Escape