移动端与PC端结合的代驾平台设计与实现

known 发布于 2025-08-25 阅读(392)

摘" 要:随着汽车的普及和醉驾入刑的实施,代驾这一行业发展迅速。传统代驾方式存在成本高、效率低的缺点。在调查代驾市场需求和研究互联网、移动应用技术的基础上,应用微信小程序、手机APP和Web管理系统技术,设计和实现了移动端与PC端结合的代驾平台,实现客户快速下单、司机就近接单、管理者远程监管的目的,从而提升用户体验,提高代驾服务效率和企业运营效率。

关键词:代驾;微信小程序;手机APP;Web系统

中图分类号:TP311" " 文献标识码:A" 文章编号:2096-4706(2024)19-0100-10

Design and Implementation of Designated Driving Platform Combining Mobile Terminal and PC Terminal

HAN Xudong1, HUA Yang2

(1.Department of Computer Science and Technology, Xuhai College of China University of Mining and Technology, Xuzhou" 221008, China; 2.Xuzhou Nanzi" Shangan Digital Technology Co., Ltd., Xuzhou" 221008, China)

Abstract: With the popularity of cars and the implementation of drunk driving being listed in criminal law, the industry of designated driving develops rapidly. Traditional method of designated driving has the disadvantages of high cost and low efficiency. On the basis of investigating the market demand of designated driving and studying the Internet and mobile application technology, the platform of designated driving combined with mobile terminal and PC terminal is designed and implemented by using WeChat mini program, mobile APP, and Web management system technology. The platform realizes the purpose that customers can place order quickly, drivers can take orders nearby, and managers can supervise remotely, so as to improve the user experience and improve the efficiency of designated driving service and enterprise operation.

Keywords: designated driving; WeChat Mini Program; mobile APP; Web system

0" 引" 言

随着社会经济的发展和生活水平的不断提高,人们的外出活动越来越多,其中汽车作为重要的交通工具之一,以其快速、灵活、舒适等特点,已经受到越来越多的青睐。近20年来,我国汽车保有量持续增长,据公安部统计,截至2024年6月底,全国机动车保有量达4.4亿辆,其中汽车3.45亿辆,全国新注册登记机动车1 680万辆,汽车新注册登记1 242万辆,同比增长5.70%[1]。而作为酒文化盛行的国家,聚餐饮酒与开车是很多人无法避免的矛盾[2],而醉驾入刑的严格执行,使得人们不敢铤而走险,“喝酒不开车,开车不喝酒”的理念已深入人心。因而代驾逐渐成为人们认可和接受的解决方案。除此之外,人们也可能因为身体不适、交通拥堵、道路崎岖、雨雪天气、天黑路滑等原因,无法或不愿自行驾车,由此代驾业务就应运而生了。

早期的代驾一般采用电话预约、客服派单、人工结算的方式,运营成本较高[3]。互联网尤其是移动互联网的发展给很多行业的服务形式带来了新的思路,智能手机的普及使得移动应用大受欢迎,人们几乎可以随时随地地使用手机访问各种网络应用。同时,智能手机自带的全球定位系统(Global Positioning System, GPS)能够提供位置信息,基于位置的服务(Location Based Services, LBS)作为获取信息的一种新途径已经渗透到生活中的各个领域,在获取的信息中增加了位置维度,这给人们的出行、购物、社交等方面带来了极大的便利[4]。代驾便是一种比较依赖位置的应用。因而利用互联网和移动应用技术,研发一款便捷、高效的代驾平台,将具有广阔的市场前景和重要的现实意义。

在调研了代驾服务各方用户的需求,研究了移动端与Web系统相关技术基础上,设计了移动端与PC端结合的代驾平台架构和业务处理流程,阐述了关键功能的实现,测试了平台运行的效果,并提出了可能存在的问题。

1" 平台需求分析

代驾业务涉及客户(即代驾消费者,以下统称客户)、司机(即代驾司机,以下统称司机)和平台管理者(即运维或客服人员,以下统称管理者)三方。以下为三方主要的功能需求:

1)客户端。客户需要使用平台进行注册、登录、下单、取消订单、查询订单、联系司机、充值、付款、领券、评价等功能。

2)司机。司机需要使用平台进行注册、登录、接单、查询订单、导航、结算、充值等功能。

