Development Mobile App PhoneGap                                                      Nguyen Thai Hoang Phuong – Dai-ichi L...
Agenda       •       Smartphone Market Share       •       PhoneGap       •       Setup and Configuration Tool       •    ...
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Marketshare In 2012 With 40 Million Units Sold© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
What is PhoneGap?© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
• Traditional mobile development looks like this:                                       Platform                          ...
PhoneGap - Cordova         • Is an open source platform for building native           mobile applications using standard w...
Why would you use PhoneGap?© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Why would you use PhoneGap?       • PhoneGap allows you to use “write once, run         everywhere” paradigm       • Web s...
PhoneGap could be your best friend if       • You want to target multiple mobile platforms       • You know HTML/JavaScrip...
Setup and Configuration Tool© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Setup Tool - Android • Eclipse Classic http://www.eclipse.org/downloads/ • Android SDK http://developer.android.com/sdk/in...
Configure the ADT Plugin for Eclipse • ADT plugin must be installed through the   Eclipse Install New Software wizard.    ...
Using platform native tool chain       • Use the OS and tools each platform         recommends:                  – iOS - h...
Demo - Example© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Add new contact© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Add new contact© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
index.html© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
index.html© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
contact.js© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
How does PhoneGap work?                          PhoneGap App                                                    Mobile De...
Built-in device APIs© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
PhoneGap Plug-ins       • Examples of plugins:         https://github.com/purplecabbage/phonegap-         plugins© 2010 Ad...
Demo - Example© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Use Google Chart API© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
index.html© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
index.html© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
index.html© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Building PhoneGap Apps© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Build your PhoneGap app as you’d                        build a regular web app      • Using your favorite editors (Eclips...
What can you use to build your application?       • Remember your application will run on the         device’s browser    ...
Creating the native installers       There are 2 different methods to build the       native installers for your PhoneGap ...
Using PhoneGap Build       • http://build.phonegap.com - a cloud service       • Supports:         iOS, Android, BlackBerr...
Resources       •       Source: github.com/callback       •       Docs: docs.phonegap.com       •       Wiki: wiki.phonega...
Resources(cont)       • Getting started with PhoneGap in Eclipse for         Android       • Getting started with PhoneGap...
Resource(cont)           Wrox.Beginning.PhoneGap           https://skydrive.live.com/redir?resid=86951F18           C2B21F...
Question & Answers Time!                                                                              Thank You!© 2010 Ado...
Upcoming SlideShare
Loading in...5
×

Development mobile app cross device

1,012

Published on

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

No Downloads
Views
Total Views
1,012
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
61
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Windows Phone Will Have 6.2% Marketshare In 2012 With 40 Million Units SoldWe have seen many reports on smartphone market share in the future. Even IDC, Gartner reports that Windows Phone will be the No.2 smartphone platform by 2015. But in short term, Digitimes Research study expects a sales of 40 million Windows Phone units in 2012 occupying 6.2% of the whole market. The market will be lead by Android with 386 million units and iPhone with 121 million units. Microsoft and its OEM partners should more than double their market share every year to make the IDC report true. Lets see how it goes ! !Source and Chart based on Digitimes Research.
  • 2010 CensusWikipediaUntapFacebook
  • WebView – chromless browser full screenLayer nativ – PhoneGap native engine – PhoneGapJavaScrip APILayerulaplicatiei – HTML / JavaScript / CSS
  • WebView – chromless browser full screenLayer nativ – PhoneGap native engine – PhoneGapJavaScrip APILayerulaplicatiei – HTML / JavaScript / CSS
  • WebView – chromless browser full screenLayer nativ – PhoneGap native engine – PhoneGapJavaScrip APILayerulaplicatiei – HTML / JavaScript / CSS
  • WebView – chromless browser full screenLayer nativ – PhoneGap native engine – PhoneGapJavaScrip APILayerulaplicatiei – HTML / JavaScript / CSS
  • WebView – chromless browser full screenLayer nativ – PhoneGap native engine – PhoneGapJavaScrip APILayerulaplicatiei – HTML / JavaScript / CSS
  • WebView – chromless browser full screenLayer nativ – PhoneGap native engine – PhoneGapJavaScrip APILayerulaplicatiei – HTML / JavaScript / CSS
  • 2010 CensusWikipediaUntapFacebook
  • WebView – chromless browser full screenLayer nativ – PhoneGap native engine – PhoneGapJavaScrip APILayerulaplicatiei – HTML / JavaScript / CSS
  • WebView – chromless browser full screenLayer nativ – PhoneGap native engine – PhoneGapJavaScrip APILayerulaplicatiei – HTML / JavaScript / CSS
  • WebView – chromless browser full screenLayer nativ – PhoneGap native engine – PhoneGapJavaScrip APILayerulaplicatiei – HTML / JavaScript / CSS
  • WebView – chromless browser full screenLayer nativ – PhoneGap native engine – PhoneGapJavaScrip APILayerulaplicatiei – HTML / JavaScript / CSS
  • We still have some time for questions. Anyone?
  • Development mobile app cross device

    1. 1. Development Mobile App PhoneGap Nguyen Thai Hoang Phuong – Dai-ichi Life© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    2. 2. Agenda • Smartphone Market Share • PhoneGap • Setup and Configuration Tool • PhoneGap Build • Debugging PhoneGap Apps© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    3. 3. © 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    4. 4. Marketshare In 2012 With 40 Million Units Sold© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    5. 5. What is PhoneGap?© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    6. 6. • Traditional mobile development looks like this: Platform Platform Tools Language Tools Language Objective-C Java© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    7. 7. PhoneGap - Cordova • Is an open source platform for building native mobile applications using standard web technologies (HTML/CSS/JavaScript) • Apache Cordova is the name of the open source project • PhoneGap is the name of the Adobe’s Cordova distrbution© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    8. 8. Why would you use PhoneGap?© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    9. 9. Why would you use PhoneGap? • PhoneGap allows you to use “write once, run everywhere” paradigm • Web standards based & Open Source • You get native installers for each platform ready to be distributed through application stores (App Store, Android Market, …)© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    10. 10. PhoneGap could be your best friend if • You want to target multiple mobile platforms • You know HTML/JavaScript/CSS • You already have a web site/web application. Thus you can reuse parts of this (see Wikipedia)© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    11. 11. Setup and Configuration Tool© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    12. 12. Setup Tool - Android • Eclipse Classic http://www.eclipse.org/downloads/ • Android SDK http://developer.android.com/sdk/index.html • PhoneGap http://phonegap.com/download© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    13. 13. Configure the ADT Plugin for Eclipse • ADT plugin must be installed through the Eclipse Install New Software wizard. Start Eclipse. These steps will guide you through the installation of the ADT plugin. http://developer.android.com/sdk/installing/instal ling-adt.html Restart Eclipse.© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    14. 14. Using platform native tool chain • Use the OS and tools each platform recommends: – iOS - http://phonegap.com/start#ios-x4 – Android - http://phonegap.com/start#android – BlackBerry - http://phonegap.com/start#blackberry – Windows Phone - http://phonegap.com/start#wp – WebOS: http://phonegap.com/start#webos – Symbian: http://phonegap.com/start#symbian© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    15. 15. Demo - Example© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    16. 16. Add new contact© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    17. 17. Add new contact© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    18. 18. index.html© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    19. 19. index.html© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    20. 20. contact.js© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    21. 21. How does PhoneGap work? PhoneGap App Mobile Device PhoneGap PhoneGap JavaScript Native Engine Engine Access to native mobile Your Code features HTML/JavaScript/CSS/Images/ Frameworks/Libraries Web View Renders the app UI© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    22. 22. Built-in device APIs© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    23. 23. PhoneGap Plug-ins • Examples of plugins: https://github.com/purplecabbage/phonegap- plugins© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    24. 24. Demo - Example© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    25. 25. Use Google Chart API© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    26. 26. index.html© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    27. 27. index.html© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    28. 28. index.html© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    29. 29. Building PhoneGap Apps© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    30. 30. Build your PhoneGap app as you’d build a regular web app • Using your favorite editors (Eclipse, vim, Dreamweaver) • Test and debug the app using your desktop browser • Test and debug the app using mobile simulators/emulators and the physical devices© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    31. 31. What can you use to build your application? • Remember your application will run on the device’s browser • You can use whatever JavaScript frameworks or libraries you like. Eg. jQuery, jQuery Mobile, Sencha, Backbone, Liquid, Mustache, Bootrstrap, and so on© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    32. 32. Creating the native installers There are 2 different methods to build the native installers for your PhoneGap app: • Using the target platform tool chain • Using PhoneGap Build – a cloud service© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    33. 33. Using PhoneGap Build • http://build.phonegap.com - a cloud service • Supports: iOS, Android, BlackBerry, WebOS, Windows Phone 7, and Symbian • Supports one plugin (ChildBrowser); but you can hack in support for other plugins • It is in beta and it is free; it will always be free for Open Source projects • You upload your files (index.html, CSS, JS, images) • Or you provide a Git / SVN link • Support for debugging© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    34. 34. Resources • Source: github.com/callback • Docs: docs.phonegap.com • Wiki: wiki.phonegap.com • PhoneGap Build: build.phonegap.com • Plugins: github.com/purplecabbage/phonegap- plugins • Support: groups.google.com/group/phonegap • IRC: irc.freenode.net #phonegap • Apps: phonegap.com/apps • Bugs: issues.apache.org/jira/browse/CB© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    35. 35. Resources(cont) • Getting started with PhoneGap in Eclipse for Android • Getting started with PhoneGap in Xcode for iOS • Develop Mobile Applications Using PhoneGap and Kendo UI • Creating Cross-Device Compatible Mobile Applications that Integrate with SharePoint© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    36. 36. Resource(cont) Wrox.Beginning.PhoneGap https://skydrive.live.com/redir?resid=86951F18 C2B21FFB!196&authkey=!AACYDJFxtXRv4Kc PhoneGap Mobile Application Development Cookbook https://skydrive.live.com/redir?resid=86951F18 C2B21FFB!190&authkey=!AMoFJrzjyP8JfZo© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    37. 37. Question & Answers Time! Thank You!© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
    1. A particular slide catching your eye?

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

    ×