荊門園博園藍(lán)牙導(dǎo)覽系統(tǒng)的設(shè)計*

鄭 杰 ，李 冉

（荊楚理工學(xué)院，湖北 荊門 448000）

智慧導(dǎo)覽是基于物聯(lián)網(wǎng)、云計算、移動互聯(lián)網(wǎng)等技術(shù)，提供具有一定智慧化決策的導(dǎo)覽系統(tǒng)或設(shè)備，通過音頻、視頻、圖片和文字等多種呈現(xiàn)方式，幫助用戶實時獲取相應(yīng)區(qū)域的導(dǎo)覽服務(wù)[1]。智慧導(dǎo)覽除了被廣泛地應(yīng)用于博物館、博覽會場館以外，近年來也逐漸被應(yīng)用于景區(qū)導(dǎo)覽、校園導(dǎo)覽、園區(qū)導(dǎo)覽，如南京青龍綠帶二期的智慧園區(qū)導(dǎo)覽[2]、泉州經(jīng)貿(mào)職業(yè)技術(shù)學(xué)院基于微信小程序和GPS定位的校園導(dǎo)覽[3]等。

荊門園博園是湖北省第三屆園林博覽會的承辦地，面積達(dá)2 094畝，分為園林生活區(qū)、靈秀荊楚區(qū)南北兩大片區(qū)，5大主題展館展廳呈現(xiàn)荊楚文化魅力，32個特色展園分散在園區(qū)的不同位置。在園區(qū)內(nèi)構(gòu)建智慧導(dǎo)覽系統(tǒng)，為廣大游客提供個性化的旅游導(dǎo)覽和景點自動講解服務(wù)，對提升園博園的服務(wù)水平和游客體驗度具有十分重要的意義。

本研究以荊門園博園景區(qū)為背景，深入研究藍(lán)牙信標(biāo)和微信小程序技術(shù)，設(shè)計并實現(xiàn)了荊門園博園藍(lán)牙導(dǎo)覽系統(tǒng)，助力荊門園博園游園智慧化水平的提升。

1 系統(tǒng)的體系結(jié)構(gòu)

在荊門園博園藍(lán)牙導(dǎo)覽系統(tǒng)中，為園區(qū)內(nèi)每個展園或景點安裝低功耗藍(lán)牙信標(biāo)，每個信標(biāo)具有唯一的ID，并且連續(xù)廣播。游客進(jìn)入園區(qū)，打開微信小程序，在游玩的過程中接近某一展園，即可收到藍(lán)牙信號，從而自動播放該展園的音視頻和圖文等多媒體內(nèi)容，多維度地幫助游客體驗園林藝術(shù)的精華。導(dǎo)覽系統(tǒng)包含藍(lán)牙信標(biāo)、游客游覽微信小程序、后臺管理端、數(shù)據(jù)庫四大部分，系統(tǒng)體系結(jié)構(gòu)如圖1所示。

圖1 系統(tǒng)體系結(jié)構(gòu)

2 關(guān)鍵技術(shù)

2.1 藍(lán)牙信標(biāo)

藍(lán)牙信標(biāo)iBeacon是一款基于低功耗藍(lán)牙BLE廣播協(xié)議的硬件設(shè)備，兼容iBeacon協(xié)議或者Eddystone。BLE設(shè)備通常安裝在某個特定位置，作為固定位置的基準(zhǔn)點，向周圍連續(xù)廣播，不需要和任何主機(jī)設(shè)備進(jìn)行連接，只需要主機(jī)設(shè)備掃描解析廣播數(shù)據(jù)即可。藍(lán)牙信標(biāo)功耗低、待機(jī)時間長、不需要外部供電，具有安裝方便、成本較低、兼容適配性高的優(yōu)點。當(dāng)用戶接近藍(lán)牙信標(biāo)就會收到廣播信息，正好適用于園博園多個松散布局的展園。本導(dǎo)覽系統(tǒng)采用了E5定位型iBeacon藍(lán)牙信標(biāo)，可根據(jù)展園的大小設(shè)置功率，最大感應(yīng)范圍為150 m。每個藍(lán)牙信標(biāo)具有唯一的ID，并連續(xù)對外廣播ID數(shù)據(jù)。藍(lán)牙信標(biāo)能起到位置標(biāo)識的作用，當(dāng)游客打開藍(lán)牙并啟動微信小程序，即可接收藍(lán)牙廣播，解析ID，通過移動互聯(lián)網(wǎng)向服務(wù)器查詢該展園的多媒體信息。

