Roberto Pauletto
4 years ago
parent
26be12a92e
commit
a3e1808509
@ -0,0 +1,170 @@
|
||||
# Progetto di Estensione del Browser Parte 1: Tutto sui Browser
|
||||
|
||||
|
||||
> Sketchnote di [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
|
||||
|
||||
## Quiz Pre-Lezione
|
||||
|
||||
[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/23)
|
||||
|
||||
### Introduzione
|
||||
|
||||
Le estensioni del browser aggiungono funzionalità a un browser. Ma prima di crearne una, si dovrebbe imparare qualcosa su come i browser svolgono il loro lavoro.
|
||||
|
||||
### Informazioni sul browser
|
||||
|
||||
In questa serie di lezioni si imparerà come creare un'estensione per il browser che funzionerà con i browser Chrome, Firefox ed Edge. In questa parte si scoprirà come funzionano i browser e come impacchettare gli elementi dell'estensione del browser.
|
||||
|
||||
Ma cos'è esattamente un browser? È un'applicazione software che consente a un utente finale di accedere ai contenuti da un server e visualizzarli su pagine web.
|
||||
|
||||
✅ Un po' di storia: il primo browser si chiamava "WorldWideWeb" ed fu creato da Sir Timothy Berners-Lee nel 1990.
|
||||
|
||||
|
||||
> Alcuni dei primi browser, tramite [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
|
||||
|
||||
Quando un utente si connette a Internet utilizzando un indirizzo URL (Uniform Resource Locator), solitamente utilizzando Hypertext Transfer Protocol tramite un indirizzo `http` o `https` , il browser comunica con un server web e recupera una pagina web.
|
||||
|
||||
A questo punto, il motore di rendering del browser la visualizza sul dispositivo dell'utente, che potrebbe essere un telefono cellulare, un desktop o un laptop.
|
||||
|
||||
I browser hanno anche la capacità di memorizzare nella cache il contenuto in modo che non debba essere recuperato dal server ogni volta. Possono registrare la cronologia dell'attività di navigazione di un utente, memorizzare i "cookie", che sono piccoli frammenti di dati che contengono informazioni utilizzate per memorizzare l'attività di un utente e altro ancora.
|
||||
|
||||
Una cosa davvero importante da ricordare sui browser è che non sono tutti uguali! Ogni browser ha i suoi punti di forza e di debolezza e uno sviluppatore web professionista deve capire come far funzionare bene le pagine web su più browser. Ciò include la gestione di piccoli schermi come quelli di un telefono cellulare, così come la gestione di un utente offline.
|
||||
|
||||
Un sito web davvero utile che probabilmente si dovrebbe aggiungere ai preferiti da usare in qualunque browser preferisci è [caniuse.com](https://www.caniuse.com). Quando si creano pagine web, è molto utile utilizzare gli elenchi di tecnologie supportate forniti da caniuse in modo da poter supportare al meglio i propri utenti.
|
||||
|
||||
✅ Come si può sapere quali browser sono più popolari con la base di utenti del proprio sito web? Controllando le analitiche: si possono installare vari pacchetti di analisi come parte del proprio processo di sviluppo web e che evidenzieranno quali browser sono più utilizzati tra i vari browser popolari.
|
||||
|
||||
## Estensioni del browser
|
||||
|
||||
Perché si vorrebbe creare un'estensione per il browser? È una cosa utile da collegare al browser quando si ha bisogno di un rapido accesso ad attività che si tende a ripetere. Ad esempio, se ci si ritrova a dover controllare i colori nelle varie pagine Web con cui si interagisce, si potrebbe installare un'estensione del browser per la selezione dei colori. Se si hanno problemi a ricordare le password, si potrebbe utilizzare un'estensione del browser per la gestione delle password.
|
||||
|
||||
Anche le estensioni del browser sono divertenti da sviluppare. Tendono a gestire un numero finito di compiti che svolgono bene.
|
||||
|
||||
✅ Quali sono le proprie estensioni browser preferite? Quali compiti svolgono?
|
||||
|
||||
### Installazione di estensioni
|
||||
|
||||
Prima di iniziare a creare, si dia un'occhiata al processo di creazione e distribuzione di un'estensione del browser. Mentre ogni browser varia leggermente nel modo in cui gestiscono questa attività, il processo è simile su Chrome e Firefox rispetto a questo esempio su Edge:
|
||||
|
||||
|
||||
|
||||
In sostanza, il processo sarà:
|
||||
|
||||
- creare la propria estensione usando `npm build`
|
||||
- navigare nel browser fino al menu Estensioni utilizzando il pulsante "Impostazioni e altro ancora" (l'icona `...` ) in alto a destra
|
||||
- abilitare la "Modalità sviluppatore" (switch in basso a sinistra), quindi se si tratta di una nuova installazione scegliere `Carica decompresssa` per caricare una nuova estensione dalla sua cartella di compilazione (nel nostro caso è `/dist`)
|
||||
- oppure, fare clic su `Aggiorna` se si sta ricaricando l'estensione già installata
|
||||
|
||||
✅ Queste istruzioni riguardano le estensioni create dallo sviluppatore; per installare le estensioni che sono state rilasciate nello store di estensioni del browser associato a ciascun browser, è necessario accedere a tali [store](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) e installare l'estensione di propria scelta.
|
||||
|
||||
### Si comincia
|
||||
|
||||
Verrè costruita un'estensione del browser che mostra l'impronta di carbonio della propria regione, mostrando l'utilizzo e la fonte di energia. L'estensione avrà un form che raccoglie una chiave API in modo che ai possa accedere all'API di CO2 Signal.
|
||||
|
||||
**Occorrente:**
|
||||
|
||||
- [una chiave API](https://www.co2signal.com/); inserire la propria email nella casella in questa pagina e se ne riceverà una
|
||||
- il [codice della propria regione](http://api.electricitymap.org/v3/zones) corrispondente alla [Electricity Map](https://www.electricitymap.org/map) (a Boston, ad esempio, si utilizza "US-NEISO").
|
||||
- il [codice di partenza](../../start). Scaricare la cartella `start`; si completerà il codice in questa cartella.
|
||||
- [NPM](https://www.npmjs.com) - NPM è uno strumento di gestione dei pacchetti; si installa localmente e i pacchetti elencati nel file `package.json` verranno installati per essere utilizzati dalla propria risorsa web
|
||||
|
||||
✅ Ulteriori informazioni sulla gestione dei pacchetti in questo [eccellente modulo di apprendimento](https://docs.microsoft.com/it-it/learn/modules/create-nodejs-project-dependencies/)
|
||||
|
||||
Ci si prenda un minuto per esaminare la base di codice:
|
||||
|
||||
```
|
||||
dist
|
||||
- | manifest.json (valori predefiniti impostati qui)
|
||||
- | index.html (markup e front-end HTML qui)
|
||||
- | background.js (background JS qui)
|
||||
- | main.js (compilato JS)
|
||||
|
||||
src
|
||||
- | index.js (il proprio codice JS va qui)
|
||||
```
|
||||
|
||||
✅ Una volta che si ha a portata di mano la chiave API e il codice regionale, andranno memorizzati da qualche parte in una nota per un utilizzo futuro.
|
||||
|
||||
### Creare l'HTML per l'estensione
|
||||
|
||||
Questa estensione ha due viste. Una per raccogliere la chiave API e il codice regionale:
|
||||
|
||||
|
||||
|
||||
e la seconda per visualizzare l'utilizzo di carbonio della regione:
|
||||
|
||||
|
||||
|
||||
Si inizia costruendo l'HTML per il form e applicando uno stile con CSS.
|
||||
|
||||
Nella cartella `/dist` si creerà un form e un'area dei risultati. Nel file `index.html` , popolare l'area del form contraddistinta da "<!-- form area -->:
|
||||
|
||||
```HTML
|
||||
<form class="form-data" autocomplete="on">
|
||||
<div>
|
||||
<h2>Nuovo? Aggiungi le tue informazioni</h2>
|
||||
</div>
|
||||
<div>
|
||||
<label for="region">Nome Regione</label>
|
||||
<input type="text" id="region" required class="region-name" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="api">La tua chiave API da tmrow</label>
|
||||
<input type="text" id="api" required class="api-key" />
|
||||
</div>
|
||||
<button class="search-btn">Invia</button>
|
||||
</form>
|
||||
```
|
||||
Questo è il form in cui le proprie informazioni recuperate verranno inserite e salvate nella memoria locale del browser (local storage)
|
||||
|
||||
Successivamente, creare l'area dei risultati; sotto il tag di chiusura del form, dopo '<!-- result area --> aggiungere alcuni div:
|
||||
|
||||
```HTML
|
||||
<div class="result">
|
||||
<div class="loading">caricamento...</div>
|
||||
<div class="errors"></div>
|
||||
<div class="data"></div>
|
||||
<div class="result-container">
|
||||
<p><strong>Regione: </strong><span class="my-region"></span></p>
|
||||
<p><strong>Utilizzo Carbonio: </strong><span class="carbon-usage"></span></p>
|
||||
<p><strong>Percentuale di Combustibile Fossile: </strong><span class="fossil-fuel"></span></p>
|
||||
</div>
|
||||
<button class="clear-btn">Cambia regione</button>
|
||||
</div>
|
||||
```
|
||||
A questo punto, si può provare una compilazione. Assicurarsi di installare le dipendenze del pacchetto di questa estensione:
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
Questo comando utilizzerà npm, il Node Package Manager, per installare webpack per il processo di compilazione dell'estensione. Webpack è un *bundler* che gestisce la compilazione del codice (un *bundler* è uno strumento che prande pezzi di codice javascript e dipendenze e li raggruppa in un unico file che verrà in genere usato nel browser - n.d.t.). Si può vedere l'output di questo processo guardando in `/dist/main.js -` si vede che il codice è stato raggruppato.
|
||||
|
||||
Per ora, l'estensione dovrebbe essere compilata e, se la si distribuisce in Edge come estensione, si vedrebbe un form ben disposto.
|
||||
|
||||
Congratulazioni, si sono compiuti i primi passi verso la creazione di un'estensione per il browser. Nelle lezioni successive verrà resa più funzionale e utile.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Sfida
|
||||
|
||||
Si dia un'occhiata alle estensioni del browser in uno store e se ne installi una nel proprio browser. Si possono esaminare i suoi file in modi interessanti. Cosa si è scoperto?
|
||||
|
||||
## Quiz Post-Lezione
|
||||
|
||||
[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/24)
|
||||
|
||||
## Revisione e Auto Apprendimento
|
||||
|
||||
In questa lezione si è imparato qualcosa sulla storia del browser web; si colga l'occasione per informarsi su come gli inventori del World Wide Web ne immaginavano l'uso leggendo di più sulla sua storia. Alcuni siti utili includono:
|
||||
|
||||
[La storia dei browser web](https://www.mozilla.org/it/firefox/browsers/browser-history/)
|
||||
|
||||
[Storia del web (in inglese)](https://webfoundation.org/about/vision/history-of-the-web/)
|
||||
|
||||
[Un'intervista con Tim Berners-Lee (in inglese)](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
|
||||
|
||||
## Compito
|
||||
|
||||
[Restyling dell'estensione](assignment.it.md)
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
# Restyling dell'estensione
|
||||
|
||||
## Istruzioni
|
||||
|
||||
Il base di odice per questa estensione è completa di stili, ma non è necessario utilizzarli; personalizzare la propria estensione modificandone il file css.
|
||||
|
||||
## Rubrica
|
||||
|
||||
| Criteri | Ottimo | Adeguato | Necessita miglioramento |
|
||||
| -------- | -------------------------------------------- | --------------------- | ----------------- |
|
||||
| | Il codice viene presentato con nuovi stili funzionali | Lo stile è incompleto | Gli stili sono difettosi |
|
||||
@ -0,0 +1,226 @@
|
||||
# Progetto di Estensione del Browser Parte 2: Chiamare un'API, utilizzare Local Storage
|
||||
|
||||
## Quiz Pre-Lezione
|
||||
|
||||
[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/25)
|
||||
|
||||
### Introduzione
|
||||
|
||||
In questa lezione, si chiamerà un'API inviando il form dell'estensione del browser e si visualizzeranno i risultati nell'estensione del browser. Inoltre, si imparerà come archiviare i dati nella memoria locale del browser per riferimento e utilizzo futuri.
|
||||
|
||||
✅ Seguire i segmenti numerati nei file appropriati per sapere dove posizionare il codice
|
||||
|
||||
### Impostare gli elementi da manipolare nell'estensione:
|
||||
|
||||
A questo punto è stato creato l'HTML per il form e i risultati `<div>` per l'estensione del browser. D'ora in poi, si dovrà lavorare nel file `/src/index.js` e costruire la propria estensione un po 'alla volta. Si faccia riferimento alla [lezione precedente](../../1-about-browsers/translations/README.it.md) su come impostare il progetto e sul processo di compilazione.
|
||||
|
||||
Lavorando nel file `index.js` , si inizia creando alcune variabili `const` per contenere i valori associati ai vari campi:
|
||||
|
||||
```JavaScript
|
||||
// campi del form
|
||||
const form = document.querySelector('.form-data');
|
||||
const region = document.querySelector('.region-name');
|
||||
const apiKey = document.querySelector('.api-key');
|
||||
|
||||
// risultati
|
||||
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');
|
||||
```
|
||||
|
||||
Tutti questi campi sono referenziati dalla loro classe CSS, così come è stata impostata nell'HTML nella lezione precedente.
|
||||
|
||||
### Aggiungere event listener
|
||||
|
||||
Successivamente, andranno aggiungi gli event listener al form e il pulsante di cancellazione che reimposta il form, in modo che se un utente invia il form o fa clic su quel pulsante di ripristino, accadrà qualcosa; aggiungere la chiamata per inizializzare l'app alla fine del file:
|
||||
|
||||
```JavaScript
|
||||
form.addEventListener('submit', (e) => handleSubmit(e));
|
||||
clearBtn.addEventListener('click', (e) => reset(e));
|
||||
init();
|
||||
```
|
||||
|
||||
✅ Notare l'abbreviazione utilizzata per ascoltare un evento submit o click e come l'evento viene passato alle funzioni handleSubmit o reset. Si può scrivere l'equivalente di questa scorciatoia in un formato più lungo? Quale si preferisce?
|
||||
|
||||
### Costruire la funzione init() e la funzione reset():
|
||||
|
||||
Ora si creerà la funzione che inizializza l'estensione, che si chiama init():
|
||||
|
||||
```JavaScript
|
||||
function init() {
|
||||
//se c'è qulacosa in localStorage si recupera
|
||||
const storedApiKey = localStorage.getItem('apiKey');
|
||||
const storedRegion = localStorage.getItem('regionName');
|
||||
|
||||
//imposta icona a un verde generico
|
||||
//da fare
|
||||
|
||||
if (storedApiKey === null || storedRegion === null) {
|
||||
//se non si hanno le chiavi si mostra il form
|
||||
form.style.display = 'block';
|
||||
results.style.display = 'none';
|
||||
loading.style.display = 'none';
|
||||
clearBtn.style.display = 'none';
|
||||
errors.textContent = '';
|
||||
} else {
|
||||
//se si sono salvate chiave/regioni in localStorage, si mostrano i risultati al caricamento
|
||||
displayCarbonUsage(storedApiKey, storedRegion);
|
||||
results.style.display = 'none';
|
||||
form.style.display = 'none';
|
||||
clearBtn.style.display = 'block';
|
||||
}
|
||||
};
|
||||
|
||||
function reset(e) {
|
||||
e.preventDefault();
|
||||
//pulisce local storage solo per la regione
|
||||
localStorage.removeItem('regionName');
|
||||
init();
|
||||
}
|
||||
|
||||
```
|
||||
In questa funzione c'è una logica interessante. Leggendola, si riesce a vedere cosa succede?
|
||||
|
||||
- due `const` vengono impostate per verificare se l'utente ha memorizzato una chiave APIKey e il codice regionale nella memoria del browser.
|
||||
- se uno di queste è nullo, si mostra il form cambiando il suo stile in modo che venga visualizzato come blocco
|
||||
- nascondere i div che mostrano risultati, caricamento e il pulsante clearBtn e impostare qualsiasi testo di errore su una stringa vuota
|
||||
- se esiste una chiave e una regione, avviare una routine per:
|
||||
- chiamare l'API per ottenere i dati sull'utilizzo del carbonio
|
||||
- nascondere l'area dei risultati
|
||||
- nascondere il form
|
||||
- mostrare il pulsante di reset
|
||||
|
||||
Prima di proseguire, è utile conoscere un concetto molto importante disponibile nei browser: [LocalStorage](https://developer.mozilla.org/it/docs/Web/API/Window/localStorage). LocalStorage è un modo utile per memorizzare le stringhe nel browser come coppia `chiave-valore` . Questo tipo di archiviazione web può essere manipolato da JavaScript per gestire i dati nel browser. LocalStorage non scade, mentre il contenuto di SessionStorage, un altro tipo di archiviazione web, viene cancellato alla chiusura del browser. I vari tipi di archiviazione hanno vantaggi e svantaggi per il loro utilizzo.
|
||||
|
||||
> Nota: l'estensione del browser ha la propria memoria locale; la finestra principale del browser è un'istanza diversa e si comporta separatamente.
|
||||
|
||||
Ad esempio, si può impostare il proprio apiKey in modo che abbia un valore di stringa e si può vedere come è impostato su Edge "ispezionando" una pagina web (si può fare clic con il pulsante destro del mouse sul browser per farlo) e andando alla scheda Applicazioni per vedere il i dati di conservazione.
|
||||
|
||||
|
||||
|
||||
✅ Si pensi a situazioni in cui NON si vorrebbero memorizzare alcuni dati in LocalStorage. In generale, posizionare le chiavi API in LocalStorage è una cattiva idea! Si può intuire perché? In questo caso, poiché l'app è esclusivamente per l'apprendimento e non verrà distribuita in un app store, si utilizzerà questo metodo.
|
||||
|
||||
Si noti che si utilizza l'API Web per manipolare LocalStorage, utilizzando `getItem()`, `setItem()` o `removeItem()`. È ampiamente supportata sui vari tipi di browser.
|
||||
|
||||
Prima di costruire la funzione `displayCarbonUsage()` chiamata in `init()`, si costruirà la funzionalità per gestire l'invio iniziale del form.
|
||||
|
||||
### Gestire l'invio del form
|
||||
|
||||
Creare una funzione chiamata `handleSubmit` che accetta un evento come argomento `(e)`. Fermare la propagazione dell'evento (in questo caso, si vuole fermare l'aggiornamento del browser) e chiamare una nuova funzione, `setUpUser`, passando gli argomenti `apiKey.value` e `region.value`. In questo modo, si utilizzano i due valori che vengono inseriti tramite il form iniziale quando vengono compilati i campi appropriati.
|
||||
|
||||
```JavaScript
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
setUpUser(apiKey.value, region.value);
|
||||
}
|
||||
```
|
||||
✅ Per rinfrescarsi la memoria: l'HTML impostato nell'ultima lezione ha due campi di input i cui attributi `value` vengono catturati tramite `const` che si è impostata all'inizio del file e sono entrambi obbligatori (`required`) in modo che il browser impedisca agli utenti di inserire valori nulli.
|
||||
|
||||
### Configurare l'utente
|
||||
|
||||
Passando alla funzione `setUpUser`, qui è dove si impostano i valori di archiviazione locale per apiKey e regionName. Aggiungere una nuova funzione
|
||||
|
||||
```JavaScript
|
||||
function setUpUser(apiKey, regionName) {
|
||||
localStorage.setItem('apiKey', apiKey);
|
||||
localStorage.setItem('regionName', regionName);
|
||||
loading.style.display = 'block';
|
||||
errors.textContent = '';
|
||||
clearBtn.style.display = 'block';
|
||||
//esecuzione della chiamata iniziale
|
||||
displayCarbonUsage(apiKey, regionName);
|
||||
}
|
||||
```
|
||||
Questa funzione imposta un messaggio di caricamento da mostrare mentre viene chiamata l'API. A questo punto si è arrivati a creare la funzione più importante di questa estensione per browser!
|
||||
|
||||
### Visualizzare il consumo di carbonio
|
||||
|
||||
Finalmente è il momento di interrogare l'API!
|
||||
|
||||
Prima di andare oltre, si dovrebbe parlare delle API. Le API, o [Application Programming Interface](https://www.webopedia.com/TERM/A/API.html) (interfacce di programmazione dell'applicazione), sono un elemento critico della cassetta degli attrezzi di uno sviluppatore web. Forniscono modi standard per i programmi per interagire e interfacciarsi tra loro. Ad esempio, se si sta costruendo un sito web che deve interrogare un database, qualcuno potrebbe aver creato un'API da usare. Sebbene esistano molti tipi di API, uno dei tipi più popolari è un' [API REST](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/).
|
||||
|
||||
✅ Il termine "REST" sta per "Representational State Transfer" e prevede l'utilizzo di URL variamente configurati per recuperare dati. Fare una piccola ricerca sui vari tipi di API disponibili per gli sviluppatori. Quale formato piace?
|
||||
|
||||
Ci sono cose importanti da notare su questa funzione. Per prima cosa nota la [parola chiave `async`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function). Scrivere le funzioni in modo che vengano eseguite in modo asincrono significa che attendono il completamento di un'azione, come la restituzione dei dati, prima di continuare.
|
||||
|
||||
Ecco un breve video su `async`:
|
||||
|
||||
[](https://youtube.com/watch?v=YwmlRkrxvkk " gestione di promesse")
|
||||
|
||||
> Fare clic sull'immagine sopra per un video su async/await.
|
||||
|
||||
Creare una nuova funzione per interrogare l'API C02Signal:
|
||||
|
||||
```JavaScript
|
||||
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) + ' grammi (grammi di C02 emessi per kilowatt/ora)';
|
||||
fossilfuel.textContent =
|
||||
response.data.data.fossilFuelPercentage.toFixed(2) +
|
||||
'% (percentuale di combustibile fossile usato per generare elettricità)';
|
||||
results.style.display = 'block';
|
||||
});
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
loading.style.display = 'none';
|
||||
results.style.display = 'none';
|
||||
errors.textContent = 'Spiacente, non ci sono dati per la regione richiesta.';
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Questa è una grande funzione. Cosa sta succedendo qui?
|
||||
|
||||
- seguendo le migliori pratiche, si utilizza la parola chiave `async` per fare in modo che questa funzione si comporti in modo asincrono. La funzione contiene un blocco `try/catch` poiché restituirà una promessa quando l'API restituirà i dati. Poiché non si ha il controllo sulla velocità con cui l'API risponderà (potrebbe non rispondere affatto!), si devi gestire questa incertezza chiamandola in modo asincrono.
|
||||
- si sta interrogando l'API co2signal per ottenere i dati della propria regione, utilizzando la propria chiave API. Per utilizzare quella chiave, si deve utilizzare un tipo di autenticazione nei parametri dell'intestazione della richiesta (header)
|
||||
- una volta che l'API risponde, si assegnano i vari elementi dei suoi dati di risposta alle parti dello schermo che sono state impostate per mostrare questi dati.
|
||||
- se c'è un errore, o se non c'è risultato, viene mostrato un messaggio di errore.
|
||||
|
||||
✅ L'utilizzo di schemi di programmazione asincrona è un altro strumento molto utile nella propria cassetta degli attrezzi. Informarsi [sui vari modi in](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) cui si può configurare questo tipo di codice.
|
||||
|
||||
Complimenti! Se si compila la propria estensione`(npm run build`) e la si aggiorna nel pannello delle estensioni, si avrà un'estensione funzionante! L'unica cosa che non funziona è l'icona, verrà risolto nella prossima lezione.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Sfida
|
||||
|
||||
Finora si è discusso sui diversi tipi di API in queste lezioni. Scegliere un'API web e cercare in profondità cosa offre. Ad esempio, dare un'occhiata alle API disponibili nei browser come l' [API HTML Drag and Drop](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API). Cosa si ritiene renda grande un'API?
|
||||
|
||||
## Quiz Post-Lezione
|
||||
|
||||
[
|
||||
Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/26)
|
||||
|
||||
## Revisione e Auto Apprendimento
|
||||
|
||||
In questa lezione si è imparato a conoscere LocalStorage e le API, entrambi molto utili per lo sviluppatore web professionista. Si riesce a pensare come funzionano queste due cose insieme? Si pensi come progettare un sito web che memorizza gli elementi per essere utilizzati da un'API.
|
||||
|
||||
## Compito
|
||||
|
||||
[Adottare un'API](assignment.it.md)
|
||||
|
||||
|
||||
@ -0,0 +1,11 @@
|
||||
# Adotta un'API
|
||||
|
||||
## Istruzioni
|
||||
|
||||
Le API possono essere molto divertenti per giocarci. Ecco un [elenco di molte libere](https://github.com/public-apis/public-apis). Scegliere un'API e creare un'estensione del browser che risolva un problema. Può essere un piccolo problema come non avere abbastanza foto di animali domestici (quindi, provare la [Dog API di CEO per foto di cani](https://dog.ceo/dog-api/) o qualcosa di più grande: buon divertimento!
|
||||
|
||||
## Rubrica
|
||||
|
||||
| Criteri | Ottimo | Adeguato | Necessita miglioramento |
|
||||
| -------- | -------------------------------------------------------------------------- | ---------------------------------------- | ----------------------- |
|
||||
| | Un'estensione del browser completa viene inviata utilizzando un'API dall'elenco sopra | Viene inviata un'estensione del browser parziale | L'estensione ha dei bug |
|
||||
@ -0,0 +1,161 @@
|
||||
# Progetto di Estensione del Browser Parte 3: Conoscere le attività in background e le prestazioni
|
||||
|
||||
## Quiz Pre-Lezione
|
||||
|
||||
[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/27)
|
||||
|
||||
### Introduzione
|
||||
|
||||
Nelle ultime due lezioni di questo form, si è imparato a creare un form e un'area di visualizzazione per i dati recuperati da un'API. È un modo molto standard per creare presenze web. Si è anche appreso come gestire il recupero dei dati in modo asincrono. L'estensione del browser è quasi completa.
|
||||
|
||||
Restano da gestire alcune attività in background, incluso l'aggiornamento del colore dell'icona dell'estensione, quindi questo è un ottimo momento per parlare di come il browser gestisce questo tipo di attività. Si pensi a queste attività del browser nel contesto delle prestazioni delle proprie risorse web mentre vengono create.
|
||||
|
||||
## Nozioni di base sulle prestazioni web
|
||||
|
||||
> "Le prestazioni del sito web riguardano due cose: la velocità di caricamento della pagina e la velocità di esecuzione del codice su di essa." - [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
|
||||
|
||||
L'argomento su come rendere i propri siti web incredibilmente veloci su tutti i tipi di dispositivi, per tutti i tipi di utenti, in tutti i tipi di situazioni, non sorprende sia vasto. Di seguito sono riportati alcuni punti da tenere a mente quando si crea un progetto web standard o un'estensione del browser.
|
||||
|
||||
La prima cosa da fare per assicurarsi che il proprio sito funzioni in modo efficiente è raccogliere dati sulle sue prestazioni. Il primo posto per farlo è negli strumenti di sviluppo del proprio browser web. In Edge, selezionare il pulsante "Impostazioni e altro ancora" (l'icona dei tre punti in alto a destra nel browser), quindi accedere a Altri strumenti > Strumenti di sviluppo e aprire la scheda Prestazioni. Si può anche utilizzare la scorciatoia da tastiera `Ctrl` + `Maiusc` + `I` su Windows o `Opzione` + `Comando` + `I` su Mac per aprire gli strumenti di sviluppo.
|
||||
|
||||
La scheda Prestazioni contiene uno strumento di profilazione. Aprire un sito web (provare, ad esempio, https://www.microsoft.com) e fare clic sul pulsante "Registra", quindi aggiornare il sito. Interrompendo la registrazione in qualsiasi momento si sarà in grado di vedere le routine generate per "Esecuzione script", "Rendering" e "Disegno" per il sito:
|
||||
|
||||
|
||||
|
||||
✅ Visitare la [documentazione Microsoft](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance) nel pannello Prestazioni in Edge
|
||||
|
||||
> Suggerimento: per ottenere una lettura fedele del tempo di avvio del proprio sito web, svuotare la cache del browser
|
||||
|
||||
Selezionare elementi della sequenza temporale del profilo per ingrandire gli eventi che si verificano durante il caricamento della pagina.
|
||||
|
||||
Ottenere un'istantanea delle prestazioni della propria pagina selezionando una parte della sequenza temporale del profilo e guardando il riquadro di riepilogo:
|
||||
|
||||
|
||||
|
||||
Controllare il riquadro "Registro Eventi" per vedere se un evento ha richiesto più di 15 ms:
|
||||
|
||||
|
||||
|
||||
✅ Conoscere il propro profilatore! Aprire gli strumenti di sviluppo su questo sito e verificare se ci sono colli di bottiglia. Qual è la risorsa a caricamento più lento? La più veloce?
|
||||
|
||||
## Controlli di profilazione
|
||||
|
||||
In generale ci sono alcune "aree problematiche" che ogni sviluppatore web dovrebbe tenere d'occhio durante la costruzione di un sito, in modo da evitare brutte sorprese quando è il momento di distribuire in produzione.
|
||||
|
||||
**Dimensioni delle risorse**: negli ultimi anni il Web è diventato "più pesante" e quindi più lento. Parte di questo peso ha a che fare con l'uso delle immagini.
|
||||
|
||||
✅ Cercare in [Internet Archive](https://httparchive.org/reports/page-weight) una visualizzazione storica del peso della pagina e altro ancora.
|
||||
|
||||
Una buona pratica è garantire che le proprie immagini siano ottimizzate, distribuite con le dimensioni e la risoluzione giuste per i propri utenti.
|
||||
|
||||
**Attraversamenti DOM**: il browser deve costruire il suo Document Object Model in base al codice che si scrive, quindi è nell'interesse di una buona prestazione della pagina mantenere i propri tag minimi, usando e disegnando solo ciò di cui la pagina ha bisogno. A questo punto si potrebbe ottimizzare il CSS in eccesso associato a una pagina; gli stili che devono essere utilizzati solo su una pagina non devono essere inclusi nel foglio di stile principale, ad esempio.
|
||||
|
||||
**JavaScript**: ogni sviluppatore JavaScript dovrebbe controllare che gli script che bloccano il rendering siano caricati prima che il resto del DOM possa essere attraversato e visualizzato nel browser. Si consideri l'idea di utilizzare `defer` con i propri script inline (come è stato fatto nel modulo Terrario).
|
||||
|
||||
✅ Provare alcuni siti su un [sito web che verifica la velocità](https://www.webpagetest.org/) dei siti per ulteriori informazioni sui controlli comuni eseguiti per determinare le prestazioni del sito.
|
||||
|
||||
Ora che si ha un'idea di come il browser esegue il rendering delle risorse che gli vengono inviate, si darà un'occhiata alle ultime cose da fare per completare la propria estensione:
|
||||
|
||||
### Creare una funzione per calcolare il colore
|
||||
|
||||
Lavorando in `/src/index.js`, aggiungere una funzione chiamata `calcolateColor()` dopo la serie di variabili `const` impostate per ottenere l'accesso a elementi del DOM:
|
||||
|
||||
```JavaScript
|
||||
function calculateColor(value) {
|
||||
let co2Scale = [0, 150, 600, 750, 800];
|
||||
let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
|
||||
|
||||
let closestNum = co2Scale.sort((a, b) => {
|
||||
return Math.abs(a - value) - Math.abs(b - value);
|
||||
})[0];
|
||||
console.log(value + ' is closest to ' + closestNum);
|
||||
let num = (element) => element > closestNum;
|
||||
let scaleIndex = co2Scale.findIndex(num);
|
||||
|
||||
let closestColor = colors[scaleIndex];
|
||||
console.log(scaleIndex, closestColor);
|
||||
|
||||
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
|
||||
}
|
||||
```
|
||||
|
||||
Cosa sta succedendo qui? Si passa un valore (l'intensità di carbonio) dalla chiamata API completata nell'ultima lezione, quindi si calcola quanto è vicino il suo valore all'indice presentato nell'array colors. Quindi si invia il valore di colore più vicino al runtime di chrome.
|
||||
|
||||
chrome.runtime ha [un'API](https://developer.chrome.com/extensions/runtime) che gestisce tutti i tipi di attività in background e l'estensione sta facendo leva su questo:
|
||||
|
||||
> "Utilizzare l'API chrome.runtime per recuperare la pagina in background, restituire dettagli sul manifest e ascoltare e rispondere agli eventi nel ciclo di vita dell'app o dell'estensione. Si può anche utilizzare questa API per convertire il percorso relativo degli URL in percorsi URL completi ".
|
||||
|
||||
✅ Se si sta sviluppando questa estensione del browser per Edge, potrebbe sorprendere che si sta utilizzando un'API chrome. Le versioni più recenti del browser Edge vengono eseguite sul motore del browser Chromium, quindi si possono sfruttare questi strumenti.
|
||||
|
||||
> Nota, se si desidera profilare un'estensione del browser, avviare gli strumenti di sviluppo dall'interno dell'estensione stessa, poiché si tratta di un'istanza del browser separata.
|
||||
|
||||
### Impostare un colore predefinito per l'icona
|
||||
|
||||
Ora, nella funzione `init()` , impostare l'icona come verde generico per iniziare di nuovo chiamando l'azione `updateIcon` di chrome:
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.sendMessage({
|
||||
action: 'updateIcon',
|
||||
value: {
|
||||
color: 'green',
|
||||
},
|
||||
});
|
||||
```
|
||||
### Chiamare la funzione, eseguire la chiamata
|
||||
|
||||
Successivamente chiamare la funzione appena creata aggiungendola alla promessa restituita dall'API C02Signal:
|
||||
|
||||
```JavaScript
|
||||
//let CO2...
|
||||
calculateColor(CO2);
|
||||
```
|
||||
|
||||
Infine, in `/dist/background.js,`aggiungere l'event listener per queste chiamate di azione in background:
|
||||
|
||||
```JavaScript
|
||||
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
|
||||
if (msg.action === 'updateIcon') {
|
||||
chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) });
|
||||
}
|
||||
});
|
||||
//presa in presito dall'estensione energy lollipop, simpatiica funzionalità!
|
||||
function drawIcon(value) {
|
||||
let canvas = document.createElement('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
|
||||
context.beginPath();
|
||||
context.fillStyle = value.color;
|
||||
context.arc(100, 100, 50, 0, 2 * Math.PI);
|
||||
context.fill();
|
||||
|
||||
return context.getImageData(50, 50, 100, 100);
|
||||
}
|
||||
```
|
||||
In questo codice, si sta aggiungendo un listener per tutti i messaggi che arrivano al gestore di attività di backend. Se questo messaggio si chiama 'updateIcon', viene eseguito il codice successivo per disegnare un'icona del colore corretto utilizzando l'API Canvas.
|
||||
|
||||
✅ Si Imparerà di più sull'API Canvas nelle [lezioni di Gioco Spaziale](../../../6-space-game/2-drawing-to-canvas/translations/README.it.md).
|
||||
|
||||
Ora, ricompilare l'estensione (`npm run build`), aggiornare e avviare l'estensione e verificare il cambio di colore. È un buon momento per fare una commissione o lavare i piatti? Ecco, adesso è noto, non ci sono più scuse!
|
||||
|
||||
Congratulazioni, è stata creata un'utile estensione per il browser e si è imparato di più su come funziona il browser e su come profilarne le prestazioni.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Sfida
|
||||
|
||||
Esaminare alcuni siti web open source che esistono da molto tempo e, in base alla loro cronologia GitHub, vedere se si riesce a determinare come sono stati ottimizzate nel corso degli anni le prestazioni, se non del tutto. Qual è il punto dolente più comune?
|
||||
|
||||
## Quiz Post-Lezione
|
||||
|
||||
[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/28)
|
||||
|
||||
## Revisione e Auto Apprendimento
|
||||
|
||||
Considerare l'idea di iscriversi a una [newsletter sulle prestazioni](https://perf.email/)
|
||||
|
||||
Analizzare alcuni dei modi in cui i browser misurano le prestazioni web esaminando le schede delle prestazioni nei loro strumenti web. Si sono riscontrate differenze importanti?
|
||||
|
||||
## Compito
|
||||
|
||||
[Analizzare un sito per le prestazioni](assignment.it.md)
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
# Analizzare un sito per le prestazioni
|
||||
|
||||
Fornire un rapporto dettagliato di un sito Web, mostrando le aree in cui le prestazioni sono problematiche. Analizzare perché il sito è lento e cosa si potrebbe fare per velocizzarlo. Non fare affidamento solo sugli strumenti del browser, ma fare qualche ricerca su altri strumenti che possono aiutare la stesura del rapporto
|
||||
|
||||
## Rubrica
|
||||
|
||||
| Criteri | Ottimo | Adeguato | Necessita miglioramento |
|
||||
| -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
|
||||
| | Viene presentato un rapporto con i dettagli tratti non solo dagli strumenti del browser ma anche da strumenti di terze parti, se disponibili | Viene presentato un rapporto di base | Viene presentato un rapporto minimo |
|
||||
@ -1,4 +1,4 @@
|
||||
//add listener here
|
||||
//aggiungere qui il listener
|
||||
|
||||
//borrowed from energy lollipop extension
|
||||
//draw the icon here
|
||||
//presa in prestito dall'estensione energy lollipop
|
||||
//disegnare qui l'icona
|
||||
|
||||
@ -1,22 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>My Carbon Trigger</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
|
||||
<body class="container">
|
||||
<img alt="plants and people" src="images/plants-people.png" />
|
||||
<div>
|
||||
<h1>Welcome to Your Personal Carbon Trigger!</h1>
|
||||
</div>
|
||||
<!--form area-->
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>Il mio Rilevatore di Carbonio</title>
|
||||
<link rel="stylesheet" href="./styles.css" />
|
||||
</head>
|
||||
|
||||
<!--result area-->
|
||||
<body class="container">
|
||||
<img alt="plants and people" src="images/plants-people.png" />
|
||||
<div>
|
||||
<h1>Benvenuto al Tuo Rilevatore di Carbonio Personale!</h1>
|
||||
</div>
|
||||
<!--form area-->
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
<!--result area-->
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,17 +1,17 @@
|
||||
//1
|
||||
// form fields
|
||||
// results divs
|
||||
// campi del form
|
||||
// risultati
|
||||
|
||||
//6
|
||||
//call the API
|
||||
//chiamata API
|
||||
|
||||
//5
|
||||
//set up user's api key and region
|
||||
//imposta la chiave api e la regione per l'utente
|
||||
|
||||
//4
|
||||
// handle form submission
|
||||
// gestisce l'invio del form
|
||||
|
||||
//3 initial checks
|
||||
//3 controlli iniziali
|
||||
|
||||
//2
|
||||
// set listeners and start app
|
||||
// imposta i listeners e la partenza dell'app
|
||||
|
||||
@ -0,0 +1,28 @@
|
||||
# Estensione del browser Carbon Trigger: codice per partire
|
||||
|
||||
Si utilizzerà l'API Signal C02 di tmrow per monitorare l'utilizzo dell'elettricità per creare un'estensione per il browser in modo da poter avere un promemoria direttamente nel proprio browser su quanto sia pesante l'utilizzo di elettricità nella propria regione. L'utilizzo di questa estensione ad hoc aiuterà a valutare le proprie attività in base a queste informazioni.
|
||||
|
||||
|
||||
|
||||
## Per Iniziare
|
||||
|
||||
E' necessario che [npm](https://npmjs.com) sia installato. Scaricare una copia di questo codice in una cartella del proprio computer.
|
||||
|
||||
Installare tutti i pacchetti richiesti:
|
||||
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
Creare l'estensione da webpack
|
||||
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
Per installare su Edge, utilizzare il menu "tre punti" nell'angolo in alto a destra del browser per trovare il pannello Estensioni. Se non già attiva, attivare la Modalità sviluppatore (in basso a sinistra). Selezionare "Carica decompressa" per caricare una nuova estensione. Aprire la cartella "dist" al prompt e l'estensione verrà caricata. Per usarla, si avrà bisogno di una chiave API per l'API di CO2 Signal (si può[ ottenere qui via e-mail](https://www.co2signal.com/) - inserire la propria e-mail nella casella in questa pagina) e il [codice per la propria regione](http://api.electricitymap.org/v3/zones) corrispondente alla [mappa elettrica](https://www.electricitymap.org/map) (a Boston, ad esempio, "US-NEISO").
|
||||
|
||||
|
||||
|
||||
Una volta che la chiave API e la regione sono state inserite nell'interfaccia dell'estensione, il punto colorato nella barra dell'estensione del browser dovrebbe cambiare per riflettere l'utilizzo di energia della regione e fornire un puntatore su quali attività ad alto consumo energetico sarebbero appropriate da eseguire. Il concetto alla base di questo sistema a "punti" è stato fornito dall' [estensione Energy Lollipop](https://energylollipop.com/) per le emissioni della California.
|
||||
|
||||
Loading…
Reference in new issue