SenchaとバックエンドRESTサービス：Modus CreateではどうやってアプリをDreamFactory接続しているか

こんにちは、ゼノフィnakamuraです。

この記事は、US Sencha社ブログ Sencha and Backend REST Services: How Modus Create Connects an App to DreamFactory を翻訳したものです。

はじめに

DreamFactory この記事を読んでいるなら、おそらくあなたはSencha TouchとExt JSのWebアプリケーションを作成する能力をすでにご存知ですね。しかし、バックエンドのオプションは何ですか？モバイルアプリケーションの競争が激しくなってくると、アプリケーションのホスティングと管理に対して、REST APIを提供するバックエンドサービスプラットフォームを利用する方法がとても有効になってきます。これは高価なサーバーサイド開発の必要性を排除し、素晴らしいアプリケーション開発に集中できるようになります。

このブログ投稿では、Modus Createが Sencha Touch 2とExt JS 4で作成された企業アドレス帳アプリケーションとDreamFactoryのオープンソースバックエンドサービスプラットフォームをどのように接続するか説明します。DreamFactoryプラットフォームの各インスタンスを「DSP」(DreamFactory Services Platformの略)と呼びます。ご覧の通り、各DSPはデータベースとアプリケーション開発の処理を単純化するフル機能のREST APIを提供します。

アプリケーション概要

Modus Createは既存のアドレス帳のアプリケーションを持っており、それにいくつかの変更を加えて、DreamFactoryを利用するためにバックエンドにポートしたかったのです。アドレス帳のデスクトップ版ではExt JSを利用しますので、連絡先とグループを管理するコンソールとして機能することを意図しています。モバイル版ではスマホやタブレットのそれぞれ異なるプロファイルでSencha Touch 2フレームワークを利用しています。以下は各デバイスのスクリーンショットです。

このアプリケーションの完全コードはGitHubで利用可能です。ここと重複していないアプリケーションの関連情報がREADMEファイルにあります。/docroot/index.html には、デバイスの種類の認識や /desktop/index.html または /mobile/index.htmlにリダイレクトするために、JavaScriptがあります。これはコードの基本的なレイアウトで、Ext JSとSencha Touchのアプリケーションのそれぞれのエントリポイントです。

このブログ投稿では、REST APIと通信するコードに集中します。/docroot/common/DreamFactory.js で定義されたcommon.DreamFactoryクラスを使うとDreamFactory APIにとってふさわしいラッパー関数を提供するができます。このクラスはSencha TouchとExt JSの両方が動作します。この仕組みを理解するために、データベースのクエリの作り方と認証の方法をご覧ください。

ログイン (POST /rest/user/session)

アプリケーションを起動すると、ログインを要求されます。これは common.DreamFactory.login()の結果です。

login : function (email, password, callback) {
            rpc({
                url     : 'user/session/',
                params   : {
                    email : email,
                    password : password
                },
                callback : callback
            });
        }
 
POST
https://dsp-test.cloud.dreamfactory.com/rest/user/session/

この関数はユーザーが入力したメールアドレスとパスワードはもちろん、ログインリクエストのために相対urlにユーティリティfunction rpc() も呼び出します。 rpc() が Ext.Ajax.Request() を呼び出して、それにPOSTするURLと送信されるデータをパスします。ベースURL（ /rest の前の部分) は生成した時にDSPに付けた名前に基づいています。リクエストが通常のサクセスまたはエラー処理を完了したときにコールバックが呼び出されます。

function rpc(config) {
        var method = config.method,
            headers = {
                'X-Application-Name' : 'add'
            };
 
//      if REST tunneling is required, then uncomment the following lines
//      if (method === 'DELETE' || method === 'MERGE') {
//          headers['X-HTTP-METHOD'] = method;
//          method = 'POST';
//      }
 
    Ext.Ajax.request({
        url     : common.DreamFactory.serviceUrl + 'rest/' + config.url,
        method   : method,
        headers  : headers,
        jsonData : config.params,
        success  : function (response) {
            var o = Ext.decode(response.responseText);
            if (config.callback) {
                config.callback(o);
            }
            else {
                console.dir(o);
            }
        },
        failure  : function (response) {
            var o = Ext.decode(response.responseText);
            console.dir(o);
            if (config.callback) {
                config.callback(o);
            }
        }
    });
}

