Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP

Budowanie swojego startupu za pomocą PHP: Geolokalizacja i Miejsca Google

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup With PHP: Feature Requirements and Database Design
Building Your Startup With PHP: Localization With I18n

Polish (Polski) translation by Władysław Łucyszyn (you can also view the original English article)

Final product image
What You'll Be Creating

To jest trzecia część budowania Your Startup z serii PHP na Tuts+. W tej serii prowadzę Cię przez uruchomienie startupu od koncepcji do rzeczywistości za pomocą mojej aplikacji Meeting Planner, która jest prawdziwym przykładem. Na każdym etapie wydamy kod Meeting Planner jako przykłady open source, z których możesz się uczyć.

W tej części zamierzamy zbudować pewną podstawową infrastrukturę dla koncepcji Miejsca, w której ludzie mogą planować spotkania. Omówimy podstawy pracy z Miejscami, korzystając z naszego schematu bazy danych, integracji funkcji geolokalizacji i interfejsów API HTML5 w Mapach Google i Miejscach Google. Chodzi o to, aby wykorzystać te funkcje, aby szybko i łatwo wybrać lokalizację swoich spotkań. Nie uwzględnimy całego dopasowania i końca tego odcinka - ale omówimy to więcej w nadchodzącym samouczku.

Cały kod dla Meeting Planner jest napisany w Yii2 Framework for PHP i wykorzystuje Bootstrap i JavaScript. Jeśli chcesz dowiedzieć się więcej o Yii2, zapoznaj się z naszą równoległą serią Programming With Yii2 at Tuts+.

Przypominam, że uczestniczę w wątkach komentarzy poniżej. Jestem szczególnie zainteresowany, jeśli masz różne podejścia lub dodatkowe pomysły, lub chcesz zaproponować tematy do przyszłych tutoriali. Życzenia dotyczące funkcji Meeting Planner są również mile widziane.

Budowanie funkcji miejsc

Zanim użytkownicy będą mogli planować spotkania, potrzebujemy ich, aby znaleźć i zasugerować swoje ulubione miejsca. Początkowo dla uproszczenia będziemy budować funkcję wyszukiwania i tworzenia lokalizacji oddzielnie od funkcji planowania.

Użytkownicy mogą dodawać miejsca na trzy sposoby:

  1. Korzystając z Geolokalizacji HTML5, mogą wyszukać swoją bieżącą lokalizację przez Wi-Fi i dodać to jako miejsce.
  2. Korzystając z interfejsu API Miejsc Google, mogą wyszukać miejsce w bazie danych Miejsc za pomocą funkcji autouzupełniania. W końcu, gdy znamy ich bieżącą lokalizację, możemy ograniczyć wyniki wyszukiwania do pobliskich miejsc.
  3. Ręczne wprowadzanie. Użytkownicy mogą wpisać adres i opis swojego miejsca, np. Biura lub domu.

Rozszerzanie schematu miejsca

Oto schemat miejsc, które opracowaliśmy w części drugiej:

Uwaga: nie ma żadnych geolokalizacji związanych z miejscem w tej tabeli. To dlatego, że silnik InnoDB MySQL nie obsługuje indeksów przestrzennych. Stworzyłem zatem tabelę pomocniczą za pomocą tabeli MyISAM dla współrzędnych geolokacji w Miejscach. To jest tabela Place_GPS:

Jak jestem w trybie szybkiego prototypowania, mam zamiar rozszerzyć schemat korzystając migracje Yii i mogę wreszcie zrobić przyszłych korekt, jak również.

Aby rozszerzyć schemat, tworzymy nową migrację w Yii:

I podaj następujący kod:

Spowoduje to dodanie kolumn dla slug, strony internetowej, full_address, otoczenia i notatek. Ślimak to adres przyjazny dla adresu URL do wyświetlania strony widoku Miejsca, którą Yii może wygenerować dla nas automatycznie. Inne pola będą czasami aktualizowane przez użytkowników, a inne czasy wypełniane przez interfejs API Miejsc Google.

Aby uruchomić migrację, wprowadzamy:

Powinieneś zobaczyć:

Aktualizacja kodu CRUD

Jeśli przejdziesz na stronę Miejsca, np. http://localhost:8888/mp/index.php/place/create, tworzyć zobaczysz domyślny Yii2 automatycznie wygenerowany formularz z wszystkich naszych pól schematu:

Create Place The Default Yii2 Form

