Hybrid Apps開發系列之7.2：SideMenu側欄選單(Spotify歌曲試聽範例)

隨著Apps功能越來越豐富，為讓使用者能有較佳的介面操作體驗，通常會以「側欄選單」(sidemenu, 如圖) 的方式解決。

圖1. 側欄選單

「側欄選單」和「頁籤」(參考Hybrid Apps開發系列之4.4：多頁面App程式 (天氣app-非線上版))一樣都是屬於主頁面類型，實作時會將「側欄選單」所在頁面設定為parent state，其他頁面則共用「側欄選單」所在的parent state。

建立「側欄選單」

Hybrid Apps開發系列之6.3：使用Parse User實作雲端會員管理機制

[Parse.com服務已終止]延續前文Hybrid Apps開發系列之5.5：以REST API存取Parse雲端資料庫 ，本文繼續介紹Parse提供的會員管理機制：Parse User。透過此Parse內建的class，註冊、登入等會員基本管理，都非常簡單。

Parse User是Parse App內建的class，只要建立app，就會自動產生。Parse User class預設有9個欄位如下圖所示，視需求可自行擴充。

圖1. Parse app自動產生User class，內有username, password, email等欄位

以下以EnrollApp的雲端資料庫（如下圖）為例，說明如何以Parse REST API進行會員註冊與登入的動作。

圖2. EnrollApp雲端資料庫

Hybrid Apps開發系列之6.2：使用Google Maps API顯示地圖

地圖服務是行動apps最常提供的功能。本文介紹如何在Ionic Apps裡使用Google Maps API顯示地圖。

 圖1. 顯示Google Map

前置動作：產生Google API Key

Google API的使用方式如下：

http://maps.googleapis.com/maps/api/js?key=[你的API金鑰]&sensor=true

因此必須先取得API金鑰，步驟如下：

