陳冬君 孔海軍 吳 荷 饒 浩

（韶關(guān)學(xué)院信息工程學(xué)院，廣東 韶關(guān) 512005）

1 引言

基于隨車營(yíng)銷創(chuàng)意理念，研究和開發(fā)智能隨車營(yíng)銷平臺(tái)系統(tǒng)，能夠?qū)崿F(xiàn)在車上進(jìn)行購(gòu)物功能。本項(xiàng)目由乘客購(gòu)買貨品的微信小程序、擁有司機(jī)模式和補(bǔ)貨站模式的App 和PC端后臺(tái)管理系統(tǒng)三大部分組成。乘客可以通過手機(jī)掃碼“開箱”拿取機(jī)器中所售賣的貨品，司機(jī)會(huì)實(shí)時(shí)收到銷售信息，在售賣機(jī)器中的貨品庫(kù)存不足時(shí),司機(jī)將會(huì)收到補(bǔ)貨通知，司機(jī)自行補(bǔ)貨或預(yù)約附近補(bǔ)貨站發(fā)送補(bǔ)貨訂單，從而進(jìn)行補(bǔ)貨。補(bǔ)貨站在收到補(bǔ)貨請(qǐng)求后，準(zhǔn)備補(bǔ)貨訂單詳情中的貨品并登記補(bǔ)貨信息。同時(shí)項(xiàng)目還搭建了可視化系統(tǒng)和后臺(tái)管理系統(tǒng)，實(shí)時(shí)記錄銷售數(shù)據(jù)，設(shè)置相關(guān)商品信息以及打折方式，隨時(shí)隨地掌握銷售情況。本項(xiàng)目還可以通過在小程序、App、網(wǎng)約車投入相關(guān)廣告，從而獲得盈利。

2 架構(gòu)設(shè)計(jì)

系統(tǒng)前端采用uniapp框架、Vue、TypeScript、vite、Nginx、Linux、axios、微信小程序技術(shù)，結(jié)合UI 設(shè)計(jì)，基于uniapp 框架搭建移動(dòng)端App、微信小程序技術(shù)搭建微信小程序平臺(tái)和Vue3、vite、TypeScript 搭建PC 端并通過Nginx 等前端服務(wù)器方式部署靜態(tài)資源，且均采用了aixos 技術(shù)實(shí)現(xiàn)進(jìn)行服務(wù)器數(shù)據(jù)請(qǐng)求和接收[1]。

系統(tǒng)后端采用SpringBoot快速構(gòu)建Web應(yīng)用程序，使用Mybatis-plus對(duì)數(shù)據(jù)進(jìn)行持久化操作，使用Redis作為緩存[2]，采用MySQL、MongoDB數(shù)據(jù)庫(kù)，使用WebSocket技術(shù)在瀏覽器和Web服務(wù)器之間建立雙向通信，采用Docker容器技術(shù)對(duì)應(yīng)用程序進(jìn)行打包部署到linux服務(wù)器上，使用Nginx作為反向代理服務(wù)器，采取前后端分離式開發(fā)[3,4]，遵循RESTful API風(fēng)格來設(shè)計(jì)和開發(fā)API接口。

3 系統(tǒng)框架

智能隨車營(yíng)銷系統(tǒng)主要由微信小程序、App、PC端三大部分組成。具體實(shí)現(xiàn)功能模塊劃分如圖1所示。

圖1 隨車營(yíng)銷系統(tǒng)總體框架

乘客小程序有三大模塊：購(gòu)物模塊、個(gè)人信息模塊、訂單模塊。實(shí)現(xiàn)乘客通過出租車的廣告屏微信掃碼進(jìn)入小程序，授權(quán)登錄后跟著引導(dǎo)進(jìn)入首頁，可看到該司機(jī)售賣的產(chǎn)品，點(diǎn)擊去開鎖按鈕，進(jìn)行開鎖、取商品、關(guān)鎖、生成訂單，完成支付購(gòu)物流程。乘客可以進(jìn)行個(gè)人信息的修改。

App端有兩大模式，分別為司機(jī)模式和補(bǔ)貨站模式。司機(jī)模式有四大模塊：掃碼綁定機(jī)器、商品管理、補(bǔ)貨模塊、統(tǒng)計(jì)模塊；補(bǔ)貨站模式有兩大模塊：訂單模塊和商品管理。主要實(shí)現(xiàn)司機(jī)利用已綁定的機(jī)器進(jìn)行售賣商品，補(bǔ)貨站為司機(jī)提供進(jìn)貨功能。

