【Ionic 4】防止任意存取頁面—Angular路徑保護機制Route Guards

Firebase提供email登入與註冊功能，前文(【Ionic 4】新頁面瀏覽機制：Angular Router)就註冊做介紹，一旦註冊成功，後續便可直接登入，進入個人頁面，例如dashboard等。然而，在Angular Router機制下，Ionic apps各個頁面皆有直接存取路徑，如'/login', '/dashboard'；只要輸入路徑便可前往該頁面。因此，必須有保護路徑的情境設定，例如'/dashboard'要在登入之後才允許進入。Angular Router提供了route guards，如CanActivate等界面(interface)，透過實做(implement)這些界面，便可達到保護路徑的目的。底下以Firebase登入/註冊，以及個人dashboard三個頁面為例，說明Route Guards的使用方式。

本文使用套件@angular 6.1.1，@angular/fire 5.0.2與firebase 5.5.4。@ionic-angular版本則為4.0.0-beta.12。完整專案詳見GitHub專案。

【Ionic 4】會員Email註冊－以Firebase為雲端平台（含FormBuilder表單與輸入驗證）

Firebase支援「Email/密碼登入與註冊」以及多種OAuth登入方式，如Google，Twitter，Facebook等，本文說明如何使用Firebase「Email/密碼」認證API，設計會員Email註冊功能。除此之外，註冊表單則以Reactive Forms(FormBuilder)設計，並帶有輸入驗證功能，如下圖所示。

有驗證功能的註冊表單。註冊與登出都是使用Firebase認證API

此App有註冊、HomePage兩個頁面。首頁設定為註冊頁面，註冊後，會在Cloud Firestore新增會員資料，並轉往HomePage；在HomePage按下登出又會回註冊頁面。完整程式碼在Github。製作重要步驟如下：

【Firebase】使用cloud functions建立「自動遞增」資料欄位

Firebase是專為行動應用打造的雲端平台，雖有其收費機制，但仍有提供部份免費流量。加上Angular 6也已將Firebase資料庫存取的程式碼納入專案中(@angular/fire，原為angularfire2套件)，故以ionic-angular為主體的Ionic 4 App，拿Firebase做為雲端資料庫平台，在開發上可說十分方便。

然而，Firebase新版資料庫Cloud Firestore屬於NoSQL文件資料庫(No SQL document database)，運作方式與傳統關聯式資料庫有所不同。其中最大的差異之一是Firestore沒有「自動遞增」，而是以亂數編碼產生unique id。

因此，一旦需要類似員工編號這類不能重複的流水號，在firestore資料庫裡便要自行建立「自動遞增」(auto increment) 機制。本文將介紹以cloud functions實做database trigger，在新增一筆文件時，便會觸發cloud function，在文件加入編號欄位，同時更新流水號。

前置動作

需先至Firebase控制台新增專案，並啟用Cloud Firestore資料庫。進入Firestore資料庫建立counters集合，在其下新增文件users，內有count欄位；該欄位用來儲存自動遞增流水號。另外，也建立users集合，如下圖所示：

在Firestore建立couters/users文件，內有count欄位，用以儲存自動遞增流水號

【Ionic 4】新頁面瀏覽機制：Angular Router

新版Ionic 4在頁面瀏覽(navigation)機制方面加入了Angular Router，連帶頁面權限方面也可使用Router的CanActivate等機制進行控管；Ionic舊版的push/pop方式雖仍可使用，但預期未來應不會再支援。

(本文範例完整程式碼與執行結果可參考stackblitz.com上的專案程式碼與執行結果。)

新建使用Angular Router的Ionic 4專案

為了讓新建專案使用Angular Router，Ionic CLI 4版加入新選項--type=angular。新建專案時加入此選項，便會建立Angular Routing模組檔，內有瀏覽頁面相關設定，例如新建專案：

ionic start RoutingExample blank --type=angular

則會建立模組檔： src/app/app-routing.module.ts，內有預設頁面瀏覽路徑設定：

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
];

【Ionic 3】頁面瀏覽：參數傳遞

延續Ionic 3頁面瀏覽之push/pop機制，在頁面切換時，另一個重要問題是頁面之間的「參數傳遞」。以常見的「清單列表」/「細節」頁面切換為例，除了呼叫push()外，還必須傳送如「項目編號」的參數到下一個頁面，如下圖所示：

圖1 點選清單項目，必須傳遞參數到「細節」頁面，如"id:2330"。

參數傳遞的工作，在傳送端—亦即上圖的「清單列表」頁面—可將參數以物件的形式，直接加在push()的第二個引數：

    this.navCtrl.push(DetailPage, {
      id: 2330,
      arg: some_value
    });

【Ionic 3】頁面瀏覽機制(Navigation in Ionic 3)

Ionic雖以Angular做為流程運作的基礎，然而，在頁面瀏覽 (navigation) 機制方面，卻非直接採用Angular Router模組的運作方式，而是使用「堆疊」(navigation stack)的概念。

如圖，堆疊最上方的頁面元件是目前可視頁面。當要瀏覽其他頁面元件時，則使用push()，將該元件堆到堆疊上方即可（例如上圖的push(Page3)）。相反的，回到前一頁，則使用pop()（如圖左，pop()後，回到Page2）。

【Ionic 3】建立第一個Tabs版型App

Ionic 3 App開發的入門介紹，內容包括：

  1. 安裝Ionic 3 / Cordova
  2. 建立第一個App: Tabs版型
  3. 預覽執行: ionic serve
  4. App佈署
  5. 除錯(Debugging)

安裝Ionic 3 / Cordova
以Windows環境為例

