Skip to content

Commit e9d533a

Browse files
authored
Merge pull request #4050 from Adam-Doria/patch-4
French version : Update part2c.md : remove exercices
2 parents f43704c + 01b2037 commit e9d533a

File tree

3 files changed

+339
-83
lines changed

3 files changed

+339
-83
lines changed

src/content/2/fr/part2c.md

Lines changed: 1 addition & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -532,7 +532,7 @@ L'application React s'exécutant dans le navigateur récupère les données au f
532532

533533
<div class="tasks">
534534

535-
<h3>Exercices 2.11.-2.14.</h3>
535+
<h3>Exercices 2.11.</h3>
536536

537537
<h4>2.11: phonebook, étape6</h4>
538538

@@ -582,77 +582,3 @@ Error: listen EADDRINUSE 0.0.0.0:3001
582582
cela signifie que le port 3001 est déjà utilisé par une autre application, par ex. en cours d'utilisation par un json-server déjà en cours d'exécution. Fermez l'autre application ou modifiez le port au cas où cela ne fonctionnerait pas.
583583

584584
Modifiez l'application de sorte que l'état initial des données soit extrait du serveur à l'aide de la bibliothèque <i>axios</i>. Terminez la récupération avec un [Hook d'effet](https://reactjs.org/docs/hooks-effect.html).
585-
586-
<h4>2.12* countries, étape1</h4>
587-
588-
L'API [https://restcountries.com](https://restcountries.com) fournit des données pour différents pays dans un format lisible par machine, appelé API REST.
589-
590-
Créer une application, dans laquelle on peut consulter les données de différents pays. L'application devrait probablement obtenir les données du end point [all](https://restcountries.com/v3.1/all).
591-
592-
L'interface utilisateur est très simple. Le pays à afficher est trouvé en tapant une requête de recherche dans le champ de recherche.
593-
594-
S'il y a trop de pays (plus de 10) qui correspondent à la requête, l'utilisateur est invité à préciser sa requête :
595-
596-
![](../../images/2/19b1.png)
597-
598-
S'il y a dix pays ou moins, mais plus d'un, tous les pays correspondant à la requête sont affichés :
599-
600-
![](../../images/2/19b2.png)
601-
602-
Lorsqu'il n'y a qu'un seul pays correspondant à la requête, les données de base du pays (par exemple, sa capitale et sa superficie), son drapeau et les langues qui y sont parlées sont affichés :
603-
604-
![](../../images/2/19c3.png)
605-
606-
**NB** : Il suffit que votre application fonctionne pour la plupart des pays. Certains pays, comme le <i>Soudan</i>, peuvent être difficiles à soutenir, car le nom du pays fait partie du nom d'un autre pays, le <i>Soudan du Sud</i>. Vous n'avez pas à vous soucier de ces cas extrêmes.
607-
608-
**ATTENTION** create-react-app transformera automatiquement votre projet en un référentiel git à moins que vous ne créiez votre application dans un référentiel git existant. **Il est fort probable que vous ne vouliez pas que chacun de vos projets soit un référentiel distinct**, il vous suffit donc d'exécuter la commande _rm -rf .git_ à la racine de votre application.
609-
610-
<h4>2.13*: countries, étape2</h4>
611-
612-
**Il y a encore beaucoup à faire dans cette partie, alors ne restez pas bloqué sur cet exercice !**
613-
614-
Améliorez l'application de l'exercice précédent, de sorte que lorsque les noms de plusieurs pays sont affichés sur la page, il y a un bouton à côté du nom du pays, qui, lorsqu'il est pressé, affiche la vue pour ce pays :
615-
616-
![](../../images/2/19b4.png)
617-
618-
Dans cet exercice, il suffit également que votre application fonctionne pour la plupart des pays. Les pays dont le nom apparaît dans le nom d'un autre pays, comme le <i>Soudan</i>, peuvent être ignorés.
619-
620-
<h4>2.14*: countries, étape3</h4>
621-
622-
**Il y a encore beaucoup à faire dans cette partie, alors ne restez pas bloqué sur cet exercice !**
623-
624-
Ajoutez à la vue montrant les données d'un seul pays, le bulletin météo de la capitale de ce pays. Il existe des dizaines de fournisseurs de données météorologiques. Une API suggérée est [https://openweathermap.org](https://openweathermap.org). Notez que cela peut prendre quelques minutes avant qu'une clé API générée soit valide.
625-
626-
![](../../images/2/19x.png)
627-
628-
Si vous utilisez Open weather map, trouvez [ici](https://openweathermap.org/weather-conditions#Icon-list) une description de comment obtenir des icônes météo.
629-
630-
**NB :** Dans certains navigateurs (tels que Firefox), l'API choisie peut envoyer une réponse d'erreur, ce qui indique que le cryptage HTTPS n'est pas pris en charge, bien que l'URL de la requête commence par _http://_. Ce problème peut être résolu en effectuant l'exercice à l'aide de Chrome.
631-
632-
**NB :** Vous avez besoin d'une clé API pour utiliser presque tous les services météorologiques. N'enregistrez pas la clé API dans le contrôle de code source ! Ni coder en dur la clé API dans votre code source. Utilisez plutôt une [variable d'environnement](https://create-react-app.dev/docs/adding-custom-environment-variables/) pour enregistrer la clé.
633-
634-
En supposant que la clé API est <i>t0p53cr3t4p1k3yv4lu3</i>, lorsque l'application est démarrée comme suit :
635-
636-
```bash
637-
export REACT_APP_API_KEY=t0p53cr3t4p1k3yv4lu3 && npm start // For Linux/macOS Bash
638-
($env:REACT_APP_API_KEY="t0p53cr3t4p1k3yv4lu3") -and (npm start) // For Windows PowerShell
639-
set "REACT_APP_API_KEY=t0p53cr3t4p1k3yv4lu3" && npm start // For Windows cmd.exe
640-
```
641-
642-
vous pouvez accéder à la valeur de la clé depuis l'objet _process.env_ :
643-
644-
```js
645-
const api_key = process.env.REACT_APP_API_KEY
646-
// la variable api_key a maintenant la valeur définie au démarrage
647-
```
648-
649-
Notez que si vous avez créé l'application à l'aide de `npx create-react-app ...` et que vous souhaitez utiliser un nom différent pour votre variable d'environnement, le nom de la variable d'environnement doit toujours commencer par `REACT_APP_`. Vous pouvez également utiliser un fichier `.env` plutôt que de le définir sur la ligne de commande à chaque fois en créant un fichier intitulé '.env' à la racine du projet et en ajoutant ce qui suit.
650-
651-
```
652-
# .env
653-
654-
REACT_APP_API_KEY=t0p53cr3t4p1k3yv4lu3
655-
```
656-
657-
Notez que vous devrez redémarrer le serveur pour appliquer les modifications.
658-
</div>

src/content/2/fr/part2d.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -698,19 +698,19 @@ Le code de l'état actuel de notre application se trouve sur la branche <i>part2
698698
699699
<div class="tasks">
700700
701-
<h3>Exercices 2.15.-2.18.</h3>
701+
<h3>Exercices 2.12.-2.15.</h3>
702702
703-
<h4>2.15: phonebook, étape7</h4>
703+
<h4>2.12: phonebook, étape7</h4>
704704
705705
Revenons à notre application de répertoire.
706706
707707
Actuellement, les numéros ajoutés au répertoire ne sont pas enregistrés sur un serveur principal. Corrigez cette situation.
708708
709-
<h4>2.16: phonebook, étape8</h4>
709+
<h4>2.13: phonebook, étape8</h4>
710710
711711
Extrayez le code qui gère la communication avec le backend dans son propre module en suivant l'exemple présenté précédemment dans cette partie du support de cours.
712712
713-
<h4>2.17: phonebook étape9</h4>
713+
<h4>2.14: phonebook étape9</h4>
714714
715715
Permettre aux utilisateurs de supprimer des entrées du répertoire. La suppression peut être effectuée via un bouton dédié pour chaque personne dans la liste du répertoire. Vous pouvez confirmer l'action de l'utilisateur en utilisant la méthode [window.confirm](https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm) :
716716
@@ -729,7 +729,7 @@ const delete = (id) => {
729729
}
730730
```
731731
732-
<h4>2.18*: phonebook, étape10</h4>
732+
<h4>2.15*: phonebook, étape10</h4>
733733
734734
Modifiez le code de sorte que si un numéro est ajouté à un utilisateur déjà existant, le nouveau numéro remplacera l'ancien numéro. Il est recommandé d'utiliser la méthode HTTP PUT pour mettre à jour le numéro de téléphone.
735735

0 commit comments

Comments
 (0)