武永嬌 李丹
摘要:移動互聯網視域下,遠程教育招生的報名方式形式多樣,如基于線下現場采集信息填報、基于線上 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.