“GL互動小課堂”微信小程序的設(shè)計與實現(xiàn)

陳麗虹 王小敏 劉家寶

摘 ?要：開發(fā)一款用于高校課堂簽到與課堂小測試的微信課堂小程序，可方便高校教師實現(xiàn)在線課堂考勤、及時檢測學(xué)生的課堂學(xué)習(xí)成果，有利于高校教師開展后續(xù)的教學(xué)工作。文章在開發(fā)小程序的過程中采用面向?qū)ο蠓治龇椒ㄑ芯糠治鱿到y(tǒng)，并結(jié)合UML工具模擬分析系統(tǒng)中的對象的活動過程。應(yīng)用微信開發(fā)者工具、微信云服務(wù)器以及相關(guān)的API接口實現(xiàn)“GL互動小課堂”微信小程序的開發(fā)。

關(guān)鍵詞：小程序開發(fā);面向?qū)ο蠓治龇椒?UML工具

中圖分類號：TP311.56 ? ? ?文獻(xiàn)標(biāo)識碼：A 文章編號：2096-4706（2020）21-0076-04

Design and Implementation of WeChat Applet “GL Interactive Classroom”

CHEN Lihong，WANG Xiaomin，LIU Jiabao

（School of Information Technology，Guangdong Polytechnic College，Zhaoqing ?526100，China）

Abstract：The development of a WeChat classroom applet for college classroom check-in and classroom tests can facilitate college teachers to achieve online classroom attendance，detect studentsclassroom learning achievements in time，and help college teachers to carry out subsequent teaching work. In the process of developing the applet，the object-oriented analysis method is used to study the analysis system，and combines UML tools to simulate and analyze the activity process of objects in the system. The application of WeChat developer tools，WeChat cloud server and related API interface to realize the development of “GL interactive classroom” WeChat applet.

Keywords：applet development;object-oriented analysis method;UML tool

0 ?引 ?言

日常使用手機(jī)APP需要用戶先到應(yīng)用商城下載對應(yīng)的安裝包，再經(jīng)過手機(jī)設(shè)備解壓后進(jìn)行安裝，安裝好應(yīng)用程序后需進(jìn)行注冊登錄才能正常使用。隨著大眾對移動電子設(shè)備與應(yīng)用軟件依賴度越來越高，軟件的更新迭代速度不斷加快，傳統(tǒng)APP開發(fā)周期較長且審核過慢等特點(diǎn)逐漸凸顯，開發(fā)者難以在短時間內(nèi)開發(fā)出一款滿足用戶的需求的APP。相對于傳統(tǒng)的APP，微信小程序無需用戶下載解壓安裝，只需用戶搜索并點(diǎn)擊小程序即可使用。微信平臺作為小程序的編譯器，只要點(diǎn)擊小程序即可加載解析，與傳統(tǒng)的軟件開發(fā)相比，小程序的開發(fā)周期大大縮短，在當(dāng)今應(yīng)用更新迭代的速度不斷加快的情況下，對于小型系統(tǒng)而言，小程序更能適應(yīng)當(dāng)下移動設(shè)備軟件應(yīng)用開發(fā)的需求。

1 ?需求調(diào)查與分析

現(xiàn)階段高等教育還是通過以學(xué)校為載體，課堂為主要場所的面對面授課形式開展教學(xué)活動，課堂教育在學(xué)生學(xué)習(xí)知識的過程中起到重要作用，尤其專業(yè)理論授課過程，授課方式呆板，授課形式以知識的灌輸為主，互動單一，學(xué)生反應(yīng)差。學(xué)生在這種教學(xué)模式下，習(xí)慣了單向接受教師灌輸?shù)闹R，難以保證知識的理解、掌握程度。在這種教學(xué)模式下，教師講自己的，學(xué)生聽自己的，容易出現(xiàn)學(xué)生注意力不集中的問題，導(dǎo)致知識吸收效果大打折扣。教師在保證教學(xué)進(jìn)度的前提下，忽略了學(xué)生掌握知識的程度，由上述問題可以看出目前課堂教學(xué)現(xiàn)狀的確存在教師與學(xué)生有效互動少、教學(xué)效果差等現(xiàn)象。因此提高教學(xué)有效互動，開發(fā)一款既能對課堂學(xué)生紀(jì)律的管理又能提供師生互動的教學(xué)平臺就十分重要。為解決以上問題，作者開發(fā)了一款小程序，并且負(fù)責(zé)后期的測試階段，目前，“GL互動小課堂”微信小程序的功能已實現(xiàn)，并成功將其應(yīng)用到本校實際的課堂中。

