ionic 開發總結與心得

學習 ionic 開發對於本來熟悉 WEB Angular開發的工程師 ，應該會學習是非常簡單的一件事情，在學習的過程會發現有大多的時間是在撰寫 AngularJS，所以對於本來就熟悉AngularJS的開發者，只是多學習ionic 的幾個指令而己，但對於完全不熟習AngularJS的開發者的學習門檻會在這邊。

以下是這次在鐵人賽分享的主要內容，分成二個部份:

第一是基本功的部份，這個部份是HTML+CSS 與 AngularJS的學習，重點會放在 AngularJS 的 routing 與 基本的 AngularJS 的用法；第二是實作練習，重點會在如果可以透過 http 與後台的webapi 取得 json data，做一個雙向binding的練習，進階的部份可以學習 service 與 directive 的使用，以利於元件的封裝與程式的維護。

鐵人賽心得

鐡人賽對我來說是迫使把學習的東西轉化成可以描述文章非常好的機會，藉由這次的分享讓我把之前對ionic 的知識整理成比較有條理且有架構的文章，希望這一系列的文章對於想開發ionic 的人是很有幫助的，我必須承認裡面是有很多地方都沒有描述很清楚的地方，因為報名時只想好大致要分享的內容，每個六日再把下週的文章一口氣的寫完，但要很詳細的描述好文章內容，就必須要花很多時間撰寫，所以這次就以大方向為主的描述內容，未來有時間應該會好好再花一些時間整理成 gitbook。

ionic 開發時常見問題與相關資源

之前介紹 ionic 相關開發的文章告一個段落，細節的部份無法在這一次介紹的清楚的，請大家透過的資源去自行學習了

相關資源

官方網站: http://ionicframework.com/

官方討論區: http://forum.ionicframework.com/

目前ionic 還在beta階段，所以目前相關的討論有限，請利用官方的討論區或是 stackoverflow 來使用

官方的tutorial : http://ionicframework.com/tutorials/intro-tutorial/

weather tutorial : http://www.binpress.com/tutorial/a-simple-weather-forecast-app-with-ionic-framework-and-forecastio/107

angular 官網 : https://angularjs.org/

CodeSchool : http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro

官方 Demo Example

https://github.com/driftyco/ionic-demo

https://github.com/driftyco/ionic-weather

常見問題

ANDROID_HOME is not set and "android" command not in your PATH

在建立Android Project 最常發生的就是 android home 或是 Ant 的問題，可以參考

http://ionicframework.com/docs/ionic-cli-faq/#android-sdk

alert [ERROR] Error initializing Cordova: class not found

之前在開發的時侯，一開始都會有這個錯誤訊息出現，最後找到的問題都是 cordova 相關版本的問題，所以最後都是以更新 ionic 的版本才解掉這個問題

這是我之前在討論區提出的問題 http://forum.ionicframework.com/t/when-i-build-android-app-it-alert-error-error-initializing-cordova-class-not-found/8059/7

開發工具

Sublime : http://www.sublimetext.com/

Atom : https://atom.io/

xcode : 開發ios工具，但請先買一台Mac 電腦

eclipse : 開發 Android 使用

https://www.eclipse.org/downloads/

https://developer.android.com/sdk/installing/studio.html

ionic 編釋成 native app

目前官方支援的 mobile 有 IOS 與 Android ，在編釋mobile native 之前我們必須要先create ios 或是 android 的 project ，以下是以ios為例

詳細資料可以參考：http://ionicframework.com/docs/guide/installation.html

在ionic專案中建立一個 ios Project

在 ionic 專案中的 platforms 會出現一個ios 的目錄

若有安裝Xcode 直接在 ios click xxxx.xcodeproj

以上己經完成了建立ios 的 project ，接下來就是要編釋 ios 的Project 了，所以在command line 中執行 ionic build

........ (略) ........

試run一下虛擬器

