基于Ionic的智慧托管系统的设计与实现

薛源

摘要：随着中小学生校外托管中心的日益发展壮大，如何高效管理好托管中心成为人们关注的问题。而随着智能手机的普及，许多工作都可以通过各种移动应用来解决。因此，该文提出基于Ionic的混合模式移动应用（HybirdApp）开发方式，设计并实现了智慧托管系统，有效解决家长和托管中心数据信息交互问题，提高托管中心管理效率。

关键词： Ionic； HybirdApp；智慧托管； 系统

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2018）03-0234-03

Abstract：With the increasing development of primary and secondary school custodial centers， how to effectively manage the custodian centers has become a concern. With the popularity of smart phones， many works can be solved through a variety of mobile applications. Therefore， this paper proposes a development mode of HybirdApp Based on Ionic， designs and implements a wisdom hosting system， which effectively solves the data information exchange problem between parents and the hosting center and improves the management efficiency of the hosting center.

Key words：Ionic； HybirdApp； wisdom hosting； system

1 概述

随着社会经济的快速发展，中小学生校外托管中心作为一种新的教育形式正在逐步发展壮大。校外托管中心可以帮助家长接送、照看孩子以及为孩子提供辅导课程，在一定程度上解决了家长因工作繁忙无法照顾孩子的问题。但随着孩子数量的增多以及托管中心规模的扩大，如何高效管理好托管中心，确保家长和托管中心之间数据信息的及时交互，成为人们亟需解决的问题。

随着移动互联网技术的快速发展，智能手机在人们的生活中越来越普及，各种各样的App应用如雨后春笋般纷纷出现，为人们提供丰富多彩的信息。移动互联网目前存在三种App开发形态：基于C/S架构原生应用（Native App）、基于B/S架构的Web应用（Web App）以及将两者结合的混合应用（Hybird App）[1]。其中混合应用（Hybird App）技术结合了Web App跨平台开发以及Native App良好用户体验的优势[2]，并且其开发成本低、一次开发多平台运行的特性必将成为未来移动开发的一大主流趋势。而Ionic作为一款混合移动开发框架，基于MVC设计模式和AngularJS基础，是目前国内外最有潜力的移动跨平台开发技术之一。

综上所述，本文基于Ionic框架来开发智慧托管系统，解决家长和托管中心之间信息交互问题，提高托管中心管理效率。

2 Ionic开发平台

2.1 Ionic技术特点

Ionic [4]是一个强大的 HTML5 应用程序开发框架（HTML5 Hybrid Mobile App Framework ）。 使用者可以借用Web技术（HTML、CSS、Javascript等）开发接近原生体验的移动应用程序。Ionic框架从Web角度开发手机应用，基于Cordova的编译平台，实现一套代码生成不同平台的应用程序，大大提升开发效率。

Ionic基于Angular语法，简单易学，并且完美的融合下一代移动框架，支持AngularJS的特性。同时，Ionic 提供了丰富的CSS库和UI组件，帮助开发者快速开发应用。此外，Ionic 提供了强大的命令行工具，可以方便快捷地完成环境安装、开发调试、项目打包等操作。

2.2 Ionic开发环境搭建

（1） 安装Ionic和Cordova

首先需要安装好Node.js，可直接在官網下载安装，接下来使用npm来安装最新版本的cordova和ionic。

$ npm install -g cordova ionic；

（2） 开始创建Ionic项目

可以使用Ionic官方提供的现有模板或者一个空白的项目创建Ionic应用[4]。

$ ionic start myApp tabs；

（3） 运行项目

创建好项目后，进入myApp项目目录，输入ionic serve —lab命令，通过这个命令会在浏览器中同时显示在Android和iOS上运行的效果，当进行项目开发时，会在浏览器中显示实时预览效果，运行效果如图1所示。

（4） 项目打包发布

由于Ionic继承了Cordova的编译环境，因此可以直接使用Ionic的命令行工具代替Cordova的命令来打包项目[3]。

$ ionic platform add android/ios；

$ ionic build android/ios；

$ ionic run android/ios；

3 系统总体设计

智慧托管系统提供一整套的托管班信息化建设方案，包括托管班的管理信息化系统、教学信息化系统、以及家校互动系统，这些系统之间无缝连接，让家长、老师通过一台手机即可进行实时沟通交流以及对托管班进行管理。

智慧托管系统主要由家长端App客户端、教师端App客户端以及管理后台Web三大部分组成。其中App客户端基于Ionic框架开发，其中读取远程服务器的数据进行数据交互是通过AngularJS提供的核心服务$http来完成的。Web端后台开发基于Yii MVC框架，采用PHP语言开发，并提供API接口，供客户端调用。系统功能模块图如图2所示。