W tym samouczku ponownie użyłem generatora kodu Yii, Gii, używając kroków z części drugiej do zbudowania kodu dla nowego schematu bazy danych. Poleciłem Gii, aby nadpisał kod CRUD z wcześniejszych wersji.

Uwaga: Najłatwiej jest zastąpić źródło próbki z części drugiej źródłem próbki z tej części. Zobacz link Github w prawym górnym rogu.

Będziesz również musiał zaktualizować biblioteki naszych dostawców za pomocą programu Composer, aby zintegrować obsługę bibliotek 2amigOS Yii2 Google Maps i Places. Oto część naszego pliku composer.json:

Następnie uruchom aktualizację programu Composer, aby pobrać pliki:

Trzy różne sposoby dodawania miejsc

Będziemy budować trzy różne akcje i formularze kontrolerów dla każdego z tych miejsc. Pamiętaj, że musimy również zintegrować odpowiedni model, PlaceGPS, aby przechowywać współrzędne GPS dla każdego miejsca, niezależnie od tego, jak użytkownik je doda.

Dodawanie miejsc do paska nawigacyjnego

Aby dodać link Miejsca do paska nawigacji, edytuj /views/layouts/main.php. Jest to domyślny układ strony, z którym Yii obejmuje wszystkie nasze pliki widoku. Zawiera nagłówek, pasek nawigacyjny Bootstrap i stopkę.

Poniżej w pozycji $menuItems dodaję wpis tablicy dla menu Miejsce:

Widok indeksu miejsc

Widok indeksu miejsc będzie wyglądał tak po dodaniu przycisków do trzech sposobów dodawania miejsc:

Meeting Planner Place Index Page

W /views/place/index.php możemy dodać trzy przyciski add place:

Możemy również dostosować kolumny wyświetlane w widoku, w tym budować niestandardową kolumnę do metody Place, która wyświetla przyjazną nazwę dla typu miejsca:

Oto podzbiór metod typu miejsca w /models/Place.php:

Zwróć uwagę, że jeszcze nie zajęliśmy się stanem logowania ani własnością użytkowników miejsc. Powrócimy do tego w następnym samouczku. Z powodu złożoności i zakresu tego etapu pozostawiamy garść gotowych elementów do późniejszego samouczka.

Dodawanie miejsc za pomocą geolokacji HTML5

Jednym ze scenariuszy dodawania miejsc jest stworzenie miejsca na dom lub biuro. Zamiast wymagać, aby użytkownicy wpisywali te informacje ręcznie, często możemy to wygenerować automatycznie za pomocą funkcji Geolokalizacja HTML5.

Geolokalizacja HTML5 wykorzystuje Twój adres Wi-Fi do określenia punktów GPS dla bieżącej lokalizacji. Nie działa z połączeniami komórkowymi / komórkowymi i nie jest niezawodny.

Aby ta funkcja działała, użytkownik prawdopodobnie będzie musiał udzielić pozwolenia na przeglądarkę w celu geolokacji. Poszukaj wyskakującego okienka poniżej paska adresu, jak pokazano poniżej:

Chrome Browser Asking Permission for Geolocation

Używam skryptu geoposition z estebanav do obsługi Geolokalizacji HTML5 z jak najszerszym wsparciem przeglądarki.

Dodanie akcji kontrolera miejsca dla geolokalizacji

W module frontend/controllers/PlaceController.php utworzymy nową metodę działania Create_geo:

Ponieważ formularz nie jest jeszcze przesyłany, Yii wyświetli widok create_geo, aby wyświetlić formularz.

W frontend/views/place/create_geo.php uwzględnimy _formGeolocate.php:

Spójrzmy na pierwszą część _formGeolocate. Musimy dołączyć JavaScript do pliku Geoposition.js, a także nasz własny kod geolokalizacji, aby zintegrować geopozycję z naszym formularzem. Sposób, w jaki robi to Yii, jest związany z pakietami zasobów. Zdefiniujesz pakiet zasobów dla różnych stron, co pozwala zoptymalizować, które JS i CSS są ładowane w różnych obszarach aplikacji. Najpierw utworzymy LocateAsset:

W frontend/assets/LocateAsset.php zdefiniujemy kod JavaScript, który musimy uwzględnić:

LocateAsset wstępnie ładuje interfejs API Map Google, bibliotekę geoPosition i nasz niestandardowy kod Locate.js, który jest pokazany poniżej:

