Successfully reported this slideshow.

Creating Android Apps with PhoneGap

5,133 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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Creating Android Apps with PhoneGap

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×