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 class τους, όπως τα ρυθμίσατε στο 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 για λήψη δεδομένων χρήσης άνθρακα.
- Κρύψτε την περιοχή αποτελεσμάτων.
- Κρύψτε τη φόρμα.
- Εμφανίστε το κουμπί επαναφοράς.

Πριν προχωρήσετε, είναι χρήσιμο να μάθετε για μια πολύ σημαντική έννοια που είναι διαθέσιμη στους περιηγητές: Τοπική Αποθήκευση. Η Τοπική Αποθήκευση είναι ένας χρήσιμος τρόπος για να αποθηκεύετε συμβολοσειρές στον περιηγητή ως ζεύγη key-value. Αυτός ο τύπος αποθήκευσης ιστού μπορεί να χειριστεί από τη 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 που δημιουργήσατε στην κορυφή του αρχείου, και είναι και τα δύο απαιτούμενα, ώστε ο περιηγητής να σταματά τους χρήστες από την εισαγωγή null τιμών.

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

Προχωρώντας στη συνάρτηση 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 εξαιρετικό κατά τη γνώμη σας;

Ερωτηματολόγιο μετά το μάθημα

Post-lecture quiz

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

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

Εργασία

Adopt an API

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

20 KiB Raw Permalink Blame History Unescape Escape