ionic framework - aplikacja mobilna w 15 minut
Post on 18-Jul-2015
228 Views
Preview:
TRANSCRIPT
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
top related