基于微信的付費語音問答系統(tǒng)設(shè)計與實現(xiàn)

曲 健，高 航，王 鵬

(1.南京航空航天大學(xué) 計算機科學(xué)與技術(shù)學(xué)院，江蘇 南京 211106; 2.南京航空航天大學(xué) 航天學(xué)院，江蘇 南京 210016)

0 引 言

不斷發(fā)展的移動互聯(lián)網(wǎng)技術(shù)降低了知識信息交互的難度，手機等移動終端成為用戶最重要的上網(wǎng)方式之一。第39次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告》顯示，截至2016年12月，中國手機網(wǎng)民規(guī)模達6.95億，手機網(wǎng)上支付用戶規(guī)模達4.69億，網(wǎng)民手機網(wǎng)上支付的使用比例提升至67.5%[1]。

百度知道、搜狗問問等誕生于個人電腦端的傳統(tǒng)問答系統(tǒng)，只是將原有系統(tǒng)界面針對移動終端進行適配，依然采取通過虛擬積分吸引用戶回答問題的問答模式，沒有很好地利用語音消息、位置服務(wù)、手機支付等移動終端的特色交互方式，也沒有解決文字錄入效率低的弊端，難以激發(fā)用戶的使用熱情。

目前提出的部分針對移動終端問答系統(tǒng)的解決方案，大多需要用戶安裝額外的手機軟件，對使用頻率較低的在線問答系統(tǒng)的推廣造成了障礙。對此，文中基于微信對問答系統(tǒng)進行設(shè)計，利用Web開發(fā)技術(shù)提供了一個可行的解決方案，彌補移動終端中現(xiàn)有問答系統(tǒng)的弊端[2]。

1 系統(tǒng)關(guān)鍵技術(shù)

1.1 微 信

微信客戶端是騰訊公司推出的為智能終端提供即時通訊服務(wù)的免費應(yīng)用程序。2017年3月22日，騰訊公布2016年年度財務(wù)報告，微信月活躍用戶數(shù)達8.89億，騰訊移動支付的月活躍賬戶及日均支付交易筆數(shù)均超過6億。

微信公眾平臺是微信客戶端的一個功能模塊，開發(fā)者在公眾平臺創(chuàng)建公眾號后獲得微信接口權(quán)限，為微信用戶提供資訊和服務(wù)。利用這些技術(shù)接口可實現(xiàn)大量功能，第三方開發(fā)者無需耗費大量時間就能開發(fā)獨立的手機軟件。

1.2 Web開發(fā)技術(shù)

該系統(tǒng)采用MVC設(shè)計模式[3]，利用HTML5、JavaScript設(shè)計面向用戶的系統(tǒng)界面，通過超文本預(yù)處理器語言(hypertext preprocessor,PHP)實現(xiàn)用戶界面與服務(wù)器、數(shù)據(jù)庫、微信技術(shù)接口的連接。其中，服務(wù)器采用云服務(wù)器，數(shù)據(jù)庫采用MySQL。

(1)MVC模式與PHP。

MVC是一種軟件設(shè)計典范，包括模型層(model)、視圖層(view)、控制器層(controller)三層結(jié)構(gòu)，用業(yè)務(wù)邏輯、數(shù)據(jù)、界面三者分離的方式組織代碼，使網(wǎng)站系統(tǒng)更易于維護。MVC的結(jié)構(gòu)模型如圖1所示。

圖1 MVC結(jié)構(gòu)模型

模型層承擔(dān)著項目大部分的業(yè)務(wù)邏輯代碼，使得項目的業(yè)務(wù)處理和實體分離，可以對數(shù)據(jù)庫進行操作；視圖層包括所有用戶界面，分離出這一層是為了使業(yè)務(wù)邏輯有更好的復(fù)用性，讓美工、后臺、前端設(shè)計人員同時進行開發(fā)，互不影響；控制器層也叫控制層，用于接收用戶請求后下發(fā)指令，選擇模型層的相應(yīng)業(yè)務(wù)邏輯執(zhí)行，最后調(diào)用視圖層顯示執(zhí)行結(jié)果。

