Ionic pierwsza aplikacja -> StormSnapshot #4

Ionic pierwsza aplikacja

Ostatecznie, po dość nierównej walce (więcej na ten temat możesz przeczytać we wpisie: CO ROBIĆ, gdy nic nie działa i wszystko się wali!?) zapraszam do lektury artykułu o Ionic Framework.

Podobnie jak we wcześniejszym tekście o React Native zamierzam przeprowadzić Cię krok po kroku przez przygotowanie niezbędnego środowiska oraz development przykładowej aplikacji, demonstrującej możliwości biblioteki.

Ionic

Ionic to kompletne SDK do wytwarzania mobilnych aplikacji hybrydowych. Biblioteka zbudowana jest z wykorzystaniem znanych technologii, takich jak: AngularJS oraz Apache Cordova.

Mimo iż aplikacje pisane są z wykorzystaniem HTML, JavaScript i CSS, to jako mobilne aplikacje hybrydowe mogą być dystrybuowane jak każda inna aplikacja natywna.

Ionic vs PhoneGap

No dobrze, ale skoro Ionic wykorzystuje PhoneGap, to czemu nie korzystać z samego PhoneGap?

Decydując się na Ionic, dostajemy nie tylko narzędzie do budowania aplikacji hybrydowych, ale również gotowe biblioteki JavaScript i cały zbiór stylów definiujących ostateczny wygląd.

Sprawia to, że powstały produkt wyglądem jest bardziej zbliżony do aplikacji natywnych, a my nie musimy zaczynać projektu całkowicie od zera. Chcąc osiągnąć podobny efekt korzystając tylko z Apache Cordova, na starcie trzeba by włożyć sporo więcej pracy.

Instalacja Ionic

Do instalacji niezbędnych komponentów skorzystamy z menagera pakietów npm, który zainstalowaliśmy już przy konfiguracji środowiska dla React Native.

Przy jego pomocy instalujemy pakiety Cordova i Ionic:

Warto również sprawdzić, czy nodejs oraz npm są aktualne. Niestety niezgodność wersji może powodować dość dziwne błędy. Ja doinstalowałem również pakiety: reflect-metadataangular-cli.

Całe proces instalacji można prześledzić w dokumentacji: Installing Ionic and its Dependencies.

Pierwszy projekt Ionic

Przy pomocy wiersza poleceń generujemy strukturę przykładowej aplikacji.

Na ten moment domyślnie generowany jest projekt w wersji Ionic 1 dlatego, żeby wymusić korzystanie z wersji 2 koniecznie jest dodanie argumentu: –v2.

Aplikacja generowana jest na podstawie predefiniowanych szablonów. Domyślnie mamy do wyboru: tabs, sidemenu oraz blank.

Więcej o szablonach oraz samym generowaniu projektu przeczytasz w rozdziale: Starting an Ionic App.

Struktura projektu Ionic

Struktura projektu jest zbliżona do czystego projektu Apache Cordova. Projekt poza głównym plikiem config.xml zawiera również pliki konfiguracyjne specyficzne dla Ionic.

Ionic struktura projektu

Ionic struktura projektu

./src/index.html

Plik index.html to główny punkt wejścia do aplikacji. Z jego poziomu załączone są wszystkie pliki niezbędne do działania kodu z PhoneGap oraz uruchamiany jest główny komponent Ionic, ładujący całą aplikację:

Uruchomienie i testowanie aplikacji Ionic

Ponieważ aplikacja jest specyficzną stroną www, można ją uruchomić w zwykłej przeglądarce internetowej.

W tym celu skorzystamy z wbudowanego serwera. Z poziomu katalogu projektu uruchamiamy poniższą komendę:

W zależności od wybranego wcześniej szablonu, w przeglądarce możemy zobaczyć np. taki widok.

Ionic pierwsza aplikacja

Ionic pierwsza aplikacja

Uruchomienie aplikacji na emulatorze i urządzeniu fizycznym

Przed uruchomieniem aplikacji na konkretnej platformie, musimy najpierw dodać ją do projektu.

Po tym kroku projekt można już spokojnie zbudować i przetestować jego działanie na emulatorze lub na fizycznym urządzeniu.

Ionic emulator

Ionic emulator

Aplikacja

Aplikacja realizująca zbliżone funkcjonalności do tej napisanej w React Native. Dla przypomnienia: mamy 3 widoki:

  • ekran powitalny;
  • lista przechowująca wiele elementów;
  • lista generowana na podstawie kanału RSS;

Nawigacja w aplikacji

Ponieważ skorzystałem z szablonu tabs, znaczna część pracy była już gotowa.

Ionic zakładki

Ionic zakładki

Całość logiki aplikacji podzielona jest na strony, które są przechowywane w katalogu: src/pages.

Przejściami między poszczególnymi stronami zarządza sekcja tabs, a tag <ion-tabs /> generuje menu widoczne w dole aplikacji.