2 ?軟件分析

2.1 ?小程序功能描述

使用“GL互動小課堂”小程序的教師用戶可以根據(jù)上課情況隨時發(fā)起課堂簽到、更新授課信息，在線編輯習(xí)題、發(fā)布課堂習(xí)題測試。學(xué)生用戶可實現(xiàn)在線簽到、習(xí)題作答、在線查詢習(xí)題測試結(jié)果。云端服務(wù)器要求能夠及時接收處理用戶的請求、及時反饋用戶的請求結(jié)果、保障用戶消息推進(jìn)同步，如教師發(fā)起的課堂簽到與習(xí)題發(fā)布能得到及時有效處理并同步推送，學(xué)生用戶提交的簽到信息與習(xí)題作答情況能夠得到及時反饋。

2.2 ?開發(fā)技術(shù)要求

研究方法：采用面向?qū)ο蠓治龇椒ㄑ芯块_發(fā)“GL互動小課堂”微信小程序。分析過程應(yīng)用UML工具來具體描述該小程序的功能實現(xiàn)過程。

開發(fā)技術(shù)：應(yīng)用WXML、WXSS搭建布局小程序前臺界面，應(yīng)用JavaScript搭建后臺操作邏輯并實現(xiàn)數(shù)據(jù)傳遞，云端數(shù)據(jù)處理采用微信云服務(wù)器來記錄小程序的用戶活動數(shù)據(jù)。

開發(fā)環(huán)境及工具：微信開發(fā)者工具及相關(guān)的SDK工具包。

2.3 ?小程序使用場景分析

該平臺使用對象：高校教師、高校學(xué)生。

教師端應(yīng)實現(xiàn)的操作：發(fā)布課堂簽到、授課班級分類、講課課程分類、習(xí)題編輯發(fā)布、查收課堂簽到記錄與習(xí)題作答數(shù)據(jù)。

學(xué)生端應(yīng)實現(xiàn)的操作：在線簽到、在線答題、查看習(xí)題作答記錄。

云端服務(wù)器信息處理：同步保存教師活動記錄、學(xué)生活動記錄，及時處理并同步更新數(shù)據(jù)。

2.4 ?采用OOA方法與UML工具研究小程序功能

云服務(wù)器能夠及時響應(yīng)用戶發(fā)出的活動請求并反饋消息推送進(jìn)度，可實現(xiàn)同步更新平臺數(shù)據(jù)、及時推送活動通知、動態(tài)記錄活動數(shù)據(jù)，保證信息同步。對于小程序中主要的活動過程可借助UML工具來描述活動的實現(xiàn)過程。

“課堂簽到”活動：由教師啟動“發(fā)起課堂簽到”操作觸發(fā)“課堂簽到”活動。學(xué)生點(diǎn)擊簽到，通知完成“課堂簽到”活動?！罢n堂簽到”活動事件實現(xiàn)過程如圖1時序圖所示。

“習(xí)題檢測”活動：由教師發(fā)布“課堂小測試”操作后，“習(xí)題檢測”活動事件生效?！罢n堂小測試”發(fā)布后，云服務(wù)器推送教師的活動通知到學(xué)生端，學(xué)生同步接收到該消息后可點(diǎn)擊作答，作答完成提交后即可查看答案。整個活動事件的流程如圖2所示。

3 ?軟件設(shè)計

3.1 ?微信小程序操作界面設(shè)計

教師端主頁功能組件：“首頁”“我的課堂”“我的習(xí)題”。其中，簽到活動由教師發(fā)起，先通過點(diǎn)擊“點(diǎn)擊進(jìn)入課堂”按鍵即可在彈出的頁面表單里設(shè)置授課課程與授課班級，設(shè)置好相關(guān)數(shù)據(jù)后點(diǎn)擊“確定發(fā)起課堂簽到”按鍵即可發(fā)起簽到活動。