1. 前往Google Developers Console (https://console.developers.google.com/)。
2. 以gmail帳號登入後，點選「建立專案」，並輸入專案名稱。
3. 進到專案頁面，選取左側選單「API和驗證」項目下的「API」，從右邊各種API列表中選取Google Maps JavaScript API，並在下一個畫面啟動之。
4. 在「API和驗證」項目下的「憑證」頁面，點選「建立新的金鑰」，選擇「瀏覽器金鑰」，並輸入http:/localhost:8100/*。
5. 將「API 金鑰」複製起來，放到index.html引用Google Maps API的地方，例如：

<script src="http://maps.googleapis.com/maps/api/js?key=[你的API 金鑰]&sensor=true"></script>

Hybrid Apps開發系列之6.1：登入授權OAuth以Facebook為例

OAuth是一種讓第三方取得某用戶登入授權，進而存取該用戶在某網站上所擁有資源的開放標準。簡單說，目前各大網站例如Facebook, Google, Twitter等，都有OAuth登入授權機制，如果想在你的apps裡使用這些網站的資源，便需要實做OAuth。對Ionic Apps而言，OAuth登入授權可使用ngCordova OAuth外掛。該外掛支援Fackbook, Google, Dropbox, Twitter等許多網路服務登入授權，用法也很簡單。底下以Facebook登入授權為例，說明如何在Ionic Apps上取得Facebook內容。

Facebook前置作業：create Facebook App

以OAuth登入前，必須先在Facebook建立對應的App。步驟簡述如下：

1. 登入FB，前往「管理應用程式」頁面(https://developers.facebook.com/)。
2. 選取My Apps / Add a New App，接著在跳出的頁面裡選擇「WWW網站」類型。



圖1.App類型選擇WWW網站

Hybrid Apps開發系列之5.5：以REST API存取Parse雲端資料庫

[Parse.com服務已終止]SQLite是手機內建的資料庫，僅適合用來儲存local data。「資料庫伺服器」或是「網路資料庫服務」對許多apps而言，才是儲存資料的正解。因此，本文以Parse雲端資料庫服務為例，使用Parse REST API存取雲端資料庫。

前置作業(1/4)：在parse.com建立App

透過API使用Parse雲端資料庫必須先在Parse.com註冊、建立App、並取得App Keys才能順利使用。Parse的帳號啟用之後，點選"Create a new App"建立App，切換到Dashboard，便可看到已經建立的所有Apps，如下圖：

圖1.Parse.com提供雲端資料庫服務

Hybrid Apps開發系列之5.4：表單輸入驗證 (Form validation)

表單輸入驗證 (form validation) 是資料寫入資料庫的第一道檢查關卡，程式必須確認使用者已經輸入必要的資料，且一切格式都符合要求。Ionic專案的表單輸入驗證是採用AngularJS的驗證機制，基本程式碼如下：

<form name="form" novalidate>帳號:
  <input type="text" name="user" ng-model="username" required  />
  <span ng-show="form.user.$error.required">帳號不得為空</span>

  <input ng-disabled="form.user.$dirty && form.user.$invalid" type="submit" />
</form>

• 第1行：由於驗證結果（例如格式錯誤、未填寫等）必須透過表單存取，故必須設定name屬性，此處自訂表單的名稱為"form"，供後續存取驗證結果。另外novalidate表示關閉browser內定的驗證機制，由AngularJS進行驗證。
• 第2行：每個要做輸入驗證的欄位，都必須自訂name屬性值，此處自訂為"user"，如為必要欄位，則必須設定required。
• 第3行：驗證錯誤訊息。form.user代表第2行帳號填寫欄位。$error則是驗證結果出現錯誤。AngularJS內建了一些驗證程序，例如.requried會負責驗證有無填寫，因此使用$error.required代表未填寫。

Hybrid Apps開發系列之5.2：彈出式視窗$ionicModal運用於「資料編輯」

在進入更複雜的自訂Services範例之前，由於許多服務都牽涉到即時編輯與更新資料的功能，因此有必要先介紹適合用來編輯資料的「彈出式視窗」。Ionic「彈出式視窗」有兩類：$ionicModal與$ionicPopup。$ionicModal是完整頁面，以

<ion-modal-view></ion-modal-view>

建置頁面，$ionicPopup則是對話框 (dialog)式，直接用JavaScript設定對話框的一些餐數值，通常用於訊息通知、確認等作用。兩種彈出式視窗外觀如下圖所示。

圖1. 彈出式視窗有兩種：$ionicModal與$ionicPopup

Hybrid Apps開發系列之5.1：資料模型與自訂services（重構天氣app線上版）

Ionic/AngularJS apps透過$scope變數可以定義資料模型 (data model) 變數供前端頁面 (views)使用，而在controller端，則會將資料模型變數設定為數值、陣列甚至是透過web services得到的資料。然而，如果有資料處理、頁面共用資料模型等更複雜的運作方式時，應該呼叫.factory()採用「自訂services」的方式，將資料處理等相關程式碼打包進factory，供$scope以及前端頁面運用，如下圖所示：

圖1.各種資料來源可透過factory進行管理

如圖1，factory可將資料庫、web services、或是一般JavaScript物件包裹起來，建立資料處理服務，提供$scope與前端頁面使用。Factory就相當於apps的資料層 (data layer)。

Factory基本格式

Ionic/AngularJS模組都可建立factory，做為資料層，基本格式如下：

angular.module('starter',['ionic])
   .factory('serviceName',function(){
       return {}
   }
)

Hybrid Apps開發系列之4.6：多頁面App程式 (天氣app-線上即時版)

使用$http模組，可透過HTTP即時取得資料後，稍微修改Hybrid Apps開發系列之4.4：多頁面App程式 (天氣app-非線上版) 的離線版程式，便可改為線上即時版。

唯一要修改的是controllers.js，修改後如下：

angular.module('starter.controllers',[])
        .controller('homeCtrl',function($scope,$location){
            $scope.citys = citys;
            $scope.showWeather = function(index){                
                $location.path('/tab/home/'+index);
            }
        })
        .controller('settingsCtrl',function($scope){
            $scope.citys = citys;
        })          
        .controller('weatherCtrl', function ($scope, $stateParams, $http) {
            $scope.city = citys[$stateParams.id];
            $scope.img_base_url = image_base_url;
            $http.get('http://api.openweathermap.org/data/2.5/weather',
                    {params: {'q': $scope.city.q}})
                    .then(function (response) {
                        $scope.weather = response.data; 
                    }, function (err) {
                        alert("Error!!")
                    })
        })
var citys = [
    {name: "台北", q: "Taipei", on: true},
    {name: "台中", q: "Taichung", on: true},
    {name: "台南", q: "Tainan", on: true},
    {name: "高雄", q: "Kaohsiung", on: true},
    {name: "花蓮", q: "Hualian", on: true},
]
var image_base_url = "http://openweathermap.org/img/w/"; // open weather api icon

Hybrid Apps開發系列之4.5：以HTTP連線取得JSON資料

開放資料當道，許多都可透過HTTP連線方式取得JSON格式資料，前文Hybrid Apps開發系列之4.4：多頁面App程式 (天氣app-非線上版)便以open weather map，離線取得天氣資料。但如果要線上即使取得資料，則必須使用AngularJS的$http模組。

$http連線取得JSON資料

$http實際上是發出http要求，進而取得回應資料。如果格式是JSON，在JavaScript中便可直接使用，其他格式則不一定。

$http連線使用方式如下：

$http.get("http://url/service", { params: { "key1": "value1", "key2": "value2" } })
    .success(function(response) {
        // 處理http回應資料; response為回傳資料
    })
    .error(function(err) {
        // 連線錯誤
    });

另一種寫法則是：

$http.get("http://url/service", { params: { "key1": "value1", "key2": "value2" } })
    .then(function(response) {
        // 建立天氣資料模型變數,response.data為回傳資料
    }, function(err) {
        // 連線錯誤
    });

兩者有所差別，可參考此討論串。在此建議用

.then(function(resp),function(err))

Hybrid Apps開發系列之4.4：多頁面App程式 (天氣app-非線上版)

前文（Hybrid Apps開發系列之4.1：多頁面App製作與頁籤(Tabs)簡介）介紹的範例有許多codes重複出現，例如頁籤<ion-tabs>便同時出現在兩個.html檔內：

    <ion-tabs class="tabs-icon-top">
        <ion-tab href="/home" icon="ion-home" title="首頁"></ion-tab>
        <ion-tab href="/order" icon="ion-compose" title="訂位"></ion-tab>
    </ion-tabs>

此外，<ion-nav-bar>等指令也同樣重複出現。為了讓程式碼共用，必須採用「共用states」的方式。

共用states

UI-Router可定義abstract state－也就是操作過程中不能直接瀏覽的頁面－讓多個states共用；而abstract state是parent state；其他共用abstract state的頁面則為child states。因此，4.1的頁籤範例修改的部分如下圖所示。

Hybrid Apps開發系列之4.3：多頁面App程式 (清單/細節瀏覽)

「列出清單，點選之後顯示該清單項目的細節」－這是apps最常出現的操作模式之一，例如：

圖1. 左邊是清單，點選項目後會出現該項目細節

要完成這樣的功能除了需要完成兩個頁面：「清單頁面」與「細節瀏覽頁面」之外，還必須讓「清單頁面」傳遞參數－例如「清單項目編號」給「細節瀏覽頁面」，如此後者才能正確取得細節資料。

Hybrid Apps開發系列之4.2：多頁面App程式重構

前一篇文章（Hybrid Apps開發系列之4.1：多頁面App製作與頁籤(Tabs)簡介）製作多頁面apps時，是以<script>將所有頁面全部寫在index.html檔裡。但當apps的頁面數量增加，此種管理頁面的方式便需要做改變。此外，由於Ionic/AngularJS使用MVC (Model-View-Controller，另一說是MVVM-Model View Viewmodel) 設計模式，因此最好也將Controller與app.js分開。圖1與圖2說明重構程式的七個步驟。

圖1.重構程式步驟1~3

Hybrid Apps開發系列之4.1：多頁面App製作與頁籤(Tabs)簡介

前一篇文章介紹使用<ion-header-bar>，<ion-content>製作單一頁面的apps (Hybrid Apps開發系列之3.4：單頁面App製作(貨幣轉換器))；不過如果要製作多頁面 (multiple views) apps，則必須套用AngularUI-Router框架。Ionic已包含angular-ui-router套件，將多頁面apps的介面瀏覽過程，轉為許多"states"；因此，只需使用適當的Ionic指令，以及angular-ur-router services，建立各個"states"的細節，便可完成多頁面apps。

顯示頁面內容指令：<ion-nav-view>

最簡單的多頁面apps是以<ion-nav-view>做為頁面的樣板，而各頁的內容再以<ion-view>標示。至於瀏覽過程中該顯示哪一頁？則由UI-Router決定.，程式中必須告知UI-Router，有幾個states，每一個頁面可能就是一個state，如下圖所示：

圖1. 定義好樣板與內容後，UI-Router會根據瀏覽歷程決定顯示內容

Hybrid Apps開發系列之3.4：單頁面App製作(貨幣轉換器)

單頁面apps是最簡單的ionic apps形式。最簡單的版面由<ion-header-bar>與<ion-content>組成。前者是標題列；後者則是內容，下圖是版面示意圖。

圖1. 單頁面版面

換句話說，在index.html的<ion-header-bar>內輸入的內容，便會成為標題的一部分，如下列的

Hybrid Apps開發系列之3.3：按鈕 (Buttons)

Ionic提供許多製作按鈕 (buttons) 外型的CSS  class設定，可參考官網CSS介紹。點選動作則是透過AngularJS指令ng-click來指定回應動作。

表單介面製作：Buttons

button基本製作方式是指定基本的class屬性值button，再指定特定的外觀class值，如下：

<button class="button button-positive">button-positive</button>
<button class="button button-block">button-block </button>
<button class="button button-clear">button-clear</button>
<button class="button button-positive button-outline">button-outline</button>
<button class="button icon-left ion-home">icon button</button>

下圖為上述各種設定結果。

圖1. 按鈕各種css設定。

Hybrid Apps開發系列之3.2：輸入欄位 (Text Input)

Ionic官網文件區有幾個與Ionic CSS與JavaScript API的區塊可供參考。

圖1.Ionic官網文件：CSS/JavaScript/Input Types/ Ionicons都會經常使用。

Hybrid Apps開發系列之3.1：下拉選單

使用ionic css元件、ionic javascript UI指令、以及AngularJS框架，可快速製作出表單介面。

表單介面製作：下拉選單(select/option)

下拉選單CSS基本範例如下 (可參考Ionic官網下拉選單)：

  <label class="item item-input item-select">
    <div class="input-label">
      選擇顏色
    </div>
    <select>
      <option>藍色</option>
      <option selected>綠色</option>
      <option>紅色</option>
    </select>
  </label>

Hybrid Apps開發系列之2：第一個專案

Ionic/Cordova專案開發環境設定好之後，選擇自己習慣的開發工具（本系列以NetBeans 8.0為開發工具），便可進行專案開發。Ionic專案可以web browser（本系列以google chrome為測試browser）檢視執行結果，所以mobile SDK可先不設定。不過，Ionic畢竟是用來開發mobile apps的框架，部分功能還是必須在行動平台上才能執行，browser上並無法看到執行結果。

建立第一個Ionic專案

開啟cmd.exe，切換到打算放置Ionic專案的資料夾，例如：

Hybrid Apps開發系列之1：Ionic/Cordova框架環境設定

Ionic Framework簡介

Ionic Framework (http://ionicframework.com/) 是一個「混合式Apps」 (Hybrid Apps) 的HTML 5開發框架。該框架延伸Google的AngularJS (https://angularjs.org/) 開發框架－擴充了許多製作頁面的功能，而與Apache Cordova搭配，則成為開發混合式Apps的利器。簡言之，Ionic / AngularJS 讓mobile apps的開發更接近以HTML 5製作網頁的方式，免去一些撰寫JavaScript / HTML製作頁面的苦工。

Ionic專案開發環境

此處以Windows環境、並以製作Android版的Apps為例，如要開發其他如iOS、Windows Phone等版本，則必須將Android SDK換成其他行動作業系統版本的SDK。