MerixGames

25 lutego 2016

/ code & tools

Ionic (cz. 2): Jak stworzyć własną aplikację hybrydową

Marcin Wasilewski

W zeszłym tygodniu mieliście okazję dowiedzieć się, jak wygląda świat aplikacji mobilnych. Nauczyliście się także tego, czym jest Ionic i jak możecie go zainstalować. Z taką wiedzą nie pozostaje nic innego, jak zakasanie rękawów i stworzenie własnego projektu!

Nie zdążyłeś jeszcze przeczytać pierwszej cześci mojego artykułu? Nie ma problemu, możesz nadrobić zaległości tutaj - poczekamy na Ciebie! ;)

Nasza pierwsza aplikacja

Możemy zacząć pracę nad naszą aplikacją – zajmiemy się stworzeniem prostego szablonu aplikacji z listą zadań.

W tym celu otwieramy plik „index.html”, który znajduje się w folderze „www”, po czym wpisujemy kod:

<body>

  <ion-side-menus>

    <ion-side-menu-content>

    </ion-side-menu-content>

    <ion-side-menu side="left">

    </ion-side-menu>

  </ion-side-menus>

</body>

Dzięki temu stworzymy boczne wysuwane menu. Kod umieszczony w tagu  <ion-side-menu> zawierać będzie elementy, które wysuną się z lewej strony, co definiujemy dodając atrybut side="left". Natomiast w <ion-side-menu-content>, umieścimy treść aplikacji.

Następnym krokiem będzie wpisanie komendy:

$ ionic serve

Dzięki temu uruchomi się nam nasza aplikacja w oknie przeglądarki, a każda zmiana wykonywana na plikach automatycznie odświeży okno! Problemem jest tutaj to, że aktualnie nic nie zostanie wyświetlone, gdyż nie stworzyliśmy aplikacji AngularJS, która uruchamiałaby niestandardowe tagi (jak właśnie <ion-side-menus>).

W pliku „www/js/app.js” umieszczamy kod

angular.module('todo', ['ionic'])

Wracamy do index.html i dodajemy atrybut ng-app w tagu body

<body ng-app="todo">

W tym momencie aplikacja została zainicjowana, brakuje jej jednak treści. Po aktualizacji całość będzie prezentować się następująco:

<body ng-app="todo">

  <ion-side-menus>

    <!-- Center content -->

    <ion-side-menu-content>

      <ion-header-bar class="bar-dark">

        <h1 class="title">Todo</h1>

      </ion-header-bar>

      <ion-content>

      </ion-content>

    </ion-side-menu-content>

 

    <!-- Left menu -->

    <ion-side-menu side="left">

      <ion-header-bar class="bar-dark">

        <h1 class="title">Projects</h1>

      </ion-header-bar>

    </ion-side-menu>

 

  </ion-side-menus>

</body>

Naszym oczom ukaże się nagłówek, a poprzez kliknięcie i przeciągnięcie kursora w prawą stronę odsłonimy boczne menu.

Ionic zawiera wiele komponentów wzorowanych na ich natywnych odpowiednikach, które w prosty sposób można dodać do projektu. Polecam zapoznać się z nimi bliżej i samemu przetestować ich działanie.

W ramach naszego projektu skorzystamy z listy poprzez użycie Angularowej pętli ng-repeat:

<!-- Center content -->

<ion-side-menu-content>

  <ion-header-bar class="bar-dark">

    <h1 class="title">Todo</h1>

  </ion-header-bar>

  <ion-content>

    <!-- our list and list items -->

    <ion-list>

      <ion-item ng-repeat="task in tasks">

        {{task.title}}

      </ion-item>

    </ion-list>

  </ion-content>

</ion-side-menu-content>

Musimy dodać jeszcze kontroler i dane, które będziemy wyświetlać w naszej aplikacji.

Do body dodajemy atrybut ng-controller="TodoCtrl", w pliku app.js tworzymy zaś kontroler z przykładowymi danymi:

angular.module('todo', ['ionic'])


.controller('TodoCtrl', function($scope) {

  $scope.tasks = [

    { title: 'Collect coins' },

    { title: 'Eat mushrooms' },

    { title: 'Get high enough to grab the flag' },

    { title: 'Find the Princess' }

  ];

});

Nasza aplikacja nabiera już kształtów, zostało jeszcze zarządzanie elementami listy, co bardzo prosto opisane zostało na oficjalnej stronie Ionica

