關於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雲端資料庫