2.2 藍(lán)牙數(shù)據(jù)的解析

本導(dǎo)覽系統(tǒng)中，通過微信小程序的uni-app組件解析藍(lán)牙廣播數(shù)據(jù)。uni-app是一個使用Vue.js開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）以及各種小程序、快應(yīng)用等[4]。uni-app框架中存在豐富的對低耗藍(lán)牙設(shè)備進(jìn)行監(jiān)聽、數(shù)據(jù)讀取的API，可實現(xiàn)對iBeacon硬件信息的獲取，相關(guān)API的詳細(xì)信息如表1所示。

表1 低功耗藍(lán)牙設(shè)備操作API摘要

藍(lán)牙信標(biāo)的廣播標(biāo)識數(shù)據(jù)結(jié)構(gòu)如圖2所示，標(biāo)識數(shù)據(jù)每個字段的含義如表2所示。

圖2 廣播標(biāo)識數(shù)據(jù)示例

表2 標(biāo)識數(shù)據(jù)的字段說明

2.3 微信小程序

微信小程序是小程序的一種，英文名為Wechat Mini Program，是一種不需要下載安裝即可使用的應(yīng)用，它實現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種全新的連接用戶與服務(wù)的方式，它可以在微信內(nèi)被便捷地獲取和傳播，同時具有出色的使用體驗。微信小程序提供了一個簡單、高效的應(yīng)用開發(fā)框架和豐富的組件及API，幫助開發(fā)者在微信中開發(fā)具有原生App體驗的服務(wù)。整個框架系統(tǒng)分為兩部分：邏輯層（App Service）和視圖層（View）。它提供了自己的視圖層描述語言WXML和WXSS以及基于JavaScript的邏輯層框架，并在視圖層與邏輯層之間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，讓開發(fā)者能夠?qū)Ｗ⒂跀?shù)據(jù)與邏輯[5]。

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

結(jié)合荊門園博園景點的特點和智慧導(dǎo)覽的需求，在園區(qū)內(nèi)32個展園固定位置上安裝藍(lán)牙信標(biāo)，游客進(jìn)入園區(qū)后，掃一掃二維碼，打開微信小程序，即可開啟智慧導(dǎo)覽。荊門園博園藍(lán)牙導(dǎo)覽系統(tǒng)包括兩大部分：微信小程序?qū)в[端和服務(wù)端，總體功能規(guī)劃如圖3所示。

圖3 系統(tǒng)功能規(guī)劃圖

3.1 園博園藍(lán)牙導(dǎo)覽微信小程序

園博園藍(lán)牙導(dǎo)覽微信小程序只是一個客戶端，在圖3規(guī)劃的功能點中，三個重要的模塊詳細(xì)功能描述如下。1）園博園地圖導(dǎo)覽模塊，在園博園的手繪地圖中，通過編程標(biāo)注每個展園的位置，初始狀態(tài)為灰色，表明未游覽；當(dāng)游客游覽后，該展園的標(biāo)識變?yōu)榧t色，表明已經(jīng)游覽，給游客一個清晰的游覽狀況展示。2）藍(lán)牙信標(biāo)監(jiān)聽模塊，它采用uni-app中的API時刻監(jiān)聽藍(lán)牙信標(biāo)，接收廣播標(biāo)識數(shù)據(jù)，解析信標(biāo)ID，然后向服務(wù)器查詢該展園的多媒體內(nèi)容，最后調(diào)用展園多媒體播放頁面進(jìn)行播放。3）展園多媒體播放模塊，主要用于播放當(dāng)前展園的圖文和音視頻內(nèi)容，自動實現(xiàn)多維度的展園內(nèi)容呈現(xiàn)。

3.2 服務(wù)端

服務(wù)端是荊門園博園藍(lán)牙導(dǎo)覽系統(tǒng)的核心，承擔(dān)著小程序客戶端的數(shù)據(jù)服務(wù)、基礎(chǔ)數(shù)據(jù)管理、系統(tǒng)設(shè)置、數(shù)據(jù)統(tǒng)計等功能。服務(wù)端主要功能模塊的詳細(xì)描述如表3所示。

