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提供雲端資料庫服務

此處以圖1的"todo" App為例，點選todo App，再切換到Core，從該介面便可為App建立雲端資料庫。

前置作業(2/4)：建立 Parse雲端資料庫

Parse雲端資料庫是NoSQL，而非關聯式資料庫，其資料庫是由classes組成，每個class各有自己的屬性（下圖+Col可增加屬性），介面如下圖所示：

圖2. Parse雲端資料庫介面

圖2左上角顯示todo App建立了一個Todo class，內有三筆資料。Todo class除了預設的(objectId, createdAt, updatedAt, ACL) 四個屬性之外，另外新增了title, message兩個String類別的屬性，因此共有6個屬性。之後，Ionic專案建立的app將透過Parse REST API存取此資料集。

前置作業(3/4)：瞭解Parse REST API格式

下圖是存取物件的API：

圖3. Parse REST API (https://parse.com/docs/rest)

所有功能都以 "https://api.parse.com"開頭，再串接上圖的URL。不過，不同動作使用的HTTP方法不盡相同，從POST, GET, 到DELETE都有（如HTTP Verb一欄），而且在http header部分還要另加一些項目才行，以Creating Objects為例，官網文件以curl格式說明此動作需要在header加上三個項目X-Parse-Application-Id，X-Parse-REST-API-Key，以及Content-Type：

curl -X POST \
  -H "X-Parse-Application-Id: 你的Application Id" \
  -H "X-Parse-REST-API-Key: 你的REST API Key" \
  -H "Content-Type: application/json" \
  -d '{"score":1337,"playerName":"Sean Plott","cheatMode":false}' \
  https://api.parse.com/1/classes/GameScore

因此，將上述curl改為AngularJS的寫法，則必須以$http呼叫REST API，同時設定額外的header項目才行：

var data={"score":1337,"playerName":"Sean Plott","cheatMode":false};
... [略] ...
$scope.getAll = function ($http) {
    $http.post('https://api.parse.com/1/classes/GameScore', data, {
        headers: {'X-Parse-Application-Id': "你的Application ID",
                  'X-Parse-REST-API-Key': "你的REST-API-Key",
                  'Content-Type': 'application/json'
        }
    });
}

其他API的curl範例請參考https://parse.com/docs/rest。

前置作業(4/4)：將Application Keys加入Ionic專案中

從Dashboard todo專案處選取Keys，會進入Application Keys畫面。以REST API連線而言，需要用到Application ID與REST API Key。此兩個字串在每一次呼叫$http服務時都必須使用，如前置作業(3/4)的程式碼片段第5-6行所示。如圖4將此兩個字串複製起來，加到Ionic專案中。

圖4. Application Keys

由於此兩個Keys用在許多地方，故可加入js/services,js，並以.value()定義為常數，程式碼如下：

angular.module('starter.services', [])
    .factory(...[略]...
    ...[略]...
    .value('PARSE_KEYS', {
       APP_ID: '7h9gDEasc63I84aBqO6iVn.....',
       REST_API_KEY: 'luGnIWHUb9FS53uvA......'
    })

之後變可以PARSE_KEYS.APP_ID與PARSE_KEYS.REST_API_KEY的方式，使用這個key值。

修改記事App

Hybrid Apps開發系列之5.3：使用Cordova外掛存取SQLite資料庫一文曾以SQLite做為記事App的資料庫，現在可改以前置作業(2/4)建立的雲端資料庫儲存資料。

js/app.js檔因不需開啟資料庫的緣故，變得只需要設定states即可：
Parse雲端資料庫的部份實作於js/services.js，同樣將共通的部份寫成DBA服務，Todo類別的存取則另外以.factory()建立todoParse服務：

• 第2-43行：DBA服務。如圖3不同的物件存取功能，會用到不同的http傳送方法，因此以switch方式決定使用的方法，以及所需參數。
• 第7-14行：HTTP GET，取出物件或進行查詢時使用。
• 第15-22行：HTTP POST，建立物件時使用，因此參數多了data—亦即要寫入雲端的資料內容。
• 第23-30行：HTTP PUT，更新物件內容時使用。
• 第31-38行：HTTP DELETE，刪除物件時使用。
• 關於第5行$q.defer()與回傳值q.promise等與非同步執行有關的說明，請參見Hybrid Apps開發系列之5.3：使用Cordova外掛存取SQLite資料庫一文。
• 第44-75行：Todo class資料存取服務。資料存取包含：建立、讀取、更新、刪除等CRUD資料存取基本功能，分別對應到getAll, get(objectId), create(object), update(object), delete(objectId)等函式。
• 第75-79行：Parse API Key常數。請記得改為自己的App id。
• 第80行：Parse API基本網址常數，隨著不同存取功能，可能需要在此常數之後加上objectId。

頁面部份原本與5.3範例大致相同，差別有：

1. home.html各筆資料的超連結設定改用雲端資料庫的objectId欄位值。
2. edit.html, addNote.html要做表單驗證，確認各個欄位確實有值，因此加入驗證程式碼。

templates/home.html

templates/edit.html

templates/addNote.html

最後js/controllers.js如下：