基于React Native的校园二手物品竞拍平台的设计与实现
2018-09-14钟爱青
钟爱青
摘要：随着互联网的迅速发展，电子商务中的“非主流”购物形式——网络竞拍也快速兴起，本文将通过讲述电商的基础知识、竞拍的应用场景，让学生可以对电商有一个立体的了解。通过详细介绍如何创建一个用于闲置物品的竞拍系统，展示了电商竞拍系统的设计过程与实现过程。
关键词：电商竞拍；移动开发；React Native
中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2018）16-0089-03
1 引言
主流的电子商务销售形式主要有零售、秒杀、团购、竞拍。
“零售”是最基本的电商模式，指在电商平台（如淘宝，京东）上开虚拟店铺，销售固定价格的商品。零售的商品多式多样，而秒杀的商品一般价格低廉或者是资源有限的商品。团购类似于线下的批发购买行为，但网上的团购行为的是各地相互不认识的消费者，以购物数量寻得商品的最优惠价格的购物方式。
“竞拍”，跟线下拍卖场竞拍一样，本质上是以竞争价格为核心，达到价格最优的市场经济过程。借助于拍卖网站，商家发布要拍卖的商品或服务，设定起拍价和保留价。消费者通过拍卖网络或APP在固定时间内一起出价，最终出价最高的消费者如果超过了保留价，则商品成交，否则则流拍。
竞拍的应用场景非常多，理论上任何东西都可以采用竞拍的形式出售。但是竞拍作为一种博弈行为，首先其商品价值不能是大家显而易知的，其次其数量也不能多。现在流行的场景主要有艺术品拍卖，司法拍卖，二手车或二手物品拍卖等。
我校每年都会举办“循环利用 环保机械”的校园跳蚤市场活动，为学生提供一个互利互惠的交易平台，活动交易物品大多为二手物品，如小桌子、书籍、电子产品、化妆小赠品等。这些物品大多不好定价，但如果消费者和商家选用这种“竞拍”模式一起可以影响这个价格，这样就可以让这些物品价格达到最优。
根据二手物品拍卖平台的分析，设计和开发一个适合校内电子商务实训班级的二手物品电商竞拍平台，即可迎合学校举办的校园跳蚤市场活动，又可让实训班级的学生了解到电商拍卖的技巧和细节。
2 需求分析
通过对系统目标人群的分析，系统的目标用户角色包括以学生及教师在内的用户及管理后台系统的管理员。学生与教师是主要使用者，包括注册、登录、浏览二手物品、竞拍等；管理员负责审核用户信息及竞拍物品的信息管理。具体如图1。
竞拍管理及物品管理是竞拍系统的主体内容，在物品管理中，用户可以使用APP隨时上传二手物品，查看已成交的物品等；在竞拍管理中，用户可以在APP时查看竞拍大厅中正在竞拍的物品，对自己喜欢的物品出价。管理员可以对违规发布用户禁止登录或者发布信息，同时可以下架违反竞拍条款的竞拍物品。
3 用例实现
在该系统中，每个角色用户有各自不同的用例，下面选取了用户竞拍模块，通过文字和时序图介绍用例的实现过程。
竞拍是系统最重要的模块，包括了系统主要的功能：发拍、竞拍大厅、出价、定时、缓存队列等；用户上传的竞拍物品会展示在竞拍大厅中，其他用户通过APP在竞拍大厅浏览物品，对自己喜欢的物品出价，为了系统的高性能，出价信息在竞拍过程中只会插入到缓存队列redis中，redis是一个内存数据库，具有备份功能，不用担心数据会丢失；竞拍服务模块还会将该出价信息广播到其他正在浏览该物品的用户的APP上，使所有用户都知道最新的竞拍出价。定时服务会监听竞拍物品的到期时间，当到了结束时间，定时服务会通知竞拍服务关闭出价功能，同时保存出价数据到数据库。
用户通过APP上传需要竞拍的物品的图片，设置物品的起拍价，保留价，起拍时间，点击发拍，物品信息就会通过物品服务API保存到数据库中，同时调用定时服务插入一个定时记录，在系统的发拍规则中，起拍价小于保留价，用户在经过几轮（>=1）的出价后，物品最高出价如果大于保留价，则最高出价用户竞得该物品；系统定时器会在起拍时间前30分钟调用消息服务发送消息通知用户该物品竞拍开始，消息的发送会通过APP内推送的方式发送；起拍时间到时，定时器会调用竞价API更新物品的拍卖状态为拍卖中，这时用户就可以通过APP出价竞拍了。
4 原理与技术
4.1 系统架构
一个典型的竞拍平台需要提供一个APP及一个管理平台。
APP提供了添加物品，消费者集中竞价，支付，浏览物品，查找物品等功能。
管理平台提供了电商管理员审核物品，管理用户等管理流程。
从架构上，系统分为了数据层，服务层，接入层，中间件层。
数据层提供了数据的存储及查询，包括了基础数据库，用户数据库，订单库，物品库，缓存数据库等。
服务层将平台提供的业务功能进行垂直的细粒度划分，包括了用户，物品，竞价，订单等微服务。
接入层提供了各个模块需要的API，包括APP API，管理平台API等。
第三方服务层集成了系统需要使用到的第三方厂商提供的服务，如支付需要采用支付宝或微信的支付SDK，短信需要使用阿里的服务等。
4.2 APP开发框架
目前主流的APP开发方式有基于原生（iOS或者Android）开发，基于html5的H5开发，基于Javascript与原生（iOS或者Android）的混合开发方式。
Native开发方式需要同时开发IOS版本及ANDROID版本，开发工作量大，复杂，周期长，开发出来的界面也不统一，但是采用原生的组件及API，性能及操作体验是最好的。
H5采用html5+js来写组件及操作，运行于Web浏览器环境上。只需要开发一次，就可以在多种手机系统上运行。但由于HTML5技术目前还不够成熟，仍然存在一些重大的局限性，具体包括会话管理、安全离线存储以及访问原生设备功能（摄像头、日历和地理位置等）。特点是开发简单，工作量小，跨平台，但是受限于js的性能，开发出来的APP性能及操作体验都比较差，一般只适合于阅读类的APP，对于强交互类的APP（ 如竞拍APP）不适合，经常性会有卡顿的现象。
JS+Native混合开发方式是近年流行的开发方式。这种方法用JavaScript调起native 组件，将增强与高性能组件交给 native来处理，JavaScript 负责页面布局，样式，转发事件及控制系统流程。既拥有原生系统流畅的用户体验、又保留HTML5快速的开发效率。
5 系统的难点
一个实时的出价大概包含下面三个过程： 一个或者多个用户关注着某一个拍品当其中某个用户出价后，更新数据库中该拍品的信息，将最新的拍品信息反应到关注该拍品用户的客户端上。简单来说就是：“当拍品出价成功后，取得最新的拍品信息，推送给关注该拍品的所有用户”。如果用户量少，系统其实不需要做什么设计，但是如果用户量上十万、上百万，那么系统架构的问题就体现出来了。
根据竞拍的特点，系统的实现难点体现在系统需要满足高流量访问，高并发请求数据，实时性要求。
对于高流量，高并发访问，我们可以采用分而治之的思想，采用分布式群集服务器，将大量的访问分流到不同的服务器上，增加服务器负载均衡控制，将流量平分到各服务器，避免单个服务器由于负载过重而挂掉。
竞价对实时性要求非常高，所有参与用户需要实时知道当前的最高价，要实时拍品信息实时更新，采用传统的界面定时刷新方式已经不满足业务场景的需求，必须采用实时性更高的服务端推送方式。而客户端想要得到服务端推送的信息，实际上需要和服务端建立一个长连接，这样服务端才能通过这个连接把信息传递到客户端，也就是所谓“推”的概念。
在这个项目中我们将采用高性能的实时消息服务框架socket.io来开发实现我们的竞价功能。Socket.io具有非常高的性能，一台普通的1CPU，4G内存的机器就可以支持并发30000以上的长连接及每秒140000以上的实时消息；并且socket.io服务端还支持分布式扩展及部署，当用户非常大的时间，可以通过增加群集服务器的方式来扩展系统的能力，而且增加服务器是动态的，不需要系统关机或者停止服务，对于用户而言是透明的。
综上所述，Socket.io非常适合竞拍平台高性能及分布式群集的架构要求。
6 关键代码及效果
本系统的实现涉及APP开发及后台服务接口的开发，APP开发需要在Node.js开发环境下使用React Native框架开发；后台服务接口需要在JAVA开发环境下使用Jboot框架开发。接下来将以在线竞拍模块作为典型功能模块为例，通过关键代码介绍系统的详细实现过程。
React Native是目前最流行的混合开发框架，由Facebook于2015年开源，目前许多电商公司都采用该框架来开发APP。
Jboot是一个用于JAVA语言开发的类似于spring boot的微服务开发框架。Jboot框架為开发后台服务提供了大量的基础功能，如数据存储，缓存，API文档等。
6.1竞拍大厅
竞拍大厅展示了系统正在竞拍中的物品，是系统的主要入口，代码如下：
componentWillMount（） {//界面将要打开的时候
InteractionManager.runAfterInteractions（（ ） => {
This.props.dispatch（{type： types.FETCH_BIDDATA_LIST }） //发送数据加载命令
}）}
该方法在竞拍大厅界面打开之前先发送加载竞拍物品列表数据的命令到消息中心，消息中心监听到命令之后将调用后台服务接口返回数据并显示到界面上。
export function* watchBidList（） {//监听数据请求事件
yield [call（handleBidListAction）] }//从后台服务接口获取数据
加入InteractionManager.runAfterInteractions可以告诉系统先运行交互动画再执行数据请求，可以使页面动画更流畅。
效果如下：
实现后台获取总价物品列表的API接口， 返回数据给前端：
List
renderJson（cars ）；//以JSON格式数据的形式返回给前端
6.2 使用socket.io实现实时出价功能
在后端代码中加入启动socket server代码，并监听出价事件，如果有出价事件，则调用物品服务保存。
//当收到前端出价事件
public void onData（SocketIOClientclient，JSONObjectdata，AckRequestackRequest） {
String price = productService .addBid（data）；//调用物品服务API保存数据
//通知其他人已经有人出价，需要刷新页面上的最高价信息
server.getBroadcastOperations（）.sendEvent（"update"，price）；}
前端APP添加出价事件，当用户点击出价时，将出价信息实时发送到服务端。
onBid（） {
socket.emit（'event'，{ user： '1'，price： 5，id： bidDetail.id }）；}
点击我的要价，这时会发送加价5的信息到后端，后端保存出价信息之后会通知所有连接到该页面的客户端刷新页面的最高价信息，效果如下图：
9 总结
通过校园二手物品拍卖平台，对于学生而言，使用APP竞拍二手物品，能够更好地响应学校举办的“循环利用 环保机械” 校园跳蚤市场活动，也增加了校园生活的乐趣；对于专业的电商学生而言，通过拍卖平台能够学习到竞拍模式的规则，一般电商公司的商业模式，电商APP的开发知识，有利于学生加深对电商专业的认识；对于教师而言，可以将该平台作为一个电商实训项目，向学生传输电商APP基本知识，增加学生的项目经验，为学生增加就业的亮点。
参考文献：
[1] 傅宏智，黄亮.校园二手商品交易平台中物品竞价拍卖的设计与实现[J].中国新通信，2016（9）.
[2] 阮一峰. React入门实例教程[EB/OL] http：//www.ruanyifeng.com/blog/2015/03/react.html.
[3] 赵步逵.个人商品竞拍网站的设计与实现[D]. 北京：中国地质大学（北京），2013.