Zasadniczo geolokalizacja jest inicjowana, gdy użytkownik uruchamia funkcję beginSearch. Kod Geoposition wywołuje funkcję success, gdy zwraca z lokalizacją użytkownika. Dostosowujemy funkcję sukcesu, aby wyświetlać mapę w miejscu i wypełniać nasze pola ukrytych formularzy z zwracaną szerokością i długością geograficzną. Kiedy użytkownik opublikuje formularz, współrzędne lokalizacji będą dostępne w naszej aplikacji internetowej.

Oto kod w ramach Success(), który wypełnia pola formularza współrzędnymi lokalizacji:

Reszta _formGeolocate.php jest podzielona na dwie równe części. Po lewej stronie udostępniamy pola formularza, w których użytkownik może wprowadzić dane geolokacyjne oraz ukryte pola, które są potrzebne do obsługi JavaScript. Po prawej stronie pozostawiamy miejsce na przycisk uruchamiający geolokację i wyświetlanie mapy. Funkcja success() wypełnia znacznik <article> mapą.

Oto, jak wygląda początkowo formularz:

Meeting Planner Create Place by Geolocation Form

Kliknij przycisk Wyszukaj lokalizację, aby zainicjować geolokalizację. Ponownie, poszukaj żądania uprawnień na pasku nawigacji przeglądarki.

Po znalezieniu Twojej lokalizacji pokażemy Twoją lokalizację na mapie:

Meeting Planner Create Place by Geolocation After Mapping

Uwaga: ustawiłem opóźnienie geolokalizacji na pięć sekund, ale czasami trzeba ponownie załadować stronę, aby uzyskać poprawną odpowiedź po udzieleniu pozwolenia. Niektóre lokalizacje Wi-Fi są mniej określone niż inne.

Rzućmy okiem na kod do przesłania formularza kontrolera spotkania:

Na razie wstawiamy symbol zastępczy dla użytkownika created_by i pozostawiamy obsługę błędów na później (przepraszam purystów, to nie jest tematem tego tutoriala w tej chwili).

Po utworzeniu formularza i utworzeniu Miejsca pobierzemy punkt geolokalizacji z formularza (te ukryte pola wypełnione przez skrypt Locate.js) i dodamy wiersz do powiązanego Place PlacePSG.

Jak wspomniałem w części drugiej, oddzielamy dane geolokacyjne w innej tabeli, ponieważ silnik InnoDB MySQL nie obsługuje indeksów przestrzennych. Poprawi to także wydajność zapytań, aby znaleźć najbliższe miejsca spotkań między dwoma użytkownikami.

Oto metoda addGeometryByPoint w modelu Place.php:

Oto jak powinna wyglądać strona Indeks miejsca po zapisaniu rekordu:

Meeting Planner Place Index Page with New Places

Jeśli chcesz zobaczyć kolejną implementację Geolokalizacji HTML5 dla Yii 1.x, sprawdź Jak korzystać z map okolic Zillow i Geolokacji HTML5.

Wyświetlanie miejsc w Google Maps

Jeśli klikniesz ikonę polecenia widoku powiązaną z naszym nowym miejscem w powyższym widoku indeksu, zobaczysz to:

Meeting Planner View A Place With Google Maps

Dostosowaliśmy stronę widoku generowanego przez Gii i dodaliśmy kod, aby narysować mapę Google przy użyciu rozszerzenia Yii2 Google Maps.

Oto akcja View w PlaceController.php:

Oto metoda getLocation w modelu Place.php. Pobiera współrzędne lokalizacji z tabeli PlaceGPS:

Oto część pliku widoku, który renderuje stronę. Lewa strona składa się ze standardowego widżetu DetailView Yii2 na razie. Prawa strona generuje kod, który rysuje mapę:

Dodawanie z interfejsu API Miejsc Google

Funkcja autouzupełniania Miejsc Google to niesamowicie szybki i prosty sposób dodawania miejsc spotkań. Używam rozszerzenia Miejsc Google Yii2 przez 2amigOS.

Meeting Planner The Google Place Autocomplete Service

W PlaceController.php dodamy akcję dla Create_place_google:

Plik /frontend/views/place/create_place_google.php wyświetli formularz i zainicjuje JavaScript potrzebny do obsługi autouzupełniania:

