2014年2月6日

MonacaバックエンドのAngularJSモジュールを作りました

こんにちは、中川です。

MonacaバックエンドをAngularJSから簡単に利用できるモジュールを作成しました。

■ Monacaバックエンドとは?

http://docs.monaca.mobi/en/manual/backend_index/

アプリ内でのユーザー管理やプッシュ通知送信を行うには、通常の場合これらの機能を提供するサーバーサイドのプログラムを自分で用意する必要があります。
Monacaバックエンドはクラウドサービスとしてサーバーサイドの機能を提供することで、アプリ開発者がこれらの準備を行わなくても済むようにしています。
すなわち、Monacaバックエンドを使うことで、アプリ開発者はサーバーやサーバーサイドのプログラムを自分自身で用意することなく、バックエンドの機能を使うことができます。

■ AngularJSで利用する場合の問題点

Monacaバックエンドを利用するために、jQueryを利用したJavaScript APIを提供しています。
http://docs.monaca.mobi/ja/reference/javascript/cloud/

このライブラリではjQueryを利用しているため、AngularJSのフレームワークのアプリケーションサイクルの中では少々使いにくいものとなっています。
jQueryのajaxでクラウドからデータを取得してAngularJSのscopeに渡しても、
ビューが自動的に変わらないため、$scope.$applyをコールするなどの一手間を加える必要があります。
AngularJSの強力なメリットのデータバインディングの良さが半減してしまっています。

■ monaca-cloud-angular.js

https://github.com/monaca/monaca-cloud-angular

AngularJSのモジュールとして、MonacaバックエンドAPIライブラリをラッピングしています。
オリジナルのMonacaバックエンドAPIとインターフェースはほとんど同じまま、AngularJSで違和感なく利用できるようにしています。

■ 使い方

monaca-cloud-angular.jsをダウンロードします。

Monaca IDEでmonaca-cloud.jsを組み込むように設定した、plugin-loader.jsとangular.js(もしくは、Onsen UI)を読み込みます。
※このあたりの設定は、先日のAngularJSのサービスを使ってバックエンドに接続するサンプルを作ってみたをご参照ください。

その後、monaca-cloud-angular.jsをscriptタグで読み込みます。


<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <script src="plugins/plugin-loader.js"></script>
    <script src="js/angular.js"></script>
    <script src="js/monaca-cloud-angular.js"></script>
    <script src="js/main.js"></script>
</head>
<body ng-controller="MainCtrl">
<pre>
{{result|json}}
--------------------------
{{error|json}}
</pre>
</body>
</html>

main.jsで monaca.cloud' モジュールを利用するようにします。
そして、AngularJSのDI機能を利用して、'MonacaBackend'サービスを引数で受け取ります。


// main.js
var app = angular.module('app', ['monaca.cloud']);
app.controller('MainCtrl', function($scope, MonacaBackend) {
    MonacaBackend.User.register('myuser', 'mypass', {'age': 18}).then(
        function(result) {
            console.log(result);
            $scope.result = result;
        },
        function(error) {
            console.log(error);
            $scope.error = error;
        }
    );
});

オリジナル版では、done, failを使う、jQueryのpromiseでしたが、
AngularJSの$qサービスのPromiseを返すようになっていますので、thenを使って成功と失敗の処理を記述します。
$qの詳細については、AngularJSのドキュメント ( http://docs.angularjs.org/api/ng.$q ) を確認してみてください。

■ オリジナル版との違い

オリジナル版との違いは以下となります。


・monaca.cloud => MonacaBackend
・done, fail, always -> then, finally
・monaca.cloud.User._oid => MonacaBackend.User.getOid()
・item.update() => MonacaBackend.CollectionItem.update(item)
・item.getPermission() => MonacaBackend.CollectionItem.getPermission(item)
・item.updatePermission(permission) => MonacaBackend.CollectionItem.updatePermission(item, permission)
・item.delete() => MonacaBackend.CollectionItem.delete(item)