Successfully reported this slideshow.
Your SlideShare is downloading. ×

Ionic framework - aplikacja mobilna w 15 minut

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 38 Ad
Advertisement

More Related Content

Similar to Ionic framework - aplikacja mobilna w 15 minut (20)

Advertisement

Ionic framework - aplikacja mobilna w 15 minut

  1. 1. Ionic Framework aplikacja mobilna w 15 minut
  2. 2. Autor Tomasz Borowski Ruby on Rails Ember, Angular, Ionic TomaszBorowski.com
  3. 3. 1. Aplikacje cross-platform krótkie przypomnienie
  4. 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. 5. Aplikacje cross-platform Działają na więcej niż jednym systemie operacyjnym i architekturze. ◎ HTML5 ◎ JavaScript ◎ CSS
  6. 6. Wybór bibliotek, narzędzi i platform wybierz jeden wybierz jeden wybierz wiele :)
  7. 7. Wybór bibliotek, narzędzi i platform framework JS / HTML Paczkowanie / API Docelowe OS
  8. 8. 2. Przygotowanie środowiska instalacja wymaganych bibliotek
  9. 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. 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. 11. Instalacja Ionic i Cordova npm install -g cordova ionic
  12. 12. 3. Tworzenie aplikacji z Ionic generowanie aplikacji, konfiguracja, uruchomienie
  13. 13. Generowanie aplikacji z Ionic Creator
  14. 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. 15. Uruchomienie aplikacji w przeglądarce ionic serve
  16. 16. Uruchomienie aplikacji w przeglądarce
  17. 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. 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. 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. 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. 21. 4. Obsługa platform mobilnych dodawanie i uruchamianie platform oraz obsługa pluginów Cordovy
  22. 22. Dodawanie platformy Android
  23. 23. Dodawanie platformy Android ionic platform add android
  24. 24. Uruchamianie aplikacji w emulatorze ionic run android
  25. 25. Uruchamianie aplikacji w emulatorze
  26. 26. Uruchamianie aplikacji na urządzeniu ionic run android
  27. 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. 28. Korzystanie z pluginów Cordovy Następnie możemy korzystać z JavaScript’owego API window.imagePicker .getPictures( cameraSuccess, cameraError, cameraOptions );
  29. 29. 5. Debugowanie aplikacji z wykorzystaniem Chrome Inspector
  30. 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. 31. Device Mode w Chrome Inspector
  32. 32. Debugowanie zainstalowanej aplikacji chrome://inspect/#devices
  33. 33. 6. Publikowanie aplikacji udostępnianie aplikacji testerom, dodawanie aplikacji do store’ów
  34. 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. 35. 7. Przykład aplikacji cross-platform
  36. 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. 37. Dziękuję! Pytania? Kontakt i więcej informacji o mnie TomaszBorowski.com
  38. 38. Credits Special thanks to all the people who had made and released these awesome resources for free: ◎ Presentation template by SlidesCarnival

×