基于React Native的校園二手物品競(jìng)拍平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)

鐘愛(ài)青

摘要：隨著互聯(lián)網(wǎng)的迅速發(fā)展，電子商務(wù)中的“非主流”購(gòu)物形式——網(wǎng)絡(luò)競(jìng)拍也快速興起，本文將通過(guò)講述電商的基礎(chǔ)知識(shí)、競(jìng)拍的應(yīng)用場(chǎng)景，讓學(xué)生可以對(duì)電商有一個(gè)立體的了解。通過(guò)詳細(xì)介紹如何創(chuàng)建一個(gè)用于閑置物品的競(jìng)拍系統(tǒng)，展示了電商競(jìng)拍系統(tǒng)的設(shè)計(jì)過(guò)程與實(shí)現(xiàn)過(guò)程。

關(guān)鍵詞：電商競(jìng)拍；移動(dòng)開(kāi)發(fā)；React Native

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2018）16-0089-03

1 引言

主流的電子商務(wù)銷售形式主要有零售、秒殺、團(tuán)購(gòu)、競(jìng)拍。

“零售”是最基本的電商模式，指在電商平臺(tái)（如淘寶，京東）上開(kāi)虛擬店鋪，銷售固定價(jià)格的商品。零售的商品多式多樣，而秒殺的商品一般價(jià)格低廉或者是資源有限的商品。團(tuán)購(gòu)類似于線下的批發(fā)購(gòu)買行為，但網(wǎng)上的團(tuán)購(gòu)行為的是各地相互不認(rèn)識(shí)的消費(fèi)者，以購(gòu)物數(shù)量尋得商品的最優(yōu)惠價(jià)格的購(gòu)物方式。

“競(jìng)拍”，跟線下拍賣場(chǎng)競(jìng)拍一樣，本質(zhì)上是以競(jìng)爭(zhēng)價(jià)格為核心，達(dá)到價(jià)格最優(yōu)的市場(chǎng)經(jīng)濟(jì)過(guò)程。借助于拍賣網(wǎng)站，商家發(fā)布要拍賣的商品或服務(wù)，設(shè)定起拍價(jià)和保留價(jià)。消費(fèi)者通過(guò)拍賣網(wǎng)絡(luò)或APP在固定時(shí)間內(nèi)一起出價(jià)，最終出價(jià)最高的消費(fèi)者如果超過(guò)了保留價(jià)，則商品成交，否則則流拍。

競(jìng)拍的應(yīng)用場(chǎng)景非常多，理論上任何東西都可以采用競(jìng)拍的形式出售。但是競(jìng)拍作為一種博弈行為，首先其商品價(jià)值不能是大家顯而易知的，其次其數(shù)量也不能多?，F(xiàn)在流行的場(chǎng)景主要有藝術(shù)品拍賣，司法拍賣，二手車或二手物品拍賣等。

我校每年都會(huì)舉辦“循環(huán)利用 環(huán)保機(jī)械”的校園跳蚤市場(chǎng)活動(dòng)，為學(xué)生提供一個(gè)互利互惠的交易平臺(tái)，活動(dòng)交易物品大多為二手物品，如小桌子、書籍、電子產(chǎn)品、化妝小贈(zèng)品等。這些物品大多不好定價(jià)，但如果消費(fèi)者和商家選用這種“競(jìng)拍”模式一起可以影響這個(gè)價(jià)格，這樣就可以讓這些物品價(jià)格達(dá)到最優(yōu)。

根據(jù)二手物品拍賣平臺(tái)的分析，設(shè)計(jì)和開(kāi)發(fā)一個(gè)適合校內(nèi)電子商務(wù)實(shí)訓(xùn)班級(jí)的二手物品電商競(jìng)拍平臺(tái)，即可迎合學(xué)校舉辦的校園跳蚤市場(chǎng)活動(dòng)，又可讓實(shí)訓(xùn)班級(jí)的學(xué)生了解到電商拍賣的技巧和細(xì)節(jié)。

2 需求分析