學(xué)生端主頁功能組件：“我的課堂”“我的個人中心”“我的習(xí)題記錄”。學(xué)生可在操作界面查收消息通知與查看習(xí)題作答情況。

3.2 ?后臺數(shù)據(jù)處理

首次使用“GL互動小課堂”小程序的微信用戶，其個人的相關(guān)信息將被云服務(wù)器所記錄。記錄的相關(guān)數(shù)據(jù)項包括：學(xué)生微信號、學(xué)生班級名稱、學(xué)生學(xué)號、學(xué)生姓名、首次信息登記入庫時間。

教師發(fā)起“課堂簽到”活動，云服務(wù)器響應(yīng)活動并動態(tài)生成的課堂簽到文件，具體記錄數(shù)據(jù)項包括：教師微信號、教師授課班級、教師發(fā)起簽到活動時間、教師發(fā)起簽到地理位置、學(xué)生微信號、學(xué)生簽到時間、學(xué)生簽到地理位置。

學(xué)生點(diǎn)擊“課堂小測試”作答習(xí)題，答題并提交給云服務(wù)器后，云服務(wù)器將檢測學(xué)生的測試得分并記錄此次的得分?jǐn)?shù)據(jù)，該過程需記錄的數(shù)據(jù)項包括：小測試ID號、學(xué)生微信號、題號標(biāo)識、題號得分標(biāo)識。

3.3 ?編碼實現(xiàn)小程序主要活動

“課堂簽到”活動：教師在手機(jī)微信端選擇“授課課程”“授課班級”后點(diǎn)擊“發(fā)起課堂簽到”按鈕，云服務(wù)器通過教師發(fā)出的活動請求之后將生成“《XX班級XX課程課堂簽到表》”記錄文件。其中，教師在微信界面點(diǎn)擊進(jìn)入“GL互動小課堂”小程序后，云服務(wù)器響應(yīng)教師發(fā)出的請求并通過wx.login（）操作自動登記教師最近一段時間內(nèi)的登錄信息，同時將是否成功“發(fā)起課程簽到”活動通過wx.showsToast（）返回消息提示。教師點(diǎn)擊“發(fā)起課堂簽到”活動的請求會通過post請求告知云服務(wù)器，并向活動終點(diǎn)（學(xué)生微信端）推送響應(yīng)“課堂簽到”通知。當(dāng)學(xué)生接到該消息通知并點(diǎn)擊完成“課堂簽到”任務(wù)后，學(xué)生的已簽到信息將會被推送到云服務(wù)器并與教師的信息進(jìn)行對比，若學(xué)生簽到時的定位（地理位置）與教師發(fā)起活動時的定位距離差在有效區(qū)間范圍內(nèi)，則此次學(xué)生的簽到信息有效。即經(jīng)過計算后兩者距離差需滿足以下條件：

{|wx.getLocation（Teacher）-wx.getLocation（Student）|} ≤M，M∈[0，100]

在本小程序的簽到頁面glcheckin.wxml中設(shè)置簽到按鈕button，并設(shè)置button中的一個屬性bindgetuserinfo= "get UserInfo"，則當(dāng)學(xué)生點(diǎn)擊“上課簽到”按鈕時，則前臺顯示返回的學(xué)生信息與getUserInfo（）獲取到的學(xué)生信息一致。另外，在簽到界面也可通過頁面加載過程獲取學(xué)生信息。

該小程序的前臺界面布局及后臺邏輯編寫完成后，經(jīng)過測試后可實現(xiàn)課堂簽到功能。授課教師在小程序中點(diǎn)擊按鈕發(fā)起“課堂簽到”活動后，“GL互動小課堂”小程序顯示簽到相關(guān)頁面如圖3～圖7所示。

“習(xí)題檢測”活動：教師點(diǎn)擊小程序界面的發(fā)起“課堂小測試”活動，發(fā)送前選擇課程與班級，選擇習(xí)題后點(diǎn)擊發(fā)送，云服務(wù)器響應(yīng)教師的發(fā)送習(xí)題檢測請求，并將習(xí)題作答消息推送到學(xué)生端。

