Getting started with PhoneGap

628 views

Published on

Introduction talk on Phonegap. Tells you why you should care about mobile, and how to start off using Phonegap. After seeing this presentation you should be able to start a Phonegap project pretty rapidly and feel comfortable with the file structure you're working in and structures of the platforms you're building your app for.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
628
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
32
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Getting started with PhoneGap

  1. 1. Getting started with 010PHP, October 10th 2013
  2. 2. And you are?  Patrick van Kouteren  Lead developer – Infopact Netwerk & Communicatie  Developer (& owner) – WeDesignIt  F1, Running, Aquaria, CODING pvankouteren @pvankouteren IRC pvankouteren
  3. 3. Mobile facts and estimates (http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/)
  4. 4. Increments in mobile share of web traffic in just two years: North America: +69% Asia: + 192% Africa is getting started..
  5. 5. Joining the OS party..
  6. 6. Application considerations  Target audience?  App? WebApp? Responsive website?  Focus on one or a couple of platforms?
  7. 7. Introducing Phonegap  Adobe / Nitobi  Apache Cordova  Goal: to cease to exist  Abstraction for many platforms, different programming languages
  8. 8. What does it do? • HTML5 container • Javascript APIs to device functionalities • Plugins
  9. 9. How to install • Prerequisite: Node.js • Dependent on build type: target platform(s) SDK(s) Installing:
  10. 10. Getting started: Phonegap CLI
  11. 11. Getting started: Phonegap CLI
  12. 12. Getting started: Phonegap CLI
  13. 13. Getting started: Phonegap CLI
  14. 14. File structure • merges • platforms • plugins • www Platform specific code to merge Build output per platform Project plugins Project code
  15. 15. config.xml • App name, description, author • App behavior (“preferences”) • App permissions (“preferences”) • Icon and splash screen locations • Whitelisting of domains (like urls for in-app browser)
  16. 16. config.xml: preferences
  17. 17. Creating an app.. • HTML5 • CSS: plain, Twitter Bootstrap, TopCoat • Javascript: plain, AngularJS, Ember, Backbone.js, Knockout.js, Knockback.js, Spine… And/or • Frameworks/libaries: jQuery mobile (tip: save time, use the themeroller..), Sencha, Phone.js
  18. 18. Creating an app.. • Still kind of a wild west.. • Use what works for you • For the sake of speed: layers and code size
  19. 19. Creating an app: HTML
  20. 20. Creating an app: Javascript
  21. 21. App testing: Javascript • Unit testing: Jasmine provided on creation • Selenium, appium
  22. 22. App testing: User testing • Regular browser testing • Browser plugin: Ripple • Devices > browser!
  23. 23. App testing: User testing
  24. 24. App testing: User testing
  25. 25. App testing: User testing
  26. 26. App testing: • Once built: Simulators for Android, Xcode etc.
  27. 27. Building • Local: SDKs needed! • Remote: build.phonegap.com • 1st private app / Open source: free • 2-25 private apps: >= $ 10/month
  28. 28. Building local on CLI
  29. 29. Building local on CLI
  30. 30. Looks familiar?
  31. 31. Applied config.xml
  32. 32. Testing on devices • Browser never as accurate as device • Various screen sizes and resolutions • Input lag • Touch instead of mouse: drag / swipe events
  33. 33. Testing on devices
  34. 34. Testing on devices OpenDeviceLab http://opendevicelab.com
  35. 35. Phonegap is an awesome tool.. but...
  36. 36. .. not unlimited awesome • Abstraction layer: less responsive than native • It uses browser components of OS • Yes, browser related stuff still holds (who wants to work with Windows Mobile now?) • Games: canvas, javascript, hardware rendering
  37. 37. Platforms and tools support
  38. 38. Platforms and tools support
  39. 39. Some issues I encountered.. • (iOS) fixed header: initial scollpane offset • Fix: trigger window resize on start • (Android < 3, jQuery Mobile) <select> items not showing • Fix: data-native-menu=“false”
  40. 40. Some issues I encountered.. • (iOS) Splash screen config: statusbar on splash screen display • Fix: Enable this in CODE, not in Xcode • (Android) Splash screen duration: config setting not used • Fix: Enable this in code
  41. 41. Summarized • Many platforms out there (still increasing) • HTML, CSS, JS -> native project with container • Powerful CLI tool • No standards: Pick the tools that work for you • Testing options, UX: device > browser • Support for many platforms, APIs, but not all
  42. 42. Future • Native vs. HTML5 • HTML5 app structure seems to converge: • Chrome apps • Firefox OS (mobile + TV!) • Phonegap • Tizen (mobile + TV!) • By 2014, mobile internet expected to take over desktop usage
  43. 43. Useful resources • http://docs.phonegap.com • http://diveintohtml5.info • http://coenraets.org/blog/ • http://devgirl.org • http://phonegap-tips.com
  44. 44. Questions?
  45. 45. Thanks! Questions, comments: pvankouteren | @pvankouteren | IRC pvankouteren

×