通過(guò)對(duì)系統(tǒng)目標(biāo)人群的分析，系統(tǒng)的目標(biāo)用戶角色包括以學(xué)生及教師在內(nèi)的用戶及管理后臺(tái)系統(tǒng)的管理員。學(xué)生與教師是主要使用者，包括注冊(cè)、登錄、瀏覽二手物品、競(jìng)拍等；管理員負(fù)責(zé)審核用戶信息及競(jìng)拍物品的信息管理。具體如圖1。

競(jìng)拍管理及物品管理是競(jìng)拍系統(tǒng)的主體內(nèi)容，在物品管理中，用戶可以使用APP隨時(shí)上傳二手物品，查看已成交的物品等；在競(jìng)拍管理中，用戶可以在APP時(shí)查看競(jìng)拍大廳中正在競(jìng)拍的物品，對(duì)自己喜歡的物品出價(jià)。管理員可以對(duì)違規(guī)發(fā)布用戶禁止登錄或者發(fā)布信息，同時(shí)可以下架違反競(jìng)拍條款的競(jìng)拍物品。

3 用例實(shí)現(xiàn)

在該系統(tǒng)中，每個(gè)角色用戶有各自不同的用例，下面選取了用戶競(jìng)拍模塊，通過(guò)文字和時(shí)序圖介紹用例的實(shí)現(xiàn)過(guò)程。

競(jìng)拍是系統(tǒng)最重要的模塊，包括了系統(tǒng)主要的功能：發(fā)拍、競(jìng)拍大廳、出價(jià)、定時(shí)、緩存隊(duì)列等；用戶上傳的競(jìng)拍物品會(huì)展示在競(jìng)拍大廳中，其他用戶通過(guò)APP在競(jìng)拍大廳瀏覽物品，對(duì)自己喜歡的物品出價(jià)，為了系統(tǒng)的高性能，出價(jià)信息在競(jìng)拍過(guò)程中只會(huì)插入到緩存隊(duì)列redis中，redis是一個(gè)內(nèi)存數(shù)據(jù)庫(kù)，具有備份功能，不用擔(dān)心數(shù)據(jù)會(huì)丟失；競(jìng)拍服務(wù)模塊還會(huì)將該出價(jià)信息廣播到其他正在瀏覽該物品的用戶的APP上，使所有用戶都知道最新的競(jìng)拍出價(jià)。定時(shí)服務(wù)會(huì)監(jiān)聽(tīng)競(jìng)拍物品的到期時(shí)間，當(dāng)?shù)搅私Y(jié)束時(shí)間，定時(shí)服務(wù)會(huì)通知競(jìng)拍服務(wù)關(guān)閉出價(jià)功能，同時(shí)保存出價(jià)數(shù)據(jù)到數(shù)據(jù)庫(kù)。

用戶通過(guò)APP上傳需要競(jìng)拍的物品的圖片，設(shè)置物品的起拍價(jià)，保留價(jià)，起拍時(shí)間，點(diǎn)擊發(fā)拍，物品信息就會(huì)通過(guò)物品服務(wù)API保存到數(shù)據(jù)庫(kù)中，同時(shí)調(diào)用定時(shí)服務(wù)插入一個(gè)定時(shí)記錄，在系統(tǒng)的發(fā)拍規(guī)則中，起拍價(jià)小于保留價(jià)，用戶在經(jīng)過(guò)幾輪（>=1）的出價(jià)后，物品最高出價(jià)如果大于保留價(jià)，則最高出價(jià)用戶競(jìng)得該物品；系統(tǒng)定時(shí)器會(huì)在起拍時(shí)間前30分鐘調(diào)用消息服務(wù)發(fā)送消息通知用戶該物品競(jìng)拍開(kāi)始，消息的發(fā)送會(huì)通過(guò)APP內(nèi)推送的方式發(fā)送；起拍時(shí)間到時(shí)，定時(shí)器會(huì)調(diào)用競(jìng)價(jià)API更新物品的拍賣狀態(tài)為拍賣中，這時(shí)用戶就可以通過(guò)APP出價(jià)競(jìng)拍了。

4 原理與技術(shù)

4.1 系統(tǒng)架構(gòu)

一個(gè)典型的競(jìng)拍平臺(tái)需要提供一個(gè)APP及一個(gè)管理平臺(tái)。

APP提供了添加物品，消費(fèi)者集中競(jìng)價(jià)，支付，瀏覽物品，查找物品等功能。

