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