Homework 3

Due Date: Sunday May 13, 11pm

CrowdGrader Link: https://www.crowdgrader.org/crowdgrader/venues/view_venue/3804

The Assignment

In this assignment, you have to produce a web site that behaves exactly as the message board developed in homework 2, except that it has to be implemented using vue.js. As a reminder:

• Memos can be public or private.
• Logged-in users can create memos.
• Non logged-in users can see the list of all public memos.
• Logged-in users see the list of all public memos, and of all of their own private memos.
• Every memo displays three buttons: Public/private, Delete, Edit. The buttons are disabled if the user is not logged in, or if the memo belongs to another user.
• The public/private button toggles the public/private status of a memo.
• The delete button deletes a memo.
• The edit button enables the user to edit a memo in place. That is, what is the displayed text of the memo must change to the text in an editable input area (a textarea, precisely) Below such input area, there should be a "Save" button, which lets the user save the edit, and a "Cancel" button, which terminates the editing leaving the memo unchanged.
• You should display 10 memos at a time, with a button Get More at the bottom to get more. Look at the code for the music player to implement this.
• The web page you develop should be a single-page app: the page should never be reloaded (except for the login sequence, for which you will rely on web2py as usual).

Strategy

• My suggestion is to start from the vue branch of the repository (see https://bitbucket.org/luca_de_alfaro/web2py_start_2016/branch/vue), you can check it out with the command git checkout vue. The branch contains a clean starting point for a vue-based implementation.
• Then, copy into tables.py the same database tables you had for hw2 (it might be useful for you to have two copies of the start repository available: one in which you develop your own solution, and another one that you use for looking up code that is useful to you. Call one "start" and the other "start-reference", for instance).
• Then, build the vue scaffolding code for displaying the list of memos. Every memo will be a div. The div will contain:
  • A div for the memo text.
  • A div for the textarea for editing the memo. You can switch between showing the div above, and the textarea, on the basis of a boolean is_being_edited variable associated with each memo.
  • The buttons to Save and Cancel an edit, shown only if the memo is being edited.
  • The buttons to Delete, Edit, and Public/Private a memo, which are shown only if the memo is not being edited.
• Above this should also be some space where to enter a new memo. Look at how we implemented this in the music player; you can use the same idea we used to add new music tracks.
• Once a bit of this scaffolding is done, you can start to write the vue.js code in default_index.js, and the python code in default/api.py. Start with the code that reads the memos, so that you can have something to look at. Then, implement the features one by one, remembering to do frequent git commits in your own repository so that you can rescue your work in case of trouble.
• I have not done this homework, but I believe you will need at least the following API endpoints in default/api.py:
  • get_memos, to read the memos.
  • delete_memo, to delete a memo
  • edit_memo, to give back to the server the new content of a memo that has been edited
  • toggle_visibility, to toggle the public/private visibility of a memo
  • add_memo, to add a new memo.
• Remember to sign all the URLs.
• Remember to check, on the server, that all operations are legal: if a user edits a memo, the memo belongs to the user, etc etc. Don't trust that calls only come from your correct javascript; they could be forged.

How to submit

Please follow these instructions exactly. If you worked with more than one start application (one to develop in, the other to use as reference), please be sure and check two or three times that submit the correct one!

Run web2py from the shell rather than from pycharm, doing python

web2py.py -e

(I cannot seem to be able to login in the admin console when starting web2py from pycharm), and go to the Admin app in web2py. You can do that by visiting the URL /admin/default/index , or you can do that by going to the welcome app at /welcome/default/index and clicking on the Admin button at the bottom. You have to enter the password you used when starting web2py. You will see a screen similar to the one below, and you have to select "pack all" for the start application:

This will create a file called web2py.app.start.w2p, which you have to download, and then upload to the CrowdGrader assignment.