<aside> ❗ Copyright and Ownership Notice

關於這個 notion page 以及其包含的所有 pages （以下統稱「本 page」），其著作權與所有權是屬於台大電機系黃鐘揚教授以及其所開設的網路服務程式設計課程之所有助教 (以下統稱「作者們」) 所擁有。

基於推廣技術與服務大眾之精神，本 page 採取 MIT 授權，即任何人皆可因任何目的使用、複製、修改、發布、與再散佈本 page，包括商業用途。不需簽署協議，也不需支付授權費，惟任何的使用與散佈必須包含本著作權與所有權聲明。如有違反本著作權與所有權聲明，本 page 之作者們仍保有相關的法律追朔權利。詳細關於 MIT 授權的規範請見 OSI 官網。

本 page 之內容以「現狀」提供 (provided "as-is")，不附帶任何保證。對於本 page 之內容如有任何疑問或是建議，請來信 [email protected].

The copyright and ownership of this Notion page and all pages it contains (hereinafter referred to as "this page") belongs to Professor Chung-Yang Huang of Department of Electrical Engineering, National Taiwan University, and all teaching assistants of this Web Programming course that he teaches.

In the spirit of promoting technology and serving the public, this page adopts the MIT License, meaning anyone can use, copy, modify, publish, and redistribute this page for any purpose, including commercial use. No agreement needs to be signed, and no licensing fee needs to be paid, provided that any distribution must include this copyright and ownership notice. In case of violation of this copyright and ownership notice, the authors of this page still retain the relevant legal right to take retroactive action. For detailed regulations regarding the MIT License, please see the OSI official website.

The content of this page is provided "as-is", without any warranty. If you have any questions or suggestions regarding the content of this page, please email [email protected].

</aside>

<aside> 🌐 Web Programming Home

</aside>

截止時間

• Submission Deadline：9pm, Mon, 2025/10/13
• Review Deadline：9pm, Mon, 2023/10/20

題目說明

• 本次作業是希望你練習從一個 data source (i.e. one more multiple spreadsheet(s)) 以及使用 AI coding tool (i.e. Cursor) 來打造一個純前端的網路服務。
• 題目可以自訂，但整個服務應該要有 “項目瀏覽”，“選取至某個容器 (到購物車、行事曆等)”，”送出記錄” 等階段。
• 在「項目瀏覽」方面，你的設計可以是分類瀏覽、關鍵字/條件搜尋… 檔，總之，請從服務設計的角度出發，設計出一個可以讓使用者輕鬆找到自己想要的項目。
  • 每個項目在展示時應該要提供足夠、有幫助、但也不要過多的資訊說明，以利使用者做決定
  • 如有需要，可以在項目上加上一些互動，以利使用者瀏覽更詳細的資訊，甚至做比較
• 在「選取至某個容器」方面，請從從服務設計的角度出發，設計一個讓使用者方便理解、做決定的 UI/UX (e.g. 選課系統的課表, 電商系統的購物車, 等)
  • 與下一步 “送出記錄” 的區別是，在這一步像是在 git 裡頭的 “staging”, 也就是說，使用者還在 shop around, 這個容器應該要讓他無負擔的可以隨時增減、修改
  • 歡迎做出一些有利於使用者作出決定的設計
• 在「送出記錄」方面，表示使用者已經做好決定，正式把它送出。Again, 請從服務設計的角度思考，定義出這個步驟與上一個步驟的差別，例如：選課系統裡頭的確定選課、電商系統的送出訂單等。
  • 記錄一但送出，如果使用者如要修改，請你依照你想像中的服務邏輯，either 是不可以修改，或者是要走過一個跟上述課表/購物車不一樣的流程，已表示這個送出記錄不同的意義
  • 在一個完整的服務，這個步驟應該是要把記錄送到伺服器，存在使用者的個人資料裡頭。但我們這次還是純前端的 app, 所以你還是可以使用一個 component/state 存這個記錄就好
  • 因為是純前端，所以你也不用做到最後的金流、會員系統等。請自行設計一個合理的 ending 即可
• 這個服務不需要有 “使用者 ID” 或者是 “登入” 的設計
• 當然，你的服務的最佳設計很可能不一定符合 “項目瀏覽”，“選取至某個容器 (到購物車、行事曆等)”，”送出記錄” 等三個階段，所以這邊可以有彈性，但我們期待你的設計是以讓使用者覺得容易理解資訊、做出選擇為原則。
• 如果你想要做一個 台大的選課服務 app，我們提供了以前 (100 學年度下學期) 全校的課表供你參考，可以從這裡下載 (NTU COOL)。
• 如果你想做其他的服務，例如：購物網站、dating app 等，而如果你沒有合理合法的 data source, 你可以請 AI (e.g. in Cursor) 幫你生成。無論如何，請不要直接拿上課示範的 restaurant-app 的 dish-data.csv 來使用 (i.e. 即使你還是想要做一個點餐系統，請自行產生別的 spreadsheet)。

基本要求

• 除了上述題目說明的要求/規定事項之外，請達成底下基本。
• 程式語言除了必要的 HTML, CSS 之外，動態網頁的部分規定使用 React.ts (i.e. TypeScript 版本的 React)，而不是 pure JavaScript or React.js。
• UI 的部分請使用現成的框架 (i.e. 不要只是使用 pure CSS)，你可以選擇課堂上有教過的 MaterialUI, Ant Design, Shadcn, TailwindCSS (with cn), 或者是任何你喜歡的框架。
• Spreadsheet 原始應為一個或者是多個 .csv 檔案，存放在 hw3/src/public/data 底下。你的服務應該要做到當使用者編輯/更改 .csv 檔案，更新到你的 repo 以後，你的服務應該會自動更新 (either hot reload, or restart app)，不需要改動其他的程式碼