Zgodnie z ustaleniami z poprzedniego wpisu będę stosował się do listy priorytetów. Będę wykonywał wszystko zgodnie z kolejnością i bez wdawania się w szeczegóły estetyczne. Najważniejszy jest cel, upiększanie wszystkiego zostanie zostawione na koniec. Oczywiście nie można generalizować. Mimo wszystko wciąż ważna będzie estetyka kodu i jego możliwości późniejszego utrzymania i modyfikacji.
Geolokalizacja
Posiadając utworzone zakładki na dole ekranu:
Mogę przejść do umieszczenia w głównej części aplikacji mapy googla. Do tego celu posłuzy nam plugin Cordovy dla geolokalizacji.
> cordova platform add cordova-plugin-geolocation --save
Szablonowa aplikacja narzuca mi korzystanie z TypeScript, a ja nie chcę tego za bardzo zmieniać. W kontrolerach napisanych jako klasy przyjmowane wartości są zawsze interfejsami. Są to tak zwane definicje TypeScript. Do każdego pluginu potrzebuję taką definicję. Oficjalne wydanie nie zawiera nic dla pluginu geolokalizacji, na szczęście znalazłem nieoficjalny interfejs (może kiedyś zrozumiem jak napisać go samemu). Załączyłem go w odpowiednim miejscu i zastosowałem w kontrolerze w następujący sposób:
I do tego sprowadziło się załączanie pluginu geolokalizacji z mojej aplikacji.
Mapa
Przyszedł czas na mapę. Głównym punktem startowym było załączenie do do ładowanych skryptów API Google Maps a w kontrolerze modułu Home dodanie DIVa zawierającego mapę:
W tym momencie byłem na dobrej drodze żeby wszystko ukończyć. Do wykonania wyświetlenia mapy wystarczyło napisać coś w kontrolerze, a dokładnie w metodzie onEnter() wywoływanej podczas załadowania podstrony:
Opisując po kolei:
Na początku definiujemy DIV z szablonu, do którego zostanie załadowana mapa.
Następnie przy pomocy interfejsu pobieramy pozycję. Następnie pierwszym parametrze metody then() akcje wykonywane po pomyślnym zakończeniu pobrania pozycji, w drugim akcję błędu.
Reszta kodu to już standardowe wykorzystanie API Google Maps z użyciem pobranych danych na temat pozycji użytkownika.
Końcowa rzecz jaką musiałem wykonać to dodać style CSS dla kontenera mapy. W obecnym stanie będzie on zwinięty, a mapa niewidoczna.
W tym celu załączyłem plik SASS:
Aplikacja
W taki oto sposób powstała aplikacja z mapą pokazującą naszą pozycję.
Pierwszy punkt priorytetów MUST wykonany!
Brak komentarzy:
Prześlij komentarz