管理平臺(tái)提供了電商管理員審核物品，管理用戶等管理流程。

從架構(gòu)上，系統(tǒng)分為了數(shù)據(jù)層，服務(wù)層，接入層，中間件層。

數(shù)據(jù)層提供了數(shù)據(jù)的存儲(chǔ)及查詢，包括了基礎(chǔ)數(shù)據(jù)庫(kù)，用戶數(shù)據(jù)庫(kù)，訂單庫(kù)，物品庫(kù)，緩存數(shù)據(jù)庫(kù)等。

服務(wù)層將平臺(tái)提供的業(yè)務(wù)功能進(jìn)行垂直的細(xì)粒度劃分，包括了用戶，物品，競(jìng)價(jià)，訂單等微服務(wù)。

接入層提供了各個(gè)模塊需要的API，包括APP API，管理平臺(tái)API等。

第三方服務(wù)層集成了系統(tǒng)需要使用到的第三方廠商提供的服務(wù)，如支付需要采用支付寶或微信的支付SDK，短信需要使用阿里的服務(wù)等。

4.2 APP開(kāi)發(fā)框架

目前主流的APP開(kāi)發(fā)方式有基于原生（iOS或者Android）開(kāi)發(fā)，基于html5的H5開(kāi)發(fā)，基于Javascript與原生（iOS或者Android）的混合開(kāi)發(fā)方式。

Native開(kāi)發(fā)方式需要同時(shí)開(kāi)發(fā)IOS版本及ANDROID版本，開(kāi)發(fā)工作量大，復(fù)雜，周期長(zhǎng)，開(kāi)發(fā)出來(lái)的界面也不統(tǒng)一，但是采用原生的組件及API，性能及操作體驗(yàn)是最好的。

H5采用html5+js來(lái)寫組件及操作，運(yùn)行于Web瀏覽器環(huán)境上。只需要開(kāi)發(fā)一次，就可以在多種手機(jī)系統(tǒng)上運(yùn)行。但由于HTML5技術(shù)目前還不夠成熟，仍然存在一些重大的局限性，具體包括會(huì)話管理、安全離線存儲(chǔ)以及訪問(wèn)原生設(shè)備功能（攝像頭、日歷和地理位置等）。特點(diǎn)是開(kāi)發(fā)簡(jiǎn)單，工作量小，跨平臺(tái)，但是受限于js的性能，開(kāi)發(fā)出來(lái)的APP性能及操作體驗(yàn)都比較差，一般只適合于閱讀類的APP，對(duì)于強(qiáng)交互類的APP（ 如競(jìng)拍APP）不適合，經(jīng)常性會(huì)有卡頓的現(xiàn)象。

JS+Native混合開(kāi)發(fā)方式是近年流行的開(kāi)發(fā)方式。這種方法用JavaScript調(diào)起native 組件，將增強(qiáng)與高性能組件交給 native來(lái)處理，JavaScript 負(fù)責(zé)頁(yè)面布局，樣式，轉(zhuǎn)發(fā)事件及控制系統(tǒng)流程。既擁有原生系統(tǒng)流暢的用戶體驗(yàn)、又保留HTML5快速的開(kāi)發(fā)效率。

5 系統(tǒng)的難點(diǎn)

一個(gè)實(shí)時(shí)的出價(jià)大概包含下面三個(gè)過(guò)程： 一個(gè)或者多個(gè)用戶關(guān)注著某一個(gè)拍品當(dāng)其中某個(gè)用戶出價(jià)后，更新數(shù)據(jù)庫(kù)中該拍品的信息，將最新的拍品信息反應(yīng)到關(guān)注該拍品用戶的客戶端上。簡(jiǎn)單來(lái)說(shuō)就是：“當(dāng)拍品出價(jià)成功后，取得最新的拍品信息，推送給關(guān)注該拍品的所有用戶”。如果用戶量少，系統(tǒng)其實(shí)不需要做什么設(shè)計(jì)，但是如果用戶量上十萬(wàn)、上百萬(wàn)，那么系統(tǒng)架構(gòu)的問(wèn)題就體現(xiàn)出來(lái)了。

