Ionic Frameworkaplikacja mobilnaw 15 minut

AutorTomasz Borowski

Ruby on RailsEmber, Angular, Ionic

TomaszBorowski.com

1.Aplikacjecross-platformkrótkie przypomnienie

Aplikacje natywne

Napisane są w języku, na którym bazuje system operacyjny danego urządzenia.

◎ Android - Java◎ iOS - Objective-C◎ Windows - C#

Aplikacje cross-platform

Działają na więcej niż jednym systemie operacyjnym i architekturze.

◎ HTML5◎ JavaScript◎ CSS

Wybór bibliotek, narzędzi i platform

wybierz jeden wybierz jeden wybierz wiele :)

Wybór bibliotek, narzędzi i platform

framework JS / HTML Paczkowanie / API Docelowe OS

2.Przygotowanie środowiskainstalacja wymaganych bibliotek

Instalacja node.js

Środowisko programistyczne do tworzenia aplikacji internetowych w języku JavaScript◎ zawiera manager

pakietów - npm◎ do pobrania z nodejs.

org

Instalacja Ionic i Cordova

IonicFramework do budowania interfejsu aplikacji cross-platform.

CordovaPlatforma do budowania natywnych aplikacji mobilnych przy użyciu HTML, JS, CSS.

Instalacja Ionic i Cordova

npm install -g cordova ionic

3.Tworzenie aplikacji z Ionicgenerowanie aplikacji, konfiguracja, uruchomienie

Generowanie aplikacji z Ionic Creator

Ionic korzysta z szablonów do tworzenia aplikacji:◎ tabs - nawigacja oparta

o zakładki◎ sidemenu - nawigacja

oparta o boczne menu◎ blank - “czysty” projekt

ionic templatesionic start myapp tabs

Generowanie aplikacji z szablonów

Uruchomienie aplikacji w przeglądarce

ionic serve

Uruchomienie aplikacji w przeglądarce

Struktura plikowa projektu

◎ platformszawiera wygenerowane natywne projekty dla np. Androida, iOS

◎ pluginszawiera wykorzystywane pluginy Cordovy / PhoneGapa

◎ resourceszawiera splashscreeny i ikony

◎ wwwzawiera kod aplikacji, bazujący na Angular.JS

Struktura plikowa aplikacji (folder “www”)

Aplikacja angular.js, wykorzystująca routing oraz dyrektywy z Ionic.◎ css definicja stylów

◎ img pliki graficzne

◎ js kod aplikacji

◎ lib zewnętrzne biblioteki

◎ templates szablony HTML

◎ index.html

Konfiguracja narzędzia gulp (opcjonalne)

Gulp pozwala na automatyzację procesów.Konfiguracja zawarta jest w pliku .gulpfile◎ SASS → CSS◎ CoffeeScript → JavaScript◎ Uruchamianie testów◎ ...

Generowanie ikon i splashscreenów (opcjonalne)

Ionic pozwala wygenerować ikony i splashscreeny dla obsługiwanych platform oraz rodzajów urządzeń.

ionic resources

4.Obsługa platformmobilnychdodawanie i uruchamianie platform oraz obsługa pluginów Cordovy

Dodawanie platformy Android

Dodawanie platformy Android

ionic platform add android

Uruchamianie aplikacji w emulatorze

ionic run android

Uruchamianie aplikacji w emulatorze

Uruchamianie aplikacji na urządzeniu

ionic run android

Korzystanie z pluginów Cordovy

Pluginy pozwalają na korzystanie z zasobów urządzenia, np. pamięci, GPS, kamery, etc.

ionic plugin add

com.synconset.imagepicker

Oficjalna lista dostępnych pluginów na plugins.cordova.io

Korzystanie z pluginów Cordovy

Następnie możemy korzystać z JavaScript’owego API

window.imagePicker

.getPictures(

cameraSuccess,

cameraError,

cameraOptions

);

5.Debugowanie aplikacjiz wykorzystaniem Chrome Inspector

Debugowanie aplikacji z Chrome Inspector

Chrome Inspector posiada bogaty zestaw narzędzi do debugowania aplikacji oraz przydatny Device Mode, umożliwiający m.in.:◎ dopasowanie rozdzielczości

do wybranego urządzenia◎ symulację transferu danych◎ symulację odczytu sensorów

Device Mode w Chrome Inspector

Debugowanie zainstalowanej aplikacji

chrome://inspect/#devices

6.Publikowanie aplikacjiudostępnianie aplikacji testerom, dodawanie aplikacji do store’ów

Platformy do dystrybucji aplikacji mobilnych

Koszt free $25 jednorazowo $99 rocznie

Testowaniepoprzez

adresy emailpoprzez

społeczności G+poprzez

TestFlight

Publiczna dystrybucja nie tak tak

Czas do publikacji nie dotyczy około 12 godzin

(zaindeksowanie)około 1 tydzień

(weryfikacja)

7.Przykład aplikacji cross-platform

The Secrets of Newtown: Historia Eindera WaldenaIonic Framework, Cordova.

Poznaj intrygującą historię doktora Eindera Waldena, który był świadkiem przedziwnych zdarzeń w mieście Newtown.

Place your screenshot here

Dziękuję!Pytania?

Kontakt i więcej informacji o mnie

TomaszBorowski.com

Credits

Special thanks to all the people who had made and released these awesome resources for free:◎ Presentation template by SlidesCarnival