基于微信小程序的課堂選座系統(tǒng)的設(shè)計與實現(xiàn)

魏蒙蔚 王芳 梁思荷 楊煥蔚 羅佳龍

關(guān)鍵詞：微信小程序；課堂；選座；課堂選座；選座系統(tǒng)

0 引言

隨著移動通信技術(shù)的日漸成熟和智能手機的普及，微信小程序受到大眾青睞并且廣泛運用到眾多領(lǐng)域[1-2]。本文提出一種利用微信小程序進(jìn)行課堂選座的方案，學(xué)生通過微信小程序自主選擇課堂座位，教師可獲取學(xué)生在課堂上的座位表。教師點擊座位表上的位置就能看到對應(yīng)學(xué)生的名字，便于教師在授課時與學(xué)生進(jìn)行精確的互動。教師通過課堂座位表認(rèn)識學(xué)生，學(xué)生得到關(guān)注，從心理上提升了雙方的教學(xué)體驗。

1 系統(tǒng)需求分析

1.1 需求分析

為了更好地設(shè)計課堂選座系統(tǒng)，項目團(tuán)隊采用訪談法收集了學(xué)生和教師的需求。教師需要導(dǎo)入課程和班級信息，生成課堂，查看學(xué)生的課堂座位表，統(tǒng)計歷史課堂入座信息。學(xué)生根據(jù)教師提供的課堂編號進(jìn)入課堂進(jìn)行選座，學(xué)生能夠查看自己的歷史課堂信息。

1.2 功能模塊劃分

通過需求分析可知，課堂選座系統(tǒng)的用戶可分為教師和學(xué)生兩種不同的角色。不同角色的用戶將在系統(tǒng)登錄模塊按照不同的要求進(jìn)行用戶綁定。教師的功能有：1） 設(shè)置課程和班級信息，2） 創(chuàng)建課堂，3） 查看實時課堂，4） 查看歷史課堂信息。學(xué)生的功能有：1） 進(jìn)入課堂，2） 選座，3） 查看個人歷史入座信息。

2 系統(tǒng)設(shè)計與實現(xiàn)

2.1 技術(shù)選型

微信小程序提供基于微信的表單、導(dǎo)航、地圖、媒體和位置等開發(fā)組件，使開發(fā)者在微信的網(wǎng)頁里構(gòu)建一個HTML5 應(yīng)用。同時還可以使用微信小程序云開發(fā)中提供的許多云函數(shù)[3-4]。本系統(tǒng)分為以下3 個部分：

1） 客戶端?？蛻舳瞬捎梦⑿判〕绦?，主要結(jié)構(gòu)為WXML+WXSS+JavaScript，其中WXML用來描述頁面結(jié)構(gòu)，WXSS用來描述頁面的樣式和頁面的顯示。這兩者結(jié)合在一起實現(xiàn)頁面顯示，為用戶提供良好的體驗效果。JavaScript 負(fù)責(zé)聲明并處理數(shù)據(jù)，響應(yīng)頁面交互事件，對業(yè)務(wù)進(jìn)行邏輯處理[5]。

2） 服務(wù)器端。后端采用Spring Boot 框架，使用Redis作為緩存。為便于前后端分離的接口測試，還使用了Swagger作為接口文檔開發(fā)工具。

3） 數(shù)據(jù)庫。為了能讓系統(tǒng)更便捷，采用了云上MySQL數(shù)據(jù)庫。

2.2 數(shù)據(jù)庫設(shè)計

根據(jù)需求分析和功能模塊，為本系統(tǒng)的數(shù)據(jù)庫設(shè)計了如下7個表，表與表之間的關(guān)系見圖1。

學(xué)生信息表（stu_account表），包含的屬性有：用戶登錄的微信賬號stu_wx_id ，學(xué)生姓名stu_name ，學(xué)生學(xué)號stu_id。

教師信息表（teacher_ac?count表），包含的屬性有：用戶登錄的微信賬號teacher_wx_id，教師姓名teacher_name，教師教職工號teacher_id。

學(xué)生班級表（classes） ，包含的屬性有：班級名稱class_name，課程名稱course_name，教師teacher_wx_id，行政班標(biāo)識符class_id， 學(xué)生專業(yè)stu_speciality，學(xué)生學(xué)號stu_id，學(xué)生姓名stu_name ， 學(xué)生序號stu_num。

教師創(chuàng)建的課堂表（class_room_list表），包含的屬性有：課程class_id，教室密碼class_password，教師名稱class_name，課程開啟時間start_time，課程結(jié)束時間end_time，教室標(biāo)識符class?room_id，教室尺寸classroom_size，教師的teacher_open_id，課程的行政班class_administrative，過道pas?sage1，過道passage2，過道passage3，入座時長seat?ing_time。

過期的課堂表（class_room_list_expire表），結(jié)構(gòu)和class_room_list表一樣，用于歷史數(shù)據(jù)遷移。

學(xué)生課堂入座表（seating_record表），包含的屬性有：課程編號class_id，教室編號classroom_id，課程名稱class_name，學(xué)生名字stu_name，學(xué)生學(xué)號stu_id，學(xué)生座位的橫坐標(biāo)x，學(xué)生座位的縱坐標(biāo)y，學(xué)生入座時間join_time，學(xué)生表現(xiàn)分?jǐn)?shù)performance_score，學(xué)生表現(xiàn)良好次數(shù)good，學(xué)生表現(xiàn)不佳次數(shù)bad。

