--- tags: Projects --- # 2022 CNL Covid Fighter ## 專題動機 $\;\;\;\;\;\;$近日疫情再度爆發,然而學校對於確診者寢室與足跡的公布很不透明。若室友確診,學校並不會通知,因此除非室友主動告知,否則我們可能身在高風險環境中仍豪不自知。此外,一般人通常也搞不太清楚居家隔離、居家照護等名詞,也不知道自己確診時到底該做什麼。因此,我們決定設計一個整合所有疫情資訊的平臺,讓使用者能簡單快速的提供與獲得疫情資訊。 ## 專題介紹 $\;\;\;\;\;\;$我們的專題是一個叫做「NTU Covid Fighter」的疫情整合平臺,平臺整合了快篩購買、防疫旅館等資訊。此外,透過其他使用者上傳自己的足跡與寢室,使用者也能以日期查詢臺大的確診足跡與寢室。最後,此平臺也能提醒使用者確診時或同住親友卻診等不同情況時該做什麼。 ## 專題結果呈現 ### 程式碼 [GitHub 連結](https://github.com/YungYi0202/CNL-Covid-Fighter.git) ### 資料庫 使用者的資料是由一個 `json`檔```users.json```儲存,格式如下 ``` [ { "account":"123", "password":"123", "username":"林風", "text":[], "status":"self-health monitoring", "email":"1234@ntu.edu.tw", "dormitory":"男一舍", "room":"123", "vaccine":{ "num_doses":3, "doses":["AZ","AZ","AZ"] }, "confirmed":true, "confirmed_date":"2022/05/18", "recover_date": "2022/05/25", //這個指「快篩陰」 "entrant": false, "entry_date": "", "is_contacts":false, "contact_date":"", "contact_of_contacts": false, "contact_contacts_date": "", "antigen_test": { "2022/05/18": "positive", ... }, "key":0 } ] ``` 足跡的資料是由一個`json`檔`footprint.json`儲存,格式如下,透過`userKey`去交叉比對`users.json`的資料,根據足跡主人的情況進行不同處理。 ``` [ { "date":"2022/05/29", "userKey":0, "time":"04:00-08:00", "location":"小小福", "note":"", "inCsie":false, "key":1 } ... ] ``` ### 註冊與登入 ![](https://i.imgur.com/2BxB3pu.png) 註冊時使用者需填入使用者名稱、帳號、密碼、寢室、信箱、現在打了幾劑疫苗等資訊,並且儲存在後端的```users.json```裡。登入時平臺會把所有已經儲存在後端的使用者都抓出來,過濾出帳號跟密碼都與當前使用者輸入相同的使用者。如果過濾不出任何帳號的話,就代表使用者的輸入錯誤。 ### 首頁 ![](https://i.imgur.com/6TrO7e4.png) $\;\;\;\;\;\;\;$首頁記錄所有跟使用者有關的資料。首先,右邊的按鈕「我是確診者/入境者/接觸者」可以讓使用者更改當前的身份,包含確診、入境、密切接觸者、密切接觸者的接觸者等。依據他登入的身份,平臺會把```users.json```裡那位使用者的紀錄改成```confirmed=true```, ```is_contacts=true```等等。當使用者同時有多項紀錄的時候,平臺會依據```confirmed > entrant > is_contacts > contact_of_contacts```的原則將使用者的身份顯示在網頁上,比如說如果使用者```confirmed=true```的話,平臺就會顯示「你是確診者」。 $\;\;\;\;\;\;\;$因為目前快篩已經是是否確診的重要標準,平臺也有「我要紀錄快篩」的功能,點擊之後就可以紀錄與日期對應的快篩結果,平臺會將快篩結果儲存在```users.json```裡的```antigen_test```一欄。首頁中使用```React```的```useEffect```功能觀察```user```的變化,當```antigen_test```被更改時,網頁會重新呈現快篩時間軸,還有更新使用者身份(比如說快篩陽性的話,使用者就會被更新為確診者)。 $\;\;\;\;\;\;\;$在記錄使用者身份的時候,平臺會一起記錄日期。計算今天日期與記錄日期的時間差就可以知道現在應該要做什麼事,比如說確診7日內是居家照護、7-14日是自主健康管例。平臺會將應該要做什麼寫在「今天是 OOOO 的日子」。 $\;\;\;\;\;\;\;$最後,在網頁下方有個相關指示欄位,這個欄位會根據使用者的身份變動。每一個身份應該要做什麼可以參考最新政策一欄,首頁中會依據```confirmed > entrant > is_contacts > contact_of_contacts```的原則顯示。 ### 會員中心 #### 我的防疫日記 ![](https://i.imgur.com/kdjVCwn.png) 根據使用者紀錄的資訊,包括確診者、入境者、接觸者等,透過`antd`的 `calendar` 元件在月歷中標示如自主防疫、居家檢疫等以提醒使用者得所該日子的是在哪個防疫期間,並會於特定日子標示所需採取的防疫動作,如三日得進行快篩等。 #### 我的足跡通報 ![](https://i.imgur.com/DQCmTcp.png) 使用者可以登記自己平時的足跡,包括時間、地點、樓層等資訊。當使用者登記為確診,該使用者在「我的足跡通報」中登記的足跡將全部被列為「臺大確診足跡」。 #### 我的資料設定 ![](https://i.imgur.com/psLOXmL.png) 在第一次註冊之後,使用者可能會追加打疫苗、或者是換寢室等等,此時他就可以在設定更新他的個人資料。平臺會刪除帳號密碼都與之前的資料相同的帳號,再加入新的帳號。 ### 最新政策 ![](https://i.imgur.com/XzfjPgQ.png) 使用者可以在這裡看到確診者/入境者/接觸者要做的事情以及居家隔離等狀態的解釋。 ### 臺大確診人數 ![](https://i.imgur.com/OjP5Xhu.png) 藉由爬蟲抓下臺大每天公布的確診人數,使用者可以直接在平臺上即時查看。 ### 臺大確診寢室 ![](https://i.imgur.com/xn6aMoo.png) 使用者可以以日期及天數查詢特定天數內的確診寢室、確診日期、以及該確診者是否康復。當使用者登記為確診,該使用者的寢室會被列入確診寢室,並且同寢室的所有使用者會被列為「密切接觸者」。 ### 臺大確診足跡 ![](https://i.imgur.com/jlrvoaK.png) 當使用者登記為確診,該使用者在「我的足跡通報」中登記的足跡將全部被列為「臺大確診足跡」。除了顯示特定天數內的校園確診足跡,也可設定不同的淺伏期,此頁將顯示使用者「確診前潛伏期」至「康復日」的足跡。 ### 快篩購買資訊 ![](https://i.imgur.com/EYQQHmz.jpg) 使用 HTML 的 `iframe` 內嵌框架連結到快篩購買網頁,使用者可以直接在平臺上即時查看。 ### 臺大最新資訊 ![](https://i.imgur.com/QuVzev7.png) 使用 HTML 的 `iframe` 內嵌框架連結到臺大公布最新消息的頁面,使用者可以直接在平臺上即時查看。 ### 防疫交通住宿 ![](https://i.imgur.com/Y8GAK7C.png) 使用 HTML 的 `iframe` 內嵌框架連結到相關的訂房網址,使用者可以直接在平臺上即時查看。 ## 專題總結 以下為本次專題的獨創之處: * 足跡查詢 有別於政府之前提供的個案足跡查詢,此平臺可以以日期為索引搜尋足跡,方便搜尋者,也保護個案隱私。此外,因為每個使用者介意的淺伏期長度不同,因此使用者也可以選擇不同天數。 * 確診者寢室 除了確診者的寢室可以被查詢之外,此平臺還會自動把確診者室友的身份更改為「密切接觸者」。 * 自動寄信 當使用者與確診者同寢室接觸時,不只是首頁顯示狀態改變,還會寄信通知。 ![](https://i.imgur.com/NxKEANK.png) 以下為本次專題的可以改進之處: * 資料庫的儲存方式 目前我們資料庫是使用 `jason` 存,較不適合儲存大量使用者資料,我們應找尋較適合的資料庫儲存資料,如 `sql`。 * 資訊整理 目前我們資訊整理的方式皆為人工整理,然而政府的政策時時刻刻皆在調整,因此如何有效的更新平臺資訊是我們的一大挑戰。 ## 未來展望 * Wifi 足跡提醒 我們希望未來應用 Lab 2 學到的網頁管理介面技術,使使用者連到系館 wifi 時,由網頁管理介面呈現系館各區域的足跡。 * 自動紀錄足跡 我們希望未來能像「臺灣社交距離」APP 一樣自動記錄足跡,省去使用者自主紀錄足跡的麻煩。 * 地圖資訊呈現 我們希望未來在顯示足跡時,能以地圖的方式呈現,圖像化的讓使用者確認是否足跡重疊。