李勇 李園園

摘? ?要：文章分析了教育信息化下移動學習APP的重要性，闡述了跨平臺開發(fā)的各種平臺特點以及HTML5Plus，MUI開發(fā)跨平臺APP的優(yōu)勢，重點分析了面向高職學生的跨平臺移動學習APP的核心功能，整體結(jié)構(gòu)、數(shù)據(jù)庫設(shè)計、客戶端模塊等幾個方面提出了一個基于HBuilder開發(fā)與實現(xiàn)的移動學習APP的思路。

關(guān)鍵詞：跨平臺;HTML5Plus;數(shù)據(jù)庫;輕量級的CSS框架

2016年6月，教育部制定了《教育信息化“十三五”規(guī)劃》，規(guī)劃中指出“到2020年，基本建成‘人人皆學、處處能學、時時可學、與國家教育現(xiàn)代化發(fā)展目標相適應(yīng)的教育信息化體系;基本實現(xiàn)教育信息化對學生全面發(fā)展的促進作用、對深化教育領(lǐng)域綜合改革的支撐作用和對教育創(chuàng)新發(fā)展、均衡發(fā)展、優(yōu)質(zhì)發(fā)展的提升作用;基本形成具有國際先進水平、信息技術(shù)與教育融合創(chuàng)新發(fā)展的中國特色教育信息化發(fā)展路子”。隨著教育信息化的推進，移動學習終端APP成為教育信息化中不可缺少的組成部分，目前，國內(nèi)大、中、小學都對移動學習APP的需求持續(xù)增長，如何根據(jù)各個層次的教育特點而開發(fā)、研究出適合學生學習、老師教學的APP成為近年來移動應(yīng)用開發(fā)的研究熱點。

本文分析了高職學生移動學習平臺的核心功能，利用數(shù)字天堂DCloud手機強化引擎HTML5Plus和跨平臺前端框架輕量級的CSS框架（Material Design CSS Framework，MUI）研究，并開發(fā)出跨平臺移動學習APP，提出使用HTML5開發(fā)移動學習APP的思路。

1? ? 跨平臺開發(fā)

目前，主流的手機操作系統(tǒng)平臺為Android系統(tǒng)和IOS系統(tǒng)，它們都有各自的開發(fā)平臺，如要開發(fā)安卓的應(yīng)用，需要在Android Studio平臺上進行，而蘋果的應(yīng)用則要在Xcode上面開發(fā)，而且使用的是不同的語言。因此，要開發(fā)一款A(yù)PP，同樣的業(yè)務(wù)邏輯要寫兩遍，后期的更新維護也要兩套同時變化，開發(fā)者的精力、時間、費用都是雙倍，因此，跨平臺應(yīng)用解決方案應(yīng)運而生。目前，主流的跨平臺開發(fā)方案主要有以下幾種[1]。

1.1? Flutter

Flutter是谷歌的最新移動UI框架，其優(yōu)點是手機應(yīng)用里的所有東西都是微件（Widget），通過可組合的空間集合、豐富的動畫庫以及分層可擴展的架構(gòu)實現(xiàn)了富有感染力的靈活界面設(shè)計。

1.2? React Native（簡稱RN）

React Native是Facebook開源的跨平臺移動應(yīng)用開發(fā)框架，目前支持IOS和安卓兩大平臺。RN使用JavaScript語言，類似于HTML的JSX，以及CSS來開發(fā)移動應(yīng)用，因此，熟悉Web前端開發(fā)的技術(shù)人員只需很少量的學習，就可以進入移動應(yīng)用開發(fā)領(lǐng)域。

1.3? Weex

Weex是阿里巴巴的跨平臺開發(fā)框架，具有完美的兼顧性能與動態(tài)性，讓移動開發(fā)者通過簡捷的前端語法創(chuàng)造出Native級別的性能體驗，并支持IOS、安卓、YunOS及Web等多端部署。Weex基于開源的Vue.JS，相比于RN來說入門簡單，容易上手。

1.4? PhoneGap

PhoneGap是一個采用HTML，CSS和JavaScript的技術(shù)，創(chuàng)建跨平臺移動應(yīng)用程序的快速開發(fā)平臺。唯一支持IOS，Android，Palm，Symbian，WP7，WP8，Bada和Blackberry全部智能系統(tǒng)的平臺。

本文采用了Hbuilder平臺下的HTML5Plus構(gòu)建， 它是一種基于HTML，JS，CSS編寫的運行于手機端的APP，即通過HTML5Plus這個強化引擎作為橋梁，通過調(diào)用plus.*方法實現(xiàn)Android和IOS兩套的原生功能，并將HTML5 APP打包為原生APP，達到原生的功能和體驗。

2? ? 移動學習平臺的結(jié)構(gòu)

本文所研究的移動學習APP的使用對象是高職的教師和學生，主要應(yīng)用在課前和課中的教學活動，根據(jù)學生的學習特點，學習內(nèi)容多以5～10 min的短小視頻和短小文檔為主，這也符合移動學習的特點，學生可以隨時隨地地根據(jù)自己的時間安排學習。課前教師上傳學習通知和學習內(nèi)容，學生通過移動終端學習。課上教師可在該平臺上發(fā)布各種師生互動的教學活動，如簽到、師生頭腦風暴、選人、搶答、投票、簡單測驗等活動。