PHP是一種通用開源腳本語言，語法簡單、性能優(yōu)越，跨平臺兼容性較強，主要適用于Web開發(fā)領(lǐng)域。越來越多的網(wǎng)站開始在PHP開發(fā)中使用MVC模式，兩者的結(jié)合使得網(wǎng)站的目錄結(jié)構(gòu)更加清晰，網(wǎng)站更易于維護與擴展，實現(xiàn)模塊的復(fù)用。

(2)HTML5。

HTML5是萬維網(wǎng)的核心語言[4]、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用超文本標(biāo)記語言(hypertext markup language，HTML)的第五次重大修改，通常配合基于對象和事件驅(qū)動的客戶端腳本語言(JavaScript)、層疊樣式表(cascading style sheets，CSS)等實現(xiàn)各類網(wǎng)站的開發(fā)工作[5]。

HTML5可以跨平臺使用，其新增的圖形繪制、音頻內(nèi)容、地理位置定位等特性，能幫助開發(fā)者實現(xiàn)更多應(yīng)用場景。JavaScript常用來為網(wǎng)頁添加各種動態(tài)功能[6]，對瀏覽器事件做出響應(yīng)，配合CSS給用戶帶來更友好的網(wǎng)頁界面[7]。

2 系統(tǒng)設(shè)計

2.1 系統(tǒng)整體架構(gòu)

系統(tǒng)采用云服務(wù)器、Windows Server 2008服務(wù)器系統(tǒng)、MySQL數(shù)據(jù)庫[8]，借助Web服務(wù)器軟件Apache搭建PHP開發(fā)環(huán)境。

系統(tǒng)主要由裝有微信軟件的移動終端、微信服務(wù)器以及開發(fā)者自行購買的云服務(wù)器組成，微信用戶可以通過微信公眾號或在微信內(nèi)點擊鏈接進行訪問。系統(tǒng)整體架構(gòu)如圖2所示。

圖2 系統(tǒng)整體架構(gòu)

其中，公眾號由開發(fā)者通過微信公眾平臺注冊，注冊成功后擁有調(diào)用微信技術(shù)接口的權(quán)限；移動終端與用戶對接，用于接收用戶發(fā)出的指令或請求，并為用戶展現(xiàn)服務(wù)器處理指令或請求后返回的結(jié)果；微信服務(wù)器包含微信公眾平臺的各類技術(shù)接口，供云服務(wù)器調(diào)用，同時將用戶發(fā)出的指令或請求轉(zhuǎn)發(fā)至云服務(wù)器；云服務(wù)器運行該系統(tǒng)的全部代碼，用于處理用戶發(fā)出的各類指令或請求，并將處理指令或請求后的結(jié)果返回至用戶。

2.2 系統(tǒng)功能設(shè)計

針對現(xiàn)有用戶需求與傳統(tǒng)問答系統(tǒng)的不足，主要包括四大功能：付費懸賞提問，用現(xiàn)金懸賞代替虛擬積分，吸引用戶解答問題；語音解答問題，用語音代替文字錄入，解決移動終端文字錄入效率較低的弊端；按地理位置分類問題，提升區(qū)域性問題的解答效率；第三方付費查看答案，所付費用由提問者與解答者均分，增加用戶分享傳播的熱情。

根據(jù)系統(tǒng)整體架構(gòu)，為了實現(xiàn)上述功能，系統(tǒng)具體包含的功能模塊如圖3所示。

圖3 系統(tǒng)功能結(jié)構(gòu)

(1)微信授權(quán)登錄模塊。該模塊利用微信的“OAuth2.0網(wǎng)頁授權(quán)”技術(shù)接口，使用戶直接通過微信賬號登錄系統(tǒng)，無需額外注冊或安裝軟件。OAuth是目前國際通用的授權(quán)方式[9]，其特點是不需要用戶在第三方網(wǎng)站輸入用戶名及密碼，就可以申請訪問該用戶的受保護資源，OAuth2.0是OAuth協(xié)議的最新版本。

(2)懸賞提問模塊。該模塊用于提問者發(fā)布懸賞提問，通過支付一定費用而征請眾人為之解答，用現(xiàn)金代替?zhèn)鹘y(tǒng)問答系統(tǒng)中的虛擬積分。