PC 端有兩大模塊：統(tǒng)一后臺(tái)管理系統(tǒng)和數(shù)據(jù)可視化大屏兩大模塊。管理員可以根據(jù)注冊(cè)賬號(hào)和登錄功能進(jìn)入管理平臺(tái)，可以查看收益數(shù)據(jù)、投放廣告功能、管理商品等，如圖2所示。

圖2 平臺(tái)數(shù)據(jù)界面

4 商務(wù)功能模塊

4.1 購(gòu)物

乘客用戶通過出租車的廣告屏微信掃碼進(jìn)入小程序，微信授權(quán)登錄，填寫個(gè)人信息，并發(fā)送微信臨時(shí)登錄憑證至服務(wù)器，服務(wù)器接收數(shù)據(jù)后，進(jìn)行登錄驗(yàn)證，生成微信登錄唯一標(biāo)識(shí)oppenId[5]，并將用戶信息存儲(chǔ)在數(shù)據(jù)庫(kù)表中，界面通過收到服務(wù)器從數(shù)據(jù)庫(kù)中獲取的信息，利用for 循環(huán)進(jìn)行動(dòng)態(tài)渲染，用戶跟著引導(dǎo)進(jìn)入首頁，查看該司機(jī)售賣的全部產(chǎn)品，點(diǎn)擊去開鎖按鈕，進(jìn)行機(jī)器開鎖，將機(jī)器的唯一標(biāo)識(shí)機(jī)器編碼發(fā)送至服務(wù)器，當(dāng)用戶拿取商品時(shí)，儲(chǔ)柜內(nèi)置攝像頭采用OpenMV 圖像處理模塊[6]，將用戶拿取的商品信息反饋給服務(wù)器，服務(wù)器接收到數(shù)據(jù)自動(dòng)生成訂單發(fā)送至小程序?qū)崿F(xiàn)頁面的跳轉(zhuǎn)至訂單詳情頁面，完成關(guān)鎖、生成訂單、完成支付流程。乘客也可以根據(jù)儲(chǔ)柜的產(chǎn)品進(jìn)行搜索購(gòu)買，將搜索關(guān)鍵詞發(fā)送至服務(wù)器，服務(wù)器通過對(duì)數(shù)據(jù)庫(kù)表中的數(shù)據(jù)進(jìn)行查詢，進(jìn)而對(duì)頁面重新渲染。具體流程如圖3所示。

圖3 購(gòu)物模塊流程設(shè)計(jì)圖

4.2 添加商品

添加商品功能僅提供給司機(jī)和補(bǔ)貨站用戶，主要是司機(jī)對(duì)所綁定的售賣機(jī)器中的貨品進(jìn)行管理，補(bǔ)貨站用戶對(duì)補(bǔ)貨站所售賣的貨品進(jìn)行管理。為了方便用戶的使用，提供了兩種添加貨品方式，分別為手動(dòng)添加和拍照識(shí)別添加。手動(dòng)添加是由用戶手動(dòng)添加上售賣的產(chǎn)品信息，拍照識(shí)別技術(shù)是用戶通過攝像頭拍攝貨品，進(jìn)行貨品的識(shí)別，用戶也可以在額外手動(dòng)修改貨品信息。通過axios 技術(shù)發(fā)送GET 或POST 請(qǐng)求將用戶填寫的數(shù)據(jù)發(fā)送至服務(wù)器，由服務(wù)器對(duì)收到的全部數(shù)據(jù)進(jìn)行清洗和提取有效數(shù)據(jù)，并添加到數(shù)據(jù)庫(kù)表中。具體流程如圖4所示。

圖4 添加商品模塊流程設(shè)計(jì)圖

4.3 補(bǔ)貨