移動學習平臺，采用3層架構(gòu)模型。這種3層結(jié)構(gòu)模型，在架構(gòu)上層次清晰，同時，又體現(xiàn)了軟件系統(tǒng)開發(fā)的高內(nèi)聚、低耦合的思想。3層架構(gòu)模型的系統(tǒng)開發(fā)思想，較好實現(xiàn)了界面和代碼的分離，有利于降低層次之間的依賴性，這種系統(tǒng)標準化操作，方便應(yīng)用系統(tǒng)的開發(fā)，能夠提高系統(tǒng)開發(fā)效率。本移動學習平臺的構(gòu)架如圖1所示。

3? ? 數(shù)據(jù)庫設(shè)計

在對數(shù)據(jù)庫進行設(shè)計時，需要把握以下一些設(shè)計原則[2]。（1）數(shù)據(jù)文件結(jié)構(gòu)設(shè)計要合理。（2）降低數(shù)據(jù)冗余度。（3）保持數(shù)據(jù)獨立性。（4）數(shù)據(jù)的安全性。（5）數(shù)據(jù)庫設(shè)計應(yīng)具有良好的可擴展性。

在上述原則的基礎(chǔ)上，本文進行了數(shù)據(jù)庫結(jié)論實體—聯(lián)系模型圖（Entity-Relationship Model，E-R）的設(shè)計，E-R圖是運用真實世界事物關(guān)系的觀念表示信息世界數(shù)據(jù)庫中抽象的數(shù)據(jù)架構(gòu)，它是反映數(shù)據(jù)庫中各實體間關(guān)系的集合。移動學習平臺最主要業(yè)務(wù)活動包括為學生提供學習資源以及各種教學活動。因此，對于移動學習平臺而言，課程與資源、課程與活動間的兩個關(guān)系實體是最為重要的。這里對這些重要實體間的E-R圖進行闡述。

課程資源包含的屬性主要有：課程編號、課程名稱、課程簡介、創(chuàng)建教師ID等;每門課程內(nèi)容按獨立的學習內(nèi)容進行編號，包括內(nèi)容編號、內(nèi)容簡介、內(nèi)容名稱;每個學習內(nèi)容可能包括多個課件資源和視頻資源等。視頻資源包括視頻編號、視頻類型、視頻名稱、視頻鏈接地址和上傳時間等;課件資源主要包括課件編號、課件名稱、課間鏈接地址和上傳時間等，具體如圖2所示。

教學活動是課程的主體環(huán)境，承載著教學內(nèi)容，教師通過各種教學活動與學生互動，通過多樣的教學活動開展教學，激發(fā)學生的學習興趣。本移動學習APP設(shè)計了任務(wù)通知單、搶答、頭腦風暴、投票等多種教學活動，每項的具體E-R圖如圖3所示。

4? ? 客戶端設(shè)計

MUI是Dcloud官方推出的一個基于HTML5Plus的框架，同時，擁有H5組件和原生組件，原生組件依賴于HTML5Plus運行環(huán)境，也就是原生APP里面的webview組件（能加載顯示網(wǎng)頁，可以將其視為一個瀏覽器），所以MUI里面的原生組件不能用于瀏覽器環(huán)境，可以通過MUI里面的mui.os.plus進行判斷，如果是plus環(huán)境會返回true，否則會返回undefined。開發(fā)者可以根據(jù)自己的需要進行代碼適配，對于APP使用增強的原生組件，對于普通瀏覽器里面運行的頁面使用H5組件。同時，還可以使用mui.os.android，mui.os.ios及mui.os.wechat對平臺進行檢測，然后書寫不同的邏輯代碼。對于MUI里面沒有封裝的原生組件，可以根據(jù)自己的需要基于HTML5Plus標準和native.js語法進行個性化定制。因此，可以直接上手MUI，不過需要明白MUI與其他UI框架的區(qū)別在于，MUI擁有獨有的原生組件，而且是依賴于HTML5Plus標準的。

根據(jù)需求分析設(shè)計出移動學習APP客戶端包含的模塊有登錄、注冊、密碼找回、課程列表、資源模塊、課程活動模塊、學習內(nèi)容模塊等，客戶端的功能模塊如圖4所示。

5? ? 結(jié)語

基于Hbuidler，HTML5Plus，MUI開發(fā)的跨平臺移動學習APP，可以用簡單、高效、用戶廣的HTML5、層疊樣式表3級（Cascading Style Sheets Level 3，CSS3），JavaScript等語言編寫程序，一次編寫可生成多種主流移動平臺程序。從時間、財力、人力等多方都能節(jié)省成本，是一種有效和高效的移動平臺APP開發(fā)方法。

[參考文獻]

[1]益點點.有這六大頂級跨平臺開發(fā)神器，還單學啥Android、IOS開發(fā)[EB/OL].（2018-09-21）[2019-07-20].https：//baijiahao.baidu.com/s？id=1612198467122250493&wfr=spider&for=pc 2081.9.20.

[2]敬亮.基于Android的移動學習平臺設(shè)計與實現(xiàn)[D].南昌：江西財經(jīng)大學，2017.