3)管理者。平台管理者需要对平台进行监管,包括对司机审核,订单管理,车辆调度,设置计费规则、服务费、优惠券,统计等功能。

2" 平台设计方案

考虑三方用户使用平台的场景特点,为客户设计实现了微信小程序,为司机设计实现了手机APP,为管理者设计实现了Web系统,使得各方均能较为方便地使用。三方软件通过后端提供的HTTP接口,实现数据提交、查询等操作。系统架构设计如图1所示。

2.1" 平台技术框架

以下对平台软件中用到的主要技术进行简要描述,并对业务处理流程进行设计和梳理。

2.1.1" 微信小程序

微信小程序(WeChat Mini Program, WMP)是一种不需要安装下载即可使用的应用。这种应用形式的优势在于无须安装,不占用手机桌面和存储空间[5]。这种应用形式的优势在于方便快捷,成本低,占用内存小,以微信平台作为支撑,用户量大[6]。对于使用频次较少,用户留存率不高的移动应用,更适宜使用小程序的形式[7]。而对于绝大多数代驾客户来说,使用代驾并不是日常操作,并不频繁,因而选择微信小程序形式作为代驾客户端。

微信小程序的开发工具选择了微信官方提供的微信开发者工具,它集成了代码编辑器、模拟器、调试器,便于开发、调试和发布,并且提供了丰富的组件库和API,开发者社区庞大,资源库丰富。

2.1.2" 手机APP

APP一般是指移动设备上的第三方应用程序,与微信小程序相比,适用于需要经常、频繁打开应用的场景。由于代驾司机(尤其是全职代驾司机)需要频繁接单、导航、结算和与客户联系,因而选择使用APP形式作为司机端。

APP目前主流的智能手机操作系统平台包括安卓、苹果、鸿蒙。不管是国内市场还是国际市场,相比之下安卓系统的用户量一直占据绝对优势[8],并且鸿蒙系统一般兼容安卓应用,因而选择开发基于安卓的APP。开发工具使用谷歌官方提供的Android Studio软件,它是专门为开发安卓应用而设计的IDE,提供了构建、测试和调试Android应用程序所需的所有工具。

2.1.3" Web系统

Web系统采用浏览器/服务器(Browser/Server, B/S)架构,在网络畅通的情况下,用户可直接使用浏览器访问Web系统。Web应用程序具有无须安装(只需要浏览器)、易于使用和操作、易于维护更新、数据共享性好等优点,一般多在PC端使用。而平台管理者更多的是在办公室对平台维护和服务,网络环境相对稳定,在PC上使用Web应用程序管理平台更为方便。

Web系统的前端页面采用Thymeleaf作为模板引擎开发,Thymeleaf可轻易地与Spring MVC等Web框架进行集成[9-10],也是SpringBoot官方推荐的视图模板技术。

2.1.4" Web系统

后端基于SpringBoot框架进行开发,SpringBoot是基于Spring的快速开发框架,它简化了Spring的开发过程,便于集成各种常用组件,且内置常用服务器,方便部署和维护。另外使用MySQL关系型数据库进行数据存储,使用MyBatis作为持久层框架访问数据库,从而实现与微信小程序、APP和Web系统的数据通信。

2.2" 平台核心业务流程

平台核心业务包括下单、接单、代驾、结算、付款等环节,业务时序流程如图2所示,概况描述如下:

1)司机听单。司机在没有订单的情况下,处于听单状态,不断向后端请求订单。

2)客户下单。客户填写起始点、目的地和出发时间,即可向后端提交订单。

3)平台派单。对于客户提交的订单,后端根据客户与各个司机的位置关系,计算出合适的司机并派单。

4)司机接单。司机得到平台派单后,可选择接单或拒单。如果拒单,则该订单后续不会再派给该司机;如果选择接单,则司机去往客户指定的起始点接驾。

5)司机接驾与等待。司机到达客户指定地点,与客户会面后,即可开始代驾。

6)代驾。司机通过导航,到达目的地。

7)结算。司机到达目的地后,发起结算,平台后端计算实际里程与时间,生成账单。

8)客户付款。客户通过微信小程序可看到账单,进行付款。

9)客户评价。客户付款后,即可对本次代驾服务进行评价。

10)司机继续听单。客户付款后,司机继续听单,等待后端派发的下一订单。

