基于Flutter框架医学信息技术课程SPOC移动学习平台的设计与实现

李琨 贾立伟 石晓明

摘要：为满足前期SPOC平台对移动端支持，该项目以谷歌发布的Flutter跨平台移动uI框架为技术基础，开发了集在线学习、在线测试、在线调查和资料下栽等功能为一体的医学信息技术课SPOC移动学习平台。通过对该移动学习平台的部署与应用，为今后开展有关“互联网+教育”教学模式的教学实践提供了技术支持。

关键词：“互联网+教育”;医学信息技术;SPOC移动学习平台

中图分类号：TP391.9 文献标识码：A

文章编号：1009-3044（2020）06-0063-02

1概述

SPOC是比MOOC规模更小、更易于实现各院校实施个性化课程教学需要的在线课程平台。目前，对于医学高专院校的学生来说，智能移动设备是他们使用最为频繁，普及率最高的一种信息交流工具，但前期所构建的医学信息技术课程SPOC平台对移动客户端的支持并不是特别友好，学生们使用移动设备中的浏览器去访问SPOC平台的体验效果不理想。为了解决上述问题，本文以谷歌发布的Flutter跨平台移动uI框架为技术基础，构建与医学信息技术课程SPOC平台相配套的移动学习App应用软件。

2Flutter框架与其他开源的跨平台移动App开发框架对比

有关开源的跨平台移动App开发技术中，早期主要使用HTML5实现网页式的App开发，然而网页式App开发因无法调用原生API致使大量功能无法实现，且运行性能低，操作体验差，使得该技术逐步被基于原生渲染的混合式App开发技术所取代。目前基于原生渲染的混合式开发技术嘲主要包括基于HTML5的混合式App开发技术（如Cordova、Ionic、VasSonic）、基于JavaScript的混合式App开发技术（如React Native、Weex、An-gular）以及基于自绘uI的混合式App开发技术（如Flutter、QI）。

基于HMTL5的混合式App开发主要以HTML、CSS和Ja-vaScript为技术基础，其开发语言简单，具有开发效率高，跨平台适配好的特点，但是其实际体验仍无法与原生开发相提并论。基于JavaScript的混合式App开发技术是基于前端Web框架技术（如React.js、Vue.js）使用JavaScript生成DOM控件并由原生端将其解析成原生控件进行渲染。由于该技术所依赖第三方库性能千差万别，加之组件间的交互需要使用Javascript桥接，因此无论是从组件的显示效果方面，还是运行效率方面都显得差强人意。基于自绘uI的混合式App开发技术不依赖于系统平台的原生控件，而是使用统一渲染引擎对不同平台实现uI控件绘制，进而保证不同平台uI控件绘制的一致性。

Flutter是谷歌公司2018年发布的能够快速在Android、iOS和Fuchsia等移动平台上构建高质量原生用户界面的开源移动uI框架。Flutter使用谷歌开发的Dart语言作为基础开发语言，使用自带的2D绘图引擎库Skia来绘制页面组件，并将Dart代码编译为相应平台的原生代码，实现前端uI组件与平台的直接通信，既不需要Javascript进行桥接，也不需要使用原生平台的Dalvik虚拟机。这样就使得基于Flutter框架开发的App从运行效率上无限接近于原生渲染的App应用。

總之，Flutter是目前最好的开源跨平台移动App开发框架之一，能够实现一套代码生成多种平台（Android、iOS、Fuchsia）上的应用，极大减少了App的开发和维护成本。同时，Dart语言因其具有强大的性能表现、丰富的特性以及简单易学的特点，也使得跨平台移动App开发变得更加容易。鉴于上述原因，本项目基于Flutter框架创建医学信息技术课程SPOC移动学习平台。

3基于Flutter框架医学信息技术课程SPOC移动学习平台的设计与实现

本项目出于对建设成本、著作版权、自主创新等方面的综合考虑，决定全部采用开源软件f如采用Linux Deepin 15.11操作系统，Flutter 1.12.13版开发框架，Dart SDK stable 2.7编译器以及Android Studio 3.5.3 IDE）作为项目的开发环境，并以前期基于Moodle系统所创建的医学信息技术课程SPOC平台为数据基础和服务器端，开发与之配套的移动学习平台。

3.1SPOC移动学习平台的功能模块设计

本移动学习平台是面向学生开发的，与基于Moodle系统的医学信息技术课程SPOC平台相配套的，用于学生实现日常线上学习所开发的移动App客户端程序。在充分考虑学生所持有的智能移动设备在性能上所存在的差异，在保证能够完成线上学习功能的前提下，选择SPOC平台前端功能中与学生线上学习有关的部分功能进行设计和开发，是前端Web功能的一个子集。设计需求如下：