當(dāng)車內(nèi)售賣機(jī)器存庫(kù)不足時(shí)，司機(jī)可通過自行補(bǔ)貨或預(yù)約附近補(bǔ)貨站進(jìn)行補(bǔ)貨。客戶端獲得到司機(jī)當(dāng)前的定位信息，并將定位信息發(fā)送到服務(wù)器根據(jù)當(dāng)前定位信息將查詢到的附近補(bǔ)貨站的相關(guān)信息發(fā)送至App，實(shí)現(xiàn)界面動(dòng)態(tài)渲染。因此司機(jī)用戶通過使用App查找附近補(bǔ)貨站，服務(wù)端查詢附近補(bǔ)貨站功能具體實(shí)現(xiàn)：根據(jù)請(qǐng)求的路徑（@GetMapping("select/{longitude}/{latitude}")），從路徑參數(shù)中獲取經(jīng)度和緯度。創(chuàng)建一個(gè)Point 對(duì)象，用于表示給定的經(jīng)度和緯度。創(chuàng)建一個(gè)NearQuery 對(duì)象，并設(shè)置最大距離為20 公里。該對(duì)象表示一個(gè)地理位置查詢，指定查詢附近的位置。使用mongoTemplate 對(duì)象執(zhí)行地理位置查詢，返回一個(gè)GeoRes-ults 對(duì)象，其中包含了附近位置的結(jié)果。創(chuàng)建一個(gè)空的ArrayList 對(duì)象，用于存儲(chǔ)查詢結(jié)果中的位置信息。遍歷查詢結(jié)果中的每個(gè)地理位置。獲取當(dāng)前地理位置的內(nèi)容（SupplementMap 類型），即具體的位置信息。將當(dāng)前位置信息添加到位置信息列表中。構(gòu)建一個(gè)成功的響應(yīng)對(duì)象，并將查詢到的位置信息列表作為數(shù)據(jù)返回。響應(yīng)對(duì)象使用自定義的R類型，使用R.ok() 表示成功的狀態(tài)，R.ok().data("map",locations)表示將位置信息列表作為名為"map"的屬性添加到響應(yīng)中。

司機(jī)查詢到附近補(bǔ)貨站并發(fā)起訂單申請(qǐng)，在客戶端應(yīng)用程序中填寫訂單信息，將訂單信息發(fā)送到服務(wù)器端。服務(wù)器端接收到訂單信息后，將其保存到Redis 數(shù)據(jù)庫(kù)中，生成一個(gè)唯一標(biāo)識(shí)符（Order ID）用于標(biāo)識(shí)該訂單。訂單信息推送給補(bǔ)貨站端：補(bǔ)貨站終端通過WebSocket 連接到服務(wù)器端。當(dāng)有新的訂單申請(qǐng)時(shí)，服務(wù)器從Redis 數(shù)據(jù)庫(kù)中獲取訂單信息，并使用WebSocket 將訂單信息推送給補(bǔ)貨站端。實(shí)時(shí)更新訂單狀態(tài)：補(bǔ)貨站通過WebSocket 接收到司機(jī)發(fā)來的訂單信息后，可以選擇接單或者拒單進(jìn)行訂單處理。如果補(bǔ)貨站選擇接單，訂單狀態(tài)將更新為“已接單”，并將訂單信息持久化存儲(chǔ)到MySQL 數(shù)據(jù)庫(kù)中。如果補(bǔ)貨站選擇拒單，訂單狀態(tài)將更新為“拒絕接單”。服務(wù)器通過Websocket將更新的訂單狀態(tài)信息推送到司機(jī)端，以便司機(jī)實(shí)時(shí)獲取訂單狀態(tài)信息。App中的補(bǔ)貨站模式全局掛載著監(jiān)聽事件，當(dāng)收到補(bǔ)貨訂單時(shí)，頁面將實(shí)現(xiàn)彈窗功能，將彈窗盒子的布局由不顯示變?yōu)轱@示，點(diǎn)擊彈窗內(nèi)按鈕實(shí)現(xiàn)查看訂單詳情，實(shí)現(xiàn)補(bǔ)貨站收到補(bǔ)貨請(qǐng)求信息。具體流程如圖5所示。

圖5 補(bǔ)貨模塊流程設(shè)計(jì)圖

5 數(shù)據(jù)呈現(xiàn)

智能隨車營(yíng)銷系統(tǒng)需要對(duì)大量數(shù)據(jù)進(jìn)行處理，包括司機(jī)的個(gè)人的賬單收支情況、補(bǔ)貨站的銷售情況、區(qū)域廣告投放情況、司機(jī)和補(bǔ)貨站分布情況、商品銷售情況等。通過數(shù)據(jù)分析技術(shù)建立廣告投放數(shù)據(jù)倉(cāng)庫(kù)模型和商品銷售數(shù)據(jù)倉(cāng)庫(kù)模型，對(duì)于大量臃腫的數(shù)據(jù)，采用mysql+Echarts技術(shù)將大量數(shù)據(jù)進(jìn)行分類并圖形化展示，來方便用戶更直觀地分析數(shù)據(jù)；也可以精準(zhǔn)判斷出具有較高商業(yè)價(jià)值的用戶行為，可以掌握用戶的購(gòu)買行為和偏好，為用戶提供購(gòu)買建議，激發(fā)用戶的購(gòu)買欲望[7]。

