06/26/22 Creating Android Apps w/Phone Gap with Dean Peters slide 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/TriDroid17May 12
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
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 1
Creating Android Apps w/PhoneGap
with Dean Petershttp://linkd.in/deandroid
TriDroid@SAS Meetup7:00pm, Thursday, May 17, 2012SAS Building S, Room 1051600 SAS Campus Drive, Cary, NC, Raleigh, NChttp://bit.ly/TriDroid17May12
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 2
Introduction
Who is this Dean Peters guy?
Creating Android Apps w/Phone Gap
with Dean Peters
● Support Development Team Lead at McClatchy Interactive;
● Manages a team of front-end developers ...
● Works in the field on arena of online newspaperssuch as the Miami Herald & the News & Observer.
● Is currently working on designing and developing mobile landing pages via responsive design.
● Is a web API junkie (but really, I can quit whenever I want to).
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 3
Agenda
Creating Android Apps w/Phone Gap
with Dean Peters
Presentation FactsService Size 1 presentation (1hr)Servings Per Container about 45
● Applaud plugin for Eclipsehttp://www.mobiledevelopersolutions.com/home/start
● ADT plugin for Eclipsehttp://developer.android.com/sdk/eclipse-adt.html
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 14
Code & Compile Walk-Through 2
The TriDroid News Reader (a truly aggregating app)
● A baseline app all TriDroid@sasmembers to download & enjoy
● Includes jQuery
● Uses jquery.address.js a history management plugin
● Imports Foundation,a CSS3 framework forresponsive web design
● Leverages YQL to provide CORS–ready jSON
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 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.
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 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-
The Same App Across Different Networks == Different User Experiences
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 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 outheavy rendering to web services.
● Consider porting heavy JavaScript from the app to a service platform such as Node.js
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 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.});
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 22
Responsive Design
/* --- (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; }}
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:
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 23
Cloud-Based Build Options
● PhoneGap:Build - https://build.phonegap.com/
● MDS AppLaud Cloud - http://applaudcloud.com/
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 24
Q & A
Here's where you get to stump the chump ...
& thanks from Dean Petershttp://linkd.in/deandroid