基于HTML5的數(shù)字化移動(dòng)課堂學(xué)習(xí)系統(tǒng)設(shè)計(jì)

鐘衛(wèi)銘 楊元峰 許麗娟 潘婷婷

【摘要】本文闡述了數(shù)字化移動(dòng)課堂學(xué)習(xí)系統(tǒng)分析設(shè)計(jì)過(guò)程，分別介紹了學(xué)習(xí)系統(tǒng)中所需要實(shí)現(xiàn)的功能模塊、如何在技術(shù)使用上選擇以HTML5進(jìn)行系統(tǒng)開發(fā)、根據(jù)系統(tǒng)特點(diǎn)進(jìn)行架構(gòu)設(shè)計(jì)并給出了使用HTML5可能會(huì)存在的問(wèn)題進(jìn)行說(shuō)明。本文中重點(diǎn)對(duì)移動(dòng)端開發(fā)模式的選擇進(jìn)行分析如何根據(jù)系統(tǒng)需求進(jìn)行選擇適合的模式，同時(shí)系統(tǒng)架構(gòu)設(shè)計(jì)時(shí)進(jìn)行分層設(shè)計(jì)以提高系統(tǒng)的可擴(kuò)展性和可維護(hù)性。

【關(guān)鍵字】移動(dòng)學(xué)習(xí)；HTML5；開發(fā)模式；架構(gòu)設(shè)計(jì)

中圖分類號(hào)： TP311.52；G434 文獻(xiàn)標(biāo)識(shí)碼： A 文章編號(hào)： 2095-2457（2018）05-0082-002

【Abstract】This article elaborated the digital mobile classroom learning system analysis and design process are introduced in the learning system need to realize the function of the module，how to choose on the technology used in HTML 5 system development，according to the characteristics of architecture design system，and presents the problems of using HTML 5 May.This article focus on analysis of the choice of mobile terminal development model based on system needs to choose the suitable model，system architecture design at the same time can be designed in order to improve the system scalability and maintainability.

【Key words】Mobile learning；HTML 5.Development mode；Architecture design

0 引言

隨著計(jì)算機(jī)、多媒體和數(shù)據(jù)通信技術(shù)的高速發(fā)展，以及智能移動(dòng)設(shè)備的快速發(fā)展，在全球范圍內(nèi)，包括小孩、青年以及老人普遍都持有一部或多部移動(dòng)設(shè)備。移動(dòng)應(yīng)用也成為因此炙手可熱的應(yīng)用領(lǐng)域，尤其是在高校校園應(yīng)用方面發(fā)展更為迅猛?，F(xiàn)在的高校市場(chǎng)的校園學(xué)習(xí)性軟件相對(duì)較少，能夠滿足師生需求的學(xué)習(xí)交流軟件較少，從而需要針對(duì)課程的實(shí)際需求開發(fā)出適合師生使用，能夠提高教學(xué)和學(xué)習(xí)效率的移動(dòng)學(xué)習(xí)平臺(tái)。移動(dòng)學(xué)習(xí)的研究開始于世界第一個(gè)移動(dòng)學(xué)習(xí)項(xiàng)目——1994年美國(guó)卡耐基·梅隆大學(xué)的Wireless Andrew，該項(xiàng)目歷時(shí)3年，為校園內(nèi)師生、管理者等建設(shè)并提供無(wú)線連接。除了無(wú)線連接，如果要為學(xué)生提供數(shù)字化虛擬課堂學(xué)習(xí)環(huán)境以及自由交流互動(dòng)場(chǎng)所，就有必要搭建一套數(shù)字化移動(dòng)課堂學(xué)習(xí)系統(tǒng)。

1 系統(tǒng)總體分析

在高職院校的學(xué)習(xí)過(guò)程中，學(xué)生除了在課堂上完成聽課外，更多需要在課外實(shí)現(xiàn)自主學(xué)習(xí)，而通常在缺少教師輔助的情況下，真正能做到自主學(xué)習(xí)的學(xué)生比較少。提供相應(yīng)的移動(dòng)學(xué)習(xí)平臺(tái)設(shè)定自主學(xué)習(xí)方案，學(xué)生按可選方案有目的地完成學(xué)習(xí)目標(biāo)，從而使學(xué)習(xí)效果得到提升。

