“动物记”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等技术辅助动物行为领域的发展，不断缩小同国外相关领域研究的差距。