Emerging Internet TechnologiesBuilding Native Mobile Applications withPhoneGap         Becky Gibson         Simon MacDonal...
Emerging Internet TechnologiesAgenda      Mobile Application Overview      What is PhoneGap?      PhoneGap Architecture...
Emerging Internet TechnologiesMobile Space                                              http://www.abmuku.com/2011/02/24/t...
Emerging Internet TechnologiesEveryone Wants a Piece of that Pie!4        Building Native Mobile Applications with PhoneGa...
Emerging Internet TechnologiesMobile Web Apps       Fast, easy, simple       Run in mobile browsers       Built on W3C ...
Emerging Internet TechnologiesMobile Applications       Platform Specific       Sold via App Stores       Specific tech...
Emerging Internet TechnologiesHybrid Applications        Built with Web Technologies        Access to Device Features   ...
Emerging Internet TechnologiesMobile App Comparison                                         Web                         Hy...
Emerging Internet TechnologiesWhat’s a Developer to Do?9       Building Native Mobile Applications with PhoneGap   © 2011 ...
Emerging Internet TechnologiesWhat is PhoneGap?     It’s a tool for building mobile apps using Web technologies           ...
Emerging Internet TechnologiesHow Does PhoneGap Work?11     Building Native Mobile Applications with PhoneGap   © 2011 IBM...
Emerging Internet TechnologiesPhoneGap Community       Started by Nitobi in 2008       Large, active open-source communi...
Emerging Internet TechnologiesPhoneGap Apps     How many are there?     You can’t tell!        (unless you are told)http:/...
Emerging Internet TechnologiesPhoneGap Features                                                 Core APIs     –  Media (au...
Emerging Internet TechnologiesTypical Architecture        HTML/JS/CSS + graphic assets are on the device,         package...
Emerging Internet Technologies     PhoneGap Architecture Diagram                                                          ...
Emerging Internet TechnologiesWriting for Multiple Devices        Use a JavaScript Toolkit!          Most support at least...
Emerging Internet TechnologiesBest Practices       Where possible use single HTML page              Use JavaScript to sh...
Emerging Internet TechnologiesUsing PhoneGap     1.  Create resources in www directory     2.  Include phonegap.*.js in yo...
Emerging Internet TechnologiesBuilding a PhoneGap App                                          DEMO20      Building Native...
Emerging Internet TechnologiesDebugging?                         Console.log is your friend!       Wednesday @ 4:10pm – Po...
Emerging Internet TechnologiesExtending PhoneGap       Provide native code and JavaScript API       – Extend Existing Fea...
Emerging Internet TechnologiesFuture       Additional Features             Plugin Only Architecture             W3C API...
Emerging Internet TechnologiesOther PhoneGap folks presenting @ OSCON       Wednesday @ 5:00pm - Portland 252       Androi...
Emerging Internet TechnologiesResources       More Info        –  http://www.phonegap.com/       Getting Started        ...
Upcoming SlideShare
Loading in...5
×

Building Native Mobile Applications with PhoneGap

13,313

Published on

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

No Downloads
Views
Total Views
13,313
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
615
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

Building Native Mobile Applications with PhoneGap

  1. 1. Emerging Internet TechnologiesBuilding Native Mobile Applications withPhoneGap Becky Gibson Simon MacDonald © 2011 IBM Corporation
  2. 2. Emerging Internet TechnologiesAgenda   Mobile Application Overview   What is PhoneGap?   PhoneGap Architecture   Extending PhoneGap   Building an App   Summary2 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  3. 3. Emerging Internet TechnologiesMobile Space http://www.abmuku.com/2011/02/24/technology/american-cell-phone-usage-infographic/3 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  4. 4. Emerging Internet TechnologiesEveryone Wants a Piece of that Pie!4 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  5. 5. Emerging Internet TechnologiesMobile Web Apps   Fast, easy, simple   Run in mobile browsers   Built on W3C technologies   Minimal access to device features5 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  6. 6. Emerging Internet TechnologiesMobile Applications   Platform Specific   Sold via App Stores   Specific technologies and development environments   Licensing agreements6 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  7. 7. Emerging Internet TechnologiesHybrid Applications   Built with Web Technologies   Access to Device Features   Distributed via App Stores   Some platform specific knowledge   Licensing Agreements7 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  8. 8. Emerging Internet TechnologiesMobile App Comparison Web Hybrid Native Dev cost Reasonable Reasonable Expensive Dev time Short Short Long App portability High High None Native speed if Performance Fast needed Very Fast Native No All All functionality App store No Yes Yes distribution Extensible No Yes Yes8 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  9. 9. Emerging Internet TechnologiesWhat’s a Developer to Do?9 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  10. 10. Emerging Internet TechnologiesWhat is PhoneGap? It’s a tool for building mobile apps using Web technologies HTML For Layout JavaScript to access device functionality navigator.notification.vibrate() CSS for rich look and feel Standards Based10 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  11. 11. Emerging Internet TechnologiesHow Does PhoneGap Work?11 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  12. 12. Emerging Internet TechnologiesPhoneGap Community   Started by Nitobi in 2008   Large, active open-source community   350,000 downloads, 175,000 visits/month, 5000+ forum members   Open Source – http://github.com/phonegap – Apache2 inbound (CLA) – MIT & BSD outbound   Companies participating: IBM, RIM, Microsoft   1.0 Release July, 201112 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  13. 13. Emerging Internet TechnologiesPhoneGap Apps How many are there? You can’t tell! (unless you are told)http://www.phonegap.com/apps13 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  14. 14. Emerging Internet TechnologiesPhoneGap Features Core APIs –  Media (audio play/record) –  Accelerometer –  Media Capture: audio, video, –  Compass camera – (W3C) –  Camera –  Network (W3C) –  Contacts (W3C) –  Notification –  File (W3C) –  Storage (HTML5 Web SQL & –  File Transfer Web Storage) –  Geolocation (HTML5)14 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  15. 15. Emerging Internet TechnologiesTypical Architecture   HTML/JS/CSS + graphic assets are on the device, packaged as part of the build process.   JavaScript can store retrieved data in a SQLite database or from localStorage (key/value pair) for offline access.   Often a server component involved.   JavaScript communicates with the server via XHR to get retrieve data.   Yes, you can load your app remotely with caveats.15 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  16. 16. Emerging Internet Technologies PhoneGap Architecture Diagram PhoneGap Application Web App PhoneGap Plug-ins HTML JavaScript Accelerometer Geolocation CSS Resources Camera Media Compass Network PhoneGap Contacts Notification JS APIs HTML APIs File Storage HTML Rendering Engine Custom Plug-ins PhoneGap (WebView) Native APIs OS APIs OS APIs Services Sensors Mobile OS Input Graphics16 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  17. 17. Emerging Internet TechnologiesWriting for Multiple Devices Use a JavaScript Toolkit! Most support at least Android and iOS Remember that size matters! Sencha Touch Mobile Dojo17 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  18. 18. Emerging Internet TechnologiesBest Practices   Where possible use single HTML page   Use JavaScript to show/hide page elements based on user interaction instead of linking to a separate page.   Those JavaScript toolkits come in handy here!   Obfuscate / crunch your JavaScript before release   Consider offline usage   navigator.network.connection.type   online /offline events   Note: Apple checks for offline support   Utilize persistent storage   File APIs   Storage APIs   SQL Lite / Lawnchair18 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  19. 19. Emerging Internet TechnologiesUsing PhoneGap 1.  Create resources in www directory 2.  Include phonegap.*.js in your start page (usually index.html) 3.  Create onload handler 4.  In onload handler register for deviceReady event from PhoneGap 5.  When deviceready fires PhoneGap is ready. 6.  Build, install and test for each platform19 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  20. 20. Emerging Internet TechnologiesBuilding a PhoneGap App DEMO20 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  21. 21. Emerging Internet TechnologiesDebugging? Console.log is your friend! Wednesday @ 4:10pm – Portland 252 Debugging Mobile Web Applications with weinre Patrick Mueller (IBM)21 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  22. 22. Emerging Internet TechnologiesExtending PhoneGap   Provide native code and JavaScript API – Extend Existing Features – Support for new sensors (NFC, ...)   Examples of current plug-ins – http://github.com/phonegap/phonegap-plugins – Barcode scanner (Android, iOS) – Clipboard manager (Android, iOS) – Child browser (Android, iOS) – Contact viewer (Android) – iAd (iOS) – PayPal (iOS)22 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  23. 23. Emerging Internet TechnologiesFuture   Additional Features   Plugin Only Architecture   W3C APIs   Web Notifications   Calendar   Messaging   Crypto / security   Menus   More at http://wiki.phonegap.com/w/page/28291160/ roadmap-planning   We want YOU to contribute code!   Bug fixes   Plugins23 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  24. 24. Emerging Internet TechnologiesOther PhoneGap folks presenting @ OSCON Wednesday @ 5:00pm - Portland 252 Android WebKit Development - A Cautionary Tale Joe Bowser (Nitobi) Thursday @2:30pm – Portland Ballroom HTML5 and Mobile: Getting from Good Enough to Great Filip Maj (Nitobi)24 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  25. 25. Emerging Internet TechnologiesResources   More Info –  http://www.phonegap.com/   Getting Started – http://www.phonegap.com/start   Mailing List / Google Group – http://groups.google.com/group/phonegap   API Documentation – http://docs.phonegap.com/   Wiki – http://wiki.phonegap.com/w/page/16494772/FrontPage   CODE – http://github.com/phonegap25 Building Native Mobile Applications with PhoneGap © 2011 IBM Corporation
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×