Working with Phonegap 3, Hello World, using command line interface, phonegap javascript apis, deploy for ios and android, phonegap build, awesome tools and tips for web and mobile web development are mentioned this presentation.

1. Bernardo Soriano
Front-end Engineer
Pro Mobile Web Apps
With Phonegap
bersoriano@me.com@bersoriano

2. Agenda
• What is Phonegap?
• Cross-platform apps, scopes and limitations.
• Requirements & Hello World Phonegap.
• Phonegap workflow.
• Code once, deploy for iOS, Android, Blackberry, OsX,
Win8.
• UI frameworks optimized for mobile web.
• Connecting Phonegap with external services.
• Tools for the back-end.
• Debugging, optimizing and securing web apps.
• Powerful tools and tips for web and mobile web apps.

3. The engine
The distribution
So, What is Phonegap?

4. So, What is Phonegap?

5. Mobile Apps
Web vs Hybrid vs Native

6. Browser Native shell Native shell Native app
Web code
Device APIs
Device APIs
Native code
Device APIs
Web code
Javascript
API
Browser
Access
Hybrid apps - webHybrid apps - mixed Native app
HTML5
Device APIs
Installable
.apk, .ipa
Installable
.apk, .ipa
Installable
.apk, .ipa
NOT Installable
Native code
Web code
Mobile app development

7. Getting started with
Phonegap Build
.apk, .ipa …
Advantages:
- It compiles in the cloud.
- Support multiple platforms.
- Share your apps easily.
- Nice development cycle (Git CVS)
What do you need?
- A .git repository
- A .zip file
https://build.phonegap.com/

8. Getting started with
Phonegap Build
.apk, .ipa …

9. Getting started with the
Phonegap CLI
>_ phonegap create [path/to/projectname] [com.packagename.x] [AppName]
>_ phonegap build [platform]
>_ phonegap local plugin add org.apache.cordova.device
>_ phonegap local plugin add org.apache.cordova.console
>_ phonegap local plugin list
>_ phonegap run [platform]
Android Requirements:
Java SE
ANT
Android SDK
Node.js
*Google Play Dev
Account
iOS Requirements:
Xcode
Command Line Tools
Node.js
*Apple dev program
Windows 8:
Visual Studio 2012
(Install everything… unless
you want to get a Blue
screen)
Node.js
*Windows store registration

10. Hello World with
Phonegap 3

11. Hello World with
Phonegap 3

12. Hello World with
Phonegap 3

13. “The future present, is in my browser!”
Web applications…

14. Plugin APIs
• Accelerometer
• Camera
• Compass
• Capture
• Connection
• Contacts
• Device
• File
• Geolocation
• Globalization
• Media
• Notification
• InAppBrowser
• Splashscreen
• Storage http://docs.phonegap.com/
API Reference

15. Javascript API
for the plugins

16. 3rd Party plugins
• BarcodeScanner
• PushPlugin
• Facebook Connect
• SocialSharing
• Calendar
• NFC
• Flashlight
• Insomnia (prevent screen sleep)
• Bluetooth Serial
• SSL Certificate Checker
• SqlitePlugin
• InAppPurchase
• Passbook

17. Events• deviceready
• pause
• resume
• backbutton
• menubutton
• searchbutton
• startcallbutton
• endcallbutton
• volumedownbutton
• Volumeupbutton
• batterycritical
• batterylow
• Batterystatus
• online
• offline

18. Javascript Event Handlers

19. UI frameworks for Mobile

24. Connecting with external
services
HTTP
AJAX
REST
SOAP
XML
JSON
.NET MVC
RAILS
JAVA
…

25. Parsing with AJAX a
remote XML

26. Back-end tools

27. 1. Minifying
2. Concatenating files
1. Use sprites
2. Avoid a lot of requests
(AJAX)
5. Don’t use click events,
use touch events
6. Create your own framework
(if it’s possible)
7. Develop Single Page Apps
1. Chrome developer
tools
2. Safari with device
inspector
3. Firebug
4. Livereload
Optimizing
Debugging
1. Javascript obsfuscation
2. Google closure compile
3. Host resources in serve
4. JSAES encryption
Securing
Web apps

28. Powerful tools for “modern”
web apps
1. Debugging + interaction http://vanamco.com/ghostlab/
2. Debugging http://socketbug.com/
3. Debugging http://livereload.com/
4. Front-end Package manager http://bower.io/
5. Tasks Automator http://gruntjs.com/
6. Code editor http://brackets.io/
7. Device testing http://html.adobe.com/edge/inspect/
8. Device testing http://opendevicelab.com/
9. Mobile emulators
http://www.mobilexweb.com/emulators

29. Where to go now?
1. .NET MVC Back-end for Phonegap tutorial
http://www.dotnetglobe.com/2012/03/crud-operation-using-aspnet-web-api-in.html
2. Drupal REST Webservices + Phonegap
http://tylerfrankenstein.com/code/android-app-with-drupal-7-services-phonegap-and-
jquery-mobile
3. Sencha Touch MVC + Phonegap http://www.sencha.com/learn/a-sencha-touch-
mvc-application-with-phonegap/
1. Backbone + Phonegap http://coenraets.org/blog/2012/02/sample-mobile-app-with-
backbone-js-and-phonegap/
2. PHP + Phonegap http://coenraets.org/blog/2011/10/sample-application-with-jquery-
mobile-and-phonegap/
3. Entreprise apps?
Sure!http://www.ibm.com/developerworks/ssa/mobile/worklight/getting-started/
(Cordova)http://phonegap.com/blog/2014/03/24/introducing-phonegap-for-the-
enterprise/

30. Bernardo Soriano
Front-end Engineer
Thanks!
bersoriano@me.com@bersoriano