To ostatni obowiązkowy post zdefiniowany przez regulamin. Ale nie ostatni w ogóle. Dzisiaj opiszę jak zrealizowałem dostęp do danych pogodowych. Jest to również ostatni punkt priorytetu MUST. Bardzo dobrze się składa, że wszystkie wymagania z najwyższym priorytetem udało zrealizować się w założonym regulaminowym czasie konkursu.
Wyświetlanie informacji pogodowej z danego obszaru mapy było jednym z kluczowych funkcji niniejszej aplikacji. Moja wizja interfejsu jest taka, że oprócz pogody będzie jeszcze kilka innych kontrolek odpowiadających za pozostałe funkcje opisane we wspomnianym poście. Przełączając się pomiędzy nimi na zasadzie inputa typu RADIO, będziemy wyświetlać odpowiednie informacje ze wskazanego obszaru mapy. W obecnej formie funkcja pogody nie zadowala mnie (a jakże by inaczej) ale działa! Głównie chodzi (jak za każdym razem) o sposób prezentacji danych czyli wygląd GUI.
Interfejs
Rzeczą, od której zacząłem to sam przycisk uruchamiający funkcję informacji pogodowej. W tym celu w dobrze znanym już widoku mapy w górnej belce utworzyem button:
Już śpieszę z wyjaśnieniami. Samej budowy buttonu nie ma co opisywać. Natomiast kolejne atrybuty jak najbardziej.
- ng-click - kliknięcie wywołuje metodę z kontrolera z parametrem weather (tutaj w przyszłości dobre byłyby jakieś stałe z ENUMa)
- ng-class - dzięki temu mogę nadać przyciskowi klasę active co wpływa na jego wygląd. W tym przypadku klasa active jest nadana zawsze poza momentem
naciśnięciawybrania funkcji pogoda. Jaki to wygląd pokażę w screenie po opisaniu kontrolera.
Kontroler
Kontroler to ostatnie miejsce, w którym wprowadziłem zmiany.
Obsługa GUI
Do obsługi GUI wystarczy tylko tyle. Jak widać został dodany nowy atrybut kontrolera informujący o tym jaka operacja na mapie jest obecnie aktywna. Przyjmuje string lub null. Oraz metoda, za pomocą której ten atrybut ustawiamy. To wszystko doprowadza nas do następującego zachowania przycisku. Domyślnie jest on "przygaszony", a po kliknięciu w niego "zapala" się, co informuje nas o aktywowaniu funkcji pogodowej:
Pobieranie informacji pogodowej
Aby funkcja pogodowa zaczęła działać dodałem event click w obszarze mapy, zaraz po jej wywołaniu i metodę uruchamiającą aktywną funkcje programu:
Jak widać sprawdzam czy funkcja pogody jest aktywna, pobieram dane geograficzne zaznaczonego punktu i wykonuję zapytanie do OpenWeather API, które przy bezpłatnym planie daje dość duże możliwości, w postaci ograniczenia 60 zapytań na minutę. W dalszym kodzie przechwytuję odpowiedź, odpowiednio ją przetwarzam i dodaję marker w postaci ikony pogodowej na mapie. Niestety wadą tego rozwiązania jest konieczność dodawania dymków z pogodą, które w aplikacji mobilnej nie są najlepszym pomysłem. Prawdopodobnie w późniejszym etapie dodam wyświetlanie modala z dokładnymi informacjami. W tym momencie jest tylko ikonka, a reszta danych wyświetlana jest w konsoli:
Co dalej?
W dalszym ciągu będę starał się dodawać posty z postępu prac. Bardzo możliwe, że nie tak często jak dotychczas. Muszę przyznać, że jest to dla mnie dość dużym obciążeniem ale również daje mi pewną satysfakcję. Jedno co mogę zagwarantować, że aplikacja będzie rozwijać się dalej nawet jeśli nie uda mi się tych zmian regularnie opisywać.
Kolejne etapy to:
- Usprawnienie funkcji pogodowej
- Realizacja priorytetu SHOULD
Brak komentarzy:
Prześlij komentarz