Angular na platformach mobilnych

Jeśli Angular jest główną technologią której używasz, zapewne wykorzystywałeś ją tylko do budowania aplikacji webowych. Czy wiedziałeś natomiast, że jego zastosowanie nie ogranicza się tylko do tego typu aplikacji? Istnieją bowiem technologie, które umożliwiają uruchomienie Twojej aplikacji bezpośrednio na urządzeniach mobilnych, takie jak NativeScript, PWA czy też Capacitor. W tym artykule przedstawimy oraz przeprowadzimy Cię przez proces integracji Twojej aplikacji z Capacitorem, dzięki czemu będziesz mógł rozszerzyć swoje portfolio o aplikacje mobilne. Zacznijmy od podstaw, czym jest hybrydowa aplikacja mobilna?

Aplikacja hybrydowa

Pojęciem tym definiujemy aplikację powstałą przez połączenie dwóch teoretycznie odrębnych środowisk technologicznych. W najczęstszym przypadku jest to aplikacja stworzona przy użyciu technologii webowych, dedykowana natomiast na odrębną platformę, np. desktop lub urządzenie mobilne. W obrębie niniejszego artykułu skupimy się na tym drugim.

Niewątpliwą zaletą tego typu podejścia jest możliwość wykorzystania współdzielonego bazowego kodu do zbudowania aplikacji na dowolną wspieraną platformę. Wówczas pojedynczy zespół jest w stanie stworzyć aplikację na 2 lub więcej platform, co znacząco przekłada się na kwestie ekonomiczne.

Niestety, jako że hybrydowa aplikacja jest uruchamiana w osobnym kontenerze renderującym jej zawartość, wydajność tego typu produktów mocno odbiega od natywnych. Z tego powodu takie podejście nie nadaje się do tworzenia wymagających aplikacji takich jak gry. Wyjątek tutaj stanowią technologie realizujące częściową lub całkowitą kompilację kodu na platformę natywną, np. React Native, czy też zdobywający popularność Flutter. Pomimo jednak zapewnień twórców tych technologii o rzekomo wysokiej wydajności, w dalszym ciągu tego typu produkty często odbiegają płynnością od natywnych.

Proces tworzenia takich aplikacji realizowany jest przy użyciu dedykowanych ku temu narzędzi (z pominięciem technologii wymienionych powyżej, posiadających własne mechanizmy realizujące proces kompilacji).

Cordova

Protoplastą tego typu technologii była Cordova rozwijana przez Apache. Narzędzie to umożliwiało uruchomienie dowolnej aplikacji webowej na platformie mobilnej (Android, iOS lub innej) udostępniając API oraz szereg pluginów w celu możliwości wykorzystania fizycznych zasobów urządzenia (dostęp do dysku, kamery, mikrofonu itp.). Sama aplikacja webowa natomiast była uruchamiana w tzw. WebView, czyli dedykowanym natywnym widoku pozwalającym na wyrenderowanie webowej aplikacji.

 

Diagram przedstawiający architekturę aplikacji stworzonej przy użyciu Cordova’y.

Capacitor

Wspomniana wcześniej Cordova w pewnym momencie przestała być rozwijana, a jako jej następca stworzony został Capacitor. Narzędzie to podobnie jak jego poprzednik umożliwia tworzenie aplikacji hybrydowych, działając na bardzo podobnej zasadzie.

Różnice między tymi dwoma technologiami sprowadzają się do możliwości pełnego wykorzystania najnowszych Web API oraz funkcjonalności udostępnianych przez natywne platformy. Ponadto Capacitor oferuje wspólne interfejsy dla natywnych funkcjonalności, niezależne od docelowej platformy, ściągając odpowiedzialność z deweloperów odnośnie konieczności obsługiwania różnych pluginów oraz API w zależności od środowiska.

Ionic

Na szczególną uwagę zasługuje Ionic, będący biblioteką zbudowaną w oparciu o wyżej wymienione technologie. Główną korzyścią płynącą z zastosowania tej biblioteki jest natywny charakter końcowej aplikacji zbudowanej dla danej platformy, poprzez użycie gotowych, odpowiednio już ostylowanych komponentów.

Innymi słowy, udostępnia nam szereg komponentów, dyrektyw oraz serwisów usprawniających i ułatwiających proces tworzenia aplikacji. Po więcej informacji odsyłam do oficjalnej strony.