表3 服務(wù)端主要功能描述

4 數(shù)據(jù)庫設(shè)計

根據(jù)導(dǎo)覽系統(tǒng)功能模塊的規(guī)劃，所涉及的主要數(shù)據(jù)實體有五個，它們所對應(yīng)的數(shù)據(jù)庫表分別是：展園數(shù)據(jù)表（exhibitstype）、信標(biāo)表（exhibits）、小程序授權(quán)表（prefixthird）、評論數(shù)據(jù)表（collection）、用戶表（user），這些表的字段定義和對應(yīng)的實體關(guān)聯(lián)關(guān)系如圖4所示。

圖4 E-R圖

5 系統(tǒng)的實現(xiàn)

5.1 開發(fā)平臺

Nest（NestJS）是一個用于構(gòu)建高效、可擴(kuò)展的Node.js服務(wù)器端應(yīng)用程序的開發(fā)框架。它利用JavaScript的漸進(jìn)增強(qiáng)的能力，使用并完全支持TypeScript（仍然允許開發(fā)者使用純JavaScript進(jìn)行開發(fā)），并結(jié)合了面向?qū)ο缶幊蘋OP、函數(shù)式編程FP和函數(shù)響應(yīng)式編程FRP。在底層，Nest構(gòu)建在強(qiáng)大的HTTP 服務(wù)器框架上，如Express，并且還可以通過配置使用Fastify[6]。Nest在這些常見的Node.js框架之上提高了一個抽象級別，但仍然向開發(fā)者直接暴露了底層框架的API。這使得開發(fā)者可以自由地使用底層平臺的無數(shù)第三方模塊[7]。

5.2 導(dǎo)覽微信小程序

導(dǎo)覽微信小程序基于uni-app組件進(jìn)行開發(fā)，開發(fā)模式為Vue的Template模板模式，開發(fā)完成后打包成微信小程序。在藍(lán)牙信標(biāo)監(jiān)聽模塊中使用uni.startBeaconDiscover()搜索附近的iBeacon信標(biāo)設(shè)備，根據(jù)搜索到的藍(lán)牙信標(biāo)的rssi值進(jìn)行升序排序，獲取此藍(lán)牙信標(biāo)的ID值，然后通過http請求，向服務(wù)端請求與之相匹配的展園多媒體數(shù)據(jù)，最后調(diào)用展園多媒體頁面進(jìn)行播放[8-9]。微信小程序主要頁面如圖5所示。

圖5 微信小程序主要頁面

5.3 服務(wù)端的實現(xiàn)

服務(wù)端的管理模塊主要使用Vue2+Element UI組件開發(fā)。頁面局部通信采用Axios插件，很好地兼容了不同的瀏覽器和屏幕的大小。服務(wù)端其他模塊主要使用Node.js的Express框架。數(shù)據(jù)庫采用了關(guān)系型數(shù)據(jù)庫mySql 5.7，進(jìn)行數(shù)據(jù)的長久化保存，根據(jù)移動端和管理端輸入的參數(shù)，實現(xiàn)對數(shù)據(jù)庫相關(guān)數(shù)據(jù)的查詢，并進(jìn)行數(shù)據(jù)返回[10]。數(shù)據(jù)管理端的展園列表的管理頁面如圖6所示。

圖6 展園列表管理頁面

6 結(jié)語

本研究設(shè)計并實現(xiàn)了基于微信小程序的荊門園博園藍(lán)牙導(dǎo)覽系統(tǒng)，旨在將景區(qū)的信息化服務(wù)向移動互聯(lián)網(wǎng)進(jìn)行延伸，適應(yīng)新時代游覽、生活的需要，提高園博園智慧游覽的體驗度。目前，該系統(tǒng)已經(jīng)進(jìn)行了局部測試，并進(jìn)行了完善和調(diào)優(yōu)，下一步將聯(lián)系荊門園博園管理處，進(jìn)行系統(tǒng)部署、試運行。課題組將不斷地努力改進(jìn)系統(tǒng)，也希望更多的研究人員、企業(yè)能參與進(jìn)來，助力文旅智慧化發(fā)展，助推鄉(xiāng)村振興。