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:

npm install -g cordova 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.

sudo ionic start IonicSampleProject tabs --v2

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ę:

<ion-app></ion-app>

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ę:

ionic serve

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.

ionic platform add android

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

ionic run android
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.

<ion-content>
  <ion-list>
    <ion-list-header>List</ion-list-header>
    <ion-item *ngFor="let item of items">
      <h2>{{item.title}}</h2>
    </ion-item>
  </ion-list>
</ion-content>

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

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-list',
  templateUrl: 'list.html'
})
export class ListPage {

  items : any;

  constructor(public navCtrl: NavController) {
      this.items = [];
      for(let i=0; i<100; i++){
        let item = {
            title: 'Row item numer : ' + i
          };
        this.items.push(item);
      }
  }
}

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.

constructor(public navCtrl: NavController, public http: Http) {
    this.http.get('https://stormit.pl/feed').map(res => res.text()).subscribe(data => {
        this.parseXML(data).then((data) => {
            this.items = data
        });
    });
}

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.

import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

Parsowanie XML [xml2js]

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

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

npm install xml2js
import xml2js from 'xml2js';

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

parseXML(data) {
    return new Promise(resolve => {
        var arr = [],
            parser = new xml2js.Parser({
                trim: true,
                explicitArray: true
            });

        parser.parseString(data, function(err, result) {
            for (let i in result.rss.channel[0].item) {
                var item = result.rss.channel[0].item[i];
                arr.push({
                    title: item.title[0]
                });
            }

            resolve(arr);
        });
    });
}

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.

XMLHttpRequest cannot load https://stormit.pl/feed. Redirect from 'https://stormit.pl/feed' to 'https://stormit.pl/feed/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

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.
"proxies": [
  {
    "path": "/rss",
    "proxyUrl": "https://stormit.pl/feed"
  }
]

Ż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


20+ BONUSOWYCH materiałów z programowania

e-book – „8 rzeczy, które musisz wiedzieć, żeby dostać pracę jako programista”,
e-book – „Java Cheat Sheet”,
checklista – „Pytania rekrutacyjne”
i wiele, wiele wiecej!

Jak zostać programistą

5 komentarzy
Share:

5 Comments

  1. Daniel says:

    Cześć, dzięki za ciekawy artykuł. Mam poza nim pytanie – jak to jest z licencją do ionic. Nie są dla mnie jasne ich zapisy – czy orientowałeś się może w tym temacie ? Czy jest to open source czy jednak płatne rozwiązanie? Niby piszą o open source a w cenniku nie ma o tym mowy… Byłbym wdzięczny za Twoją opinię.

  2. al3xnx says:

    Cześć, do tej pory robiłem amatorsko w samej cordovie, początkowo phonegap, który z 1 pazdziernika skończył wsparcie, tak czy owak teraz zastanawiam się nad jakimiś alternatywami, głównie ze względu iż obserwuje coraz mniej stabilne wsparcie dla czystej cordovy, mam na myśli, że coraz częściej widzę problemy z wersjami paczek a dodatkowo nawet admob potrafi niezbyt stbilnie działać (na tej samej aplikacji z użyciem phonegap potarfił działać stabilnie). Ponieważ react native ze względu na zupełnie inny mechanizm odpada całkowicie to ionic wydaje się być ciekawą alternatywą, póki co (dla mnie) przede wszystkim ze względu na społczeności, która się wykształciła w okół niego w ostatnim czasie. Jednak ciągle nie jestem pewny czy jeśli mam już apke gotową w czystej cordovie, czy jest sens przenosić ją na ionic? właściwie jedyny powód jaki mnie motywuje aktualnie to ochota przetestowania stabilności admob tam.

    1. Tomek says:

      Cześć. Od dość dawna nie robiłem nic w tych technologiach, nie mam pewności jak to się zmieniało.
      Jeżeli chcesz to tylko przetestować, to nie musisz przecież przepisywać całej aplikacji – zrób sobie testowa mały projekt i sprawdź jak to będzie zachowywało się w Twoim wypadku.
      Możesz wrzucić jeszcze swoje pytanie na: http://stormit.pl/grupa jest szansa, że znajdziesz tam kogoś z większym doświadczeniem w tych technologiach.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *