Pro Mobile web Apps with Phonegap 3.X - Adobe Mobile Day

  • 707 views
Uploaded on

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 …

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.

More in: Software , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
707
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
6
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 20. Connecting with external services HTTP AJAX REST SOAP XML JSON .NET MVC RAILS JAVA …
  • 21. Parsing with AJAX a remote XML
  • 22. Back-end tools
  • 23. 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
  • 24. 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
  • 25. 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/
  • 26. Bernardo Soriano Front-end Engineer Thanks! bersoriano@me.com@bersoriano