陳 飛，李星宇，張杜娟*，李海燕

（1.西安醫(yī)學(xué)院 衛(wèi)生管理學(xué)院，陜西 西安 710021；2.西安醫(yī)學(xué)院 醫(yī)學(xué)技術(shù)學(xué)院，陜西 西安 710021）

0 引言

垂直內(nèi)容社區(qū)平臺是以互聯(lián)網(wǎng)為媒介,面向特定的垂直內(nèi)容用戶群體,整合工具、社區(qū)、資訊、問答等多種屬性而形成的用戶社區(qū)。 該平臺通過垂直內(nèi)容標(biāo)簽篩選吸引垂直領(lǐng)域興趣用戶,充分發(fā)揮互聯(lián)網(wǎng)信息聚集和傳播、資源共享與人機互動的特性,從而建設(shè)內(nèi)容領(lǐng)域圈子生態(tài),推動專業(yè)領(lǐng)域發(fā)展與建設(shè)。

垂直內(nèi)容社區(qū)建立用戶間的直接聯(lián)系,在平臺內(nèi)提供給用戶創(chuàng)造內(nèi)容流動的空間和工具,搭建用戶間的信息流動機制,通過內(nèi)容篩選沉淀社區(qū)用戶,實現(xiàn)包容開放的內(nèi)容歸屬社區(qū)交流平臺的構(gòu)建。 基于醫(yī)工結(jié)合的BCI 垂直內(nèi)容社區(qū),本設(shè)計建設(shè)適用于神經(jīng)科學(xué)、生物醫(yī)學(xué)工程、信息工程與控制工程(包括現(xiàn)代傳感器技術(shù)、現(xiàn)代信號處理、模式識別、機器學(xué)習(xí)和智能控制)等學(xué)科的平臺。

1 需求分析

1.1 功能需求

用戶通過微信小程序授權(quán)登錄,進入系統(tǒng)瀏覽頁面,根據(jù)自己需求選擇不同模塊。 在前沿資訊部分,用戶可以獲得腦機接口最新資訊。 專欄創(chuàng)作部分給用戶提供了互動交流平臺。 用戶可以實現(xiàn)個人的觀點輸出,在內(nèi)容筆記中可收藏用戶瀏覽過的文章或視頻,個人賬戶頁面用以管理用戶個人信息。

1.2 系統(tǒng)需求

大多數(shù)內(nèi)容分享平臺需下載移動客戶端,這種方式會影響用戶留存率,也必將影響收益。 微信小程序無須下載App,用戶可通過掃碼或分享鏈接形式進入小程序,即用即走,有利于減少推廣成本。

開發(fā)該系統(tǒng)所用的技術(shù)是JavaScript 語言,類似于HTML 語言,同時微信平臺為開發(fā)人員提供了系統(tǒng)且完整的開發(fā)工具。

1.3 應(yīng)用需求

目前,我國腦機接口的市場規(guī)模與國外差異較大,技術(shù)上較為落后,間接導(dǎo)致了在癱瘓、帕金森等醫(yī)學(xué)難題的停滯。 麥肯錫研究顯示,未來10 到20 年間,腦機接口技術(shù)在全球范圍內(nèi)每年直接產(chǎn)生的經(jīng)濟規(guī)?？蛇_700 億～2 000 億美元。 Allied Market Research 數(shù)據(jù)顯示,2020 年腦機接口全球市場規(guī)模已達14.6 億美元［1］。 而目前中國的腦機接口市場規(guī)模僅有10 億元,不到全球市場規(guī)模的十分之一。

國外腦機接口技術(shù)比國內(nèi)領(lǐng)先,二者產(chǎn)業(yè)發(fā)展差異顯著,同時腦機接口技術(shù)多學(xué)科交叉的特性對相關(guān)領(lǐng)域的專業(yè)人士跨行業(yè)交流提出更高要求。 腦機接口的發(fā)展能夠推動與其相關(guān)領(lǐng)域的發(fā)展,也能夠解決一些醫(yī)學(xué)上的難題［2］。 基于小程序建立腦機接口垂直內(nèi)容社區(qū)平臺,為相關(guān)從業(yè)者與科研人員提供線上創(chuàng)作交流和分享社區(qū),具有現(xiàn)實意義。

2 平臺開發(fā)方案

(1)微信小程序是使用HTML5 和JavaScript 的WebApp 式應(yīng)用,與公眾號H5 應(yīng)用相比,小程序具有更好的體驗性。 其運行環(huán)境被分為邏輯層和渲染層,WXML,WXSS 在小程序的渲染層環(huán)境中運行。 微信在參考Web 開發(fā)的文本標(biāo)記HTML 與CSS 樣式的基礎(chǔ)上做了部分修改,方便項目開發(fā)。 在頁面展示之外,JavaScript 在運行環(huán)境的邏輯層,負責(zé)微信小程序的邏輯交互,響應(yīng)用戶的請求。

