MerixGames

18 lutego 2016

/ code & tools

Ionic (cz. 1): Poznaj front-end'owy zestaw narzędzi dla programistów

Marcin Wasilewski

Smartphony już dawno zastąpiły miejsce tradycyjnych telefonów komórkowych. Stały się nie tylko narzędziem do komunikacji, ale przejęły także funkcje przypisywane wcześniej komputerom. Dodatkowe możliwości uzyskujemy mając do wyboru tysiące dedykowanych aplikacji pisanych przez innych użytkowników. A co, jeżeli chcemy stworzyć coś własnego?

Ionic jest zestawem narzędzi do pisania aplikacji hybrydowych na urządzenia mobilne, lecz, nim przejdę do meritum, chwilowo skupię się na samych urządzeniach.

Projektując strony internetowe, nikt już nie wyobraża sobie pominięcia wersji mobilnych. Zadbanie o RWD jest również wymagane przez samo Google, które zwraca na nie szczególną uwagę przy pozycjonowaniu w wynikach wyszukiwań. Aktualnie już 1/5 urządzeń generujących ruch w Internecie to urządzenia mobilne!

Przy projektowaniu aplikacji mobilnych warto uwzględnić podział systemów operacyjnych:

Udział mobilnych systemów operacyjnych
Jak widać na wykresie największy udział ma Android i iOS, które wspiera Ionic. Niedawno do tej grupy urządzeń dołączył także Windows Phone, lecz dopiero od wersji 10. Dane z wykresu są oczywiście przybliżone i trzeba mieć na uwadze, że wartości dla różnych rynków mogą być inne (np. w Stanach Zjednoczonych udział systemu Apple jest większy o kilkadziesiąt procent).

Android swoją popularność zawdzięcza dynamicznemu rozwojowi oraz regularnymi nowymi modelami smartfonów. Wadą takiego podejścia jest jednakże duża fragmentacja, która przedstawia się następująco(dane z  4 stycznia 2016):

Ionic ma pełne wsparcie Androida od wersji 4.4, niższe wersje posiadają niestety problemy z pełną obsługą możliwości jakie daje ten framework. Na szczęście liczba urządzeń z nowszym systemem sukcesywnie wzrasta.

Rodzaje aplikacji mobilnych

Z aplikacjami mobilnymi jest podobnie jak ze stronami internetowymi. Mamy różne języki programowania, różne urządzenia, więc nie wszystko wygląda tak samo na każdym systemie. Jednakże, o ile mamy pewność, że strona, którą pisaliśmy na Windowsie będzie działać na Macu czy Linuxie, to z aplikacjami mobilnymi nie jest niestety już tak kolorowo.

Istnieją 3 typy aplikacji dla urządzeń mobilnych

  1. Aplikacje webowe
    Są niczym innym jak wersjami mobilnymi stron internetowych. Uruchamiamy je wszędzie tam gdzie mamy przeglądarkę internetową. Programowanie aplikacji webowych nie wymaga znajomości natywnego języka programowania dostępnego na urządzeniu.
    Zalety Wady
    W przypadku prostych aplikacji ponosimy dużo mniejszy nakład pracy na stworzenie aplikacji działającej pod iOS’em oraz Android’em Niezbędne połączenie z Internetem
    Niektóre elementy związane z implementacją widoków łatwiej jest stworzyć poprzez korzystanie z HTML niż w sposób natywny Najnowsze przeglądarki umożliwiają już dostęp do niektórych API urządzenia, co nie dość, że wymaga wyrażenia zgody, to na dodatek nadal nie gwarantuje poprawnego działania.
    Kod HTML można także wykorzystać do stworzenia aplikacji webowej uruchamianej na komputerze (MacBook, PC) Niska wydajność
  2. Aplikacje natywne
    Zbudowane są w całości tylko i wyłącznie z natywnych komponentów stworzonych w określonym języku programowania. Natywne aplikacje umożliwiają niemalże nieograniczony dostęp do możliwości sprzętu. Udostępnione są odpowiednie komponenty SDK, dające nam dostęp do kamery, akcelerometru czy systemu plików. Nie ma tutaj żadnego parsera JavaScript, który dodatkowo obciążałby procesor, dzięki czemu skompilowany kod działa przy pełnej wydajności. Najprostszym przykładem aplikacji natywnych, dobrze obrazuj acym chociażby ich wydajność, są aplikacje do pisania smsów i dzwonienia, które większość z nas posiada na swoich telefonach.
    Minusem natywnych aplikacji  jest przede wszystkim brak kompatybilności między urządzeniami, przez co aplikacja napisana pod określonym systemem operacyjnym nie zadziała na innym. Każdą aplikacje trzeba od nowa pisać w innym języku.
    W zależności od systemu operacyjnego aplikacje pisane są:
    • Android – Java
    • iOS – Objective-C, Swift
    • Windows – C#
    Zalety Wady
    Obsługa i wygląd przyjazny dla użytkownika Brak kompatybilności pomiędzy innymi systemami
    Krótki czas reakcji na ruch użytkownika Wymagana znajomość języka i SDK danej platformy
    Łatwy dostęp do danych  
    Dostęp do komponentów składowych urządzenia (kalendarz, GPS, aparat)  
    Wysoka wydajność  

     

  3. Aplikacje hybrydowe
    Łączą one zalety i wady poprzednich typów aplikacji. Pozwalają czerpać korzyści z aplikacji HTML5, wstawiając jeden element dla wielu platform, albo używając natywnych komponentów i wykonując między nimi połączenie.
    Najprościej ujmując, aplikacja osadza w sobie przeglądarkę internetową z zainstalowaną stroną, zastępując niektóre elementy natywnymi komponentami. W efekcie końcowym otrzymujemy więc pełnoprawną wieloplatformową aplikację, która pozwala na dostęp do zasobów telefonu.
    Zalety Wady
    W przypadku prostych aplikacji ponosimy dużo mniejszy nakład pracy na stworzenie aplikacji działającej pod iOS’em oraz Android’em Niezbędne połączenie z Internetem
    Niektóre elementy związane z implementacją widoków łatwiej jest stworzyć poprzez korzystanie z HTML niż w sposób natywny Najnowsze przeglądarki umożliwiają już dostęp do niektórych API urządzenia, co nie dość, że wymaga wyrażenia zgody, to na dodatek nadal nie gwarantuje poprawnego działania.
    Kod HTML można także wykorzystać do stworzenia aplikacji webowej uruchamianej na komputerze (MacBook, PC) Niska wydajność