(3)語音消息模塊。該模塊借助微信網(wǎng)頁開發(fā)工具包JS-SDK，通過服務(wù)器存取回答者通過音頻形式提交的答案[10]。

(4)地理位置服務(wù)模塊。該模塊利用HTML5可以獲取基于瀏覽器的當(dāng)前用戶地理位置的新特性，獲取用戶當(dāng)前的位置信息[11]。對于某些區(qū)域性的提問，如“XX社區(qū)附近哪里有打印店”，系統(tǒng)可以根據(jù)位置信息，將提問優(yōu)先展示給該區(qū)域附近的回答者。

(5)第三方付費查看答案模塊。該模塊用于除提問者、回答者之外的第三方用戶付費查看問題的答案，第三方用戶所支付的金額均分給該問題的提問者和回答者。

(6)微信支付模塊。該模塊借助微信支付功能向用戶發(fā)起支付請求，以及向用戶發(fā)放在系統(tǒng)內(nèi)獲得的現(xiàn)金收益[12]。

3 系統(tǒng)關(guān)鍵技術(shù)實現(xiàn)

3.1 微信授權(quán)登錄模塊實現(xiàn)

微信用戶在微信客戶端中訪問該系統(tǒng)時，可以通過微信網(wǎng)頁授權(quán)機制獲取用戶基本信息，進而實現(xiàn)業(yè)務(wù)邏輯。微信授權(quán)登錄模塊主要包括OAuth2.0網(wǎng)頁授權(quán)[13]和獲取用戶信息兩大部分。

具體而言，網(wǎng)頁授權(quán)流程分為四步[14]：

(1)用戶同意授權(quán)，獲取code。

code用于后續(xù)網(wǎng)頁授權(quán)流程，每次獲取后只能使用一次。開發(fā)者獲得微信網(wǎng)頁授權(quán)接口權(quán)限后，擁有授權(quán)作用域(scope參數(shù))中的參數(shù)snsapi_userinfo，引導(dǎo)用戶訪問帶有此參數(shù)的指定鏈接，用戶同意授權(quán)后即可獲取code。

具體鏈接如下：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

獲取code鏈接中的相關(guān)參數(shù)說明見表1。

表1 獲取code鏈接參數(shù)說明

授權(quán)操作具有較高安全等級，微信會對授權(quán)鏈接進行校驗，若鏈接的參數(shù)順序不對，授權(quán)頁面也將無法訪問。

(2)通過code換取網(wǎng)頁授權(quán)access_token。

access_token用于獲取用戶基本信息，開發(fā)者借助第一步獲取的code，請求以下指定鏈接獲取access_token：

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

獲取access_token鏈接中的相關(guān)參數(shù)說明見表2。

表2 獲取access_token鏈接參數(shù)說明

access_token的有效期較短，失效后需要用戶重新授權(quán)。

獲取正確時返回的JSON數(shù)據(jù)包[15]如下：

{“access_token”:“網(wǎng)頁授權(quán)接口調(diào)用憑證”,

“expires_in”:“access_token超時時間”,

“openid”:“用戶唯一標(biāo)識”,

“scope”:“用戶授權(quán)的作用域”}

(3)獲取用戶基本信息。

開發(fā)者通過第二步JSON數(shù)據(jù)包中的access_token和openid拉取用戶信息，請求方法為：

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

獲取正確時返回的JSON數(shù)據(jù)包中的用戶信息主要包括：用戶昵稱、用戶的性別、省份、城市、國家、用戶頭像。

3.2 語音消息模塊實現(xiàn)

語音消息模塊用于用戶訪問該系統(tǒng)后，系統(tǒng)網(wǎng)頁錄制用戶音頻并存儲至云服務(wù)器。目前，能在移動終端實現(xiàn)通過網(wǎng)頁錄制用戶音頻的方法較少，主要包括兩個：微信網(wǎng)頁開發(fā)工具包JS-SDK和HTML5的navigator.getUserMedia接口。

