MOBILNE APLIKACJE HYBRYDOWE

MOBILNE APLIKACJE HYBRYDOWE Waldemar Korłub KASK ETI Politechnika Gdańska

JavaScript 2 Początkowo wykorzystywany tylko w przeglądarce internetowej Obecnie: Przeglądarki cały czas Po stronie serwera Node.js Aplikacje okienkowe środowisko Electron Aplikacje mobilne hybrid apps/html5 apps

Aplikacje hybrydowe 3 HTML + CSS + JavaScript Zasoby statyczne spakowane w archiwum aplikacji Zamiast pobierania ich z Internetu przy każdym wejściu Strona HTML wyświetlana w komponencie WebView na urządzeniu mobilnym Komponent przeglądarki osadzony w interfejsie aplikacji

Komponent WebView 4 Umożliwia osadzenie przeglądarki w interfejsie aplikacji Android/iOS: WebView dystrybuowany jako osobna aplikacja Domyślnie zainstalowany Aktualizacje niezależne od wersji systemu n Korzystne dla deweloperów n Niezrozumiałe do użytkowników W aplikacji hybrydowej WebView wypełnia cały interfejs aplikacji

5 Ionic Framework

Ionic Framework 6 Zestaw narzędzi do generowania projektu Zestaw komponentów do budowania interfejsów aplikacji hybrydowych Zestaw bibliotek do modelowania przepływu sterowania i interakcji z systemem operacyjnym urządzenia mobilnego Zestaw narzędzi do uruchamiania i testowania aplikacji na emulatorach i smartphonach Zestaw narzędzi do budowania paczek dystrybucyjnych aplikacji na wiele platform Głównie Android oraz ios

Ionic generowanie projektu 7 $ ionic start CinemaApp sidemenu Struktura (główne elementy): platforms n Pliki związane z platformami mobilnymi plugins n Wtyczki, np. cordova resources n Zasoby statyczne, np. pliki graficzne, ikona aplikacji src n Kod aplikacji opartej o framework Angular package.json n Definicje zależności aplikacji config.xml

Ionic CLI 8 $ ionic platform add android Dodanie obsługi platformy $ ionic build android Zbudowanie wersji dystrybucyjnej $ ionic emulate android Uruchomienie w emulatorze $ ionic run Uruchomienie na podłączonym smartphonie $ ionic serve Uruchomienie lokalnego serwera testowanie w przeglądarce

Ionic dołączone biblioteki 9 PhoneGap/Cordova Wywoływanie funkcji systemu operacyjnego z poziomu języka JavaScript n Dostęp do czujników (np. akcelerometr, żyroskop, magnetometr) n Dostęp do aparatu fotograficznego n Dostęp do pamięci lokalnej na urządzeniu Angular Framework MV* po stronie klienta (w przeglądarce) Modelowanie przepływu sterowania w interfejsie użytkownika

Ionic widgety 10 Ionic oferuje zestaw gotowych komponentów do budowania interfejsów aplikacji Odzwierciedlają wygląd widgetów wykorzystywanych w aplikacjach natywnych Style dla ios, Androida, Windows Phone Komponenty: http://ionicframework.com/docs/components/ API do obsługi interakcji: http://ionicframework.com/docs/api/

11 TypeScript

Co jest nie tak z JavaScriptem? 12 Dynamiczne typowanie Brak weryfikacji typów na etapie wytwarzania kodu dopiero na etapie uruchomienia w przeglądarce Ograniczone wsparcie narzędziowe (IDE nie jest w stanie prawidłowo podpowiadać dostępnych metod obiektów) n Kontrakty funkcji i obiektów opisane w dokumentacji, a nie w kodzie źródłowym Dynamiczne typowanie jest wygodne w małych projektach i w czasie prototypowania W dużych, wieloosobowych projektach statyczne typowanie często ułatwia pracę n Kontrola typów na etapie kompilacji/transpilacji, lepsze wsparcie narzędziowe

