Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
© 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).).).).
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 2222
�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 …
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 3333
�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
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 4444
� 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 )
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 5555
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.
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 6666
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
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 7777
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:
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 8888
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
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 9999
Device
The devicedevicedevicedevice object describes the device's
hardware and software.
Device
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 11110000
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.
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 11111111
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.
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 11112222
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.
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 11113333
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
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 11114444
Provides access to the audio, image, and video capture
capabilities of the device.
Capture Capture Capture Capture
capture.captureAudio
capture.captureImage
capture.captureVideo
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 11115555
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
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 11116666
The geolocationgeolocationgeolocationgeolocation object provides access to
the device's GPS sensor.
GeolocationGeolocationGeolocationGeolocation
MethodsMethodsMethodsMethods
• geolocation.getCurrentPosition
• geolocation.watchPosition
• geolocation.clearWatch
GeolocationGeolocationGeolocationGeolocation
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 11117777
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
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 11118888
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
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 11119999
Contacts
An API to read, write and navigate file system hierarchies.
File
FileReader: An object that allows one to read a file
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 22220000
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
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 22221111
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
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 22222222
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 !!
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 22223333
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
© 2004 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 22224444
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