Creating Android Apps with PhoneGap

24
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

description

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

Transcript of Creating Android Apps with PhoneGap

Page 1: Creating Android Apps with PhoneGap

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

Page 2: Creating Android Apps with PhoneGap

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

Page 3: Creating Android Apps with PhoneGap

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%

Page 4: Creating Android Apps with PhoneGap

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?

Page 5: Creating Android Apps with PhoneGap

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

Page 6: Creating Android Apps with PhoneGap

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.

Page 7: Creating Android Apps with PhoneGap

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.

Page 8: Creating Android Apps with PhoneGap

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

Page 9: Creating Android Apps with PhoneGap

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/

Page 10: Creating Android Apps with PhoneGap

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.

Page 11: Creating Android Apps with PhoneGap

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

Page 12: Creating Android Apps with PhoneGap

04/12/23 Creating Android Apps w/Phone Gapwith Dean Peters

slide 12

Code & Compile Walk-Through 1

60 seconds to Hello TriDroid

Page 13: Creating Android Apps with PhoneGap

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

Page 14: Creating Android Apps with PhoneGap

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

Page 15: Creating Android Apps with PhoneGap

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.

Page 16: Creating Android Apps with PhoneGap

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>

Page 17: Creating Android Apps with PhoneGap

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/

Page 18: Creating Android Apps with PhoneGap

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/

Page 19: Creating Android Apps with PhoneGap

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

Page 20: Creating Android Apps with PhoneGap

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

Page 21: Creating Android Apps with PhoneGap

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.});

Page 22: Creating Android Apps with PhoneGap

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:

Page 23: Creating Android Apps with PhoneGap

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/

Page 24: Creating Android Apps with PhoneGap

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