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

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

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

0 引言

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

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

1.1 需求分析

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

1.2 功能模塊劃分

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

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

2.1 技術(shù)選型

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

1） 客戶端。客戶端采用微信小程序，主要結(jié)構(gòu)為WXML+WXSS+JavaScript，其中WXML用來描述頁面結(jié)構(gòu)，WXSS用來描述頁面的樣式和頁面的顯示。這兩者結(jié)合在一起實(shí)現(xiàn)頁面顯示，為用戶提供良好的體驗(yàn)效果。JavaScript 負(fù)責(zé)聲明并處理數(shù)據(jù)，響應(yīng)頁面交互事件，對(duì)業(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ì)

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

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

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

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

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

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

學(xué)生課堂入座表（seating_record表），包含的屬性有：課程編號(hào)class_id，教室編號(hào)classroom_id，課程名稱class_name，學(xué)生名字stu_name，學(xué)生學(xué)號(hào)stu_id，學(xué)生座位的橫坐標(biāo)x，學(xué)生座位的縱坐標(biāo)y，學(xué)生入座時(shí)間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è)計(jì)與實(shí)現(xiàn)

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

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

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

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

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

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

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

3 結(jié)束語

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