Integracja

W celu integracji istniejącej aplikacji Angularowej utworzonej przy użyciu Nx’a, możemy skorzystać z istniejącego pluginu @nxtend/capacitor, wykonując kroki opisane w oficjalnej dokumentacji. Niestety w czasie pisania tego artykułu, plugin ten wspiera tylko wersję Capacitor 2, gdzie dostępna już jest oficjalnie wersja Capacitor 3.

W celu wykorzystania najnowszej wersji należy ręcznie przeprowadzić proces instalacji.

Aby mieć możliwość ostatecznego budowania aplikacji na daną platformę należy również wzbogacić swoje środowisko o IDE dedykowane dla danej platformy. Szczegółowe informacje znajdują się w dokumencie environment setup.

Inicjalizacja

Postępując podobnie, zgodnie z oficjalną dokumentacją Capacitora, rozpoczynamy od dodania pakietów CLI oraz Core do naszego projektu.

Następnie przechodzimy do ścieżki pod którą znajduje się nasza aplikacja i korzystając z Capacitor CLI uruchamiamy komendę inicjalizującą plik konfiguracyjny (omówienie wszystkich dostępnych poleceń można znaleźć w dokumentacji CLI).

Wprowadzamy odpowiednio kolejne dane dotyczące naszej aplikacji, po zakończeniu procesu powinniśmy widzieć utworzony plik capacitor.config.js.

Należy przy tym upewnić się, że wskazaliśmy odpowiednią ścieżkę dla zbudowanej już aplikacji (w pliku konfiguracyjnym, najczęściej będzie to „webDir”: „../../dist/apps/my-app”).

Package.json

Jednym z istotnych etapów, które nie zostały ujęte w oficjalnej dokumentacji jest konieczność utworzenia indywidualnego package.json dla naszej aplikacji, który będzie zawierał tylko najważniejsze informacje (wystarczy name) oraz listę wykorzystywanych pluginów w postaci zależności (możemy oczywiście skorzystać z npm init).

Obsługiwane platformy

Na tym etapie możemy już dodawać docelowo obsługiwane platformy (musimy znajdować się bezpośrednio w katalogu aplikacji). Należy tutaj wspomnieć, że wszystkie paczki poza pluginami instalujemy w obrębie całego Nx Workspace, same pluginy natomiast znajdując się w katalogu z aplikacją.

Po dodaniu platformy, możemy zbudować naszą aplikację oraz zsynchronizować aktualną wersję z docelową platformą wykonując poniższe polecenia:

Powyższa komenda kopiuje zbudowane pliki do odpowiednich katalogów oraz aktualizuje pliki konfiguracyjne biorąc pod uwagę ewentualnie dodane lub usunięte pluginy.

Budowanie

Po wykonaniu powyższych czynności jesteśmy gotowi zbudować ostateczną aplikację na daną platformę. W tym celu musimy nasz wygenerowany projekt otworzyć w dedykowanym IDE dla danej platformy. Możemy w tym celu posłużyć się poleceniem:

Wówczas powinno uruchomić się Android Studio, z poziomu którego możemy już budować naszą aplikację.

Ostateczny wygląd aplikacji hybrydowej uruchomionej na emulatorze.

Powyższy proces został opisany na docelową platformę Android, w przypadku pozostałych wszystkie polecenia wykonywane są analogicznie.

Podsumowanie

Hybrydowe aplikacje mobilne niewątpliwie są doskonałą propozycją stworzenia produktu o wspólnym bazowym kodzie wspierającym wiele docelowych platform. Zanim jednak taka decyzja zostanie podjęta, niezbędna jest analiza samej docelowej aplikacji pod kątem oczekiwań wydajnościowych ze strony końcowych użytkowników, gdyż w tego typu aplikacjach mogą występować problemy z płynnością, zwłaszcza przy bardziej wymagających operacjach czy widokach. Ponadto nie wszystkie natywne funkcjonalności są dostępne, więc należy również rozpatrzyć które z nich docelowa aplikacja będzie wykorzystywała.

Sam proces integracji Capacitora umożliwiającego nam zbudowanie aplikacji hybrydowej jest szybki i łatwy, a ostateczna praca z tym narzędziem sprowadza się do wykonania od czasu do czasu kilku poleceń. Można zatem śmiało stwierdzić, że jest on godnym następcą Cordova’y.