Przejdźmy do Redux, do akcji miejsc, które teraz również otrzymują obiekt lokalizacji i pamiętajmy, że
jest to obiekt, który wygląda
tak, więc ma tutaj klucz do lat i lng.
Więc w miejscach akcji, dodaj miejsce, otrzymamy ten obiekt lokalizacji i tutaj, oczywiście, chcę go zapisać w mojej bazie danych, chcę
go przechowywać w moim sklepie
Redux i jak
wspomniałem, chcę dostać tego człowieka czytelny adres, właściwie
i
do tego możemy użyć innego Google API.
Jeśli szukasz interfejsu do geokodowania API Map Google, znajdziesz ten link
tutaj, a jest to interfejs API, który pozwala ci tłumaczyć adresy na współrzędne lub współrzędne na adresy.
Współrzędne w adresach nazywane są wyszukiwaniem wstecznym, więc możemy kliknąć tam odwrotne geokodowanie, a to mówi nam, jak
to działa, a do tego potrzebny jest klucz API Map Google,
który skonfigurowałem
wcześniej w tym module i teraz możemy wyślij prośbę na
koniec do tego adresu URL tutaj. Możemy więc skopiować cały adres URL i wysłać do niego żądanie HTTP.
Teraz nie wygeneruje to obrazu, ale zwróci nam trochę danych JSON, więc wyślemy
to żądanie z interfejsem API pobierania, jak się tego nauczyłeś w module HTTP, a ja po prostu zrobię to tutaj w mojej
procedurze dodawania akcji w ta wewnętrzna funkcja. Oczywiście możesz go również zlecić na zewnątrz w
osobnym pliku, jeśli chcesz zachować ten plik nieco szczuplejszy.
Tak więc możemy użyć interfejsu API pobierania i wysłać zapytanie na adres URL, który utworzę tutaj jako
ciąg znaków z tykającymi znakami wstecznymi, aby łatwiej było wstrzykiwać dane dynamiczne i tam chcę skopiować ten adres URL i wkleić go tam
.
Okej, to
nie działa, więc pozwól mi ręcznie go pobrać, a teraz wkleić tam i dla klucza API, oczywiście
chcę użyć tej zmiennej środowiskowej,
którą wcześniej skonfigurowałem, więc zaimportuj env z pliku env.
Być może pamiętasz, że jest to plik zawierający obiekt, który przechowuje mój klucz API.
Więc teraz mogę zastąpić to tutaj, kluczową rzeczą API tutaj, mogę zastąpić to dynamicznie wstrzykiwaną env.
wartość googleapikey i oczywiście szerokość i długość geograficzna również muszą być ustawiane dynamicznie.
Upewnij się, że nie usuwasz przecinku między tymi
dwoma, ale teraz w mojej lokalizacji można znaleźć szerokość geograficzną, która oczywiście ma klucz Lat w sposobie, w jaki
ją konfigurujemy, zawsze możesz zobaczyć to tutaj, na dole w konsoli i lokalizacja jako klucz
lng, więc mamy te dwie informacje.
To wysyła żądanie get i
jest to w porządku, ponieważ musimy wysłać żądanie get i oczywiście możemy zatem poczekać na
odpowiedź i chcę przechowywać odpowiedź w sposób ciągły, aby z niej skorzystać.
Następnie możemy sprawdzić, czy ta odpowiedź może nie być w porządku, powinna być w porządku, ale jeśli nie, możemy tu
rzucić nowy błąd, coś poszło nie
tak i oczywiście można również
skonfigurować obsługę błędów w taki sam sposób, jak się nauczyłeś w module
HTTP, ale
tutaj zakładam, że to zadziała i teraz
możemy uzyskać dane odpowiedzi, czekając na odpowiedź. json, który wyodrębnia treść odpowiedzi
i konwertuje ją do normalnego Javascript, i na razie po prostu konsoluję te dane
odpowiedzi, abyśmy mogli zorientować się, co tam jest, a teraz po
prostu spróbujmy.
Spróbujmy dodać nowe miejsce, uzyskać lokalizację użytkownika i kliknąć zapisz miejsce, a my możemy to
zrobić nawet bez wypełniania reszty,
ponieważ nie otrzymaliśmy tutaj żadnej weryfikacji na iOS. Więc to działa, oczywiście otrzymuję błąd z powodu brakujących danych,
ale tak naprawdę otrzymujemy wynik naszego żądania HTTP i to jest ten super ogromny obiekt, teraz
jest to naprawdę duży obiekt, jak można powiedzieć.
Teraz na końcu, co tam jest, w tym dużym obiekcie jest to obiekt tutaj, mamy tutaj klucz wyników, który jest tablicą
i mamy różne składniki tego adresu, ale jeśli przewiniesz trochę w dół,
my oprócz tej tablicy mamy również ten sformatowany klucz adresu. Więc w naszym obiekcie wynikowym nie mamy tylko
tej tablicy, ale mamy również sformatowany adres i właśnie tego
szukam,
tego właśnie chcę, chcę ten sformatowany adres, abyśmy mogli wyodrębnić go z naszej odpowiedzi dane tutaj.
Zamiast rejestrować go tutaj, po prostu sprawdzam, czy może nie mamy klucza wyników danych
odpowiedzi, jeśli go w jakiś sposób brakuje, w tym przypadku również wyrzucę błąd, ale jeśli przejdziemy przez tę kontrolę, powinienem być
w stanie go odzyskać.
Więc tutaj mogę uzyskać mój adres, uzyskując dostęp do wyników danych odpowiedzi, a następnie pierwszy element wiersza, gdzie właśnie
znajdujemy
sformatowany adres i możesz po prostu sprawdzić ten obiekt, który właśnie pokazałem, aby uzyskać
pomysł na jego pełną strukturę .
Oczywiście oficjalne dokumenty dokumentują również, jak wyglądają te dane, które otrzymujesz. Mamy teraz sformatowany adres i dlatego mogę
go pobrać w ten sposób, a teraz otrzymujemy wszystko, czego potrzebujemy.
Kiedy teraz przechowujemy coś w bazie danych, mogę użyć adresu, który właśnie wyodrębniłem, zamiast adresu
zastępczego, a tutaj dla szerokości geograficznej mogę użyć lokalizacji. lat, nic dziwnego, że
na długość geograficzną mogę użyć lokalizacji. Jeśli chodzi o wysyłanie danych, możemy również dodać dodatkowe informacje.
Możemy dodać adres i może klucz coords, który przechowuje obiekt, w którym mamy łat, czyli lokalizację. lat i lng,
czyli lokalizacja. lng i teraz wszystkie te dane są przekazywane wraz z naszym obiektem akcji
i dlatego docierają do naszego reduktora.
Dlatego w reduktorze musimy teraz upewnić się, że używamy nowego adresu i pól współrzędnych, które otrzymujemy. Dlatego w reduktorze miejsc
chcemy zainicjować nasze miejsce tutaj tymi dodatkowymi danymi i przede wszystkim
musimy dostosować model miejsca, aby oczekiwać tych danych.
Więc tutaj chcę uzyskać adres i chcę uzyskać szerokość i długość geograficzną. Możemy więc przechowywać to wszystko,
przechowywać adres tutaj, przechowywać szerokość i długość
geograficzną, dzięki czemu model jest przygotowany, a model przygotowany, aby odzyskać te dodatkowe dane z
powrotem do reduktora, powinniśmy to dodać, gdy dodaj miejsce.
Więc tutaj dodajemy jako adres akcję. placeData. adres, ponieważ to właśnie dodałem
tutaj do akcji miejsc, ten klucz adresu i możemy również uzyskać współrzędne.
Więc dla szerokości geograficznej tutaj mija akcja. placeData. coords. lat i
na długości geograficznej, mijam akcję. placeData. coords. lng. Dzięki temu miejsca są inicjowane
tutaj.
Teraz, kiedy ładujemy je z bazy danych, kiedy ustawiamy nasze miejsca, powinniśmy również poprawnie
zainicjować nasz model miejsca i pobrać dane, które już
są w bazie danych, więc zachowaj adres, zachowaj szerokość i długość geograficzną,
więc to całkiem proste i dlatego mamy nadzieję, że mamy wszystkie dane i wykorzystujemy wszystkie dane.
Teraz, aby zobaczyć, czy to działa,
musimy popracować nad elementem miejsca, który wyświetlamy tutaj na stronie początkowej, możemy zobaczyć go na Androidzie, więc
może też tutaj pokazamy adres
i musimy też popracować nad miejscem ekran szczegółów. Pracujmy nad tym, abyśmy mogli zobaczyć, jak wszystkie
elementy się łączą.