1） 家长端App：通过班级列表模块，家长可以查看所开设的班级课程，方便地使用手机完成报名、交费等业务。通过宝贝动态模块，家长可以掌握孩子在托管班的全程情况，特别是可通过视频监控看到孩子的表现。通过消息中心模块，家长了解托管班活动、续费提醒、与老师互动留言等。通过用户中心模块，家长可以完成登录、注册、添加孩子信息、退课、充值、提现等功能。

2） 教师端App：通过教务管理模块，教师可以方便的查看班级报班情况以及退课情况，处理交费退费等业务。通过宝贝状态更新模块，批量更新孩子的状态（领走孩子、到达托管班等），并可与家长进行互动交流。通过消息管理模块，教师可以发布活动、咨询、信息等，给家长提供统一公告。

3） 管理后台Web：通过家长管理模块，可以显示家长信息列表，后台人员可进行查看、编辑等功能。通过托管班管理模块，可对托管班机构、托管班教师以及托管班课程进行增改查等功能管理。通过信息统计模块，教师可以查看孩子花名册、报班记录、退课记录等信息。通过财务管理模块，财务人员可以查看托管班充值记录、提现记录、报班、退班记录、对账记录等信息。通过摄像头管理模块，管理人员可以对摄像机进行增删改查以及查看摄像头实时画面内容。通过系统管理模块，管理人员可以设置账户、角色权限以及查看系统日志信息等。

4 详细设计与实现

在上一节总体设计基础上，本节选取家长端App班级列表模块，从功能概述、详细流程、运行效果等方面详细描述其具体实现过程。

4.1 功能概述

班级列表模块主要功能是显示托管班内所开设的所有班级课程，家长可以在手机上滑动查看班级列表，并可输入关键词进行搜索。当家长点击某一班级时，可查看该班级详情信息，包括授课内容，开课时间地点、招生对象人数、费用等信息。家长可点击报名按钮为孩子报名缴费。

4.2 详细流程

1） 调用Web端接口获取数据

使用$http.post（）读取Web端班级列表接口时，会遇到数据异步问题，这时需要用到promise。Promise是一种模式，以同步操作的流程形式来操作异步事件，避免了层层嵌套，可以链式操作异步事件。想要在angularjs中创建promise，可以使用内置的$q服务，在services.js中封装一个post方法，根据传入的api路径和参数，读取某个api。核心代码如下：

//封装post方法，读取接口数据

this.postApi = function（apiurl， params）{

var defer = $q.defer（）；//声明延后执行

$http.post（"http：//localhost/tuoguan/web/webroot" + apiurl， params）

.success（function（data）{

//声明执行成功

defer.resolve（data）；

}）

.error（function（data）{

//声明执行失败

defer.reject（）；}）；

//返回承诺，返回获取数据的API

return defer.promise； }；

2） 在controller中直接调用这个方法，返回班级列表信息，代码如下：

var promise = tuoguan.postApi（'/api/courselist'， {keyword： keyword}）；

promise.then（function（data）{

if（data.code == 1）{

console.log（data）；//输出班级信息

$scope.courses = data.data； }

else{System.mdtoast（data.msg）；}

}， function（data）{

System.mdtoast（'网络通信错误'）；}）；

返回的班级信息data中包括班级名称、地址、费用、开课时间等信息，将data在控制面板中输出如图3所示。

3） 页面绑定代码

ui-sref="tab.coursedetail（{course： course}）">

{{course.name}}

{{course.nurseryname}}

{{course.recruit}}

招生{{course.enrollment}}

{{course.begin_time}}

4.3 運行效果

最终运行效果如图4所示。

5 结论

随着移动互联网技术的快速发展，智能手机越来越普及，人们生活中的许多事情都可以通过各种手机应用来完成。中小学生校外托管中心作为一种新的教育形式正在逐步发展壮大，为了解决家长和托管中心信息交互问题，本文基于Ionic框架设计实现了智慧托管系统，详细介绍了Ionic的技术特点以及系统的总体设计和具体的实现方法。通过智慧托管系统，家长、老师可以通过一台手机方便快捷的进行沟通交流以及对托管班进行管理，提高管理效率。

参考文献：

[1] 梁稣. 基于Ionic和PhoneGap的移动跨平台开发技术研究与应用实现[D].云南大学，2016.

[2] 强琳. 基于Ionic的云校园新生报到系统的构建[J]. 福建电脑， 2016， 32（10）：21-22.

[3] 陈理兵. 基于Ionic的某医院移动办公系统设计与实现[D]. 厦门大学， 2015.

[4] 商锦，林亮，王雨，张智. Ionic在混合模式APP中的应用[J]. 软件导刊，2017，16（05）：132-134.

[5] 朱凯南，李艳平，申闫春， 等. 基于Ionic和Cordova的跨平台移动APP的研究与应用[J]. 电脑知识与技术，2016，12（1）：119-121.