---
# System prepended metadata

title: 實驗用網站

---

# 實驗用網站
## 目的
* 免去大量研究參與者帶來的冗長文書作業
* 圖形話研究數據
* 簡化管理參與者的流程
## 要求
* 清楚列出各個階段的參與者，與其中需要特別追蹤的參與者
* 可以透過頁面一覽使用者提供的資料，包含匯款資訊、通知上傳情況
* 可以透過頁面寄出郵件，例如邀請信件、婉拒信件、實驗進度提醒信件
## 部屬環境
### Firebase Hosting
* 用於部屬打包好的網頁
* 同時會Reforward http request到Firebase Function
* 只是因為只有在美國的節點才有完整服務，導致延遲較高
### Firebase Function
* 用於實作網站用的Restful Api、每日通知數量統計、寄信給參與者、與在資料庫CRUD時自動統計功能
* 可透過多種方法觸發，例如：RTDB的CRUD、http request
### Firebase RTDB
* 用於儲存參與者資料、手機通知與填寫的問卷
* 透過Firebase SDK可以即時更新頁面資訊，不用重新載入
* 可以免去自己架設伺服器的風險與麻煩
* 可以透過Firebase Function來在資料庫CRUD時觸發特定Function
	* 例如替問卷進行數量與種類統計
### Firebase Authentication
* 用於管理後台登入
* 免除了session的實作與註冊功能的實作
### Firebase 排外條件
* 排外條件是指我在工作時會特別針對某些工具記住的點，也就是該工具不擅長得部分，這讓我之後比較不會不小心犯相關的錯誤。
* Firebase目前較大的問題是debug不容易，有時候cloud function運作的環境和本地會有差異，就會出現意料之外的bug
* 對延遲有高度要求的話則要好好思考怎麼用，因為firebase某些服務指在美國節點可用，在台灣就會有較高的延遲。如果在台灣可用，就不會有太大的問題。
* RTDB的頁面搜尋功能相較mongodb比較不好，需要注意能不能符合需求
## 參與者網頁
### Access
https://notiaboutness.muilab.org/
### 參與者基本條件驗證
* 確保所有內容都有正確填寫
* ![](https://i.imgur.com/RKvNNWt.png)
### Email驗證
* 透過nodemailer可以寄出email驗證信
* ![](https://i.imgur.com/195Z2rA.png)
### 引導參與者進行研究流程
### 圖片上傳
* ![](https://i.imgur.com/ycBZQue.png)
* 用來上傳報酬支付用的郵局存摺照片
## 研究團隊用後台
### 數據一覽頁面
* 這些數字會根據情況變成警告色或危險色
* 透過此頁面可以快速掌握整體情形
![](https://i.imgur.com/E3vkzty.png)
### Access
https://panel.notiaboutness.muilab.org/
* 帳號為名片上的信箱
* 密碼為名片上的分機號碼
### 登入與登出
![](https://i.imgur.com/NqoWSYl.png)
* 利用Firebase Authenticate 做的簡單登入
### 各階段參與者一覽
* 列出所有參與者與基本資訊
	* ![](https://i.imgur.com/4LFf9Kz.png)
	* ![](https://i.imgur.com/cxDCNHM.png)
### 統計數據
* 每小時通知數量
	* ![](https://i.imgur.com/SQHvrTg.png)
	* 因為找不到套件，只好自己實作的每小時通知數量圖
* 每日通知數量線圖與每日問卷數量線圖
	* 利用recharts實作的線圖
	* ![](https://i.imgur.com/sWDPvAI.png)

### 問題點追蹤
![](https://i.imgur.com/50OwRZz.png)
* 點擊上方統計數據可以點亮目前進度有問題的參與者