1）因为该平台的用户是仅为学生用户且该系统并不对外开放，所以该平台仅保留原SPOC平台前端系统中有关学生个人信息管理功能。

2）为能够让学生用户通过该移动学习平台查询和在线学习所选修的课程并拥有实现对该课程的教学资源进行下载的功能，保留原SPOC平台前端系统中有关课程信息查询模块、课程在线学习模块和课程资源查询模块中的功能。

3）为了能够保证学生及时查收教师所发送的消息通知，保留原SPOC平台前端系统中的消息通知查询模块中的功能。

4）为了能够实现问卷调查、课堂小测验以及发表课程评论和提问等功能，保留原SPOC平台前端系统中的有关课程活动管理的部分功能。

3.2 SPOC移动学习平台的主要功能模块设计

根据上述设计需求，基于Flutter框架的医学信息技术课程SPOC移动学习平台其主要功能模块包括：课程查询模块、课程活动管理模块、消息通知查询模块和用户信息管理模块，其主要功能结构图如图1所示。

其中课程查询模块包括选修课程查询模块、选修课程学习模块和选修课程资源查询模块。选修课程查询模块用于学生查询所选修课程的基本信息（包括课程性质、授课教师、授课目标等内容）;选修课学习模块用于学生查看在线学习的课程内容（包括各章节知识点、课程笔记和课程视频等内容）;选修课程资源查询模块用于查询和下载老师发布与课程相关的静态资源（如课件、电子书籍等文件）。

课程活动管理模块主要包括选修课程评论模块、课程问卷模块和课程小测验模块等模块。选修课程评论模块用于学生对所选修的课程进行留言、评论和提问;课程问卷模块用于学生使用移动终端设备完成老师所布置的调查问卷活动;课程小测验模块用于完成老师所布置的随堂小测验或章节测验的活动任务。

消息通知查询模块和用户信息管理模块分别用于学生对教师所发布的通知消息进行查询和回复以及学生对个人基本信息进行查询和修改。

3.3SPOC移动学习平台的主要实现方法

Flutter核心技术是Widget，其编程思想是“一切皆为Wid-get”，在移动端App中的所有组件，甚至是布局都是Widget。Flutter分为无状态和有状态两类Widget。StatelessWidget没有内部状态，主要用于纯静态展示信息内容。而StatefulWidget是动态的，用户可以通过交互改变其状态，也可以用于数据更新导致其状态发生改变。由于StatefulWidget是用于完成前后台数据的交互的核心而StatelessWidget仅做数据展示之用，故重点介绍与本项目相关的StatefulWidget的实现方法。创建一个自定义的StatefulWidget，除了需要继承自StatefulWidget类以外，在该子类的内部还要实现对State这个状态类的管理，故需要创建StatefulWidget和State这两个类的子类。其中State对象中需要设置StatefulWidget的状态属性并重写buildfl方法。当Widget的状态改变时，State对象通过调用setState0方法来告知Flutter框架对Widget进行重绘。自定义StatefulWidget子类对于State子类的管理有三种：可以自己管理其状态，还可以实现父Widget管理子Widget的状态以及混搭管理其状态f即除了父Widget类管理其子Widget类的状态外，子Widget类也自己可以管理自己的部分状态）。本项目后台数据中除了文本类信息外，还有教学视频类信息，所以在实现SPOC移动学习平台的过程中，在pubspee～yaml配置文件中引入了flutter__webview_pl-ugindio、ehewie和video_player這几个依赖库。其中flutter_web-view_plugin库能够实现移动App访问Web服务器网页的需要;dio是Dart中具有强大功能的HTTP客户端，它可以获取HTTP的POST和GET请求、支持拦截器、全局配置、表单数据、文件下载等功能;ehewie是对Flutter官方库video_player实现二次封装的视频播放库，用于实现视频文件的播放控制f章节视频学习页面如图2所示）。

4总结

为满足学生通过移动客户端对SPOC平台进行学习的需求，本项目以Flutter跨平台移动uI开发框架为技术基础，开发了集在线学习、在线测试、在线调查和资料下载等功能为一体的医学信息技术课程SPOC移动学习平台。通过对该平台的部署与应用，为今后开展有关“互联网+教育”教学模式的教学实践提供了技术支持。受限于技术、时间和人力等因素该项目功能还不够完善，未来还需要进一步扩充其功能。