# PUI 期末報告

## 死線
* 5/12 小組媒合完畢
* 5/21 上傳 proposal
* 6/4 上傳 slide 跟 1 分鐘 demo 影片至討論區
* 6/5 presentation
* 6/9 Final report 截止

## 規範
* 人數：2~3人
* 題目：不限。以下是一些可能可作為題目的提案：
1. 建立類似 Wix 的界面構建工具 (interface builder) 工具，讓使用者能夠放置控件並設置其屬性。
* 這類似於作業二中的圖形編輯器，但調色板包含按鈕、滑塊、文本框和其他 html 輸入元素。
* 使用者可以選擇「運行模式」和「構建模式」。在運行模式中，使用者可以查看控件運作方式；在構建模式中，則可以拖曳、擺放不同控件。
* 你也可以提供有趣的方式來指定控件的佈局 (layout)，例如使用 css 屬性而不是僅在固定位置。

2. 建立原型設計工具，例如 Figma、Balsamiq、Axure 或 Adobe XD。此工具與界面構建工具相似，但不使用任何實際控件，僅支援頁面切換行為。

3. 使用類似 Google DialogFlow 的工具建立語音、對話或聊天機器人系統。

4. 使作業中的圖形編輯器更加完整，具有真正的編輯器需要的功能，例如保存和加載、圖像、更改物件大小、置頂或置底、對齊、分組等。
5. 提供手勢識別庫，方便介面設計者在介面上新增手勢操作功能。例如：
* J.O. Wobbrock, AD Wilson, Y Li. "Gestures without libraries, toolkits or training: a $1 recognizer for user interface prototypes", In UIST '07, p. 159-168. [ACM DL Ref](https://dl.acm.org/doi/10.1145/1294211.1294238)
6. 實現 Stephen Oney 的高級輸入處理程式，使得前端工程師可以更容易使用滑動和其他高級手勢，如本文所述：
* Stephen Oney, Rebecca Krosnick, Joel Brandt, Brad Myers. "Implementing Multi-Touch Gestures with Touch Groups and Cross Events," Proceedings SIGCHI '2019: Human Factors in Computing Systems. Glaskow, UK. May 4-9, 2019. [ACM DL](https://dl.acm.org/doi/10.1145/3290605.3300585) or [local pdf](http://www.cs.cmu.edu/~NatProg/papers/paper355-Oney-CHI2019.pdf). (Best Paper Honorable Mention Award.)
7. 實作如 3/27 課程簡報 Input-Output-2 中所提及之 Amulet 交互器 (interactors)。
8. 以 Topaz 系統的風格，在作業 5 中添加選擇性撤消、選擇性重複和腳本（選擇性重複一系列操作）：
* Brad A. Myers. "Scripting Graphical Applications by Demonstration," Proceedings CHI'98: Human Factors in Computing Systems. Los Angeles, CA, April 18-23, 1998. pp. 534-541. [ACM DL Reference](https://dl.acm.org/doi/10.1145/274644.274716) and [local pdf](http://www.cs.cmu.edu/~amulet/papers/commandsbydemo-p534-myers.pdf) and [video](https://www.cs.cmu.edu/~amulet/videos/Topaz.mp4). (Topaz)
9. 實作狀態轉換圖編輯器 (state transition diagram editor) 和 / 或解釋器 (interpreter)。例如，當使用者畫一張圖，然後進入運行模式時，他可以執行指定的事件，確保事件引起正確的狀態轉換，並透過物件的強調顯示使用了哪些狀態和轉換。
10. 任何自行設計的網頁應用程式，並且需要較為精細的使用者介面。

## 評分標準

* 組內互評 (10%)

* 填寫表單給除自己以外的組員評貢獻分數：0 ~ 10 分
* 自己所獲得的平均貢獻分數即為最終分數

* 組間互評 (10%)
* 依照每組獲得的組間互評分數排序後，以最低 5 分最高 10 分等差給分
* 報告 (Report) 分數 (50%)
* Proposal　(10%)
* Final report (40%)
* 期末發表 (Presentation) 分數 (30%)

