1 00:00:02,170 --> 00:00:07,360 Gehen wir zu Redux, zu den Ortsaktionen, die jetzt auch ein Standortobjekt empfangen, und denken Sie daran, 2 00:00:07,390 --> 00:00:09,490 dass dies ein Objekt ist, das 3 00:00:09,490 --> 00:00:12,610 so aussieht, also hat es hier einen Lat- und einen Lng-Schlüssel. 4 00:00:12,610 --> 00:00:21,730 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 5 00:00:21,730 --> 00:00:23,920 es in meinem Redux-Speicher speichern und 6 00:00:23,920 --> 00:00:25,460 wie bereits erwähnt, 7 00:00:25,540 --> 00:00:28,930 möchte ich diesen Menschen erhalten lesbare Adresse, richtig 8 00:00:28,960 --> 00:00:30,010 und dafür 9 00:00:30,100 --> 00:00:33,130 können wir eine andere Google API verwenden. 10 00:00:33,130 --> 00:00:37,610 Wenn Sie nach der Google Maps-Geokodierungs-API suchen, finden Sie diesen Link 11 00:00:37,690 --> 00:00:43,780 hier. Dies ist eine API, mit der Sie Adressen in Koordinaten oder Koordinaten in Adressen übersetzen können. 12 00:00:44,590 --> 00:00:52,870 Koordinaten in Adressen werden als Reverse-Lookup bezeichnet. Wir können dort unten auf Reverse-Geocodierung klicken. Dies zeigt uns, wie 13 00:00:52,870 --> 00:00:58,230 das funktioniert. Dazu benötigen Sie einen Google Maps-API-Schlüssel, den ich zuvor in 14 00:00:58,230 --> 00:00:59,530 diesem Modul 15 00:01:00,130 --> 00:01:04,960 eingerichtet habe, und jetzt können wir Senden Sie am Ende 16 00:01:04,960 --> 00:01:10,780 eine Anfrage an diese URL hier. Wir können also einfach die gesamte URL kopieren und eine HTTP-Anfrage an diese senden. 17 00:01:10,810 --> 00:01:15,130 Dies generiert kein Bild, sondern gibt uns einige JSON-Daten zurück. Daher senden 18 00:01:15,130 --> 00:01:22,460 wir diese Anforderung mit der Abruf-API, wie Sie sie im HTTP-Modul gelernt haben, und ich mache das einfach hier in 19 00:01:22,460 --> 00:01:27,340 meinem Add-Place-Aktionshandler in diese innere Funktion. Natürlich können Sie es auch in eine separate 20 00:01:27,460 --> 00:01:29,920 Datei auslagern, wenn Sie diese Datei etwas schlanker halten möchten. 21 00:01:29,980 --> 00:01:36,730 Dort können wir die Abruf-API verwenden und eine Anfrage an eine URL senden, die ich hier als 22 00:01:36,730 --> 00:01:45,620 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 23 00:01:45,620 --> 00:01:47,080 . 24 00:01:47,090 --> 00:01:47,930 Okay, das 25 00:01:47,930 --> 00:01:56,310 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 26 00:01:56,310 --> 00:01:58,520 diese Umgebungsvariable verwenden, die ich 27 00:01:58,520 --> 00:02:02,980 zuvor eingerichtet habe. Importieren Sie also env aus der env-Datei. 28 00:02:02,990 --> 00:02:07,180 Vielleicht erinnern Sie sich, dass dies eine Datei ist, die ein Objekt enthält, das meinen API-Schlüssel enthält. 29 00:02:07,220 --> 00:02:13,040 Jetzt kann ich dies hier ersetzen, diese API-Schlüsselsache hier, ich kann dies durch diese dynamisch injizierte Umgebung 30 00:02:13,460 --> 00:02:14,170 ersetzen. 31 00:02:14,180 --> 00:02:20,870 Der googleapikey-Wert und natürlich der Breiten- und Längengrad müssen ebenfalls dynamisch eingestellt werden. 32 00:02:20,870 --> 00:02:23,840 Stellen Sie sicher, dass Sie das Komma zwischen diesen beiden 33 00:02:23,840 --> 00:02:30,460 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 34 00:02:30,460 --> 00:02:35,620 haben. Das können Sie immer hier unten in der Konsole und sehen Standort auch als lng-Schlüssel, 35 00:02:35,620 --> 00:02:37,880 also haben wir diese beiden Informationen. 36 00:02:37,960 --> 00:02:39,990 Dies sendet dort eine Get-Anfrage 37 00:02:40,000 --> 00:02:45,830 und das ist in Ordnung, da wir eine Get-Anfrage senden müssen und natürlich die Antwort abwarten können 38 00:02:45,970 --> 00:02:50,700 und ich die Antwort in einer Konstanten speichern möchte, um sie zu verwenden. 39 00:02:50,760 --> 00:02:57,690 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 40 00:02:57,690 --> 00:02:59,930 hier einen neuen Fehler auslösen. Es ist ein 41 00:02:59,970 --> 00:03:01,630 Fehler aufgetreten. Daher können Sie 42 00:03:01,710 --> 00:03:05,850 die Fehlerbehandlung natürlich auch so einrichten, wie Sie es gelernt haben es im HTTP-Modul, aber 43 00:03:05,860 --> 00:03:06,890 hier gehe ich 44 00:03:07,200 --> 00:03:09,640 davon aus, dass dies funktionieren wird und jetzt können 45 00:03:09,840 --> 00:03:14,970 wir die Antwortdaten erhalten, indem wir auf die Antwort warten. json, das den Text der Antwort 46 00:03:14,980 --> 00:03:21,730 extrahiert und in normales Javascript konvertiert. Im Moment werde ich diese Antwortdaten einfach auf der Konsole protokollieren, 47 00:03:21,730 --> 00:03:26,780 damit wir eine Vorstellung davon bekommen, was sich darin befindet, und es 48 00:03:26,920 --> 00:03:28,340 jetzt einfach versuchen. 49 00:03:29,230 --> 00:03:34,960 Versuchen wir, einen neuen Ort hinzuzufügen, den Benutzerstandort abzurufen und auf Ort speichern zu klicken. Dies ist 50 00:03:34,960 --> 00:03:37,350 auch ohne Ausfüllen des Restes möglich, 51 00:03:37,370 --> 00:03:43,840 da wir hier unter iOS keine Validierung erhalten haben. Das funktioniert natürlich, ich bekomme einen Fehler wegen fehlender Daten, aber wir 52 00:03:43,840 --> 00:03:48,500 bekommen auch das Ergebnis unserer HTTP-Anfrage und das ist dieses super große Objekt dort, jetzt ist das 53 00:03:48,560 --> 00:03:51,190 wirklich ein großes Objekt, wie Sie sehen können. 54 00:03:51,760 --> 00:03:58,390 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 55 00:03:58,390 --> 00:04:02,310 dort haben wir die verschiedenen Komponenten dieser Adresse, aber wenn Sie ein wenig nach 56 00:04:02,320 --> 00:04:09,220 unten scrollen, wir Neben diesem Array haben wir auch diesen formatierten Adressschlüssel. In unserem Ergebnisobjekt hier haben wir also nicht nur dieses 57 00:04:09,280 --> 00:04:13,930 Array, sondern auch eine formatierte Adresse, und das ist es, wonach ich suche. Dies 58 00:04:13,930 --> 00:04:14,690 ist 59 00:04:14,710 --> 00:04:21,360 das, was ich möchte. Ich möchte diese formatierte Adresse, damit wir sie aus unserer Antwort extrahieren können Daten hier. 60 00:04:21,360 --> 00:04:26,510 Anstatt es hier zu protokollieren, überprüfe ich nur, ob wir möglicherweise keinen Antwortdaten-Ergebnisschlüssel haben. Wenn dieser 61 00:04:26,520 --> 00:04:34,300 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 62 00:04:34,300 --> 00:04:35,960 in der Lage, es abzurufen. 63 00:04:35,980 --> 00:04:43,210 Hier kann ich also meine Adresse ableiten, indem ich auf die Ergebnisse der Antwortdaten zugreife, und dort, in der ersten Werbebuchung, finden wir 64 00:04:43,280 --> 00:04:43,790 tatsächlich 65 00:04:43,810 --> 00:04:49,540 die formatierte Adresse, und Sie können dieses Objekt, das ich Ihnen gerade gezeigt habe, einfach untersuchen, um eine 66 00:04:49,540 --> 00:04:52,090 Vorstellung von seiner vollständigen Struktur zu erhalten . 67 00:04:52,090 --> 00:04:58,570 Natürlich dokumentieren die offiziellen Dokumente auch, wie diese Daten aussehen, die Sie zurückerhalten. Jetzt haben wir hier die formatierte Adresse und 68 00:04:58,570 --> 00:05:03,550 deshalb kann ich sie so abrufen und jetzt bekommen wir alles, was wir brauchen. 69 00:05:04,420 --> 00:05:09,280 Wenn wir jetzt etwas in der Datenbank speichern, kann ich meine gerade extrahierte Adresse anstelle der Dummy-Adresse verwenden, 70 00:05:09,280 --> 00:05:15,210 und hier kann ich für den Breitengrad den Standort verwenden. lat, für den Längengrad 71 00:05:15,430 --> 00:05:23,100 kann ich nicht überraschend den Standort verwenden. Zum Versenden von Daten können wir auch zusätzliche Informationen hinzufügen. 72 00:05:23,520 --> 00:05:32,100 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 73 00:05:32,100 --> 00:05:40,320 ist standort. lng und jetzt werden all diese Daten mit unserem Aktionsobjekt weitergegeben 74 00:05:40,320 --> 00:05:42,380 und erreichen daher unseren Reduzierer. 75 00:05:42,480 --> 00:05:47,940 Im Reduzierer müssen wir jetzt sicherstellen, dass wir die neuen Adress- und Koordinatenfelder verwenden, die wir erhalten. Im Ortsreduzierer möchten wir 76 00:05:47,940 --> 00:05:53,750 unseren Platz hier mit diesen zusätzlichen Daten initialisieren. Dazu müssen wir 77 00:05:53,770 --> 00:05:58,150 zunächst das Ortsmodell optimieren, um diese Daten zu erwarten. 78 00:05:58,150 --> 00:06:04,990 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 79 00:06:04,990 --> 00:06:05,530 hier 80 00:06:05,530 --> 00:06:08,740 speichern, den Breitengrad und den Längengrad 81 00:06:08,880 --> 00:06:17,460 speichern, damit das Modell vorbereitet ist und mit dem Modell vorbereitet, um diese zusätzlichen Daten wieder in den Reduzierer 82 00:06:17,460 --> 00:06:22,500 zu bekommen, sollten wir dies hinzufügen, wenn wir füge einen Platz hinzu. 83 00:06:22,500 --> 00:06:30,420 Also hier fügen wir dann als Adresse die Aktion hinzu. placeData. Adresse, weil ich das gerade in den 84 00:06:30,420 --> 00:06:35,310 Ortsaktionen hier hinzugefügt habe, diesen Adressschlüssel und wir können auch die Koordinaten erhalten. 85 00:06:35,310 --> 00:06:40,860 Für den Spielraum hier gebe ich also eine Aktion ab. placeData. Koordinaten. lat und für 86 00:06:40,860 --> 00:06:50,620 die Länge passiere ich Aktion. placeData. Koordinaten. lng. Damit werden hier Orte 87 00:06:50,620 --> 00:06:51,510 initialisiert. 88 00:06:51,520 --> 00:06:57,550 Wenn wir sie jetzt aus der Datenbank laden und unsere Orte festlegen, sollten wir daher 89 00:06:57,550 --> 00:07:01,650 auch unser Ortsmodell korrekt initialisieren und die Daten nehmen, die 90 00:07:02,020 --> 00:07:07,210 sich bereits in der Datenbank befinden. Behalten Sie also die Adresse, den Breitengrad 91 00:07:07,240 --> 00:07:13,940 und den Längengrad bei ziemlich einfach und deshalb haben wir jetzt hoffentlich alle Daten und verwenden alle Daten. 92 00:07:14,330 --> 00:07:16,340 Um zu sehen, ob das funktioniert, müssen 93 00:07:16,340 --> 00:07:21,760 wir an dem Platzelement arbeiten, das wir hier auf der Startseite ausgeben. Wir können es auf Android sehen, damit 94 00:07:21,950 --> 00:07:23,800 wir hier möglicherweise auch die Adresse 95 00:07:24,080 --> 00:07:29,540 anzeigen und wir müssen auch an dem Ort arbeiten Detailbildschirm. Lassen Sie uns daran arbeiten, damit wir sehen können, wie 96 00:07:29,540 --> 00:07:30,680 alle Teile zusammenkommen.