SEP a success!

For the past few weeks, I had been intensely preparing for a weeklong program for high school girls interested in computer science. I mentioned the program a couple times in past posts. I wanted to follow up now with a summary of week, including highlights and lowlights and lessons learned.

The program ran from Jun 28th to Jul 2nd. It started at 10am and went to 3pm every day, with an hour lunch break at noon. There were about 20 students in total, although some students had previous commitments and didn't make it every day.

Over the course of the week, we taught the students a variety of computer related topics. First, we started them off with a group exercise where they came up with an idea for a mobile app (exercise based on the Technovation Challenge). This exercise was designed to teach the students that applications don't start with coding. You first need an idea before you can start creating the app. The students worked for an hour on this task, then had the opportunity to present their idea to the rest of the group. The students came up with some really great products:

1. An app for learning more about colleges and signing up for newsletters, etc
2. An app for identifying what an animals body language might be telling you
3. [I can't remember this one, and it's the one that won! I'll figure it out soon and fill in this blank]
4. An app for allowing users to quickly jot down reminders and add the reminders to a calendar

The students then voted for the best app, and the group with the most votes got a prize (#3).

Next, we taught the students about computer architecture. We had about 6 computers set up that the students could take apart. We had worksheets with labeled pictures. I was surprised to find out that several of the students had already taken apart computers, and one had even built a computer from scratch! Students typically enjoy this exercise, since it's very hands on.

After computer architecture, we jumped into some python programming. We showed them some of the basics, including the infamous print "hello world" statement, data types, variables, and data structures. The students picked up on the concepts very quickly. They worked through exercises and seemed to understand the concepts really well.

After the intro to programming, we moved on to Computer Networking. This is usually one of the most popular lessons! As part of the lesson, we teach the students how to send email directly from the command line. This allows them to specify any sender email address, they'd like. :) This is fun for them, since they can send emails to friends from obama@whitehouse.gov or some other similar email address. They also learned about GET and POST, using GET directly from the command line.

Next, we taught them about databases and persistent data. They created tables in a database, added data to the table, and retrieved the data from the table, all using SQL! They even learned how to do joins, and were very curious, asking how to delete data and remove tables from the database.

With networking, databases, and programming under their belt, we introduced them to Google App Engine. Google App Engine allows users to create web applications very easily. We had developed a basic web app for them to build upon. The final product can be seen here: http://testingforsep.appspot.com. We choose the Outfit Builder app because it seemed like a product they could relate to. I know when I was a teen, I loved shopping and buying new clothes. We were assuming that teens haven't changed much over the years. :) As part of the intro to App Engine, I showed them how to create a basic application from scratch. They then practiced deploying an application to the Google servers.

Now that they understood how App Engine worked, we needed to teach them a couple more programming concepts before they could actually start filling in the missing pieces of the app. First, we taught them if statements. Once they understood if statements, they could build out the change background color portion of the site. Next, we taught them for loops. They could then display the bottoms on the page, and also work on the filtering form. We gave them a few other exercises to work on, including updating the database when a form was submitted on the Edit page and creating the random outfit. Overall, the students performed very well on all these exercises and finished them very quickly! In the future, I would prepare more advanced exercises for the students who were more advanced.

On Thursday, we gave the students a break and took them to the Intel museum. This turned out to be a lot of fun. Our tour guide was very knowledgeable and good with the students. We had a tour and also an activity called "Puzzle Ball" where the students had to write instructions for for to put together a puzzle. The students were allowed to keep the puzzles afterwards, which everyone was happy about. I would highly recommend the Intel museum tour to any school or summer program. It offers a great opportunity for students to learn more about computer processing.

Finally, we taught them about Android phone development and gave them access to App Inventor to create the basic HelloPurr application. App Inventor provides developers with a GUI interface that allows developers to drag and drop UI elements onto the phone screen, edit the properties of each element, then open another GUI application to add the functionality to each element. This portion, the Code Blocks editor, acts like a jigsaw puzzle. The students choose which element they want to add functionality to, then can select from different methods and outcomes, each fitting together like puzzle pieces. I was very impressed at how quickly the students picked it up!! The entire exercise was supposed to take about 1:30 in total. They finished in about 20 minutes!! Amazing. In fact, many of them even figured out how to add different things to the app, including changing the background color of the screen or changing the .wav file associated with the program. I was really impressed and am excited to see what Google does with App Inventor. I think it's a great tool for students to learn how to program the Android phone. In fact, I think it could be useful for everyone, kids and adults alike. I might even use it if I needed to create a basic Android app! Good work Google, keep innovating. :)

Overall, it was a great week. When the students were leaving, they were all smiles, which is always a good sign. A few things I learned from the program:

1. Prepare extra difficult material for those students who might outperform the rest
2. Have more lessons for App Inventor.
3. Go to the Intel museum again!
4. Give the students more opportunity to customize the App Engine application
5. Have backup material prepared in case something doesn't work correctly.

Thanks! If you're interested in learning more about the program, please feel free to contact me (kat.brisbin at gmail). You can also download most of the material at this website: http://cs.usfca.edu/~sep/calendar.html

Android Unboxing

Having fun with Android today:

Creating an Android 'Library'

In some instances, you might want Android classes available to multiple Android applications. To simply add an Android project to the another Android project's build path will not work (a good explanation is here: http://groups.google.com/group/android-developers/browse_thread/thread/5537ae10e4143240). A workaround is summarized below:

1. Create a new Android project.

2. Add any necessary classes and interfaces (including AIDLs)

3. Allow the AIDLs to compile and generate Java code.

4. Update the .project file. This file is located in the root of the Android project. It contains the following contents:

1:  <?xml version="1.0" encoding="UTF-8"?> 
2:  <projectDescription> 
3:  <name>[project name]</name> 
4:  <comment></comment> 
5:  <projects> 
6:  </projects> 
7:  <buildSpec> 
8:  <buildCommand> 
9:  <name>com.android.ide.eclipse.adt.ResourceManagerBuilder</name> 
10:  <arguments> 
11:  </arguments> 
12:  </buildCommand> 
13:  <buildCommand> 
14:  <name>com.android.ide.eclipse.adt.PreCompilerBuilder</name> 
15:  <arguments> 
16:  </arguments> 
17:  </buildCommand> 
18:  <buildCommand> 
19:  <name>org.eclipse.jdt.core.javabuilder</name> 
20:  <arguments> 
21:  </arguments> 
22:  </buildCommand> 
23:  <buildCommand> 
24:  <name>com.android.ide.eclipse.adt.ApkBuilder</name> 
25:  <arguments> 
26:  </arguments> 
27:  </buildCommand> 
28:  </buildSpec> 
29:  <natures> 
30:  <nature>com.android.ide.eclipse.adt.AndroidNature</nature> 
31:  <nature>org.eclipse.jdt.core.javanature</nature> 
32:  </natures> 
33:  </projectDescription> 

Remove the following elements from the buildSpec:

1:   <buildCommand>  
2:  <name>com.android.ide.eclipse.adt.ResourceManagerBuilder</name>  
3:  <arguments>  
4:  </arguments>  
5:  </buildCommand>  
6:  <buildCommand>  
7:  <name>com.android.ide.eclipse.adt.PreCompilerBuilder</name>  
8:  <arguments>  
9:  </arguments>  
10:  </buildCommand>  
11:  <buildCommand>  
12:  <name>com.android.ide.eclipse.adt.ApkBuilder</name>  
13:  <arguments>  
14:  </arguments>  
15:  </buildCommand>  

Remove the following element from the natures:

1:   <nature>com.android.ide.eclipse.adt.AndroidNature</nature>  

5. Save the updated .project file.

6. Refresh the Android project in Eclipse.

7. Clean the project (select the project folder, select Project > Clean... from the main menu)

8. Remove the R.java file from the generated files.

Your project should now be ready to be added to the build path of other Android projects.

My First Android Application - Device photos

This tutorial shows you the code to get metadata about the images on your Android phone and also how to set up your development environment to test the code locally using the Emulator. This tutorial assumes that you have properly installed version 1.5 of the Android SDK, are using Eclipse to develop Android applications, and have installed the ADT for Eclipse. Also, these instructions were written for Mac users. I will link to instructions for Linux users whenever I can. PC users - you're on your own.

Creating an SD Card

First and foremost: you should know that the photos you take with your Android phone are stored on the SD Card. The images are stored in the directory: /sdcard/dcim/Camera. We're going to mimic the SD Card locally. The local SD Card is actually a disk image. No SD Card disk image comes with Android SDK, so we need to create one.

To create the SD Card image, navigate to your /tools directory using the Terminal. Depending on your PATH variable, you might have to add the tools directory to your PATH. This will allow you run the files in the tools directory. In my case, I ran the command:

export PATH=$PATH:/Users/kat/JavaLibraries/android1.5/tools

Next, we need to actually create a disk image of the SD Card. Run the command:

mksdcard 1024M .img

In my case, I ran the command:

mksdcard 1024M myimage.img

If you look in the tools directory, you should see a new file in there called 'myimage.img' (or whatever you decided to call it). Please make sure you use the .img extension, since this will help you later when mounting the image. Which brings me to my next topic: mounting the image. :)

Adding Folders/Images to the SD Card Image

In order to create folders and upload files to our new image, I found it easiest to use the Disk Utility on my mac to mount the 'myimage.img' file. If you're using Linux, try the directions here.

Start the Disk Utility application (it's in the System Utilities folder in the Applications directory). Once started, Select File > Open Disk Image... Navigate to your newly created disk image in the tools directory. Select OK. You should see the disk image in the list. If it's not already opened, right click on the image and select "Open". The SDCARD should appear under it. Right-click on the SDCARD and select "Reveal in Finder". Double-click on the "sdcard" folder in the Finder window. Once in this folder, you can create new folders and copy and paste images within the folders. In our case, we want to create the following directory structure under sdcard:

dcim/Camera

Within the Camera folder, place some images. JPGs should work fine. Not too sure about any other formats, I haven't tried them yet.

Finally, we need to unmount the disk image. Right-click on the SDCARD in the Disk Utility window. Select 'unmount sdcard'. Then eject the disk image by right-clicking on it and select "eject".

Perfect, we're almost done! Not too difficult, right?

Setting up Eclipse to Recognize the New SD Card Image

Next step is to set up Eclipse to run our new sdcard image with the Emulator instead of the non-existent one it uses by default. There are 2 possible places to make this change in Eclipse. I found one doesn't work at all, the other does. I'm going to include both places, though, just in case.

The one that didn't seem to work - In Eclipse, click on the Eclipse Menu > Preference. Expand the Android menu, select Launch. In the Default emulator options, enter

-sdcard /[path]/[imagename].img

In my case, I entered:

-sdcard /Users/kat/JavaLibraries/android1.5/tools/myimage.img

The one that did work - In Eclipse, create an Android project titled 'PhotoFun' (or whatever). Right click on the Project, select Run As > Open Run Dialog... In the Run Dialog Box, under the "Target" tab, enter the same text as above (-sdcard /[path]/[imagename].img) into the Additional Emulator Command Line Options box.

THE CODE

If you didn't create the Android Project as I mentioned in Step 2 directly above, please do so now. Call the Project 'PhotoFun' or whatever you want.

First, open the res > layout > main.xml file. Replace the TextView element with the following:

<TextView

android:id="@+id/imageData"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text=""

/>

Next, open the main class (src > PhotoFun.java). Add the following lines to the onCreate method after setContentView(R.layout.main);

TextView imageData = (TextView) findViewById(R.id.imageData);

String[] s = {MediaStore.Images.Media.TITLE,

MediaStore.Images.Media.DATE_MODIFIED, MediaStore.Images.Media.SIZE};

Cursor cursor = managedQuery(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, s, null,null,null);

StringBuilder string = new StringBuilder();

while(cursor.moveToNext()) {

String theFile =

"Title: " + cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Images.Media.TITLE))

+ "\n" +

"Date Mod: " +

cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATE_MODIFIED))

+ "\n" +

"Size: " +

cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Images.Media.SIZE));

string.append(theFile + "\n\n");

}

imageData.setText(string);

Now run your application as a Android app. Once the Emulator is loaded you should see a list of all the photos in the /sdcard/dcim/Camera directory! Awesome!