Monday, January 31, 2011

HW2 Grades are Out

I have just emailed everyone their grades for HW2. If you did not get it, let me know.

On Wed. I will go over a solution. I might post someone's solution here if there is enough demand from you. Please keep in mind that you have to keep with these as they will all build on each other. Even if you got it right, you should refactor your code before starting on HW3.

HTML Lecture Slides

Here are the slides I used for today's presentation, and here is the templates tutorial.

HW3: HTML and Templates

In this homework you will flesh out and organize the HTML generated by your app using templates. Specifically you will implement the following features.

  1. The app will use a base template which contains the overall layout of the site. The layout must include parts for the
    1. login-bar (that bar at the top that shows your username and lets you logout, if you are logged in, or lets you log in if you are not),
    2. the title (logo),
    3. the body,
    4. and a footer.
    You can add other sections if you want.
  2. Create a new page, /user, which provides a list of all users (their names) that have created accounts in the site. This template must use the template's for loop.
  3. Change the app to make it impossible for a user to change his name to a name that has spaces or other non-url friendly characters.
  4. Make it so the page /user/<username> takes us to a page that shows us the user's name. In a later homework, you will write code to show the user's questions in this page.

The homework is due on Monday, February 7 @11am, you can turn it in here.

Required Reading

UPDATE: See my 'comments' below.

Saturday, January 29, 2011

App Engine Help

Like any other big software library, the app engine has a large online community of users where you can post your questions about specific issues, or search the mailing list to see if someone already had the same problem you are having. Someone almost always has had and solved every problem I have had. Failing that, there is also stackoverflow.

Wednesday, January 26, 2011

Moving to your Own Domain

I did not mention in class that once you deploy your app in the appengine you can easily buy your own domain name and have it point to your app. If you have already taken our computer networks class then you would already know this since you know all about DNS (the Domain Name System which maps domain names like to IP numbers, which are fixed).

Anyway, there are already many business running on the app engine. This list has a few case studies, which are already about a year old.

No Friday Lectures

There will be no lecture this or any subsequent Friday, unless otherwise noted. Instead, I will be in my office ready to answer all questions you might have about the imminent homework, on top of my regular office hours. We will start the Friday challenge rounds soon.

Also, here is the code from today's class.

Tuesday, January 25, 2011

From Database Rows to Objects: The db.Model

On Wednesday I will be introducing the app engine datastore. You use the datastore via the db.Model. This Model is an implementation of an Object Relational Mapping (ORM) which is code that maps a database table to a Class in an object-oriented language. Most modern webapp frameworks implement an ORM: Rails uses ActiveRecord, Java Servlets use Hibernate, Django uses Models, etc., and they all operate in very similar ways.

Below is a video describing the design of the Google datastore and how to use it. The resolution is rather low so I recommend you follow by reading the slides from the talk.

Monday, January 24, 2011

Configuring Eclipse for the App Engine

Checkout this step by step tutorial on installing app engine support on eclipse, after you install the app engine. Note that you have to install PyDev. The "Installing Pydev for Eclipse" section works for win/mac/linux. The "starting your first project" section will be different on a mac/linux.

On the mac, when you try to create a new "Pydev google app engine project" it will ask you for the google_appengine directory. This directory is buried under so eclipse can't see it. What I ended up doing was going to the terminal and typing (this creates a symbolic link on the filesystem) :

ln -s /Users/jmvidal/Desktop/ google_appengine
then telling eclipse that the app engine directory is at /Users/jmvidal/google_appengine.

Finally, while you are installing eclipse plugins, you will also want to install the eclipse web tools platform (WTP) which you can do via Help->install new software and then using this repository (it might already be under your "Available Software Sites" link, depending on which version of Eclipse you installed). WTP provides eclipse with fancy editors for HTML, CSS, and JavaScript, which you will need in a couple of weeks.

myPoll webapp: A Roadmap

Most of the homeworks in this class are small steps that will result in the development of a web app for online polling and quizes. I got the idea for this app from an article I read about the iClicker device. The iclickers are handheld remotes that are handed out to students in a large lecture so the teacher can quickly poll the whole class and see a nice bar chart of the result. That is, they function just like the "ask the audience" lifeline in Who wants to be a millionaire?

