Getting Started with App Inventor

This lesson provides hands-on instructions for getting started with mobile programming and App Inventor using the computers in USF's Kudlick classroom (Harney 235) or the Harney 530/535 labs at the University of San Francisco.

PHONE SETUP
There are may Android OS versions and devices, so these instructions are not exact. Explore a bit and definitely ask your instructor/TA for help. Note: you should bring your device, charged, to each class session, along with the USB cord.

0. Obtain a Google Account. If you don't have one, go to gmail.com. Note that personal Google accounts work better than the USF dons accounts for the tools we're using.

1. Get to the Android home screen. When you turn the phone on, you may be at the home screen (you'll see a few icons and maybe a search form at top). If you can get to the home screen, great, go on to the next step.  But on some phones,
If you don't have a SIM card in it and haven't signed on before, it  will instead ask you to sign in with a Google account or go through a tutorial. Do not do either yet-- you need to be connected to WIFI first. Just choose Skip at every juncture. This should get you to the home screen.

2. Connect to WIFI. USF CS labs have WIFI named cslabs. Your instructor will give you the password. Connect by:
  • Click the home button to get to home screen
  • Click the menu button and choose Settings
  • Choose Wireless & networks and then Wi-Fi settings. cslabs should appear as an available choice. Choose it. Enter the password given by your instructor.
  • NOT DONE YET: The cslabs wi-fi requires you to authenticate your device once. Go back to the phone's home screen, choose the browser, and a page will come up allowing you to enter your CS user account and password. Enter it, and then make sure you can get to google.com or some other page. If you can, you're connected and you won't have to authenticate again.

3. Sync your Google account. 

  • Open the Android market app (if its not on the home page, drag your finger on the all apps widget to see all apps, and scroll to find the Market.
  • If you haven't logged in with a Google account, you'll be prompted to enter your Google user name and password. Use the same gmail account you'll be using to build apps (not your USF dons account).
  • If you login successfully, the Android market should open up.
4. Download the ZXing QR code scanner app.
  • In the app market app, search for 'zxing' or 'barcode scanner', then download the app. You'll use this app to scan other apps, like the ones you build, into your phone. You can also use it to get info on books. If you have a book with you, try scanning the QR code on it.

5. Setup your phone for installing apps and app building. You need to set a few settings on your phone to build and install apps. Do the following on your device:

  • Choose Settings | Applications, and check the box labeled something like: "Unknown Sources"
  • From the Applications screen, choose Development and then check "USB Debugging" and "Stay Awake".

6. Play with your phone. Try some apps, download some, check out the browser and maps. Get comfortable with it.

7. Download and try a soundboard app created by last semester's students.



BUILD AN APP

Now you're ready to build an app with App Inventor.

1. On your computer, open a browser and navigate to http://beta.appinventor.mit.edu. Login with your Google account.

2. Now build your first app, Hello Purr, following the directions here: appinventor.org/hellopurr

You can find the kitty image and sound file referred to in the tutorial at: http://examples.oreilly.com/0636920016632/.

3. Be sure and test your Hello Purr app both on an emulator and your phone.

Done early? Play around with App Inventor or create a different app with different images/sounds. Maybe a name that tune app?


TROUBLESHOOTING


Blocks Editor not appearing or not showing your components
  • If you open the blocks editor more than once, the app inventor component designer will not be connected to the blocks editor you're looking at: no component names, e.g., Button1, will show up when you click on "my blocks". When this happens, see if there is another block editor open that is connected correctly, and close the ones that aren't. If you still have problems, close all of them and re-open the blocks editor.
Phone not connecting  to App Inventor
  • When you click on "open blocks editor" from app inventor, you need to open the file that is downloaded. It may  open with "Iced Tea Web Start" or some other program which is not correct. It must be opened with the JavaWS program..
  • Make sure your phone is setup correctly-- you need to change some settings on your phone.
  • The USF lab computers don't have drivers for every Android phone out there. You may need assistance from our IT support staff. In this case, email support@cs.usfca.edu and make an appointment.
  • If you cannot connect your phone to the computer through the USB connection, you can test your app by scanning it as a barcode. First, make sure you have a barcode scanner on your phone: open the Android Market and search for ZXing, then download that barcode scanner. Then In App Inventor, choose  | Show Barcode. When it appears 20-30 seconds later, you can scan the app onto your phone.
Images not appearing on phone
  • One possibility is your phone must have an sd card and be in a particular mode (not Mass storage mode on some phones)





Comments