Homework 3: TODO Manager with Expressjs

[ Due: 5/2 Fri. ]

將作業二的TODO app結合Express.js，做成如Trello般可跨電腦使用的Web App，讓你的小組員們可以一起共用本App來記錄待辦事項。本次作業請使用RESTful架構來設計你的API Endpoints。

詳細的要求 (DOs)

1. 請參考作業二所有要求
2. 對於Server Side而言，必須要開放這些功能：「新增TODO」、「刪除 TODO」、「把 TODO 標成『已完成』」及「拿到所有TODO」四個功能。
3. 「拿到所有TODO」：當瀏覽器重新整理時，必須要能夠恢復上次的TODO List。並且Server關掉重開也不影響此結果。
4. 請使用File System API將TODO list轉成JSON後存在一個檔案。
5. Endpoints描述如下：

1. GET /items ：取得所有TODO items
2. POST /items ：新增一個TODO item
3. PUT /items/:id ：更新一個TODO item（如把item標示為完成狀態）
4. PUT /items/:id/reposition/:new_position ：把該TODO item的位置移動到new position代表的index位置
5. DELETE /items/:id ：刪除一個TODO item

限制 (DONT’s)

1. 請不要用工具壓縮自己的 javascript 檔，評分時會檢查。
2. 請不要使用資料庫儲存資料。

其他

1. 這份作業外觀上是手機版 web app，只是為了讓大家專注於功能，不需要去煩心額外的樣式與架構。因此，成品只要在桌面版 Google Chrome 能作用就可以了，不用考慮跨瀏覽器，也不用考慮手機。
2. 評分時的使用流程：

1. 於Terminal開啓Express Server，預設跑在localhost:5000
2. 新增三個 TODO（例：依序輸入「A」「B」「C」三個 TODO，此時上到下應為「C」「B」「A」。）
3. 用拖曳的方式將 TODO 順序顛倒（完成後為「A」「B」「C」）
4. 將中間的 TODO 標為完成（完成後為「A」「C」「B」）
5. 將最上面的 TODO 標為完成（完成後為「C」「A」「B」或「C」「B」「A」）
6. 任意刪除兩個 item。
7. 重新整理頁面，todo 應該為原來的樣子。
8. 在Terminal關掉重開Express Server，重新整理頁面，todo仍不變。
9. 用記事本開啟儲存TODO list的JSON檔案，必須可開啟且格式正確符合JSON要求。

3. 原則上，按照上面流程操作時沒有任何錯誤，即可拿到滿分。
4. 然而，我們希望在操作程式時，不要有明顯的錯誤。例如說，將 TODO 被拉到「完成」之後，在「完成」裡面出現那個 TODO 屬於明顯的錯誤：「完成」和「刪除」裡面常理來說不應該有任何的 TODO。不過，拖曳時各個 TODO 的顏色，隨興為之即可 XDrz。

提示

• 使用jQuery $.ajax函式取得所有TODO list，與用它來新增、更新、刪除TODO item。
• 可以使用 jQuery::index 來取得item在list中的位置
• 使用Express app.VERB的方式來切出不同API的位置，讓新增、修改、刪除語列表可以對應到不同的處理函式。
• 注意路徑 /items/:id 其中id代表的意義
• 可以使用JSON array來儲存TODO list
• 使用Express static middleware來負責送JavaScript檔案與CSS檔案給瀏覽器。
• HTML檔案並不限制使用純靜態檔案（直接用static middleware送給瀏覽器）或是用ejs產生。