基于混合编程的移动英语学习平台设计与实现

柯晓昱，刘　草，吴　献，林雅琴

（福建工程学院软件学院，福建福州350003）



基于混合编程的移动英语学习平台设计与实现

柯晓昱，刘草，吴献，林雅琴

（福建工程学院软件学院，福建福州350003）

摘要：基于PHP、HTML5和JavaScript等技术，通过对学习平台的开发意义、功能模块及业务数据的分析与研究，结合React Native的WEBAPP框架与原生应用混合编程的方式快速开发iOS/Android跨平台的应用程序。以3min时长的英语视频片断作为内容载体，整合碎片化的学习时间，提出“3分钟英语”学习理念，结合个性化推荐方法推送视频资源，发挥出移动平台的优势，具有一定的推广应用价值。

关键词：混合编程；视频片断；碎片化学习；3分钟英语

随着现代信息技术的蓬勃发展，如何依托现代化信息技术丰富教育资源以及优化教学过程，成为近几年教育发展领域中的一个研究热点。移动学习是一种将移动技术与数字化学习技术相结合的一种新型数字化学习形式，它主要依托于无线移动技术、国际互联网络技术以及多媒体技术等［1］。

传统教材所提供的教学视频内容偏长，调查研究发现，视频片断在3min内最容易集中学生的注意力，吸收效果最好。因此，我们转变思路，提出“3分钟英语”自主学习理念，将学生由单纯的受众转变为视频的创作者与参与者，在教师的指导下，创作出一部部学生自已喜爱的英文“微电影”上传至所设计的移动英语学习平台。

同时，结合日益成熟的视频点播技术，期望通过软件工程与英语专业跨学科的融合，以促进大学英语视听说课程教学方法的改进，提高教学质量；整合碎片化时间，结合个性化推荐方法推送视频资源，提升学生的自主学习能力，培养及加强学生的交流与协作能力，让学生学会主动思维、实践、表达，进而更多地体验移动学习的喜悦。

1　移动英语学习平台的设计

1.1 平台功能架构

本学习平台从系统功能体系上分为四个层次:由数据库服务器（MySQL）、Web服务器、统一身份认证服务器（central authenticaiton service，CAS）、网络设施等组成的支撑平台，数据交互处理的业务层，UI展示层及客户端访问层。其体系架构如图1所示。

图1　系统功能架构图Fig.1 System architecture ofm obile English learning p latform

本学习平台的客户端分为两类，即WEB浏览器和iOS/Android移动终端。客户端与WEB应用服务器之间通过HTTP协议传输数据，采用JSON数据格式进行解析。

服务端的WEB应用服务器需要与身份认证服务器进行交互，以保证用户登录信息的有效性。其中，身份认证服务器还承担着学院其他系统的统一身份认证的服务。其结构如图2所示。

1.2 关键技术简介

移动学习平台在开发过程中采用以下几种关键技术。

（1）服务端采用PHP/Think PHP框架，采用FFMPEG进行视频处理，同时能够自动获取视频缩略图。

图2　平台的网络结构图Fig.2 The network architecture of learning p latform

另外，PHP/Think PHP框架采用PATHINFO模式进行URL路径管理，能够提供最好的搜索引擎优化（search engine optimization，SEO）支持。

（2）服务端通过开放所需的应用程序编程接口（application programming interface，API），与客户端采用HTTP协议进行通讯，使用JSON进行数据解析，它与XML相比更容易阅读、解析速度更快、占用空间更少，因此更适合在移动设备上传输使用。

（3）混合编程:移动客户端采用Web应用和原生应用的混合编程方式。Web应用框架采用FaceBook发布的 React Native框架，它结合了Web应用和原生应用的优势，可以使用JavaScript来开发iOS和Android原生应用，提供不输于纯原生应用的用户体验。它只需编写一套核心程序，发布时针对不同的移动平台进行编译即可，这样就可极大地提高开发效率，节省人力成本。

（4）视频字幕解析:加载存放于服务器的（SRT）格式的字幕文件，获取字幕所有内容。使用正则表达式，将内容解析成字幕数组，数组项的内容包含起始时间、结束时间、英语语句、中文语句。当视频播放时，通过时间更新事件中返回的时间实时匹配字幕数组中对应时间的中、英文语句并展现出来。

（5）个性化推荐:设计的移动英语学习平台中采用协同过滤推荐算法，它是目前个性化推荐系统中应用最为广泛的技术之一，其最大优势在于能够处理视频、音乐等各种非文本结构对象。

1.3 用户设计

用户主要分为四大角色，见表1。

表1　用户角色表Tab.1 The user role of learning platform

1.4 平台设计

从业务角度来分述移动英语学习平台服务端和客户端的功能模块。

1.4.1 服务端主要功能模块

服务端实现平台基础数据的管理，见图3。

图3　服务端的主要功能图Fig.3 Themain function（modules）of learning p latform server

服务端主要功能模块有:

（1）分类管理:管理视频的分类目录及标签，支持多级嵌套。

