current trends in native and crossand cross- ---platform mobile ... › ~alfuqaha › summer13 ›...

© 2004 Microsoft Corporation. All rights reserved.

This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 1111

Current Trends in NativeCurrent Trends in NativeCurrent Trends in NativeCurrent Trends in Nativeand Crossand Crossand Crossand Cross----Platform Mobile Platform Mobile Platform Mobile Platform Mobile Application DevelopmentApplication DevelopmentApplication DevelopmentApplication Development

Ala AlAla AlAla AlAla Al----Fuqaha, Ph.D.Fuqaha, Ph.D.Fuqaha, Ph.D.Fuqaha, Ph.D.

Associate Professor and Director,Associate Professor and Director,Associate Professor and Director,Associate Professor and Director,NEST Research LabNEST Research LabNEST Research LabNEST Research Lab

College of Engineering & Applied SciencesCollege of Engineering & Applied SciencesCollege of Engineering & Applied SciencesCollege of Engineering & Applied SciencesComputer Science DepartmentComputer Science DepartmentComputer Science DepartmentComputer Science Department

Western Michigan UniversityWestern Michigan UniversityWestern Michigan UniversityWestern Michigan University

http://www.cs.wmich.edu/~alfuqaha/ http://www.cs.wmich.edu/~alfuqaha/ http://www.cs.wmich.edu/~alfuqaha/ http://www.cs.wmich.edu/~alfuqaha/

Steps for installing First Android appSteps for installing First Android appSteps for installing First Android appSteps for installing First Android app

�Download theDownload theDownload theDownload the Android Android Android Android ADT BundleADT BundleADT BundleADT Bundle for your platform for your platform for your platform for your platform

(Windows, Mac OS X, or Linux). The Android SDK can (Windows, Mac OS X, or Linux). The Android SDK can (Windows, Mac OS X, or Linux). The Android SDK can (Windows, Mac OS X, or Linux). The Android SDK can

be downloaded from be downloaded from be downloaded from be downloaded from

http://developer.android.com/sdkhttp://developer.android.com/sdkhttp://developer.android.com/sdkhttp://developer.android.com/sdk....

�Extract Extract Extract Extract the downloaded file to somewhere memorable the downloaded file to somewhere memorable the downloaded file to somewhere memorable the downloaded file to somewhere memorable

on your hard drive (no spaces on the file pathon your hard drive (no spaces on the file pathon your hard drive (no spaces on the file pathon your hard drive (no spaces on the file path).).).).



�Go to help Go to help Go to help Go to help �� Install New SoftwareInstall New SoftwareInstall New SoftwareInstall New Software�� AddAddAddAdd

�Add a Repository to the Add a Repository to the Add a Repository to the Add a Repository to the App_LaudApp_LaudApp_LaudApp_Laud PhoneGapPhoneGapPhoneGapPhoneGap

PluginPluginPluginPlugin

�Name; MDS Name; MDS Name; MDS Name; MDS AppLaudAppLaudAppLaudAppLaud

�LocationLocationLocationLocation: : : :

http://svn.codespot.com/a/eclipselabs.org/mobhttp://svn.codespot.com/a/eclipselabs.org/mobhttp://svn.codespot.com/a/eclipselabs.org/mobhttp://svn.codespot.com/a/eclipselabs.org/mob

ileileileile----webwebwebweb----developmentdevelopmentdevelopmentdevelopment----withwithwithwith----

phonegap/tags/r1.2/downloadphonegap/tags/r1.2/downloadphonegap/tags/r1.2/downloadphonegap/tags/r1.2/download

�ChooseChooseChooseChoose FileFileFileFile---->New>New>New>New---->Project…>Project…>Project…>Project…

�ChooseChooseChooseChoose Android ProjectAndroid ProjectAndroid ProjectAndroid Project

