Mobilne aplikacje hybrydowe 1. Przygotowanie środowiska pracy Praca z aplikacjami hybrydowymi wymaga instalacji kilku komponentów. Wykorzystany zostanie framework Ionic, który opiera się na menadżerze pakietów npm, będącym częścią środowiska Node.js. Do testowania aplikacji mobilnych posłuży system Android, co oznacza konieczność instalacji SDK dla tego systemu oraz emulatora. Narzędzia do budowania aplikacji dla systemu Android wymagają z kolei instalacji środowiska deweloperskiego Javy. W pierwszym kroku należy przygotować katalog, w którym zgromadzone zostaną wszystkie wymagane narzędzia. Należy wykonać polecenia: mkdir ium cd ium Jeśli występują problemy z kopiowaniem poleceń z instrukcji w formacie PDF można posłużyć się plikiem tekstowym polecenia.txt, który zamieszczono na stronie zadania. Zawiera ona wyciąg wszystkich poleceń przedstawionych w instrukcji. Następnie zainstalowane zostanie środowisko Node.js. W tym celu należy pobrać pakiet dystrybucyjny ze strony projektu, a następnie rozpakować go w bieżącym katalogu: wget https://nodejs.org/dist/v6.10.2/node-v6.10.2-linux-x64.tar.xz tar xf node-v6.10.2-linux-x64.tar.xz Kolejnym krokiem jest instalacja Javy na potrzeby narzędzi deweloperskich dla systemu Android. Należy pobrać aktualną wersję Javy przy użyciu poniższego polecenia (wywołanie polecenia jest równoznaczne z akceptacją licencji dostępnej na stronie: http://www.oracle.com/technetwork/java/javase/terms/license/index.html): wget --no-check-certificate --no-cookies \ --header "Cookie: oraclelicense=accept-securebackup-cookie" \ http://download.oracle.com/otn-pub/java/jdk/8u92-b14/jdk-8u92-linux-x64.tar.gz Następnie należy rozpakować pobrane archiwum: tar xf jdk-8u92-linux-x64.tar.gz Jeśli instalacja Javy przebiegła pomyślnie, możemy przejść do instalacji SDK systemu Android. Zaczynamy od pobrania i rozpakowania archiwum z podstawowymi narzędziami: wget https://dl.google.com/android/android-sdk_r24.4.1-linux.tgz tar xf android-sdk_r24.4.1-linux.tgz Dla wygody pracy należy ustawić zmienne środowiskowe PATH, JAVA_HOME oraz ANDROID_HOME. Pozwoli to na wywoływanie pobranych narzędzi z dowolnego katalogu, bez konieczności podawania każdorazowo pełnej ścieżki. Należy zapisać plik export_paths.sh (ze strony zadania) w katalogu ium, a następnie wykonać polecenie: source export_paths.sh Waldemar Korłub 1
Po tej operacji wywołanie polecenia java -version powinno zwrócić wynik podobny do poniższego: student@des01:~/ium> java -version java version "1.8.0_92" Java(TM) SE Runtime Environment (build 1.8.0_92-b14) Java HotSpot(TM) 64-Bit Server VM (build 25.92-b14, mixed mode) Następnie zainstalujemy framework Ionic przy użyciu polecenia: npm install -g cordova ionic Kolejnym krokiem jest uruchomienie graficznego narzędzia do konfiguracji SDK systemu Android, które pozwoli na pobranie wymaganych komponentów:./android-sdk-linux/tools/android Należy zaznaczyć pozycje widoczne na zrzutach ekranu poniżej i przejść danej, klikając na przycisk Install. Waldemar Korłub 2
Przed właściwą instalacją konieczne jest zaakceptowanie licencji: W poprzednim kroku zainstalowane zostały narzędzia do budowania aplikacji. Aby aplikację uruchomić, konieczna jest jeszcze instalacja emulatora. W oknie konsoli należy wywołać polecenie:./android-sdk-linux/tools/android avd Wyświetlone zostanie okno menadżera urządzeń wirtualnych. Należy przejść do zakładki Device Definitions, odszukać na liście pozycję Nexus 5 by Google i kliknąć na przycisk Create AVD. Waldemar Korłub 3
Gdy pojawi się okno ustawień, należy upewnić się, że wszystkie pola są wypełnione jak na zrzucie poniżej, a następnie kliknąć przycisk OK. Po tych krokach środowisko jest gotowe do pracy. W dalszej części przy użyciu zainstalowanych dotychczas narzędzi uruchomiona zostanie przykładowa aplikacja. Waldemar Korłub 4
2. Przygotowanie podstawowego projektu Zaczynamy od utworzenia katalogu na projekty aplikacji mobilnych: mkdir projects cd projects Następnie posługujemy się poleceniem ionic, aby wygenerować szablon pierwszego projektu: ionic start CinemaApp sidemenu Na pytanie o założenie konta odpowiadamy negatywnie: Create an ionic.io account to send Push Notifications and use the Ionic View app? (Y/n): n Następnie przechodzimy do katalogu nowej aplikacji: cd CinemaApp Kolejnym krokiem jest dodanie obsługi platformy Android do naszej aplikacji. Odbywa się to z użyciem polecenia: ionic platform add android Po tych operacjach zbudujemy archiwum APK, które zawiera aplikację dla systemu Android, a następnie uruchomimy ją w emulatorze. Budowanie inicjujemy wywołując plecenie: ionic build android Uruchomienie aplikacji jest możliwe przy użyciu polecenia: ionic emulate android Wywołanie powyższego polecenie spowoduje uruchomienie emulatora systemu Android, a następnie instalację i uruchomienie naszej aplikacji. Jeśli emulator zostanie uruchomiony, ale aplikacja nie wystartuje, należy przerwać polecenie w konsoli przy użyciu kombinacji klawiszy Ctrl+C. Emulator systemu Android pozostanie uruchomiony. Następnie należy powtórzyć poprzednie polecenie. W efekcie powinien być widoczny główny ekran przykładowej aplikacji. Jeśli dysponujemy smartphonem z systemem Android możliwe jest uruchomienie aplikacji na własnym urządzeniu po uprzednim podłączeniu go do komputera przy użyciu kabla USB. Dopóki jednak nie wykorzystujemy żadnych specyficznych możliwości smartphonów, projekt może być testowany w standardowej przeglądarce internetowej, jak każda aplikacja oparta o HTML i język JavaScript. Aby przetestować aplikację w przeglądarce, należy w katalogu projektu wywołać polecenie: ionic serve Waldemar Korłub 5
Dodatkową zaletą testowania w przeglądarce jest to, że zmiany wykonywane w kodzie źródłowym projektu są automatycznie odświeżane w działającej aplikacji. Projekt aplikacji, który wygenerowano przy użyciu narzędzia ionic, można otworzyć w środowisku WebStorm wybierając z menu File > Open. 3. Zadania do wykonania 1. Należy zapoznać się ze strukturą wygenerowanej aplikacji zwracając szczególną uwagę na komponenty Angulara oraz widgety dostarczane przez framework Ionic. 2. Należy pobrać archiwum z przykładową aplikacją back-endową ajax-server.zip ze strony zadania. Następnie należy rozpakować archiwum, po czym w uzyskanym katalogu wywołać polecenie: php -S 0.0.0.0:8080 -t web Jest to ta sama aplikacja back-endowa, którą wykorzystano w czasie zajęć Laboratorium: AJAX (https://enauczanie.pg.edu.pl/moodle/mod/page/view.php?id=44640) w ramach przedmiotu Dokumenty cyfrowe. Aplikacja udostępnia następujące zasoby: http://localhost:8080/promoted - lista promowanych filmów, http://localhost:8080/posters/* - plakaty filmów, http://localhost:8080/news - lista wiadomości, http://localhost:8080/movies?q=gra - wyszukiwanie filmów, wartość parametru q jest frazą wyszukiwania, http://localhost:8080/reservations - możliwość dokonywania rezerwacji biletów (żądania typu POST), W dalszych zadaniach należy zmodyfikować aplikację mobilną tak, aby komunikowała się z back-endem. 3. Należy zmodyfikować widok listy tak, aby prezentował informacje o promowanych filmach. 3.1 Należy dodać nową klasę zawierającą pola opisujące film (pola klasy powinny odpowiadać polom w odpowiedzi w formacie JSON, którą wysyła back-end) 3.2 Należy dodać klasę serwisową, która odpowiada z komunikację z back-endem, o kodzie jak niżej: import {Injectable} from "@angular/core"; import {Http} from "@angular/http"; import {Observable} from "rxjs/observable"; import "rxjs/add/operator/map"; import {Item} from "./item"; @Injectable() export class ListService { constructor(private http: Http) { } } private url = 'http://localhost:8080/promoted'; getitems(): Observable<Item[]> { return this.http.get(this.url).map(response => response.json() as Item[]); } Waldemar Korłub 6
W przypadku testowania aplikacji w emulatorze Androida należy zmienić adres localhost na adres IP: 10.0.2.2. 3.3 W pliku app.module.ts należy: dodać klasę ListService do tablicy providers, dodać klasę HttpModule od tablicy imports, 3.4 Do klasy ListPage należy dodać interfejs OnInit, a następnie metodę: ngoninit(): void { this.items = this.listservice.getitems(); } Typ pola items należy zmienić na Observable<Item[]>. Przez konstruktor klasy należy wstrzyknąć serwis ListService przygotowany w kroku 3.2. Równocześnie należy usunąć z konstruktora oryginalny kod odpowiedzialny za ustawianie wartości pola this.items. 3.5 Zawartość pliku list.html należy zmienić do postaci: <ion-header> <ion-navbar> <button ion-button menutoggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>list</ion-title> </ion-navbar> </ion-header> <ion-content> <ion-list> <button ion-item *ngfor="let item of items async" (click)="itemtapped(event, item)"> {{item.title}} <div class="item-note" item-right> {{item.director}} </div> </button> </ion-list> <div *ngif="selecteditem" padding> You navigated here from <b>{{selecteditem.title}}</b> </div> </ion-content> 3.6 Po wykonaniu powyższych modyfikacji należy przetestować aplikację w przeglądarce lub w emulatorze Androida. 4. Należy dodać nowy widok do aplikacji, który wyświetla newsy pobrane z backendu (zasób pod adresem http://localhost:8080/news). 5. Należy dodać nowy widok, który umożliwia wyszukiwanie filmów na podstawie tytułu podanego przez użytkownika (zasób http://localhost:8080/movies?q=gra). Widok powinien zawierać pole tekstowe na wpisanie tytułu, przycisk inicjujący wyszukiwanie oraz listę wyników pobranych z back-endu. 6. Należy dodać nowy widok do aplikacji, który wyświetla szczegóły jednego filmu (np. wybranego z listy wyników wyszukiwania). 7. W widoku szczegółów pojedynczego filmu należy dodać przycisk umożliwiający wykonanie rezerwacji (zasób http://localhost:8080/reservations, żądanie POST). Informację o sukcesie (bądź porażce) rezerwacji należy wyświetlić jako alert. Waldemar Korłub 7