8/11 蓋期末專案地基之功能幻想篇

# 8/11 蓋期末專案地基之功能幻想篇 ### 專案目標以實際的作品運用現代框架與工具，呈現計畫中所學的成果 ### 產品名稱 Z-axis ### 產品簡介 Z-axis，為您的演說帶來無限的可能。在虛擬的網路世界中，Z-axis 將連結您(代表 x)與觀眾(代表 y)的即時多人互動，三方串連打造更加自由、更加立體的互動空間。 Z-axis 提供即時匿名留言、按讚投票、抽籤問答、測驗互動、問卷調查...等多項豐富演說的功能，透過即時數據，分析所有活動參與者的想法，以利整場演說延伸出更多互動地可能。 ### 產品目標說明提供演說者： - 更加直覺、簡潔的使用介面。 - 多樣化的互動功能，例：按讚投票、抽籤問答、測驗互動、問卷調查。 - 後台數據分析功能，了解活動參與者的想法、答題狀況等。提供參與者： - 進行「匿名」活動參與，包含留言、投票、答題、抽獎等。 - 透過匿名，更加勇於表達意見、想法與提問。 ### 產品需求描述 #### 前台 - 註冊 - google - email - 登入 - google - email - 頁面 - Q&A 頁面 - 管理員：置頂問題、隨機抽問題、註記回答過的問題 - 參與者：提問、按讚、按讚數量、參與者提問的問題、Q&A 數量 - 測驗頁面 - 管理員：測驗狀態、排名總表 - 參與者：倒數計時、答題、答題狀況、PR 值 - 抽獎頁面 - 管理員：抽獎 - 參與者：中獎名單 - 顯示標題/簡介 - 隱藏標題/簡介 - 切換主題 #### 後台 - 建立 - Q&A - 標題、簡介、開始時間、結束時間 - 測驗 - 名稱、簡介、題目 - 抽獎 - 名稱、簡介、獎品資訊 - 已建立活動列表 - 已發佈：查看、刪除、查詢關鍵字 - Q&A：名稱、簡介、提問數量、提問內容、連結 - 測驗：名稱、簡介、題目、排名、落點分析 - (落點分析：總參與人數按下開始測驗，完成人數時間內交卷，排名，排名折線圖 x題數 y答對人數) - 抽獎：名稱、簡介、獎品資訊、中獎人名單 - 未發佈：查看、刪除、查詢關鍵字、編輯 - Q&A：名稱、簡介、連結 - 測驗：名稱、簡介、題目 - 抽獎：名稱、簡介、獎品資訊 ### 產品架構流程圖 - 產品功能模塊的集合 - （待） ## 功能篇 ### role - 「管理員」: 活動的發起者，可以回答 Q&A 與參與者互動 - 「參與者」: 可以提出 Q&A 給管理員回答 ### 系統更新公告 - P2 身為一個管理員，我希望可以在後台看到，官方的系統更新公告 ### 註冊功能 ( 管理員 - 綁 Google 或輸入信箱/密碼 ) - P0 身為一個管理員，我希望可以透過 Google 帳號註冊 - P0 身為一個管理員，我希望可以透過輸入 email、密碼，來註冊管理員 - P1 身為一個管理員，我希望可以註冊成功後，網頁自動轉向後台 - P1 身為一個管理員，我希望可以在我忘記輸入欄位時，跳出警示訊息，以便提醒我 - P1 身為一個管理員，我希望可以在我重複註冊時，跳出警示訊息，以便提醒我 - P1 身為一個管理員，我希望可以在我輸入密碼未包含英文及數字時，跳出警示訊息，以便提醒我 --- - P3 身為一個管理員，我希望可以透過 email 驗證，來確認非機器人 ### 登入功能 - P0 身為一個管理員，我希望可以透過 Google 帳號登入 - P0 身為一個管理員，我希望可以透過輸入 email、密碼登入 - P1 身為一個管理員，我希望可以登入成功後，網頁自動轉向後台 - P1 身為一個管理員，我希望可以在我忘記輸入欄位時，跳出警示訊息，以便提醒我 - P1 身為一個管理員，我希望可以在我輸入錯誤 email 或密碼時，跳出警示訊息，以便提醒我 ### 使用者後台： - P1 身為一個管理員，我希望可以透過後台，「查看」我發過的每項活動標題、簡介、開始時間、結束時間 - P1 身為一個管理員，我希望可以透過後台，「刪除」我發過的每項活動標題、簡介、開始時間、結束時間 - P1 身為一個管理員，我希望可以透過後台，「編輯」我尚未發出去的活動標題、簡介、開始時間、結束時間 - P2 身為一個管理員，我希望可以透過後台，「搜尋」標題的關鍵字，以查詢我發過某項活動 - P2 身為一個管理員，我希望可以透過後台，「查看」我發過的每項活動，觀眾提問數量 - P2 身為一個管理員，我希望可以透過後台，「查看」我發過的每項活動，觀眾提問內容 - P2 身為一個管理員，我希望可以透過後台，「查看」我發過的活動總數 --- - P1 身為一個管理員，我希望可以透過後台，「點選」進入活動頁面 - P1 身為一個管理員，我希望可以透過後台，「點選」複製連結，讓我可以分享給觀眾 --- - P3 身為一個管理員，我希望可以透過後台，「建立」QRcode - P3 身為一個管理員，我希望可以透過後台，「下載」QRcode 圖片 --- - P1 身為一個管理員，我希望可以從管理員後台，點選新增 Q&A 活動按鈕 - P3 身為一個管理員，我希望可以從管理員後台，點選建立測驗按鈕 - P3 身為一個管理員，我希望可以點選建立抽獎按鈕 --- - P4 身為一個管理員，我希望可以從線上系統直接回答聽眾的問題(管理員回覆評論功能) ### Q&A ( 管理員 - Q&A 發佈：新增、輸入、發佈、取消 ) - P1 身為一個管理員，我希望可以從管理員後台，點選新增 Q&A 活動按鈕 - P1 身為一個管理員，我希望可以透過輸入活動標題、活動簡介、選擇開始時間、結束時間，以建立活動 - P1 身為一個管理員，我希望可以選擇時間長短，決定最短當天到最長 7 天的匿名留言時間限制 - P1 身為一個管理員，我希望可以在我輸入完輸入框後，可以點選發佈按鈕，成功發佈活動 - P1 身為一個管理員，我希望可以在我忘記輸入欄位時，跳出警示訊息，以便提醒我 - P1 身為一個管理員，我希望可以點選新增活動按鈕後，也可以點選取消按鈕，以取消我正在輸入或開啟的建立畫面 - *開始時間、結束時間設定要查一下 --- ( 管理員 - 進入 Q&A 介面：功能 ) - P2 身為一個管理員，我希望可以透過左側欄來「查看」目前的活動標題及簡介 - P2 身為一個管理員，我希望可以透過左側欄來「隱藏」目前的活動標題及簡介 - P2 身為一個管理員，我希望可以透過問題列，將某一則問題置頂 - P2 身為一個管理員，我希望可以透過「點選」問題上的已解決按鈕，將已回答的問題「顯示」在 Resolved 處 - P2 身為一個管理員，我希望可以透過「點選」問題上的已解決按鈕，將已回答的問題「消失」在 Popular / Recent --- ( 管理員 - 進入 Q&A 介面：抽問題 ) - P3 身為一個管理員，我希望可以透過左側欄，來點選隨機抽籤問題按鈕 - P3 身為一個管理員，我希望可以透過左側欄，在點選隨機抽籤之後，隨機抽出我尚未回答的問題(已按讚數加權抽出來) - P3 身為一個管理員，我希望可以透過左側欄，在點選隨機抽籤之後，抽出其中一則問題，並顯示在置頂的下一則 - P3 身為一個管理員，我希望可以透過左側欄，在點選隨機抽籤之後，抽出其中一則問題，若沒有置頂問題，則置頂 --- ( 參與者 - 進入 Q&A 介面：功能 ) - P1 身為一個參與者，我希望不需要註冊，就可以匿名提出問題，或一起輸入暱稱及問題 - P1 身為一個參與者，我希望可以即時看到每個人的問題 --- - P2 身為一個參與者，我希望可以對有興趣的問題按讚 - P2 身為一個參與者，我希望可以看到某問題的按讚數量 - P2 身為一個參與者，我希望可以透過左側欄來「查看」目前的活動標題及簡介 - P2 身為一個參與者，我希望可以透過左側欄來「隱藏」目前的活動標題及簡介 - P2 身為一個參與者，我希望可以點選 My Question，看到我發表過的問題 - P2 身為一個參與者，我希望可以看到 Q&A 裡面，問題的總數 - P2 身為一個參與者，我希望可以切換顯示評論：Popular / Recent / Resolve --- - P4 身為一個參與者，我希望切換佈景主題 - P4 身為一個參與者，我希望可以透過網址，隨時進入活動頁面，查看管理員的回答 ### 測驗： ( 管理員 - 測驗發佈：新增、輸入、發佈、取消 ) - P3 身為一個管理員，我希望可以從管理員後台，點選建立測驗按鈕 - P3 身為一個管理員，我希望可以透過輸入測驗標題、測驗簡介、選擇開始時間、結束時間、勾選設置起始倒數時間(30秒或1分鐘)、設置問題、正確答案、其他選項，以建立測驗 - P3 身為一個管理員，我希望可以在我輸入完輸入框後，可以點選發佈按鈕，成功發佈測驗 - P3 身為一個管理員，我希望可以在我忘記輸入欄位時，跳出警示訊息，以便提醒我 - P3 身為一個管理員，我希望可以點選新增測驗按鈕後，也可以點選取消按鈕，以取消我正在輸入或開啟的建立畫面 --- ( 管理員 - 進入測驗介面：功能 ) - P3 身為一個管理員，我希望可以查看目前的測驗狀態，尚未開始/測驗中/測驗結束 - P3 身為一個管理員，我希望可以在測驗結束後，顯示參與者的落點分析(table or 圓餅圖 or 長條圖....) - P3 身為一個管理員，我希望可以在測驗結束後，查看參與者的答題排名總表(包含參與者 id 與答題狀況，相同成績以最早繳卷排序) --- ( 參與者 - 進入測驗介面：功能 ) - P3 身為一個參與者，我希望測驗的起始倒數時間可以顯示於畫面上，讓我有心理準備，時間一到立即顯示問題 - P3 身為一個參與者，我希望可以在測驗結束的倒數10秒前，畫面上顯示倒數計時，時間到會引爆炸彈(+炸彈聲音)，系統會強制交卷 - P3 身為一個參與者，我希望可以在測驗結束後，可以顯示自己的測驗 id與答題狀況(例如：5/10, 2/10, 7/10) - P4 身為一個參與者，我希望可以在測驗結束後，可以顯示測驗被隨機分配到的暱稱(動物名稱) ### 抽獎： ( 管理員 - 抽獎發佈：新增、輸入、發佈、取消 ) - P4 身為一個管理員，我希望可以點選建立抽獎按鈕 - P4 身為一個管理員，我希望可以透過輸入抽獎活動名稱、抽獎活動簡介、抽獎品項、獎品數量、獎品規格，以建立抽獎 - P4 身為一個管理員，我希望可以在我輸入完輸入框後，可以點選發佈按鈕，成功建立抽獎 - P4 身為一個管理員，我希望可以在我忘記輸入欄位時，跳出警示訊息，以便提醒我 - P4 身為一個管理員，我希望可以點選新增抽獎按鈕後，也可以點選取消按鈕，以取消我正在輸入或開啟的建立畫面 --- ( 管理員 - 進入抽獎介面：功能 ) - P4 身為一個管理員，我希望可以點選立即抽獎按鈕，可以依據我的獎品數量，抽出參與者抽獎代號 - P4 身為一個管理員，我希望可以在抽出參與者抽獎代號後，於畫面上顯示 --- ( 參與者 - 進入抽獎介面：功能 ) - P4 身為一個參與者，我希望可以輸入姓名、email 後，系統會隨機產生一個參與者抽獎代號，讓我對獎 - P4 身為一個參與者，我希望在抽出參與者抽獎代號後，可以所有中獎的抽獎代號，將顯示於畫面上 ### 問卷： - P4 身為一個管理員，我希望可以點選建立線上問卷按鈕，連結到 google 表單 ### 開發工具 - wireframe - figma - gitmind - 前端 - styled components - React(框架) - 後端 - Server: express(後端)、socket.io(即時) - DB: MySQL - 部署 : heroku(考慮一下冷啟動問題) or 遠端伺服器 - 其他 - webpack - [Asana](https://asana.com/zh-tw/pricing) ### 風格 - 未來科技、遊戲感 ### 連結 - [Asana](https://app.asana.com/0/1200807050490054/board) - [gitmind](https://gitmind.com/app/doc/ffb3586974a18d41808ad3225bd1b7c7) - [figma](https://www.figma.com/files/team/1009302895883855323/Z-axis?fuid=1009302891056958970) - [socket.io 參考影片1](https://creativecoding.in/2020/03/25/%E7%94%A8-socket-io-%E5%81%9A%E4%B8%80%E5%80%8B%E5%8D%B3%E6%99%82%E8%81%8A%E5%A4%A9%E5%AE%A4%E5%90%A7%EF%BC%81%EF%BC%88%E7%9B%B4%E6%92%AD%E7%AD%86%E8%A8%98%EF%BC%89/) - [socket.io 參考影片2](https://www.youtube.com/watch?v=1BfCnjr_Vjg&ab_channel=Fireship) ### 分支命名規範 ![](https://i.imgur.com/u2lMbCv.png) ref:https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/454533/ Branch: - dev - dev-path ### sequelize db cli 安 ```javascript= // user npx sequelize-cli model:generate --name User --attributes nickname:string(32),email:string,password:string,userToken:string npx sequelize-cli model:generate --name User --attributes nickname:string,email:string,password:string,userToken:string // issue npx sequelize-cli model:generate --name Issue --attributes title:string,description:text,beginTime:date,finishTime:date,userId:integer // issue_guest_comment npx sequelize-cli model:generate --name Issue_Guest_Comment --attributes nickname:string(32),content:text,likesNum:integer,isResolved:boolean,reply:text,replyCreateAt:date,issueId:integer,guestToken:string npx sequelize-cli model:generate --name Issue_Guest_Comment --attributes nickname:string,content:text,likesNum:integer,isResolved:boolean,reply:text,replyCreateAt:date,issueId:integer,guestToken:string // guest npx sequelize-cli model:generate --name Guest --attributes guestToken:string ``` npx sequelize-cli init npx sequelize-cli db:migrate ## 討論紀錄 #### 8/04 Wed - Angelina, Carol, Benben 組隊成功 --- #### 8/11 Wed 20:00-21:00 - User Story #### 8/12 Thu 17:00-18:00 - User Story - Didi 加入 #### 8/13 Fri 11:00-12:00 - User Story #### 8/15 Sun - Carol 退出 --- ### week19 #### 8/16 Mon 11:00-12:30 - 開發工具 - 專案名稱：Z-axis - 專案管理工具：Asana - 回家作業：找喜歡的 UI - 明天討論：wireframe #### 8/17 Tue 11:00-12:30 倒數 54 天 - 討論 UI 方向 - Figma 簡易操作 - 產品簡介(2.1) - （Ｘ）Asana 使用 - （Ｘ）User Story 優化 #### 8/18 Wed 11:00-12:30 倒數 53 天 - 研究 Asana - 優化 User Story(2.3) - 產品簡介(2.1) - 產品功能架構規劃 [Function Map](https://gitmind.com/app/doc/ffb3586974a18d41808ad3225bd1b7c7) - 問題：發佈Q&A後-> 管理員新增抽獎/測驗 -> 產生額外url -> 參與者更新介面(還是會自動更新) -> 顯示按鈕(還是顯示跳出顯示資訊？) -> 連結到抽獎/測驗頁面 -> 有回到Q&A按鈕 -> 回到Q&A前，跳提醒？會消失什麼內容嗎，尚未交卷，離開會消失之類的？，還是產生額外url -> 需要管理員自己想辦法分享給參與者 -> 以上指的是都有用到的功能 - 解決：提供 url、qrcode 給管理員，管理員自行運用 #### 8/19 Thu 11:00-13:15 倒數 52 天 - 繳交 [week19 homework](https://github.com/Lidemy/mentor-program-5th-angelina524/pull/21) - 產品功能架構規劃 [Function Map](https://gitmind.com/app/doc/ffb3586974a18d41808ad3225bd1b7c7) #### 8/20 Fri 11:00-12:30 倒數 51 天 - 檢討 week19 homework - 使用者流程 - UI 設計通用尺寸查詢 https://medium.com/uxabc/artboard-size-5f0d457f7b32 #### 8/21 Sat 11:00-13:30 倒數 50 天 - 構思介面位置 figma #### 8/22 Sun 倒數 49 天 - figma 後台, 關於我, Q&A 介面 --- ### week20 後端 #### 8/23 Mon 11:00-12:30 倒數 48 天 - figma Q&A, 登入, 註冊介面完成 #### 8/24 Tue 11:00-12:00 倒數 47 天 - 資料庫欄位：https://drawsql.app/ #### 8/25 Wed 11:00-12:00 倒數 46 天 - 資料庫欄位：https://drawsql.app/ #### 8/26 Thu 11:00-12:00 倒數 45 天 - 中獎人如何兌獎 - 資料庫欄位 #### 8/27 Fri 11:00-12:00 倒數 44 天 - 規劃 API：URL Path Documentation #### 8/28 Sat 11:00-12:00 倒數 43 天 - 規劃 API：URL Path Documentation #### 8/29 Sun 倒數 42 天 --- ### week21 #### 8/30 Mon 11:00-12:00 倒數 41 天 - 後端分配 - 架基本的插件、環境=> didi - users => 安潔 - issue => ben #### 8/31 Tue 11:00-12:00 倒數 40 天 - 確認 github 權限 - 後端開發 - Didi 完成環境建置 - 安潔完成 user path #### 9/01 Wed 11:00-12:00 倒數 39 天 - 資料庫欄位屬性整理 - 開 model 指令 #### 9/02 Thu 11:00-12:00 倒數 38 天 - 開票/分票 - 後端開發 #### 9/03 Fri 11:00-12:30 倒數 37 天 - 後端開發 - 需要檢查 Datatypes - Allen 加入 #### 9/04 Sat 11:00-12:30 倒數 36 天 Didi 主持 - 後端開發 #### 9/05 Sun 倒數 35 天 Ben 主持 - 後端開發 - 使用者流程 - 產品功能架構規劃 Function Map [參考菜菜](https://hackmd.io/@GXGttDHLSu6-nPfTaqugEw/rJaiwo7hP) --- ### week22 #### 9/06 Mon 11:00-12:00 Allen 主持 #### 9/07 Tue 11:00-12:00 安潔主持 #### 9/08 Wed 11:00-12:00 #### 9/09 Thu 11:00-12:00 #### 9/10 Fri 11:00-12:00 #### 9/11 Sat 11:00-12:00 #### 9/12 Sun --- ### week23 #### 9/13 Mon 11:00-12:00 #### 9/14 Tue 11:00-12:00 #### 9/15 Wed 11:00-12:00 #### 9/16 Thu 11:00-12:00 #### 9/17 Fri 11:00-12:00 #### 9/18 Sat 11:00-12:00 #### 9/19 Sun --- ### week24 #### 9/20 Mon 11:00-12:00 #### 9/21 Tue 11:00-12:00 #### 9/22 Wed 11:00-12:00 #### 9/23 Thu 11:00-12:00 #### 9/24 Fri 11:00-12:00 #### 9/25 Sat 11:00-12:00 #### 9/26 Sun --- ### week25 #### 9/27 Mon 11:00-12:00 #### 9/28 Tue 11:00-12:00 #### 9/29 Wed 11:00-12:00 #### 9/30 Thu 11:00-12:00 #### 10/01 Fri 11:00-12:00 #### 10/02 Sat 11:00-12:00 #### 10/03 Sun --- ### week26