根據(jù)競(jìng)拍的特點(diǎn)，系統(tǒng)的實(shí)現(xiàn)難點(diǎn)體現(xiàn)在系統(tǒng)需要滿足高流量訪問(wèn)，高并發(fā)請(qǐng)求數(shù)據(jù)，實(shí)時(shí)性要求。

對(duì)于高流量，高并發(fā)訪問(wèn)，我們可以采用分而治之的思想，采用分布式群集服務(wù)器，將大量的訪問(wèn)分流到不同的服務(wù)器上，增加服務(wù)器負(fù)載均衡控制，將流量平分到各服務(wù)器，避免單個(gè)服務(wù)器由于負(fù)載過(guò)重而掛掉。

競(jìng)價(jià)對(duì)實(shí)時(shí)性要求非常高，所有參與用戶需要實(shí)時(shí)知道當(dāng)前的最高價(jià)，要實(shí)時(shí)拍品信息實(shí)時(shí)更新，采用傳統(tǒng)的界面定時(shí)刷新方式已經(jīng)不滿足業(yè)務(wù)場(chǎng)景的需求，必須采用實(shí)時(shí)性更高的服務(wù)端推送方式。而客戶端想要得到服務(wù)端推送的信息，實(shí)際上需要和服務(wù)端建立一個(gè)長(zhǎng)連接，這樣服務(wù)端才能通過(guò)這個(gè)連接把信息傳遞到客戶端，也就是所謂“推”的概念。

在這個(gè)項(xiàng)目中我們將采用高性能的實(shí)時(shí)消息服務(wù)框架socket.io來(lái)開(kāi)發(fā)實(shí)現(xiàn)我們的競(jìng)價(jià)功能。Socket.io具有非常高的性能，一臺(tái)普通的1CPU，4G內(nèi)存的機(jī)器就可以支持并發(fā)30000以上的長(zhǎng)連接及每秒140000以上的實(shí)時(shí)消息；并且socket.io服務(wù)端還支持分布式擴(kuò)展及部署，當(dāng)用戶非常大的時(shí)間，可以通過(guò)增加群集服務(wù)器的方式來(lái)擴(kuò)展系統(tǒng)的能力，而且增加服務(wù)器是動(dòng)態(tài)的，不需要系統(tǒng)關(guān)機(jī)或者停止服務(wù)，對(duì)于用戶而言是透明的。

綜上所述，Socket.io非常適合競(jìng)拍平臺(tái)高性能及分布式群集的架構(gòu)要求。

6 關(guān)鍵代碼及效果

本系統(tǒng)的實(shí)現(xiàn)涉及APP開(kāi)發(fā)及后臺(tái)服務(wù)接口的開(kāi)發(fā)，APP開(kāi)發(fā)需要在Node.js開(kāi)發(fā)環(huán)境下使用React Native框架開(kāi)發(fā)；后臺(tái)服務(wù)接口需要在JAVA開(kāi)發(fā)環(huán)境下使用Jboot框架開(kāi)發(fā)。接下來(lái)將以在線競(jìng)拍模塊作為典型功能模塊為例，通過(guò)關(guān)鍵代碼介紹系統(tǒng)的詳細(xì)實(shí)現(xiàn)過(guò)程。

React Native是目前最流行的混合開(kāi)發(fā)框架，由Facebook于2015年開(kāi)源，目前許多電商公司都采用該框架來(lái)開(kāi)發(fā)APP。

Jboot是一個(gè)用于JAVA語(yǔ)言開(kāi)發(fā)的類似于spring boot的微服務(wù)開(kāi)發(fā)框架。Jboot框架為開(kāi)發(fā)后臺(tái)服務(wù)提供了大量的基礎(chǔ)功能，如數(shù)據(jù)存儲(chǔ)，緩存，API文檔等。

6.1競(jìng)拍大廳

競(jìng)拍大廳展示了系統(tǒng)正在競(jìng)拍中的物品，是系統(tǒng)的主要入口，代碼如下：

componentWillMount（） {//界面將要打開(kāi)的時(shí)候

InteractionManager.runAfterInteractions（（ ） => {

This.props.dispatch（{type： types.FETCH_BIDDATA_LIST }） //發(fā)送數(shù)據(jù)加載命令

}）}

