PhoneGap Školení #1
- 2. Agenda Den 1. • Úvod do platformy PhoneGap • Instalace nástrojů a výběr prostředí • PhoneGap app deploy • První aplikace a Adobe build server Den 2. • Práce se senzory (GPS, gyroskop, akcelerometr, kompas) • Práce s fotoaparátem a čárovými kódy • API napojení na Foursquare
- 3. Úvod • Open source řešení pro vývoj multiplatformních aplikací • Vývoj v HTML5, CSS3, JavaScript • Přístup k zdrojům telefonu • Adobe build server • Mobil i tablet (respozivita) • PhoneGap vs. Cordova
- 4. Naše aplikace • Postupné rozšiřování • Všechny ukázky v jedné aplikaci • Ukázky designu, vývoje a testování • DEMO: http://goo.gl/8JJ2BH
- 6. Cena Zdarma • Neomezeně open source aplikací • 1 private aplikace • Maximální velikost aplikace 50mb • Pouze veřejné pluginy 9.99/mo • 25 private aplikací • Maximální velikost aplikace 100mb • Veškeré pluginy
- 7. Cena Adobe Creative Cloud • Neomezeně open source aplikací • 25 private aplikací • Maximální velikost aplikace 1gb • Veškeré pluginy
- 8. Přístup ke zdrojům telefonu
- 9. Instalace nástrojů • NodeJS -> www.nodejs.org • Brackets -> www.brackets.io • PhoneGap Desktop App (Beta) -> www.goo.gl/0KVFSB • Registrace -> www.build.phonegap.com
- 10. Brackets • www.brackets.io • Code Editor • Open Source • Adobe • Windows, Mac i Linux • PhoneGap rozšíření
- 11. PhoneGap Desktop App • www.goo.gl/0KVFSB • Beta • Windows a Mac • Automatické sdílení a správa vašich aplikací
- 12. Instalace nástrojů • CMD -> Administrátorská práva • C:> npm install -g phonegap
- 13. PhoneGap deploy Wi-Fi app deploy • http://app.phonegap.com/ • Aplikace, iOS, Android, WP • Párování přes Wi-Fi • Žádná kompilace • AutoReload • Nefunkční user pluginy
- 14. PhoneGap deploy Package Deploy • http://build.phonegap.com/ • Kompilační systém • iOS – Developer account • Android – Stačí zařízení • WP– Developer unlock • User pluginy
- 15. První aplikace • Vygenerování aplikace • PhoneGap create moje-aplikace • Nastavení config.xml • Přepsání HTML, nastavení JS a CSS. • Otestování aplikace na mobilu • Build server -> Deploy do mobilu • Osobní řešení -> iOS, Android, WP • iOS, WP -> Možnost odemčení zařízení.
- 16. Design • Photoshop -> Vlastní řešení • Justinmind -> Hotové řešení • iPhone, Android a Google Glass designové prvky • Aplikace – Android, iPhone • HTML Generátor • Instalace -> http://www.justinmind.com • Demo
- 17. Buildmeister • PhoneGap Build instalátor a aktualizátor • Úpravy, záznamy, generování buildu. • iOS a Android
- 18. Emulátory • Android • Android SDK Emulator • http://developer.android.com/sdk/index.html • BlueStacks • http://www.bluestacks.com/ • Genymotion • http://www.genymotion.com/
- 19. • Windows Phone • Windows Phone SDK • http://dev.windows.com/en-us/develop/download-phone-sdk
- 20. Ikonky a Loading Screen • Automatický • Android
- 21. Ikonky a Loading Screen • iPhone
- 22. Ikonky a Loading Screen
- 23. Ukládání proměnných • PhoneGap API
- 24. GPS Senzor • HTML5 API • Latitude, longitude, přesnost pozice , nadmořská výška, přesnost nadmořské výšky, rychlost, časová známka přenosu • DEMO
- 25. Foursquare API • JSON • www.developer.foursquare.com • API Key
- 26. Gyroskop • Náklon telefonu • Zjištění zda je senzor v telefonu (starší Android zařízení)
- 27. Gyroskop • DEMO
- 28. Akcelerometr • Zrychlení v určitém směru • DEMO
- 29. Akcelerometr • Akcelerace, Rotace, Akcelerace s gravitací • DEMO
- 30. Kompas • PhoneGap API • Směr ve stupních • DEMO
- 31. Fotoaparát • PhoneGap API • DEMO
- 32. PhoneGap build Pluginy • https://build.phonegap.com/plugins • Nefunkční v PhoneGap Developer App • Generování na straně serveru • DEMO
- 33. Čárové kódy • BarcodeScanner Plugin • iOS a Android • www.build.phonegap.com/plugins/261
- 34. Optimalizace • Každý KB kódu se počítá • Vyhněte se zbytečným knihovnám • Více verzí grafiky dle rozlišení • Používejte komprimované knihovny • Jednoduší = přehlednější a rychlejší => lepší uživatelský zážitek
- 35. Optimalizace