Andiamo a Redux, nelle azioni dei luoghi che ora ricevono anche un oggetto location e ricordiamo che questo
è un oggetto che assomiglia a
questo, quindi qui ha un tasto lat e un tasto lng.
Quindi nelle azioni di luoghi, in luogo aggiuntivo, otterremo questo oggetto posizione e qui, ovviamente, voglio memorizzarlo nel mio database, voglio memorizzarlo
nel mio negozio Redux e,
come ho già
detto, voglio ottenere questo umano indirizzo leggibile, giusto
e per
questo possiamo usare un'altra API di Google.
Se cerchi l'API di geocodifica di Google Maps, troverai questo link
qui e questa è un'API che ti consente di tradurre indirizzi in coordinate o coordinate in indirizzi.
Le coordinate in indirizzi sono chiamate reverse look up, quindi possiamo fare clic sul geocoding inverso laggiù e questo ci dice
come funziona e per questo, hai bisogno di una chiave API di Google
Maps che
ho impostato in precedenza in questo modulo e ora possiamo invia una
richiesta alla fine a questo URL qui. Quindi possiamo semplicemente copiare l'intero URL e inviare una richiesta HTTP a questo.
Ora questo non genererà un'immagine ma ci restituirà alcuni dati JSON, quindi invieremo
quella richiesta con l'API di recupero come hai appreso nel modulo HTTP e lo farò semplicemente qui all'interno del mio gestore di
azioni Aggiungi posto in questa funzione interiore. Ovviamente potresti anche esternalizzarlo in un file separato
anche se vuoi mantenere questo file un po 'più magro.
Quindi, possiamo usare l'API di recupero e inviare una richiesta a un URL che creerò qui come una stringa
con segni di spunta posteriori in modo che l'iniezione di dati dinamici sia più semplice e lì, voglio copiare questo URL qui e incollarlo lì
.
Va bene
che non funziona, quindi fammi afferrarlo manualmente e ora incollarlo lì e per la chiave API, ovviamente voglio usare
questa variabile di ambiente che
ho impostato in precedenza, quindi importa env dal file env.
Potresti ricordare che questo è un file che contiene un oggetto che contiene la mia chiave API.
Quindi ora posso sostituire questo qui, questa cosa chiave API qui, posso sostituirlo con questo env iniettato
dinamicamente.
il valore googleapikey e, naturalmente, anche la latitudine e la longitudine devono essere impostati dinamicamente.
Assicurati di non eliminare la virgola tra questi due,
ma ora qui puoi trovare la latitudine nella mia posizione che ovviamente ha un tasto lat nel modo in cui
l'abbiamo impostato, puoi sempre vederlo qui in basso nella console e posizione come chiave anche per
lng, quindi abbiamo queste due informazioni.
Questo invia una richiesta get
lì e va bene perché dobbiamo inviare una richiesta get e, naturalmente, possiamo quindi attendere
la risposta e voglio archiviare la risposta in una costante per usarla.
Successivamente possiamo verificare se questa risposta forse non va bene, dovrebbe essere a posto, ma se non lo è, potremmo lanciare un
nuovo errore qui, qualcosa è andato storto
e ovviamente puoi anche impostare
la gestione degli errori nello stesso modo in cui hai imparato nel modulo
HTTP ma
qui suppongo che funzionerà e ora possiamo ottenere
i dati di risposta in attesa di risposta. json che estrae il corpo della
risposta e lo converte in Javascript normale e, per il momento, consolerò semplicemente i dati di risposta
della console in modo da avere un'idea di cosa c'è dentro e
ora proviamo semplicemente.
Proviamo ad aggiungere un nuovo posto, ottenere la posizione dell'utente e fare clic su Salva luogo e
possiamo farlo anche senza compilare il
resto perché non abbiamo ottenuto la convalida qui su iOS. Quindi funziona, ovviamente ricevo un errore a causa della mancanza di dati, ma
in realtà otteniamo anche il risultato della nostra richiesta HTTP e questo è questo oggetto super enorme lì,
ora è davvero un oggetto grande come puoi dire.
Ora alla fine quello che c'è dentro, in questo grande oggetto è questo qui l'oggetto, abbiamo una chiave di risultati lì che è un array e lì,
abbiamo i diversi componenti di questo indirizzo ma se scorri un po 'verso il basso,
noi vedi oltre a questo array, abbiamo anche questa chiave di indirizzo formattata. Quindi nel nostro oggetto risultato qui, non abbiamo solo
quell'array ma abbiamo anche un indirizzo formattato ed è quello che sto
cercando,
questo è quello che voglio, voglio questo indirizzo formattato, quindi possiamo estrarlo dalla nostra risposta dati qui.
Quindi, invece di registrarlo qui, controllo solo se forse non abbiamo una chiave dei risultati dei
dati di risposta, se in qualche modo manca, in quel caso lancerò anche un errore ma se superiamo questo controllo, allora dovrei essere
in grado di recuperarlo.
Quindi qui posso derivare il mio indirizzo accedendo ai risultati dei dati di risposta e poi lì, il primo elemento pubblicitario, è
lì
che troviamo effettivamente l'indirizzo formattato e puoi semplicemente ispezionare questo oggetto che ti ho appena mostrato per
avere un'idea per la sua struttura completa .
Naturalmente i documenti ufficiali documentano anche l'aspetto di questi dati che si ottiene. Quindi ora abbiamo l'indirizzo formattato qui e quindi
posso recuperarlo in questo modo e ora otteniamo tutto ciò di cui abbiamo bisogno.
Quando ora archiviamo qualcosa nel database, posso usare il mio indirizzo che ho appena estratto, anziché l'indirizzo
fittizio e qui per la latitudine, posso usare la posizione. lat, per la longitudine non
sorprende che io possa usare la posizione. Per la spedizione dei dati, possiamo anche aggiungere ulteriori informazioni.
Possiamo aggiungere l'indirizzo e forse una chiave coords che contiene un oggetto in cui abbiamo lat che è location. lat e lng che
è la posizione. Adesso tutti i dati vengono trasmessi con il nostro oggetto azione e
quindi raggiungono il nostro riduttore.
Quindi nel riduttore, ora dobbiamo assicurarci di usare il nuovo indirizzo e i campi coords che otteniamo. Quindi nel riduttore di luoghi, vogliamo
inizializzare il nostro posto qui con quei dati extra e per questo dobbiamo prima
di tutto modificare il modello del luogo per aspettarci quei dati.
Quindi qui, voglio ottenere un indirizzo e voglio ottenere una latitudine e una longitudine. Quindi possiamo quindi archiviare tutto ciò, archiviare
l'indirizzo
qui, memorizzare la latitudine e memorizzare
la longitudine, con che il modello è preparato e con il modello preparato, per ottenere questi dati
extra nel riduttore, dovremmo aggiungere questo quando aggiungi un posto.
Quindi qui aggiungiamo come indirizzo l'azione. placeData. indirizzo perché è quello che ho appena aggiunto
nelle azioni dei luoghi qui, questa chiave di indirizzo e possiamo anche ottenere le coordinate.
Quindi, per la latitudine qui, passo azione. placeData. coordinate. lat e
per la longitudine, passo azione. placeData. coordinate. lng. Con ciò, i posti vengono
inizializzati qui.
Ora quando li cariciamo dal database, quando impostiamo i nostri luoghi, dovremmo quindi inizializzare correttamente
il nostro modello di luogo e prendere i dati già
presenti nel database, quindi mantieni l'indirizzo, mantieni la latitudine e mantieni la longitudine,
quindi questo è piuttosto semplice e quindi ora, speriamo di avere tutti i dati e utilizzarli tutti.
Ora per vedere se funziona, dobbiamo
lavorare sull'elemento del luogo che stiamo trasmettendo qui sulla pagina iniziale, possiamo vederlo su Android, in modo che
possiamo mostrare anche l'indirizzo qui
e dobbiamo anche lavorare sul luogo schermata dei dettagli. Quindi lavoriamo su questo in modo da poter vedere tutti
i pezzi riuniti.