該方法在競(jìng)拍大廳界面打開(kāi)之前先發(fā)送加載競(jìng)拍物品列表數(shù)據(jù)的命令到消息中心，消息中心監(jiān)聽(tīng)到命令之后將調(diào)用后臺(tái)服務(wù)接口返回?cái)?shù)據(jù)并顯示到界面上。

export function* watchBidList（） {//監(jiān)聽(tīng)數(shù)據(jù)請(qǐng)求事件

yield [call（handleBidListAction）] }//從后臺(tái)服務(wù)接口獲取數(shù)據(jù)

加入InteractionManager.runAfterInteractions可以告訴系統(tǒng)先運(yùn)行交互動(dòng)畫再執(zhí)行數(shù)據(jù)請(qǐng)求，可以使頁(yè)面動(dòng)畫更流暢。

效果如下：

實(shí)現(xiàn)后臺(tái)獲取總價(jià)物品列表的API接口， 返回?cái)?shù)據(jù)給前端：

List cars = carService.loadBidList（getParaToInt（"pageNo"））； //加載競(jìng)拍數(shù)據(jù)

renderJson（cars ）；//以JSON格式數(shù)據(jù)的形式返回給前端

6.2 使用socket.io實(shí)現(xiàn)實(shí)時(shí)出價(jià)功能

在后端代碼中加入啟動(dòng)socket server代碼，并監(jiān)聽(tīng)出價(jià)事件，如果有出價(jià)事件，則調(diào)用物品服務(wù)保存。

//當(dāng)收到前端出價(jià)事件

public void onData（SocketIOClientclient，JSONObjectdata，AckRequestackRequest） {

String price = productService .addBid（data）；//調(diào)用物品服務(wù)API保存數(shù)據(jù)

//通知其他人已經(jīng)有人出價(jià)，需要刷新頁(yè)面上的最高價(jià)信息

server.getBroadcastOperations（）.sendEvent（"update"，price）；}

前端APP添加出價(jià)事件，當(dāng)用戶點(diǎn)擊出價(jià)時(shí)，將出價(jià)信息實(shí)時(shí)發(fā)送到服務(wù)端。

onBid（） {

socket.emit（'event'，{ user： '1'，price： 5，id： bidDetail.id }）；}

點(diǎn)擊我的要價(jià)，這時(shí)會(huì)發(fā)送加價(jià)5的信息到后端，后端保存出價(jià)信息之后會(huì)通知所有連接到該頁(yè)面的客戶端刷新頁(yè)面的最高價(jià)信息，效果如下圖：

9 總結(jié)

通過(guò)校園二手物品拍賣平臺(tái)，對(duì)于學(xué)生而言，使用APP競(jìng)拍二手物品，能夠更好地響應(yīng)學(xué)校舉辦的“循環(huán)利用 環(huán)保機(jī)械” 校園跳蚤市場(chǎng)活動(dòng)，也增加了校園生活的樂(lè)趣；對(duì)于專業(yè)的電商學(xué)生而言，通過(guò)拍賣平臺(tái)能夠?qū)W習(xí)到競(jìng)拍模式的規(guī)則，一般電商公司的商業(yè)模式，電商APP的開(kāi)發(fā)知識(shí)，有利于學(xué)生加深對(duì)電商專業(yè)的認(rèn)識(shí)；對(duì)于教師而言，可以將該平臺(tái)作為一個(gè)電商實(shí)訓(xùn)項(xiàng)目，向?qū)W生傳輸電商APP基本知識(shí)，增加學(xué)生的項(xiàng)目經(jīng)驗(yàn)，為學(xué)生增加就業(yè)的亮點(diǎn)。

參考文獻(xiàn)：

[1] 傅宏智，黃亮.校園二手商品交易平臺(tái)中物品競(jìng)價(jià)拍賣的設(shè)計(jì)與實(shí)現(xiàn)[J].中國(guó)新通信，2016（9）.

[2] 阮一峰. React入門實(shí)例教程[EB/OL] http：//www.ruanyifeng.com/blog/2015/03/react.html.

[3] 趙步逵.個(gè)人商品競(jìng)拍網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)[D]. 北京：中國(guó)地質(zhì)大學(xué)（北京），2013.