�In theIn theIn theIn the New ProjectNew ProjectNew ProjectNew Project dialog, enter the dialog, enter the dialog, enter the dialog, enter the followingfollowingfollowingfollowing

Continues …Continues …Continues …Continues …



�ChooseChooseChooseChoose Run ApplicationRun ApplicationRun ApplicationRun Application

Changing the icon of the Android appChanging the icon of the Android appChanging the icon of the Android appChanging the icon of the Android app

This is where the This is where the This is where the This is where the

icon is placed. icon is placed. icon is placed. icon is placed.

The image should The image should The image should The image should

be saved as be saved as be saved as be saved as

icon.gificon.gificon.gificon.gif



� Try runningTry runningTry runningTry running your application again your application again your application again your application again ((((F6F6F6F6). ). ). ). Eclipse will now build your project and Eclipse will now build your project and Eclipse will now build your project and Eclipse will now build your project and

launch the new AVD. Remember, the AVD emulates a complete Android launch the new AVD. Remember, the AVD emulates a complete Android launch the new AVD. Remember, the AVD emulates a complete Android launch the new AVD. Remember, the AVD emulates a complete Android

system, so you’ll even need to sit through the slow boot process just like a real system, so you’ll even need to sit through the slow boot process just like a real system, so you’ll even need to sit through the slow boot process just like a real system, so you’ll even need to sit through the slow boot process just like a real

device. device. device. device.

� For this reason, once the AVD is up and running, it’s best not to close it down For this reason, once the AVD is up and running, it’s best not to close it down For this reason, once the AVD is up and running, it’s best not to close it down For this reason, once the AVD is up and running, it’s best not to close it down

until you’ve finished developing for the day.until you’ve finished developing for the day.until you’ve finished developing for the day.until you’ve finished developing for the day.

� When the emulator has booted, When the emulator has booted, When the emulator has booted, When the emulator has booted, Eclipse automatically Eclipse automatically Eclipse automatically Eclipse automatically installs and runs your installs and runs your installs and runs your installs and runs your

application.application.application.application.

PhoneGapPhoneGapPhoneGapPhoneGap

It's a tool for building mobile apps using web-tech.

• HTML for layout ( Better yet HTML5 )• JavaScript for accessing device functionality• CSS for rich look and feel. ( Better yet CSS3 )



Architecture of a typical PhoneGap app

� There is usually a server component involved.

� JavaScript calls the server via XHR to get JSON data.

� HTML/JS/CSS + graphic assets are on the device, packaged as part of the build process.

� JavaScript can store retrieved data in a SQLite database for offline access.

� JavaScript can cache images too.

How is PhoneGap different from a mobile web site?

� Mobile websites are domain restricted to their origin URL and cannot access other sites/APIs

� PhoneGap applications are loaded from the file:// protocol so server requests are NOT restricted.

� With PhoneGap you can build powerful mashups accessing multiple services.



Features in PhoneGap Features in PhoneGap Features in PhoneGap Features in PhoneGap

with exampleswith exampleswith exampleswith examples

� Toggle AccelerometerToggle AccelerometerToggle AccelerometerToggle Accelerometer

�Get LocationGet LocationGet LocationGet Location

�Call 411Call 411Call 411Call 411

�BeepBeepBeepBeep

� VibrateVibrateVibrateVibrate

�Get a PictureGet a PictureGet a PictureGet a Picture

�Get Phone's ContactsGet Phone's ContactsGet Phone's ContactsGet Phone's Contacts

�Check NetworkCheck NetworkCheck NetworkCheck Network

�CompassCompassCompassCompass

�web database (SQLite)web database (SQLite)web database (SQLite)web database (SQLite)

� FilesFilesFilesFiles

� Local and Session storageLocal and Session storageLocal and Session storageLocal and Session storage

PhoneGap ArchitecturePhoneGap ArchitecturePhoneGap ArchitecturePhoneGap Architecture



