基于Kotlin微信公众招生预报名程序的设计与实现
2022-07-16武永娇李丹
武永娇 李丹
摘要:移动互联网视域下,远程教育招生的报名方式形式多样,如基于线下现场采集信息填报、基于线上 PC 端网页填报等。随着微信的快速发展,据统计2022年 1月,我国的微信用户近10亿人。报名系统的个性化、移动化、便捷化是招生工作者与报名学生所期盼的。本论述以甘肃开放大学开放教育学院为例,结合远程招生报名工作实际需求和发展趋势,参照以往信息服务模式,研究利用目前流行的微信开发 Kotlin 语言,对远程招生报名信息服务需求分析,完成微信公众招生预报名系统设计,推进开放教育招生现代化管理进程。
关键词:Kotlin;微信公众;OCR 技术
中图分类号:TP393文献标志码:A
1 开放教育报名系统情况分析
目前,远程教育报名方式基本采取两种模式(以甘肃开放大学开放教育学院为例):第一种报名方式是学生提前填表,工作人员收集整理学生的填报信息表及证件材料,工作人员依据填报及提供材料录入到报名系统中;第二种报名方式是学生到现场提供相关数据信息,工作人员录入报名系统,现场确认。报名系统基于 B/S 模式,全国报名都在国家开放大学指定的同一个平台中。平台具有界面友好、易于掌握、操作简单、功能齐备、应用广泛、保密性等优点,但不能支持移动版,不能满足预报名信息采集,也无法与目前流行的微信公众平台对接。为了解决以上不足,深入研究微信公众平台开发语言及环境,结合现有招生报名系统的开发特点,选取基于 Kotlin 作为开发环境,完成微信公众招生预报名系统设计与实现,经过测试,运行稳定良好。
2 Kotlin技术的概述分析
Kotlin 是由 JetBrains 设计开发并开源,是一种属于静态类型的编程语言,其运行在 Java 虚拟机上。Kotlin可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行,在 Google I/O 2017中, Google 宣布 Kotlin 成为 Android 官方开发语言[1-2] 。
选择 Kotlin 作为开发语言,原因如下:
(1) 更具简洁性:可以大大减少代码的行数,特别是样板代码数量减少。
(2) 更具安全性:通过object.equals(“test”),简单避免整个类的异常等错误,如空指针。
(3)互操作性强:浏览器和 Android、JVM 的现有库得到充分利用。
(4) 更加友好的工具界面:工具调出可以通过命令行或者 Java IDE 任意构建使用。
(5)利于平台之间兼容性:现有的招生报名系统基于 Java 开发,Kotlin 作为开发语言,便于与现有报名系统对接。
3 系统的设计与实现
3.1 逻辑架构设计
本论述设计的微信公众招生预报名程序遵从了一套从设计到组件的WeUI规范的 Web 程序。小程序借助宿主环境提供的能力,Kotlin 可以完成许多普通网页无法完成的功能。例如获取用户信息、微信支付等,小程序提供了多个 API 。多数 API 的回调都是异步,有效处理好代码逻辑的异步问题。逻辑主要部分构成:主体部分+各个页面,主体部分主要用于微信小程序核心的配置,各个页面主要用于不同业务场景[3]。当通过文件app.json对主体部分完成配置后,可以进行各类业务的开发了,也就是进入了开发者的主操作页面。小程序页面设计基本上也是遵循 Kotlin 环境下的 MVC 结构进行构建。微信公众招生预报名程序设计逻辑架构如图 1所示。
主体部分主要由3 个文件构成:
(1) 文件 app.js:微信小程序的逻辑文件,即微信小程序的注册代码位于 app.js,初始化可产生 APP。
(2) 文件app.json:负责配置小程序,即页面框架位于 app.js 。如窗口界面、导航栏目、页面地址 http/https 的页面请求跳转等。
(3)文件app.wxss:主要提供公共样式及其相应样式的配置。
页面由以下4 个文件构成[3-4]:
(1) 文件js:主要负责完成页面逻辑,相当于小程序控制层(C)。
(2) 文件wxml:主要负责页面结构生成及展示,相当于小程序的视图层(V) ,支持数据的绑定、模板自定义、引用外部、回调事件、渲染列表等。
(3)文件wxss:主要存放页面样式表,前端样表,可以对wxml的展示起到辅助作用。
(4) 文件json:主要是页面的相关配置,如一些页面显示数据的配置。
3.2 功能模块设计
在对实际报名业务数据的分析与归纳的基础上,对系统功能模块进行了设计,用户关注微信公众号后,进入不同菜单栏目查阅,如专业介绍、收费标准、报名流程等。点击现在报名栏目,填报相关报名信息,生成预报名登记表,并进行核对确认,完成报名。微信公众招生预报名程序功能架构如图2 所示。
3.2.1专业介绍
主要显示开放教育招生简章中开设的专业类别,共涉及98个专业的概况、优势、特色、专业涉及到的课程等情况,为报名者提供重要的专业信息选择参考。
3.2.2收费标准
显示根据专业规则每个专业的收费计算及收费项目的解读。
3.2.3报名资料
详细介绍专科、本科报名需要的相关材料及特殊专业的要求,如包括毕业证件、同等学历证明、学信网电子注册表及照片等;特殊专业如护理学、药学、药品经营与管理等专业所需提交的资料说明等。
3.2.4报名流程
动态流程图显示从咨询报名到正式入学前的所有环节工作,此模块嵌入了问答库,整理归纳了报名过程中咨询出现频率较高的问题,以一问一答的形式呈现,为報名者提供了便捷,同时也缓解了招生咨询工作的压力。
3.2.5现在报名
此功能模块是招生预报名程序的核心模块,报名的主要信息录入的入口菜单,此功能模块主要包括5 个信息区:
(1) 基本信息,可以点击身份证识别按钮(文中3.3.2)读取基本信息并映射到相应的信息框;
(2) 报名信息,选填申报的层次类型、专业及教学点等信息;
(3)最高学历,主要填报现有的最高学历基本信息,包括毕业学校、专业名称、毕业证书编号及毕业时间等等;
(4) 核对签字,根据填报信息在后台生成《国家开放大学报名登记表》,并以网页电子版形式呈现,方便报名者核对,如果无误签字(3.3.3手写签名的实现)确认,如果某一项信息有误,点击进入相应模块修改,直至正确填报;
(5)数据分析,此模块供后台管理人员分析预报名及报名专业人员分布情况,便于预测分析报名趋势。3.3 关键技术实现
微信公众预招生报名报名系统基于微信小程序,前端开发语言采用 Kotlin 语言。
3.3.1接口描述
支持对二代居民身份证正反面所有8 个字段进行结构化识别,包括姓名、性别、民族、出生日期、住址、身份证号、签发机关、有效期限,识别准确率超过99%;支持身份证正面头像检测,并返回头像切片的 base64编码及位置信息。同时,支持对用户上传的身份证图片进行图像风险和质量检测,可识别图片是否为复印件或临时身份证,是否被翻拍或编辑,是否存在正反颠倒、模糊、欠曝、过曝等质量问题。
3.3.2基于 OCR 身份证识别接口的实现
身份证识别 OCR 技术,只需几秒,即可获得身份信息,并且识别速度快,识别率高方便报名者或工作人员及时准确地录入身份信息,提高工作效率及正确率。图片支持使用img参数实时上传,也支持使用img_url参数传送图片地址,由微信后台下载图片进行识别。文件大小限制:小于4 M 。获取 access token,可参考微信公众平台公开接口关键技术。
首先,自定义文件 profunc.js,实现函数并封装。 OCR 身份证识别接口字段定义见表1 所列。
其次,在小程序页面引用,需要传入access_token。
const cwx = require('profunc.js');//在小程序页面引入该js文件
...
ocridcard(){
var that = this;
cwx.OcrIdCard (that.data.access_token).then
(function(_res){
var trdata =_res.data.words_result;
console.log(trdata)
that.setData ({
name:trdata['姓名'] .words,
idcard:trdata['公民身份号码'] .words,userloc:trdata['住址'] .words
...
})
})
}
最后,OCR 身份证识别实现运行效果如图3 所示。
3.3.3手写签名的实现
在微信小程序中实现手写,通常采用笔锋以及笔迹模拟效果,会因为实时计算较多的贝塞尔曲线而产生卡顿,效果不理想。所以本论述设计使用 canvas 组件实现。将用户的输入想象成为一只笔。要画的签名是由很多点构成的,点与点之间形成曲线连接。由于是在自定义组件中使用,所以要注意获取 canvas 的时候的 this 指向问题。如果不调用SelectorQuery的In 方法,那么就在自定义组件获取不到 canvas,因为这个时候指向的父组件。下面是实现过程部分关键代码。
Component({
/**组件的初始数据*/
data:{
canvasName:'#handWriting',
ctx:'',
canvasWidth:0,
canvasHeight:0,
startPoint:{
x:0,
y:0,
},
selectColor:'black',
lineColor:'#1A1A1A',//颜色
lineSize:1.5,//笔记倍数
radius:5,//画圆的半径
},
ready(){
let canvasName = this.data.canvasName;
let query = wx.createSelectorQuery().in(this);//獲取自定义组件的SelectQuery对象
query.select (canvasName)
.fields({ node:true,size:true })
.exec((res)=>{
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
//获取设备像素比
const dpr = wx.getSystemInfoSync().pixelRatio;
//缩放设置 canvas 画布大小,防止笔迹错位canvas.width = res[0].width * dpr;
canvas.height = res[0].height * dpr;
ctx.scale(dpr,dpr);
ctx.lineJoin="round";
this.setData ({ctx});
});
query.select ('.handCenter').boundingClientRect (rect =>{
console.log('rect',rect);
this.setData ({
canvasWidth:rect.width,
canvasHeight:rect.height
});
}).exec();
},
//省略以下代码......
});
3.3.4系统安全设计
系统安全性设计可以从网络传输安全、数据存储安全、文件存储安全、扫二维码安全、微信开放接口安全、小程序钓鱼风险及数据泄露隐患进行分析。系统安全设计原理如图4 所示。其中,原生实现层承载小程序依赖的具体操作,由微信 APP 支撑实现,包括 tbs 内核、JSAPI 框架、初始化小程序配置、功能接口实现等,主要的安全措施保障有以下几个方面:
(1) 开发框架上继承了微信成熟的 JSAPI 框架和底层的 TBS 浏览器内核[5];
(2) 开发者可以通过后台控制进行配置,保护小程序关键信息的安全问题,如域名信息等;
(3)通用网络传输使用 Https,并对访问域名进行校验控制,无法抵御攻击者在本地安装代理证书实施中间人攻击的威胁,通用 request 网络请求仅支持采用 https,包含校验域名、url、发起请求和处理响应结果等。
(4) DataBase ( DB) 文件通过关键字(Key,Value)形式存放本地数据,从而数据的安全保护可以继承微信的数据库相关加密安全防护策略;
(5)本地文件存储采用 HashMap 映射机制进行文件定位,文件存储在外部存储,本身通过自定义算法实现完整性校验;
(6)由于微信小程序阻止嵌入url跳转,同时控制域名访问,使得钓鱼风险在一定程度上减轻,仿冒钓鱼小程序依靠于微信平台的审核监管能力来监测;
(7) 由于是在微信平台中运行,小程序自身仍需对敏感数据进行安全防护,敏感数据、能力相关接口需要在后台进行鉴权。通常可校验openid、IP 地址、自定义登陆态等信息。鉴权逻辑放在后台进行。接口返回的明文数据会进行签名校验,需要依赖登录session_key;接口返回的敏感数据会通过密文返回,解密算法依赖登录session_key。攻击者无法获知用户的session_key进行破解,窃取用户数据。
4 运行测试
功能运行测试目的是检测预招生报名小程序的功能及数据流转是否正确。根据设计时期的需求文档和具体功能实现预期测试即可。通过测试微信预报名程序各功能比较完善,达到预期目标,首先通过微信公众号,关注甘肃开放大学开放教育学院,或者扫描公众号二维码,进入新生报名界面,悬浮式菜单可以查阅专业介绍、收费标准、报名流程等报名相关宣传信息,点击现在报名菜单进入报名环节。填报功能部分运行界面如图5 所示。
5 结束语
本论述从学校远程招生报名工作需求出发,结合现在报名系统实际情况,为了更好的与现有系统进行兼容,采用现阶段比较受欢迎的 Kotlin 语言,开发了微信公众平台的预报名小程序,使用户(学生)能够清楚的了解到相关专业信息、报名流程及完成在线报名,并且可以随时查看自己的报名情况和修改相关信息,管理者在后台也可以查阅预报名的专业数据分布情况。经反复测试及试运行,此程序已经进入正式运行阶段,达到了预期的真正意义上的个性化、移动化、便捷化开发目的,有助于报名工作的开展与推进。
参考文献:
[1]方倍工作室. 企业微信公众平台开发实战:再小的個体也有自己的品牌[M]. 北京:机械工业出版社,2017.
[2]王龙军,邓浩澜,罗国宇.Kotlin 在图书馆馆内空气质量检测 Android 系统网络通信的应用[J]. 电脑编程技巧与维护,2021(2):82-83.
[3]黄鸿达. 混凝土生产过程数据采集和故障行为分析方法研究[D]. 广州:暨南大学,2020.
[4]江波. 电子技术实验室仪器管理系统设计与应用[J]. 电子技术与软件工程,2020(22):49-50.
[5]梁伟智. 关于依托于微信小程序的高校新生预报到系统设计研究[J]. 数码世界,2018(11):71.
[6]薛玉蕊. 新时代面对高职院校成人继续教育发展转型的思考[J]. 科教文汇(中旬刊),2021(10):142-144.