A short introduction in developing mobile apps with Phonegap

1. Introduction to
Phonegap
Andrei Firoiu
@andreifiroiu
http://andreifiroiu.me

2. Mobile app types
• Native
• Web based
• Hybrid

3. Native
• dev in device-specific languages (Objective C,
Java)
• full access to device APIs (storage, location
services, sensors, etc)
• native UI
• fast

4. Web based
• dev in web based languages/frameworks (HTML5,
JavaScript)
• running in browser, everything is loaded from a
server
• no access to native APIs
• easy to made/deploy
• slow

5. Hybrid
• layout rendering is done via web views
• packaged as apps for distribution
• have access to native device APIs (plugins,
intermediate APIs)
• intermediate speed

6. Hybrid Platforms
• PhoneGap
• Intel App Framework
• Titanium Appcelerator
• and more

7. Phonegap History
• 2008 - Born at iPhoneDevCamp event in San
Francisco
• 2009 - Apple Inc. has confirmed that the framework
has its approval
• 2011 - Adobe officially announced the acquisition
of Nitobi Software
• 2011 - Contributed to the Apache Software
Foundation (Apache Cordova)

8. !
Phonegap
=
Apache Cordova
http://phonegap.com/ https://cordova.apache.org/

9. Phonegap =
Apache Cordova
• Cordova is the open source Apache project
• Phonegap is the downstream distribution of
Cordova from Adobe
• PhoneGapBuild (cloud compiler)

10. Supported platforms
!
• iOS
• Android
• Windows 8
• Windows Phone 7 and 8
• BlackBerry 5.x+
• WebOS
• Symbian
• Tizen

11. Platform Components
• web UI frameworks (jQuery Mobile)
• a set of device APIs that allow to access native
device functions from JavaScript
• a bridging mechanism that allows JavaScript
running in the Web view to invoke native code
contained in the application

12. Mobile Frameworks
• jQuery Mobile
• Ionic / Angular
• Sencha Touch
• Kendo UI Complete
• AppGyver / Steroids
• Enyo
• …and another quadrillion of them

13. Plugins
!
• battery status
• accelerometer / compass
• camera
• contacts
• file system
• media playback and recording
• network availability
• geolocation

14. Plugins
!
• barcode scanning
• Bluetooth
• push notifications
• text to speech
• calendars
• Facebook Connect

15. DOM objects / API calls

16. Demo Time!

17. Examples

18. Debugging
• Browser dev/debugging tools
• Apache Ripple
• Safari Web Inspector
• Google Chrome Dev Tools
• weinre (WEb INspector REmote)

19. PhoneGapBuild
• Build apps in the cloud
• Don’t need platform specific tools (Xcode, Android
SDK)

20. Conclusions
• Unitary design across mobile platforms
• Attempting to mimic the native platform controls in
HTML and CSS is generally a bad idea.
• Best for rapid prototyping
• Code once, deploy everywhere

21. Thanks!
Q&A
Andrei Firoiu
@andreifiroiu
http://andreifiroiu.me