MOBILE APP PROGRAMMING SEMINAR

University of St. Francis Department of Computer ScienceNovember 18, 2010

TONIGHT’S AGENDA

•Introductions•The State of Mobile Phones•Capabilities of modern smart phones•What is Android?•Google’s Android App Inventor•Let’s build an app

CAPABILITIES OF MODERN SMART PHONES

“The Smart Phone”

Network

GPS

“Cell”

Blue Tooth

WiFi

I/O

Camera

Speaker

Display

USB

Storage Service Provider

Accelerometer

Battery

Keyboard

CPU

WHAT IS ANDROID?

Android is a software stack for mobile devices that includes an operating system, middleware and key applications.

The software stack looks like…

Source: http://developer.android.com/guide/basics/what-is-android.html

WHAT IS ANDROID?Source: http://developer.android.com/guide/basics/what-is-android.html

WHAT IS ANDROID?

Linux 2.6 KernelSecurity, memory and process management, network stack, drivers. Essentially, the abstraction layer between the hardware and software stack.

Android RuntimeCore libraries and the Dalvik VM. Dalvik VM is optimized for multiple VM’s to run efficiently.

LibrariesC/C++ libraries implementing functionality exposed through the Android App Framework.

Application FrameworkThe API to the phone.

Source: http://developer.android.com/guide/basics/what-is-android.html

WHAT IS ANDROID?

Some notes on the the Dalvik VM…

•Dalvik is a town in Iceland. Originally written by Dan Bornstein, now maintained by the Open Handset Alliance.

•The VM Runs .dex files, optimized for a small memory footprint. .class to .dex through dx command.

•Uses a dx tool to convert .class to .dex files.

•Does not use Java SE or Java ME class profiles. It uses its own library built on the Apache Harmony Java implementation project.

•Since it is not built on the standard Java runtime, it doesn’t have the same licensing restrictions. Dalvik uses the Apache 2 License.

•Developers get the comforts of Java, without Google calling it a java platform.

•Now Oracle (who now owns Sun) is not happy.

ANDROID HISTORY/TIMELINESource: http://en.wikipedia.org/wiki/Android_(operating_system)

Date MilestoneJuly, 2005 Google Acquires Android Inc.

November, 2007 Open Handset Alliance formed.

October, 2008 Android source published by Google.

February, 2009 1.1 released.

April, 2009 1.5 (Cupcake) released.

September, 2009 1.6 (Donut) released.

October, 2009 2.0 (Éclair) released.

May, 2010 2.2 (Frozen Yogurt/Froyo) released.

Q1, 2011 3.0 (Honeycomb) planned release.

GOOGLE APP INVENTOR

A Web-based visual development environment for novice programmers, based on MIT's Open Blocks Java library.

Released for beta use in July, 2010.

appinventor.googlelabs.com

Request your free account at the above URL. Takes about a week for approval.

LET’S BUILD AN APP

•We’ll now build an app using Google App Inventor.

•The machines in this lab are already configured so you can build an app.

•The next few slides are for reference, showing what was involved in the setup.

SETTING UP APP INVENTOR

Download the App Inventor Extras Softwarehttp://appinventor.googlelabs.com/learn/setup/setupwindows.html

Run the install software AppInventor_Setup_Installer_v_1_1.exe

Software installed in:C:\Program Files (x86)\AppInventor\commands-for-Appinventor

SETTING UP APP INVENTOR

Install the drivers for your phone

Motorola i1:http://developer.motorola.com/docstools/USB_Drivers/Download the appropriate driver and install.For 64 bit, the file name is Handset_USB_Driver_x64_v4.2.4

HTC EVO:Download the HTC sync software to get the proper drivers installed.http://www.htc.com/us/support/evo-sprint/downloads/

Samsung Epic:http://downloadcenter.samsung.com/content/SW/201009/20100901010102890/Samsung_Mobile_Driver_V1.3.800_For_SPH-d700_Epic_4G.zip

SETTING UP APP INVENTOR

Configure the Phone

Settings -> ApplicationsCheck Unknown Sources

Settings -> Applications -> DevelopmentCheck Stay AwakeCheck USB Debugging

On Android 1.5, USB Debugging is in a different spot:Settings -> USB

