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

吳國棟，祝娛慧

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

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

1 需求分析

1.1 系統結構分析

圖1 “C語言程序設計”課程教學系統結構

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

1.2 系統主要功能需求

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

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

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

圖2 精品課程教學系統數據流程圖

1.3 微信開發技術需求

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

2 系統總體結構

2.1 系統功能結構

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

圖3 “C語言程序設計”教學系統功能結構圖

2.2 數據庫設計

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

表1 學生信息表

表2 教師信息表

表3 試題信息表

表4 論壇信息表

3 系統的設計與實現

3.1 用戶登錄模塊

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

圖4 用戶登錄界面

圖5 個人用戶信息界面

3.2 系統管理模塊

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

3.3 在線學習模塊

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

圖6 在線學習界面

圖7 學習進度界面

3.4 學習過程管理模塊

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

3.5 論壇管理模塊

該模塊主要實現學生與學生之間的在線交流及學生與老師之間的線上課程交流。老師可以發布通告通知學生重要事情，師生之間在論壇里通過發表留言和回復留言的形式來交流，這樣形成一種交互式的教學模式。論壇討論界面如圖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 在線測試模塊

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

wx.cloud.callFunction({

name: 'question',

data:{

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

},

success(res) {

that.setData({

questionCount: res.result.data.length,

questions:res.result.data

})

},

fail: err => {

wx.showModal({

title: '提示',

content: '網絡異常',

showCancel: false

})

}

})

4 結語

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