Setup New Setup New Setup New Setup New PhogeGapPhogeGapPhogeGapPhogeGap ProjectProjectProjectProject

• Launch Android IDE, then under the menu select New > New > New > New >

Android Android Android Android ProjectProjectProjectProject

• In the root directory of the project, create two new

directories:

/libs/libs/libs/libs

assets/wwwassets/wwwassets/wwwassets/www

/res/res/res/res

• Now create and open a new file

named index.htmlindex.htmlindex.htmlindex.html in

the assets/wwwassets/wwwassets/wwwassets/www directory. Paste the following

code:



Deploy to SimulatorDeploy to SimulatorDeploy to SimulatorDeploy to SimulatorRight click the project and go to Run AsRun AsRun AsRun As and click Android Android Android Android

ApplicationApplicationApplicationApplication

Eclipse will ask you to select an appropriate AVD. If there isn't

one, then you'll need to create it using the “android” command.

Deploy Deploy Deploy Deploy to Deviceto Deviceto Deviceto DeviceMake sure USB debugging is enabled on your device and plug it

into your system. (Settings > Applications > Development)

Right click the project and go to Run AsRun AsRun AsRun As and click Android Android Android Android

ApplicationApplicationApplicationApplication

DoneDoneDoneDone!!!!

DEMO: PhoneGap Basic Example



Device

The devicedevicedevicedevice object describes the device's

hardware and software.

Device



Events

Deviceready: This is an event that fires when

PhoneGap is fully loaded.

PhoneGap lifecycle events.

Events

pause: This is an event that fires when a

PhoneGap application is put into the background.

resume: This is an event that fires when a

PhoneGap application is retrieved from the

background.



Events

Online and offline: These are events that fire

when a PhoneGap application is online/offline

(connected to the Internet).

Events

backbutton, searchbutton, menubutton,

startcallbutton, endcallbutton, volumeupbutton,

Volumedownbutton: fire when the user presses

a given button.

batterystatus, batterylow, batterycritical: fire based

on the battery level.



Notifications

Visual, audible, and tactile device notifications.

notification.alert: Shows a custom alert or dialog

box.

Notifications

notification.confirm: Shows a customizable

confirmation dialog box.



Notifications

notification.beep: The device will play a beep

sound.

notification.vibrate: Vibrates the device for the

specified amount of time.

Takes a photo using the camera or retrieves a

photo from the device's album. The image is

returned as a base64 encoded StringStringStringString or as the

URI of an image file.

Camera Camera Camera Camera



Provides access to the audio, image, and video capture

capabilities of the device.

Capture Capture Capture Capture

capture.captureAudio

capture.captureImage

capture.captureVideo



The MediaMediaMediaMedia object provides the ability to record and play

back audio files on a device.

Media Media Media Media

MethodsMethodsMethodsMethods

media.getCurrentPosition: Returns the current position within an audio file.

media.getDuration: Returns the duration of an audio file.

media.play: Start or resume playing audio file.

media.pause: Pause playing audio file.

media.release: Releases the underlying OS'es audio resources.

media.seekTo: Moves the position within the audio file.

media.startRecord: Start recording audio file.

media.stopRecord: Stop recording audio file.

media.stop: Stop playing audio file.

Media Media Media Media



The geolocationgeolocationgeolocationgeolocation object provides access to

the device's GPS sensor.

GeolocationGeolocationGeolocationGeolocation

MethodsMethodsMethodsMethods

• geolocation.getCurrentPosition

• geolocation.watchPosition

• geolocation.clearWatch

GeolocationGeolocationGeolocationGeolocation



The accelerometer is a motion sensor that detects the

change (delta) in movement relative to the current device

orientation. The accelerometer can detect 3D movement

along the x, y, and z axis. The acceleration is returned

using the accelerometerSuccess callback function.

AccelerometerAccelerometerAccelerometerAccelerometer

The compass is a sensor that detects the direction or

