基于云開發(fā)的雙端結(jié)合學(xué)習(xí)教育管理系統(tǒng)設(shè)計

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

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

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

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

文章編號：1009-3044（2022）07-0043-04

1 概述

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

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

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

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

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

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

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

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

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

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

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

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

2.1 微信小程序端

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

2.2 PC Web端

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

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

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

同時因為Web端數(shù)據(jù)的請求是以SDK的方式，有微信服務(wù)器的支持，保障了傳輸過程中的安全性和可靠性。

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

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

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

4.1 Serverless架構(gòu)

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

4.2 Vue-element-admin框架

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

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

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

微信小程序端比較重要的功能是對用戶身份的確認(rèn)和儲存等鑒權(quán)操作，在用戶打開小程序即可自動獲取用戶頭像與姓名，同時微信小程序更多個性化的功能則需要用戶授權(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

}）

}}}）

}，

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

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

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

}}

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

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

另一個是讀取小程序云端的云函數(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 實現(xiàn)效果展示

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

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

6 結(jié)束語

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

參考文獻(xiàn)：

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

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

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

[4] 朱玉強(qiáng).微信小程序在圖書館移動服務(wù)中的應(yīng)用實踐——以排架游戲為例[J].圖書館論壇，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)圖書館遇上微信小程序[J].圖書與情報，2016（6）：83-86.

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

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

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

收稿日期：2021-09-28

基金項目：廣東省“攀登計劃”專項資金（pdjh2021b0452）

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