# week19 hw ### 專案目標 以實際的作品運用現代框架與工具，呈現計畫中所學的成果 ### 產品名稱 Z-axis ### 產品簡介 Z-axis，為您的演說帶來無限的可能。 在虛擬的網路世界中，Z-axis 將連結您(代表 x)與觀眾(代表 y)的即時多人互動，三方串連打造更加自由、更加立體的互動空間。 Z-axis 提供即時匿名留言、按讚投票、抽籤問答、測驗互動、問卷調查...等多項豐富演說的功能，透過即時數據，分析所有活動參與者的想法，以利整場演說延伸出更多互動地可能。 ### 產品目標說明 提供演說者： - 更加直覺、簡潔的使用介面。 - 多樣化的互動功能，例：按讚投票、抽籤問答、測驗互動、問卷調查。 - 後台數據分析功能，了解活動參與者的想法、答題狀況等。 提供參與者： - 進行「匿名」活動參與，包含留言、投票、答題、抽獎等。 - 透過匿名，更加勇於表達意見、想法與提問。 ### 產品需求描述 #### 前台 - 註冊 - google - email - 登入 - google - email - 頁面 - Q&A 頁面 - 使用者：置頂問題、隨機抽問題、註記回答過的問題 - 參與者：提問、按讚、按讚數量、參與者提問的問題、Q&A 數量 - 測驗頁面 - 使用者：測驗狀態、排名總表 - 參與者：倒數計時、答題、答題狀況、PR 值 - 抽獎頁面 - 使用者：抽獎 - 參與者：中獎名單 - 顯示標題/簡介 - 隱藏標題/簡介 - 切換主題 #### 後台 - 建立 - Q&A - 標題、簡介、開始時間、結束時間 - 測驗 - 名稱、簡介、題目 - 抽獎 - 名稱、簡介、獎品資訊 - 已建立活動列表 - 已發佈：查看、刪除、查詢關鍵字 - Q&A：名稱、簡介、提問數量、提問內容、連結 - 測驗：名稱、簡介、題目、排名、落點分析 - 抽獎：名稱、簡介、獎品資訊、中獎人名單 - 未發佈：查看、刪除、查詢關鍵字、編輯 - 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 身為一個使用者，我希望可以透過後台，「點選」複製連結，讓我可以分享給觀眾 - P2 身為一個使用者，我希望可以透過後台，「建立」QRcode - P2 身為一個使用者，我希望可以透過後台，「下載」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)、PR 值 - P4 身為一個參與者，我希望可以在測驗結束後，可以顯示測驗被隨機分配到的暱稱(動物名稱) ### 抽獎： ( 使用者 - 抽獎發佈：新增、輸入、發佈、取消 ) - P3 身為一個使用者，我希望可以點選建立抽獎按鈕 - P3 身為一個使用者，我希望可以透過輸入抽獎活動名稱、抽獎活動簡介、抽獎品項、獎品數量、獎品規格，以建立抽獎 - P3 身為一個使用者，我希望可以在我輸入完輸入框後，可以點選發佈按鈕，成功建立抽獎 - P3 身為一個使用者，我希望可以在我忘記輸入欄位時，跳出警示訊息，以便提醒我 - P3 身為一個使用者，我希望可以點選新增抽獎按鈕後，也可以點選取消按鈕，以取消我正在輸入或開啟的建立畫面 --- ( 使用者 - 進入抽獎介面：功能 ) - P3 身為一個使用者，我希望可以點選立即抽獎按鈕，可以依據我的獎品數量，抽出參與者抽獎代號 - P3 身為一個使用者，我希望可以在抽出參與者抽獎代號後，於畫面上顯示 --- ( 參與者 - 進入抽獎介面：功能 ) - P3 身為一個參與者，我希望可以輸入姓名、email 後，系統會隨機產生一個參與者抽獎代號，讓我對獎 - P3 身為一個參與者，我希望在抽出參與者抽獎代號後，可以所有中獎的抽獎代號，將顯示於畫面上 ### 問卷： - P3 身為一個使用者，我希望可以點選建立線上問卷按鈕，連結到 google 表單 ### 開發工具 - wireframe - figma - 前端 - sass - React - 後端 - Server: express - DB: sequelize - 部署 : heroku - 其他 - webpack - [Asana](https://asana.com/zh-tw/pricing) ### 風格 - 未來科技、遊戲感 ### 產品心智圖 - [連結](https://gitmind.com/app/doc/3583140425)