為了能達(dá)到課后輔導(dǎo)、鍛煉學(xué)生自主學(xué)習(xí)能力，需要在平臺(tái)中提供課程學(xué)習(xí)、作業(yè)練習(xí)，能夠讓學(xué)生快速學(xué)習(xí)專業(yè)知識(shí)和技能，并對(duì)所學(xué)知識(shí)進(jìn)行練習(xí)鞏固。同時(shí)師生互動(dòng)環(huán)節(jié)和學(xué)生間溝通交流環(huán)節(jié)可以有助于教師及時(shí)指導(dǎo)、解惑、跟進(jìn)，有助于學(xué)生間的合作、交流與共享資源，從而提升學(xué)習(xí)效率。

根據(jù)平臺(tái)的實(shí)際需求，在平臺(tái)的功能主要體現(xiàn)在提供課程學(xué)習(xí)資源、學(xué)習(xí)效果檢測(cè)、師生互動(dòng)、交流與共享。課程學(xué)習(xí)資源為滿足學(xué)生在課后自主學(xué)習(xí)提供明確充足的資源以及盡可能友好的學(xué)習(xí)環(huán)境，包括電子教材、說(shuō)解（音頻、視頻、文字說(shuō)明）、課外學(xué)習(xí)參考；學(xué)習(xí)效果檢測(cè)可以為學(xué)生自主學(xué)習(xí)提供可參考的衡量標(biāo)準(zhǔn)，也可以為教師跟進(jìn)學(xué)生的學(xué)習(xí)進(jìn)度提供判斷的依據(jù)，包括課后習(xí)題、單元檢測(cè)、作業(yè)提交、學(xué)習(xí)進(jìn)度顯示；師生互動(dòng)可能提供教師主動(dòng)發(fā)起、被動(dòng)接收、第三方通迅的模式，包括通知管理、消息提醒、其它聯(lián)系方式（QQ、微信、手機(jī)）；交流與共享為學(xué)生間對(duì)課程學(xué)習(xí)內(nèi)容進(jìn)行溝通交流、相互間合作完成對(duì)難點(diǎn)分析、共享學(xué)習(xí)相關(guān)的資料，包括課程留言板、學(xué)習(xí)論壇、共享資源。

2 開發(fā)技術(shù)選擇

數(shù)字化移動(dòng)課堂學(xué)習(xí)系統(tǒng)的關(guān)鍵是建立在移動(dòng)設(shè)備的基礎(chǔ)之上，而目前移動(dòng)設(shè)備的系統(tǒng)環(huán)境主要分為Windows、Linux、Android、IOS，還其它一些系統(tǒng)平臺(tái)。如果要讓每位學(xué)生都能無(wú)障礙正常使用上學(xué)習(xí)系統(tǒng)，就必須考慮到差異性的存在。在可以選擇的技術(shù)方案中，在課堂上機(jī)時(shí)學(xué)生通過(guò)網(wǎng)頁(yè)瀏覽學(xué)習(xí)，在課后移動(dòng)端訪問(wèn)時(shí)，Android作為學(xué)生移動(dòng)設(shè)備使用的主體，可以優(yōu)先考慮開發(fā)Android平臺(tái)上的軟件，但對(duì)IOS的使用者來(lái)說(shuō)就會(huì)帶來(lái)很大的不便。如果在兩個(gè)平臺(tái)都進(jìn)行開發(fā)，就會(huì)存在使用情境的差異性、功能實(shí)現(xiàn)完整、系統(tǒng)開發(fā)與維護(hù)成本等問(wèn)題。因此需要提供一種方案實(shí)現(xiàn)一次開發(fā)在不同系統(tǒng)環(huán)境都能夠正常使用、效果一致、升級(jí)維護(hù)便利。

移動(dòng)APP的開發(fā)模式主要分為Native APP應(yīng)用開發(fā)、Web APP應(yīng)用開發(fā)、Hybrid開發(fā)模式、以及基于 React Native框架的Java Script語(yǔ)言開發(fā)的類原生應(yīng)用。使用Android和IOS上的原生語(yǔ)言進(jìn)行開發(fā)的移動(dòng)APP稱之為Native APP，只能在相應(yīng)的系統(tǒng)的運(yùn)行。Web APP應(yīng)用開發(fā)是使用HTML5基于瀏覽器開發(fā)B/S結(jié)構(gòu)的應(yīng)用程序。Hybrid開發(fā)模式同樣也是采用HTML5的方式開發(fā)，但可以為相同代碼生成不同的系統(tǒng)平臺(tái)正常使用的運(yùn)行程序，可以達(dá)到原生應(yīng)用運(yùn)行效果。React Native App 開發(fā)模式使用 Java Script、CSS和類似HTML的JSX進(jìn)行開發(fā)，這個(gè)框架的原理是基于網(wǎng)頁(yè)開發(fā)技術(shù)并利用Java Script語(yǔ)言與兩大平臺(tái)上的原生語(yǔ)言Java和 Objective-C進(jìn)行交互，互相調(diào)用，從而達(dá)到使用Java Script 來(lái)寫原生應(yīng)用的目的。

考慮到開發(fā)中需要使用HTML5開發(fā)PC端應(yīng)用，HTML5又可以實(shí)現(xiàn)在不同系統(tǒng)上的實(shí)現(xiàn)，因此可以選擇HTML5作為統(tǒng)一開發(fā)技術(shù)。HTML5在文本的處理的優(yōu)勢(shì)以及成熟的開發(fā)資源，大大降低了開發(fā)門檻，提高開發(fā)效率。在學(xué)習(xí)系統(tǒng)實(shí)現(xiàn)中通過(guò)PC端使用WEB APP是數(shù)字化教學(xué)通常使用的模式，但在移動(dòng)數(shù)字化課程中仍使用這種方式就不太合適，由于移動(dòng)端通常的問(wèn)題在于顯示屏幕比較小，根據(jù)視口自適應(yīng)需要界面設(shè)計(jì)時(shí)花費(fèi)較多的時(shí)間，而且體驗(yàn)效果不是很好。可以采用Hybrid混合開發(fā)模式，專門為移動(dòng)端界面設(shè)計(jì)相應(yīng)的交互接口，后端保持統(tǒng)一的接口。另外，采用Hybrid混合開發(fā)模式，還需要考慮到移動(dòng)應(yīng)用在必要時(shí)能夠調(diào)用移動(dòng)設(shè)備上的傳感設(shè)備，增強(qiáng)實(shí)際使用效果。目前國(guó)內(nèi)在使用的能實(shí)現(xiàn)H5 APP開發(fā)的平臺(tái)有Wex5和APPCAN等可作為選擇。

3 系統(tǒng)架構(gòu)設(shè)計(jì)

數(shù)字化移動(dòng)課堂學(xué)習(xí)系統(tǒng)的架構(gòu)設(shè)計(jì)需要根據(jù)所需開發(fā)的功能以及HTML5本身技術(shù)特點(diǎn)進(jìn)行優(yōu)化整合。整個(gè)系統(tǒng)大致可分為三層：數(shù)據(jù)層、業(yè)務(wù)層、應(yīng)用層、表示層。

第一層，表示層。表示層直接面向?qū)W生，主要體現(xiàn)在PC端和移動(dòng)端的行為。在PC端以HTML5實(shí)現(xiàn)綜合性多頁(yè)面方式，大致分為課程學(xué)習(xí)模塊、習(xí)題與檢測(cè)模塊、評(píng)論模塊、論壇模塊；在移動(dòng)端頁(yè)面功能單一，與應(yīng)用層接口相對(duì)應(yīng)，分別為課程列表、課程解說(shuō)、習(xí)題、單元檢測(cè)、進(jìn)度查看、論壇頁(yè)面、教師聯(lián)系、發(fā)布資源、登錄注冊(cè)、查看消息、發(fā)送通知、發(fā)送消息。

第二層，應(yīng)用層。表示層的數(shù)據(jù)來(lái)源是通過(guò)以WEB服務(wù)的方式從應(yīng)用層獲取數(shù)據(jù)資源，這種設(shè)計(jì)是為了有更好的可擴(kuò)展性，降低表示層和應(yīng)用層的耦合性。應(yīng)用層使用WEB服務(wù)的方式所提供的接口主要有獲取課程列表接口、獲取解說(shuō)資源接口、獲取習(xí)題資源接口、獲取學(xué)習(xí)進(jìn)度接口、獲取論壇發(fā)貼列表接口、獲取評(píng)論列表接口、獲取教師聯(lián)系方式接口、獲取消息提醒接口、推送通知接口、發(fā)送消息接口、獲取個(gè)人信息、修改個(gè)人信息。