Co jest nie tak z JavaScriptem? 13 Brak wsparcia dla przestrzeni nazw, pakietów, zasięgów na poziomie języka Idiom IIFE immediately-invoked function expression wprowadzanie zasięgu leksykalnego przy użyciu zasięgu funkcji Brak granularnej kontroli nad widocznością pól obiektów (np. private, package, protected, public) Model oparty na prototypach Słowo kluczowe class (ECMAScript 2015) to tylko cukier składniowy dla istniejącego modelu W efekcie: JavaScript słabo skaluje się w dużych projektach a aplikacje w przeglądarce rosną z każdym rokiem

TypeScript 14 Statycznie typowany język transpilowany do języka JavaScript Deweloper pracuje w TypeScripcie, przeglądarka otrzymuje zrozumiały dla siebie JavaScript Oferuje kompatybilność z najnowszymi wersjami JavaScriptu (ES2017) Transpilacja do ECMAScript 3 Lub nowszego według wyboru dewelopera n Flaga --target kompilatora Próba obejścia problemu wersji standardu i wersji obsługiwanych przez przeglądarki

TypeScript 15 Umożliwia korzystanie z istniejących bibliotek JavaScriptowych Declaration Files zawierają deklaracje typów dla bibliotek zaimplementowanych w JavaScriptcie, np. http://definitelytyped.org/ Wygenerowane pliki.js są (w miarę) czytelne dla dewelopera Strategia wyjścia Wersja 1.0: kwiecień 2014

TypeScript podstawowe użycie 16 Instalacja: $ npm install -g typescript Transpilacja pliku: $ tsc file.ts Obserwowanie zmian: $ tsc --watch file.ts Popularne IDE oferują integrację z narzędziami

17 Przegląd składni

Typy proste 18 Boolean: let isdone: boolean = false; Po transpilacji: var isdone = false; Number: let age: number = 42; let color: number = 0xf00dcc; String: let color: string = "blue"; color = 'red'; color = 0xaabbcc; Type '11189196' is not assignable to type 'string'

Typy proste 19 String szablony: let username: string = `world`; let greeting: string = `Hello, ${ username }!`; Po transpilacji: var username = "world"; var greeting = "Hello, " + username + "!"; Tablice: let list1: number[] = [42, 36, 28]; let list2: Array<number> = [27, 45, 19]; Wszystkie elementy tablicy tego samego typu

Typy proste 20 Krotki: let x: [string, number] = ["Waldemar", 22]; Typy wyliczeniowe: enum Color {Red, Green, Blue}; let c: Color = Color.Green; Typ Any: let zmienna: any = 42; zmienna = "Imiesław"; zmienna = false; Typ Void: Tylko null lub undefined Używany w deklaracjach typów zwracanych funkcji

Funkcje z deklaracjami typów 21 function greeter(username: string): string { return "Hello, " + username; } Podpowiadanie składni na podstawie typu à

Funkcje bez deklaracji typów JavaScript 22 function greeter(username) { return "Hello, " + username; } Podpowiadanie składni à

Parametry funkcji 23 Standardowo wszystkie parametry funkcji są wymagane Jak jest w przypadku JavaScriptu? Parametry opcjonalne można oznaczyć znakiem?: function greeter(username?: string): string { if(username) { return "Hello, " + username; } else { return "Hello!" } }

Parametry funkcji 24 Wartości domyślne definiowane na liście argumentów: function greeter(username: string = "world"): string { return "Hello, " + username; }

Zmienna liczba argumentów 25 function greeter(firstname: string,...othernames: string[]): string { return "Hello, "+username+" "+othernames.join(", "); } //wywołanie: greeter("world", "Waldemar", "Michał");

Programowanie obiektowe 26 class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } } greet() { return "Hello, " + this.greeting; } let greeter = new Greeter("world"); let powitanie = greeter.greet();

Dziedziczenie klasa bazowa 27 class Animal { public name: string; public constructor(thename: string) { this.name = thename; } } public move(distanceinmeters: number) { console.log( `${this.name} moved ${distanceinmeters}m.`); }