Check USB Debugging

SETTING UP APP INVENTOR

Attach the Phone and Verify Connectivity

Connect the phone via USB to your computer.Start a DOS command prompt.Start->type “cmd”cd C:\Program Files (x86)\AppInventor\commands-for-Appinventoradb devicesEnsure a device is listed under the “list of devices attached”.

SETTING UP APP INVENTOR

Verify Phone Status

On your phone you should see two new notifications appear on the phone, with icons in the status bar:

A "USB connected" notification that the phone is connected to the computer via USB

A "USB debugging connected" notification that the phone has USB debugging turned on

SETTING UP APP INVENTOR

Connecting App Inventor To Your Phone

Full setup docs available at:http://appinventor.googlelabs.com/learn/setup/starting.htm

In your web browser, go to:http://appinventor.googlelabs.com/

You will need a google account to sign in with, as well as be approved to use the google app inventor program. Go ahead and sign up, it may take up to 2 weeks to be approved.

SETTING UP APP INVENTOR

App Inventor Opening Screen

SETTING UP APP INVENTOR

Create a Project

Press the New button near the top left of the page. Enter a project name in the dialog box that appears and press OK.

SETTING UP APP INVENTOR

Open the Blocks Editor

Click the button to open the blocks editor. It will be a java webstart app that may take up to 30 seconds to launch. Allow it to run if prompted

SETTING UP APP INVENTOR

Connect the Blocks Editor to the Phone

Press the Connect to Phone button in the Blocks Editor.

If it is disabled, your system is not setup properly. Phone is not connected, or a driver is missing. Go back to getting adb devices to work.

While you're working, you can use the Restart Phone App button to restart the phone if things get hung up.

If the phone becomes disconnected, the button will change back to Connect to Phone as a signal that the connection has broken. You can press the button to reconnect.

SETTING UP APP INVENTOR

Let’s now build the pet Bernie app…

SETTING UP APP INVENTOR

1. Click on new project. Name it USF to start with.2. Set the title to “Go Fighting Saints”3. Drag a button onto the canvas.4. Click on the button. 5. In right hand properties, click on the image box. Add image by

browsing your computer for saints.png6. Set the width to “Fill Parent”7. In the text property type “Pet Me”

SETTING UP APP INVENTOR

8. On the left hand side, under Media, drag a Sound object to your canvas.

9. In the properties on the right, click the source option, and then press the add button.

10. Browse for the dog_bark.mp3 file and select it.11. Open the “Blocks Editor”. Allow java web start to run, and trust it if

asked.12. Click on “My Blocks”13. Click on Button1. This will open a new pane with several options.

Drag the “Button1.Click” to the empty canvas on the right.14. Now click on Sound1. In the pane of options, drag the Sound1.Play

into the Button1.Click object in the right.15. Try your App. Touch the dog and it should bark.

SETTING UP APP INVENTOR

16. Now go back to the component palette and under sensors drag an AccelerometerSensor onto the palette.

17. In the Blocks Editor, click on AccelerometerSensor1 and drag an AccelerometerSensor1.shaking into the work area.

18. Then drag a Sound1.play into the AccelerometerSensor1.shaking event.

19. Shake the phone and it should bark.

SETTING UP APP INVENTOR

20. Add another button. Set the width to Fill Parent. Rename the button the btnOpenUrl.

21. In Other Stuff, drag an ActivityStarter object to your palette.22. In the blocks editor, drag a btnOpenUrl to your workspace.23. Drag a set ActivityStarter1.action into the btnOpenUrl block.24. Left click on the palette and select the orangish colored “text” option.

This will add a new block to your work space. Click in it and set the text to android.intent.action.VIEW

SETTING UP APP INVENTOR

25. Drag a set ActivityStarter1.DataUri into the btnOpenUrl block.26. Left click on the palette and select the orangish colored “text” option.

This will add a new block to your work space. Click in it and set the text to http://gofighting saints.com

27. Drag an ActivityStarter1.StartActivity under the set ActivityStarter1.DataUri block.

28. Test your app. Click the button and an intent should have started to open the URL on your phone.

SETTING UP APP INVENTOR

Play around some more. Try some other widgets and have some fun.

Thanks for attending!