CSCE 242 in the Spring 2011

This class will be offered in the Spring 2011. You can check the schedule from last time to see what we taught 2 years ago. This time, we will teach most of that, and then some. Specifically, we will go into detail on HTML5 programming and the google app engine and its database. We will also build some iphone or android web applications (NOT native apps).

This class has csce 145 as a pre-requisite but I'm willing to waive that if you already have some programming experience. You will be doing a lot of programming.

App Engine Hello Jose!

For this, our final homework, all you need to do is implement and deploy a simple google app engine application. The application needs to do two simple things:

1. When someone visits http://yourwebsite.appspot.com they should see your name.
2. When someone visits http://yourwebsite.appspot.com/bye they should see "Good bye".

Google App Engine Introduction

We will finish the class this semester by learning a little bit about the Google App Engine. The app engine is a hosting service provided by Google. You write web applications using Java or Python in your local machine and then copy them over to google for hosting. An important advantage of this method is that Google will take care of scaling up your application so that, whether you have 10 or 10 million users, you don't have to do anything differently. This is also useful if your site ever appears on one of the popular new aggregators (digg.com).

To get started you should watch the video below by Wednesday, April 15:

The read the documentation.

JSONPing Flickr

For today's exercise you will write a webpage with javascript ajax call to flickr that will retrieve the data for their currently interesting public photos and display these to the user.

You should start by examining how I did a very similar thing, but with delicious, in this slide. Then you will want to vist the flickr API, especially their REST request and response pages, and their JSON response format page (especially towards the end). You might also need to re-familiarize yourself with the jQuery ajax function, especially its dataType and jsonp options.

Finally, if you don't want to create a flickr account, you can use this key: b13a756540df31453ad014e399056af6.

REST Introduction

The next lecture is a quick overview of REST (Representation State Transfer) which is a simple way to structure APIs for your web services. Here are the slides for the REST talk. This is just a quick introduction. If you want to delve deeper into the philosophy of REST, I highly recommend you read RESTful web services. In the video I also talk about JSONP which doesn't really have anything to do with REST but it kinda fits in with the delicious examples I use.

You have to watch this video by Wednesday, April 8. Also, I remind you that there is no class on Monday, April 6.

REST from Jose Vidal on Vimeo.

Get the Gears Going

Today's exercise is to do the gears tutorial. You must show me that you have an offline-capable site by the end of class. Remember the instructions I gave for installing gears on Iceweasel on the lab machines.

Gears

Our next lecture is on gears: a plugin that, once installed, lets your JavaScript do things in the browser that it could before like saving data on the user's harddrive and running multiple threads. You will need to have watched the lecture below by Wednesday, April 1.

You will need to install the gears plugin on your firefox browswers. Since our labs use iceweasel, you will need to make a few changes before you can install gears, namely, change the icewasel to user-agent to firefox. Just follow these steps (which I got from here):

1. Point your iceweasel to “about:config”.
2. Find a key called “general.useragent.extra.firefox” and edit to “Firefox/3.0.5”
3. Then, visit http://gears.google.com again and install.

Gears from Jose Vidal on Vimeo.

You will also want to read the gears API and my gears lecture slides.

Finally, I also highly recommend that you listen to the guys who built gears talking about why they did it. They are in the following video:

GradeBook Web Application

For your next homework you will develop a grading sheet application. It will be an application that lets the user (which is the teacher of a class) enter the names and contact information for the students in the class and then assign grades for them to each of several tests. The application will calculate averages and plot grade distribution. You application will use jquery, the google visualization api and gears. This homework is due on Monday, April 13 at 10am. The specific requirements are as follows:

1. The whole application is to reside on one HTML page. All updates are to be done by JavaScript (we will not be using Ajax to back up to the server).
2. The user should be able to enter any number of students. For each student you will store:
   
   
   1. Name
   2. email
   3. An arbitrary set of other URLs (facebook page, twitter page, blog, etc.). This could be empty.
   4. The grade for each test (the class only has tests).
3. The user should be able to add any number of tests. The user will give each test a name.
4. After a test is added the user will be able to add the grade that each student received on that test.
5. Your JavaScript code will calculate and display the average grade for each test, as well as the average for each student. Assume all tests are equally weighted.
6. For each test you will also show a grade distribution graph. This is a bar chart. The x-axis is the numbers 0,5,10,..95. The y-axis are the number of students that received a grade in the range 0-5,5-10,...,95-100 for each point in the x-axis. These graphs are updated automatically as the user enters new grades.
7. You will use the gears database to store all this data locally, so when the user quits and re-starts the browser the grades that he entered before will appear again.

The interface for this application should be an editable table, like a spreadsheet, where the user can click on a cell and directly edit that cell. The photo in this post should give you an idea of how the user interface should look. The blue text describes the functionality of some of the elements in the page

You can either implement this using an HTML table, or using the google visualization Table element. I think using the google Table will be easier.

Functional Calculator

For today's exercise you will use the Google visualization API to draw a line chart that plots the line y= x*x for -10 < x < 10 . The final result should look a lot like the figure at the right. Email me your code by the end of class.

If you do finish early, change the event handler function so the popup that appears when the user clicks on one of the dots (data points) in the graph now shows both the x and the y values, as such: f(x) = x*x, 49 = 7 * 7.

SVG Exercise

For today's exercise you will re-do the clock from the canvas exercise but this time using the jQuery SVG plugin, as I demonstrate here. Note that you will need to use both jQuery and the jQuery SVG plugin. Also notice that the plugin has an animate function which might be useful to you. Check it out under the "Animations" tab.

This exercise is due at the end of class.

JavaScript on Speed

Check out Chrome Experiments to see some of the magic you can achieve with JavaScript. Hmmm, some of these look like they could be good homework assignments. My favorite is the Tetris game.

Google Ajax APIs

This week you will be learning to use the google Ajax APIs. These are a bunch of services provided by google which you can access by writing JavaScript code. First, you will visit the Google Ajax APIs homepage which links to their seven APIS. Start by looking at the visualization API which is the one we will be working with first. Click thru to their "documentation" tab and read all the documentation there.

Rather than listening to me talk about their product, I thought you might prefer to get the full story from the googlers themselves. So, for Wednesday, 25 March you should have watched the following video:

I also recommend the Google Ajax APIs playground as an excellent tool for learning how to use these APIs. Notice that it lets you change the code right there on the browser and immediately see the result of your code changes.