（2）视频内容管理:视频内容组成要素包括不含字幕的视频源文件（mp4格式）、使用SRT格式标准制作的中英字幕文件、课前预习、重点句子、重点单词。其中，教学管理员将不含字幕的视频源文件单独存放在专门的视频服务器上，生成一个URI地址，同视频的其他要素在WEB应用服务器上管理。上传字幕文件时，系统将自动检测SRT格式的文件是否符合规范，同时根据视频源的URI地址使用FFMPEG接口自动截取其关键缩略图。

（3）用户管理:主要管理本平台的基础用户信息及操作权限管理。

（4）行为管理:主要管理用户的操作日志、记录学生用户的视频学习的过程轨迹，比如在什么时间点欣赏哪个视频等。

1.4.2 客户端主要功能模块

客户端部分主要包含视频学习、视频搜索、个人中心和个性化推荐4个功能模块，见图4。

图4　客户端主要功能图Fig.4 Themain function（modules）of learning p latform client

客户端主要功能模块有:

（1）视频学习:在此模块中，包含预习、重点语句、重点单词等内容，用户能够在正式学习之前进行课前预习、句子学习、英语听力学习。用户选择要播放的学习视频，客户端从远程服务器端加载视频及中英字幕文件缓存到本地。在播放过程中，字幕与视频时间点保持同步，中文、英文字幕可随时切换，点击字幕中的任意单词，可弹出相应的单词释义。

（2）视频搜索:支持关键词搜索以及高级/搜索两种搜索模式

（3）个人中心:在本模块中，用户除了基本的个人资料查询与修改外，还可查看个人的播放历史记录、视频收藏记录等。

（4）个性化推荐:在本模块中，收集用户历史学习、收藏记录等信息提交到服务端，即接收服务端分析后的个性化视频资料。

2　数据库逻辑设计

2.1 平台核心数据表

如表2所示，移动平台的核心数据表有用户表、视频信息表、视频数据表等，同时以auth_开头的是统一身份认证服务上的3个核心用户信息表。

表2　学习平台核心数据表Tab.2 Themain data of English learning p latform

2.2 平台数据表结构

2.2.1 基础数据配置表

用于保存平台的基础配置数据，如站点的标题、描述、每页显示的记录数、数据库连接参数及备份路径等，数据表名为“config”，其数据结构如表3所示。

表3　config基础数据配置表Tab.3 The basic data configu ration

2.2.2 行为日志表

用于保存平台用户的操作行为，如执行者、行为名称、执行状态、登录IP等，数据表名为“action _log”，其数据结构如表4所示。

2.2.3 分类管理表

用于保存视频的目录分类信息，如分类名称、排序、分类的每页行数、父级分类等，数据表名为“category”，其数据结构如表5所示。

2.2.4 视频信息表

用于保存视频的信息，如视频主题、描述、视频文件存放地址、视频缩略图、字幕文件存放地址、预习、练习等，数据表名为“document_video”，其数据结构如表6所示。

表4　action_log行为日志表Tab.4 The information of action_log

表5　category分类管理表Tab.5 Categorymanagement table

表6　document_video视频信息表Tab.6 The information of documen t_video

2.2.5 文件信息表

用于保存平台的文件信息，特别是视频所对应的字幕文件信息，如原始文件名、保存后的文件名、保存路径等，同时根据文件的md5和sha1码来避免文件的重复上传，数据表名为“document_ file”，其数据结构如表7所示。

表7　document_file文件信息表Tab.7 The information of document_file

2.2.6 文档图片信息表

用于保存平台的图片信息，特别是视频所对应的缩略图信息，如图片的保存路径、上传时间等，同样要根据图片文件的md5和sha1码来判断是否存在重复的图片文件，数据表名为“document _picture”，其数据结构如表8所示。

表8　document_picture图片信息表Tab.8 The in formation of document_p icture

2.2.7 系统用户信息表

数据表名为“member”，用于保存本学习平台的用户信息，如昵称、性别、登录次数等，它与统一身份认证表auth_user的区别在于:auth_user是用于跨系统的CAS统一用户认证，而member表仅限于本移动学习平台，不保存密码等，但用户名、昵称等重点字段保持数据同步。这样即保证了跨平台用户数据的统一性又兼顾了不同业务系统用户权限等的灵活性，其数据结构如表9所示。

表9　member表Tab.9 Themember information

2.2.8 班级信息表

用于保存统一身份认证的班级信息，数据表名为“auth_class”，其数据结构如表10所示。

表10　auth_class班级表Tab.10 The class information of auth_class

2.2.9 统一身份认证的用户信息表

用于保存统一身份认证服务器中的用户信息，数据表名为“auth_user”，其数据结构如表11所示。

表11　auth_userTab.11 The information of auth_user

2.2.10 统一身份认证的专业信息表

用于保存统一身份认证服务器中的专业信息，数据表名为“auth_major”，其数据结构如表12所示。

表12　au th_m ajor专业表Tab.12 The information of auth_major

3　移动英语学习平台的实现

3.1 平台主要程序

移动学习平台后台管理及WEB客户端的主要程序如表13所示。

表13　主要程序列表Tab.13 Themain program files