要可以Deploy到手機的部份這邊就不介紹了，IOS 的部份是比較複雜的，請參考 IOS 相關開發手冊的書籍，但可能要先了解一下如何購買一個開發者帳號到最後面deploy到手機，如果是 Android 就簡單多了，作法大致上與 建立ionic ios Project 差不多，但只要是 Android 的手機接到電腦，電腦可以連接到Android 的device 時通常就可以把 app deploy到手機了，但因為Android 的手機實在是太多了，每一家的開啟開發者模式又不一樣，所以這邊就不介紹了

在window的電腦可以直接把 apk 放到 Android device 就可以安裝了

大功告成，這邊請大家還是要了解 ios 及 Android 基本的開發及deploy才有可能看的懂我寫的部分，所以對於完全不了解 ios 及 Android 的人就比較不好意思，請自己參考相關的文章。

ionic 實作(16)： ionic ngCordova

ng-Cordova 是 ionic 與 Cordova 之間的整合的套件，只要直接使用 ng-Cordova 就可以很容易的與底層device 做一些 native 的溝通

官方網址 : http://ngcordova.com/docs/

安裝方式

安裝方式簡單的說就是把 ngcordova.js 放到Project 中，所以有幾個方式都達到

1. 直接在terminal中使用 bower install ngCordova
2. 直接 git clone https://github.com/driftyco/ng-cordova.git
3. 在官方的 document 中直接點選下載

接下來把下載的Project 打開，把必要的檔案放置到ionic 的project 中

來個簡單的Sample

首先在Controller 中必須有inject ngCordova

使用模擬器來測試一下 codova 呼叫 Dialogs

大功告成，老實說目前我使用cordova 呼叫 mobile native 的不多，所以這邊就簡單介紹如何使用ngCordova，詳細的作法可以參考官方文件，不過我個人在測試是滿多問題的，可能還不是很熟，所以在編釋常常會有error出現

http://ngcordova.com/docs/

ionic 實作(15)： ionic Loading

在畫面載入資料時，我們習慣上都會加入Loading的效果，來讓User知道資料正在載入中，如下圖所示

在ionic 中提供了一個$ionicLoading的物件可以來做到這種效果

官方文件 http://ionicframework.com/docs/api/service/$ionicLoading/

以下的寫法是最簡單的寫法，在ionicLoading.show 只設定了template 的內容為 Loading

修改一下，讓loading的效果做一些不同的效果，如下同

大功告成，這個部份算是比較簡單的，大家可自行在controller中加入此Loading效果

ionic 實作(14)： Master Detail Pattern

master-detail 的功能在手機裡幾乎是一定會使用到的，在前面的部份我們也有實作到master-detail，所以本章就好好介紹 ionic 的 master-detail 應該是如何設計

在使用 master-detail 時，必須藉用 angularJS中的 $routeParams 或 stateParams 來傳遞參數

舉例說明

例如： 左邊為master，右邊為detail，當點選 2014/10 時，要將 2014/10 的所有訂購的明細叫出來，這個時侯就必須是藉由 $routeParams 的變數來傳遞

要注意routes中的設定，在歷史明細的url 為/history/:month，也就是在controller中要透過 $stateParams[‘month’] 來接變數

url : /history/1 在controller中使用$stateParams[‘month’]就可以知道值為1

在controller 中的表現如下

最後，拿到params通常是用來找出detail，以下是透過$http.post的方式來找出明細

大功告成，master-detail pattern 的設計大致上是如此，以下是 ionic Master Detail Pattern 的文章，寫的非常詳細，有興趣的可以參考

http://mcgivery.com/ionic-master-detail-pattern/

ionic 實作(13)： ionic 中封裝 angular的 directive

AngularJS Directive 介紹

https://docs.angularjs.org/guide/directive

https://github.com/driftyco/ionic/tree/master/js/angular/directive

簡單的說，我們可能會把一些畫面上的UI (HTML Code) 封裝成一個component，當封裝成component之後，就可以在許多的畫面上可以很簡單的就可以實現UI元件了，在ionic 中目前有40多個directive 元件可以使用。

例如：ioic-list 與 ioic-item 就是非常好的典型例子

有興趣的可以參考source : https://github.com/driftyco/ionic/blob/master/js/angular/directive/list.js#L1