## 成果繳交細節
### 組別媒合
* <font color="#f00">**截止日期：2023/05/12 下午 23:59 (UTC+8)**</font>
* 找好組員者請填寫[分組表單](https://forms.gle/QHxjDTe5Ciqm2TmK9)
* 媒合方式：
* 助教將於 NTU COOL 討論區開媒合專區，想尋找組員者可於下方留言
* 留言格式：
* 姓名、學號
* 想做的題目
* 聯絡方式
* 截止時沒有組別的學生將由助教隨機分組

### 專題一頁 Proposal 繳交規範
* <font color="#f00">**截止日期：2023/05/21 下午 23:59 (UTC+8) 繳交至 NTU COOL**</font>
* <font color="#f00">**每一組僅需繳交一份**</font>
* **格式**：標楷體 or Times New Roman 12 號字，單行間距， 1 頁， pdf
* **Proposal 內容**：
* **標題**：
* 格式：網站名稱：長標題
* 網站名稱：請簡短並須具與主題相關之意義
* 長標題：一個簡短的句子，敘述你們正在做的內容
* **組員名單**
* **專題題目內容**：
* 請對你們進行的題目進行全面的解釋，包含打算實作那些功能、可能的目標使用者及粗略解釋你們打算如何實作。
* **使用平台 / 語言 / 框架**：
* 你們正在使用的平台，包括使用的語言和框架（例如，你們會使用純 JavaScript、React.JS 或其他）；此外，也需說明你們是從你們的作業、開源項目還是從頭開始開發的；同時，也請列出你將使用的工具（例如，D3、DialogFlow、VoiceFlow等）及插件，例如 React 函式庫，或其他從 npm 中獲得的東西。
* **分工方式**：
* 請提到你們如何將工作分配給小組成員（誰會負責哪部分）
* **參考資料**：
* 如果你們正在建立一個現有研究論文的基礎上，或正在製作與其他商業系統相似的東西，請提供一些參考文獻，以顯示你對相似或相關的其他研究有所了解。
* 如果你正在現有系統的基礎上建立，這些內容可以放在上面的「使用平台」主題中。

### Presentation 繳交
* <font color="#f00">**截止日期：2023/06/04 下午 23:59 (UTC+8) 上傳至 NTU COOL討論區**</font>
* 請各組別開啟一個以你們的 **Proposal 網站名稱** 為主題標題的討論文章（除非於 proposal 後發生必須大幅改變主題的情況），並上傳下列文件/連結：
* 你們的投影片　（pdf 或/與 連結）
* 投影片內容請看[下一段](#Presentation詳細內容)
* 實作網站URL （如果有的話）
* 簡短示範影片( Youtube link )
* 時間請在 30 秒~ 1 分鐘左右
* 請在示範影片內大約展示你們實作的主要功能，供同學了解你們實作的網站/工具的目標與大約如何運作。
* 其他組的同學可於討論區下方留言提問，每提問 1 題加 1 分，最多 5 分
* 提問需在 2023/06/07 下午 23:59 (UTC+8) 前提出
* 各組**必須**於 Final report 繳交前回答討論區下方 6/7 前提出的提問（1 題沒回答扣 1 分）

### Presentation詳細內容
* <font color="#f00">**時間：2023/06/05 上課時間**</font>
* 所有組別都將在同一天報告，請同學在報告前先將各組上傳的一分短片先看完
* 每一組的報告應包含**8 ~ 10分鐘**的報告時間與**4分鐘**的QA時間
* 請控制好報告時間並確保你們有時間 demo
* 助教會於8分鐘及10分鐘時提醒
* 報告內容須包含但不僅限以下項目：
* 標題
* 成員
* 簡介：
* 實作功能
* 目標用戶
* 相關研究 / 競品
* 使用平台 / 語言 / 框架：
* 與 proposal 相同
* 使用方法：
* 提供幾張畫面截圖，簡單描述如何使用你們的網站/工具
* 技術架構 / 實作方法：
* 簡單描述你的網頁架構及所使用的演算法等。
* 例如：假設你有使用後端的話，那你們將什麼資料儲存在哪？
* 現場演示或網頁操作影片：
* 請預留時間現場展示你們的成果，並盡可能展示所有的功能。
* 若是你們認為現場演示沒辦法完整呈現你們的內容(譬如工具需要花費一定的時間處理任務)，你們也可以採用影片與後製的方式(不得造假)，但請確保影片能在報告時間能播放完畢，且影片內容應該要完整、清楚且包含旁白說明。
* 不允許延後報告
* 組別內所有成員於報告當日都應出席
* 若當天現場 QA 時間有提問，請填寫[ QA 表單 ](https://forms.gle/4UXv1kpJUUbeixxr9)加分，加分包含在討論區提問加分內（與 NTU COOL QA 合併總加分為 5 分）
* 表單內容：
* 學號、姓名
* 提問組別
* 提問問題
* 回答
* 當天請填寫[組間互評表單](https://forms.gle/TZiRonf9xvGGkJNh7)，評分各組專題的實作結果，並提供一些改進的意見。
* 表單內容：
* 給該組的分數
* 給該組的文字建議與回饋

### 書面報告內容
* <font color="#f00">**截止日期：2023/06/09 下午 23:59 (UTC+8) 繳交至 NTU COOL**</font>
* <font color="#f00">**每一組僅需繳交一份**</font>
* **格式**：標楷體 or Times New Roman 12 號字，單行間距， 5 ~ 10 頁， pdf
* 報告內容須包含但不僅限以下項目：
* **標題與作者**：
* 請維持同樣的網站名稱（除非於 proposal 後發生必須大幅改變主題的情況）。
* 你們的長標題可以與 proposal 不同。
* **Github連結及網站URL**：
* 請將所使用的程式碼全部上傳到 Github 上並提供我們可使用的連結。
* 若你們有將網站架設在網路上，也請提供給我們連結。
* <font color="#f00">**這應該要放在你們報告的開頭**</font>。
* **範例影片連結**：
* 請錄製一部影片(可以與你們在報告時使用的是同一部)，完整展示你們的系統如何運作。
* 影片中應包含旁白說明畫面內容，並上傳至youtube。
* <font color="#f00">**這應該要放在你們報告的開頭**</font>。
* **簡介**：
* 簡短描述你們做了什麼，並特別指出你們的專題有沒有什麼創新及有趣之處。
* **相關研究 / 競品分析**：
* 請介紹與你們的專題有關的研究，或是現今市場內已經存在類似的系統。
* 稍微討論其與你們的專題有何相同/不同之處，並適當的引用方便我們了解你們參考的資料。
* **安裝指南(須包含使用平台 / 語言 / 框架)**：
* 請具體說明：
* 從你們的 Github 下載程式碼後，我們需要做什麼才能使你們的專題運作？
* 是否需要下載其他函式庫或工具？
* 是否有要求放置所有檔案的位置？
* 提示：我們強烈建議你們向不在你們團隊中的人提供你們的說明，以測試是否一切正常，並確保你們沒有漏掉任何細節。如果第一次無法正常運行，我們將扣除分數！
* **詳細使用說明 / 文件 (包含截圖)**：
* 請配合截圖詳細說明你們的系統中的每個元件，以確保使用者能夠完整理解每個部份要如何使用。
* 同上，我們建議你們在繳交前提供給不在你們團隊中的人測試，以確保你們包含了每個項目。
* **設計原理**：
* 請詳細說明：
* 為何你們最後選擇當前的使用者介面設計？
* 你們在此之前嘗試了什麼以及該設計為何運作不良？
* 你們在初始設計到最後做了那些改動？
* 被否決的設計：如果你嘗試過某些事情或者有早期的設計但是被放棄了，或者你改變了想法，請描述這些設計以及為什麼決定不使用它們。
* 提示：你們可以在一開始討論時粗略繪製你們的使用者介面原型( prototype )與流程圖( workflow )，並與最後的介面與流程圖做對比。你們也可以保留你們腦力激盪( brainstorming )時所產生的想法，並解釋最後選擇那些設計的理由。
* **技術架構 / 實作方法**
* 請解釋你們的系統背後是如何運作的，例如：
* 你們使用了什麼演算法？
* 系統架構如何運用使用的工具與函式庫？
* 實作過程中遇到的任何困難/障礙。
* **討論 / 未來展望**
* 你們的系統有什麼優點？
* 你們的系統當前有哪些缺陷？
* 你們沒有完成哪些內容？
* 如果有人繼續開發系統，你們想像系統最後會如何？
* 在進行項目時有什麼你們沒有時間探索的新想法？
* **參考資料**
* 遲交原則：與作業同。請勿遲交。
* 繳交完畢後，請所有組員填寫[組內互評表單](https://forms.gle/HjKCJG73tMbtw3Lt9)，說明組內的分工情形。
* 表單內容：
* 組員姓名
* 貢獻分數
* 組內分工

## Final report 助教評分標準
* 題目創意與實用性 (10%)
* UI/UX (美感評分) (10%)
* 技術難度 (50%)
* 課程教學內容之應用
* 是否包含後端、資料庫、部屬
* 額外使用的工具或方法
* 完成度 (30%)