李東升　蘇煜輝　陳正銘　陳君豪

摘要：學(xué)習(xí)教育資源的管理和獲取一直以來(lái)都是一個(gè)比較棘手的問(wèn)題，存在難以獲取、反饋不及時(shí)、操作不方便等弊端。基于微信小程序云開(kāi)發(fā)、PC Web雙端結(jié)合的學(xué)習(xí)教育管理系統(tǒng)，采用了Vue-admin-template框架與Hybrid混合開(kāi)發(fā)技術(shù)、JSON數(shù)據(jù)庫(kù)，提供了微信小程序?qū)W習(xí)答題、心得討論共享、后臺(tái)審核管理等功能，快速有效地解決了學(xué)習(xí)教育資源的利用問(wèn)題。

關(guān)鍵詞：學(xué)習(xí)教育;云開(kāi)發(fā);小程序;移動(dòng)學(xué)習(xí);serveless

中圖分類號(hào)：TP311? ?文獻(xiàn)標(biāo)識(shí)碼： A

文章編號(hào)：1009-3044（2022）07-0043-04

1 概述

隨著微信用戶與日俱增，微信小程序也借此機(jī)會(huì)逐漸走入人們的學(xué)習(xí)生活中，而基于serverless理念的云開(kāi)發(fā)技術(shù)更是給小程序帶來(lái)了更多的可能。面對(duì)計(jì)算機(jī)行業(yè)普遍存在的關(guān)于技術(shù)人員知識(shí)獲取的問(wèn)題，包括技術(shù)棧老化、知識(shí)零散、技術(shù)更新快、學(xué)習(xí)效率低等，針對(duì)這些痛點(diǎn)，以前端知識(shí)體系為例，采用基于云開(kāi)發(fā)的雙端結(jié)合方式構(gòu)建出一個(gè)學(xué)習(xí)教育管理系統(tǒng)（Halo），探索學(xué)習(xí)教育資源的獲取和管理問(wèn)題[1]，讓用戶得以系統(tǒng)有效地汲取知識(shí)，與其他用戶互相交流，以及存儲(chǔ)學(xué)習(xí)進(jìn)度、已發(fā)表信息等功能的私人空間。

1.1 傳統(tǒng)學(xué)習(xí)教育管理系統(tǒng)存在的問(wèn)題

1） 傳統(tǒng)的學(xué)習(xí)教育管理系統(tǒng)更多的是采用App的形式，相比于小程序而言，為了兼顧多個(gè)機(jī)型等問(wèn)題容易導(dǎo)致開(kāi)發(fā)成本偏高。

2） 同時(shí)由于過(guò)分強(qiáng)調(diào)用戶的留存和商業(yè)利益，偏離了原本學(xué)習(xí)教育的核心目的，容易讓用戶無(wú)所適從。

3） 傳統(tǒng)App采用的前后端分離協(xié)作開(kāi)發(fā)的模式溝通難度和成本都較大，同時(shí)也不利于相關(guān)工程化體系的搭建和適配。

4） 傳統(tǒng)App難以有比較完善發(fā)達(dá)的生態(tài)，難以與背靠高日活量微信的小程序相提并論，后期的推廣和發(fā)展會(huì)有比較大的限制。

1.2 基于云開(kāi)發(fā)學(xué)習(xí)教育管理系統(tǒng)的優(yōu)勢(shì)

1） 首先因?yàn)槭且孕〕绦驗(yàn)檩d體，背靠微信龐大的生態(tài)，有利于借用微信現(xiàn)有成熟的技術(shù)拓充本系統(tǒng)的功能，如廣場(chǎng)消息實(shí)時(shí)推送微信等，同時(shí)微信龐大的用戶基數(shù)也為本系統(tǒng)的使用推廣打下良好的基礎(chǔ)，提高了用戶的留存[2]。

2） 得益于云開(kāi)發(fā)提供的各種云端能力，本系統(tǒng)不需要過(guò)分依賴后端的支持，減少因?yàn)樯婕扒昂蠖烁膭?dòng)的迭代造成的昂貴溝通成本，避免了實(shí)現(xiàn)兼顧前后端的工程化體系的困難，僅依靠前端常見(jiàn)的技術(shù)棧即可完成本系統(tǒng)的搭建。

