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

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/TriDroid17May12
05/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. Tonight's Technology Stack
App
CSS3
jQuery Mobile
jQuery
HTML5
PhoneGap / Cordova
Applaud Plugin
Eclipse
05/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 People's
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
project
05/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 don't 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.com
05/17/12 Creating Android Apps w/Phone Gap slide 11
with Dean Peters

12. Code & Compile Walk-Through 1
60 seconds to
Hello TriDroid
05/17/12 Creating Android Apps w/Phone Gap slide 12
with Dean Peters

13. a PhoneGap App Demo
What's 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 Eclipse
05/17/12 Creating Android Apps w/Phone Gap slide 13
with Dean Peters

14. Code & Compile Walk-Through 2
The TriDroid News Reader
(a truly aggregating app)
A baseline app all TriDroid@sas
members to download & enjoy
Includes jQuery
Uses jquery.address.js
a history management plugin
Imports Foundation,
a CSS3 framework for
responsive web design
Leverages YQL to provide CORS–ready jSON
05/17/12 Creating Android Apps w/Phone Gap slide 14
with Dean Peters

15. What type of issues will I encounter?
Three issues of you're likely to run into when
writing an RSS reader are:
Cross-Domain restrictions
built into JavaScript's
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. CORS
CORS == Cross-Origin Resource Sharing
Below 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 Domain
Source: 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 Experiences
Source: 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.js
05/17/12 Creating Android Apps w/Phone Gap slide 20
with Dean Peters

21. The A in AJAX for Asynchronous
Use CORS or proxies rather than jSON-p
Use 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 Design
While you can use JavaScript to deal with different
devices ...
... 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
Here's where you get to stump the chump ...
& thanks from Dean Peters
http://linkd.in/deandroid
05/17/12 Creating Android Apps w/Phone Gap slide 24
with Dean Peters