Testowanie i kompilowanie

Jeśli nie jesteśmy pewni, czy aplikacja wyświetli się poprawnie, możemy uruchomić Ionic Lab, które ze specyficznymi ustawieniami i klasami dla danych systemów uruchamia stronę w oknie przeglądarki.

$ ionic serve --lab

Chciałbym jeszcze przedstawić to, w jaki sposób uruchomić aplikację na urządzeniu, korzystając z przykładu systemu Android.

Możemy wygenerować plik *.apk, który wygrywając na smartfon lub tablet możemy zainstalować i uruchomić. W tym celu wpisujemy poniższą komendę, który wygeneruje taki plik w katalogu platforms/android/build/outputs/apk

$ ionic build android

Udostępniony jest także Ionic View, o którym wspominałem w pierwszej części tego cyklu. Dopóki nie będziemy mieli finalnej wersji aplikacji, warto ją testować właśnie za pomocą tego narzędzia. Wówczas, logując się na konto Ionic, instalujemy aplikację Ionic View dostępną w Sklepie Play lub AppStore.

W tym momencie po wpisaniu komendy aplikacja jest wysłana na nasze konto, przez co możemy ją uruchomić w telefonie tak jak pełnoprawną aplikację.

$ ionic upload

Nasza aplikacja otrzymuje własny identyfikator, który możemy przekazać innej osobie, a po po wpisaniu go w IonicView możliwym jest podgląd aplikacji.

Jest to także o wiele wygodniejsza metoda testowania aplikacji iOS, gdyż aby wygenerować odrębny plik instalacyjny potrzebujemy płatnego konta developerskiego i dostępu do komputera Mac. IonicView pozwala nam na ominięcie tego ograniczenia.

Publikowanie aplikacji

Tutaj pojawia się konieczność poniesienia kosztów, których nie da się uniknąć, jeżeli chcemy umieścić nasz produkt w sklepie z aplikacjami. W Sklepie Play musimy zapłacić 25$ za konto developerskie i przejść weryfikację aplikacji, która odbywa się automatycznie w przeciągu doby. W przypadku AppStore proces ten jest mniej wygodny, gdyż koszt posiadania konta (bez którego nie udostępnimy aplikacji) wynosi 99$ za rok. Dodatkowo pracownicy Apple osobiście testują każdą aplikację i bardzo rygorystycznie podchodzą do swoich wytycznych. Akceptacja naszego produktu może trwać do tygodnia, a w przypadku uwag testerów publikacja aplikacji może się znacznie opóźnić.

Alternatywy

Jednymi z najpopularniejszych i dłużej dostępnych alternatyw Ionica są Intel XDA , PhoneGap lub Appcelerator Titanium, które udostępnia własny zestaw narzędzi:

PhoneGap – dystrybucja Cordovy rozwijana przez Adobe, która nie wymaga instalacji SDK przy opracowaniu aplikacji, gdyż udostępnia usługę kompilowania aplikacji w chmurze,
Intel XDA - również oparte na Cordovie środowisko wyposażone w wizualny edytor, pozwalający tworzyć aplikacje poprzez przeciąganie komponentów na obszar roboczy (podobnie do Ionic Creator),
Appcelerator Titanium - platforma zawierająca autorskie IDE (oparte na edytorze Eclipse), pozwalające pisać programy natywne jak i hybrydowe z wykorzystaniem własnego API.

Osobiście uważam, że Ionic jest najbardziej przyjaznym i jednocześnie najprostszym z dostępnych rozwiązań, a jego rosnąca popularność z dnia na dzień zwiększa ilość dostępnych wtyczek i rozszerzeń. 

Podsumowanie

Jeśli kiedykolwiek marzyliście o stworzeniu aplikacji mobilnej, lecz brak czasu na poznawanie nowych środowisk programistycznych skutecznie Was zniechęcał, możecie być pewni, że Ionic pozwoli wam przy samej znajomości JavaScript te marzenia zrealizować.  Aplikacje hybrydowe co prawda nigdy nie osiągną wydajności aplikacji pisanych w technologiach natywnych, więc tworzący je programiści mogą być spokojni o swoją pracę. Jednakże, możliwości jakie możecie osiągnąć bez znajomości Objective-C czy Javy, na pewno was pozytywnie zaskoczą!

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.