Web Programming

CSC 210, Spring 2011

(Monday and Wednesdays, 2:00-3:15pm in CSB 209)

Submit At my.rochester.edu

Assignment #4

In this assignment, you'll expand on the Google App Engine project that we started in workshop to create a web service that lets you upload an image, resize and rotate it based on user parameters, and then email it to an email address of your choice. The assignment mostly walks you through the process of creating this functionality, and so a big part of the assignment will be installing the Google App framework, figuring out how to release your application, and doing a small amount of additional coding to make it work. The code you need to write isn't all that much, but it may be challenging and frustrating, as adapting to a new web-based framework often is - leave yourself plenty of time, solutions often come after periods of rest & reflection!

Contact for the Assignment

Your contact for this assignment is Anna Loparev. Please direct questions about this assignment to Anna (see the Contact Page) because he will best know what's going on. You can also always contact Jeff, who may end up forwarding your question to Anna.

Setting Up the Google App Engine Environment

First, get Eclipse.

Next, download and install the App Engine SDK & Eclipse Plugin.

If you are unable to install the App Engine packages due to missing dependences, go to Window->Preferences, select Install/Update->Available Software Sites, click add, and enter location http://download.eclipse.org/releases/RELEASE_NAME, where RELEASE_NAME is probably Ganymede or Galileo. Then try to install the Google App Engine SDK again.

To create your project, go to File->New->Web Application Project in Eclipse. Make sure you uncheck the "GWT" option!
uncheck the GWT option when creating your app

When you're done, the directory structure should look something like the following:
simple directory structure of your app
In this example, "CSC_210_DemonstrationServlet.java" is your servlet file, and the "index.html" file is your HTML file. If you're directory structure is more complicated than this, then you likely did not uncheck "Use Google Web Toolkit" above and should start over.

Getting Your App Up on AppSpot

Register at appspot.com.

Create a new application, and then deploy it by clicking the little engine icon.

The first time you run it, you'll have to associate it with the application you just created and type in your password. Even without adding any code of your own (or copying the code from class in), your app will say "Hello, World" to you. Your name is "World," right?

Enable the Image Upload

Copy and paste both the Servlet Code and the HTML Form into the appropriate places in your project. The servlet code should go in the only .java file in your src directory (it's down a couple of levels), and the .html file in your WAR directory. Again, now you know at least one thing that war is good for.

To enable uploading files, you'll need to include the fileupload package from Apache Commons. You'll place the commons-fileupload-1.2.2.jar file in the war/WEB-INF/lib/ directory of your project. Next, add the new .jar file to the Java build path. To do this, first right the Name of your project in the Package Explorer -> click the Build Path -> Configure Build Path. Next, click the "Add JARs" button and navigate to your project, the lib directory, and then the new jar file that you added.

Enable Resizing and Rotating the Image

In addition to resizing the image like we did in class, consult the Images Java API to figure out how to rotate the image. Add a new selection box to allow the user to choose how many degrees to rotate the image. The Image API only rotates images in multiples of 90 degrees, so you should use form validation techniques to make sure that users provide you with either 0, 90, 180, 270 or 360. If the input isn't one of these values, return an error.

Email the Photo To A Specified Email

The code from class has be edited to include code that will email the image to a specified recipient. Instructions on the Mail Java API describe how this works. Change the form to ask if the user would like to receive a copy of the transformed image in their email - add a checkbox to let users indicate this - and then change the Java code to only send the email if they want it. Add another input box for the user to say which email they would like the image sent to. The subject of the email should be "your transformed image" and the body of the email should be the following:


Hi Netizen,

Your transformed image is attached to this email.

Thanks,
The Internets

You don't want your app to be open to spam just any old person, so use form validation to make sure that the application only emails the following 4 people: you, Jeff and Anna.

NOTE: Email may only work once you've deployed your app to appspot.com

What to turn in

As usual, you'll need to include a README at the base URL that you provide us. This can be done on the same page as your form, or on another page.

For this assignment, turn in the URL of your appspot application, and also the source file(s) that you used for your assignment. At a minimum this should be your Java servlet file, the form file, and your README (which can be combined with your form).

Extra Credit

As usual, there are a number of awesomely challenging extra credit options to choose from:

  • The Google App Engine Java Image API includes a number of different transformation options - add another one (besides resize and rotation).
  • Images don't look that great when the aspect ratio of the image is changed - change the validation parameters so that if the user inputs a single dimension (height or width) the other dimension is computed automatically to match. For example, if an image is sized 100x200 pixels, and the user inputs 50 for the width, then your program should automatically figure out that its height should be 100 pixels.
  • Google App Engine lets you email your app - make it so people can send an email with an image attachment, specify the parameters they want in the body of the message, and receive an email back with the result. Hint: you'll want to define some sort of simple grammar for specifying parameters in the free text of the email message - regular expressions can be useful for parsing out the parameters.
  • Rewrite your app in Python and deploy it to appspot.com under a different project name.

Props

This document's contents are (C) Copyright 2009
Jeffrey P. Bigham / Kyle Liddell and licensed under Creative Commons Attribution 2.5 License.

Please email Jeffrey P. Bigham at jbigham@cs.rochester.edu with questions.

Valid XHTML 1.0 Transitional Valid CSS!