Mobile App Programming Seminar

1. University of St. Francis Department of Computer Science November 18, 2010 Mobile App Programming Seminar

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

3. “The Smart Phone” • Network • I/O • Storage • Service Provider • CPU • Battery • GPS • Blue Tooth • Camera • Display Capabilities of modern smart phones • “Cell” WiFi Speaker • USB • Accelerometer • Keyboard

4. Android is a software stack for mobile devices that includes an operating system, middleware and key applications. The software stack looks like… What is Android? Source: http://developer.android.com/guide/basics/what-is-android.html

5. What is Android? Source: http://developer.android.com/guide/basics/what-is-android.html

6. Linux 2.6 Kernel Security, memory and process management, network stack, drivers. Essentially, the abstraction layer between the hardware and software stack. Android Runtime Core libraries and the Dalvik VM. Dalvik VM is optimized for multiple VM’s to run efficiently. Libraries C/C++ libraries implementing functionality exposed through the Android App Framework. Application Framework The API to the phone. What is Android? Source: http://developer.android.com/guide/basics/what-is-android.html

7. Some notes on the theDalvik 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. What is Android?

8. Android history/timeline • Source: http://en.wikipedia.org/wiki/Android_(operating_system)

9. 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. Google App Inventor

10. 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. Let’s Build an App

11. Download the App Inventor Extras Software http://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

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

13. Configure the Phone Settings -> Applications Check Unknown Sources Settings -> Applications -> Development Check Stay Awake Check USB Debugging On Android 1.5, USB Debugging is in a different spot: Settings -> USB Check USB Debugging Setting up App Inventor

14. 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-Appinventor adb devices Ensure a device is listed under the “list of devices attached”. Setting up App Inventor

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

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

17. App Inventor Opening Screen Setting up App Inventor

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

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

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

21. Let’s now build the pet Bernie app… Setting up App Inventor

22. Click on new project. Name it USF to start with. Set the title to “Go Fighting Saints” Drag a button onto the canvas. Click on the button. In right hand properties, click on the image box. Add image by browsing your computer for saints.png Set the width to “Fill Parent” In the text property type “Pet Me” Setting up App Inventor

23. On the left hand side, under Media, drag a Sound object to your canvas. In the properties on the right, click the source option, and then press the add button. Browse for the dog_bark.mp3 file and select it. Open the “Blocks Editor”. Allow java web start to run, and trust it if asked. Click on “My Blocks” Click on Button1. This will open a new pane with several options. Drag the “Button1.Click” to the empty canvas on the right. Now click on Sound1. In the pane of options, drag the Sound1.Play into the Button1.Click object in the right. Try your App. Touch the dog and it should bark. Setting up App Inventor

24. Now go back to the component palette and under sensors drag an AccelerometerSensor onto the palette. In the Blocks Editor, click on AccelerometerSensor1 and drag an AccelerometerSensor1.shaking into the work area. Then drag a Sound1.play into the AccelerometerSensor1.shaking event. Shake the phone and it should bark. Setting up App Inventor

25. Add another button. Set the width to Fill Parent. Rename the button the btnOpenUrl. In Other Stuff, drag an ActivityStarter object to your palette. In the blocks editor, drag a btnOpenUrl to your workspace. Drag a set ActivityStarter1.action into the btnOpenUrl block. 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

26. Drag a set ActivityStarter1.DataUri into the btnOpenUrl block. 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 Drag an ActivityStarter1.StartActivity under the set ActivityStarter1.DataUri block. Test your app. Click the button and an intent should have started to open the URL on your phone. Setting up App Inventor

27. Play around some more. Try some other widgets and have some fun. Thanks for attending! Setting up App Inventor