過期的學(xué)生課堂入座表（seating_record_expired表），結(jié)構(gòu)和seating_record 表一樣，用于歷史數(shù)據(jù)遷移。

2.3 模塊設(shè)計與實現(xiàn)

1） 用戶登錄模塊。當(dāng)用戶通過微信小程序進(jìn)入系統(tǒng)時，系統(tǒng)調(diào)用云函數(shù)getOpenId（）登錄，獲取用戶的openId、姓名、token、用戶類型等屬性值并將其保存在本地緩存中，以方便后續(xù)模塊的調(diào)用。如用戶是第一次登錄，則跳轉(zhuǎn)到綁定個人信息頁面，若不是則跳轉(zhuǎn)到學(xué)生主頁或教師主頁。

2） 用戶綁定信息模塊。當(dāng)用戶第一次登錄時會進(jìn)入到該模塊，用戶進(jìn)入到該模塊需要填相應(yīng)的表單信息。學(xué)生用戶填入自己的學(xué)號和姓名便可綁定；用戶教師需經(jīng)過郵箱驗證，教師通過輸入教職工郵箱獲取驗證碼并提交驗證碼方可綁定。用戶綁定后跳轉(zhuǎn)到相應(yīng)的學(xué)生主頁或教師主頁。用戶綁定功能流程如圖2所示，用戶綁定頁面如圖3所示。

3） 教師導(dǎo)入班級模塊。此模塊用于教師第一次創(chuàng)建某個課程班級。教師首先填寫要創(chuàng)建的課程名稱和班級名稱，然后導(dǎo)入該課程班級的學(xué)生名單。在選擇文件時系統(tǒng)首先會判斷所選擇的文件是不是Ex?cel文件，如果是則把所選的文件渲染在頁面上，否則彈出選擇文件格式錯誤的警告。在設(shè)置好課程班級并導(dǎo)入學(xué)生名單后，教師便可從已有的課程班級創(chuàng)建課堂了。選擇要創(chuàng)建課堂的課程班級，點擊創(chuàng)建按鈕，系統(tǒng)會以表單的形式把數(shù)據(jù)發(fā)送給后端，同時會記錄創(chuàng)建本次課堂的教師wx_id。在成功創(chuàng)建課程班級之后會向后端再發(fā)一次請求，根據(jù)教師的wx_id請求創(chuàng)建的對應(yīng)課堂，然后存入緩存方便后續(xù)使用。教師導(dǎo)入班級后點擊創(chuàng)建按鈕的具體流程如圖4所示，教師導(dǎo)入班級頁面如圖5所示。

4） 教師創(chuàng)建課堂模塊。在創(chuàng)建課堂頁面可以選擇課堂的主題、課程、班級、開始/結(jié)束時間、教室類型、教室過道位置、學(xué)生入座時間以及課堂密碼等信息，選擇好之后點擊創(chuàng)建。創(chuàng)建成功之后后端就把該教師創(chuàng)建的課堂信息存入數(shù)據(jù)庫。教師創(chuàng)建課堂功能流程如圖6所示，教師創(chuàng)建課堂頁面如圖7所示。

5） 學(xué)生加入課堂模塊。教師創(chuàng)建課堂并公布課堂ID和密碼后，學(xué)生便可根據(jù)教師提供的課堂ID和密碼加入課堂。若學(xué)生第一次加入課堂則會提醒學(xué)生確認(rèn)課堂信息，確認(rèn)無誤后跳轉(zhuǎn)到課堂頁面。若學(xué)生已加入該課堂則直接進(jìn)入課堂頁面。學(xué)生加入課堂及確認(rèn)課堂信息頁面如圖8所示。

6） 學(xué)生入座模塊。學(xué)生入座模塊是在學(xué)生加入課堂后進(jìn)行的。學(xué)生應(yīng)在規(guī)定的時間內(nèi)進(jìn)入課堂選座（入座），若超出規(guī)定時間將無法進(jìn)入課堂。學(xué)生根據(jù)自己所坐座位在課堂頁面選擇對應(yīng)座位，灰色表示已有其他同學(xué)入座，綠色表示可選座位，橙色表示學(xué)生已標(biāo)記自己的座位。圖9為學(xué)生入座功能流程圖，圖10為學(xué)生入座頁面。

7） 教師查看座位表模塊。教師可以在課堂頁面看到學(xué)生入座的實時情況。綠色表示已有同學(xué)入座，灰色表示空座位。教師可點擊綠色座位查看學(xué)生信息，被點擊后座位變成橙色，并彈出該學(xué)生的詳細(xì)信息，教師還可在上課過程中對學(xué)生的行為進(jìn)行標(biāo)記，如圖11。

3 結(jié)束語

學(xué)生課堂選座系統(tǒng)便于教師通過座位表認(rèn)識課堂上在座的學(xué)生。教師還可以根據(jù)班級、課程、課堂查看歷史選座數(shù)據(jù)，可以對學(xué)生的課堂表現(xiàn)信息進(jìn)行統(tǒng)計，為課程平時成績提供參考。在這款學(xué)生課堂選座系統(tǒng)的幫助下，教師更加了解學(xué)生，學(xué)生受到教師關(guān)注后更加自信，學(xué)生學(xué)習(xí)的主動性增強。實踐表明，學(xué)生課堂選座系統(tǒng)能提高師生雙方的課堂積極性，使師生關(guān)系更加融洽，進(jìn)而間接地提高教學(xué)效果[6-7]。