補(bǔ)貨站分布地圖顯示：通過服務(wù)器返回的所有補(bǔ)貨站的信息，提取json 格式的補(bǔ)貨站地理位置的經(jīng)緯度數(shù)據(jù)，創(chuàng)建中國(guó)地圖的Echarts 實(shí)例，通過series 屬性對(duì)實(shí)例進(jìn)行繪制，將提取的數(shù)據(jù)渲染到繪制好的圖表地圖上，根據(jù)補(bǔ)貨站的商品情況，當(dāng)管理員點(diǎn)擊某個(gè)補(bǔ)貨站的位置點(diǎn)時(shí)，將該補(bǔ)貨站的商品情況返回到界面上。

廣告投放：針對(duì)廣告投放數(shù)據(jù)倉(cāng)庫(kù)中廣告播放量、播放時(shí)長(zhǎng)等數(shù)據(jù)進(jìn)行分析，對(duì)區(qū)域投放廣告。小程序從數(shù)據(jù)庫(kù)獲取到投放廣告的相關(guān)數(shù)據(jù)后，通過讀取視頻url地址，使用vedio 標(biāo)簽和swipers 組件，實(shí)現(xiàn)廣告視頻自動(dòng)輪播并自動(dòng)播放功能。

銷售匯總：針對(duì)商品銷售數(shù)據(jù)倉(cāng)庫(kù)中總銷售額、訂單數(shù)等數(shù)據(jù)進(jìn)行分析，在組件剛掛載的時(shí)候，向服務(wù)器發(fā)送GET請(qǐng)求，收到服務(wù)器發(fā)送過來的json 格式的數(shù)據(jù)，將渲染在已創(chuàng)建并通過series 屬性進(jìn)行繪制的Echarts 實(shí)例上,將實(shí)例映射到文檔對(duì)象模型(DOM)[8]。如圖6，可以直觀地觀察到銷售數(shù)據(jù)的整體走勢(shì)。例如銷售額折線，在1 月至4 月數(shù)據(jù)整體是趨于穩(wěn)定的，在4 月至5 月，數(shù)據(jù)逐漸下降甚至達(dá)到谷值，在6月至12月，數(shù)據(jù)逐漸增長(zhǎng)并趨于穩(wěn)定。通過數(shù)據(jù)變化趨勢(shì)可以看出整體趨勢(shì)相對(duì)穩(wěn)定。通過比較各個(gè)月份商品銷售的差異，可以找出銷售的周期性規(guī)律、趨勢(shì)和數(shù)據(jù)的異常趨勢(shì)，例如，1月至4月和7月至12月，有季節(jié)性波動(dòng)，但整體趨勢(shì)相對(duì)穩(wěn)定，而5月至7月，數(shù)據(jù)逐漸增長(zhǎng)。對(duì)此可以調(diào)整銷售策略，從而實(shí)現(xiàn)銷售利潤(rùn)最大化。

圖6 銷售匯總數(shù)據(jù)呈現(xiàn)圖

裝機(jī)數(shù)量：指已安裝并綁定售賣的全部機(jī)器的數(shù)量。通過mysql 語句查詢機(jī)器綁定表的全部有效數(shù)據(jù)[9]，在組件掛載在頁面的時(shí)候，向服務(wù)器發(fā)送GET請(qǐng)求，將數(shù)據(jù)渲染在已創(chuàng)建并繪制好的Echarts實(shí)例上，將實(shí)例映射到文檔對(duì)象模型(DOM)。如圖7，從折線圖可以直觀地看出每個(gè)月份的總裝機(jī)數(shù)量，如4 月的裝機(jī)數(shù)量達(dá)到峰值，且數(shù)據(jù)整體呈上升趨勢(shì)。對(duì)此，可以適當(dāng)增加補(bǔ)貨站的商品數(shù)量或者增加新的補(bǔ)貨站站點(diǎn)。

圖7 裝機(jī)數(shù)量數(shù)據(jù)呈現(xiàn)圖

6 結(jié)語

本項(xiàng)目采用Vue、Springboot 技術(shù)，搭建微信小程序、App、PC 端三個(gè)平臺(tái)，在頁面設(shè)計(jì)上，以簡(jiǎn)單易用、直觀友好為第一要點(diǎn)，提供指引使用操作，使得用戶能夠快速地了解營(yíng)銷活動(dòng)的信息和優(yōu)惠，司機(jī)和補(bǔ)貨站用戶可以快捷方便使用；并提供了通過不同設(shè)備的分辨力和尺寸大小進(jìn)行頁面的自適應(yīng)，保證了頁面的美觀。在激烈的市場(chǎng)中，隨車營(yíng)銷平臺(tái)作為運(yùn)營(yíng)商和車主之間的橋梁，具有便利的交互模式和較好的用戶體驗(yàn)，可以提升運(yùn)營(yíng)商與客戶之間的溝通和交流效率。