“C語言程序設計”課程學習平臺微信小程行研究與開發(fā)

吳國棟，祝娛慧

(安徽農業(yè)大學 信息與計算機學院,合肥 230000)

隨著互聯(lián)網技術的迅猛發(fā)展，基于移動終端的學習系統(tǒng)也愈來愈受到人們的重視和喜愛。目前，微信作為一種為智能終端提供即時通信服務的免費應用程序，已經廣泛地應用在智能手機上。基于微信小程序所開發(fā)的“C語言程序設計”精品課程教學系統(tǒng)，可滿足教師與學生對該課程不同的需求，主要利用WXML(WeiXin Markup Language)、Javascript、WXSS(WeiXin Style Sheets)等技術進行開發(fā)。通過本系統(tǒng)，學生可以利用碎片化時間隨時隨地學習。課程學習內容覆蓋每一個知識點。在內容排版上采用文字與程序代碼圖片相結合，以適應微信程序的界面風格。系統(tǒng)設計了在線測試及學習過程管理等功能。微信小程序是一種即開即用、無須安裝、不占用內存的應用，可以在微信內便捷地獲取和傳播，同時具有出色的使用體驗[1]，緩解了老師和學生之間因時間、地點、區(qū)域等條件限制而產生的教與學障礙，增強師生之間的互動，為學生提供良好的在線學習平臺。

1 需求分析

1.1 系統(tǒng)結構分析

圖1 “C語言程序設計”課程教學系統(tǒng)結構

整個“C語言程序設計”課程教學系統(tǒng)結構分為前端與后端兩個部分，如圖1所示。前端主要面向學生，后端主要面向應用不同權限的管理員，例如教師等。學生通過系統(tǒng)可以進行查看個人信息和課程資源、在線學習、在線測試和查詢學習進度等學習過程管理。教師端登錄系統(tǒng)可以對課程資源、學生信息、學生學習情況和論壇等進行管理[2]。

1.2 系統(tǒng)主要功能需求

“C語言程序設計”教學管理系統(tǒng)要實現(xiàn)學生信息管理、在線學習管理、在線測試和論壇討論四大核心功能。

學生信息管理功能包括查看學生的基本信息、學習進度和測試成績。在線學習管理功能除了要實現(xiàn)學生可以觀看課程視頻及電子講義，教師可以上傳課程資源等傳統(tǒng)教學模式，還應具有對學生學習進度進行監(jiān)督的功能。在線測試功能要求系統(tǒng)能夠隨機生成一套試卷供學生測試，測試過程中限制測試時間，學生提交試卷后自動批改生成成績。論壇討論功能實現(xiàn)學生與學生之間、學生與老師之間的互動交流，且考慮到不同學生提出的問題會出現(xiàn)重復，教師也會有緊急事件通知每位學生，為減少教師的重復工作，系統(tǒng)在設計時應考慮以留言通知欄等形式解決此問題。

通過對整個學習平臺的分析，設計出精品課程教學系統(tǒng)數據流程圖，如圖2所示。

圖2 精品課程教學系統(tǒng)數據流程圖

1.3 微信開發(fā)技術需求

開發(fā)微信小程序需要掌握HTML、CSS、JavaScript等開發(fā)語言和微信提供的微信web開發(fā)者工具。小程序后臺用JavaScript語言編寫，前端框架用WXML構建，結合基礎組件、事件系統(tǒng)構建出頁面的結構。前端Style用WXSS編寫,這是一種在CSS的基礎上擴充了尺寸單位、樣式導入，用于控制WXML組件顯示的樣式語言[3]。數據庫技術基于微信小程序數據庫，實現(xiàn)用戶管理、統(tǒng)計分析等。存儲管理使用由微信提供的云開發(fā)環(huán)境。

2 系統(tǒng)總體結構

2.1 系統(tǒng)功能結構

“C語言程序設計”精品課程管理系統(tǒng)主要分為用戶管理、課程管理、論壇管理。其中，用戶管理包括用戶登錄、用戶注冊、信息的查詢修改、修改密碼和權限設置。課程管理則針對學生在平臺學習功能，主要包括在線學習、在線測試、學習成績查詢和學習進度查詢功能。論壇管理面向學生與學生之間，老師與學生之間的互動交流功能。“C語言程序設計”教學系統(tǒng)功能結構圖，如圖3所示。

圖3 “C語言程序設計”教學系統(tǒng)功能結構圖

2.2 數據庫設計

