基于醫工結合的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 結語

腦機接口作為一種應用前景廣闊的多學科領域交叉新型技術,信息交流與倫理關切對技術發展具有長遠的意義。 而互聯網集中與共享資源的特性,能夠滿足以腦機接口為垂直內容細分領域的社區平臺創建和技術交流的需求。 本文是基于微信小程序的腦機接口社區平臺設計,可同時組合微信公眾號、微信視頻號來創建小型社區生態,實現平臺社區的開發與建構。