3） 在當(dāng)今注重效率和技術(shù)快速更新迭代的時(shí)代，云開(kāi)發(fā)這種云端賦能的操作更是拓寬了開(kāi)發(fā)者的能力邊界，除了可以獨(dú)自完成前后端的所有工作外，多端應(yīng)用部署、運(yùn)維等都可以高效的實(shí)現(xiàn)[3]，本系統(tǒng)也是基于云開(kāi)發(fā)提供的控制臺(tái)實(shí)現(xiàn)一個(gè)對(duì)數(shù)據(jù)實(shí)時(shí)監(jiān)控、相關(guān)業(yè)務(wù)設(shè)計(jì)日志的輸出、業(yè)務(wù)告警等后臺(tái)監(jiān)控，保障了系統(tǒng)的正常運(yùn)行和異常的及時(shí)處理。

2 雙端結(jié)合構(gòu)成

由微信小程序端、PC Web端雙端通過(guò)訪問(wèn)一個(gè)基于云開(kāi)發(fā)的JSON數(shù)據(jù)庫(kù)達(dá)到雙端結(jié)合，由此可以降低兩者的耦合度又保證了彼此的聯(lián)系，具體如圖1所示。

2.1 微信小程序端

本系統(tǒng)的微信小程序是基于云開(kāi)發(fā)打造的，用戶只需要掃描對(duì)應(yīng)的小程序二維碼或者點(diǎn)擊通過(guò)小程序提供的分享功能即可打開(kāi)享受服務(wù)。用戶首次進(jìn)入需要授權(quán)小程序，然后就可以解鎖對(duì)應(yīng)的收藏功能、反饋功能與查看歷史記錄功能。前往首頁(yè)選擇需要鞏固的知識(shí)體系即可開(kāi)始學(xué)習(xí)，相關(guān)知識(shí)點(diǎn)的答案可以自行打開(kāi)與關(guān)閉[4]。如果用戶有交流需求可以前往廣場(chǎng)頁(yè)與其他用戶互動(dòng)，支持搜索功能尋找感興趣的話題。

2.2 PC Web端

本系統(tǒng)的管理人員需要電腦Web端進(jìn)行登錄，即可查看用戶在小程序的行為，包括發(fā)言、反饋、評(píng)論等，針對(duì)違法違規(guī)的言論進(jìn)行刪除或處理用戶提交的反饋。管理人員還被允許根據(jù)實(shí)際情況添加新的知識(shí)點(diǎn)。

2.3 雙端結(jié)合的優(yōu)勢(shì)

由于系統(tǒng)是基于云開(kāi)發(fā)的技術(shù)和思想，Web端則以微信SDK的方式來(lái)獲取存儲(chǔ)在云服務(wù)器中的內(nèi)容，如此降低了后端邏輯的重復(fù)編寫(xiě)，只需要完成小程序端相關(guān)云函數(shù)的編寫(xiě)并抽離成相應(yīng)的SDK給予Web端使用即可。

同時(shí)因?yàn)閃eb端數(shù)據(jù)的請(qǐng)求是以SDK的方式，有微信服務(wù)器的支持，保障了傳輸過(guò)程中的安全性和可靠性。

3 系統(tǒng)的構(gòu)成與業(yè)務(wù)流程圖

本系統(tǒng)由微信小程序端和PC Web端兩部分組成，整個(gè)系統(tǒng)包括了兩種參與人員：系統(tǒng)管理員和用戶，圖2是展示具體的業(yè)務(wù)流程設(shè)計(jì)。

4 核心設(shè)計(jì)技術(shù)

4.1 Serverless架構(gòu)

Serverless是一種構(gòu)建和管理基于微服務(wù)架構(gòu)的完整流程，本系統(tǒng)采用了小程序提供的云開(kāi)發(fā)技術(shù)，無(wú)須關(guān)心服務(wù)器部署、服務(wù)器容量等，只需要通過(guò)第三方API交互即可。通過(guò)運(yùn)用這種架構(gòu)可以大量地節(jié)省服務(wù)器費(fèi)用，同時(shí)還可以提高開(kāi)發(fā)者的開(kāi)發(fā)效率。Serverless有兩種常見(jiàn)的技術(shù)包括Faas[5]和Baas，本系統(tǒng)采用的是Faas也就是函數(shù)即服務(wù)，具體到實(shí)際的開(kāi)發(fā)過(guò)程就是所謂的云函數(shù)和SDK。

4.2 Vue-element-admin框架

Vue是目前非常流行的漸進(jìn)式框架，Element則是一套提供給開(kāi)發(fā)者、設(shè)計(jì)師的桌面組件庫(kù)。Vue-element-admin則是基于Vue和Element實(shí)現(xiàn)的后臺(tái)前端解決方案，內(nèi)置了i18 國(guó)際化解決方案，動(dòng)態(tài)路由，權(quán)限驗(yàn)證，提煉了典型的業(yè)務(wù)模型，提供了豐富的功能組件，可以幫助開(kāi)發(fā)者快速地搭建起一個(gè)企業(yè)級(jí)的中后臺(tái)產(chǎn)品原型。