1. 先行安裝node.js，以便能以npm安裝ionic與cordova。安裝過程需注意 (1) node.js執行檔是否有加入Path環境（安裝時預設值便會加入），(2) 是否能從命令列（cmd.exe）執行node.js指令（也是預設選項）。
2. 開啟cmd，安裝cordova與ionic：

npm install -g ionic cordova

最新版本(2018/1)是cordova 8.0.0, ionic 3.19.1。

Ionic 3 is released!!!

因應JavaScript推出ES6標準的重大變革，AngularJS改版推出Angular 2，這使得Ionic也順勢改版為Ionic 2，將支援ES6的Angular 2納入。2017年1月Ionic 2.0.0正式版推出；短短兩個月便修正到2.3.0版，改正不少bugs，效能也有所提昇。不過，2.x.x版大家都還沒玩透，4月初，Ionic 3.0.0便又推出了！（官方部落格：Ionic 3.0 has Arrived! ）

究竟為何Ionic如此迅速改版？原來是因為Angular 4推出的緣故！什麼？Angular 2不是才剛出，怎麼馬上就變4.0.0??? 這就要提到SemVer了。SemVer是一種軟體版本編號的規範（詳情請參考Semantic Versioning），簡言之，軟體版本由三個數字組成，例如3.0.0，依序代表Major, Minor與Patch的編號。Angular 2做了TypeScript版本 dependency的升級，因此改Major序號為4（跳過3直接到4是因為要將Angular眾多子函式庫的版本統一到4版），這也是為什麼Ionic要從2跳至3版的主要原因。

所以，Ionic 3.0.0到底跟Ionic 2.3.0有何差別？Ionic 2的專案要注意哪些事項？根據Ionic Github網頁的Change Log，舊的2.x.x專案必須：

關於Ionic 2 RC1更新

Ionic 2於2016/10月從RC0改版到RC1，最主要的改變是app-scripts版本更新，連帶每個Ionic 2專案的設定檔package.json也有更動。建議完成下列動作：

1. 查看現有Ionic安裝版本：
   

   ionic info

   若Ionic Framework Version不是2.0.0-rc-0以上，建議移除ionic舊版、更新npm、再重新安裝ionic：

   npm uninstall -g ionic
   npm install -g npm
   npm install -g ionic cordova
   

2. 如果有Ionic 2 app專案，先切換到專案資料夾，再執行下列指令：

   npm install @ionic/app-scripts@latest --save-dev

   上述指令會更新package.json裡的"dependencies"各個packages的版本，並在"devDependencies"加入app-scripts項目。

詳情可參考Ionic 2 RC Weekend Updates。

Ionic 2系列002：Ionic2專案細節初探

延續上篇（Ionic 2系列001：第一個Ionic 2專案）當空白專案建好之後，例如建了BlankApp:

ionic start BlankApp blank --v2

則在BlankApp/src下便有了Ionic 2的專案結構：

Ionic 2專案結構，程式碼位於src下。

其中index.html則是app的進入點；app、pages則是主要程式碼所在。app資料夾放的是root component相關程式碼，root component是index.html第一個載入的元件。而pages資料夾內，則為每一個頁面分別建立一個資料夾。

Ionic 2系列001：第一個Ionic 2專案

JavaScript功能持續更新著，瀏覽器也不斷追著JavaScript新功能在跑。一些受歡迎的JavaScript framework當然也得因應這些改變，而推出更新的版本。最近，JavaScript最大的改變應該就是正式加入「物件」相關語法－也就是俗稱的ES6（ECMAScript 6 或稱為ECMAScript 2015）。

但這對以Ionic框架開發hybrid apps有何影響？簡言之，因應ES6的變革，Angular推出了Angular 2，Ionic也順勢推出Ionic 2（2016年10月已過beta版，來到Ionic 2.0RC1），Ionic apps的開發也完全物件化，整體改變相當巨大。因此，接下來的文章將會以Ionic 2的介紹為主。

Ionic 2與Ionic 1的差異

安裝部分仍可參考之前的舊文Hybrid Apps開發系列之1：Ionic/Cordova框架環境設定，但如果之前已經安裝過node.js，必須先更新npm，說明如下：

Ionic App Views製作：ng指令與$scope變數

Ionic apps透過angular.module().config()設定每個頁面組態，以'templateUrl'指定頁面HTML檔所在，以'controller'指定該頁面對應的controller，例如下列程式碼便設定了'home' state的url、html檔所在位置、以及controller名稱：

//...
$stateProvider.state('home', {
                        url: '/home',
                        templateUrl: 'templates/home.html',
                        controller: 'HomeCtrl'
                    })
//...

然而，當要在頁面顯示一些動態資料－例如從資料庫讀取出來的內容、或是處理表單輸入的內容等動作時，還必須要靠「資料繫結」(data binding) 的輔助，才能更容易的達成目的。因此，AngularJS提供$scope變數，做為資料繫結之用。簡單的說，資料繫結(data binding)是指：先在controller中以$scope變數定義資料模型、或是函式，例如：

   $scope.name = {}; // 資料模型物件
   $scope.login = function() {
        // 函式主體
   }

Ionic App 程式結構之一：Views、Controllers、Configuration

如前文Hybrid Apps開發系列之2：第一個專案所說，Ionic專案建立之後，有app.js, index.html等重要檔案。事實上，Ionic apps有其運作機制，其中每一個app都會包括: views、controllers、與app設定（configuration）等部分，而視情況，還會建立services/factories，作為app資料服務串接之用。底下先就views、controllers、與app整體設定進行說明。

Ionic views、controllers與組態設定

Ionic apps有關views, controllers,組態設定(configuration)等基本運作機制，及其與index.html、app.js等檔案的關聯如下圖所示：

圖1. Ionic app的view(如home.html及page2.html)與controller(app.js)。index.html則做為app的模板(template)

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