來一個比較常見的 ion-content，應該不陌生吧，之前我們在撰寫的view ，每一頁都會使用到 ionic-content

網址 : http://ionicframework.com/docs/api/directive/ionContent/

簡單範例: youtube

我之前為了讓 手機可以跑 youtube ，所以上網找了一個範例並且小修改了一下，就可以在手機上播放 youtube的影片了

同 service 的做法，我在module中加上了一個 directive 命名為 youtube

在view page 就可以簡單的使用了

如果對於封裝directive不熟，其實google 一下都會有許多人封裝好的directive都可以拿來使用，只要清楚如何把directive掛到module一切就大功告成了

ionic 實作(12)： ionic 中封裝 angular的 Service

為什麼要使用 Service 呢，簡單的說就是把常用的一些實作抽離出來，除了讓之後比較可以便利的維護外，在ionic 中也可以傳遞二邊的共用的變數。

以會員登入為例，在 許多controller 都會使用到 http get 及 post ，所以我們就可以把這二個實作封裝成可以remote 的service

Angular 介紹

AngularJS Service  https://docs.angularjs.org/guide/services

簡單的說，就是在 module中加入一個 factory，並且給予一個 ServiceId

Refactor

使用AngularJS 中的 factory 來封裝，實作 get 及 post 二個function

打開 js/service.js 的檔案，我們在這個檔案加上一個 remoteservice 的 factory

另外在controller 使用時，必須inject 我們所定義的service ，在這邊我們是命名為remoteService。

大功告成，所以如果我們要讓controller 之間可以互傳變數，你可以封裝成自己的factory的方式，把$rootScope傳入此service就可以實作了，這個部份請大家就自己練習看看吧

ionic 實作(11)： 權控判斷與全域變數的存放

我個人習慣使用來控制ionic 全域變數的有二種方式，第一種就是存放在rootScope物件中，第二種就是封裝成service 來提供二個controller 之間可以共用變數。

接下來，要來處理登入畫面，登入畫面在按下登入後會 post 帳號及密碼到遠端，認證通過後會回傳token及使用者資訊

為了存放全域變數，我們把認證後的使用者的資訊存放在 $rootScop.user 裡

測試的結果如下

接下來，我們再測試一下其它 controller 是否可以看到 $scope.user

在console 中可以看到$scope.user 是會有值的

大功告成，接下來所有page 的驗證方式，都可以利用 $scope.user 及 $scope.token 來判斷了

ionic 實作(10)：重構程式 - $http (下)

接下來要將圖片、電話及商店名稱一樣binding 到 這三個變數上，分別為storeName、store_tel及 storeImage

測試畫面如下

大功告成，以上我們己經完成了今日所有取資料的功能了。

接下來，會員登入部份使用 $http.post 來認證，目前登入畫面如下

$http.post 用法如下

透過 $http.post 在認證成功後，在success 的callback 我們可以將需要儲存的資料暫存下來

ionic 實作(9)：重構程式 - $http (上)

在之前實作的部份，資料的讀取的都是暫時使用靜態變數來呈現的。但實際在開發手機時，通常都是手機中的 SQLLite 資料，或是直接讀取透過 HTTP 來讀取 remote 的資料，當然還是看手機APP 的設計來決定是要用什麼方式來存取，接下來的部份就是要利用 AngularJS 中的 $http 來取得遠端的資料。

HTTP 介紹

Angular HTTP

https://docs.angularjs.org/api/ng/service/$http

Augular $http 的幾方法

這邊要介紹的是 $http.get

接下來要將以下之前的程式，改抓remote 的資料

以下的部份，我使用自己的測試server來介紹

首先在網頁上測試是一下server response 回來的資料

Refactor Code 開始

第一步，先使用$http.get 來測試

打開Chrome 的開發人員工具，切到 network 應該可以找到 browser 跟 server  get 的url

接下來我們將取得的 data 與 menu_list 做 雙向的 binding，data.items 可以取得今日訂餐商店的所有menu

測試的畫面如下

待續...