一つの重要なステップは、アプリケーションがDreamFactoryの管理コンソールで生成されたときに定義されたアプリケーションのAPI名に値がセットされている状態で 'X-Application-Name' かより好ましい 'X-DreamFactory-Application-Name' というHTTPヘッダーを追加することです。私達のケースでしたら、アプリケーションの名前は「add」になります：

1	'X-DreamFactory-Application-Name' : 'add'

ログインに成功するとsession_idが返されます。以後、リクエストは次のようにこのSession IDと同じヘッダー値をセットできます：

1	'X-DreamFactory-Session-Token : 'ps72mgce0ul2vj5apv6q8sntr8fne2je'

またその処理は、ブラウザのクッキーに依存しています。もしユーザーにログインの要求をしたくない場合は、認証なしでAPIにアクセスを与えるシステムで「Guest」という役割で設定できます。

連絡先の取得 (GET /rest/db/Contacts)

さて、ログインが完了したので、連絡先の一覧表を取得するためにデータベースにアクセスできます。このリクエストを扱う common.DreamFactory.filterRecords() という関数があります。全てのレコードを空にするフィルターparamをセットすると、”firstname=’bob'” といったようなフィルター文字列を指定することができます。クエリを作成するコードを見てみると、理解しやすい他のオプションもあります。全てのオプションはDSP管理コンソール内にあるライブAPI docsにあります。 login() と同じく filterRecords() も rpc() を呼び出して、実際のAJAXリクエストを行います。

filterRecords : function (table, options, callback) {
            var url = 'db/' + tableName(table),
                args = buildQuery(options);
 
        if (args.length) {
            url += '?' + args.join('&');
        }
 
        rpc({
            url     : url,
            params   : options.params,
            callback : callback || options.callback
        });
    }
 
GET
https://dsp-test.cloud.dreamfactory.com/rest/db/Contacts?include_count=true&filter=&offset=0&limit=25

createRecordsや updateRecordsやdeleteRecordsのような他のCRUD関数があります。各関数の詳しい情報は /docroot/common/DreamFactory.js をご覧ください。

ログアウト (DELETE /rest/user/session)

ログアウトするには、生成されたセッションを削除するだけです。X-DreamFactory-Application-Name ヘッダーを忘れないで下さい。

logout : function (callback) {
            rpc({
                url     : 'user/session/',
                method   : 'DELETE',
                callback : callback
            });
        }
 
DELETE
https://dsp-test.cloud.dreamfactory.com/rest/user/session

スキーマの管理

管理コンソール内にManage Schemaタブを利用してDSPにJSONスキーマをインポートできます。このように、このアドレス帳アプリケーションのスキーマが生成されました。Contacts、Contact Infos、Contact Groups、Contact Relationshipsがあります。各連絡先は一つまたは複数の関連情報（家、仕事、その他）を持つことができます。各連絡先はcontact relationshipsを利用し、親グループにリンクされてます。このアプリケーションのスキーマを定義するJSONファイル /schema をご覧下さい。APIは親オブジェクトに対するクエリの結果に全ての子レコードを含めて、子を変更し、単一のAPI呼び出しで全ての子をアップデートする機能も提供しています。

リソース

Senchaのアプリケーションを作成している場合、RESTとバックエンドサービスプラットフォームを利用するかどうかぜひ検討して下さい。ここでDreamFactoryのバックエンドで利用可能になるものを少しだけ紹介しました。NoSQLデータ、バイナリドキュメント、ユーザーパーミッション、および外部サービスなど他のサービスも利用できます。詳しく知りたい、または無料体験したいという方は次のリンクをご覧下さい。このブログ投稿を読んでいただいてありがとうございました！あなたのアプリケーションに幸あれ！

一般情報とドキュメンテーション
DreamFactoryのアカウントに登録して、DSPを管理する。
DreamFactoryブログにDreamFactoryの利用に関する情報があります。CORS、NoSQLサポート、APIの基本、外部サービスの統合や様々な記事が載っています！
それぞれの新しいDSPに付いてくるSencha Touch To Do Listアプリケーションについての詳細
REST APIを試すには、管理コンソール内のAPI Documentationタブにアクセスして下さい。Swaggerで作成されたライブAPIドキュメンテーションを提供しています。

Sencha Blog