Gehen wir zu Redux, zu den Ortsaktionen, die jetzt auch ein Standortobjekt empfangen, und denken Sie daran,
dass dies ein Objekt ist, das
so aussieht, also hat es hier einen Lat- und einen Lng-Schlüssel.
Bei Ortsaktionen erhalten wir an Ort und Stelle dieses Standortobjekt, und hier möchte ich es natürlich in meiner Datenbank speichern, ich möchte
es in meinem Redux-Speicher speichern und
wie bereits erwähnt,
möchte ich diesen Menschen erhalten lesbare Adresse, richtig
und dafür
können wir eine andere Google API verwenden.
Wenn Sie nach der Google Maps-Geokodierungs-API suchen, finden Sie diesen Link
hier. Dies ist eine API, mit der Sie Adressen in Koordinaten oder Koordinaten in Adressen übersetzen können.
Koordinaten in Adressen werden als Reverse-Lookup bezeichnet. Wir können dort unten auf Reverse-Geocodierung klicken. Dies zeigt uns, wie
das funktioniert. Dazu benötigen Sie einen Google Maps-API-Schlüssel, den ich zuvor in
diesem Modul
eingerichtet habe, und jetzt können wir Senden Sie am Ende
eine Anfrage an diese URL hier. Wir können also einfach die gesamte URL kopieren und eine HTTP-Anfrage an diese senden.
Dies generiert kein Bild, sondern gibt uns einige JSON-Daten zurück. Daher senden
wir diese Anforderung mit der Abruf-API, wie Sie sie im HTTP-Modul gelernt haben, und ich mache das einfach hier in
meinem Add-Place-Aktionshandler in diese innere Funktion. Natürlich können Sie es auch in eine separate
Datei auslagern, wenn Sie diese Datei etwas schlanker halten möchten.
Dort können wir die Abruf-API verwenden und eine Anfrage an eine URL senden, die ich hier als
Zeichenfolge mit Back-Ticks erstellen werde, damit das Einfügen dynamischer Daten einfacher wird. Dort möchte ich diese URL hier kopieren und dort einfügen
.
Okay, das
funktioniert nicht. Lassen Sie mich es dann manuell abrufen und jetzt dort einfügen. Für den API-Schlüssel möchte ich natürlich
diese Umgebungsvariable verwenden, die ich
zuvor eingerichtet habe. Importieren Sie also env aus der env-Datei.
Vielleicht erinnern Sie sich, dass dies eine Datei ist, die ein Objekt enthält, das meinen API-Schlüssel enthält.
Jetzt kann ich dies hier ersetzen, diese API-Schlüsselsache hier, ich kann dies durch diese dynamisch injizierte Umgebung
ersetzen.
Der googleapikey-Wert und natürlich der Breiten- und Längengrad müssen ebenfalls dynamisch eingestellt werden.
Stellen Sie sicher, dass Sie das Komma zwischen diesen beiden
nicht löschen, aber jetzt finden Sie hier den Breitengrad an meinem Standort, der natürlich einen Lat-Schlüssel hat, wie wir ihn eingerichtet
haben. Das können Sie immer hier unten in der Konsole und sehen Standort auch als lng-Schlüssel,
also haben wir diese beiden Informationen.
Dies sendet dort eine Get-Anfrage
und das ist in Ordnung, da wir eine Get-Anfrage senden müssen und natürlich die Antwort abwarten können
und ich die Antwort in einer Konstanten speichern möchte, um sie zu verwenden.
Als nächstes können wir überprüfen, ob diese Antwort möglicherweise nicht in Ordnung ist. Sie sollte in Ordnung sein. Wenn dies nicht der Fall ist, können wir
hier einen neuen Fehler auslösen. Es ist ein
Fehler aufgetreten. Daher können Sie
die Fehlerbehandlung natürlich auch so einrichten, wie Sie es gelernt haben es im HTTP-Modul, aber
hier gehe ich
davon aus, dass dies funktionieren wird und jetzt können
wir die Antwortdaten erhalten, indem wir auf die Antwort warten. json, das den Text der Antwort
extrahiert und in normales Javascript konvertiert. Im Moment werde ich diese Antwortdaten einfach auf der Konsole protokollieren,
damit wir eine Vorstellung davon bekommen, was sich darin befindet, und es
jetzt einfach versuchen.
Versuchen wir, einen neuen Ort hinzuzufügen, den Benutzerstandort abzurufen und auf Ort speichern zu klicken. Dies ist
auch ohne Ausfüllen des Restes möglich,
da wir hier unter iOS keine Validierung erhalten haben. Das funktioniert natürlich, ich bekomme einen Fehler wegen fehlender Daten, aber wir
bekommen auch das Ergebnis unserer HTTP-Anfrage und das ist dieses super große Objekt dort, jetzt ist das
wirklich ein großes Objekt, wie Sie sehen können.
Am Ende ist da drin, in diesem großen Objekt ist dies das Objekt hier, wir haben dort einen Ergebnisschlüssel, der ein Array ist, und
dort haben wir die verschiedenen Komponenten dieser Adresse, aber wenn Sie ein wenig nach
unten scrollen, wir Neben diesem Array haben wir auch diesen formatierten Adressschlüssel. In unserem Ergebnisobjekt hier haben wir also nicht nur dieses
Array, sondern auch eine formatierte Adresse, und das ist es, wonach ich suche. Dies
ist
das, was ich möchte. Ich möchte diese formatierte Adresse, damit wir sie aus unserer Antwort extrahieren können Daten hier.
Anstatt es hier zu protokollieren, überprüfe ich nur, ob wir möglicherweise keinen Antwortdaten-Ergebnisschlüssel haben. Wenn dieser
irgendwie fehlt, werde ich in diesem Fall auch einen Fehler auslösen, aber wenn wir es über diese Prüfung hinaus schaffen, sollte ich es sein
in der Lage, es abzurufen.
Hier kann ich also meine Adresse ableiten, indem ich auf die Ergebnisse der Antwortdaten zugreife, und dort, in der ersten Werbebuchung, finden wir
tatsächlich
die formatierte Adresse, und Sie können dieses Objekt, das ich Ihnen gerade gezeigt habe, einfach untersuchen, um eine
Vorstellung von seiner vollständigen Struktur zu erhalten .
Natürlich dokumentieren die offiziellen Dokumente auch, wie diese Daten aussehen, die Sie zurückerhalten. Jetzt haben wir hier die formatierte Adresse und
deshalb kann ich sie so abrufen und jetzt bekommen wir alles, was wir brauchen.
Wenn wir jetzt etwas in der Datenbank speichern, kann ich meine gerade extrahierte Adresse anstelle der Dummy-Adresse verwenden,
und hier kann ich für den Breitengrad den Standort verwenden. lat, für den Längengrad
kann ich nicht überraschend den Standort verwenden. Zum Versenden von Daten können wir auch zusätzliche Informationen hinzufügen.
Wir können die Adresse und vielleicht einen Koordinatenschlüssel hinzufügen, der ein Objekt enthält, in dem wir lat haben, nämlich den Ort. lat und lng welches
ist standort. lng und jetzt werden all diese Daten mit unserem Aktionsobjekt weitergegeben
und erreichen daher unseren Reduzierer.
Im Reduzierer müssen wir jetzt sicherstellen, dass wir die neuen Adress- und Koordinatenfelder verwenden, die wir erhalten. Im Ortsreduzierer möchten wir
unseren Platz hier mit diesen zusätzlichen Daten initialisieren. Dazu müssen wir
zunächst das Ortsmodell optimieren, um diese Daten zu erwarten.
Also hier möchte ich eine Adresse bekommen und ich möchte einen Längen- und Breitengrad bekommen. Also können wir all das speichern, die Adresse
hier
speichern, den Breitengrad und den Längengrad
speichern, damit das Modell vorbereitet ist und mit dem Modell vorbereitet, um diese zusätzlichen Daten wieder in den Reduzierer
zu bekommen, sollten wir dies hinzufügen, wenn wir füge einen Platz hinzu.
Also hier fügen wir dann als Adresse die Aktion hinzu. placeData. Adresse, weil ich das gerade in den
Ortsaktionen hier hinzugefügt habe, diesen Adressschlüssel und wir können auch die Koordinaten erhalten.
Für den Spielraum hier gebe ich also eine Aktion ab. placeData. Koordinaten. lat und für
die Länge passiere ich Aktion. placeData. Koordinaten. lng. Damit werden hier Orte
initialisiert.
Wenn wir sie jetzt aus der Datenbank laden und unsere Orte festlegen, sollten wir daher
auch unser Ortsmodell korrekt initialisieren und die Daten nehmen, die
sich bereits in der Datenbank befinden. Behalten Sie also die Adresse, den Breitengrad
und den Längengrad bei ziemlich einfach und deshalb haben wir jetzt hoffentlich alle Daten und verwenden alle Daten.
Um zu sehen, ob das funktioniert, müssen
wir an dem Platzelement arbeiten, das wir hier auf der Startseite ausgeben. Wir können es auf Android sehen, damit
wir hier möglicherweise auch die Adresse
anzeigen und wir müssen auch an dem Ort arbeiten Detailbildschirm. Lassen Sie uns daran arbeiten, damit wir sehen können, wie
alle Teile zusammenkommen.