基于医工结合的BCI 垂直内容社区平台设计

陈 飞，李星宇，张杜娟*，李海燕

（1.西安医学院 卫生管理学院，陕西 西安 710021；2.西安医学院 医学技术学院，陕西 西安 710021）

0 引言

垂直内容社区平台是以互联网为媒介,面向特定的垂直内容用户群体,整合工具、社区、资讯、问答等多种属性而形成的用户社区。 该平台通过垂直内容标签筛选吸引垂直领域兴趣用户,充分发挥互联网信息聚集和传播、资源共享与人机互动的特性,从而建设内容领域圈子生态,推动专业领域发展与建设。

垂直内容社区建立用户间的直接联系,在平台内提供给用户创造内容流动的空间和工具,搭建用户间的信息流动机制,通过内容筛选沉淀社区用户,实现包容开放的内容归属社区交流平台的构建。 基于医工结合的BCI 垂直内容社区,本设计建设适用于神经科学、生物医学工程、信息工程与控制工程(包括现代传感器技术、现代信号处理、模式识别、机器学习和智能控制)等学科的平台。

1 需求分析

1.1 功能需求

用户通过微信小程序授权登录,进入系统浏览页面,根据自己需求选择不同模块。 在前沿资讯部分,用户可以获得脑机接口最新资讯。 专栏创作部分给用户提供了互动交流平台。 用户可以实现个人的观点输出,在内容笔记中可收藏用户浏览过的文章或视频,个人账户页面用以管理用户个人信息。

1.2 系统需求

大多数内容分享平台需下载移动客户端,这种方式会影响用户留存率,也必将影响收益。 微信小程序无须下载App,用户可通过扫码或分享链接形式进入小程序,即用即走,有利于减少推广成本。

开发该系统所用的技术是JavaScript 语言,类似于HTML 语言,同时微信平台为开发人员提供了系统且完整的开发工具。

1.3 应用需求

目前,我国脑机接口的市场规模与国外差异较大,技术上较为落后,间接导致了在瘫痪、帕金森等医学难题的停滞。 麦肯锡研究显示,未来10 到20 年间,脑机接口技术在全球范围内每年直接产生的经济规模可达700 亿～2 000 亿美元。 Allied Market Research 数据显示,2020 年脑机接口全球市场规模已达14.6 亿美元［1］。 而目前中国的脑机接口市场规模仅有10 亿元,不到全球市场规模的十分之一。

国外脑机接口技术比国内领先,二者产业发展差异显著,同时脑机接口技术多学科交叉的特性对相关领域的专业人士跨行业交流提出更高要求。 脑机接口的发展能够推动与其相关领域的发展,也能够解决一些医学上的难题［2］。 基于小程序建立脑机接口垂直内容社区平台,为相关从业者与科研人员提供线上创作交流和分享社区,具有现实意义。

2 平台开发方案

(1)微信小程序是使用HTML5 和JavaScript 的WebApp 式应用,与公众号H5 应用相比,小程序具有更好的体验性。 其运行环境被分为逻辑层和渲染层,WXML,WXSS 在小程序的渲染层环境中运行。 微信在参考Web 开发的文本标记HTML 与CSS 样式的基础上做了部分修改,方便项目开发。 在页面展示之外,JavaScript 在运行环境的逻辑层,负责微信小程序的逻辑交互,响应用户的请求。

在小程序的基本代码结构中,有描述小程序各自页面的4 个基本文件,代码树的页面文件夹都由这4个不同后缀的基本文件组成。 它们分别是JSON 配置文件、WXML 模板文件、 WXSS 样式文件和JS 脚本逻辑文件。 放在代码树的根目录下的是描述小程序整体程序的3 个文件,它们分别是描述小程序基本逻辑的App.js；对小程序进行公共配置的App.json；小程序的公共样式表文件App.wxss。 根目录下小程序的项目代码包project.config.json 文件,能够简化环境个性化配置,使开发更加灵活。

(2)本文以微信小程序为开发工具,采用工程化的方式设计开发一款以脑机接口为垂直内容的平台。 在明确产品功能需求后,要对整个产品进行方案设计。抽象需求,生成可视化的流程图和图形,描述小程序的页面交互以及页面与页面的跳转关系,并在项目编码部分按照界面设计完成小程序的样式与模板,调试界面元素与视觉细节。 同时,进行详细编码,依据界面交互流程图完成小程序的开发,并进行产品的边界测试。

采用工程化的开发方式不仅能更加方便灵活地定制代码编译、打包和发布流程,而且能减少代码包的大小,方便修改Sass/Less 文件查看效果,可针对不同平台小程序分别打包代码,便于引入第三方依赖库,实现开发自动化,减少重复劳动,提升小程序开发效率。

3 平台设计与实现

3.1 客户端设计

根据需求分析结果,采用微信小程序设计一个具有新闻浏览和笔记功能的系统,实现基本页面的搭建,通过模拟数据完成页面交互。 脑机接口社区应用客户端共有4 个模块,即前沿资讯、专栏创作、内容笔记和个人账户,如图1 所示。

图1 模块设计