navigator.getUserMedia接口的兼容性較差，僅支持谷歌安卓系統(tǒng)原生瀏覽器5.x以上版本，原生安卓瀏覽器在國內(nèi)的占有率極低。因此通過HTML5實現(xiàn)音頻錄制，不具有實際應(yīng)用價值。

微信JS-SDK是微信公眾平臺面向網(wǎng)頁開發(fā)者提供的基于微信內(nèi)的網(wǎng)頁開發(fā)工具包，借助微信客戶端高效地使用語音、位置等手機系統(tǒng)的能力。開發(fā)者在微信公眾平臺配置相關(guān)驗證信息，在網(wǎng)站內(nèi)引入指定JavaScript文件后，即可調(diào)用微信JS-SDK。

語音消息模塊的實現(xiàn)，具體分為以下部分：

(1)錄制音頻。

通過調(diào)用JS-SDK中的開始錄音、停止錄音接口實現(xiàn)。由于微信系統(tǒng)限制，錄音時間超過一分鐘沒有停止的，將調(diào)用JS-SDK中的監(jiān)聽錄音自動停止接口，強制停止錄音。

(2)上傳和下載音頻。

通過調(diào)用JS-SDK中的上傳語音、下載語音接口實現(xiàn)。JS-SDK將音頻文件上傳至微信服務(wù)器，開發(fā)者可利用微信多媒體接口下載語音到自己的服務(wù)器。

(3)播放音頻。

通過調(diào)用JS-SDK中的播放語音、暫停播放、停止播放接口實現(xiàn)。

3.3 地理位置模塊實現(xiàn)

地理位置模塊的實現(xiàn)，可以通過兩種方法：微信JS-SDK和HTML5的定位功能[16]。

(1)微信JS-SDK。

通過調(diào)用JS-SDK中的獲取地理位置接口實現(xiàn)?？梢垣@取到用戶的經(jīng)度、緯度、速度以及位置精度。

(2)HTML5定位功能。

定位功能(Geolocation)是HTML5的新特性，通過調(diào)用HTML5中的navigator.geolocation接口實現(xiàn)，可以獲取到用戶的經(jīng)度、緯度。由于部分版本瀏覽器不支持運行HTML5，因此使用定位功能時，需要首先檢測用戶設(shè)備瀏覽器是否支持地理定位。

自動定位功能會產(chǎn)生一個優(yōu)先推薦地區(qū)[17]，最終由用戶確定發(fā)布問題的地理位置。

3.4 微信支付模塊實現(xiàn)

用戶在微信內(nèi)訪問該系統(tǒng)時，可以調(diào)用微信支付模塊完成懸賞提問、第三方付費查看功能中的支付流程。

開發(fā)者申請到微信支付的接口權(quán)限后，將擁有微信分配的商戶系統(tǒng)，統(tǒng)一管理微信支付交易[18]。微信內(nèi)網(wǎng)站頁面發(fā)起支付請求時，商戶系統(tǒng)將首先調(diào)用統(tǒng)一下單接口，在微信支付服務(wù)后臺生成預(yù)支付交易單，等待返回正確的預(yù)支付交易回話標(biāo)識(prepay_id)后再借助微信JS-SDK調(diào)起支付。整個業(yè)務(wù)流程如圖4所示。

圖4 微信支付模塊業(yè)務(wù)流程

微信支付模塊的實現(xiàn)，具體包括以下步驟：

(1)統(tǒng)一下單。

商戶系統(tǒng)將包括以下參數(shù)的請求發(fā)送至微信支付服務(wù)后臺的統(tǒng)一支付接口，請求成功后將返回XML格式[19]的prepay_id參數(shù)值。

<商品詳情

(2)微信內(nèi)調(diào)起支付。

利用第一步獲取的prepay_id，借助微信JS-SDK中的微信支付接口調(diào)起微信支付請求，接口輸入輸出數(shù)據(jù)格式為JSON。支付請求發(fā)起后，微信客戶端將調(diào)起微信支付控件引導(dǎo)用戶輸入支付密碼，密碼驗證通過支付成功后，商戶系統(tǒng)得到支付成功的通知。

4 結(jié)束語

