“動物記”WebApp設計與開發分析

康媛媛，劉芝傲，陸泊霖，楊宛螢

(東北林業大學 機電工程學院，黑龍江 哈爾濱 150006)

1 研究背景

目前，在動物行為研究領域，國外在不同層次的動物行為研究上，都有比較專業的分析儀器，比如采集儀器、觀察儀器、實驗儀器，并逐步擁有智能自動一體化的各類輔助儀器和專業儀器[1]。動物行為相關文獻的研究內容和方向既廣泛又深入[1]。從宏觀上看，國內的動物行為學研究水平正處于發展階段，研究方向比較單一，大多集中在哺乳動物，對鳥類、魚類、昆蟲類研究還不夠廣泛和深入。利用紅外自動相機和其他設備協助中國動物行為研究還沒有普及，研究方法比較單一[2]。不過，當下研究者的意識正逐漸提高。我國動物行為研究正在向著與專業化的儀器相結合發展[3]。

隨著互聯網行業的蓬勃發展，信息技術在各個行業的不斷應用，各種移動工具不斷被設計開發，為人們的生活帶來很多便利。WebApp的設計在金融系統、評審系統、檢測系統[4]、教育領域等有著廣泛的應用，為人們提供便利，提高效率，減輕煩瑣工作的負擔。當下WebApp發展勢頭良好，移動端WebApp穩定性不斷提升[5]，移動端WebApp正成為移動互聯網應用的主流[6]。

“動物記”WebApp主要為從事動物行為研究的學生、老師設計。“動物記”WebApp滿足這類用戶的信息收集記錄、表格設計、共享表格的需求。它通過云端存儲處理來提高工作效率和減少表格丟失。

2 研究前期

2.1 功能需求分析

本文對動物行為記錄過程進行研究，采訪相關工作人員的工作狀態和需求，明確了WebApp的需求框架[7]。

2.1.1 表格需求分析

(1)首頁近期表格編輯快速進入。用戶進入系統后，在首頁看到按照時間順序排列的最新編輯表格，方便用戶在觀察動物行為時根據需要快速進入曾經編輯或編輯完成的表格。

(2)頁面邏輯符合動物行為使用者表格記錄的習慣，符合其填寫流程。根據用戶的調研問卷數據以及動物行為記錄專業的相關知識，本研究對取樣方式和記錄方式的不同組合按照常用頻率進行優先級排序。

(3)表格輔助功能減少繁多內容填寫。用戶點擊，自動填入表格要求填寫的日期、天氣、記錄人。

(4)表格的搜索。表格分為填寫完整的可編輯表格、未填寫完成的需要繼續增加行為譜的表格。

2.1.2 表格云庫需求分析

(1)云庫中搜索用戶需要的表格。

在云庫中，用戶可搜索確定的即將記錄動物的相關記錄表格，下載到個人表格區，方便記錄。

(2)云庫中查看表格。

用戶通過云庫中公開的表格可查看共同記錄同類動物的用戶，選擇關注同類研究用戶，促進交流。

(3)我的云庫查看與管理。

(4)用戶可以查看個人云庫中關注與被關注的用戶、專業信息、ID號。表格共享與交流在用戶個人需求下，進行增刪、更改管理。

2.1.3 用戶個人管理需求分析

本設計有新用戶注冊登錄、老用戶登錄和老用戶密碼找回功能[8]。

個人中心有以下功能：專業認證、個人表格(包括曾經做過的可編輯表格和不可編輯表格)、個人云庫管理。

2.2 性能需求分析

2.2.1 訪問量需求分析

WebApp主要用戶是動物行為學觀察記錄者，有相關專業的學生、老師和專業研究人員。WebApp的服務器和數據服務器保證應用穩定性即可[8]。

2.2.2 頁面響應需求分析

響應時間應滿足當下智能頁面的響應速度，不超過500 ms[8]。

3 “動物記”WebApp設計

頁面設計綜合用戶訪談等用戶研究工具獲得的需求，基于互聯網飛速發展下默認的行為規范[8]，通過測試后明確了WebApp的頁面框架如圖1所示。按照常用的App習慣以及功能需求，頁面設計分為3個部分：“我的”“主頁面”“庫”。在“我的”中，完成個人資料、專業認證以及“我的云庫”跳轉的功能；在“主頁面”中，完成搜索表格、新建表格、查找近期記錄表格，跳轉到“云庫”和“我的頁面”功能；在“庫”中，完成跳轉到“我的云庫”；云庫有表格管理、共享云庫的跳轉、在“個人表格”內上傳表格的功能。