heading that the device is pointed. It measures the

heading in degrees from 0 to 359.99.

Compass



The connectionconnectionconnectionconnection object gives access to the device's cellular

and wifi connection information.

Connection

The contactscontactscontactscontacts object provides access to the device

contacts database.

Contacts



Contacts

An API to read, write and navigate file system hierarchies.

File

FileReader: An object that allows one to read a file



File

FileWriter: An object that allows one to write to

a file

FileSystem: An object that represents the

Device’s filesystem

File

FileTransfer: An object that allows you to upload

files to a server or download files from a server



Storage

This API is based on the W3C Web SQL Database

Specification and W3C Web Storage API

Specification. Some devices already provide an

implementation of this spec. For those devices,

the built-in support is used instead of replacing it

with PhoneGap's implementation. For devices that

don't have storage support, PhoneGap's

implementation should be compatible with the

W3C specification.

Storage

openDatabase: Returns a new Database object.

Database: Contains methods that allow the user

to manipulate the Database



Storage

SQLResultSet: When the executeSql method of a

SQLTransaction is called it will invoke it's callback

with a SQLResultSet.

Call 511Call 511Call 511Call 511

Html:Html:Html:Html:<a <a <a <a hrefhrefhrefhref===="tel:511" class=""tel:511" class=""tel:511" class=""tel:511" class="btnbtnbtnbtn large">Call 411</a>large">Call 411</a>large">Call 411</a>large">Call 411</a>

That is it !!That is it !!That is it !!That is it !!



Session StorageSession StorageSession StorageSession Storage

Session storage is way better than what cookies have to offer. Session storage is way better than what cookies have to offer. Session storage is way better than what cookies have to offer. Session storage is way better than what cookies have to offer.

With different implementations the max limit can be something With different implementations the max limit can be something With different implementations the max limit can be something With different implementations the max limit can be something

sufficient sufficient sufficient sufficient in the in the in the in the order of few MBs.order of few MBs.order of few MBs.order of few MBs.

Unlike Cookies Session data is not sent with every request. The Unlike Cookies Session data is not sent with every request. The Unlike Cookies Session data is not sent with every request. The Unlike Cookies Session data is not sent with every request. The

advantage: request payload is minimal.advantage: request payload is minimal.advantage: request payload is minimal.advantage: request payload is minimal.

So how So how So how So how exactly exactly exactly exactly do we write it? Here goes an exampledo we write it? Here goes an exampledo we write it? Here goes an exampledo we write it? Here goes an example::::

