Ostatnio sporo pisałem o tym, że ciągle pracuje nad aplikacją do monitorowania jednostek morskich (na terytorium Norwegii) będąc zainspirowany konkursem Przemka Bykowskiego. Napotykałem na drodze dewelopmentu wiele niespodzianek, ale w końcu dopiąłem swego i aplikację mogę uznać za skończoną! Dzięki włożonej pracy w ten projekt nauczyłem się co nie co o Quarkusie i podszkoliłem się z Angulara. Natomiast w dzisiejszym wpisie chciałbym przedstawić od strony użytkownika wszystkie stworzone funkcjonalności. Przy okazji zachęcam również do zapoznania się z dostępną wersją wideo.
Opis działania aplikacji
Mapa plus panel logowania
Na samym początku warto zaznaczyć, że cały projekt do monitorowania jednostek morskich znajduje się na moim GitHub. Oczywiście zamieściłem na nim opis działania aplikacji wraz z instrukcją jej uruchomienia. Zachęcam więc do zajrzenia tam i podjęcia próby wystartowania projektu.
Przechodząc do rzeczy, jeśli wejdziemy na stronę główną aplikacji zastaniemy ekran jak przedstawiony poniżej. W centralnym miejscu widzimy mapę nakierowaną na półwysep Skandynawski. Umiejscowione są na niej 4 kolory markerów (na obrazki widać tylko 2), które określają ilość statków:
- fioletowy - od 1 do 5 statków w grupie
- czerwony - od 6 do 10 statków w grupie
- żółty - od 11 do 20 statków w grupie
- niebieski - powyżej 20 statków w grupie
Jeśli wskażemy na jeden z markerów to ukaże nam się dymek wskazujący ile dokładnie znajduje się w tym obszarze statków wraz z ich identyfikatorami MMSI. Jednak w przypadku, gdy będziemy przybliżać się coraz bardziej do wybranego miejsca to w pewnym momencie statki będą traktowane już indywidualnie o czym przekonamy się później.
Główny ekran aplikacji Barents Watch
Po lewej od mapy znajduje się panel zawierający pobieżną informacje o aplikacji, a także pasek narzędzi. Do wyboru dostępne są następujące opcje:
- “Map” - przejście do panelu informacyjnego oraz wyświetlenie aktualnych pozycji statków na mapie
- “Login” - przejście do panelu logowania do aplikacji (możliwa jest tam również rejestracja)
- “Filter On/Off” - wyłączenie/włączenie filtra, który pokazuje/chowa nieaktywne statki na mapie (takie, których ostatnia aktualna pozycja była starsza niż 5 minut od obecnego czasu)
- “Center” - wyśrodkowuje mapę do początkowego stanu
- “Show/Hide Panel” - pokazuje/chowa panel aplikacji
W celu korzystania z pełnego wachlarza możliwości aplikacji przejdźmy od razu do panelu logowania. Jeśli nie posiadamy konta oczywiście możemy je założyć wybierając przycisk “Sign In”. Należy na formularzu podać adres email w prawidłowym formacie oraz hasło składające się co najmniej z 4 dowolnych znaków.
Panel logowania do aplikacji
W przypadku braku konta oczywiście można stworzyć nowe
Panel od strony użytkownika
Dodawanie statków do śledzenia
Tak jak wspomniałem wcześniej, jeśli z odpowiednio bliskiej odległości spojrzymy na mapę dostrzeżemy wszystkie statki jako indywidualne jednostki. Niektóre z nich są oznaczone jako aktywne, a inne nieaktywne. Kryterium podziału jest takie, że gdy moment ostatniej pozycji statku jest późniejszy niż 5 minut od czasu bieżącego to statek uznaje się za nieaktywny. Wtedy oznaczony jest kolorem szarym. W innym przypadku jest on zielonym znacznikiem na mapie.
Przykład aktywnego i nieaktywnego statku
Jeżeli wybierzemy jeden ze statków, który chcielibyśmy śledzić to pojawi się dymek z podstawowymi informacjami o nim, czyli identyfikator, nazwa, typ, cel podróży oraz dane o ostatniej pozycji. Dodatkowo widnieje tam przycisk w kształcie plusa, który po kliknięciu doda dany statek do listy śledzonych obiektów.
Podstawowe informacje o wybranym statku
Komunikat o tym, że udało dodać się statek do śledzonych obiektów
Natomiast jeśli chcielibyśmy dodać ten sam statek ponownie do listy śledzonych statków to otrzymamy komunikat z błędem, że nie jest to możliwe. Kolejnym ograniczeniem jest, że możemy aktywnie śledzić tylko 10 statków w tym samym czasie. Z kolei jeśli dla części z nich wstrzymamy śledzenie i będziemy próbować dodawać kolejne statki to ich maksymalna ilość nie może przekroczyć 15.
Nie można śledzić dwa razy tego samego statku
Brak możliwości śledzenia aktywnie więcej niż 10 statków
Nie można śledzić więcej niż 15 statków w tym samym czasie
Wygląd panelu aplikacji
Gdy wybierzemy udostępnioną opcję “App” dla zalogowanych użytkowników otworzy nam się panel z listą aktualnie śledzonych statków. Mamy na niej liczbę porządkową, identyfikator MMSI oraz kilka akcji. Pierwszą z nich jest wyświetlenie informacji o całej historii koordynatów danego statku, gdy był aktywnie śledzony.
Panel aplikacji pokazuje aktualną listę śledzonych statków
Informacje o historii koordynatów wybranego statku
Kolejna opcja pozwala na wyśrodkowanie mapy nad danym statkiem. Oczywiście chodzi o jego najbardziej aktualną pozycję jaką znamy. Trzeci przycisk służy nam do wstrzymania lub wznowienia śledzenia danego statku. Zaraz sprawdzimy co to oznacza dla jego graficznej reprezentacji na mapie. Ostatnia opcja to całkowite usunięcie statku z listy śledzonych pozycji wraz z jego całą historią.
Wstrzymywanie/wznawianie śledzenia
W sytuacji, gdy już mamy klika statków na naszej liście i minie kilka dłuższych chwil to na mapie zaczną pojawiać się linie reprezentujące przebytą trasę przez dany statek. Okrągłym markerem natomiast zostanie zaznaczona jego aktualna pozycja. Jeżeli wstrzymamy śledzenie danego statku to jego reprezentacja graficzna przybierze szary kolor na mapie zamiast niebieskiego. Po paru minutach jeśli wznowimy śledzenie statku to zauważymy na mapie czerwony, przerywany odcinek symbolizujący fakt, że pomiędzy ostatnią znaną pozycją a pierwszą nową nie znamy dokładnej drogi jaką przebył statek. Gdy ponownie wstrzymamy śledzenie to linia znowu stanie się szara, a przerywany odcinek różowy.
Aktywnie śledzony statek wraz z zaznaczoną przerwą w śledzeniu
Wstrzymane śledzenie dla statku, który już wcześniej miał przerwę w śledzeniu
Ponowne wznowienie śledzenia statku
Finalny efekt
Jeśli przez dłuższy czas pozostawimy aplikację uruchomioną to jej działanie może naprawdę zaskoczyć. Poniżej przedstawiam widok dla śledzonych statków, których trasy są już bardziej okazałe. Widać, że niektóre z nich pływają cały czas w tym samym miejscu, a inne poruszają się sukcesywnie wzdłuż linii brzegowej.
Wynik działa aplikacji po dłuższym czasie
Podsumowanie
To by było wszystko co chciałem przekazać o mojej aplikacji. Cieszę się, że udało mi się ją doprowadzić do finalnego stanu jaki sobie zaplanowałem. Oczywiście można by ją było jeszcze bardziej rozwijać, ale nie wiążę z tą aplikacją dalszej przyszłości. Dobrnąłem do minimum, które chciałem stworzyć, aby móc je dodać do swojego portfolio. Ciebie również zachęcam do rozszerzania swoich kompetencji, a przy okazji do dowożenia projektów do ustalonego końca!