3.2 平台部分核心接口

本移动学习平台所开放的部分核心JSON接口如表14所示。

表14　核心接口列表Tab.14 The list of core interfaces

3.3 平台主要界面实现

3.3.1 后台管理主要界面实现

（1）系统视频分类管理主界面，能完成多级嵌套目录的操作。界面顶部是主操作菜单项，左侧是该菜单项所对应的子操作项，右侧是该子操作项的具体操作界面，见图5。

图5　分类管理主界面Fig.5 The homepage of categorized（types）management

（2）移动学习平台用户管理主界面，见图6。

（3）视频内容管理主界面，左侧菜单为视频分类目录，还有快速搜索功能，见图7。

3.3.2 WEB版视频信息主要界面实现

（1）WEB版视频详细信息界面，见图8。其左上部分是本平台核心的视频播放器，可选择中英字幕切换等；右上部分是预习、重点语句、重点单词等功能；下方是听力练习与课后活动。

图6　用户管理主界面Fig.6 The homepage of usersmanagement

图7　视频内容管理主界面Fig.7 The hom epage of video contentmanagement

图8　视频播放学习主界面Fig.8 The homepage of video study

（2）WEB版视频播放器的播放界面:当点击图8所示播放器的播放按钮时，会播放视频，此时可以进行中英字幕的切换、上一句下一句的选择，同时点击英文字幕中的任一单词会弹出对应的单词释义，见图9。

3.3.3 移动版重点界面实现

移动版包含了iOS/Android平台［2-3］，是本学习平台的开发重点。通过前文所述的HTML5混编模式以达到风格界面的统一，同时极大地提高了开发效率。

图9　视频播放器的播放界面Fig.9 The homepage of video p laying

（1）移动版登录主界面，见图10。

图10　客户端登录界面Fig.10 The login page ofmobile client

（2）当身份认证成功后进入图1 1所示的主界面。上半部分是可自动滚动的推荐的重点视频缩略图，下半部分是推荐的视频列表项。（3）分类选择界面:在图1 1的界面上用手指从左向右滑动可调出视频分类选择菜单，点击分类进入对应的分类视频列表，见图1 2。（4）视频播放主界面:当点击某一视频时进入本界面，播放过程中字幕列表会根据视频进度自动显示（点击字幕右方的箭头可直接播放本句），有中英字幕切换、欣赏与学习模式、重点单词列表、课前预习等，见图1 3。（5）单词释义界面:当点击图1 3所示的当前正在播放的英文句子中的任意单词，可弹出对应的单词释义并暂停播放，同时点击音标可读音，点击“确定”按钮后继续播放，见图1 4。

图11　移动版主界面Fig.11 The homepage of mobile version（client）

图12　视频分类选择Fig.12 The category（type）choosing ofmobile client

图13　视频播放主界面Fig.13 The video p laying page ofm obile client

图14　单词释义界面Fig.14 The word exp lanation interface（of mobile client）

4　结语

以移动学习为契机，立足于英语教学的实际，整合碎片化的学习理念，设计了“3分钟英语”移动自主学习平台，该平台充分发挥了移动学习模式的便捷性、资源丰富性以及资源高度分享性的

同时，也较好地提高了学习者的积极性与主动性。

在实际的使用中，学习资源推送的视频数量与推荐速度呈正相关关系。因此，随着视频数量的不断增加，平台的推荐性能将受到较大影响，这正是此移动英语平台后续要解决的重要问题。

参考文献：

［1］郭绍青，黄建军，袁庆飞.国外移动学习应用发展综述［J］.电化教育研究，2011（5）:105-109.

［2］传智播客高教产品研发部.Android移动应用基础教程［M］.北京:中国铁道出版社，2015.

［3］王利华，魏晓军，冯诚祺.React Native入门与实战［M］.北京:人民邮电出版社，2015.

（责任编辑：肖锡湘）

中图分类号：TP308

文献标志码：A

文章编号：1672-4348（2016）03-0274-09

doi：10.3969/j.issn.1672-4348.2016.03.013

收稿日期:2016-03-07

基金项目:福建省教育科学“十二五”规划2014年度项目（FJJKCG14-073）

第一作者简介:柯晓昱（1982-），男，福建莆田人，讲师，硕士，研究方向:软件工程、移动应用开发。

Design and imp lementation ofmobile English learning p latform based on hybrid programm ing

Ke Xiaoyu，Liu Cao，Wu Xian，Lin Yaqin
（Software College，Fujian University of Technology，Fuzhou 350003，China）

Abstract:Employing PHP，HTML5，JavaScript and database technology and based on the analysis of the significance of developing a learning platform，function modules and business data，an iOS/ Android cross-platform application program was developed by integrating WEB APP framework of React Native and native mode hybrid programming.The learning platform adopts 3-minute video clips of English as content carrier，which integrates fragmented learning time.“Three-minute English”learning conceptwas proposed.Combined with pushing video resources with personalized recommendation methods，the program hasmade advantages of mobile learning platform，which has considerable popularization and application value.

Keywords:hybrid programming；video clip；fragmented learning；three-minute English