Since most students have, or will soon have, a web browser with them at all times (iphone, ipad, android, netbook, etc.), we can do the same thing the iclicker does, and more, with just a little bit of software. Software that you will be writing. Below are the basic use cases I am thinking about.

Class Poll

A user logs in to the webapp and creates a multiple-choice question. The question is saved and the user gets (or asks for) a simple url. During class he gives this url to the students. The students visit it and see the question, answer it, and then see a pretty bar chart summarizing the answers. The teacher also sees the bar chart (which he might be projecting on the front of the classroom) as it gets updated with incoming answers. Note that the student did not need to log in to provide an answer. We prevent someone from answering many times by remembering their IP address (or, using a cookie?). The teacher has a nice ajaxy gui for editing his questions, he can delete options, re-order the options with drag-an-drop, inline-edit the existing options, etc.

Class Quiz

A quiz is also a multiple choice question but it has a correct answer, which the teacher tells our webapp. When a user enters his answer he is told what the correct answer is. Only someone who is logged in can see and answer a quiz question. The teacher can see a chart of all the answers as well as a table listing everyone's answer. Only the teacher can see this table.

Class Test

A test is a collection of quiz questions (with added free-form answers?). The web app will use the new html5 javascript calls so the whole test is downloaded to the user's browser and he can see it and answer questions even when offline. When the student hits submit then all answers are posted to the website.

Mobile Version

Many of the people answering the questions will be using small-screen devices. We must, therefore, provide them with a mobile-optimized version of the website.

Poll your Friends

Our user wants to do a quick poll of his friends, say, ask them about the airspeed velocity of an unladen swallow. He creates a poll question then this question is automatically posted to his facebook wall, twitter, emailed to his friends etc. The user has to first set up which services/friends he wants to poll. Future work could include multiple multicast lists (social circles).

Facebook App

Make it into yet another facebook polling app.

Other ideas...

That's all I could think of. Please feel free to provide your own ideas in the comments. This roadmap is not set in stone so, many of the details might change, perhaps in response to your input.

Friday, January 21, 2011

HW2: User Management

We now start building our webapp. The one thing that nearly all webapps need is user management. Luckily, the app engine provides us with some very nice functionality in the form of the Users API which you will use for this project. Remember that you will be building on this code throughout the semester so, keep it clean.

Your code will implement the following features:

  1. A simple homepage, at /, that welcomes a visitor and lets him log in with google (or openid) account.
  2. When a logged-in visitor goes to / he should, instead, see his email address and a 'logout' link which lets him log out, as well as an "account" link.
  3. When the user clicks on the "account" link he is taken to a page that shows his name in a textbox. The name is initially set to the part of his email before the @. From that page the user can edit his name. That is, he can change the name in the textbox and hit a "save" button (or Enter) which will change his name. You will need to use the datastore for this.
  4. Make sure that if the user logs out and logs back in again that his nickname is still the one he changed to.
  5. Make sure that a user can change only his name, and not the name of others. Users expect that much control over their names.

Required Reading

Turning it In

You will upload all your code files to by Monday, January 31 @11am. You will also publish your webapp to At the top of your main code file include a comment with your name and the full URL of your deployed app.

HW1 Graded

By now, you should have received an email with your grade for the first homework. If you didn't then email me. Now, it's Python time: always look on the bright side of life.

App Engine: Getting Started

On Monday I will be showing you how to write a simple app engine app. All the documentation for the app engine can be found here. Go there and browse around.

You will also want to get going and download and install the Google app engine SDK. You might also want to download the eclipse plugin, which I use for my own development (and you will see me using in class). In lecture I will be following the getting started tutorials.

Below is the short intro video that Google provides, to get you started.

And, this is a good video of a talk by Guido van Rossum on the App Engine. It gives a bigger picture of what it does and how it works. He gives a nice overview of all the APIs the app engine provides. We will be going over these in more detail later on in class, as we learn to use them.

