HW8: JSON & Dynamic Board Editing

For this homework you will add a responsive user interface to your boards and you will provide both your pin and board data in json format.

Lets start with the server side. You will have the following methods (the json methods are new):

GET /	when logged-in, shows links to "My Pins" (/pin) and "My Boards" (/board)
GET /pin	lists all the users' pins and links us to each one, as before. Also, this page should let the user add a new pin.
GET /pin?fmt=json	returns a json representation of all the pins this user own.
POST /pin	creates a new pin, as before
GET /pin/123	shows pin 123, and a form for editing it, as before.
GET /pin/123.json GET /pin/123?fmt=json	returns pin 123 in json format.
POST /pin/123	updates pin 123 (caption or url), or deletes it, as before.
GET /board	lists all my boards. If not logged in re-direct to /, and do similarly for all the other URLs. Also, this page should let the user add a new board.
POST /board	Creates a new board and then redirects the user to it.
GET /board/123	If my board then list all the pins in the board and a form for editing it. If not mine but public then list the pins in the board. If not mine and private then re-direct to /
GET /board/123.json GET /board/123?fmt=json	If my board then return the board in json format
POST /board/123	Update board 123's information. The possible changes are: new title, add pin, delete pin, mark as private/public, delete board. Then redirect the user back to GET /board/123

On the client side you will implement a board editor that works as shown in the video below. Basically, each pin not in the board is shown with an 'add' button. When the user clicks on it the pin is added to the board. Note that the adding of the pin to the board has to happen in the client. That is, all the adding and removing must be done without reloading the page, ever. It is all done via XHR requests.

The way you will implement the board is by delivering to the client an empty board (no pins) with some javascript that immediately does a GET back to the board to get the board and its pins in json format, and another one to get all of the user's pins, in json format. Your javascript code then puts all these pins in the appropriate places in the page. After that it sets up the appropriate event handlers so that when the user clicks 'add' or 'remove' the pins are first moved in the page (javascript) and then an XHR request is sent to the server to tell it about the change.

Finally, you must handle server errors by undoing the last change. That is, if the user adds a pin, the pin immediately moves, but if the XHR requests fails (error:) then your code will move the pin back and display a message to the user about it. You can easily test this by changing your POSTs to return 500.

Required Reading

The main new thing is JSON, which is just the JavaScript object literal notation. But, since you will also be using it Python, you will want to use the Python json library.

Make sure you publish to appspot and push to github by the deadline of Monday, October 22 @9am