1 00:00:02,170 --> 00:00:07,360 Passons à Redux, aux actions de lieux qui reçoivent maintenant également un objet de localisation et gardons à l'esprit 2 00:00:07,390 --> 00:00:09,490 que c'est un objet qui ressemble à 3 00:00:09,490 --> 00:00:12,610 ceci, donc il a une clé lat et une clé lng ici. 4 00:00:12,610 --> 00:00:21,730 Donc, dans des actions par endroits, en ajouter un endroit, nous aurons cet objet de localisation et ici, je veux bien sûr le stocker dans ma base de 5 00:00:21,730 --> 00:00:23,920 données, je veux le stocker dans mon 6 00:00:23,920 --> 00:00:25,460 magasin Redux et comme je 7 00:00:25,540 --> 00:00:28,930 l'ai mentionné, je veux obtenir cet humain adresse lisible, à 8 00:00:28,960 --> 00:00:30,010 droite et 9 00:00:30,100 --> 00:00:33,130 pour cela nous pouvons utiliser une autre API Google. 10 00:00:33,130 --> 00:00:37,610 Si vous recherchez l'API de géocodage de Google Maps, vous trouverez ce lien 11 00:00:37,690 --> 00:00:43,780 ici et il s'agit d'une API qui vous permet de traduire des adresses en coordonnées ou des coordonnées en adresses. 12 00:00:44,590 --> 00:00:52,870 Les coordonnées en adresses s'appellent une recherche inversée, donc nous pouvons cliquer sur le géocodage inversé là-bas et cela nous dit 13 00:00:52,870 --> 00:00:58,230 comment cela fonctionne et pour cela, vous avez besoin d'une clé API Google Maps 14 00:00:58,230 --> 00:00:59,530 que j'ai créée 15 00:01:00,130 --> 00:01:04,960 plus tôt dans ce module et maintenant nous pouvons envoyez une demande 16 00:01:04,960 --> 00:01:10,780 à la fin de cette URL ici. Nous pouvons donc simplement copier l'intégralité de cette URL et y envoyer une requête HTTP. 17 00:01:10,810 --> 00:01:15,130 Maintenant, cela ne générera pas d'image mais nous rendra des données JSON, nous enverrons donc 18 00:01:15,130 --> 00:01:22,460 cette demande avec l'API fetch telle que vous l'avez apprise dans le module HTTP et je le ferai simplement ici à l'intérieur de mon gestionnaire 19 00:01:22,460 --> 00:01:27,340 d'action d'ajout de place dans cette fonction intérieure. Bien sûr, vous pouvez également l'externaliser dans un fichier 20 00:01:27,460 --> 00:01:29,920 séparé si vous souhaitez conserver ce fichier un peu plus léger. 21 00:01:29,980 --> 00:01:36,730 Donc là, on peut utiliser l'API fetch et envoyer une requête à une URL que je vais créer ici sous 22 00:01:36,730 --> 00:01:45,620 forme de chaîne avec des ticks en arrière pour que l'injection de données dynamiques soit plus facile et là, je veux copier cette URL ici et la coller 23 00:01:45,620 --> 00:01:47,080 là . D'accord, 24 00:01:47,090 --> 00:01:47,930 cela ne 25 00:01:47,930 --> 00:01:56,310 fonctionne pas, alors laissez-moi le saisir manuellement puis collez-le ici et pour la clé API, je veux bien sûr utiliser 26 00:01:56,310 --> 00:01:58,520 cette variable d'environnement que j'ai 27 00:01:58,520 --> 00:02:02,980 configurée plus tôt, alors importez env à partir du fichier env. 28 00:02:02,990 --> 00:02:07,180 Vous vous souvenez peut-être que c'est un fichier qui contient un objet qui contient ma clé API. 29 00:02:07,220 --> 00:02:13,040 Alors maintenant, je peux remplacer ceci ici, ce truc clé API ici, je peux le remplacer par cet env injecté 30 00:02:13,460 --> 00:02:14,170 dynamiquement. 31 00:02:14,180 --> 00:02:20,870 La valeur googleapikey et bien sûr la latitude et la longitude doivent également être définies dynamiquement. 32 00:02:20,870 --> 00:02:23,840 Assurez-vous que vous ne supprimez pas la virgule entre ces 33 00:02:23,840 --> 00:02:30,460 deux, mais maintenant ici la latitude peut être trouvée dans mon emplacement qui a bien sûr une touche lat la façon dont nous 34 00:02:30,460 --> 00:02:35,620 la configurons, vous pouvez toujours le voir ici en bas dans la console et emplacement comme clé lng 35 00:02:35,620 --> 00:02:37,880 aussi, nous avons donc ces deux informations. 36 00:02:37,960 --> 00:02:39,990 Cela envoie une demande get 37 00:02:40,000 --> 00:02:45,830 là-bas et c'est correct car nous devons envoyer une demande get et bien sûr, nous pouvons donc 38 00:02:45,970 --> 00:02:50,700 attendre la réponse et je veux stocker la réponse dans une constante pour l'utiliser. 39 00:02:50,760 --> 00:02:57,690 Ensuite, nous pouvons vérifier si cette réponse n'est peut-être pas correcte, elle devrait l'être, mais si ce n'est pas le cas, nous pourrions lancer une nouvelle 40 00:02:57,690 --> 00:02:59,930 erreur ici, quelque chose s'est mal passé et 41 00:02:59,970 --> 00:03:01,630 bien sûr, vous pouvez également 42 00:03:01,710 --> 00:03:05,850 configurer la gestion des erreurs de la même manière que vous l'avez appris dans le 43 00:03:05,860 --> 00:03:06,890 module HTTP mais 44 00:03:07,200 --> 00:03:09,640 ici, je suppose que cela fonctionnera et maintenant nous 45 00:03:09,840 --> 00:03:14,970 pouvons obtenir les données de réponse en attendant la réponse. json qui extrait le corps de la 46 00:03:14,980 --> 00:03:21,730 réponse et le convertit en Javascript normal et pour le moment, je vais simplement consigner ces données de 47 00:03:21,730 --> 00:03:26,780 réponse afin que nous ayons une idée de ce qu'il y a dedans et 48 00:03:26,920 --> 00:03:28,340 maintenant essayons simplement. 49 00:03:29,230 --> 00:03:34,960 Essayons d'ajouter un nouvel endroit, d'obtenir l'emplacement de l'utilisateur et de cliquer sur enregistrer l'endroit et nous 50 00:03:34,960 --> 00:03:37,350 pouvons le faire même sans remplir 51 00:03:37,370 --> 00:03:43,840 le reste car nous n'avons aucune validation ici sur iOS. Donc cela fonctionne, bien sûr, je reçois une erreur en raison de données 52 00:03:43,840 --> 00:03:48,500 manquantes, mais nous obtenons également le résultat de notre demande HTTP et c'est cet objet super énorme là, maintenant 53 00:03:48,560 --> 00:03:51,190 c'est vraiment un gros objet comme vous pouvez le voir. 54 00:03:51,760 --> 00:03:58,390 Maintenant, à la fin, ce qu'il y a là-dedans, dans ce grand objet, c'est l'objet ici, nous avons une clé de résultat là-dedans qui est un tableau et 55 00:03:58,390 --> 00:04:02,310 là, nous avons les différents composants de cette adresse mais si vous faites défiler un peu, 56 00:04:02,320 --> 00:04:09,220 nous voir à côté de ce tableau, nous avons également cette clé d'adresse formatée. Donc, dans notre objet de résultat ici, nous n'avons pas 57 00:04:09,280 --> 00:04:13,930 seulement ce tableau mais nous avons également une adresse formatée et c'est ce que je 58 00:04:13,930 --> 00:04:14,690 recherche, c'est 59 00:04:14,710 --> 00:04:21,360 ce que je veux, je veux cette adresse formatée, afin que nous puissions extraire cela de notre réponse les données ici. 60 00:04:21,360 --> 00:04:26,510 Donc, au lieu de l'enregistrer ici, je vérifie simplement si nous n'avons peut-être pas de clé de résultats de 61 00:04:26,520 --> 00:04:34,300 données de réponse, si cela manque d'une manière ou d'une autre, dans ce cas, je lancerai également une erreur, mais si nous réussissons à passer cette vérification, alors je 62 00:04:34,300 --> 00:04:35,960 devrais être capable de le récupérer. 63 00:04:35,980 --> 00:04:43,210 Donc, ici, je peux dériver mon adresse en accédant aux résultats des données de réponse, puis là, le premier élément de ligne, c'est là 64 00:04:43,280 --> 00:04:43,790 que 65 00:04:43,810 --> 00:04:49,540 nous trouvons réellement l'adresse formatée et vous pouvez simplement inspecter cet objet que je viens de vous montrer pour 66 00:04:49,540 --> 00:04:52,090 avoir une idée de sa structure complète . 67 00:04:52,090 --> 00:04:58,570 Bien sûr, les documents officiels documentent également à quoi ressemblent ces données que vous récupérez. Alors maintenant, nous avons l'adresse formatée ici et donc 68 00:04:58,570 --> 00:05:03,550 je peux la récupérer comme ça et maintenant nous obtenons tout ce dont nous avons besoin. 69 00:05:04,420 --> 00:05:09,280 Lorsque nous stockons maintenant quelque chose dans la base de données, je peux utiliser mon adresse que je viens d'extraire, au lieu 70 00:05:09,280 --> 00:05:15,210 d'une adresse fictive et ici pour la latitude, je peux utiliser l'emplacement. lat, pour la longitude 71 00:05:15,430 --> 00:05:23,100 sans surprise, je peux utiliser l'emplacement. lng et pour l'envoi des données, nous pouvons également ajouter des informations supplémentaires. 72 00:05:23,520 --> 00:05:32,100 Nous pouvons ajouter l'adresse et peut-être une clé coords qui contient un objet où nous avons lat qui est l'emplacement. lat et lng qui 73 00:05:32,100 --> 00:05:40,320 est l'emplacement. lng et maintenant toutes ces données sont transmises avec notre objet action 74 00:05:40,320 --> 00:05:42,380 et atteignent donc notre réducteur. 75 00:05:42,480 --> 00:05:47,940 Donc, dans le réducteur, nous devons maintenant nous assurer que nous utilisons les nouveaux champs d'adresse et de coordonnées que nous obtenons. Donc, dans le réducteur de lieux, 76 00:05:47,940 --> 00:05:53,750 nous voulons initialiser notre place ici avec ces données supplémentaires et pour cela, nous 77 00:05:53,770 --> 00:05:58,150 devons d'abord ajuster le modèle de lieu pour attendre ces données. 78 00:05:58,150 --> 00:06:04,990 Donc ici, je veux obtenir une adresse et je veux avoir une latitude et une longitude. Donc, nous pouvons alors stocker tout cela, stocker 79 00:06:04,990 --> 00:06:05,530 l'adresse 80 00:06:05,530 --> 00:06:08,740 ici, stocker la latitude et stocker 81 00:06:08,880 --> 00:06:17,460 la longitude, avec ce que le modèle est préparé et avec le modèle préparé, pour récupérer ces données supplémentaires 82 00:06:17,460 --> 00:06:22,500 dans le réducteur, nous devons ajouter cela lorsque nous ajouter une place. 83 00:06:22,500 --> 00:06:30,420 Nous ajoutons donc ici comme adresse, l'action. placeData. adresse parce que c'est ce que je viens 84 00:06:30,420 --> 00:06:35,310 d'ajouter dans les actions des lieux ici, cette clé d'adresse et nous pouvons également obtenir les coordonnées. 85 00:06:35,310 --> 00:06:40,860 Donc pour la latitude ici, je passe à l'action. placeData. coords. lat et pour 86 00:06:40,860 --> 00:06:50,620 la longitude, je passe l'action. placeData. coords. lng. Avec cela, les lieux sont 87 00:06:50,620 --> 00:06:51,510 initialisés ici. 88 00:06:51,520 --> 00:06:57,550 Maintenant, lorsque nous les chargeons à partir de la base de données, lorsque nous définissons nos lieux, nous devons 89 00:06:57,550 --> 00:07:01,650 donc également initialiser correctement notre modèle de lieu et prendre les 90 00:07:02,020 --> 00:07:07,210 données qui sont déjà dans la base de données, alors gardez l'adresse, gardez la latitude et 91 00:07:07,240 --> 00:07:13,940 gardez la longitude, c'est donc assez simple et donc maintenant, nous espérons avoir toutes les données et utiliser toutes les données. 92 00:07:14,330 --> 00:07:16,340 Maintenant, pour voir si cela fonctionne, nous devons 93 00:07:16,340 --> 00:07:21,760 travailler sur l'élément de lieu que nous générons ici sur la page de démarrage, nous pouvons le voir sur Android, afin 94 00:07:21,950 --> 00:07:23,800 que nous montrions également l'adresse ici 95 00:07:24,080 --> 00:07:29,540 peut-être et nous devons également travailler sur l'endroit écran de détail. Alors travaillons dessus pour que nous puissions voir toutes les 96 00:07:29,540 --> 00:07:30,680 pièces se réunir.