Passons à Redux, aux actions de lieux qui reçoivent maintenant également un objet de localisation et gardons à l'esprit
que c'est un objet qui ressemble à
ceci, donc il a une clé lat et une clé lng ici.
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
données, je veux le stocker dans mon
magasin Redux et comme je
l'ai mentionné, je veux obtenir cet humain adresse lisible, à
droite et
pour cela nous pouvons utiliser une autre API Google.
Si vous recherchez l'API de géocodage de Google Maps, vous trouverez ce lien
ici et il s'agit d'une API qui vous permet de traduire des adresses en coordonnées ou des coordonnées en adresses.
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
comment cela fonctionne et pour cela, vous avez besoin d'une clé API Google Maps
que j'ai créée
plus tôt dans ce module et maintenant nous pouvons envoyez une demande
à la fin de cette URL ici. Nous pouvons donc simplement copier l'intégralité de cette URL et y envoyer une requête HTTP.
Maintenant, cela ne générera pas d'image mais nous rendra des données JSON, nous enverrons donc
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
d'action d'ajout de place dans cette fonction intérieure. Bien sûr, vous pouvez également l'externaliser dans un fichier
séparé si vous souhaitez conserver ce fichier un peu plus léger.
Donc là, on peut utiliser l'API fetch et envoyer une requête à une URL que je vais créer ici sous
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
là . D'accord,
cela ne
fonctionne pas, alors laissez-moi le saisir manuellement puis collez-le ici et pour la clé API, je veux bien sûr utiliser
cette variable d'environnement que j'ai
configurée plus tôt, alors importez env à partir du fichier env.
Vous vous souvenez peut-être que c'est un fichier qui contient un objet qui contient ma clé API.
Alors maintenant, je peux remplacer ceci ici, ce truc clé API ici, je peux le remplacer par cet env injecté
dynamiquement.
La valeur googleapikey et bien sûr la latitude et la longitude doivent également être définies dynamiquement.
Assurez-vous que vous ne supprimez pas la virgule entre ces
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
la configurons, vous pouvez toujours le voir ici en bas dans la console et emplacement comme clé lng
aussi, nous avons donc ces deux informations.
Cela envoie une demande get
là-bas et c'est correct car nous devons envoyer une demande get et bien sûr, nous pouvons donc
attendre la réponse et je veux stocker la réponse dans une constante pour l'utiliser.
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
erreur ici, quelque chose s'est mal passé et
bien sûr, vous pouvez également
configurer la gestion des erreurs de la même manière que vous l'avez appris dans le
module HTTP mais
ici, je suppose que cela fonctionnera et maintenant nous
pouvons obtenir les données de réponse en attendant la réponse. json qui extrait le corps de la
réponse et le convertit en Javascript normal et pour le moment, je vais simplement consigner ces données de
réponse afin que nous ayons une idée de ce qu'il y a dedans et
maintenant essayons simplement.
Essayons d'ajouter un nouvel endroit, d'obtenir l'emplacement de l'utilisateur et de cliquer sur enregistrer l'endroit et nous
pouvons le faire même sans remplir
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
manquantes, mais nous obtenons également le résultat de notre demande HTTP et c'est cet objet super énorme là, maintenant
c'est vraiment un gros objet comme vous pouvez le voir.
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
là, nous avons les différents composants de cette adresse mais si vous faites défiler un peu,
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
seulement ce tableau mais nous avons également une adresse formatée et c'est ce que je
recherche, c'est
ce que je veux, je veux cette adresse formatée, afin que nous puissions extraire cela de notre réponse les données ici.
Donc, au lieu de l'enregistrer ici, je vérifie simplement si nous n'avons peut-être pas de clé de résultats de
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
devrais être capable de le récupérer.
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à
que
nous trouvons réellement l'adresse formatée et vous pouvez simplement inspecter cet objet que je viens de vous montrer pour
avoir une idée de sa structure complète .
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
je peux la récupérer comme ça et maintenant nous obtenons tout ce dont nous avons besoin.
Lorsque nous stockons maintenant quelque chose dans la base de données, je peux utiliser mon adresse que je viens d'extraire, au lieu
d'une adresse fictive et ici pour la latitude, je peux utiliser l'emplacement. lat, pour la longitude
sans surprise, je peux utiliser l'emplacement. lng et pour l'envoi des données, nous pouvons également ajouter des informations supplémentaires.
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
est l'emplacement. lng et maintenant toutes ces données sont transmises avec notre objet action
et atteignent donc notre réducteur.
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,
nous voulons initialiser notre place ici avec ces données supplémentaires et pour cela, nous
devons d'abord ajuster le modèle de lieu pour attendre ces données.
Donc ici, je veux obtenir une adresse et je veux avoir une latitude et une longitude. Donc, nous pouvons alors stocker tout cela, stocker
l'adresse
ici, stocker la latitude et stocker
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
dans le réducteur, nous devons ajouter cela lorsque nous ajouter une place.
Nous ajoutons donc ici comme adresse, l'action. placeData. adresse parce que c'est ce que je viens
d'ajouter dans les actions des lieux ici, cette clé d'adresse et nous pouvons également obtenir les coordonnées.
Donc pour la latitude ici, je passe à l'action. placeData. coords. lat et pour
la longitude, je passe l'action. placeData. coords. lng. Avec cela, les lieux sont
initialisés ici.
Maintenant, lorsque nous les chargeons à partir de la base de données, lorsque nous définissons nos lieux, nous devons
donc également initialiser correctement notre modèle de lieu et prendre les
données qui sont déjà dans la base de données, alors gardez l'adresse, gardez la latitude et
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.
Maintenant, pour voir si cela fonctionne, nous devons
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
que nous montrions également l'adresse ici
peut-être et nous devons également travailler sur l'endroit écran de détail. Alors travaillons dessus pour que nous puissions voir toutes les
pièces se réunir.