Sunday, October 14, 2012

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 /pinlists 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=jsonreturns a json representation of all the pins this user own.
POST /pincreates a new pin, as before
GET /pin/123shows 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/123updates pin 123 (caption or url), or deletes it, as before.
GET /boardlists 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 /boardCreates a new board and then redirects the user to it.
GET /board/123If 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/123Update 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

No comments:

Post a Comment