---
tags: course,111-1
---
# Playminton（可以如何測試網站）
原意這是一個揪團打羽球的網站，但後來發現其實可以適用所有活動的揪團。

網站傳送門：https://playmintonv1-production.up.railway.app/

使用說明如下：

## 手機版

進到網站會先看到公告頁面，要跳轉網頁的話可以點選右上角的圖示：


> 給測試者的話：在每個頁面都有做RWD，可以用手機開啟到每個頁面測試網站顯示，或是用電腦調整視窗，只要視窗寬度大於340px都可以正常顯示所有畫面。
>
> 提供幾個可以觀察RWD的地方：
> 1. Navigation Bar
> 2. Events頁面中使用者Profile的資訊排列方式（Events頁面中點擊任意參加者的名字可以看到）
> 3. Events頁面的活動排列方式

其他的操作都跟電腦版相同，那就繼續往下看吧！

## 電腦版
進到網站會先看到公告頁面：


可以點上方的Events到活動頁面查看現在有哪些活動可以參加：


不過沒有登入的話沒辦法參加活動，第一次進來的人先註冊吧！

> 給測試者的話：登入前後的畫面顯示差異
> 1. 在未登入的情況下首頁的增加公告功能不能夠使用，也不會出現刪除公告的選項
> 2. Events頁面沒辦法參加、取消參加、或編輯活動，只能查看活動。
> 3. Build Event頁面不能建立新活動，只有提示要先登入或註冊的訊息。


填寫使用者名稱、電子郵件信箱、設定好密碼後，按下Register，驗證碼就會發送到你填寫的電子郵件信箱，沒看到的話記得檢查垃圾郵件匣，都沒有的話可以再重新發送驗證碼。

> 給測試者的話：註冊時有handle的狀況
> 1. 沒有填寫姓名
> 2. 沒有填寫Email
> 3. Email不是有效信箱格式
> 4. 沒有填寫任何密碼
> 5. 兩次輸入的密碼不相符
> 6. 密碼長度未達到八位

> 給測試者的話：驗證碼的細節
> 如果按了Resend Code，要用新收到的Code才會通過驗證，舊的Code不再有效。


註冊好之後直接就會到登入頁面，輸入剛剛註冊的電子郵件信箱與密碼登入吧！

> 給測試者的話：登入有handle以下幾種狀況
> 1. 沒有填寫任何Email
> 2. Email不是有效信箱格式
> 3. 沒有填寫任何密碼

> 給測試者的話：有實做忘記密碼的功能，按下去之後會請使用者輸入信箱，確認後會送出驗證碼，有handle以下幾種狀況
> 1. 沒有填寫任何Email
> 2. 沒有填寫任何驗證碼
> 3. 沒有填寫任何密碼
> 4. 兩次輸入的密碼不相符
> 5. 密碼長度未達到八位


登入後到了活動頁面，這時候可以按 `Join` 按鈕加入活動，表示你要參加這個活動，你的使用者名稱這時候就會顯示在Participants欄位。如果反悔不想參加這個活動了，就點選 `Cancel` 取消參加活動。如果你想帶朋友來，會多佔一個名額的話，就再按一次 `Join` ，Participants欄位就會有兩個你的名字啦，沒錯，就是這麼樸實（陽）無華（春）(￣▽￣)ノ

當Number Left欄位顯示為0的時候，代表這個活動目前已經額滿了。

> 給測試者的話：活動頁面小細節
> 1. 當一個Event的 `Note === ""` 時，就不會顯示這個欄位。
> 2. 活動顯示的順序有按照先後順序排列。


想知道更多參加者的資訊，可以點參加者的名稱，就能看到對方的檔案介紹了。


現在我們還沒有頭像跟自我介紹，去Account頁面設定吧！


點選 `Upload` 選擇要使用的圖片，在裁切想要的大小之後，點 `Save` 就完成了！


在Account頁面裡還可以更新自己的使用者名稱、自我介紹、查看參加過哪些活動、還有更新密碼。

> 給測試者的話：Account頁面有handle的情況
> 1. 上傳空的頭像
> 2. 更新的名字為空
> 3. 更新的自我介紹為空
> 4. 重設密碼時
> 1. 未輸入舊密碼
> 2. 未輸入任何新密碼
> 3. 兩次輸入的新密碼不相同
> 4. 新密碼長度太短


現在回到Events頁面，再點一次自己的名字，出現的檔案就有剛剛更新完的頭像和自介了！


如果你想自己發起新的活動，就到Build Event頁面，輸入日期、開始和結束的時間、地點、開放名額數量與其他備註事項。

> 給測試者的話：建立新活動時有handle的情況如下
> 1. 未輸入地點
> 2. 未輸入可參加名額
> 3. 可參加名額少於1


按下藍色 `Build Event` 之後，就可以在Events頁面看到剛剛建立的活動了。


在Events頁面還可以點選右上方的 `Events in the past` ，查看過去的活動。左上方則有搜尋功能，可以依據日期、主辦人、地點去找出特定條件的活動。

> 給測試者的話：
> 過去活動頁面以及搜尋結果的活動顯示順序都有按照時間先後順序排列。


如果你是該活動的主辦人的話，可以點選 `Edit` 編輯活動資訊。

> 給測試者的話：編輯活動有handle以下情況
> 1. 活動資訊並未更動
> 2. 未輸入地點
> 3. 未輸入可參加名額
> 4. 可參加名額少於0


更動了活動資訊之後，去首頁公告一下吧！

> 給測試者的話：公告功能細節
> 1. 點選Add可以發布新公告
> 2. 可以刪除自己發布的公告


最後要登出的話，點右上角的登出icon。

> 給測試者的話：其他功能
> 1. cookie: 重新整理後可以維持登入狀態，目前local端測試時可以成功，deploy的網站時好時壞(成功率如下)，可以試試看。
> Safari: 0/2
> Chrome: 1/3
> Edge: 1/1
> Firefox: 1/1
> 2. 網站密碼前端有先用hash加密完才經由http傳後端，所以攔截封包或是資料庫管理員都不會看到密碼的明文。

大概就是這樣啦！使用上有遇到bug，或是有任何想回報的事情歡迎寄信到 `[e-mail]` 這個信箱！