5 基于云開(kāi)發(fā)的雙端結(jié)合學(xué)習(xí)教育管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

5.1 微信小程序端核心功能的設(shè)計(jì)與實(shí)現(xiàn)

微信小程序端比較重要的功能是對(duì)用戶身份的確認(rèn)和儲(chǔ)存等鑒權(quán)操作，在用戶打開(kāi)小程序即可自動(dòng)獲取用戶頭像與姓名，同時(shí)微信小程序更多個(gè)性化的功能則需要用戶授權(quán)，具體的授權(quán)方法如下：

authorization （） {

wx.getSetting（{

success： （res） => {

if （res.authSetting['scope.userInfo']） {

wx.getUserInfo（{

success： （res） => {

this.setData（{

userInfo： res.userInfo

}）

}}）

} else {

this.setData（{

showLogin： true

}）

}}}）

}，

用戶的個(gè)人信息會(huì)記錄到云端，下次打開(kāi)無(wú)須授權(quán)。用戶在廣場(chǎng)發(fā)表話題后小程序會(huì)自動(dòng)刷新當(dāng)前話題列表，但是話題集合中存儲(chǔ)的數(shù)據(jù)較多，每次云函數(shù)發(fā)起請(qǐng)求最多只能獲得100條數(shù)據(jù)[6]，這可能導(dǎo)致用戶只能獲得部分的信息，所以這里使用了一個(gè)算法來(lái)突破這種限制。算法大體的思路就是利用異步函數(shù)的特點(diǎn)，在每次請(qǐng)求回來(lái)數(shù)據(jù)時(shí)并不馬上返回而是存儲(chǔ)到一個(gè)數(shù)組中再統(tǒng)一返回，而是否請(qǐng)求完所有數(shù)據(jù)即需要請(qǐng)求次數(shù)的判斷則是根據(jù)數(shù)據(jù)庫(kù)中記錄的總條數(shù)去除以當(dāng)前數(shù)據(jù)限制數(shù)，最終實(shí)現(xiàn)的具體突破算法如下：

app.router（'detail'，async（ctx，next）=>{

let blogId=event.blogId

let detail= await blogCollection.where（{_id：blogId}）.get（）.then（（res）=>{

return res.data

}）

const countResult=await blogCollection.count（）

const total=countResult.total

let commentList={

data：[]

}

if（total>0）{

const batchTimes=Math.ceil（total/MAX_LIMIT）

const tasks=[]

for（let i=0;i<batchTimes;i++）{

let promise=db.collection（'blog-comment'）

.skip（i*MAX_LIMIT）

.limit（MAX_LIMIT）

.where（{

blogId

}）

.orderBy（'createTime'，'desc'）.get（）

tasks.push（promise）

}

if（tasks.length>0）{

commentList=（await Promise.all（tasks））.reduce（（acc，cur）=>{

return{

data：acc.data.concat（cur.data）

}}）

}

ctx.body={

commentList，

detail

}}}）

5.2 PC Web端核心功能的設(shè)計(jì)與實(shí)現(xiàn)

PC端實(shí)現(xiàn)的功能比較復(fù)雜，主要包含了試題管理、發(fā)布管理、反饋管理、試題添加4個(gè)模塊。

其中比較值得注意的是在node.js調(diào)用小程序云函數(shù)時(shí)需要的access_token，access_token是從微信平臺(tái)獲取然后保存到本地一個(gè)文件中，最多只能保存兩個(gè)小時(shí)，為了確保其一直有效，需要定時(shí)不斷去獲取，但是考慮到服務(wù)器[7]突然中斷連接則定時(shí)器可能失效，導(dǎo)致access_token過(guò)期，所以需要重新處理讀取access_token的函數(shù)，getAccessToken函數(shù)如下：

const getAccessToken = async （） => {

try {

const readRes = fs.readFileSync（fileName， 'utf8'）

const readObj = JSON.parse（readRes）

const createTime = new Date（readObj.createTime）.getTime（）

const nowTime = new Date（）.getTime（）

if （（nowTime - createTime） / 1000 / 60 / 60 >= 2） {

await updateAccessToken（）

await getAccessToken（）

}

return readObj.access_token

} catch （error） {

await updateAccessToken（）

await getAccessToken（）

}}

最后，考慮到模塊化組件化的思想，為了降低程序文件間的耦合，封裝了兩個(gè)相應(yīng)的函數(shù)，一個(gè)是讀取小程序云端數(shù)據(jù)庫(kù)：

const getAccessToken = require（'./getAccessToken.js'）

