基于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期.