Current Trends in Native and Cross-Platform Mobile Application Development

Transcription

1 Current Trends in Native and Cross-Platform Mobile Application Development Ala Al-Fuqaha, Ph.D. Associate Professor and Director, NEST Research Lab College of Engineering & Applied Sciences Computer Science Department Western Michigan University Steps for installing First Android app Download the Android ADT Bundle for your platform (Windows, Mac OS X, or Linux). The Android SDK can be downloaded from Extract the downloaded file to somewhere memorable on your hard drive (no spaces on the file path). This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 1

2 Go to help Install New Software Add Add a Repository to the App_Laud PhoneGap Plugin Name; MDS AppLaud Location Location: ile-web web-development development-with with- phonegap/tags/r1.2/download Continues Choose File->New >New->Project >Project Choose Android Project In the New Project dialog, enter the following This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 2

3 Choose Run Application Changing the icon of the Android app This is where the icon is placed. The image should be saved as icon.gif This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 3

4 Try running your application again (F6 F6). Eclipse will now build your project and 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 device. 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. When the emulator has booted, Eclipse automatically installs and runs your application. PhoneGap 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 ) This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 4

5 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. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 5

6 Features in PhoneGap with examples Toggle Accelerometer Get Location Call 411 Beep Vibrate Get a Picture Get Phone's Contacts Check Network Compass web database (SQLite) Files Local and Session storage PhoneGap Architecture This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 6

7 Setup New PhogeGap Project Launch Android IDE, then under the menu select New > Android Project In the root directory of the project, create two new directories: /libs assets/www /res Now create and open a new file named index.html in the assets/www assets/www directory. Paste the following code: This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 7

8 Deploy to Simulator Right click the project and go to Run As and click Android Application 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 to Device Make 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 As and click Android Application Done! DEMO: PhoneGap Basic Example This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 8

9 Device The device object describes the device's hardware and software. Device This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 9

10 Events PhoneGap lifecycle events. Deviceready: This is an event that fires when PhoneGap is fully loaded. 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. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 10

11 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. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 11

12 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. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 12

13 Notifications notification.beep: The device will play a beep sound. notification.vibrate: Vibrates the device for the specified amount of time. Camera Takes a photo using the camera or retrieves a photo from the device's album. The image is returned as a base64 encoded String or as the URI of an image file. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 13

14 Capture Provides access to the audio, image, and video capture capabilities of the device. capture.captureaudio capture.captureimage capture.capturevideo This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 14

15 Media The Media object provides the ability to record and play back audio files on a device. Methods 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 This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 15

16 Geolocation The geolocation object provides access to the device's GPS sensor. Methods geolocation.getcurrentposition geolocation.watchposition geolocation.clearwatch Geolocation This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 16

17 Accelerometer 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. Compass 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 This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 17

18 Connection The connection object gives access to the device's cellular and wifi connection information. Contacts The contacts object provides access to the device contacts database. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 18

19 Contacts File An API to read, write and navigate file system hierarchies. FileReader: An object that allows one to read a file This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 19

20 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 This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 20

21 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 This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 21

22 Storage SQLResultSet: When the executesql method of a SQLTransaction is called it will invoke it's callback with a SQLResultSet. Call 511 Html: <a href="tel:511" class="btn large">call 411</a> That is it!! This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 22

23 Session Storage Session storage is way better than what cookies have to offer. With different implementations the max limit can be something sufficient in the order of few MBs. Unlike Cookies Session data is not sent with every request. The advantage: request payload is minimal. So how exactly do we write it? Here goes an example: sessionstorage.setitem(' ('username username', 'taranfx ' taranfx'); // defining the session variable alert("your user is: " + sessionstorage.getitem(' ('username username'));// accessing it alert("hello " + sessionstorage.username); // another way of accessing the variable sessionstorage.removeitem(' ('username username'); // finally unset it Local Storage The localstorage JavaScript object is functionally identical to the sessionstorage object. They only differ in persistence and scope. Scope: localstorage data is accessible across all browser windows while sessionstorage data is confined to the browser window that it was created in. localstorage.setitem(' ('username username', 'taranfx ' taranfx'); // defining the localstorage variable alert("your user is: " + localstorage.getitem(' ('username username')); // accessing it alert("hello " + localstorage.username); // another way of accessing the variable localstorage.removeitem(' ('username username'); // finally unset it This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 23

24 DEMO: PhoneGap Examples EXAMPLE: Accessing Stock Quotes through Yahoo Send HttpGetRequest to the following URL: 0from%20yahoo.finance.quotes%20where%20symbol%20in %20(%22" + symbol + "%22)%0A%09%09&&format= 22)%0A%09%09&&format=json&env json&env=store%3a%2f%2fd atatables.org%2falltableswithkeys Use $.getjson getjson() to send the request and in the call back function obtain json.query.results.quote.lasttradepriceonly This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary. 24