Klasa potomna 28 class Snake extends Animal { constructor(name: string) { super(name); } } move(distanceinmeters = 5) { console.log("slithering..."); super.move(distanceinmeters); }

Inna klasa potomna 29 class Horse extends Animal { constructor(name: string) { super(name); } } move(distanceinmeters = 45) { console.log("galloping..."); super.move(distanceinmeters); }

Poziomy dostępu 30 Public domyślny Pola i metody widoczne dla innych klas Protected Widoczne tylko w obrębie hierarchii dziedziczenia Private Dostępne tylko w obrębie danej klasy

Akcesory 31 Nie zaleca się udostępniania bezpośredniego dostępu do pól klasy class Animal { private _name: string; get name(): string { return this._name; } } set name(newname: string) { this._name = newname; }

Klasa abstrakcyjna 32 abstract class Animal { abstract makesound(): void; move(): void { console.log("move"); } }

Interfejsy 33 Opisuje kontrakt, który powinny spełniać obiekty Oczekiwane pola Dostępne metody Nie tworzymy instancji interfejsu lecz obiekty, które ten interfejs implementują

Interfejs i jego implementacja 34 interface Person { firstname: string; lastname: string; } email(message: string): string; class Student implements Person { firstname: string; lastname: string; } email(message: string): string { return this.firstname + "." + this.lastname + "@student.pg.edu.pl"; }

Interfejs i jego implementacja 35 let p: Person = {firstname: "Imiesław", lastname: "Nazwiskowy", email(): function() /*...*/}; let p2: Person = new Person(); //błąd kompilacji let p3: Person = new Student("Nazwisław", "Imiesłowy");

36 Angular

Framework Angular 37 Angular 1.x 2009 Angular 2.x wrzesień 2016 Framework został przepisany od zera Język TypeScript Wersja 2.x znacznie bardziej przypomina framework React niż Angulara 1.x n Migracja 1.x à 2.x wymaga wielu modyfikacji Angular 4, 5 2017 Wersjonowanie semantyczne Wersja 3.x pominięta ze względu na rozbieżność wersji poszczególnych komponentów à Google planuje nowe wydanie średnio co pół roku

38 Architektura

Architektura frameworka Angular 39 Aplikacja wykorzystuje język HTML i style CSS Poza standardowymi znacznikami HTML występują również dodatkowe specjalne znaczniki Dodatkowe znaczniki umożliwiają wykorzystanie komponentów definiowanych w projekcie Komponent opisuje fragment widoku oraz jego zachowania Komponent może być zbudowany z innych komponentów n Hierarchiczna struktura widoków Logika aplikacji implementowana w serwisach Komponenty i serwisy grupowane w modułach

40 Architektura

Architektura 41 Moduły (ang. modules) Komponenty (ang. components) Szablony (ang. templates) Metadane (ang. metadata) Wiązanie danych (ang. data binding) Dyrektywy (ang. directives) Serwisy (ang. services) Wstrzykiwanie zależności (ang. dependency injection)

Moduły 42 Aplikacje w Angularze dzieli się na moduły odpowiadające poszczególnym funkcjonalnościom Każda aplikacja posiada główny moduł o nazwie AppModule Małe aplikacje mogą posiadać tylko jeden moduł, duże aplikacje setki modułów Moduły definiowane jako klasy z dekoratorem @NgModule Dekoratory umożliwiają dołączenie metadanych do klasy

NgModule metadane 43 Najważniejsze metadane dekoratora NgModule: declarations lista komponentów wykorzystywanych do budowania widoków aplikacji exports lista klas/komponentów, które powinny być dostępne do wykorzystania przez inne moduły imports lista modułów, których wyeksportowane klasy są wykorzystywane w module bieżącym providers lista dostawców umożliwiających budowanie instancji serwisów do wykorzystania w całej aplikacji (we wszystkich modułach) bootstrap komponent reprezentujący główny widok aplikacji (do niego ładowane są wszystkie inne widoki), używany tylko dla AppModule