在小程序的基本代碼結(jié)構(gòu)中,有描述小程序各自頁面的4 個基本文件,代碼樹的頁面文件夾都由這4個不同后綴的基本文件組成。 它們分別是JSON 配置文件、WXML 模板文件、 WXSS 樣式文件和JS 腳本邏輯文件。 放在代碼樹的根目錄下的是描述小程序整體程序的3 個文件,它們分別是描述小程序基本邏輯的App.js；對小程序進行公共配置的App.json；小程序的公共樣式表文件App.wxss。 根目錄下小程序的項目代碼包project.config.json 文件,能夠簡化環(huán)境個性化配置,使開發(fā)更加靈活。

(2)本文以微信小程序為開發(fā)工具,采用工程化的方式設(shè)計開發(fā)一款以腦機接口為垂直內(nèi)容的平臺。 在明確產(chǎn)品功能需求后,要對整個產(chǎn)品進行方案設(shè)計。抽象需求,生成可視化的流程圖和圖形,描述小程序的頁面交互以及頁面與頁面的跳轉(zhuǎn)關(guān)系,并在項目編碼部分按照界面設(shè)計完成小程序的樣式與模板,調(diào)試界面元素與視覺細節(jié)。 同時,進行詳細編碼,依據(jù)界面交互流程圖完成小程序的開發(fā),并進行產(chǎn)品的邊界測試。

采用工程化的開發(fā)方式不僅能更加方便靈活地定制代碼編譯、打包和發(fā)布流程,而且能減少代碼包的大小,方便修改Sass/Less 文件查看效果,可針對不同平臺小程序分別打包代碼,便于引入第三方依賴庫,實現(xiàn)開發(fā)自動化,減少重復(fù)勞動,提升小程序開發(fā)效率。

3 平臺設(shè)計與實現(xiàn)

3.1 客戶端設(shè)計

根據(jù)需求分析結(jié)果,采用微信小程序設(shè)計一個具有新聞瀏覽和筆記功能的系統(tǒng),實現(xiàn)基本頁面的搭建,通過模擬數(shù)據(jù)完成頁面交互。 腦機接口社區(qū)應(yīng)用客戶端共有4 個模塊,即前沿資訊、專欄創(chuàng)作、內(nèi)容筆記和個人賬戶,如圖1 所示。

圖1 模塊設(shè)計

(1)前沿資訊:通過小程序的swipe 組件實現(xiàn)首頁的輪播滾動圖效果,面向用戶進行腦機接口最新資訊、行業(yè)新聞和研究成果的展示,其推薦的內(nèi)容是算法根據(jù)用戶所選標(biāo)簽及瀏覽習(xí)慣分析得來,且以文字閱讀和視頻瀏覽兩種媒體方式呈現(xiàn)互聯(lián)網(wǎng)的相關(guān)信息資源。 頁面建立用戶的資訊系統(tǒng),提供豐富多彩的資訊信息查詢?yōu)g覽庫,以便滿足用戶無須下載其他App,即可直接攝入信息的需求。 通過微信小程序首頁的搜索框輸入關(guān)鍵詞,進行相關(guān)內(nèi)容查詢,該頁還提供了分享功能以刺激用戶活躍度和留存率。

(2)專欄創(chuàng)作:專欄創(chuàng)作頁有各種制作筆記的方式,可以直播、制作影集、相冊、拍視頻、拍照等多樣的方式,滿足用戶的各種不同創(chuàng)作需求。 用戶點擊菜單欄內(nèi)的專欄創(chuàng)作,可發(fā)布創(chuàng)作視頻和思考筆記,并設(shè)計相應(yīng)的評論區(qū),方便社區(qū)用戶的互動與交流。 使用＜view class ＝＂item＂＞＜image src ＝＂ . . / . . /images/share＿alipay . png” /＞＜/view＞語句,利用modal 彈窗在底部工具欄實現(xiàn)各種社交軟件圖標(biāo)顯示的功能。

(3)內(nèi)容筆記:頁面可實現(xiàn)用戶收藏行業(yè)信息、論文成果、相關(guān)視頻與文章,解決不定期回溯查看的難題。 提供了新增關(guān)注、評論和@、創(chuàng)建聊天的功能,內(nèi)容的創(chuàng)作者可以收到關(guān)注、評論及點贊,滿足用戶互動交流的需求的同時增加了用戶的黏性。 編輯完成的筆記具有預(yù)覽功能,用戶可看到發(fā)布筆記后的排版布局,避免發(fā)出筆記后因排版不合適而需要刪除的問題,給用戶帶來良好的體驗。 其頁面主題采用卡片列表形式,標(biāo)簽按照從左到右、從上到下順序進行排列,使用flex 布局實現(xiàn)效果。