(1)前沿资讯:通过小程序的swipe 组件实现首页的轮播滚动图效果,面向用户进行脑机接口最新资讯、行业新闻和研究成果的展示,其推荐的内容是算法根据用户所选标签及浏览习惯分析得来,且以文字阅读和视频浏览两种媒体方式呈现互联网的相关信息资源。 页面建立用户的资讯系统,提供丰富多彩的资讯信息查询浏览库,以便满足用户无须下载其他App,即可直接摄入信息的需求。 通过微信小程序首页的搜索框输入关键词,进行相关内容查询,该页还提供了分享功能以刺激用户活跃度和留存率。

(2)专栏创作:专栏创作页有各种制作笔记的方式,可以直播、制作影集、相册、拍视频、拍照等多样的方式,满足用户的各种不同创作需求。 用户点击菜单栏内的专栏创作,可发布创作视频和思考笔记,并设计相应的评论区,方便社区用户的互动与交流。 使用＜view class ＝＂item＂＞＜image src ＝＂ . . / . . /images/share＿alipay . png” /＞＜/view＞语句,利用modal 弹窗在底部工具栏实现各种社交软件图标显示的功能。

(3)内容笔记:页面可实现用户收藏行业信息、论文成果、相关视频与文章,解决不定期回溯查看的难题。 提供了新增关注、评论和@、创建聊天的功能,内容的创作者可以收到关注、评论及点赞,满足用户互动交流的需求的同时增加了用户的黏性。 编辑完成的笔记具有预览功能,用户可看到发布笔记后的排版布局,避免发出笔记后因排版不合适而需要删除的问题,给用户带来良好的体验。 其页面主题采用卡片列表形式,标签按照从左到右、从上到下顺序进行排列,使用flex 布局实现效果。

(4)个人账户:该页面包含用户头像与用户昵称、设置、意见反馈功能。 页面顶部展示用户头像,管理用户个人信息,进行小程序个人账户注册、注销、切换等功能。 其中,个人设置、意见反馈表现为文字的入口形式,通过点击文字进入对应功能的页面。 用户社区页面实现个性化编辑,对个人隐私进行设置与保护。 同时,用户能通过小程序的运营客服,实时反馈意见,方便开发团队进行小程序页面以及功能的改善。

3.2 服务器端设计

代码编辑器采用高效、跨平台的文本编辑器Sublime,其具有丰富的代码插件库,可在文件与项目间快速切换。 本地运行调试环境使用Phpstudy,其集成Apache+MySQL+PHP。 接口测试工具为Postman,实现Web API＆HTTP 模拟与调试。 线上服务器以新浪云SAE 搭建。

整体设计流程:确定脑机接口社区平台功能及原型设计交互图,输出小程序的服务器端API 接口与接口文档, 使用PHP 后台开发语言, 开发框架为ThinkPHP,以MySQL 作为后台数据库,新浪云SAE 作为部署服务器［3］。

在后台数据库设计中,结合系统设计搭建数据库结构,根据概念模型转换关系模式的规则,可获得小程序后台数据库各表的结构,包括管理员表、用户书签表、存储文章信息表及用户表等。 以用户表(user)和文章信息表(message)为例,采用MySQL 进行物理结构设计,user 表主要包括用户id、用户名、手机号码、密码、用户头像地址等字段,message 表主要包括用户id、用户名、文章信息、点赞数、发布时间等字段,对各表数据类型及属性进行设置,并创建表间关系,完成数据库建立,最终完成服务器配置。

3.3 平台测试与运营

通过单元测试、UI 适配、旁路测试,检测模块功能是否正常运行、程序逻辑处理是否正常,同时遵循用户界面友好的原则,测试小程序的运行性能,实现错误上报。

3.3.1 单元测试

对于前端开发而言,最基本的单元测试方法就是调用console.assert(),只需在命令行完成调用即可开始测试。 console.assert()的第一个参数为布尔值,表示当前测试用例是否通过。 第二个参数可以传递多个对象或字符串,在控制台上输出相应信息并抛出一个异常。通过控制台语句中的console.assert()方法可以测试代码中的部分函数,测试通过或出错,均会在控制台输出提示性信息［4］。

3.3.2 旁路测试

通过云服务器架构部署进行数据存储与交互,通过定义index.wxml 与index.js 实现小程序的数据请求功能。 定义语句如下:

＜button＞bindtap ＝’getData’ type ＝”primary”＞访问后台数据＜/button＞

＜text class＝”txt”＞｛｛databean｝］＜/text ＞

小程序有多个打开场景,且打开页面的初始化路径不同。 根据数据从某一端操作输入和输出流向,设计基于数据流的测试用例,对于特殊情况进行考虑。检查输入的数据是否按照代码逻辑执行,是否数据发生异常。

3.3.3 提交审核

在微信小程序IDE 中进行代码提交,输入版本和备注,上传新版本到小程序后台。 设置体验版本,将测试人员添加到体验名单中,查看并迭代产品页面的关键指标。

4 结语

脑机接口作为一种应用前景广阔的多学科领域交叉新型技术,信息交流与伦理关切对技术发展具有长远的意义。 而互联网集中与共享资源的特性,能够满足以脑机接口为垂直内容细分领域的社区平台创建和技术交流的需求。 本文是基于微信小程序的脑机接口社区平台设计,可同时组合微信公众号、微信视频号来创建小型社区生态,实现平台社区的开发与建构。