Przykład AppModule (app.module.ts) 44 @NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, AppRoutingModule ], declarations: [ AppComponent, DashboardComponent, HeroDetailComponent, HeroesComponent, ], providers: [ HeroService ], bootstrap: [ AppComponent ] }) export class AppModule { }

Moduły Angulara a moduły w języku 45 JavaScript W języku JavaScript każdy plik jest modułem Moduły w języku JavaScript i moduły frameworka Angular to dwie osobne koncepcje JavaScript: moduł = plik Angular: moduł = zbiór komponentów i serwisów W typowym projekcie używamy obu mechanizmów modułów równocześnie Wspólne nazewnictwo (moduł/import/export) dla odrębnych mechanizmów może wywoływać dezorientację

Moduły w języku JavaScript 46 Słowo kluczowe export w plikach (modułach).js określa obiekty, które dany moduł udostępnia innym modułom (plikom.js): export class AppModule { } export class AppComponent { } Inne pliki (moduły).js mogą korzystać z tych obiektów za pomocą dyrektywy import: import {AppComponent} from "./app.component";

47 Uruchomienie aplikacji za pomocą modułu AppModule Należy zaimportować klasę AppModule z pliku (modułu) JavaScript Wywołanie metody bootstrapmodule inicjuje moduł Angulara: import { AppModule } from './app/app.module'; platformbrowserdynamic(). bootstrapmodule(appmodule);

Komponenty (ang. components) 48 Reprezentują fragmenty widoków składające się na interfejs aplikacji Definiowane jako klasy z dekoratorem @Component Są reprezentowane przez dodatkowe znaczniki umieszczane w kodzie HTML, np.: <body> <my-app>loading...</my-app> </body>

Komponenty (ang. components) 49 Komponent określa: Szablon używany do zbudowania fragmentu widoku (tagi HTML obejmujące też tagi innych komponentów) Dane do prezentacji (model) Zachowania (funkcje obsługi zdarzeń) @Component najważniejsze metadane: selector selektor CSS określający które znaczniki na stronie mają zostać wypełnione zawartością komponentu templateurl ścieżka do pliku.html z szablonem providers lista dostawców serwisów, z których korzysta komponent

Przykładowy komponent 50 @Component({ selector: 'my-heroes', templateurl: './heroes.component.html', }) export class HeroesComponent { heroes: Hero[]; selectedhero: Hero; } constructor(private heroservice: HeroService, private router: Router) { } onselect(hero: Hero): void { this.selectedhero = hero; } gotodetail(): void { this.router.navigate(['/detail', this.selectedhero.id]); }

Szablony (ang. templates) 51 Wykorzystywane przez komponenty do wygenerowania treści w oknie przeglądarki Składnia opiera się na składni języka HTML Zawierają dodatkowe elementy Znaczniki umożliwiające dołączanie kolejnych komponentów do widoku Dyrektywy umożliwiające sterowanie procesem generowania wynikowego kodu HTML

Przykładowy szablon 52 <h2>hero List</h2> <p><i>pick a hero from the list</i></p> <ul> <li *ngfor="let hero of heroes" (click)="selecthero(hero)"> {{hero.name}} </li> </ul> <hero-detail *ngif="selectedhero" [hero]="selectedhero"> </hero-detail>

Wiązanie danych (ang. data binding) 53 Bez wykorzystania wiązania danych deweloper musi ręcznie umieszczać w drzewie DOM dane uzyskane w kodzie JavaScript (np. wyniki żądania AJAXowego) oraz ręcznie pobierać wartości z drzewa DOM w reakcji na zdarzenia emitowane przez użytkownika (np. keyup, click itd.) Przykładowo: walidacja formularza Po kliknięciu przycisku przez użytkownika pobranie danych z pól, a następnie dodanie komunikatów błędów na stronie Wiązanie danych automatyzuje proces wymiany informacji pomiędzy komponentem i drzewem DOM

4 formy wiązania danych 54 Interpolacja wartości: {{...}} Wiązanie właściwości elementów DOM: [property] Wiązanie obsługi zdarzenia: (event) Dwukierunkowe wiązanie danych: [(...)]

