Post on 17-May-2015
description
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
Introductions 1pg 5%Topical Overview 1pg 5%Technology Stack 1pg 5%PhoneGap 101 2pg 5%Applaud & Mulberry 1pg 5%
jQuery Mobile & Sencha Touch 2pg 5%jQuick Demo 1pg 5%Code & Compile Walk-Throughs 3pg15%Latency in the Mobile Domain 3pg
20%AJAX, YQL, CORS & Responsive Design 5pg 20%Cloud-Based Build Options 1pg 5%Q&A 1pg 5%
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 4
Feel free to interact at any time ...
Was it something I said?
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 5
Tonight's Technology Stack
App
CSS3
jQuery Mobile
jQuery
HTML5
PhoneGap / Cordova
Applaud Plugin
Eclipse
Android SDK
Java JDK
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 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;
●Nitobi was purchased by Adobe Systems in October of 2011.
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 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;
●used by Worklight, Convertigo & appMobi;
●layout rendered via webview instead of the platform specific UI frameworks;
●can access a device's API.
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 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
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 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/
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 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.
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 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
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 12
Code & Compile Walk-Through 1
60 seconds to Hello TriDroid
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 13
a PhoneGap App Demo
What's Behind the Curtain
● Android SDKhttp://developer.android.com/sdk/index.html
● Eclipse Classic or IDE for Javahttp://www.eclipse.org/downloads/packages/release/helios/sr2
● PhoneGaphttp://wiki.phonegap.com/w/page/30862722/phonegap-android-eclipse-quickstart
● 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-
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"Header append Access-Control-Allow-Headers "X-Prototype-Version"Header append Access-Control-Allow-Headers "Content-Type"Header append Access-Control-Allow-Headers "SOAPAction"</IfModule>
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 17
Latency in the Mobile Domain
Source: http://www.gomez.com/thank-you/what-users-want-from-mobile-infographic/
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 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/
04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters
slide 19
Latency in the Mobile Domain
Source: http://www.slideshare.net/Gomez_Inc/the-state-of-the-mobile-market-what-endusers-want-from-mobile
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