3" 平台实现

以下对平台软件的主要功能界面进行设计,对关键功能的实现原理进行描述,并展示关键代码(或伪代码)和效果图。

3.1" 微信小程序实现

小程序页面通常由4个文件组成,分别是js、wxml、json、wxss。Wxml文件用于描述页面布局结构,wxss文件用于定义页面样式,js文件用于定义数据和处理逻辑,json文件用于页面配置。客户端小程序需要实现注册登录、下单、查询订单、充值、付款、评价等功能。由于涉及功能和页面较多,本节仅介绍下单、付款功能实现。

3.1.1" 客户下单

微信小程序首页以腾讯地图组件作为底图,并标注代驾起始点(默认为当前位置)与周围司机位置。同时首页提供下单功能,通过设置代驾类型、起始点、目的地和出发时间,提交订单到后台。表单目的地是选填的,更进一步加快下单速度(快捷下单)。下单相关页面如图3所示,关键代码如下:

// wxml文件:加载地图组件

lt;map id=\"myMap\" scale=\"17\" show-location latitude=\"{{latitude}}\" longitude=\"{{longitude}}\" markers=\"{{markers}}\" circles=\"{{circles}}\" gt;

lt;view class=\"font_show\"gt;从这里出发lt;/viewgt;

lt;image src=\"/static/img/now_01.png\" class=\"now_01\"gt;lt;/imagegt;

lt;/mapgt;

// 加载订单表单

lt;view class=\"address\"gt;

lt;view catchtap=\"chooseAddr\"gt;

lt;text wx:if=\"{{!form.startAddr}}\"gt;正在获取出发地lt;/textgt;

lt;text wx:elsegt;你将从lt;textgt;{{form.startAddr}}上车lt;/textgt;lt;/textgt;

lt;image src=\"/static/img/right.png\" class=\"right\"gt;lt;/imagegt;

lt;/viewgt;

lt;/viewgt;

lt;view catchtap=\"chooseAddr\"gt;

{{form.endAddr输入你的目的地}}

lt;view catchtap=\"addOrderWithNoEndAddr\" hidden=\"{{form.startAddr amp;amp; form.endAddr}}\"gt;快捷下单lt;/viewgt;

lt;view catchtap=\"addOrder\" hidden=\"{{!form.startAddr!form.endAddr}}\"gt;确认lt;/viewgt;

lt;/viewgt;

lt;/viewgt;

3.1.2 客户付款

在司机到达目的地,行程结束后,小程序中显示后台计算生成的账单(包含价格和明细)。客户可选择使用优惠券(默认使用打折力度最大的优惠券)。客户点击“结算”后,进入付款页面,支持余额支付、微信支付和现金支付。选择余额支付时,后端从客户的余额中扣除相应费用;选择微信支付时,调用微信官方提供的支付接口,弹出支付界面,客户输入支付密码即可支付。客户付款页面如图4所示,关键代码如下:

// js文件:数据初始化

data: {

payType: [{

id: 3,

name: 账户余额,

img: /static/img/pay_01.png

}, {

id: 0,

name: 微信支付,

img: /static/img/pay_02.png

},

{

id: 2,

name: 现金支付,

img: /static/img/pay_03.png

}],

...

}

// wxml文件:支付界面

lt;view class=\"orderPay\"gt;

lt;view class=\"title\"gt;本次代驾费用lt;/viewgt;

lt;view class=\"price\"gt;

lt;textgt;{{actualPrice}}lt;/textgt;元

lt;/viewgt;

lt;navigator url=\"/pages/user/cardBag/cardBag?type=2amp;userCouponId={{userCouponId}}amp;totalPrice={{totalPrice}}\" wx:if=\"{{totalPrice!= 0.0}}\"gt;

lt;textgt;已优惠

{{youhuiPrice}}元 ↓" gt;gt; lt;/textgt;

lt;/navigatorgt;

lt;/viewgt;

lt;view class=\"typeTitle\"gt;支付方式lt;/viewgt;

lt;view wx:for=\"{{payType}}\" wx:key=\"index\" bindtap=\"toggle\" data-id=\"{{item.id}}\"gt;

lt;view class=\"flex\"gt;

lt;image src=\"{{item.img}}\"gt;lt;/imagegt;

{{item.name}}

lt;/viewgt;