Interpolacja: {{ }} 55 Umożliwia wyznaczenie wartości wykorzystywanej w widoku na podstawie wyrażenia, np.: <h3>{{imgtitle}}</h3> <img src="{{imgurl}}"> Wyrażenie najczęściej odnosi się do pól/własności klasy komponentu Wyrażenie w nawiasach {{ }} jest konwertowane na ciąg znaków przed umieszczeniem w widoku

Wyrażenia (ang. template expressions) 56 Wyrażenie może realizować dodatkowe operacje, np.: <p>przekroczono próg o {{getscore()-gettreshold()}} punktów.</p> Wyrażenie nie powinno powodować efektów ubocznych Wyrażenie powinno być szybkie do wykonania Wyrażenia powinny być możliwie krótkie i proste Złożoną logikę należy umieścić w metodzie komponentu i wywoływać gotową metodę w wyrażeniu Wyrażenie powinno być idempotentne

Wiązanie własności 57 Wartości wyrażeń można również wiązać z właściwościami elementów drzewa DOM oraz właściwościami komponentów, np.: <button [disabled]="isunchanged">cancel</button> <img [src]="imgurl"> <hero-detail [hero]="selectedhero"> Takie wiązanie jest jednokierunkowe Zmiana wartości wyrażenia powoduje zmianę wartości właściwości, ale nie odwrotnie Wiązania odnoszą się do właściwości elementów drzewa DOM a nie do atrybutów tagów HTMLowych

58 Właściwości węzłów DOM a atrybuty elementów HTML Niektóre atrybuty elementów HTML mają bezpośrednie odzwierciedlenie w właściwościach węzłów drzewa DOM, np. id, src Dla niektórych atrybutów nie istnieją odpowiadające im właściwości, np. colspan, aria Niektóre właściwości nie posiadają odpowiadających im atrybutów, np. textcontent Niektóre atrybuty mają odzwierciedlenie we właściwościach, ale jest ono nieintuicyjne np. disabled: n W HTMLu sama obecność atrybutu powoduje nieaktywność elementu (bez względu na wartość) n W drzewie DOM disabled=true powoduje nieaktywność

Wiązanie dla atrybutów 59 Wiązania odnoszą się do właściwości elementów drzewa DOM a nie do atrybutów tagów HTMLowych poza jednym wyjątkiem: <td [attr.colspan]="getcolscount()">one-two</td> Jeśli atrybut nie posiada odpowiednika wśród właściwości DOM jedyny sposób na jego zmianę, to bezpośrednia zmiana atrybutu prefiks: attr.

Wiązanie właściwości CSS 60 Obiektem wiązania mogą być klasy CSS, np.: <div [class.special]="isspecial">...</div> Albo poszczególne właściwości CSS, np.: <button [style.color]="isspecial? 'red': 'green'"> <button [style.background-color]="cansave? 'cyan':'grey'">

{{ }} czy [property]=" "? 61 Interpolacja {{ }} zawsze konwertuje wynik na postać tekstową Wiązanie właściwości [property] zachowuje typ wiązanego wyrażenia

Wiązanie zdarzeń 62 Umożliwia wywoływanie funkcji obsługi zdarzeń zdefiniowanych w klasie komponentu w reakcji na akcje użytkownika, np.: <button (click)="onsave()">save</button>

Wiązanie dwukierunkowe 63 Zmiana wartości związanego pola zmienia wartość właściwości Zmiana wartości właściwości zmienia wartość pola Szczególnie przydatne przy pracy z formularzami Dwukierunkowe wiązanie zbudowane ręcznie : <input [value]="name" (input)="name=$event.target.value" > n Różne tagi formularzy wymagają użycia różnych atrybutów Z wykorzystaniem ngmodel: <input [(ngmodel)]="name">

