APP下载

基于APICloud平台的无人云超市远程售卖及运维软件设计

2022-04-20郑潇张文聪姚奕刘唯一仇翔余世明

微型电脑应用 2022年3期
关键词:补货云端页面

郑潇, 张文聪, 姚奕, 刘唯一, 仇翔, 余世明

(浙江工业大学, 信息工程学院,浙江,杭州 310023)

0 引言

无人云超市[1]是依托物联网、大数据分析、“互联网+”而兴起的现代化无人监管、无人售卖的智能化零售装备,它是由需要人为监管、人为销售的定点式、占用空间较大的传统式超市演化而来的。无人云超市弥补了传统超市经营模式下人力成本高、配送问题大的缺陷,创造了一种全新的零售模式[2-3]。从消费者层面来看,无人超市没有烦人的导购,没有冗长的队伍,购物时增加了消费者的自主性和便利性,优化了购物体验。从经营者的角度来看,无人云超市以技术代替昂贵的人工劳动力,极大地降低了经营成本。

本文主要利用APICloud平台,开发JavaScript语言的无人云超市远程售卖及运维系统。因为APICloud平台是致力于开发移动端系统的云端平台,具有多种已成型的功能模块,开发人员可以有选择地调用其数据库中的功能模块,从而大大减少开发时间。APICloud平台开发的系统可视化程度高,在借助JavaScript语言开发的情况之下,能够直观形象地显示出无人云超市中商品的销售情况、剩余数量以及无人云超市的定位、设备状态等信息。无人云超市远程售卖及运维系统能够在极大程度上解决消费者在现场购买商品所花时间较长以及维修人员无法远程查看设备故障状态这两大问题。

1 APICloud平台

APICloud平台是布局低代码开发的平台之一,包含了前端开发、后端开发、产品设计、要求分析、定制专属服务等功能。其行业数据库可以依据不同的行业、不同的功能、不同的应用场景加以梳理。当需求方提出较高的设计要求时,APICloud平台可将需求发送给与其平台签订合约的软件设计师,通过第三方完成客户需求。APICloud平台最大的好处就在于其方便了App设计的新手,较为简单的入门教程使得许多常规设计可由客户自身学习并完成。

文献[4-5]提出APICloud平台核心特征就在于“云端一体”[6],“云”是指APICloud云端服务平台,“端”是指用户终端,可以在2个维度对产品进行技术维护,同时还满足iOS、Android等多个主流移动端系统。APICloud平台还设计开发了开源软件——APICloud-studio系列,开发人员可以利用APICloud-studio在本地端进行App软件开发以及软件测试,在编写并测试好代码之后,将本地端代码发送至APICloud云端平台,通过云编译、版本更新等操作将App中的页面、功能等加以实现。APICloud云端平台整体架构如图1所示。

图1 APICloud云端架构

2 基于APICloud平台无人云超市远程售卖及运维系统设计

无人云超市远程售卖及运维系统整体架构如图2所示,其中包含了定位模块、预定商品模块、个人信息模块、补货模块、维护模块。

图2 无人云超市远程售卖及运维系统架构图

2.1 定位模块

无人云超市的售卖系统和运维系统中都包含了定位模块,其作用是精准确定处于分散状态下的无人云超市位置信息。在售卖系统中,该模块用于帮助消费者查找附近的无人云超市,减少消费者寻找时间,方便消费者购买商品;在运维系统中,该模块用于帮助配送员查找所有的无人云超市,方便配送员补充商品。

在定位模块中,本系统借助APICloud平台模块封装的便利性,调用APICloud平台模块数据库中的amap模块,同时,在高德官方云端服务平台中设置APIKey,并提取该模块的AndroidAppKey以及AndroidAppSecret放入到config文件中,再将本地端代码传输到云端进行云编译,从而实现对amap模块的调用。

2.2 预定模块

在预定模块中,本系统设计出较为简约的购买界面:采用section3的类域,选取itemshelf.shelfinfo系列的样式作为页面布局框架,使得整个界面看上去干净整洁,用户能够清楚地知道点击某一按钮所实现的相应功能;使用itemhover作为tapmode的类型,使得点击按钮时的3D影像能直观反映出是否已经开始执行这一操作;自行定义了openNewWin()函数,将函数实现方式与onclick相连,在用户点击按钮时可以实现页面跳转;在主函数当中引入api.setRefreshHeaderInfo()函数,实现页面刷新的功能。部分样式、函数程序如下。

//section3类域中itemshelf.shelfinfo系列样式

.section3.itemshelf.shelfinfo01.pei{color:#fff;font-size:12px;background-color:#82782f;margin-left:5px;padding:1px;border-radius:3px;}

.section3.itemshelf.shelfinfo01.ticket{color:#fff;font-size:12px;background-color:#3585b7;margin-left:5px;padding:2px;border-radius:3px;}

//api.setRefreshHeaderInfo()函数

apiready = function(){

api.setRefreshHeaderInfo({

visible: true,

bgColor: 'rgba(0,0,0,0)',

textColor: '#666',

textDown: '下拉刷新',

textUp: '释放刷新'

},function(ret,err){

loadData();

});

}

相应的页面布局如图3所示。

图3 预定模块界面

2.3 补货模块

在补货模块中,本系统采用了简洁的设计方式,采用itemlogo userlogo的类域,选用itemshelf.shelfinfo系列的样式,可视化程度高,用户可以直观看出无人云超市中商品的剩余信息、设备状态信息等,商家可根据商品的剩余信息,有选择地向供货方发送补货信息,补货信息中包含了无人云超市的编号和位置信息、装备内的商品种类、待补货商品数量,供货方根据补货信息同时结合定位模块,对无人云超市进行商品配送。部分程序如下。

//无人云超市设备信息

〈div class="item style2" tapmode="itemhover" onclick="openNewWin('shebei1_win')"〉

〈div class="itemlogo userlogo"〉〈img src="../image/xuegao.png" alt=""〉〈/div〉

〈div class="itemshelf"〉

〈div class="shelfinfo01"〉NO.0001〈/div〉

〈div class="shelfinfo06"〉雪糕〈/div〉

〈div class="shelfinfo03"〉设备态:良好〈/div〉

〈/div〉

〈/div〉

〈div class="item style2" tapmode="itemhover" onclick="openNewWin('shebei2_win')"〉

〈div class="itemlogo userlogo"〉〈img src="../image/lenyin.png" alt=""〉〈/div〉

〈div class="itemshelf"〉

〈div class="shelfinfo01"〉NO.0002〈/div〉

〈div class="shelfinfo06"〉冷饮〈/div〉

〈div class="shelfinfo03"〉设备状态:良好〈/div

〈/div〉

〈/div〉

相应页面布局如图4所示。

图4 补货模块界面

3 总结

在APICloud平台基础之上,本文设计了无人云超市的远程售卖及运维系统。该系统能够直观反映出零售装备的内部信息,为消费者提供远程预定商品服务,为商家提供远程状态监测、发送补货信息服务,解决了针对无人云超市的管控和维护问题。在该系统的基础上,仍然可以添加更多管控及运维方法,如对无人云超市内部温度的远程控制等,这也是我们下一步研究的方向。

猜你喜欢

补货云端页面
刷新生活的页面
冬奥“顶流”冰墩墩抢疯了!南通生产商:初八开工补货
四海心连·云端汇聚
答案
让Word同时拥有横向页和纵向页
在云端永生
云端之城
小品规卷烟分拣补货模式研究
在云端
高效率的拣货措施