lt;view class=\"chooseImg\"gt;

lt;image src=\"/static/img/choose.png\" wx:if=\"{{chooseType!=item.id}}\"gt;lt;/imagegt;

lt;image src=\"/static/img/choosed.png\" wx:elsegt;lt;/imagegt;

lt;/viewgt;

lt;/viewgt;

lt;view class=\"confirm90 {{clickN?noClick:}}\" catchtap=\"pay\"gt;结算lt;/viewgt;

lt;/viewgt;

// js文件:弹出微信支付界面

wx.requestPayment({

timeStamp: data.timeStamp,

nonceStr: data.nonceStr,

package: data.package,

signType: MD5,

paySign: data.paySign,

success(res) {

wx.showToast({

title: 支付成功,

icon: success

});

wx.redirectTo({

url: /pages/order/orderDetail/orderDetail?id= + that.data.orderid,

})

},

fail(res) {

wx.showToast({

title: 支付失败,

icon: none

});

that.setData({

clickN: 1

});

}

})

3.2" APP实现

使用Java语言开发的APP页面一般包含Java文件和xml文件,Java文件用作处理业务逻辑,如用户交互、数据处理、网络请求等,xml文件用于定义页面的布局和外观。司机端APP需要实现听单、接单、导航、结算等功能。本节仅介绍听单、接单功能实现。

3.2.1" 司机听单

APP首页以高德地图组件作为底图,并标注当前司机与其他司机的实时位置。由于需要使用司机的位置信息,需要用户同意开启GPS定位权限。在司机上线听单时,周期性地向后端发起订单请求。司机听单页面如图5所示,关键代码及伪代码如下:

// xml文件:

lt;com.amap.api.maps.MapView

android:id=\"@+id/map\"

android:layout_width=\"match_parent\"

android:layout_height=\"match_parent\"gt;

lt;/com.amap.api.maps.MapViewgt;

lt;TextView

android:id=\"@+id/main_dk\"

android:text=\"开始听单\"

gt;

lt;/TextViewgt;

// java文件

// 页面加载时请求GPS定位权限(伪代码)

请求GPS权限(ACCESS_FINE_LOCATION)

如果已经允许,判断GPS是否打开

GPS已打开:获取位置并上报给后端;

GPS未打开:跳转GPS设置界面;

如果未允许,提示打开定位权限;

3.2.2" 司机接单

司机向后端请求订单时,如果有分派给该司机的订单,则APP应跳转至接单页面,展示订单的起始点,目的地和出发时间等基本信息。接单有时间限制,默认30秒内不接单,则视为拒单。页面中通过逐渐缩短的进度条,提示剩余时间。如果司机选择接单,则跳转至代驾服务页面。接单页面如图6所示,关键代码如下:

// xml文件:进度条

lt;ProgressBar

android:max=\"300\"

android:progress=\"300\"

android:progressDrawable=\"@drawable/pro_bg_bar\"

android:id=\"@+id/pro_time

style=\"@style/Widget.AppCompat.ProgressBar.Horizontal\"

android:layout_width=\"match_parent\"

android:layout_height=\"@dimen/dp_8\"gt;

lt;/ProgressBargt;

// java文件:定时器

