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

Google App Engine - printing debug messages

The logging.debug statements are not printed by default in the local development server of Google App Engine projects. In order to display these messages, you need to add the "--debug flag" to the launch settings. Here are the steps to do so:

1. Open GoogleAppEngineLauncher
2. Right-click on your app engine project
3. Select Info...
4. In the Launch Settings section, enter "--debug" in the Extra Flags box.
5. Click Update.

Restart the server. The Logs should now display DEBUG statements in addition to warnings and info.

Bulk Upload Data to App Engine Dev DB

NOTE: these instructions are for the previous version of App Engine!

How to upload bulk data to App Engine Dev:

1. Create a loader file:

import datetime
import main
from google.appengine.ext import db
from google.appengine.tools import bulkloader

class ClothesLoader(bulkloader.Loader):
def __init__(self):
  bulkloader.Loader.__init__(self, 'Clothes',
                [('title', lambda x: x.decode('utf-8')),
                ('image', lambda x: x.decode('utf-8')),
                ('type', lambda x: x.decode('utf-8')),
                ('tag', lambda x: x.decode('utf-8'))
                ])

loaders = [ClothesLoader]

2. Create a CSV file with your data. Example:

 Jeans, http://localhost:8080/images/jeans1.jpg, bottom, spring

3. In your app.yaml file, MAKE SURE you have the following lines:

 handlers:
- url: /remote_api
 script: $PYTHON_LIB/google/appengine/ext/remote_api/handler.py

4. Also make sure that your PYTHONPATH env var has the directory in which you saved your models. On a Mac:

 export PYTHONPATH=$PYTHONPATH:<directory>

5. Finally, run the following command:

 appcfg.py upload_data --config_file=<loader python file> --filename=<csv data file> --kind=<model name> --url=http://localhost:8083/remote_api <app directory>

Photo-bot

My latest project for school involved creating a photo editing and sharing website using Google App Engine. I was excited about the opportunity because (a) I love creating web apps and (b) I was interested in learning app engine. I was pretty happy with the results of my assignment, so I thought I'd share my site with everyone: http://photo-bot.appspot.com/.

There was one pretty tricky use case I had to handle for the assignment. App Engine limits the size of Blobs saved in their datastore to 1MB. However, I had to allow users to upload photos greater than 1MB. Before saving to the datastore, the images needed to be resized. Simply keeping the image data in memory and calling images.resize() is not good enough, since the call to images.resize() actually saves the image data in the datastore, which throws an exception when the image is too large.

To solve the problem, I used blobstore. Blobstore allows files up to 10MB in size. The images could then retrieved from the blobstore, resized and saved to the datastore. The blobstore entry would then be deleted, since saving to the blobstore costs $$. :)

Of course, this makes the code more complex. And, of course, documentation on the App Engine google page is quite limited! Luckily, I found some excellent code posted by Benjamin Pearson. Thanks to Benjamin for posting this code, it helped immensely in trying to solve the problem! I thought I'd post my code, too, in order to get more information out there on the topic. Here's what my basic class looked like:

1:  class AddPhotos(blobstore_handlers.BlobstoreUploadHandler, GenericHandler):
2:    def get(self):
3:      uploadUrl = blobstore.create_upload_url('/addPhotos')  
4:      self.template_values['uploadUrl']=uploadUrl
5:      self.setTemplate('templates/addPhotos.html')
6:
7:    def post(self):
8:      upload_files = self.get_uploads()  
9:      blob_info = upload_files[0]  
10:      blob_key = blob_info.key()  
11:      photo = main.Photo(image=db.Blob(self.getImage(maxImageDimension, maxImageDimension, blob_key)), 
12:               dateAdded=datetime.today(),
13:               dateModified=datetime.today(),
14:               thumb=db.Blob(self.getImage(maxThumbWidthDimension, maxThumbHeightDimension, blob_key))
15:               )
16:      photo.put()
17:      blobstore.get(blob_key).delete() #delete image after use  
18:      self.redirect('/')
19:
20:    def getImage(self, maxWidthDimension, maxHeightDimension, blob_key):
21:      img = images.Image(blob_key=str(blob_key))   
22:      img.resize(width=maxWidthDimension, height=maxHeightDimension)
23:      image = img.execute_transforms(output_encoding=images.PNG) 
24:      return image

First, a disclaimer about the code: this is the most basic form of my code. I didn't include error checking, among other things. I only wanted to cover the basics, since even the basics can be tricky.

That being said, I want to point out the important pieces of the code (in bold). At line 1, I made my class a subclass of BlobstoreUploadHandler, and not the typical request handler. This is required when uploading to the blobstore.

Next, I created an upload URL, passing it a path (line 3). App engine redirects to a post call on the path that you pass. This path should be in your call to the WSGIApplication constructor:

1:  application = webapp.WSGIApplication([
2:                       #Main Page
3:                       ('/', handlers.MainHandler),
4:                  
5:                       #Add photos
6:                       ('/addPhotos', handlers.AddPhotos),  
7:                       ],
8:                       debug=True)
9:  util.run_wsgi_app(application)

In my case, app engine redirects a post call on /addPhotos, which is handled by the AddPhotos class.

Now we have to handle the post and retrieve the blobstore upload. Behind the scenes, Google App engine uploads the file to the blobstore, and allows us to get access to the blob via the key. This is done in lines 8-10. First, the uploaded files are retrieved by calling self.get_uploads(). Next the blob_info is obtained for the first file uploaded. Finally, the key is retrieved. (Note: this could probably be done in one line!)

The key gives access to the image data. In line 21, you can see that a new Image object is created by passing the blob key to the constructor. The image object can be used to resize or transform the uploaded photo using any of the Image functions. After performing the transformations, make sure to execute the transformations by calling execute_transformations() on the Image.

Once the image has been altered, you can save the image to the database as a blob (line 11). Pass the result of the execute_transformations() call to the db.Blob constructor and, as long as your image is now less than 1MB in size, you can save this blob to the datastore!

Finally, delete the blobstore object, since there is no need for it anymore (line 17).

One thing I should mention before I end: you need a billing account with Google before you can use the Blobstore in production (locally it will work fine). However, as long as your blobstore data usage is small, you won't get charged.

Good luck!