文中設(shè)計并實現(xiàn)了一種基于微信的付費語音問答系統(tǒng)，包括懸賞提問模塊、語音消息模塊、地理位置服務(wù)模塊、微信授權(quán)登錄模塊、第三方付費查看答案模塊、微信支付模塊。系統(tǒng)以語音消息代替純文字作為解答形式，解決了文字錄入效率低的弊端；以現(xiàn)金激勵代替虛擬積分，增加用戶熱情；以微信為基礎(chǔ)，消除了獨立軟件的推廣門檻。

目前系統(tǒng)核心功能均已實現(xiàn)，但仍需在實際使用中不斷優(yōu)化，不斷設(shè)計滿足用戶需求的新功能。

參考文獻：

[1] 沈金萍.第39次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告》發(fā)布我國網(wǎng)民達7.3億[J].傳媒,2017(3):30.

[2] AHMED W,ANTO B. Answer extraction technique for qu-estion answering systems[J].International Journal of Innovative Research in Computer and Communication Engineering,2016,4(11):20352-20357.

[3] 鄭 賢.基于MVC的新型輕量級PHP框架的研究與實現(xiàn)[D].武漢:華中科技大學(xué),2016.

[4] 白 蕾,郭清菊.HTML5與CSS3的設(shè)計模式[J].智能計算機與應(yīng)用,2016,6(2):104-106.

[5] HALLé S, BERGERON N, GUéRIN F,et al.Declarative layout constraints for testing web applications[J].Journal of Logical and Algebraic Methods in Programming,2016,85(5):737-758.

[6] WITTERN E,YING A T T,ZHENG Yunhui,et al.Statically checking web API requests in JavaScript[C]//Proceedings of the 39th international conference on software engineering.Buenos Aires,Argentina:IEEE,2017:244-254.

[7] CHRISTODOULOU S P,GIZAS A B.Design patterns and coding practices for performance-optimised JQuery mobile cultural sites[J].International Journal of Computational Intelligence Studies,2016,5(1):50.

[8] 王家隆.基于MVC公眾賬號交互平臺的數(shù)據(jù)庫開發(fā)[J].電子技術(shù)與軟件工程,2017(7):156.

[9] 王丹磊,李長軍,趙 磊,等.OAuth 2.0協(xié)議在Web部署中的安全性分析與威脅防范[J].武漢大學(xué)學(xué)報:理學(xué)版,2016,62(5):411-417.

[10] 楊 平.基于iOS平臺交互式語音錄播系統(tǒng)的設(shè)計與實現(xiàn)[J].微型電腦應(yīng)用,2016,32(7):39-41.

[11] GE Jin,GU Juan,HU Yongdeng,et al.Relative positioning of a mobile computing device in a network:U.S.,US9576364[P].2017-02-21.

[12] 畢耕毓.易寶微信支付系統(tǒng)的設(shè)計與實現(xiàn)[D].濟南:山東大學(xué),2016.

[13] FETT D,KüSTERS R,SCHMITZ G.A comprehensive formal security analysis of OAuth 2.0[C]//Proceedings of the 2016 ACM SIGSAC conference on computer and communications security.[s.l.]:ACM,2016:1204-1215.

[14] 王婷婷,趙松澤.基于OAuth2.0協(xié)議的安全授權(quán)模型研究[J].軟件工程,2017,20(1):55-59.

[15] 仇小花,秦栓栓,邱 果.基于WEB開發(fā)中的XML與JSON數(shù)據(jù)傳輸格式研究[J].信息技術(shù)與信息化,2017(4):123-125.

[16] 彭 紅.基于云計算的LBS應(yīng)用研究[J].軟件工程,2016,19(10):27-29.

[17] 王榮榮,薛旻輝,李祥學(xué),等.基于位置社交網(wǎng)絡(luò)的高效定位算法[J].華東師范大學(xué)學(xué)報:自然科學(xué)版,2016(2):62-72.

[18] 敖 毅.基于HTML5實現(xiàn)的微信公眾號支付漏洞分析與研究[J].網(wǎng)絡(luò)安全技術(shù)與應(yīng)用,2016(8):41-43.

[19] KUPER G, MASSACCI F, RASSADKO N. Generalized XML security views[J].International Journal of Information Security,2016,8(3):173-203.