Ioni

1. Ionic Framework
aplikacja mobilna
w 15 minut

2. Autor
Tomasz Borowski
Ruby on Rails
Ember, Angular, Ionic
TomaszBorowski.com

3. 1.
Aplikacje
cross-platform
krótkie przypomnienie

4. Aplikacje natywne
Napisane są w języku,
na którym bazuje
system operacyjny
danego urządzenia.
◎ Android - Java
◎ iOS - Objective-C
◎ Windows - C#

5. Aplikacje cross-platform
Działają na więcej niż
jednym systemie
operacyjnym i
architekturze.
◎ HTML5
◎ JavaScript
◎ CSS

6. Wybór bibliotek, narzędzi i platform
wybierz jeden wybierz jeden wybierz wiele :)

7. Wybór bibliotek, narzędzi i platform
framework JS / HTML Paczkowanie / API Docelowe OS

8. 2.
Przygotowanie
środowiska
instalacja wymaganych bibliotek

9. Instalacja node.js
Środowisko
programistyczne do
tworzenia aplikacji
internetowych w języku
JavaScript
◎ zawiera manager
pakietów - npm
◎ do pobrania z nodejs.
org

10. Instalacja Ionic i Cordova
Ionic
Framework do budowania
interfejsu aplikacji cross-
platform.
Cordova
Platforma do budowania
natywnych aplikacji
mobilnych przy użyciu HTML,
JS, CSS.

11. Instalacja Ionic i Cordova
npm install -g
cordova ionic

12. 3.
Tworzenie
aplikacji z Ionic
generowanie aplikacji, konfiguracja,
uruchomienie

13. Generowanie aplikacji z Ionic Creator

14. Ionic korzysta z szablonów
do tworzenia aplikacji:
◎ tabs - nawigacja oparta
o zakładki
◎ sidemenu - nawigacja
oparta o boczne menu
◎ blank - “czysty” projekt
ionic templates
ionic start myapp tabs
Generowanie aplikacji z szablonów

15. Uruchomienie aplikacji w przeglądarce
ionic serve

16. Uruchomienie aplikacji w przeglądarce

17. Struktura plikowa projektu
◎ platforms
zawiera wygenerowane
natywne projekty dla np.
Androida, iOS
◎ plugins
zawiera wykorzystywane
pluginy Cordovy / PhoneGapa
◎ resources
zawiera splashscreeny i ikony
◎ www
zawiera kod aplikacji, bazujący
na Angular.JS

18. 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

19. Konfiguracja narzędzia gulp (opcjonalne)
Gulp pozwala na
automatyzację procesów.
Konfiguracja zawarta jest
w pliku .gulpfile
◎ SASS → CSS
◎ CoffeeScript → JavaScript
◎ Uruchamianie testów
◎ ...

20. Generowanie ikon i splashscreenów (opcjonalne)
Ionic pozwala wygenerować
ikony i splashscreeny dla
obsługiwanych platform
oraz rodzajów urządzeń.
ionic resources

21. 4.
Obsługa platform
mobilnych
dodawanie i uruchamianie platform
oraz obsługa pluginów Cordovy

22. Dodawanie platformy Android

23. Dodawanie platformy Android
ionic platform
add android

24. Uruchamianie aplikacji w emulatorze
ionic run android

25. Uruchamianie aplikacji w emulatorze

26. Uruchamianie aplikacji na urządzeniu
ionic run android

27. 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

28. Korzystanie z pluginów Cordovy
Następnie możemy korzystać z
JavaScript’owego API
window.imagePicker
.getPictures(
cameraSuccess,
cameraError,
cameraOptions
);

29. 5.
Debugowanie
aplikacji
z wykorzystaniem Chrome Inspector

30. 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

31. Device Mode w Chrome Inspector

32. Debugowanie zainstalowanej aplikacji
chrome://inspect/#devices

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

34. Platformy do dystrybucji aplikacji mobilnych
Koszt free $25 jednorazowo $99 rocznie
Testowanie
poprzez
adresy email
poprzez
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)

35. 7.
Przykład aplikacji
cross-platform

36. The Secrets of Newtown:
Historia Eindera Waldena
Ionic Framework, Cordova.
Poznaj intrygującą historię
doktora Eindera Waldena,
który był świadkiem
przedziwnych zdarzeń
w mieście Newtown.
Place your screenshot here

37. Dziękuję!
Pytania?
Kontakt i więcej informacji o mnie
TomaszBorowski.com

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