Kod każdej ze stron podzielony jest na 3 pliki:

  • *.html
    szablon zawierający tagi Ionic i HTML
  • *.scss
    style Sass
  • *.ts
    plik TypeScript zawierający właściwą logikę

Stylowanie [Sass – syntactically awesome stylesheets]

Stylowanie aplikacji niewiele różni się od pracy ze zwykłą stroną. Do dyspozycji mamy rozszerzoną składnię Sass, co w praktyce sprawia, że osoba znająca przynajmniej podstawy CSS nie powinna mieć najmniejszych problemów z tym zadaniem.

Poszczególne pliki SCSS są kompilowane i dołączane w wynikowej formie do aplikacji.

Jest to ogromny plus tej technologii. Wygląd można edytować w czasie rzeczywistym, np. korzystając z Google Chrome Developer Tools i dopiero po uzyskaniu zamierzonego efektu nanieść zmiany na kod aplikacji.

Lista danych

Ionic lista danych

Ionic lista danych

Listę danych przygotowałem z wykorzystaniem komponentu ion-list. W tym celu w pliku z szablonem (list.html) dodajemy tag: ion-list oraz w pętli wyświetlamy wszystkie elementy tej listy.

Wykorzystaną w szablonie zmienną: items trzeba jeszcze zadeklarować w pliku komponentu (list.ts)

RSS – pobranie danych z Internetu

Do samego wyświetlenia danych, podobnie jak w przypadku zwykłej listy, wykorzystałem komponent: ion-list. W pliku szablonu deklarujemy tagi jak poprzednio i przechodzimy do pliku z TypeScript, żeby zasilić listę danymi.

Samo pobranie danych z Internetu jest stosunkowo proste. Korzystamy w tym celu ze standardowego komponentu Angulara: HTTP oraz metody map.

Obie metody trzeba jeszcze załączyć do naszego pliku poniższymi importami.

Parsowanie XML [xml2js]

Do parsowania pobranego pliku XML skorzystamy z zewnętrznej biblioteki: xml2js.

Bibliotekę trzeba najpierw doinstalować, a potem dołączyć do projektu:

Następnie przy jej pomocy można napisać już właściwą metodę parsującą dane.

Ionic Proxy i No ‚Access-Control-Allow-Origin’

Testując aplikację lokalnie, np. z wykorzystaniem ionic serve, można wygenerować błąd typu CORS. Ponieważ aplikacja jest uruchamiana w wewnętrznej przeglądarce (serwer localhost), w ramach bezpieczeństwa, żądania ajax do innych domen są blokowane.

Można to obejść na dwa sposoby:

  1.  Zmieniając ustawienia bezpieczeństwa np. przez dodanie na serwerze hostującym usługę odpowiedniego nagłówka http.
  2. Skorzystać z lokalnego serwera proxy.

Ja skorzystałem z proxy. Całe szczęście mamy do tego przygotowany już gotowy mechanizm.

Wystarczy zrobić dwie rzeczy:

  • w głównym pliku konfiguracyjnym: ionic.config.json dodać odpowiedni wpis mapujacy lokalny adres na zewnętrzną domenę;
  • oraz w kodzie aplikacji podmienić wszystkie wywołania na adres proxy, w tym wypadku będzie to: http://localhost:8100/rss.
Żeby co chwilę nie zmieniać adresów usługi, najlepiej przenieść je do stałych i ich wartość uzależnić od tego, czy aplikacja jest uruchamiana testowo, czy już produkcyjnie.

Obsługa błędów i debugowanie

Do debugowania można wykorzystać konsolę z Google Chrome, a sam framework udostępnia również fajne wsparcie do wyświetlania błędów z aplikacji.

Ionic błąd

Ionic błąd

Podsumowanie

Ionic już na samym starcie dość mocno mi dokuczył. Jednak dla mnie dużo większe znaczenie ma to, jak z danej technologii się korzysta, a nie to jak ją się instaluje.

Tutaj Ionic zdecydowanie nadrobił początkowe straty. Nie miałem najmniejszych problemów ze zrealizowaniem wszystkich zamierzonych funkcjonalności.

Sam proces developmentu jest dość prosty i przyjemny. Dużym plusem szczególnie na starcie jest możliwość edytowania szablonów i stylów bez konieczności nauki dodatkowych technologii.

Technologia świetnie się sprawdza szczególnie dla małych projektów, ponieważ dzięki wbudowanym szablonom lub korzystając z kreatora bardzo szybko można przygotować proste widoki i funkcjonalności.

Aplikacja na testowych danych działała płynnie i nie przycinała się. Nie odbiegała jakością działania od innych programów zainstalowanych na moim telefonie.

Linki

Programista – Pytania rekrutacyjne

Lista pytań rekrutacyjnych, które pozwolą przygotować Ci się na rozmowę kwalifikacyjną.

Brak komentarzy
Share:

Dodaj komentarz

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