基于Ionic的智慧托管系統(tǒng)的設(shè)計與實現(xiàn)

薛源

摘要：隨著中小學(xué)生校外托管中心的日益發(fā)展壯大，如何高效管理好托管中心成為人們關(guān)注的問題。而隨著智能手機的普及，許多工作都可以通過各種移動應(yīng)用來解決。因此，該文提出基于Ionic的混合模式移動應(yīng)用（HybirdApp）開發(fā)方式，設(shè)計并實現(xiàn)了智慧托管系統(tǒng)，有效解決家長和托管中心數(shù)據(jù)信息交互問題，提高托管中心管理效率。

關(guān)鍵詞： Ionic； HybirdApp；智慧托管； 系統(tǒng)

中圖分類號：TP311 文獻標(biāo)識碼：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 概述

隨著社會經(jīng)濟的快速發(fā)展，中小學(xué)生校外托管中心作為一種新的教育形式正在逐步發(fā)展壯大。校外托管中心可以幫助家長接送、照看孩子以及為孩子提供輔導(dǎo)課程，在一定程度上解決了家長因工作繁忙無法照顧孩子的問題。但隨著孩子數(shù)量的增多以及托管中心規(guī)模的擴大，如何高效管理好托管中心，確保家長和托管中心之間數(shù)據(jù)信息的及時交互，成為人們亟需解決的問題。

隨著移動互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，智能手機在人們的生活中越來越普及，各種各樣的App應(yīng)用如雨后春筍般紛紛出現(xiàn)，為人們提供豐富多彩的信息。移動互聯(lián)網(wǎng)目前存在三種App開發(fā)形態(tài)：基于C/S架構(gòu)原生應(yīng)用（Native App）、基于B/S架構(gòu)的Web應(yīng)用（Web App）以及將兩者結(jié)合的混合應(yīng)用（Hybird App）[1]。其中混合應(yīng)用（Hybird App）技術(shù)結(jié)合了Web App跨平臺開發(fā)以及Native App良好用戶體驗的優(yōu)勢[2]，并且其開發(fā)成本低、一次開發(fā)多平臺運行的特性必將成為未來移動開發(fā)的一大主流趨勢。而Ionic作為一款混合移動開發(fā)框架，基于MVC設(shè)計模式和AngularJS基礎(chǔ)，是目前國內(nèi)外最有潛力的移動跨平臺開發(fā)技術(shù)之一。

綜上所述，本文基于Ionic框架來開發(fā)智慧托管系統(tǒng)，解決家長和托管中心之間信息交互問題，提高托管中心管理效率。

2 Ionic開發(fā)平臺

2.1 Ionic技術(shù)特點

Ionic [4]是一個強大的 HTML5 應(yīng)用程序開發(fā)框架（HTML5 Hybrid Mobile App Framework ）。 使用者可以借用Web技術(shù)（HTML、CSS、Javascript等）開發(fā)接近原生體驗的移動應(yīng)用程序。Ionic框架從Web角度開發(fā)手機應(yīng)用，基于Cordova的編譯平臺，實現(xiàn)一套代碼生成不同平臺的應(yīng)用程序，大大提升開發(fā)效率。

Ionic基于Angular語法，簡單易學(xué)，并且完美的融合下一代移動框架，支持AngularJS的特性。同時，Ionic 提供了豐富的CSS庫和UI組件，幫助開發(fā)者快速開發(fā)應(yīng)用。此外，Ionic 提供了強大的命令行工具，可以方便快捷地完成環(huán)境安裝、開發(fā)調(diào)試、項目打包等操作。

2.2 Ionic開發(fā)環(huán)境搭建

（1） 安裝Ionic和Cordova

首先需要安裝好Node.js，可直接在官網(wǎng)下載安裝，接下來使用npm來安裝最新版本的cordova和ionic。

$ npm install -g cordova ionic；

（2） 開始創(chuàng)建Ionic項目

可以使用Ionic官方提供的現(xiàn)有模板或者一個空白的項目創(chuàng)建Ionic應(yīng)用[4]。

$ ionic start myApp tabs；

（3） 運行項目

創(chuàng)建好項目后，進入myApp項目目錄，輸入ionic serve —lab命令，通過這個命令會在瀏覽器中同時顯示在Android和iOS上運行的效果，當(dāng)進行項目開發(fā)時，會在瀏覽器中顯示實時預(yù)覽效果，運行效果如圖1所示。

（4） 項目打包發(fā)布

由于Ionic繼承了Cordova的編譯環(huán)境，因此可以直接使用Ionic的命令行工具代替Cordova的命令來打包項目[3]。

$ ionic platform add android/ios；

$ ionic build android/ios；

$ ionic run android/ios；

3 系統(tǒng)總體設(shè)計

智慧托管系統(tǒng)提供一整套的托管班信息化建設(shè)方案，包括托管班的管理信息化系統(tǒng)、教學(xué)信息化系統(tǒng)、以及家校互動系統(tǒng)，這些系統(tǒng)之間無縫連接，讓家長、老師通過一臺手機即可進行實時溝通交流以及對托管班進行管理。

智慧托管系統(tǒng)主要由家長端App客戶端、教師端App客戶端以及管理后臺Web三大部分組成。其中App客戶端基于Ionic框架開發(fā)，其中讀取遠程服務(wù)器的數(shù)據(jù)進行數(shù)據(jù)交互是通過AngularJS提供的核心服務(wù)$http來完成的。Web端后臺開發(fā)基于Yii MVC框架，采用PHP語言開發(fā)，并提供API接口，供客戶端調(diào)用。系統(tǒng)功能模塊圖如圖2所示。

