Android Auto i Apple CarPlay w Moim ING

04.12.2023 | Adam Nowicki

Wstęp

Dotychczas nie słyszeliśmy o aplikacji bankowej, która udostępnia obsługę jakiegokolwiek procesu na ekranie samochodu. Innowacyjność zawsze była naszą mocną stroną, więc postanowiliśmy, że Moje ING mobile powinna być pierwszą taką aplikacją.

 

Jak to robimy w ING?

Android Auto i Apple CarPlay to narzędzia do projekcji aplikacji zainstalowanej na telefonie na ekran samochodu.Pierwsze dedykowane jest na urządzenia z systemem Android, drugie iOS. Większość producentów samochodów od kilku lat wspiera oba te narzędzia. Po podłączeniu telefonu do samochodu wśród ikon różnych aplikacji pojawia się ikona Mojego ING.

 

Na dzień dzisiejszy aplikacja ma funkcjonalność zakupu biletu parkingowego w miastach obsługiwanych przez naszego dostawcę – firmę moBILET.

Po uruchomieniu aplikacji pojawia się mapka wraz z najbliższymi miastami, w których można zaparkować. Kolejne ekrany to wybór strefy, pojazdu, sposobu parkowania i rachunku z którego zapłacimy za parking. Wszystko łatwo i przyjemnie na ekranie samochodu.

 

Development

Dziś pokażę jak przygotować szkielet takiej aplikacji w Android Auto i Apple CarPlay na przykładzie ekranu z miastami.

 

iOS

Pobieramy CarPlay Simulator. Dostępny jest w pakiecie z Additional Tools for Xcode. Następnie zapoznajemy się z CarPlay Programming Guide, który opisuje różne typy template’ów wykorzystywanych w CarPlay’u. W aplikacjach na CarPlay nie tworzymy widoków sami. Dostępnych mamy kilka typów template’ów, które zasilamy danymi.

Omówimy sobie Point of Interest template, który pozwoli nam na pokazanie mapy wraz z lokalizacjami parkingów. Żeby skupić się na developmencie pominę opis akceptowania CarPlay Entitlement. Potrzebne to jest na moment deploymentu aplikacji do sklepu. Instrukcję można znaleźć w dokumentacji. My skupmy się na tym, żeby odpalić aplikację lokalnie. Tworzymy nowy projekt. Klikamy w plik projektu, następnie Signing & Capabilities i klikamy + w prawym górnym rogu. Dodajemy Associated Domains. To stworzy nam nowy entitlements (z żółtą ikonką w widoku projektu).  W tym nowym pliku dodajemy linijkę: com.apple.developer.carplay-parking typu Boolean z wartością YES. Następnie można usunąć zbędną linijkę z Associated Domains.

Kolejna rzecz to przygotowanie naszego projektu na używanie mechanizmu scen. Sceny są dwie: to co user widzi na telefonie, i to co widzi na ekranie w samochodzie.

Otwieramy plik projektu i klikamy zakładkę Info i dopisujemy:

Następnie tworzymy dwa pliki wymienione tutaj:
SceneDelegate i CarPlaySceneDelegate.

Pierwszy nie jest dla nas istotny w tym przykładzie. Dotyczy tego, co dzieje się na ekranie telefonu. Można zostawić w podstawowej postaci:

 

Ciekawszy będzie CarPlaySceneDelegate. Tworzymy go implementując protokół CPTemplateApplicationSceneDelegate.

 

Na start zapamiętujemy referencję do obiektu interfaceController, który pozwala na zarządzanie widokami. Dalej tworzymy listę miast, które będziemy chcieli wyświetlić, wraz z ich współrzędnymi. Następnie tworzymy CPPointOfInteresTemplate, zasilając go tą listą.

Po zbudowaniu projektu czas na testy. Mając włączony symulator klikamy w menu pozycję I/O -> External Displays -> CarPlay. Uruchomi się symulator z dostępną naszą aplikacją. Po uruchomieniu zobaczymy ekran jak poniżej:

 

Android

Tworzymy pusty projekt. Na start otwieramy AndroidMainfest.xml I deklarujemy service do obsługi Android Auto

oraz tworzymy klasę AutoParkingService implementująca interfejs CarAppService.

Aby CarAppService był widoczny musimy dodać odpowiednie dependency do build.gradle.

 

Dalej tworzymy obiekt sesji (klasę zaraz stworzymy) oraz validatora. Dla celów debugowych spokojnie można uzyć ALLOW_ALL_HOSTS_VALIDATOR.

 

W klasie AutoParkingSession tworzymy ekran. I w naszym przykładzie właściwie tylko tyle.

 

Cała zabawa zaczyna się w klasie AutoScreen. To tutaj stworzymy listę miast i template odpowiedzialny za wyświetlenie danych na ekranie samochodu.

Wróćmy jednak najpierw do pliku AndroidManifest.xml i dodajmy potrzebne uprawnienia:

 

Potrzebujemy dostępu do lokalizacji i pozwolenie na wykorzystanie template’u map. Przy okazji odpalmy naszą apkę i w ustawieniach dajmy zgodę na geolokalizację. Nie chcemy zaciemniać tego prostego przykładu przechwytywaniem odmowy i zgody na to uprawnienie.

Ostatnia rzecz w manifeście to tag meta-data dla Android Auto i informacja o minimalnej wersji systemu oraz odniesienie do pliku opisującego co wykorzystujemy.

 

I skromna zawartość tego pliku, jako że używamy tylko template’ów:

 

Uff, koniec konfiguracji, można wracać do pisania właściwej klasy obsługującej widok listy miast – AutoScreen.

Najpierw metoda tworząca element listy, podobnie jak to było dla CarPlay’a.

 

Przekazujemy tutaj nazwę miasta i lokalizację. Ustawienie setBrowsable pozwala na pokazanie strzałeczki obok nazwy miasta. Dalej tworzymy marker w odpowiedniej lokalizacji na mapie, który będzie powiązany z danym elementem listy.

W następnej kolejności tworzymy PlaceListMapTemplate, który jest odpowiednikiem CarPlay’owego CPPointOfInterestTemplate. Zasilamy go listą POI, stworzonych za pomocą poprzedniej funkcji.

 

Pora na test! Można udać się do samochodu, ale można też użyć symulatora. Znajdziemy go w katalogu z Android SDK.

ANDROID_HOME/sdk/extras/google/auto

Odpalamy z terminala
./desktop-head-unit --usb

i cieszymy się symulatorem Android Auto. Odszukujemy nasza aplikację, klikamy I widzimy to, o co nam chodziło:

 

 

Podsumowanie

Pokazałem dziś jak szybko, łatwo i przyjemnie przygotować prostą, ale nie najprostszą aplikację dedykowaną na Apple CarPlay i Android Auto. W aplikacji bankowej poszliśmy w kierunku udostępnienia funkcjonalności parkingów na ekranach samochodów. Wierzymy, że w niedalekiej przyszłości klienci polubią ten sposób używania naszej apki.

Wersja na Android Auto jest już dostępna dla użytkowników. Jeśli chodzi o Apple Car Play to proces release’u jest bardziej skomplikowany i wciąż czekamy na udostępnienie wersji klientom.

Implementacja tych rozwiązań okazała się kawałkiem fajnej programistycznej przygody.