ngmodel 64 Reprezentuje wartość pola w formularzu Umożliwia np. przypisanie wartości początkowej Równocześnie pozwala nasłuchiwać na zmiany Zmiana wartości wykonana przez użytkownika jest automatycznie odzwierciedlona w polu klasy komponentu Obsługuje wszystkie podstawowe elementy formularzy HTML Ukrywa różnice pomiędzy nimi, np.: n input à value n select/option à selected

Dyrektywy (ang. directives) 65 Dokumenty HTML posiadają statyczną strukturę Szablony widoków Angulara są dynamiczne Wynikowy HTML jest efektem przetworzenia szablonu zgodnie z umieszczonymi w nim dyrektywami Dwie grupy dyrektyw: Strukturalne modyfikują strukturę dokumentu poprzez dodawanie, usuwanie lub zamianę elementów, np.: n *ngfor dodawanie elementów w pętli n *ngif warunkowe wyświetlenie elementu Dyrektywy w postaci atrybutów modyfikują wygląd lub zachowanie istniejących już elementów

Serwisy (ang. services) 66 Logika aplikacji nie powinna być implementowana w klasach komponentów Komponent działa w kontekście konkretnego szablonu widoku trudno ponownie wykorzystać logikę zaszytą w klasie komponentu w innych miejscach aplikacji Kontroler powinien definiować pola i metody na potrzeby wiązania danych, a logikę delegować do serwisów Serwisy implementują logikę aplikacji w sposób niezależny od interfejsu Łatwe wykorzystanie w wielu różnych kontekstach Serwisy są dostarczane do komponentów na drodze wstrzykiwania zależności

67 Wstrzykiwanie zależności (ang. dependency injection) Klasa nie odpowiada za pozyskanie swoich zależności, zamiast tego zależności są do niej dostarczane z zewnątrz.

Wstrzykiwanie w Angularze 68 Wstrzykiwanie zależności jest nieodzownym mechanizmem frameworka Angular Wykorzystywane wewnętrznie przez sam framework oraz w komponentach opracowywanych przez autora aplikacji opartej na Angularze Za dostarczenie zależności odpowiada komponent injector Injector utrzymuje instancje serwisów, które mogą być wstrzykiwane Instancje pozyskiwane są przy użyciu dostawców (ang. providers) n Należy w projekcie zdefiniować dostawców dla wymaganych serwisów Wstrzykiwanie przez parametry konstruktora

TypeScript: Pola klasy w parametrach konstruktora 69 Jawnie zdefiniowane pola z inicjalizacją w konstruktorze: class Person { private firstname: string; private lastname: string; } constructor(first: string, last: string) { this.firstname = firstname; this.lastname = lastname; } Pola definiowane na poziomie konstruktora: class Person { constructor(private firstname: string, private lastname: string) { } }

70 Routing nawigacja w aplikacji

Routing 71 Typowe aplikacje internetowe składają się z wielu widoków, pomiędzy który nawiguje użytkownik RouterModule umożliwia definiowanie adresów, które spowodują wyświetlenie wybranych widoków (komponentów) aplikacji Znacznik <base href="/"> w sekcji <head> pliku index.html określa bazową ścieżkę dla adresów w ramach aplikacji

Przykładowy routing 72 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { DashboardComponent } from './dashboard.component'; import { HeroesComponent } from './heroes.component'; import { HeroDetailComponent } from './hero-detail.component'; const routes: Routes = [ { path: '', redirectto: '/dashboard', pathmatch: 'full' }, { path: 'dashboard', component: DashboardComponent }, { path: 'detail/:id', component: HeroDetailComponent }, { path: 'heroes', component: HeroesComponent } ]; @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export class AppRoutingModule {}

Nawigacja 73 Nawigacja z użyciem dyrektyw routerlink: <a routerlink="/dashboard" routerlinkactive="active">dashboard</a> <a routerlink="/heroes" routerlinkactive="active">heroes</a> Komponent zdefiniowany w routingu zostanie wyświetlony poniżej elementu: <router-outlet></router-outlet>

Bibliografia 74 Wykorzystano materiały na licencji CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/) z oficjalnej dokumentacji frameworka Angular by Google (https://angular.io/docs/ts/latest/)

75 Pytania?