Jak zacząć pracę z Ionic + Angular?

Ionic Angular

Słowem wstępu, Ionic jest to zestaw narzędzi pozwalający nam na tworzenie aplikacji na wiele platform korzystając z jednej bazy kodu.  Ionic w pełni wspiera popularne frameworki, takie jak React, Angular czy Vue, a nawet możemy zdecydować się na czysty javascript. Ionic dostarcza nam bazę komponentów z których możemy tworzyć aplikacje stylizowane na natywne znane z różnych platform. Niestety sam Ionic nam nie wystarczy do stworzenia natywnej aplikacji, żeby można było ją uruchomić na urządzeniu, musimy skorzystać z wrappera (mostu między natywnym urządzeniem a naszą aplikacją webową).

Do wyboru mamy dwie popularne opcje: Apache Cordova lub Capacitor. Pierwszy to starsze, dobrze znane rozwiązanie używane początkowo przez Ionic, posiada duże community oraz setki pluginów dostarczających mnóstwo funkcjonalności. Natomiast drugi to rozwiązanie autorskie twórców Ionic, przystosowane pod sam framework, posiada on własną bazę pluginów, ale też w pełni wspiera pluginy z Cordovy. Z takim zestawem narzędzi możemy przystąpić do tworzenia multiplatformowych aplikacji.

Moje nastawienie

Początkowo przy dołączeniu do projektu z wykorzystaniem Ionic byłem bardzo pozytywnie nastawiony. Nie mając wcześniejszego doświadczenia z tym narzędziem pierwsze co oczywiście mogłem zrobić, to było odwiedzenie oficjalnej strony Ionic. Strona sama w sobie jest bardzo czytelna i estetyczna, nie ma żadnego problemu w odnalezieniu tego czego szukamy. Po trafieniu do zakładki “Get started” zacząłem odkrywać dostępne możliwości, których ilość była nawet przytłaczająca. Mimo to dokumentacja jest bardzo przemyślana i dobrze wykonana, idąc krok za krokiem, coraz bardziej rozumiałem zasady i reguły budowania aplikacji. Po takiej wycieczce postanowiłem stworzyć testowy projekt i przetestować podstawowe rzeczy. Nie napotkałem wtedy większych problemów, wszystko działało dokładnie tak jak było to opisane w dokumentacji. Po takim pozytywnym odczuciu, z optymizmem czekałem na rozpoczęcie nowego projektu.

Setup projektu w Ionic

Setup projektu na stronie Ionic jest bardzo dobrze opisany, w przypadku tego projektu korzystaliśmy z Angulara jako frameworka webowego, oraz Capacitora jako natywnego wrappera. Do zarządzania projektem potrzebujemy CLI dostarczanego przez twórców Ionica. Narzędzie instalujemy globalnie poprzez komendę npm install -g @ionic/cli. Po zainstalowaniu narzędzia, po prostu wpisujemy ionic start nazwa –capacitor, po około minucie projekt zostanie utworzony. Kolejnym krokiem jest dodanie platform na które nasza aplikacja jest przeznaczona, w tym celu korzystamy z poleceń npx cap add ios a następnie npx cap add android, po dłuższej chwili w naszym projekcie pojawią się dwa nowe foldery: iOS i Android.

Foldery są to projekty aplikacji, możemy otworzyć je w xCode lub Android Studio, niekiedy może to być potrzebne zwłaszcza w przypadku korzystania z Capacitora, gdzie do konfiguracji niektórych rzeczy jesteśmy zmuszeni skorzystać z tych narzędzi, dlatego warto zainstalować obydwa edytory jeśli mamy taką możliwość. Projekt w xCode i Android studio jest od razu gotowy do otworzenia, skrótem do utworzenia projektu w tych edytorach jest komenda npx cap open iosnpx cap open android, musimy pamiętać żeby znajdować się w głównym katalogu projektu, a nie w folderach **/ios** lub **/android**. Teraz możemy przejść do uruchomienia naszej aplikacji w trybie developerskim.

W tym celu wpisujemy polecenie ionic serve. Żeby zbudować aplikację na daną platformę musimy skorzystać z polecenia ionic build, co spowoduje wygenerowanie gotowego kodu aplikacji, następnie wpisujemy polecenie npx cap copy, które przekopiuje skompilowane pliki aplikacji z folderu **/dist** do projektów z każdej platformy w odpowiednie miejsce. Aby nie wpisywać za każdym razem obu poleceń, możemy dodać skrypt w **package.json** który zrobi to za nas, przykładowo

"build": "ionic build && npx cap copy"

Mamy także możliwość budowania aplikacji na poszczególne platformy, analogicznie możemy dodać kolejny skrypt:

"build:android": "ionic build android && npx cap copy android"

Praca w frameworku

Setup mamy już za sobą, teraz przechodzimy do pisania aplikacji. Podczas pracy z Ionic cały czas musimy mieć z tyłu głowy że tworzymy aplikację na inną platformę niż przeglądarka, żeby wszystko zachowywało się tak jak planujemy, musimy korzystać ze specjalnych komponentów dostarczanych przez Ionic, co wywołuje konkretne zachowania np. na urządzeniach mobilnych.

Początkowo miałem z tym problem, z oczywistego powodu, nie byłem w stanie za pierwszym podejściem do frameworka poznać dogłębnie wszystkich komponentów co powodowało problemy już na urządzeniach mobilnych. Z tego względu, przed implementacją kolejnego komponentu, powinieneś zaglądnąć do dokumentacji Ionica i sprawdzić, czy taki komponent nie jest dostarczany przez Ionic. Jeżeli piszesz własny, możesz poszukać informacji jak zachowa się będąc wewnątrz komponentów Ionica.

Podczas tworzenia aplikacji webowej korzystamy zazwyczaj z przeglądarki, tak samo jest tutaj, jednak jest tu mała pułapka. W większości sytuacji już zainstalowana aplikacja będzie zachowywać się dokładnie tak samo jak jej podgląd w oknie przeglądarki. Czasami może się jednak okazać, że po zbudowaniu aplikacji na danej platformie niektóre elementy mogą zachowywać się inaczej. Takie zachowanie często wynika ze złego użycia komponentów Ionica wraz z naszymi.

Do dyspozycji mamy również spore api dostarczane przez Capacitora, daje nam ono bardzo łatwy dostęp do api telefonu, np. kamery, GPS czy nawet czytnika linii papilarnych. Sposób korzystania z tych pluginów jest bardzo przyjemny i intuicyjny, podczas ich stosowania nie spotkałem się z większymi problemami, wszystko działało dokładnie tak jak opisywała to dokumentacja.

Podsumowanie

Ionic wraz z Capacitor’em zrobił na mnie pierwsze dobre wrażenie, już od samego początku setupu projektu, gdzie dokumentacja prowadzi nas za rękę tak naprawdę przy każdym komponencie lub pluginie. Posiada on pełną integrację z większością dużych frameworków front-endowych, jak również wsparcie ogromnego community tworzącego pluginy praktycznie dla każdego zadania. Sprawia to, że Ionic jest bardzo przyjaznym narzędziem dla web-developerów którzy stawiają czoła aplikacjom mobilnym.

Spodobał Ci się artykuł?

Masz pytania? Zacznijmy rozmowę! 🙂

Klikając wyślij, zgadzasz się na wykorzystanie Twojego adresu email oraz imienia do kontaktu elektronicznego, a także do przesyłania wiadomości marketingowych. Administratorem Twoich danych osobowych jest Graphicbox Sp. z o. o. ul. Lwowska 6/201, Rzeszów. Więcej w polityce prywatności.

Form Men

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *