基于HTML5的數字化移動課堂學習系統設計

鐘衛銘 楊元峰 許麗娟 潘婷婷

【摘要】本文闡述了數字化移動課堂學習系統分析設計過程，分別介紹了學習系統中所需要實現的功能模塊、如何在技術使用上選擇以HTML5進行系統開發、根據系統特點進行架構設計并給出了使用HTML5可能會存在的問題進行說明。本文中重點對移動端開發模式的選擇進行分析如何根據系統需求進行選擇適合的模式，同時系統架構設計時進行分層設計以提高系統的可擴展性和可維護性。

【關鍵字】移動學習；HTML5；開發模式；架構設計

中圖分類號： TP311.52；G434 文獻標識碼： A 文章編號： 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 引言

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

1 系統總體分析

在高職院校的學習過程中，學生除了在課堂上完成聽課外，更多需要在課外實現自主學習，而通常在缺少教師輔助的情況下，真正能做到自主學習的學生比較少。提供相應的移動學習平臺設定自主學習方案，學生按可選方案有目的地完成學習目標，從而使學習效果得到提升。

為了能達到課后輔導、鍛煉學生自主學習能力，需要在平臺中提供課程學習、作業練習，能夠讓學生快速學習專業知識和技能，并對所學知識進行練習鞏固。同時師生互動環節和學生間溝通交流環節可以有助于教師及時指導、解惑、跟進，有助于學生間的合作、交流與共享資源，從而提升學習效率。

根據平臺的實際需求，在平臺的功能主要體現在提供課程學習資源、學習效果檢測、師生互動、交流與共享。課程學習資源為滿足學生在課后自主學習提供明確充足的資源以及盡可能友好的學習環境，包括電子教材、說解（音頻、視頻、文字說明）、課外學習參考；學習效果檢測可以為學生自主學習提供可參考的衡量標準，也可以為教師跟進學生的學習進度提供判斷的依據，包括課后習題、單元檢測、作業提交、學習進度顯示；師生互動可能提供教師主動發起、被動接收、第三方通迅的模式，包括通知管理、消息提醒、其它聯系方式（QQ、微信、手機）；交流與共享為學生間對課程學習內容進行溝通交流、相互間合作完成對難點分析、共享學習相關的資料，包括課程留言板、學習論壇、共享資源。

2 開發技術選擇

數字化移動課堂學習系統的關鍵是建立在移動設備的基礎之上，而目前移動設備的系統環境主要分為Windows、Linux、Android、IOS，還其它一些系統平臺。如果要讓每位學生都能無障礙正常使用上學習系統，就必須考慮到差異性的存在。在可以選擇的技術方案中，在課堂上機時學生通過網頁瀏覽學習，在課后移動端訪問時，Android作為學生移動設備使用的主體，可以優先考慮開發Android平臺上的軟件，但對IOS的使用者來說就會帶來很大的不便。如果在兩個平臺都進行開發，就會存在使用情境的差異性、功能實現完整、系統開發與維護成本等問題。因此需要提供一種方案實現一次開發在不同系統環境都能夠正常使用、效果一致、升級維護便利。

移動APP的開發模式主要分為Native APP應用開發、Web APP應用開發、Hybrid開發模式、以及基于 React Native框架的Java Script語言開發的類原生應用。使用Android和IOS上的原生語言進行開發的移動APP稱之為Native APP，只能在相應的系統的運行。Web APP應用開發是使用HTML5基于瀏覽器開發B/S結構的應用程序。Hybrid開發模式同樣也是采用HTML5的方式開發，但可以為相同代碼生成不同的系統平臺正常使用的運行程序，可以達到原生應用運行效果。React Native App 開發模式使用 Java Script、CSS和類似HTML的JSX進行開發，這個框架的原理是基于網頁開發技術并利用Java Script語言與兩大平臺上的原生語言Java和 Objective-C進行交互，互相調用，從而達到使用Java Script 來寫原生應用的目的。

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

3 系統架構設計

數字化移動課堂學習系統的架構設計需要根據所需開發的功能以及HTML5本身技術特點進行優化整合。整個系統大致可分為三層：數據層、業務層、應用層、表示層。

第一層，表示層。表示層直接面向學生，主要體現在PC端和移動端的行為。在PC端以HTML5實現綜合性多頁面方式，大致分為課程學習模塊、習題與檢測模塊、評論模塊、論壇模塊；在移動端頁面功能單一，與應用層接口相對應，分別為課程列表、課程解說、習題、單元檢測、進度查看、論壇頁面、教師聯系、發布資源、登錄注冊、查看消息、發送通知、發送消息。

第二層，應用層。表示層的數據來源是通過以WEB服務的方式從應用層獲取數據資源，這種設計是為了有更好的可擴展性，降低表示層和應用層的耦合性。應用層使用WEB服務的方式所提供的接口主要有獲取課程列表接口、獲取解說資源接口、獲取習題資源接口、獲取學習進度接口、獲取論壇發貼列表接口、獲取評論列表接口、獲取教師聯系方式接口、獲取消息提醒接口、推送通知接口、發送消息接口、獲取個人信息、修改個人信息。

第三層，業務層。主要實現將不同來源的數據資源進行處理與整合，對用戶課程學習權限的控制，準許教師查看每個學生的進度，準許個人實現信息修改等，包括有個人信息處理、論壇數據處理、課程管理、消息處理。

第四層，數據層。數據層要將不同類型的數據資源進行持久化保存，比如，在學習系統中課程教材以圖片的方式按編號保存，課程所包含的相關文字解說要保存在數據庫，課程相關視頻要進行轉碼符合網絡播放的格式并按編號保存。因此在數據層中通過關系數據庫創建相應的表結構，將資源通過編號相關聯。數據表大致分為用戶表、課程表、課程資源表、課程評論表、習題表、進度表、教師信息表、消息表

4 總結

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

【參考文獻】

[1]張楠.國內外移動學習平臺研究與發展綜述[J].旅游縱覽（下半月），2017年05期.

[2]鐘衛銘，楊元峰，夏正航.移動課堂——傳統教學在移動互聯平臺上的延伸[J].科技視界.2016年25期.

[3]朱安平.移動APP開發模式[J].電子技術與軟件工程. 2017年16期.