Czym jest Ionic?

Jest front-end’owym SDK (zestawem narzędzi dla programistów), służącym do budowania hybrydowych aplikacji mobilnych. Udostępnia on całą gamę gotowych komponentów i skryptów dzięki którym, opierając się na JavaScript, możemy zbudować aplikację bez znajomości natywnych języków.

Ionic oparty jest na Angularze oraz na Cordovie, która jest platformą mobilną. To ona opakowuje naszą aplikacjo-stronę do pliku wynikowego możliwego do uruchomienia na telefonie.

Jak wspomniałem Ionic jest zestawem narzędzi, w którego skład wchodzą:

  1. Ionic framework
    Zestaw gotowych styli i skryptów, z których budujemy właściwą aplikację. Jeżeli nie potrzebujemy nieszablonowego layoutu, to na podstawie tego co udostępnili autorzy możemy zbudować pełnoprawną aplikację.
  2. Ionic View
    Moim zdaniem jest to jedno z najlepszych udogodnień ze względu na to, że pomaga w prezentacji aplikacji. Klient może zainstalować na swoim telefonie Ionic View, a po otrzymaniu ID przetrzymywanej w chmurze aplikacji ma możliwość sprawdzenia jej na swoim urządzeniu. Jest on również odciążony od instalowania aktualizacji, podobnie do otrzymania dostępu do najnowszej udostępnionej wersji wystarcza synchronizacja.
  3. Ionic Creator
    Narzędzie do tworzenia makiet i bazowych szablonów, które możemy wykorzystać również w późniejszych etapach projektu.
    Możemy w nim tworzyć widoki, przejścia, dodawać formularze czy grupowo pracować nad projektem -  jednym słowem znajdziemy tutaj wszystko, czego potrzebuje pełnoprawna aplikacja. Ionic Creator jest na ten moment jedynym płatnym elementem tego zestawu, w bezpłatnej wersji możemy stworzyć jedynie jeden projekt bez możliwości eksportowania go do bezpośrednio do aplikacji.

Programista ma także dostęp do Ionic Marketu, który jest zbiorem gotowych szablonów (np. material design), wtyczek (datepicker, ekran odblokowania ekranu), czy tez gotowych paczek startowych, które mogą być fundamentem aplikacji. O tym, czy komponenty są płatne, czy nie, decyduje autor danego rozszerzenia.

Instalacja

Na samym początku musimy upewnić się, że mamy zainstalowane środowisko Node.js, po czym instalujemy globalnie przy pomocy npm (menadżera paczek udostępnianego przez Node) Ionic’a oraz Cordove.  W tym celu w wierszu poleceń wpisujemy:

npm install -g cordova ionic

Teraz możemy wybrać bazę dla naszego projektu. W zależności od wyboru szablonu Ionic sam stwarza tworzy strukturę katalogów i pliki posiadające wybrane komponenty, które możemy rozbudować.

W ramach zobrazowania tego procesu stworzymy prostą aplikację z listą zadań. Jako szablon wybierzemy blank.

$ ionic start todo blank

Po ściągnięciu odpowiednich plików możemy dodać platformy, które będziemy chcieli obsługiwać

$ ionic platform add ios

$ ionic platform add android

W tym momencie możliwe jest już skompilowanie i emulacja aplikacji. Ze względu na fakt, iż emulatory działają bardzo powoli, a urządzeń Apple nie można emulować na systemie Windows, zalecam powstrzymanie się przed emulacją na sprzęcie, gdyż Ionic w inny sposób pozwala nam na testowanie aplikacji jeszcze przed zbuildowaniem własnym komputerze. Ionic udostępnia narzędzia do testowania aplikacji, bez konieczności emulacji. Nie mniej dla zainteresowanych wypiszę komendy do tego celu stworzone.
W tym momencie możliwe jest już skompilowanie i emulacja aplikacji. Ze względu na fakt, iż emulatory działają bardzo powoli, a urządzeń Apple nie można testować na systemie Windows, zalecam powstrzymanie się przed emulacją na sprzęcie - Ionic w inny sposób pozwala nam na sprawdzenie aplikacji jeszcze przed jej kompilacją. Nie mniej jednak, dla zainteresowanych wypiszę stworzone do tego celu komendy.

$ ionic build android

$ ionic emulate android

Poznaliście już typy aplikacji mobilnych oraz przyjrzeliście się ich wadom i zaletom. Dowiedzieliście się także, czym jest Ionic i nauczyliście się go instalować. Przyszedł więc czas na stworzenie własnej aplikacji, jej testowanie i kompilowanie, których nauczycie się w drugiej części tego cyklu!

Myślisz o realizacji projektu?

Skontaktuj się z nami. Przygotujemy wycenę, opowiemy o szczegółach i procesie wdrożenia.

Napisz do nas

Strona używa plików cookies. Wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.