“C語言程序設計”教學系統(tǒng)采用微信云開發(fā)數據庫，云開發(fā)提供了一個 JSON 數據庫，一個數據庫可以有多個集合(相當于關系型數據中的表)，集合可看作一個 JSON 數組，數組中的每個對象就是一條記錄，記錄的格式是 JSON 對象。數據庫中的每條記錄都是一個 JSON 格式的對象。由于直接使用微信云開發(fā)數據庫，將系統(tǒng)所使用的數據存放在云開發(fā)數據庫中，微信小程序可以直接連接數據庫進行數據操作。系統(tǒng)主要數據庫表有學生信息表、教師信息表、試題信息表，論壇信息表等。如表1～表4所示：

表1 學生信息表

表2 教師信息表

表3 試題信息表

表4 論壇信息表

3 系統(tǒng)的設計與實現(xiàn)

3.1 用戶登錄模塊

用戶登錄界面包括用戶名和密碼。用戶選擇相應的身份后輸入用戶名和密碼，登陸成功則進入系統(tǒng)；登錄失敗則會出現(xiàn)相應錯誤提示。新用戶通過點擊立即注冊進入立即注冊界面，完成注冊后會自動跳轉登錄界面。用戶登錄界面如圖4所示。

圖4 用戶登錄界面

圖5 個人用戶信息界面

3.2 系統(tǒng)管理模塊

在此模塊中，學生可以查看個人用戶信息，如姓名、學號、學院專業(yè)、考試成績記錄等，并對基本信息擁有修改的權力(除成績外)。老師除查看個人的信息外，還可以查看學生名單信息，具體包括每個學生的姓名、專業(yè)、視頻學習進度、考試成績。個人用戶信息界面如圖5所示。

3.3 在線學習模塊

此模塊為學生學習課程所設。學生登錄系統(tǒng)后，點擊首頁即可看到章節(jié)目錄，進入相應知識章節(jié)就可在線觀看課程視頻和課程講義電子版。在線學習實現(xiàn)界面如圖6所示。

圖6 在線學習界面

圖7 學習進度界面

3.4 學習過程管理模塊

學生在觀看每一章的課程資源時，系統(tǒng)后臺會同時進行時間計數，達到規(guī)定觀看時間后才可以提交學習進度，并且在個人中心查看學習進度，可以看到自己的全部學習進程，星星點亮則表示已完成該章節(jié)學習任務。學習提供界面，如圖7所示。

3.5 論壇管理模塊

該模塊主要實現(xiàn)學生與學生之間的在線交流及學生與老師之間的線上課程交流。老師可以發(fā)布通告通知學生重要事情，師生之間在論壇里通過發(fā)表留言和回復留言的形式來交流，這樣形成一種交互式的教學模式。論壇討論界面如圖8所示，論壇留言信息關鍵代碼如下：

wx.cloud.callFunction({//調用云函數獲取留言表

name: 'chatbox',

data:{ },

success(res) {

that.setData({

liuyanlist: res.result.data

})

},

})

db.collection('notice').get({//獲取通知

success(res) {

that.setData({

notice:res.data

})

wx.setStorageSync('noticeID', res.data[0]._id)

}

})

圖8 論壇討論界面

圖9 在線測試界面

3.6 在線測試模塊

學生完成課程視頻學習內容后，可進入在線測試完成老師指定的試卷測試，從題庫隨機抽取試題生成一份試卷，在規(guī)定時限內提交試卷(若到時未提交則強制提交)，系統(tǒng)自動完成試卷批改，學生可查看客觀題的考試分數。在線測試界面實現(xiàn)如圖9所示，在線測試關鍵代碼如下：

wx.cloud.callFunction({

name: 'question',

data:{

chapter:that.data.chapter //從數據庫里抽取對應章節(jié)題目

},

success(res) {

that.setData({

questionCount: res.result.data.length,

questions:res.result.data

})

},

fail: err => {

wx.showModal({

title: '提示',

content: '網絡異常',

showCancel: false

})

}

})

4 結語

微信小程序與基于Web的教學網站相比更為便捷，僅僅需要一部手機就可以隨時隨地學習，較于App開發(fā)來說，開發(fā)成本更便宜。本文基于微信小程序，開發(fā)了一個線上移動端的C語言教學系統(tǒng)，為學生提供了一種實時、易用、交互的全新學習環(huán)境[4]。為提高學生學習效率，提升“C語言程序設計”課程教學質量，具有一定的價值。