學(xué)生端收到教師發(fā)送的“課堂小測試”習(xí)題檢測通知后，在活動有效期內(nèi)點(diǎn)擊習(xí)題作答，做完習(xí)題后點(diǎn)擊“提交”按鈕。學(xué)生向云服務(wù)器發(fā)出“提交”請求后原表單數(shù)據(jù)在真正提交給云服務(wù)器處理前會先檢測此次所提交的表單數(shù)據(jù)是否合理（若此時學(xué)生有題目未作答即檢測到arrary[i].state==0則將彈出“還有題目未作答”提示），數(shù)據(jù)成功提交給云服務(wù)器后，云服務(wù)器將自動匹配答案并計算此次“課堂小測試”得分，最后將此次的測試結(jié)果發(fā)回到學(xué)生端并同步記錄到教師任教課程的相關(guān)成績登記表中。其中，“課堂小測試”的測試得分的計算原則為：每一道題均設(shè)置正確選項標(biāo)志，默認(rèn)初始值為0（代表該題不得分），當(dāng)學(xué)生題目作答正確時該題標(biāo)志值為1。

4 ?教學(xué)應(yīng)用情況

作者以半學(xué)期為試驗時間分別對“數(shù)據(jù)庫原理與SQL Server”“數(shù)據(jù)結(jié)構(gòu)與算法”和“軟件工程與UML”三門課程進(jìn)行對比試驗，選取兩個班級采用傳統(tǒng)的教學(xué)模式，另外兩個班級采用“GL互動小課堂”的教學(xué)模式作為測試樣本，最終通過期中測試以及問卷調(diào)查得出四個班級的課堂教學(xué)效果。從測試中發(fā)現(xiàn)采用“GL互動小課堂”的教學(xué)模式的班級平均成績明顯高于沿用傳統(tǒng)教學(xué)模式的班級。從問卷調(diào)查結(jié)果來看，對比原先生硬的點(diǎn)名方式學(xué)生更喜歡這種新型的簽到方式，且學(xué)生也更喜歡線上型的“課堂小測試”而非傳統(tǒng)的口頭提問。教師也從實際教授課程中發(fā)現(xiàn)采用小程序進(jìn)行課堂互動，學(xué)生積極性以及課堂氛圍都有所提高。由此可得，采用“GL互動小課堂”能有效地調(diào)動學(xué)生上課積極性，同時也能取得良好的教學(xué)效果。

5 ?結(jié) ?論

本次所開發(fā)“GL互動小課堂”小程序，主要包括簽到功能、題目管理功能和在線答題功能。簽到模塊幫助教師解決了傳統(tǒng)課堂簽到效率不高的問題。題目管理模塊幫助教師將教學(xué)設(shè)計中的互動小題保存到云服務(wù)器中，方便在多次課堂中的調(diào)用。在線答題模塊，在教師發(fā)布題目后，學(xué)生可在小程序進(jìn)行回答，系統(tǒng)將答案收集后，會自動生成學(xué)生詳細(xì)的答題情況;教師可以通過查看學(xué)生答題情況了解學(xué)生對于知識的掌握，同時學(xué)生也可通過答題情況了解自己聽課的效率，由此激發(fā)學(xué)生在課堂上的學(xué)習(xí)積極性。

“GL互動小課堂”小程序主要的功能模塊已經(jīng)開發(fā)完畢，但是在互動方面仍不夠完善，有待添加其余互動型的功能模塊，后續(xù)筆者會進(jìn)一步完善此系統(tǒng)的功能。希望在未來的教學(xué)中，能有更多教師使用此系統(tǒng)。

參考文獻(xiàn)：

[1] 王玉洋.基于微信小程序的移動學(xué)習(xí)平臺環(huán)境構(gòu)建與系統(tǒng)設(shè)計開發(fā) [D].南京：南京大學(xué)，2018.

[2] 呂康鑫，王倩慧，冀陽娜，等.基于WeChat的“小班長”課堂輔助應(yīng)用研究 [J].科技經(jīng)濟(jì)導(dǎo)刊，2018，26（21）：158-159.

[3] 閆萍，吳雄英，楊斯涵.微信“e教學(xué)”的應(yīng)用設(shè)計 [J].當(dāng)代教研論叢，2017（4）：88.

作者簡介：陳麗虹（1996—），女，漢族，廣東汕頭人，助教，學(xué)士學(xué)位，研究方向：計算機(jī)科學(xué)與技術(shù)。