圖1 需求框架

針對表格查看特點，本研究采用列表式布局進行設計。

WebApp頁面的設計風格體現自然、簡潔、專業的特點。在顏色上，本設計選擇綠色作為主色，橙色作為輔色，整體應用灰色不同明度區分頁面的不同功能區。

“動物記”WebApp通過需求分析以及用戶使用流程，對移動端頁面進行設計，而后將設計完成的頁面交由動物行為專業的同學和老師測試[9]。設計者收集意見進行修改，明確了專業性較強的表格記錄頁面內容。該部分頁面應符合使用習慣，是“動物記”WebApp重要頁面，介紹如下。

(1)頁面邏輯：用戶根據動物行為表格的制作流程進行填寫，如圖2所示。在主頁面，用戶可查看最近編輯記錄的表格，同時可以進入新的行為譜；如圖3所示，在表格編輯頁面，根據動物行為記錄要求確定表格記錄內容，用戶可長按自動填入天氣、日期和填寫人姓名。用戶根據自身需求選擇取樣方式和記錄方式的組合；選擇完成后即可使用設計好的表格外出進行觀察記錄；用戶最終記錄內容可以存儲為圖片，方便分享和交作業，如圖4所示。

圖2 主頁面

圖3 表格編輯頁面

圖4 導出頁面

(2)云庫功能：在“庫”頁面，用戶可查看共享云庫和個人云庫，用戶在云庫中使用表格下載和查看功能，如圖5所示。在頂部，跳轉“我的云庫”和“共享云庫”。

圖5 庫頁面

4 “動物記”WebApp開發

4.1 “動物記”WebApp前端

前端部分應用Vue框架，提供較高的運行效率，同時結合相應的elementUI組件庫進行前端頁面的開發。圖表部分的前端應用chartjs，可以使用戶完成WebApp的主要功能模塊——表格的填寫。前端頁面由HTML和CSS3構成，頁面邏輯按照前期的需求框架和使用流程，由JavaScript驅動的Vue3.js框架進行處理。

4.2 “動物記”WebApp后端

根據以上WebApp的需求，后端安裝搭建nodejs+koa2的架構，給輕量化的框架提供穩定的后端，采用靈活穩定的NoSQL類型的數據庫——Mongobd數據庫，能夠實現用戶表格數據的單表查引和數據的索引。后端邏輯框架如圖6所示。用戶前端對表格增刪、改查的請求發出后，后端通過Nginx代理轉發前端的請求到Kao.js框架，Kao.js框架由JavaScript驅動處理前端請求。表格數據存儲在MySQL數據庫，數據庫根據前端接收到的請求進行增刪、改查。

圖6 后端邏輯框架

5 結語

本文從動物行為領域入手，挖掘當前動物行為專業對于記錄工具智能化的需求，設計“動物記”WebApp作為記錄輔助工具。通過前期的行業與專業調研，用戶需求分析，本文明確WebApp的功能和使用的邏輯與流程，基于確定的需求進行頁面設計。在專業性、使用必要性和創新性較大的表格記錄流程和頁面部分，WebApp多次進行用戶測試，獲取修改意見，分析修改頁面設計，使其合理流暢。前端部分應用“vue3+vite2+elementUI+chartjs”的技術，完成前端頁面的開發，后端部分應用“nodejs+koa2”架構和mongobd數據庫完成后端的開發。原先動物行為表格記錄過程分為設計表格、觀察記錄、繪制表格、上傳統計數據、分析5個部分。用戶在紙筆觀察記錄的過程中，易出現表格缺失、動物編碼不對應、錯記等情況，在繪制過程中，有重復記錄等問題。“動物記”WebApp的設計與開發，能夠化繁為簡，降低丟失的風險，同時時間、天氣等容易忘記的環境條件也可以智能填入，減少失誤。此外，使用WebApp進行記錄，減少了記錄過程中紙的使用，有益于環保。

筆者希望WebApp能夠帶給用戶更好的使用體驗。未來的研究可以完善云庫，可探索關于云庫的更多使用方法，例如增加共同動物研究的數據查看功能，增加用戶間的學術溝通功能，或增加動物行為愛好者對研究內容的共享與查看功能，使得動物行為數據分享范圍更加廣泛。校園教師和學生的客戶端可輔助教學，豐富動物行為的數據庫等。隨著互聯網行業的不斷發展，技術還在飛速發展，關于“動物記”WebApp的應用或許可以結合硬件和VR等技術輔助動物行為領域的發展，不斷縮小同國外相關領域研究的差距。