Programista Petra Barus dostarczył rozszerzenie Miejsc Google dla Yii1.x. W tym samouczku ręcznie zakodowałem podstawową obsługę Yii2. Jednak Barus był na tyle uprzejmy, aby wypuścić rozszerzenie Yii2 zaledwie kilka dni później. Jeszcze nie zintegrowałem jego kodu. Oto jego najnowsze rozszerzenie autouzupełniania Miejsc Google Yii2.

Oto pakiet MapAsset, który tworzę dla powiązanego JavaScript, który będzie potrzebny:

Oto kod formularza _formPlaceGoogle.php:

Istnieje pole searchbox, które akceptuje dane wejściowe autouzupełniania użytkownika. Istnieje również wiele ukrytych pól, które nasz JavaScript ładuje z wynikami z usługi Miejsc Google.

Oto plik create_place.js, który realizuje całą "magię":

Metoda setupListeners() łączy nasze pole pola searchbox z usługą autouzupełniania Miejsc Google. Kiedy występuje zdarzenie place_changed, wywoływana jest funkcja populateResult() w celu wypełnienia ukrytych pól w formularzu danymi z Google i załadowania mapy, która jest wyświetlana w prawej połowie formularza.

Meeting Planner Add From Google Place Autocomplete After LoadMap

Możesz użyć debugera przeglądarki do sprawdzenia ukrytych pól po ich wypełnieniu danymi formularza za pomocą JavaScript. Dane te zostaną wysłane wraz z formularzem po przesłaniu, abyśmy mogli dodać je do bazy danych Miejsca.

Meeting Planner Hidden Fields from Google Places Autocomplete

Oto pozostały element akcji składowania PlaceController Create_place_google:

Jest bardzo podobny do działania Create_geo. Mamy oddzielną metodę modelu Place.php, aby uprościć zbieranie danych o lokalizacji. Oto addGeometry():

Ustawianie geograficznych filtrów granicznych dla wyszukiwania autouzupełniania Szukaj

Usługa autouzupełniania Miejsc umożliwia także ustawienie geograficznego prostokąta ograniczającego w celu przefiltrowania wyszukiwania. Gdy użytkownik zacznie pisać, autouzupełnianie będzie używać tylko miejsc znajdujących się w odległości dziesięciu mil od nich. Ponieważ nie ustawiliśmy bieżącej lokalizacji użytkownika jako zmiennej sesji, w tej chwili nie implementuję prostokąta ograniczającego. Ale możemy to zrobić później. Oto przykład setupBounds():

Ręczne dodawanie miejsc

Trzeci sposób, w jaki użytkownicy mogą dodawać miejsca, polega na ręcznym podawaniu szczegółów i informacji adresowych. Po przesłaniu formularza spróbujemy wyszukać adres i uzyskać dane geolokacyjne, ale jest w porządku, jeśli nie możemy tego znaleźć. Podejście ręczne pozwoli użytkownikom dodawać miejsca, takie jak ich dom lub biuro, które mogą nie chcieć kojarzyć z danymi mapowania Google.

Oto, jak wygląda formularz:

Meeting Planner Manually Add Place

Oto jak wygląda kod akcji składania PlaceController.php. Używamy klienta geokodującego Mapy 2Amigos, aby wyszukać lokalizację z adresu full_address. Istnieje oczywiście wiele ulepszeń, które możemy wprowadzić, aby zachęcić użytkownika do wprowadzenia pełnego adresu lub umożliwienia im późniejszego połączenia lokalizacji Miejsc Google.

Co dalej?

Zakres tego samouczka okazał się dość duży. Chciałem pokazać różne komponenty związane z geolokalizacją i wykorzystaniem map bez pomijania zbyt wielu elementów procesu kodowania. Oczywiście w tej chwili jest wiele skrótów. W następnym samouczku będziemy nadal udoskonalać Miejsca w całym systemie, koncentrując się na uprawnieniach użytkowników, kontroli dostępu, dodawaniu wsparcia dla ulubionych miejsc użytkownika i innych ulepszeniach.

oniżej możesz zamieścić swoje pytania i komentarze. Jestem szczególnie zainteresowany, jeśli masz różne podejścia lub dodatkowe pomysły, lub chcesz zaproponować tematy do przyszłych tutoriali. Możesz również skontaktować się ze mną na Twitterze @reifman lub bezpośrednio do mnie. Śledź moją stronę instruktora Tuts+, aby zobaczyć przyszłe artykuły z tej serii.

Рowiązane linki

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.