(4)個人賬戶:該頁面包含用戶頭像與用戶昵稱、設(shè)置、意見反饋功能。 頁面頂部展示用戶頭像,管理用戶個人信息,進行小程序個人賬戶注冊、注銷、切換等功能。 其中,個人設(shè)置、意見反饋表現(xiàn)為文字的入口形式,通過點擊文字進入對應(yīng)功能的頁面。 用戶社區(qū)頁面實現(xiàn)個性化編輯,對個人隱私進行設(shè)置與保護。 同時,用戶能通過小程序的運營客服,實時反饋意見,方便開發(fā)團隊進行小程序頁面以及功能的改善。

3.2 服務(wù)器端設(shè)計

代碼編輯器采用高效、跨平臺的文本編輯器Sublime,其具有豐富的代碼插件庫,可在文件與項目間快速切換。 本地運行調(diào)試環(huán)境使用Phpstudy,其集成Apache+MySQL+PHP。 接口測試工具為Postman,實現(xiàn)Web API＆HTTP 模擬與調(diào)試。 線上服務(wù)器以新浪云SAE 搭建。

整體設(shè)計流程:確定腦機接口社區(qū)平臺功能及原型設(shè)計交互圖,輸出小程序的服務(wù)器端API 接口與接口文檔, 使用PHP 后臺開發(fā)語言, 開發(fā)框架為ThinkPHP,以MySQL 作為后臺數(shù)據(jù)庫,新浪云SAE 作為部署服務(wù)器［3］。

在后臺數(shù)據(jù)庫設(shè)計中,結(jié)合系統(tǒng)設(shè)計搭建數(shù)據(jù)庫結(jié)構(gòu),根據(jù)概念模型轉(zhuǎn)換關(guān)系模式的規(guī)則,可獲得小程序后臺數(shù)據(jù)庫各表的結(jié)構(gòu),包括管理員表、用戶書簽表、存儲文章信息表及用戶表等。 以用戶表(user)和文章信息表(message)為例,采用MySQL 進行物理結(jié)構(gòu)設(shè)計,user 表主要包括用戶id、用戶名、手機號碼、密碼、用戶頭像地址等字段,message 表主要包括用戶id、用戶名、文章信息、點贊數(shù)、發(fā)布時間等字段,對各表數(shù)據(jù)類型及屬性進行設(shè)置,并創(chuàng)建表間關(guān)系,完成數(shù)據(jù)庫建立,最終完成服務(wù)器配置。

3.3 平臺測試與運營

通過單元測試、UI 適配、旁路測試,檢測模塊功能是否正常運行、程序邏輯處理是否正常,同時遵循用戶界面友好的原則,測試小程序的運行性能,實現(xiàn)錯誤上報。

3.3.1 單元測試

對于前端開發(fā)而言,最基本的單元測試方法就是調(diào)用console.assert(),只需在命令行完成調(diào)用即可開始測試。 console.assert()的第一個參數(shù)為布爾值,表示當(dāng)前測試用例是否通過。 第二個參數(shù)可以傳遞多個對象或字符串,在控制臺上輸出相應(yīng)信息并拋出一個異常。通過控制臺語句中的console.assert()方法可以測試代碼中的部分函數(shù),測試通過或出錯,均會在控制臺輸出提示性信息［4］。

3.3.2 旁路測試

通過云服務(wù)器架構(gòu)部署進行數(shù)據(jù)存儲與交互,通過定義index.wxml 與index.js 實現(xiàn)小程序的數(shù)據(jù)請求功能。 定義語句如下:

＜button＞bindtap ＝’getData’ type ＝”primary”＞訪問后臺數(shù)據(jù)＜/button＞

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

小程序有多個打開場景,且打開頁面的初始化路徑不同。 根據(jù)數(shù)據(jù)從某一端操作輸入和輸出流向,設(shè)計基于數(shù)據(jù)流的測試用例,對于特殊情況進行考慮。檢查輸入的數(shù)據(jù)是否按照代碼邏輯執(zhí)行,是否數(shù)據(jù)發(fā)生異常。

3.3.3 提交審核

在微信小程序IDE 中進行代碼提交,輸入版本和備注,上傳新版本到小程序后臺。 設(shè)置體驗版本,將測試人員添加到體驗名單中,查看并迭代產(chǎn)品頁面的關(guān)鍵指標(biāo)。

4 結(jié)語

腦機接口作為一種應(yīng)用前景廣闊的多學(xué)科領(lǐng)域交叉新型技術(shù),信息交流與倫理關(guān)切對技術(shù)發(fā)展具有長遠的意義。 而互聯(lián)網(wǎng)集中與共享資源的特性,能夠滿足以腦機接口為垂直內(nèi)容細分領(lǐng)域的社區(qū)平臺創(chuàng)建和技術(shù)交流的需求。 本文是基于微信小程序的腦機接口社區(qū)平臺設(shè)計,可同時組合微信公眾號、微信視頻號來創(chuàng)建小型社區(qū)生態(tài),實現(xiàn)平臺社區(qū)的開發(fā)與建構(gòu)。