const rp = require（'request-promise'）

const callCloudDB = async（ctx， fnName， query = {}） => {

const ACCESS_TOKEN = await getAccessToken（）

const options = {

method： 'POST'，

uri： `https：//api.weixin.qq.com/tcb/${fnName}？access_token=${ACCESS_TOKEN}`，

body： {

query，

env： ctx.state.env，

}，

json： true // Automatically stringifies the body to JSON

}

return await rp（options）

.then（（res） => {

return res

}）

.catch（function （err） {

console.log（err）;

}）

}

module.exports = callCloudDB

另一個(gè)是讀取小程序云端的云函數(shù)：

const getAccessToken = require（'./getAccessToken.js'）

const rp = require（'request-promise'）

const callCloudFn = async （ctx， fnName， params） => {

const ACCESS_TOKEN = await getAccessToken（）

const options = {

method： 'POST'，

uri： `https：//api.weixin.qq.com/tcb/invokecloudfunction？access_token=${ACCESS_TOKEN}&env=${ctx.state.env}&name=${fnName}`，

body： {

...params

}，

json： true // Automatically stringifies the body to JSON

}

return await rp（options）

.then（（res） => {

return res

}）

.catch（function （err） {

}）

}

module.exports = callCloudFn

5.3 實(shí)現(xiàn)效果展示

微信小程序端如圖3所示。

后臺(tái)前端管理系統(tǒng)如圖4所示。

6 結(jié)束語(yǔ)

系統(tǒng)通過(guò)結(jié)合微信小程序端和PC Web端，兩者由云服務(wù)器的JSON數(shù)據(jù)庫(kù)提供支持，可以實(shí)現(xiàn)管理人員便捷的管理和用戶隨時(shí)隨地的使用。這種方式既可以降低系統(tǒng)的耦合度，又可以解決當(dāng)前技術(shù)知識(shí)難以獲取和學(xué)習(xí)的困境，為以后社會(huì)教育事業(yè)的發(fā)展提供了一種思路[8]。當(dāng)然，目前的探索還存在一些諸如知識(shí)體系收集不夠完善、用戶交流形式相對(duì)單一等問(wèn)題，本系統(tǒng)也將針對(duì)這些問(wèn)題做進(jìn)一步的完善。

參考文獻(xiàn)：

[1] 劉紅衛(wèi).微信小程序應(yīng)用探析[J].無(wú)線互聯(lián)科技，2016（23）：11-12，40.

[2] 樂(lè)萬(wàn)德，程傳旭.基于云開(kāi)發(fā)的C語(yǔ)言客觀題練習(xí)小程序[J].信息技術(shù)與信息化，2021（7）：207-209.

[3] 黎雪，王芳.基于亞馬遜云的云開(kāi)發(fā)課程設(shè)計(jì)[J].計(jì)算機(jī)與網(wǎng)絡(luò)，2021，47（13）：42-43.

[4] 朱玉強(qiáng).微信小程序在圖書(shū)館移動(dòng)服務(wù)中的應(yīng)用實(shí)踐——以排架游戲?yàn)槔齕J].圖書(shū)館論壇，2017，37（7）：132-138.

[5] 李銘軒，常培，崔童，等.面向FaaS的算網(wǎng)異構(gòu)資源調(diào)度技術(shù)[J].信息通信技術(shù)，2021，15（4）：44-49，58.

[6] 王天泥.當(dāng)圖書(shū)館遇上微信小程序[J].圖書(shū)與情報(bào)，2016（6）：83-86.

[7] 張銳.確保無(wú)服務(wù)器架構(gòu)安全的“法門(mén)”[J].網(wǎng)絡(luò)安全和信息化，2021（4）：109-111.

[8] 劉玉佳.微信“小程序”開(kāi)發(fā)的系統(tǒng)實(shí)現(xiàn)及前景分析[J].信息通信，2017，30（1）：260-261.

【通聯(lián)編輯：梁書(shū)】

收稿日期：2021-09-28

基金項(xiàng)目：廣東省“攀登計(jì)劃”專項(xiàng)資金（pdjh2021b0452）

作者簡(jiǎn)介：李東升，男，廣東潮州人，主要研究方向?yàn)榍岸碎_(kāi)發(fā)、機(jī)器學(xué)習(xí);蘇煜輝，男，廣東潮州人，主要研究方向?yàn)榫W(wǎng)站開(kāi)發(fā)、PHP開(kāi)發(fā);陳正銘，信息系統(tǒng)項(xiàng)目管理師（高級(jí)），碩士;陳君豪，男，通信作者，農(nóng)藝師，經(jīng)濟(jì)師，碩士。