Wednesday, January 19, 2011

Learning Python Videos

On Friday I will be going over Python basics in class. I highly recommend that you dig deeper by reading the recommended Python book and watching the Google's Python class videos. The first one of which is embedded below. The first 3 videos (day 1, parts 1,2,3) cover most of what you will need. Note that since the app engine does not let us read/write files you can skip that part.

You will need to install the google app engine eclipse plugin which (if I remember correctly) will also install the pydev plugin for eclipse automatically. You might also need to install python itself, if you don't already have it.

Monday, January 17, 2011

A Short History of the Web

Below is presentation I used the first day in class. There is more stuff I would like to put in there but, I don't know how to organize it so it makes sense.

Sunday, January 16, 2011

Facebook Will be Replaced by a Protocol

Friday we talked about how everyone used to be online, at AOL, until Tim created the web kept the protocols open and the whole world followed. That is, AOL was replaced by HTTP. The same thing happened a decade earlier when email was a product, sold by different vendors, each one incompatible with the others (that is, you could not send email from one to the others). Then, slowly but surely, all those companies disappeared as everyone moved to SMTP.

Right now, Facebook is in the same position AOL was 20 years ago. It has a closed system and tons of users. Inevitably, people will grow tired of the lock-in and a social-network protocol will take over (maybe, opensocial? I don't know, it seems over-complicated to me). After that, you will be able to "friend" or "follow" anyone in the Internet, regardless of which social app they use, just like you can email anyone regardless of which mail reader they use.

And, that, is just my opinion. Dvorak has similar complaints, but he is just another old curmudgeon, like me. Tim Berners-Lee is very concerned, and rightly so, that we should prefer open standards over giving all our data to one company who does not let others access it. What do you think?

Friday, January 14, 2011

Are There Jobs in Web Applications Development?

Yes, but, Why? I think because:

  1. Many of the fastest-growing technology companies (facebook, twitter, google, salesforce, and tons of other small companies) are web application companies.
  2. Old technology companies like Microsoft, IBM, SAP, and Oracle are "moving to the cloud", which means they are moving many of their applications from the desktop to the web.
  3. Many other regular companies (banks, insurance companies, etc.) are converting their old desktop-based (Visual Basic) software to web applications because of demand from their clients and employees. Others are keeping the old apps but making all the new apps as web apps.
  4. The iphone and android devices are largely used as communication devices (yelp, facebook app, evernote, etc.) that talk to a web application. Well, that, and as really expensive and really annoying to use Nintendo DSs.

One data point is stackoverflow's recent survey which showed that 40% of stackoverflow users describe themselves as Web Application Developer (question 7). That is a huge number. I think its a bit inflated due to self-selection bias (web app developers are more likely to read the blog).

HW1: HTTP and Firebug

The goal of this homework is to show that you understand how HTTP works and how to use firebug/chrome/etc. to see and understand everything that is happening as a web page loads.

First, install firebug in or browser, or use chrome. Then use it to answer the following questions:

  1. What server is used by
  2. How many GET calls are required to show that one page?
  3. Are they using jquery? google analytics? list all the 3rd-party libraries they use.
  4. How many cookies are being used? what are their keys?
  5. What us the full path name of the facebook image (the little F) that appears at the bottom of the page?

You will turn in this homework by writing all your answers in a text file. When you are done upload it to This homework is due on Friday January 21 @ 11am. Please note that simply doing the homework is not enough to learn everything you need to know. You will also need to do the required reading (below) and play with firebug to make sure you understand what it is doing.

Required Reading

Recommended Reading

  • You can view this rather long but interesting interview with Tim Berners-Lee about his life and the early days of the web.
  • Read URL Design: a short post on how to design your URL space. You will need to know about URL design when we start building our web app in a couple of weeks.

Wednesday, January 12, 2011

Recommended Reading

Below is a set of books that cover the topics we will be covering in this class. I have read these and like them, especially Javascript: The Good Parts. You should either have a copy of each one or a similar book/website you plan to use as reference.

While programming, I like to use as a reference.