第三層，業(yè)務(wù)層。主要實(shí)現(xiàn)將不同來(lái)源的數(shù)據(jù)資源進(jìn)行處理與整合，對(duì)用戶課程學(xué)習(xí)權(quán)限的控制，準(zhǔn)許教師查看每個(gè)學(xué)生的進(jìn)度，準(zhǔn)許個(gè)人實(shí)現(xiàn)信息修改等，包括有個(gè)人信息處理、論壇數(shù)據(jù)處理、課程管理、消息處理。

第四層，數(shù)據(jù)層。數(shù)據(jù)層要將不同類型的數(shù)據(jù)資源進(jìn)行持久化保存，比如，在學(xué)習(xí)系統(tǒng)中課程教材以圖片的方式按編號(hào)保存，課程所包含的相關(guān)文字解說(shuō)要保存在數(shù)據(jù)庫(kù)，課程相關(guān)視頻要進(jìn)行轉(zhuǎn)碼符合網(wǎng)絡(luò)播放的格式并按編號(hào)保存。因此在數(shù)據(jù)層中通過(guò)關(guān)系數(shù)據(jù)庫(kù)創(chuàng)建相應(yīng)的表結(jié)構(gòu)，將資源通過(guò)編號(hào)相關(guān)聯(lián)。數(shù)據(jù)表大致分為用戶表、課程表、課程資源表、課程評(píng)論表、習(xí)題表、進(jìn)度表、教師信息表、消息表

4 總結(jié)

通過(guò)對(duì)學(xué)習(xí)系統(tǒng)分析設(shè)計(jì)，可以發(fā)現(xiàn)HTML5在實(shí)現(xiàn)對(duì)原有B/S架構(gòu)網(wǎng)站進(jìn)行移動(dòng)化改進(jìn)時(shí)能使用Hybrid混合開發(fā)模式和React Native的模式實(shí)現(xiàn)移動(dòng)端開發(fā)，也能使用自適應(yīng)頁(yè)面的處理方式實(shí)現(xiàn)，避免了較復(fù)雜的技術(shù)操作，開發(fā)效率上得到提升。在PC端向移動(dòng)端過(guò)渡時(shí)，需要盡可能將前端表示層和后端進(jìn)行友好分離，從而保證系統(tǒng)不會(huì)因客戶端的變更而產(chǎn)生較大的維護(hù)成本。在完成數(shù)字化移動(dòng)課堂學(xué)習(xí)系統(tǒng)的分析設(shè)計(jì)過(guò)程中發(fā)現(xiàn)，HTML5作為技術(shù)上實(shí)現(xiàn)主體，能夠滿足系統(tǒng)開發(fā)的大部分需求，但在實(shí)現(xiàn)及時(shí)消息時(shí)技術(shù)上需要更多的技巧，相比原生系統(tǒng)這方面的實(shí)現(xiàn)難度要更大，另外，由于整個(gè)學(xué)習(xí)系統(tǒng)大部分的功能用于瀏覽課程信息，當(dāng)瀏覽人數(shù)增加的情況下服務(wù)端將要承擔(dān)較重的負(fù)擔(dān)，需要硬件平臺(tái)和系統(tǒng)實(shí)現(xiàn)中加強(qiáng)處理。

【參考文獻(xiàn)】

[1]張楠.國(guó)內(nèi)外移動(dòng)學(xué)習(xí)平臺(tái)研究與發(fā)展綜述[J].旅游縱覽（下半月），2017年05期.

[2]鐘衛(wèi)銘，楊元峰，夏正航.移動(dòng)課堂——傳統(tǒng)教學(xué)在移動(dòng)互聯(lián)平臺(tái)上的延伸[J].科技視界.2016年25期.

[3]朱安平.移動(dòng)APP開發(fā)模式[J].電子技術(shù)與軟件工程. 2017年16期.