diff --git a/.gitignore b/.gitignore index 0a9b4b47..a0625636 100644 --- a/.gitignore +++ b/.gitignore @@ -13,7 +13,7 @@ # User-specific files (MonoDevelop/Xamarin Studio) *.userprefs -# Mono auto generated files +# Mono auto-generated files mono_crash.* # Build results @@ -40,7 +40,7 @@ bld/ dist/ -# Visual Studio 2017 auto generated files +# Visual Studio 2017 auto-generated files Generated\ Files/ # MSTest test Results @@ -354,4 +354,4 @@ MigrationBackup/ .ionide/ # Mac-specific -.DS_Store \ No newline at end of file +.DS_Store diff --git a/1-getting-started-lessons/2-github-basics/README.md b/1-getting-started-lessons/2-github-basics/README.md index 5711fdea..db61b870 100644 --- a/1-getting-started-lessons/2-github-basics/README.md +++ b/1-getting-started-lessons/2-github-basics/README.md @@ -125,7 +125,7 @@ Let's say you have a folder locally with some code project and you want to start 1. **Connect your local Git repo with GitHub**. A Git repo is good on your machine but at some point you want to have backup of your files somewhere and also invite other people to work with you on your repo. One such great place to do so is GitHub. Remember we've already created a repo on GitHub so the only thing we need to do is to connect our local Git repo with GitHub. The command `git remote add` will do just that. Type the following command: - > Note, before you type the command go to your GitHub repo page to find the repository URL. You will use it in the below command. Replace `repository_name` with your GitHub URL. + > Note, before you type the command go to your GitHub repo page to find the repository URL. You will use it in the below command. Replace ```https://github.com/username/repository_name.git``` with your GitHub URL. ```bash git remote add origin https://github.com/username/repository_name.git @@ -134,6 +134,8 @@ Let's say you have a folder locally with some code project and you want to start This creates a _remote_, or connection, named "origin" pointing at the GitHub repository you created earlier. 1. **Send local files to GitHub**. So far you've created a _connection_ between the local repo and the GitHub repo. Let's send these files to GitHub with the following command `git push`, like so: + + > Note, your branch name may be different by default from ```main```. ```bash git push -u origin main @@ -141,7 +143,7 @@ Let's say you have a folder locally with some code project and you want to start This sends your commits in your "main" branch to GitHub. -1. **To add more changes**. If you want to continue making changes and pushing them to GitHub you’ll just need to use the following three commands: +2. **To add more changes**. If you want to continue making changes and pushing them to GitHub you’ll just need to use the following three commands: ```bash git add . diff --git a/5-browser-extension/1-about-browsers/translations/README.fr.md b/5-browser-extension/1-about-browsers/translations/README.fr.md index d6949b8d..13447001 100644 --- a/5-browser-extension/1-about-browsers/translations/README.fr.md +++ b/5-browser-extension/1-about-browsers/translations/README.fr.md @@ -1,4 +1,4 @@ -# Projet d'extension de navigateur Partie 1 : Tout sur les navigateurs +# Projet d'extension de navigateur Partie 1: Tout sur les navigateurs ![Sketchnote sur les navigateurs](/sketchnotes/browser.jpg) > Sketchnote par [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) @@ -15,11 +15,11 @@ Les extensions de navigateur ajoutent des fonctionnalités supplémentaires à u Dans cette série de leçons, vous apprendrez à créer une extension de navigateur qui fonctionnera sur les navigateurs Chrome, Firefox et Edge. Dans cette partie, vous découvrirez le fonctionnement des navigateurs et vous échafauderez les éléments de l'extension de navigateur. -Mais qu'est-ce qu'un navigateur exactement ? Il s'agit d'une application logicielle qui permet à un utilisateur final d'accéder au contenu d'un serveur et de l'afficher sur des pages web. +Mais qu'est-ce qu'un navigateur exactement? Il s'agit d'une application logicielle qui permet à un utilisateur final d'accéder au contenu d'un serveur et de l'afficher sur des pages web. -✅ Un peu d'histoire : le premier navigateur s'appelait "WorldWideWeb" et a été créé par Sir Timothy Berners-Lee en 1990. +✅ Un peu d'histoire: le premier navigateur s'appelait "WorldWideWeb" et a été créé par Sir Timothy Berners-Lee en 1990. -![Les premiers navigateurs](images/earlybrowsers.jpg) +![Les premiers navigateurs](../images/earlybrowsers.jpg) > Certains des premiers navigateurs, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) Lorsqu'un utilisateur se connecte à l'internet en utilisant une adresse URL (Uniform Resource Locator), généralement en utilisant le protocole de transfert hypertexte via une adresse `http` ou `https`, le navigateur communique avec un serveur web et va chercher une page web. @@ -28,34 +28,34 @@ Lorsqu'un utilisateur se connecte à l'internet en utilisant une adresse URL (Un Les navigateurs ont également la capacité de mettre en cache le contenu afin qu'il ne soit pas nécessaire de le récupérer à chaque fois sur le serveur. Ils peuvent enregistrer l'historique de l'activité de navigation d'un utilisateur, stocker des "cookies", qui sont de petits morceaux de données contenant des informations utilisées pour enregistrer l'activité d'un utilisateur, et plus encore. -Une chose très importante à retenir au sujet des navigateurs est qu'ils ne sont pas tous identiques ! Chaque navigateur a ses forces et ses faiblesses, et un développeur web professionnel doit savoir comment faire en sorte que les pages web fonctionnent bien sur plusieurs navigateurs. Cela inclut la gestion des petites fenêtres d'affichage, comme celles des téléphones portables, ainsi que la gestion des utilisateurs hors ligne. +Une chose très importante à retenir au sujet des navigateurs est qu'ils ne sont pas tous identiques! Chaque navigateur a ses forces et ses faiblesses, et un développeur web professionnel doit savoir comment faire en sorte que les pages web fonctionnent bien sur plusieurs navigateurs. Cela inclut la gestion des petites fenêtres d'affichage, comme celles des téléphones portables, ainsi que la gestion des utilisateurs hors ligne. Le site [caniuse.com](https://www.caniuse.com) est un site Web très utile que vous devriez probablement marquer d'un signet dans le navigateur que vous préférez utiliser. Lorsque vous créez des pages Web, il est très utile d'utiliser les listes de technologies prises en charge de caniuse afin d'aider au mieux vos utilisateurs. -✅ Comment pouvez-vous savoir quels sont les navigateurs les plus populaires parmi les utilisateurs de votre site Web ? Vérifiez vos analyses - vous pouvez installer divers progiciels d'analyse dans le cadre de votre processus de développement web, et ils vous indiqueront quels sont les navigateurs les plus utilisés par les différents navigateurs populaires. +✅ Comment pouvez-vous savoir quels sont les navigateurs les plus populaires parmi les utilisateurs de votre site Web? Vérifiez vos analyses - vous pouvez installer divers progiciels d'analyse dans le cadre de votre processus de développement web, et ils vous indiqueront quels sont les navigateurs les plus utilisés par les différents navigateurs populaires. ## Extensions du navigateur -Pourquoi vouloir créer une extension de navigateur ? Il s'agit d'un élément pratique à joindre à votre navigateur lorsque vous avez besoin d'un accès rapide à des tâches que vous avez tendance à répéter. Par exemple, si vous avez besoin de vérifier les couleurs des différentes pages Web avec lesquelles vous interagissez, vous pouvez installer une extension de navigateur permettant de choisir les couleurs. Si vous avez du mal à vous souvenir des mots de passe, vous pouvez utiliser une extension de navigateur pour la gestion des mots de passe. +Pourquoi vouloir créer une extension de navigateur? Il s'agit d'un élément pratique à joindre à votre navigateur lorsque vous avez besoin d'un accès rapide à des tâches que vous avez tendance à répéter. Par exemple, si vous avez besoin de vérifier les couleurs des différentes pages Web avec lesquelles vous interagissez, vous pouvez installer une extension de navigateur permettant de choisir les couleurs. Si vous avez du mal à vous souvenir des mots de passe, vous pouvez utiliser une extension de navigateur pour la gestion des mots de passe. Les extensions de navigateur sont également agréables à développer. Elles ont tendance à gérer un nombre limité de tâches qu'elles exécutent bien. -✅ Quelles sont vos extensions de navigateur préférées ? Quelles sont les tâches qu'elles accomplissent ? +✅ Quelles sont vos extensions de navigateur préférées? Quelles sont les tâches qu'elles accomplissent? ### Installation des extensions -Avant de commencer à construire, jetez un coup d'œil au processus de construction et de déploiement d'une extension de navigateur. Bien que chaque navigateur varie un peu dans la façon dont il gère cette tâche, le processus est similaire sur Chrome et Firefox à cet exemple sur Edge : +Avant de commencer à construire, jetez un coup d'œil au processus de construction et de déploiement d'une extension de navigateur. Bien que chaque navigateur varie un peu dans la façon dont il gère cette tâche, le processus est similaire sur Chrome et Firefox à cet exemple sur Edge: -![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](images/install-on-edge.png) +![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../images/install-on-edge.png) -En substance, le processus sera le suivant : +En substance, le processus sera le suivant: - Construisez votre extension en utilisant `npm run build`. - Naviguez dans le navigateur jusqu'au panneau des extensions en utilisant le bouton "Paramètres et plus" (l'icône `...`) en haut à droite. - s'il s'agit d'une nouvelle installation, choisissez `load unpacked` pour charger une nouvelle extension depuis son dossier de construction (dans notre cas, c'est `/dist`) - ou, cliquez sur `reload` si vous rechargez l'extension déjà installée. -✅ Ces instructions concernent les extensions que vous construisez vous-même ; pour installer des extensions qui ont été publiées dans le magasin d'extension du navigateur associé à chaque navigateur, vous devez vous rendre dans ces [magasins](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) et installer l'extension de votre choix. +✅ Ces instructions concernent les extensions que vous construisez vous-même; pour installer des extensions qui ont été publiées dans le magasin d'extension du navigateur associé à chaque navigateur, vous devez vous rendre dans ces [magasins](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) et installer l'extension de votre choix. ### Commencer @@ -64,14 +64,14 @@ l'API de CO2 Signal. **Vous avez besoin de:** -- [une clé API](https://www.co2signal.com/) ; saisissez votre adresse électronique dans le champ de cette page et une clé vous sera envoyée. +- [une clé API](https://www.co2signal.com/); saisissez votre adresse électronique dans le champ de cette page et une clé vous sera envoyée. - le [code pour votre région](http://api.electricitymap.org/v3/zones) correspondant à la [carte de l'électricité](https://www.electricitymap.org/map) (à Boston, par exemple, j'utilise 'US-NEISO'). -- le [code de démarrage](../start). Téléchargez le dossier `start` ; vous allez compléter le code dans ce dossier. -- [NPM](https://www.npmjs.com) - NPM est un outil de gestion de paquets ; installez-le localement et les paquets listés dans votre fichier `package.json` seront installés pour être utilisés par votre ressource web. +- le [code de démarrage](../../start). Téléchargez le dossier `start`; vous allez compléter le code dans ce dossier. +- [NPM](https://www.npmjs.com) - NPM est un outil de gestion de paquets; installez-le localement et les paquets listés dans votre fichier `package.json` seront installés pour être utilisés par votre ressource web. ✅ Apprenez-en plus sur la gestion des paquets dans cet [excellent module d'apprentissage](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa) -Prenez une minute pour parcourir la base de code : +Prenez une minute pour parcourir la base de code: dist -|manifest.json (les valeurs par défaut sont définies ici) @@ -85,17 +85,17 @@ src ### Construire le HTML pour l'extension -Cette extension a deux vues. L'une pour recueillir la clé API et le code de région : +Cette extension a deux vues. L'une pour recueillir la clé API et le code de région: -![capture d'écran de l'extension terminée ouverte dans un navigateur, affichant un formulaire avec des entrées pour le nom de la région et la clé API](images/1.png) +![capture d'écran de l'extension terminée ouverte dans un navigateur, affichant un formulaire avec des entrées pour le nom de la région et la clé API](../images/1.png) -Et le second pour afficher la consommation de carbone de la région : +Et le second pour afficher la consommation de carbone de la région: -![capture d'écran de l'extension terminée affichant les valeurs d'utilisation du carbone et le pourcentage de combustibles fossiles pour la région US-NEISO](images/2.png) +![capture d'écran de l'extension terminée affichant les valeurs d'utilisation du carbone et le pourcentage de combustibles fossiles pour la région US-NEISO](../images/2.png) Commençons par construire le HTML du formulaire et le styliser avec le CSS. -Dans le dossier `/dist`, vous allez construire un formulaire et une zone de résultat. Dans le fichier `index.html`, remplissez la zone de formulaire délimitée : +Dans le dossier `/dist`, vous allez construire un formulaire et une zone de résultat. Dans le fichier `index.html`, remplissez la zone de formulaire délimitée: ```HTML
@@ -115,7 +115,7 @@ Dans le dossier `/dist`, vous allez construire un formulaire et une zone de rés ``` Il s'agit du formulaire où vos informations enregistrées seront saisies et sauvegardées dans le stockage local. -Ensuite, créez la zone de résultats ; sous la balise de formulaire finale, ajoutez quelques divs : +Ensuite, créez la zone de résultats; sous la balise de formulaire finale, ajoutez quelques divs: ```HTML
@@ -130,7 +130,7 @@ Ensuite, créez la zone de résultats ; sous la balise de formulaire finale, ajo
``` -À ce stade, vous pouvez essayer une construction. Assurez-vous d'installer les dépendances du paquet de cette extension : +À ce stade, vous pouvez essayer une construction. Assurez-vous d'installer les dépendances du paquet de cette extension: ``` npm install @@ -146,7 +146,7 @@ Félicitations, vous avez franchi les premières étapes de la création d'une e ## 🚀 Défi -Jetez un coup d'œil à un magasin d'extensions de navigateur et installez-en une dans votre navigateur. Vous pouvez examiner ses fichiers de manière intéressante. Que découvrez-vous ? +Jetez un coup d'œil à un magasin d'extensions de navigateur et installez-en une dans votre navigateur. Vous pouvez examiner ses fichiers de manière intéressante. Que découvrez-vous? ## Quiz de validation des connaissances @@ -154,7 +154,7 @@ Jetez un coup d'œil à un magasin d'extensions de navigateur et installez-en un ## Révision et étude personnelle -Dans cette leçon, vous en avez appris un peu plus sur l'histoire du navigateur Web; profitez-en pour découvrir comment les inventeurs du World Wide Web envisageaient son utilisation en lisant d'autres documents sur son histoire. Voici quelques sites utiles : +Dans cette leçon, vous en avez appris un peu plus sur l'histoire du navigateur Web; profitez-en pour découvrir comment les inventeurs du World Wide Web envisageaient son utilisation en lisant d'autres documents sur son histoire. Voici quelques sites utiles: [L'histoire des navigateurs Web](https://www.mozilla.org/firefox/browsers/browser-history/) @@ -164,5 +164,5 @@ Dans cette leçon, vous en avez appris un peu plus sur l'histoire du navigateur ## Affectation -[Restylez votre extension](assignment.md) +[Restylez votre extension](assignment.fr.md) diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/README.fr.md b/5-browser-extension/2-forms-browsers-local-storage/translations/README.fr.md new file mode 100644 index 00000000..62693c30 --- /dev/null +++ b/5-browser-extension/2-forms-browsers-local-storage/translations/README.fr.md @@ -0,0 +1,224 @@ +# Projet d'extension de navigateur Partie 2: Appeler une API, utiliser le stockage local + +## Quiz préalable + +[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/25?loc=fr) + +### Introduction + +Dans cette leçon, vous allez appeler une API en soumettant le formulaire de votre extension de navigateur et afficher les résultats dans votre extension. De plus, vous apprendrez comment vous pouvez stocker des données dans le stockage local de votre navigateur pour des références et utilisations futures. + +✅ Suivez les segments numérotés dans les fichiers appropriés pour savoir où placer votre code + +### Paramétrez les éléments à manipuler dans l'extension : + +À ce stade, vous avez créé le code HTML pour le formulaire et les résultats `
` pour l'extension de votre navigateur. A partir de maintenant, vous devrez travailler dans le fichier `/src/index.js` et construire votre extension au fur et à mesure. Reportez-vous à la [leçon précédente](../../1-about-browsers/translations/README.fr.md) sur la configuration de votre projet et sur le processus de génération. + +En travaillant dans votre fichier `index.js`, commencez par créer des variables `const` pour contenir les valeurs associées aux différents champs: + +```JavaScript +// champs de formulaire +const form = document.querySelector('.form-data'); +const region = document.querySelector('.region-name'); +const apiKey = document.querySelector('.api-key'); + +// résultats +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'); +``` + +Tous ces champs sont référencés par leur classe CSS, comme vous l'avez configuré dans le code HTML de la leçon précédente. + +### Ajouter des écouteurs + +Ensuite, ajoutez des écouteurs d'événement au formulaire et le bouton d'effacement qui réinitialise le formulaire, de sorte que si un utilisateur soumet le formulaire ou clique sur ce bouton de réinitialisation, quelque chose se passe, et ajoutez l'appel pour initialiser l'application au bas du fichier: + +```JavaScript +form.addEventListener('submit', (e) => handleSubmit(e)); +clearBtn.addEventListener('click', (e) => reset(e)); +init(); +``` + +✅ Notez le raccourci utilisé pour écouter un événement de soumission ou de clic, et comment l'événement est transmis aux fonctions handleSubmit ou reset. Pouvez-vous écrire l'équivalent de ce raccourci dans un format plus long ? Lequel préfèrez-vous? + +### Construisez la fonction init() et la fonction reset(): + +Vous allez maintenant construire la fonction qui initialise l'extension, qui s'appelle init(): + +```JavaScript +function init() { + //si quelque chose est dans localStorage, choisissez-lep + const storedApiKey = localStorage.getItem('apiKey'); + const storedRegion = localStorage.getItem('regionName'); + + //définir l'icône pour qu'elle soit verte générique + //à faire + + if (storedApiKey === null || storedRegion === null) { + //si nous n'avons pas les clés, montrez le formulaire + form.style.display = 'block'; + results.style.display = 'none'; + loading.style.display = 'none'; + clearBtn.style.display = 'none'; + errors.textContent = ''; + } else { + //si nous avons enregistré des clés/régions dans localStorage, afficher les résultats lorsqu'ils se chargent + displayCarbonUsage(storedApiKey, storedRegion); + results.style.display = 'none'; + form.style.display = 'none'; + clearBtn.style.display = 'block'; + } +}; + +function reset(e) { + e.preventDefault(); + //effacer le stockage local pour la région uniquement + localStorage.removeItem('regionName'); + init(); +} + +``` +Dans cette fonction, il y a une logique intéressante. En le lisant, pouvez-vous voir ce qui se passe? + +- deux `const` sont configurés pour vérifier si l'utilisateur a stocké une APIKey et un code de région dans le stockage local. +- si l'un de ceux-ci est nul, affiche le formulaire en changeant son style pour qu'il s'affiche en tant que 'block' +- masquer les résultats, le chargement et clearBtn et définir tout texte d'erreur sur une chaîne vide +- s'il existe une clé et une région, lancer une routine pour: + - appeler l'API pour obtenir les données d'utilisation du carbone + - masquer la zone de résultats + - masquer le formulaire + - afficher le bouton de réinitialisation + +Avant de continuer, il est utile de se renseigner sur un concept très important disponible dans les navigateurs: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage est un moyen utile de stocker des chaînes dans le navigateur en tant que paire `key-value`. Ce type de stockage Web peut être manipulé par JavaScript pour gérer les données dans le navigateur. LocalStorage n'expire pas, tandis que SessionStorage, un autre type de stockage Web, est effacé lorsque le navigateur est fermé. Les différents types de stockage ont des avantages et des inconvénients à leur utilisation. + +> Remarque - l'extension de votre navigateur dispose de son propre stockage local ; la fenêtre principale du navigateur est une instance différente et se comporte séparément. + +Vous définissez votre APIKey pour qu'elle ait une valeur de chaîne, par exemple, et vous pouvez voir qu'elle est définie sur Edge en "inspectant" une page Web (vous pouvez cliquer avec le bouton droit sur un navigateur pour inspecter) et en accédant à l'onglet Applications pour voir le espace de rangement. + +![Volet de stockage local](../images/localstorage.png) + +✅ Pensez aux situations dans lesquelles vous ne voudriez PAS stocker certaines données dans LocalStorage. En général, placer des clés API dans LocalStorage est une mauvaise idée ! Pouvez-vous voir pourquoi? Dans notre cas, étant donné que notre application est purement destinée à l'apprentissage et ne sera pas déployée dans un magasin d'applications, nous utiliserons cette méthode. + +Notez que vous utilisez l'API Web pour manipuler LocalStorage, soit en utilisant `getItem()`, `setItem()` ou `removeItem()`. Il est largement pris en charge sur tous les navigateurs. + +Avant de développer la fonction `displayCarbonUsage()` qui est appelée dans `init()`, définissons la fonctionnalité pour gérer la soumission initiale du formulaire. + +### Gérer la soumission du formulaire + +Créez une fonction appelée `handleSubmit` qui accepte un argument d'événement `(e)`. Arrêtez la propagation de l'événement (dans ce cas, nous voulons arrêter le rafraîchissement du navigateur) et appelez une nouvelle fonction, `setUpUser`, en passant les arguments `apiKey.value` et `region.value`. De cette façon, vous utilisez les deux valeurs qui sont apportées via le formulaire initial lorsque les champs appropriés sont remplis. + +```JavaScript +function handleSubmit(e) { + e.preventDefault(); + setUpUser(apiKey.value, region.value); +} +``` +✅ Rafraîchissez votre mémoire - le HTML que vous avez configuré dans la dernière leçon a deux champs de saisie dont les `values` sont capturées via le `const` que vous avez configuré en haut du fichier, et ils sont tous les deux `required` pour que le navigateur arrête les utilisateurs de la saisie de valeurs nulles. + +### Set up the user + +Moving on to the `setUpUser` function, here is where you set local storage values for apiKey and regionName. Add a new function: + +```JavaScript +function setUpUser(apiKey, regionName) { + localStorage.setItem('apiKey', apiKey); + localStorage.setItem('regionName', regionName); + loading.style.display = 'block'; + errors.textContent = ''; + clearBtn.style.display = 'block'; + //faire un premier appel + displayCarbonUsage(apiKey, regionName); +} +``` +Cette fonction définit un message de chargement à afficher pendant l'appel de l'API. À ce stade, vous êtes arrivé à créer la fonction la plus importante de cette extension de navigateur! + +### Afficher la consommation de carbone + +Il est enfin temps d'interroger l'API ! + +Avant d'aller plus loin, nous devrions discuter des API. Les API, ou [Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html), sont un élément essentiel de la boîte à outils d'un développeur Web. Ils fournissent des moyens standard pour les programmes d'interagir et d'interagir les uns avec les autres. Par exemple, si vous créez un site Web qui doit interroger une base de données, quelqu'un peut avoir créé une API que vous pouvez utiliser. Bien qu'il existe de nombreux types d'API, l'une des plus populaires est l'[API REST](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/). + +✅ Le terme 'REST' signifie 'Representational State Transfer' et utilise des URL configurées de différentes manières pour récupérer des données. Faites une petite recherche sur les différents types d'API disponibles pour les développeurs. Quel format vous séduit ? + +Il y a des choses importantes à noter à propos de cette fonction. Remarquez d'abord le [mot-clé `async`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). L'écriture de vos fonctions pour qu'elles s'exécutent de manière asynchrone signifie qu'elles attendent qu'une action, telle que le retour de données, soit terminée avant de continuer. + +Voici une vidéo rapide sur `async`: + +[![Async et Await pour la gestion des promesses](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async et Await pour la gestion des promesses") + +> 🎥 Cliquez sur l'image ci-dessus pour une vidéo sur async/await. + +Créez une nouvelle fonction pour interroger 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) + ' 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.'; + } +} +``` + +C'est une grande fonction. Que se passe t-il ici? + +- en suivant les meilleures pratiques, vous utilisez un mot-clé `async` pour que cette fonction se comporte de manière asynchrone. La fonction contient un bloc `try/catch` car elle renverra une promesse lorsque l'API renverra des données. Étant donné que vous n'avez aucun contrôle sur la vitesse à laquelle l'API répondra (elle peut ne pas répondre du tout!), vous devez gérer cette incertitude en l'appelant de manière asynchrone. +- vous interrogez l'API co2signal pour obtenir les données de votre région, en utilisant votre clé API. Pour utiliser cette clé, vous devez utiliser un type d'authentification dans vos paramètres d'en-tête. +- une fois que l'API a répondu, vous affectez divers éléments de ses données de réponse aux parties de votre écran que vous avez configurées pour afficher ces données. +- s'il y a une erreur, ou s'il n'y a pas de résultat, vous affichez un message d'erreur. + +✅ L'utilisation de modèles de programmation asynchrone est un autre outil très utile dans votre boîte à outils. Lisez les [différentes manières](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) de configurer ce type de code. + +Toutes nos félicitations! Si vous compilez votre extension (`npm run build`) et l'actualisez dans votre volet d'extensions, vous avez une extension qui fonctionne ! La seule chose qui ne fonctionne pas est l'icône, et vous corrigerez cela dans la prochaine leçon. + +--- + +## 🚀 Challenge + +Nous avons discuté de plusieurs types d'API jusqu'à présent dans ces leçons. Choisissez une API Web et recherchez en profondeur ce qu'elle offre. Par exemple, jetez un œil aux API disponibles dans les navigateurs telles que l'[API HTML Drag and Drop](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). À votre avis, qu'est-ce qui fait une excellente API? + +## Quiz de validation des connaissances + +[Quiz de validation des connaissances](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/26?loc=fr) + +## Révision et étude personnelle + +Vous avez découvert LocalStorage et les API dans cette leçon, tous deux très utiles pour le développeur Web professionnel. Pouvez-vous imaginer comment ces deux choses fonctionnent ensemble ? Réfléchissez à l'architecture d'un site Web qui stockerait des éléments à utiliser par une API. + +## Affectation + +[Adoptez une API](assignment.fr.md) +