When Google’s App Inventor beta was announced several weeks ago, I knew this was something we’d want to write about here at ProfHacker. Since Google describes App Inventor as a tool that can be used by non-developers, I asked to be the one to take this post. “Non-developer” describes me quite well. I can write a little HTML, and I can follow basic directions to add a line to a PHP file, but that’s the extent of my coding skills. I figured that made me a good guinea pig — is App Inventor really as easy to use as the video on their About page suggests?
Since the rest of the team was agreeable, I immediately signed up for an account, and waited a few weeks to for Google to get back to me. Once I had an active account, I started poking around a bit.
Fortunately, Google maintains a page with links to tutorials and documentation, so it wasn’t hard to figure out where to go. Being a newbie, I thought it best to begin with the links under “Getting Started.”
Setting up my computer and phone was easy. I had to be sure I was running the proper version of Java on my computer (I was), and go into the Settings menu on my phone to make a few adjustments. I also needed to download and install the App Inventor Extras package.
The next step was connecting App Inventor to my phone. The instructions given in the tutorial were straightforward, though for some reason I got the following message when I clicked “Connect to phone” in the Blocks Editor (click on this or any of the following images for larger versions):
Since I was working in the Chrome browser, I decided to quit and try the process from Safari instead. That resolved the issue.
Once I’d finished the setup, it was time to try a tutorial. The first one I tried was the one that creates the same application featured in the About page video: Hello Purr. Things were moving along well until I tried to add an image to the application. When I tried that part of the tutorial, I got the following error message:
Apparenty I’m not the only one to encounter this difficulty. Per some of the advice in that thread, I tried setting the default PC connection on my phone to charge only, and restarted App Inventor. That didn’t help. At least before, the Blocks Editor recognized that I had a phone connected. When I set the phone connection to charge only, that wasn’t the case.
So I reset the phone settings to mount the phone as a disk drive whenever it’s connected to a PC. Though the Block Editor had recognized the phone in this mode before, it no longer did. Sigh. The next step? Disconnect the phone and reboot it. Exit App Inventor and restart it. Try again. Another sigh. Nothing doing. Though I’d succesfully connected to the phone once, no amount of altering settings and restarting the phone would get Blocks Editor talking to it again. Finally, I tried restarting my Mac as well as the phone. No dice. I tried using a different USB port. Nada. I gave up for the day.
The next day, I looked again at my phone settings, as described in Getting Started. Somehow, USB debugging had been unchecked on my phone, so I selected it and tried again, being sure to connect the phone in “charge only” mode.
Success! The Blocks Editor saw the phone, and the image that had previously refused to transfer was now present on the phone. With the image appearing correctly, I tried to add a sound file to the application. All worked as advertised. (I wish I’d thought to double-check the phone settings earlier. What can I say? Sometimes a night’s sleep makes a huge difference.)
Having completed Part 1 of the Hello Purr tutorial, I moved on to Part 2. (Part 1 of the tutorial covers making the phone meow when an image of a cat is tapped. Part 2 covers adding vibration and making the phone meow when it’s shaken. It also covers packaging an app for the phone, so that the app will work when the phone isn’t connected to the computer, and so that the app can be shared with other phones.)
Again, all continued to move along as smoothly as the tutorial suggested it should. Packaging the completed application was easy. App Inventor provides three options: Show Barcode, Download to this Computer, and Download to Connected Phone (seen at the right in the image below):
The last of those does just what you think it does. Download to this Computer creates a .apk file that can be shared, and Show Barcode creates a QR code for the application. Apparently Google stores the application for you. When I tried to install the application by scanning the QR code, I was directed to the following URL: http://appinventor.googlelabs.com/ode/download/project-output/97391/Android. I clicked on the link, and my phone happily downloaded the .apk file. (I didn’t forget to make the link live; I really didn’t think anyone would be interested in downloading a meowing, purring cat photo. Hello Purr is a pretty lame app, but a beginner has to start somewhere.)
Once I’d successfully completed the newbies’ tutorial, I was curious to see what the more advanced tutorials looked like. The last tutorial in the advanced series is Android, Where’s My Car? This tutorial lets you download an application that’s actually useful, shows you how it works, and provides you with the source code so you can try your hand at customization.
An app like Android, Where’s My Car is well beyond my capabilities at this point, and at minimum, I’d need to work through all the other App Inventor tutorials before trying my hand at designing an application on my own. That said, my initial experience with App Inventor (inital connectivity problems aside) is that it’s a fun, easy way for beginners to learn some basic programming skills.
Have you tried your hand at App Inventor? If so, we’d love to hear about your experience in the comments.
[Initial post image by Flickr user mrbill / Creative Commons licensed]. All other images by the author.