timer=new CountDownTimer(30000, 1000) {

@Override

public void onTick(long millisUntilFinished) {

// 每一秒减少进度条长度10

binding.proTime.setProgress(count -= 10);

}

@Override

public void onFinish() {

if (isDestroyed()) {

return;

}

// 超时发送拒绝接这一单

sendReject(orderData.getOrderId() + \"\");

}

};

3.3" Web系统前端

Web前端使用Thymeleaf进行开发,Thymeleaf中使用了标签属性作为语法,可在服务端直接渲染要显示的数据。Web系统需要完成司机审核、订单查询、车辆调度、设置计费规则、设置围栏、设置优惠券、统计等功能,本节仅介绍司机审核、车辆调度页面。

3.3.1" 司机审核

为保证代驾司机的资质水平,需要对注册的司机进行审核,确保司机具有相关证件(身份证、驾驶证、行驶证等)和一定的驾车年限。只有通过审核的司机才能听单。页面使用Bootstrap表格插件展示待审核的司机列表,通过点击“审核”按钮,打开审核对话框,审核结果包括通过和驳回。司机审核列表页面如图7所示,关键代码如下:

// 司机审核列表

var options={

url: ctx + \"system/driver/drivershenhe\",

updateUrl: \"system/driver/edit/{id}\",

modalName: \"司机\",

columns: [{checkbox: true},

{ field: id, title: 司机编号 },

{ field: realName,title: 真实姓名 },

{ field: phone, title: 手机 },

{ field: cardNum,title: 身份证号 },

{ field: status, title: 状态,

formatter: function(value, options, row){

if(value==0){

return \"未审核\"

}else if(value==1){

return \"通过\";

}else if(value==2){

return \"驳回\";

}} },

{" field: createTime, title: 创建时间},

{ title: 操作, align: center,

formatter: function(value, row, index) {

var actions=[];

actions.push(lt;a class=\"btn btn-success btn-xs\" href=\"javascript:void(0)\" onclick=\"$.operate.edit(\ + row.id + \)\"gt;lt;i class=\"fa fa-edit\"gt;lt;/igt;审核lt;/agt; );

return actions.join();

}

}]

};

$.table.init(options);

3.3.2" 车辆调度

客户的订单可能长时间没有司机接单。这主要由两种原因导致。其一是客户附近没有听单的司机,其二是客户附近的司机均不愿接单(比如出发时间太晚或目的地太远)。这种情况,需要平台管理者介入,进行手动派单。待分派订单页面与后端建立WebSocket长连接,后端一旦检测到无人接的订单,就通过WebSocket通知页面,页面随机播放语音,提示前端页面进行派单。待分派订单列表界面如图8所示,关键代码如下:

var wsurl=ws:// + host+:+port + proj +/ws;

ws=new WebSocket(wsurl);

ws.onmessage=function(event) {

jsonMsg=JSON.parse(event.data);

let type=jsonMsg.type;

switch(type){

case 0:

// 有无人接的订单,重加载第一页并播放语音提示 $(\"#bootstrap-table\").bootstrapTable(refreshOptions,{pageNumber:1});

let audio=new Audio(ctx+/orderUnhandle.mp3)

audio.play();

break;

case 1:

// 无人接的订单被接单了,重加载第一页 $(\"#bootstrap-table\").bootstrapTable(refreshOptions,{pageNumber:1});

break;

}

};

3.4" 后端实现

后端使用SpringBoot框架开发,为小程序、APP、Web系统前端提供基于HTTP的接口支持,为新订单计算和分派合适的司机,将无人接的订单及时推送到Web系统前端,计算生成账单等。下文介绍分派算法和待分派订单推送的实现。

3.4.1" 分派算法

新订单生成后,首先根据所有(除拒绝此单的司机)听单司机的经纬度位置信息,计算出司机与订单出发点的距离。对于距离较远(如10千米以外)的司机,由于他们赶到出发点的时间较长,客户不太可能一直等待,故不予考虑。对于有效范围(如10千米)内的司机按距离从小到大排序,派单顺序由此产生。即首先把订单派发给距离最近的司机,如果一段时间(如30秒)内,该司机没有接单,则视为拒单,将该订单派发给次近的司机,依此类推。如果所有有效范围内的听单司机均不接单,则通知Web前端的待分派订单页面,由管理者进行手动派单。关键代码如下:

Listlt;DjJiedangt; djJiedans

=djJiedanService.selectDjJiedanList(djJiedan);

for (DjJiedan djJiedan1 : djJiedans) {

double distance=LocationUtils.getDistance(djJiedan1.getAddrIp(),

djOrder1.getStartIp());

djJiedan1.setDistance(distance);

}

// 所有司机距离排序

Collections.sort(djJiedans,

new Comparatorlt;DjJiedangt;() {

public int compare(DjJiedan info1, DjJiedan info2) {

return info1.getDistance().compareTo(info2.getDistance());

}

});

// 忽略超出有效距离的司机

double minDistForAutoDispatch=getMinDistForAutoDispatch();

Iteratorlt;DjJiedangt; iter=djJiedans.iterator();

while (iter.hasNext()) {

DjJiedan item=iter.next();

if (item.getDistance()gt; minDistForAutoDispatch) {

iter.remove();

}

}

// 分派给距离最近的司机

djOrderDriver.setOrderId(djOrder1.getId());

djOrderDriver.setDriverId(djJiedans.get(0).getDriverId());

djOrderDriver.setCreateTime(new Date());

djOrderDriver.setType(0);

djOrderDriverService.insertDjOrderDriver(djOrderDriver);

3.4.2" 待分派订单推送

新订单无人接单时,后端需要及时将订单信息推送到Web前端页面(待分派订单页面)。为此,后端搭建WebSocket服务端,接收来自前端页面的连接,建立连接后,将订单信息推送到前端页面。在SpringBoot中集成WebSocket服务端需要添加WebSocket依赖包,实现WebSocket的配置类,会话管理类以及消息处理类。关键代码如下:

lt;!-- pom.xml中添加依赖 --gt;

lt;dependencygt;

lt;groupIdgt;org.springframework.bootlt;/groupIdgt;" " " " " " lt;artifactIdgt;spring-boot-starter-WebSocketlt;/artifactIdgt;

lt;/dependencygt;

// 配置类配置连接路径

@Override

public void registerWebSocketHandlers(

WebSocketHandlerRegistry registry) {

registry.addHandler(

new MyWebSocketHandler(), \"/ws\"

).setAllowedOrigins(\"*\");

}

// 会话类保存客户端会话,以及对消息进行广播

public void broadcast(String message) {

for (WebSocketSession session : sessions) {

if (session.isOpen()) {

try {

session.sendMessage(new TextMessage(message));

} catch (Exception e) {

e.printStackTrace();

}

}

}

}

4" 平台测试

平台开发完成后,对小程序进行发布,对APP进行上架,并将Web系统前后端部署在云服务器,并对平台各软件功能进行了联合测试。平台主要功能测试结果如表1所示。

5" 结" 论

本平台将移动应用、互联网技术应用于代驾行业,设计实现了移动端与PC端结合的代驾平台,充分考虑了各方用户操作的便捷性,为客户端开发了微信小程序,为司机端开发了APP,为管理端开发了Web系统,能够比较高效地满足各方用户需求,但也存在一定的不足和潜在的问题。客户下单后,小程序采用了轮询的方式查询和更新订单状态,司机端APP也采用了轮询的方式进行请求订单。这种轮询的方式效率不高,在用户量不大的情况下没有问题,但当用户量较大,或轮询间隔设置较小时,可能会对服务器后端造成压力,从而导致平台功能的延迟和卡顿。可以考虑通过WebSocket、MQTT或第三方平台实现APP或微信小程序的实时消息推送。这是需要进一步改进的地方。

参考文献:

[1] 公安部交通管理局.2024年上半年全国机动车达4.4亿辆 [EB/OL].(2024-07-09).https://www.mps.gov.cn/n2254314/n6409334/n9194010/c9648257/content.html.

[2] 白玉娟.基于ASP.NET三层架构的汽车代驾管理系统的设计与实现 [D].北京:北京工业大学,2016.

[3] 吕梁.代驾计费管理系统的设计与实现 [D].长春:吉林大学,2016.

[4] 于思江.基于LBS的Android校园服务APP客户端的设计 [J].国外电子测量技术,2015,34(4):73-77.

[5] 张亮,戴婷.5G时代广播建设App与打造小程序之比较 [J].中国传媒科技,2020(9):77-78+90.

[6] 郑雨萌.新媒体时代下微信小程序的困境与发展 [J].声屏世界,2018(3):64-65.

[7]李哲,周灵.微信小程序的架构与开发浅析[J].福建电脑,2019,35(12):66-69.

[8] Counterpoint Research. iOS vs Android Quarterly Market Share [EB/OL].(2024-05-09).https://www.counterpointresearch.com/insights/global-smartphone-os-market-share.

[9] 陈刚.基于SpringBoot+Thymeleaf+MySQL的动态表单功能模块设计与实现 [J].长江信息通信,2023,36(9):100-102.

[10] 刘子凡,郭昱君.基于SpringBoot+Mybatis的个人博客系统设计与实现 [J].现代信息科技,2021,5(8):104-107+111.

作者简介:韩旭东(1987—),男,汉族,江苏沛县人,助教,硕士研究生,研究方向:煤矿智能化、企业信息化、物联网技术、人工智能

标签:  司机 

免责声明

本文来自网络,不代表本站立场。如有不愿意被转载的情况,请联系我们。

iidomino cuppor