Twórz niestandardowe mapy w aplikacjach mobilnych
W poprzednim wpisie opisaliśmy, jak zintegrować mapy z aplikacjami mobilnymi działającymi na różnych platformach, wykorzystując natywne aplikacje mapowe każdego urządzenia końcowego. Nasza przykładowa aplikacja generowała mapę z znacznikami wskazującymi lokalizacje głównych lotnisk w Stanach Zjednoczonych. Ilustracje przedstawiały mapy generowane przez tę samą aplikację na telefonie z systemem Android, na iPhone'ie oraz na komputerze z systemem Windows.
Co, jeśli lista lokalizacji, które mają zostać zmapowane, nie jest znana z góry, ale jest generowana w czasie rzeczywistym na podstawie aktywności użytkownika? MobileTogether, czyli Narzędzie do tworzenia aplikacji mobilnych, działające na różnych platformach i wykorzystujące technologię low-code, firmy Altova, umożliwia również programistom tworzenie niestandardowych map w aplikacjach mobilnych w czasie rzeczywistym, na podstawie listy lokalizacji geograficznych generowanych podczas działania programu.
Na poniższym obrazku widoczny jest fragment aplikacji mobilnej, który wykonuje żądanie do interfejsu API (RESTful), aby pobrać listę lokalizacji znajdujących się w pobliżu, na podstawie frazy wprowadzonej przez użytkownika.
Jeśli jesteś firmą poszukującą lokalizacji do budowy nowego centrum danych, mapa byłaby bardzo przydatnym dodatkiem do listy wyników.
Jak pokazaliśmy w aplikacji "Status lotniska", którą stworzyliśmy dla naszego poprzedniego wpisu, komponent mapy MobileTogether zawiera właściwości definiujące znaczniki, ramkę okna widoku mapy oraz akcje, które mają być wykonywane, gdy użytkownik klika na znacznik na mapie.
W aplikacji "Status lotnisk" cała lista znaczników dla głównych lotnisk była zakodowana na stałe w oknie edytora XPath/XQuery, w sekcji "Znaczniki"
Wyrażenie XQuery do tworzenia znaczników na mapie
Znaczniki nie muszą być zdefiniowane w sposób sztywny. Zamiast tego, cała lista znaczników dla niestandardowych map w aplikacjach mobilnych może być generowana za pomocą wyrażenia XQuery. Aby tworzyć niestandardowe mapy w aplikacjach mobilnych, potrzebujemy wyrażenia typu XQuery FLWOR (For-Let-Where-Order-Return), opartego na wynikach zapytań REST.
Parametry let, where i order w wyrażeniach FLWOR są opcjonalne, a my nie potrzebujemy ich do naszej listy znaczników. Potrzebujemy jedynie instrukcji For i Return, aby przetworzyć listę lokalizacji zwróconą przez żądanie REST:
Wyrażenie XQuery może być trudne do prawidłowego skonstruowania za pierwszym razem, nawet bez użycia parametrów "let", "where" i "order"! Właśnie dlatego sekcja "Evaluator" (ewaluator) w oknie wyrażenia XQuery jest tak przydatna. Kliknięcie przycisku "Evaluator" pozwala na przetestowanie wyrażenia w trakcie jego tworzenia.
Jeśli wyrażenie zawiera błąd, proces obliczeń zostanie przerwany, a opis błędu zostanie wyświetlony w oknie wyników.
Otworzyliśmy okno wyrażenia XQuery w programie MobileTogether Designer, podczas gdy symulator uruchamiał aplikację w fazie rozwoju. Najpierw jednak wykorzystaliśmy symulator do przeprowadzenia wyszukiwania tekstowego, uzyskując dostęp do danych w czasie rzeczywistym z zapytania REST dotyczącego „energii wiatrowej” w promieniu 160 kilometrów od Amarillo, w stanie Teksas. Zwróćcie uwagę, że nazwa „Cielo Wind Power LLC”, widoczna w wynikach wyszukiwania na dole po lewej stronie na powyższym zrzucie ekranu, jest używana do generowania elementu tekstowego dla znacznika 1, który jest wyświetlany w sekcji Wyniki ewaluacji po prawej stronie.
Kiedy już będziemy zadowoleni z działającego wyrażenia, po prostu przeciągamy nowy element sterujący mapą geolokalizacyjną na stronę z wynikami wyszukiwania, a następnie kopiujemy i wklejamy wyrażenie do właściwości "Markery". Poniżej znajduje się widok strony z mapą w programie MobileTogether Designer:
Teraz możemy ustawić pozostałe właściwości mapy, aby jak najlepiej odpowiadały naszym potrzebom. Wybraliśmy typ mapy "ulice" z funkcjami powiększania. Inne dostępne typy map to mapa satelitarna lub mapa hybrydowa, łącząca elementy mapy ulic i obrazów satelitarnych. Pole "Viewport" jest puste, ponieważ MobileTogether automatycznie ustawi obszar widoku, aby obejmował wszystkie znaczniki na mapie, zgodnie z definicją określoną w czasie działania przez wyrażenie XQuery. Użyliśmy również wyrażenia XQuery, aby zapewnić widoczność tylko wtedy, gdy liczba wyników żądań REST jest większa od zera.
Oto widok okna pomocniczego "Właściwości mapy":
Właściwości "Szerokość kontrolki" i "Wysokość kontrolki" umożliwiają aplikacji MobileTogether automatyczne ustawianie rozmiaru mapy dla każdego urządzenia mobilnego.
Chcemy wyświetlać użytkownikowi więcej informacji o danym miejscu, gdy kliknie odpowiedni znacznik. Jest to definiowane w właściwości "Akcja kontrolna". Przycisk z trzema kropkami, służący do wyboru akcji kontrolnej, otwiera okno dialogowe, w którym programista może zdefiniować wiele różnych akcji:
Nasza aplikacja wykorzystuje funkcje rozszerzeń MobileTogether do zbierania informacji o zaznaczonym punkcie, a następnie otwiera podstronę, na której wyświetlane są szczegóły dotyczące tego miejsca.
Poniżej znajdują się zrzuty ekranu: strona wyników aplikacji działającej na telefonie iPhone oraz podstrona wyświetlana po kliknięciu ikony na telefonie z systemem Android
Przycisk oznaczony jako "Wyświetl dane produkcyjne" na podstronie "Szczegóły wyników" mógłby umożliwiać dostęp do bazy danych w celu przeglądania historycznych danych dotyczących produkcji energii dla wybranej elektrowni wiatrowej.
Sprawdź sam, jak łatwo jest tworzyć niestandardowe mapy w aplikacjach mobilnych. Pobierz Program MobileTogether Designer, który można używać bezpłatnie, które obejmuje pomoc online oraz przykładowe aplikacje.
Dowiedz się więcej o innych aplikacjach stworzonych przy użyciu MobileTogether i obejrzyj demonstracje wideo pod adresem: https://www.altova.com/mobiletogether/demos