You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
583
583
584
584
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
-

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
-

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
-

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
-

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
-

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
-
constapi_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.
Copy file name to clipboardExpand all lines: src/content/2/fr/part2d.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -698,19 +698,19 @@ Le code de l'état actuel de notre application se trouve sur la branche <i>part2
698
698
699
699
<div class="tasks">
700
700
701
-
<h3>Exercices 2.15.-2.18.</h3>
701
+
<h3>Exercices 2.12.-2.15.</h3>
702
702
703
-
<h4>2.15: phonebook, étape7</h4>
703
+
<h4>2.12: phonebook, étape7</h4>
704
704
705
705
Revenons à notre application de répertoire.
706
706
707
707
Actuellement, les numéros ajoutés au répertoire ne sont pas enregistrés sur un serveur principal. Corrigez cette situation.
708
708
709
-
<h4>2.16: phonebook, étape8</h4>
709
+
<h4>2.13: phonebook, étape8</h4>
710
710
711
711
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.
712
712
713
-
<h4>2.17: phonebook étape9</h4>
713
+
<h4>2.14: phonebook étape9</h4>
714
714
715
715
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) :
716
716
@@ -729,7 +729,7 @@ const delete = (id) => {
729
729
}
730
730
```
731
731
732
-
<h4>2.18*: phonebook, étape10</h4>
732
+
<h4>2.15*: phonebook, étape10</h4>
733
733
734
734
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.
0 commit comments