二、[練習]Todo List 設計

1. 課程進行方式

會教 Front-End、Database、BackEnd，但不練習的話，會忘記。因此會用實做 Todo List 來練習

什麼是 Todolist？就是待辦事項。

要完成這個產品，需要注意介面、邏輯，以及資料方面。然後需要完成以下部份：

• UI (Front-End)

• API (Back-End)

• 串接 (Front-End --- Backend)

2. 功能與介面設計

todo list

• UI (Front-End)

• API (Back-End)

• 串接 (Front-End --- Backend)

before Front-End

在進行前端之前，我們要想一下這個 app 會長怎樣。來進行個思考練習，回應這幾個問題：

我的思考練習

• 有什麼 features?

  • CRUD，新增、修改、刪除、查詢

  • 拖曳選項，重新排序

  • 標籤

  • 日期、時間

  • 提醒

  • 優先度

  • 蕃茄鐘

• user 會怎麼使用?

  • 先新增要做的事情

  • 做完事情刪掉 TODO

老師的建議

• 有什麼 features?

  • CRUD: Create, Read, Update, Delete

  • 排序

  • 完成

• user 會怎麼使用?

  • 繪製 UI

  • 模擬使用方式

  • 找靈感

碎碎唸

• 使用者的體驗很重要R

• 邊想邊刻很燒腦R，先有草稿比較好

畫 UI

可以參考 Todo MVC 這個網站

• TodoMVC：選擇 MVC 網頁開發架構（Framework）的好工具 - G. T. Wang

Taker 的版本，真的滿簡單的 XD

我自己的版本

• UI (醜報惹)

g49oQad.png (1080×1680)

• 功能 (怕列太多做不出來 XD)

  • CRUD

  • 完成選項

  • 排序

  • 自適應