Your SlideShare is downloading. ×
Creating Android Apps with PhoneGap
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Creating Android Apps with PhoneGap

4,312
views

Published on

Slides for Dean Peters' May 17, 2012 Presentation entitled "Creating Android Apps with PhoneGap" for the TriDroid@SAS -- the NC Triangle Android Meetup - http://bit.ly/TriDroid17May12

Slides for Dean Peters' May 17, 2012 Presentation entitled "Creating Android Apps with PhoneGap" for the TriDroid@SAS -- the NC Triangle Android Meetup - http://bit.ly/TriDroid17May12

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
4,312
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
35
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. Creating Android Apps w/PhoneGap with Dean Peters http://linkd.in/deandroid TriDroid@SAS Meetup 7:00pm, Thursday, May 17, 2012 SAS Building S, Room 1051 600 SAS Campus Drive, Cary, NC, Raleigh, NC http://bit.ly/TriDroid17May1205/17/12 Creating Android Apps w/Phone Gap slide 1 with Dean Peters
  • 2. Introduction Who is this Dean Peters guy? Support Development Team Lead at McClatchy Interactive; Creating Android Apps w/Phone Gap Manages a team of front-end developers ... with Dean Peters Works in the field on arena of online newspapers such as the Miami Herald, Charlotte Observer & the N&O. Is currently working on designing and developing mobile landing pages. Is a web API junkie (but really, I can quit whenever I want to).05/17/12 Creating Android Apps w/Phone Gap slide 2 with Dean Peters
  • 3. Agenda Presentation Facts Service Size 1 presentation (1hr) Servings Per Container about 45 Introductions 1pg 5% Topical Overview 1pg 5% Technology Stack 1pg Creating Android Apps w/Phone Gap 5% PhoneGap 101 2pg with Dean Peters 5% Applaud & Mulberry 1pg 5% jQuery Mobile & Sencha Touch 2pg 5% jQuick Demo 1pg 5% Code & Compile Walk-Throughs 3pg 15% Latency in the Mobile Domain 3pg 20% AJAX, YQL, CORS & Responsive Design 5pg 20% Cloud-Based Build Options 1pg 5% Q&A 1pg 5%05/17/12 Creating Android Apps w/Phone Gap slide 3 with Dean Peters
  • 4. Feel free to interact at any time ... Was it something I said?05/17/12 Creating Android Apps w/Phone Gap slide 4 with Dean Peters
  • 5. Tonights Technology Stack App CSS3 jQuery Mobile jQuery HTML5 PhoneGap / Cordova Applaud Plugin Eclipse05/17/12 Creating Android Apps w/Phone Gap slide 5 with Dean Peters
  • 6. PhoneGap, a short & painless history An Open Source mobile framework produced by Nitobi; 1st developed at iPhoneDevCamp San Francisco; Won the 2009 Web 2.0 Peoples Choice Award Donated to the Apache Foundation in September of 2011;05/17/12 Creating Android Apps w/Phone Gap with Dean Peters slide 6
  • 7. PhoneGap 101 It is a distribution of Apache Cordova ... to develop native mobile apps leveraging HTML5, CSS3 & JavaScript; field apps for iPhone, Android, Blackberry, WebOS, Symbian & WindowsPhone 7;05/17/12 Creating Android Apps w/Phone Gap slide 7 with Dean Peters
  • 8. How Do I Get Started? Phone Gap out-of-the-box is not really out-of-the- box Fortunately there are tools to help jump start your project05/17/12 Creating Android Apps w/Phone Gap slide 8 with Dean Peters
  • 9. AppLaud & Mulberry Two tools designed to to jump-start your PhoneGap development. Mulberry provides a Ruby-flavored toolkit: http://mulberry.toura.com/ AppLaud provides an Eclipse Plugin: http://www.mobiledevelopersolutions.com/05/17/12 Creating Android Apps w/Phone Gap slide 9 with Dean Peters
  • 10. How Do I Get Started w/Coding? You dont have to hand-code everything from scratch; There are frameworks and libraries to help you get started.05/17/12 Creating Android Apps w/Phone Gap slide 10 with Dean Peters
  • 11. jQuery Mobile & Sencha Touch Both provide JavaScript frameworks for mobile development Sencha Touch is built using Ext JS and offers 3 licensing models: http://sencha.com jQuery Mobile is built on jQuery and is Open Source: jquerymobile.com05/17/12 Creating Android Apps w/Phone Gap slide 11 with Dean Peters
  • 12. Code & Compile Walk-Through 1 60 seconds to Hello TriDroid05/17/12 Creating Android Apps w/Phone Gap slide 12 with Dean Peters
  • 13. a PhoneGap App Demo Whats Behind the Curtain Android SDK http://developer.android.com/sdk/index.html Eclipse Classic or IDE for Java http://www.eclipse.org/downloads/packages/release/helios/sr2 PhoneGap http://wiki.phonegap.com/w/page/30862722/phonegap-android-eclipse-quick Applaud plugin for Eclipse http://www.mobiledevelopersolutions.com/home/start ADT plugin for Eclipse05/17/12 Creating Android Apps w/Phone Gap slide 13 with Dean Peters
  • 14. Code & Compile Walk-Through 2The TriDroid News Reader (a truly aggregating app)A baseline app all TriDroid@sas members to download & enjoyIncludes jQueryUses jquery.address.js a history management pluginImports Foundation, a CSS3 framework for responsive web designLeverages YQL to provide CORS–ready jSON05/17/12 Creating Android Apps w/Phone Gap slide 14 with Dean Peters
  • 15. What type of issues will I encounter? Three issues of youre likely to run into when writing an RSS reader are: Cross-Domain restrictions built into JavaScripts XMLHttpRequest. Latency in the data delivery. Latency in the rendering of the data.05/17/12 Creating Android Apps w/Phone Gap slide 15 with Dean Peters
  • 16. CORSCORS == Cross-Origin Resource SharingBelow is an example that would support requests from both REST and SOAP from domains1.com and domain-two.com.<IfModule mod_headers.c>Header set Access-Control-Allow-Origin "domain1.com"Header set Access-Control-Allow-Methods "GET,PUT,POST,OPTIONS"Header set Access-Control-Allow-Headers "Content-Type"Header set Access-Control-Allow-Credentials "true"Header set Access-Control-Accept-Encoding "gzip,deflate"Header set Access-Control-Allow-Headers: "X-File-Name,X-File- Type,X-File-Size"Header append Access-Control-Allow-Origin "domain-two.com"Header append Access-Control-Allow-Headers "Origin"Header append Access-Control-Allow-Headers "Accept"Header append Access-Control-Allow-Headers "X-Requested-With"05/17/12 Creating Android Apps w/Phone Gap slide 16 with Dean Peters
  • 17. Latency in the Mobile Domain Source: http://www.gomez.com/thank-you/what-users-want-from-mobile-infographic/05/17/12 Creating Android Apps w/Phone Gap slide 17 with Dean Peters
  • 18. Latency in the Mobile DomainSource: http://dylan.tweney.com/2012/02/21/startups-struggle-to-keep-their-sites-speedy-on-pcs-phones-and-tablets/ 05/17/12 Creating Android Apps w/Phone Gap slide 18 with Dean Peters
  • 19. Latency in the Mobile Domain The Same App Across Different Networks == Different User ExperiencesSource: http://www.slideshare.net/Gomez_Inc/the-state-of-the-mobile-market-what-endusers-want-from-mobile 05/17/12 Creating Android Apps w/Phone Gap slide 19 with Dean Peters
  • 20. Latency in the Mobile Domain The A in AJAX is for Asynchronous Avoid JavaScript when responsive HTML5 & CSS3 will do. Do less with the DOM Consider farming out heavy rendering to web services. Consider porting heavy JavaScript from the app to a service platform such as Node.js05/17/12 Creating Android Apps w/Phone Gap slide 20 with Dean Peters
  • 21. The A in AJAX for AsynchronousUse CORS or proxies rather than jSON-pUse frameworks such as jQuery that allow you to defer, cache and queue actions, such as: function getData( val ){ // return either the cached value or an // jqXHR object (which contains a promise) return window.caches.cache[ val ]|| $.ajax(/mywebservice/, { data: { value: val }, dataType: json, success: function( resp ){ // create a cache in the windows object window.caches.cache[ val ] = resp; } }); } // this wraps the getData() ajax call $.when(getData(foo)).then(function(resp){ // do something with the response, which may // or may not have been retrieved using an // XHR request. });05/17/12 Creating Android Apps w/Phone Gap slide 21 with Dean Peters
  • 22. Responsive DesignWhile you can use JavaScript to deal with differentdevices ...... the preferred practice is to render the HTML5 once, ...... and modify it for different devices using CSS3 such as:/* --- (most) Tablets ------------------------------------- */@media screen and (min-device-width: 768px) and (max-device-width: 1024px)and (orientation:portrait){ h1 { font-size: 2.0rem; }}@media screen and (min-device-width: 768px) and (max-device-width: 1024px)and (orientation:landscape) { div#sidebar { display: none; }}/* Smartphones (portrait and landscape) ----------- */@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { h1 { font-size: 1.25rem; } div#sidebar { display: none; }} 05/17/12 Creating Android Apps w/Phone Gap slide 22 with Dean Peters
  • 23. Clound-Based Build Options PhoneGap:Build - https://build.phonegap.com/ MDS AppLaud Cloud - http://applaudcloud.com/05/17/12 Creating Android Apps w/Phone Gap slide 23 with Dean Peters
  • 24. Q&A Heres where you get to stump the chump ... & thanks from Dean Peters http://linkd.in/deandroid05/17/12 Creating Android Apps w/Phone Gap slide 24 with Dean Peters