sessionStorage.setItemsessionStorage.setItemsessionStorage.setItemsessionStorage.setItem('('('('userNameuserNameuserNameuserName', '', '', '', 'taranfxtaranfxtaranfxtaranfx'); // defining the session variable'); // defining the session variable'); // defining the session variable'); // defining the session variable

alert("Your user is: " + alert("Your user is: " + alert("Your user is: " + alert("Your user is: " + sessionStorage.getItemsessionStorage.getItemsessionStorage.getItemsessionStorage.getItem('('('('userNameuserNameuserNameuserName'));// accessing it '));// accessing it '));// accessing it '));// accessing it

alert("Hello " + alert("Hello " + alert("Hello " + alert("Hello " + sessionStorage.userNamesessionStorage.userNamesessionStorage.userNamesessionStorage.userName); // another way of accessing the ); // another way of accessing the ); // another way of accessing the ); // another way of accessing the

variable variable variable variable sessionStorage.removeItemsessionStorage.removeItemsessionStorage.removeItemsessionStorage.removeItem('('('('userNameuserNameuserNameuserName'); // finally unset it'); // finally unset it'); // finally unset it'); // finally unset it

The The The The localStoragelocalStoragelocalStoragelocalStorage JavaScript object is functionally identical to the JavaScript object is functionally identical to the JavaScript object is functionally identical to the JavaScript object is functionally identical to the

sessionStoragesessionStoragesessionStoragesessionStorage object. They only differ in persistence and scope. object. They only differ in persistence and scope. object. They only differ in persistence and scope. object. They only differ in persistence and scope.

Scope: Scope: Scope: Scope: localStoragelocalStoragelocalStoragelocalStorage data is accessible across all browser windows data is accessible across all browser windows data is accessible across all browser windows data is accessible across all browser windows

while while while while sessionStoragesessionStoragesessionStoragesessionStorage data is confined to the browser window that it data is confined to the browser window that it data is confined to the browser window that it data is confined to the browser window that it

was created inwas created inwas created inwas created in....

Local StorageLocal StorageLocal StorageLocal Storage

localStorage.setItemlocalStorage.setItemlocalStorage.setItemlocalStorage.setItem('('('('userNameuserNameuserNameuserName', '', '', '', 'taranfxtaranfxtaranfxtaranfx'); // defining the '); // defining the '); // defining the '); // defining the localStoragelocalStoragelocalStoragelocalStorage variable variable variable variable

alert("Your user is: " + alert("Your user is: " + alert("Your user is: " + alert("Your user is: " + localStorage.getItemlocalStorage.getItemlocalStorage.getItemlocalStorage.getItem('('('('userNameuserNameuserNameuserName')); // accessing it ')); // accessing it ')); // accessing it ')); // accessing it

alert("Hello " + alert("Hello " + alert("Hello " + alert("Hello " + localStorage.userNamelocalStorage.userNamelocalStorage.userNamelocalStorage.userName); // another way of accessing the ); // another way of accessing the ); // another way of accessing the ); // another way of accessing the

variable variable variable variable localStorage.removeItemlocalStorage.removeItemlocalStorage.removeItemlocalStorage.removeItem('('('('userNameuserNameuserNameuserName'); // finally unset it'); // finally unset it'); // finally unset it'); // finally unset it



DEMO: PhoneGap Examples

EXAMPLE: Accessing Stock Quotes through Yahoo

Send Send Send Send HttpGetRequestHttpGetRequestHttpGetRequestHttpGetRequest to to to to the following URL:the following URL:the following URL:the following URL:

httphttphttphttp://query.yahooapis.com/v1/public/yql?q=select%20*%2://query.yahooapis.com/v1/public/yql?q=select%20*%2://query.yahooapis.com/v1/public/yql?q=select%20*%2://query.yahooapis.com/v1/public/yql?q=select%20*%2

0from%20yahoo.finance.quotes%20where%20symbol%20in0from%20yahoo.finance.quotes%20where%20symbol%20in0from%20yahoo.finance.quotes%20where%20symbol%20in0from%20yahoo.finance.quotes%20where%20symbol%20in

%20(%22" + %20(%22" + %20(%22" + %20(%22" + symbolsymbolsymbolsymbol + + + +

"%"%"%"%22)%0A%09%09&&format=22)%0A%09%09&&format=22)%0A%09%09&&format=22)%0A%09%09&&format=json&envjson&envjson&envjson&env=store%3A%2F%2Fd=store%3A%2F%2Fd=store%3A%2F%2Fd=store%3A%2F%2Fd

atatables.org%2Falltableswithkeysatatables.org%2Falltableswithkeysatatables.org%2Falltableswithkeysatatables.org%2Falltableswithkeys

Use $.Use $.Use $.Use $.getJSONgetJSONgetJSONgetJSON() to send the request and in () to send the request and in () to send the request and in () to send the request and in

the call back function the call back function the call back function the call back function obtain obtain obtain obtain

json.query.results.quote.LastTradePriceOnlyjson.query.results.quote.LastTradePriceOnlyjson.query.results.quote.LastTradePriceOnlyjson.query.results.quote.LastTradePriceOnly

current trends in native and crossand cross- ---platform mobile ... › ~alfuqaha › summer13 ›...

Documents