1） 家長端App：通過班級列表模塊，家長可以查看所開設(shè)的班級課程，方便地使用手機完成報名、交費等業(yè)務(wù)。通過寶貝動態(tài)模塊，家長可以掌握孩子在托管班的全程情況，特別是可通過視頻監(jiān)控看到孩子的表現(xiàn)。通過消息中心模塊，家長了解托管班活動、續(xù)費提醒、與老師互動留言等。通過用戶中心模塊，家長可以完成登錄、注冊、添加孩子信息、退課、充值、提現(xiàn)等功能。

2） 教師端App：通過教務(wù)管理模塊，教師可以方便的查看班級報班情況以及退課情況，處理交費退費等業(yè)務(wù)。通過寶貝狀態(tài)更新模塊，批量更新孩子的狀態(tài)（領(lǐng)走孩子、到達托管班等），并可與家長進行互動交流。通過消息管理模塊，教師可以發(fā)布活動、咨詢、信息等，給家長提供統(tǒng)一公告。

3） 管理后臺Web：通過家長管理模塊，可以顯示家長信息列表，后臺人員可進行查看、編輯等功能。通過托管班管理模塊，可對托管班機構(gòu)、托管班教師以及托管班課程進行增改查等功能管理。通過信息統(tǒng)計模塊，教師可以查看孩子花名冊、報班記錄、退課記錄等信息。通過財務(wù)管理模塊，財務(wù)人員可以查看托管班充值記錄、提現(xiàn)記錄、報班、退班記錄、對賬記錄等信息。通過攝像頭管理模塊，管理人員可以對攝像機進行增刪改查以及查看攝像頭實時畫面內(nèi)容。通過系統(tǒng)管理模塊，管理人員可以設(shè)置賬戶、角色權(quán)限以及查看系統(tǒng)日志信息等。

4 詳細(xì)設(shè)計與實現(xiàn)

在上一節(jié)總體設(shè)計基礎(chǔ)上，本節(jié)選取家長端App班級列表模塊，從功能概述、詳細(xì)流程、運行效果等方面詳細(xì)描述其具體實現(xiàn)過程。

4.1 功能概述

班級列表模塊主要功能是顯示托管班內(nèi)所開設(shè)的所有班級課程，家長可以在手機上滑動查看班級列表，并可輸入關(guān)鍵詞進行搜索。當(dāng)家長點擊某一班級時，可查看該班級詳情信息，包括授課內(nèi)容，開課時間地點、招生對象人數(shù)、費用等信息。家長可點擊報名按鈕為孩子報名繳費。

4.2 詳細(xì)流程

1） 調(diào)用Web端接口獲取數(shù)據(jù)

使用$http.post（）讀取Web端班級列表接口時，會遇到數(shù)據(jù)異步問題，這時需要用到promise。Promise是一種模式，以同步操作的流程形式來操作異步事件，避免了層層嵌套，可以鏈?zhǔn)讲僮鳟惒绞录Ｏ胍赼ngularjs中創(chuàng)建promise，可以使用內(nèi)置的$q服務(wù)，在services.js中封裝一個post方法，根據(jù)傳入的api路徑和參數(shù)，讀取某個api。核心代碼如下：

//封裝post方法，讀取接口數(shù)據(jù)

this.postApi = function（apiurl， params）{

var defer = $q.defer（）；//聲明延后執(zhí)行

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

.success（function（data）{

//聲明執(zhí)行成功

defer.resolve（data）；

}）

.error（function（data）{

//聲明執(zhí)行失敗

defer.reject（）；}）；

//返回承諾，返回獲取數(shù)據(jù)的API

return defer.promise； }；

2） 在controller中直接調(diào)用這個方法，返回班級列表信息，代碼如下：

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（'網(wǎng)絡(luò)通信錯誤'）；}）；

返回的班級信息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 結(jié)論

隨著移動互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，智能手機越來越普及，人們生活中的許多事情都可以通過各種手機應(yīng)用來完成。中小學(xué)生校外托管中心作為一種新的教育形式正在逐步發(fā)展壯大，為了解決家長和托管中心信息交互問題，本文基于Ionic框架設(shè)計實現(xiàn)了智慧托管系統(tǒng)，詳細(xì)介紹了Ionic的技術(shù)特點以及系統(tǒng)的總體設(shè)計和具體的實現(xiàn)方法。通過智慧托管系統(tǒng)，家長、老師可以通過一臺手機方便快捷的進行溝通交流以及對托管班進行管理，提高管理效率。

參考文獻：

[1] 梁穌. 基于Ionic和PhoneGap的移動跨平臺開發(fā)技術(shù)研究與應(yīng)用實現(xiàn)[D].云南大學(xué)，2016.

[2] 強琳. 基于Ionic的云校園新生報到系統(tǒng)的構(gòu)建[J]. 福建電腦， 2016， 32（10）：21-22.

[3] 陳理兵. 基于Ionic的某醫(yī)院移動辦公系統(tǒng)設(shè)計與實現(xiàn)[D]. 廈門大學(xué)， 2015.

[4] 商錦，林亮，王雨，張智. Ionic在混合模式APP中的應(yīng)用[J]. 軟件導(dǎo)刊，2017，16（05）：132-134.

[5] 朱凱南，李艷平，申閆春， 等. 基于Ionic和Cordova的跨平臺移動APP的研究與應(yīng)用[J]. 電腦知識與技術(shù)，2016，12（1）：119-121.