目次


エンタープライズ規模の iOS/Android アプリ向けカスタム API を作成する

IBM Bluemix のクラウド・サービスとサンプル保険アプリを使用したステップ・バイ・ステップの説明

Comments

保険業界のクライアントは、顧客とのやりとりのために新しいモバイル・チャネルを作成し、カスタム API を提供することで新たな API エコノミーを活用する傾向にあります。このようなカスタム API を使用する Web アプリケーションやモバイル・アプリは、アジリティーと応答性が高くなり、タイム・ツー・マーケットも短縮されます。

カスタム API を IBM Bluemix クラウド・プラットフォーム上で開発すれば、インフラストラクチャーの迅速なプロビジョニングと、ランタイムのエラスティック (弾力的) な動作が可能になります。

このチュートリアルでは、Bluemix 上で Node.js を使って API を開発する方法、データの保管やデータへのアクセスに IBM Mobile Data サービスを利用する方法、そして Android/iOS モバイル・アプリにプッシュ通知を送信する方法を紹介します。チュートリアルで作成するサンプル・アプリケーションは、Green Insurance という架空の保険会社のアプリケーションで、保険アドバイザーと販売窓口担当者を対象としています。このアプリケーションを使用すると、退職金や年金を対象とした保険商品を検索することや、保険契約申請手続きの状況を追跡すること、さらには保険契約申請手続きの状況が更新された時点でプッシュ通知を受け取ること、申請手続きの概要をダウンロードすることなどができます。

アプリケーションを作成するために必要となるもの

  • DevOps Services アカウント (アプリケーションのコードを入手するために必要です)
  • Bluemix アカウント (Node.js ランタイムを使用するため、Bluemix のクラウド・サービスをアプリケーションに追加するため、そしてアプリケーションをデプロイするために必要になります)
  • NoSQL データベース (MongoDB など) の知識
  • Cloud Foundry コマンド・ライン・ツール cf の知識
  • Android および iOS 開発の知識
  • Node.js 開発の知識

ステップ 1. モバイル・クラウド・アプリケーションを作成する

  1. Bluemix にログインします。
  2. メイン・メニューで「CATALOG (カタログ)」をクリックします。
  3. 「Boilerplates (ボイラープレート)」から「Mobile Cloud (モバイル・クラウド)」を選択します。Mobile Cloud ボイラープレートを利用すると、共有データ、プッシュ、そしてサーバー・サイド・スクリプトを使用するモバイル・アプリを短時間で開発することができます。このボイラープレートには、Android、iOS、および JavaScript のそれぞれに対応する SDK も組み込まれています。
  4. Mobile Cloud ボイラープレートを利用してアプリケーションを作成し、アプリケーションに一意の名前を指定します。ホストには、<application name>.mybluemix.net という形の名前を付けます。「CREATE (作成)」をクリックします。Bluemix の Mobile Cloud ボイラープレートのスクリーンショット
    Bluemix の Mobile Cloud ボイラープレートのスクリーンショット

注: アプリケーション名は組織 (スペース) 内で一意であること、ホスト名は Bluemix 全体で一意であることが必須です。デフォルトでは、アプリケーション名として入力した名前が自動的にホスト名として追加されます。モバイル・アプリは、この一意のホスト名とアプリケーション名を使用して Web API を利用します。

皆さんは、アプリケーション名として GreenInsurance を使用しても、他の名前を使用しても構いません。ただし、GreenInsurance をアプリケーション名として使用する場合は、これ以外の一意の名前をホスト名として指定する必要があります。次のセクションでは、<application name> は GreenInsurance またはその他のユーザー指定のアプリケーション名を表し、<host name> は一意のホスト名を表します。

ステップ 2. サーバー・サイドの API を開発する

アプリケーションが作成された後は、緑色の「正常性」インジケーターによってアプリケーションのステータスが示されます。このアプリケーションの「Overview (概要)」ページにモバイル・オプションとして表示される「App Key (アプリ Key)」「App Secret (アプリ・シークレット)」は、モバイル・アプリからサーバー・サイドの API に接続する際に使用します。

  1. このチュートリアルの最初のほうにある「コードを入手する」ボタンをクリックして、IBM DevOps Services にアクセスします。IBM ID を入力してログインした後、「EDIT CODE (コードの編集)」をクリックし、「File (ファイル)」 > 「Export (エクスポート)」 > 「zip」の順にクリックします。
  2. app.js ファイルでは、Cloud Foundry がユーザーに提供するサービスを使用して、アプリ・シークレットとアプリの経路にアクセスすることができます。
    コマンド・プロンプトで、以下の cf コマンドを使用してユーザー提供サービスを作成します。これらのコマンドを実行すると、secret プロパティーの値を入力するよう求めるプロンプトが出されます。
    cf cups applicationId -p secret
    cf cups applicationSecret -p secret
  3. app.js 内のユーザー提供サービスの値にアクセスします。
    var express= require('express'),
        ibmbluemix = require('ibmbluemix'),
        ibmdata    = require('ibmdata'),
        
        cfenv =  require("cfenv"),
        appEnv = cfenv.getAppEnv(),
     
        approutes = appEnv.getService("applicationId"),
        appids = appEnv.getService("applicationSecret") ,
        myApplicationroute = JSON.stringify(approutes.credentials.secret) ,
        myApplicationid = JSON.stringify(appids.credentials.secret),
     
            config  = {
                applicationRoute : myApplicationroute,
                applicationId : myApplicationid
            };
  4. Mobile Cloud サービスのコア SDK およびサービス SDK を初期化します。
    ibmbluemix.initialize(config);
    var logger = ibmbluemix.getLogger();
    
    var namespace = require('express-namespace');
    var app   = express();
    //redirect to cloudcode doc page when accessing the root context
    app.get('/', function(req, res){
            res.sendfile('public/index.html');
    });
    // init service sdks
    app.use(function(req, res, next) {
        logger.info('init service sdks');
        req.data = ibmdata.initializeService(req);
        req.logger = logger;
        next();
    });
  5. 早速、最初の API を作成します。email id がパラメーターとして渡されると、この API によって、モバイル・データ・オブジェクト UserInformation からユーザー・データが取得されます。この API は、モバイル・アプリでのユーザー認証に使用します。
    app.get('/user/:id',function(req,res) {
                    var query = req.data.Query.ofType("UserInformation");
                    query.find({email: req.params.id}, {limit: 1}).done(function(user) {
                        if (user.length==1) {
                              res.json(user);
                        }
                        else {
                              res.status(404);
                              res.send("No such user found");
                        }
                     });
  6. 次の API には 2 つのバリエーションがあります。一方のバリエーションでは、モバイル・データ・オブジェクト ProductCatalog からすべての保険商品データを取得します。もう一方のバリエーションでは、モバイル・アプリで特定の製品が選択されると、その商品 ID に対応する商品情報を取得します。
    app.get('/products',function(req,res) {
                var query = req.data.Query.ofType("Productcatalog");
                query.find().done(function(products) {
                    res.json(products);
                });
            });
            app.get('/product/:id',function(req,res) {
                var query = req.data.Query.ofType("Productcatalog");
                query.find({productcode: req.params.id}, {limit: 1}).done(function(product) {
                    if (product.length==1) {
                        res.json(product);
                    }
                    else {
                        res.status(404);
                        res.send("No such Product found");
                    }
                });
            });
  7. 次の API では、保険契約申請手続き情報を取得します。ユーザーがモバイル・アプリにログインすると、デフォルトでそのユーザーが担当する申請手続きのすべてが取得されて、それぞれの詳細と一緒に表示されます。
    app.get('/eAPP/:id',function(req,res) {
    
                var query = req.data.Query.ofType("eAppStatus");
    
                query.find({email: req.params.id}, {limit: 10}).done(function(eAPP) {
                    if (eAPP.length <=10) {
                        res.json(eAPP);
    
                         console.log('Got Data');
                    }
                    else {
                        res.status(404);
                        res.send("No such eAPP found");
                    }
                });
            });
  8. 次の API では、特定の申請手続きに関する詳細を取得します。ユーザーがモバイル・アプリで特定の申請手続きをクリックすると、パラメーターとして application id が渡されて、この API が呼び出されます。
    app.get('/eAPPid/:id',function(req,res) {
    
                var query = req.data.Query.ofType("eAppStatus");
                query.find({appNo: req.params.id}, {limit: 1}).done(function(eAPP) {
                    if (eAPP.length==1) {
                        res.json(eAPP);
                    }
                    else {
                        res.status(404);
                        res.send("No such eAPP found with this application id");
                    }
                });
            });
  9. package.json ファイルを確認します。このファイルに、すべての依存モジュールが記載されています。
    {
       "author": "IBM",
           "engines": {
                "node": "0.10.28"
            },
            "dependencies": {
          "express": "4.*",
          "express-namespace":"*",   
          "body-parser": "*",
          "ibmsecurity": "*",
          "twilio": "*",
          "cfenv": "0.2.x",
          "ibmbluemix":"*",
          "ibmdata":"*",
          "ibmpush":"*"
         },
       "devDependencies": {
        "grunt": "0.4.x",
        "grunt-simple-mocha": "0.4.0",
        "load-grunt-tasks": "0.3.x",   
        "time-grunt": "0.2.x",
        "chai": "*",
        "mocha": "*",
        "when": "*",
        "request": "*",
        "assert":"*"
      },
        "repository" : {
      },
       "description": "Starts a server which listens for user modules invocation requests.",
       "licse": "IBM",
       "main": "app.js"
    }
  10. manifest.yml ファイルを確認します。このファイルには、サービスの他、ホスト、ドメイン、コマンドの詳細が記載されています。
    applications:
            - services:
                - <application name>:MAS
                - <application name>:Push
                - G<application name>:MobileData
                disk_quota: 1024M
                host: <host name of your application>
                name: G<name of your application>
                command: node app.js
                path: .
                domain: mybluemix.net
                instances: 1
                memory: 128M
  11. これらの API は、curl ユーティリティーを使用してテストすることができます。例えば、すべての保険商品を表示するには、コマンド・プロンプトから以下のコマンドを使用して API を呼び出します。<Application Secret Key><Application Id> は、皆さんが Bluemix で作成したアプリケーションの ID (アプリ・シークレット、およびアプリ・キー) に置き換えてください。
    curl -i -H "IBM-Application-Secret: <Application Secret Key>"
            -H "Content-Type: application/json"
            https://<host name>/<application name>/v1/apps/<Application Id>/products

ステップ 3. cf ユーティリティーを使用して Node.js モジュールを Bluemix にデプロイする

コードをデプロイするために、環境を構築して Bluemix に接続します。Cloud Foundry CLI をまだダウンロードしていない場合は、ダウンロードします。

  1. Bluemix に接続できることを確認します。コマンド・プロンプトで、「cf api https://api.ng.bluemix.net」と入力します。これで、API エンドポイントがセットアップされます。
  2. コマンド・プロンプトから cf login コマンドを実行し、IBM ID とパスワードを指定して Bluemix にログインします。
  3. コマンド・プロントで、アプリケーションの Node.js モジュールを開発したフォルダーにカレント・ディレクトリーを変更し、コマンド cf push <application name> -m 512m を入力します。

このコマンドにより、ローカル環境から Bluemix にソース・コードと構成ファイルのすべてがコピーされ、ソース・コードがビルドされて Bluemix にデプロイされます。コードにエラーがなく、すべての依存関係が適切に記述されていれば、アプリケーションが実行中の状態になります。この状態は、コマンド・プロンプト・ウィンドウで確認することができます。Bluemix ダッシュボードでは、アプリケーションの正常性のステータスが緑色で示されます。

ステップ 4. モバイル・データ・オブジェクトを作成して、オブジェクトにデータをロードする

  1. ダッシュボードで、「Mobile Data」サービスをクリックし、「Manage Data (データの管理)」タブを表示します。
  2. 「Import Data (データのインポート)」の横にある青色の円をクリックし、アプリケーションを実行するために必要なデータが含まれている 3 つの必須 JSON ファイルをロードします。
  3. 商品の詳細、保険契約申請手続きの状況、ユーザー ID およびパスワードの詳細がそれぞれ含まれる JSON ファイルをインポートします。複雑にならないように、サンプル・アプリケーションではトランザクション・データの一部を JSON オブジェクトとして直接 IBM Mobile Data にロードしていますが、実際のアプリケーションでは、トランザクション・データがエンタープライズ・リレーショナル・データベースに保管されていることが考えられます。その場合、適切なサービス (例えば、Cloud Integration サービス) を利用してデータを統合することができます。以下は、商品の詳細が含まれるサンプル JSON データ・ファイルです。
    [
      {
         "productcode":"1",
         "productname":"REPP",
         "productdescription":"Royal Empower Pension Plan",
         "productdetail":"A plan designed especially to ensure that you remain in control of
                          your destiny, even during the second innings of life. A unit 
                          linked, non-participating pension plan it is simple, hassle-free 
                          and helps you accumulate your premiums and the investment returns 
                          into a corpus for your retirement so that you can focus on your
                          goals, and enhance your savings for a secure future",
         "producttype":"Retirement Solution",
         "launchDate":"1st OCtober 2014",
         "jurisdiction":"13",
         "Province":"ALL" 	
       },
    
       {
         "productcode":"2",
         "productname":"LRPP",
         "productdescription":"Life Link Retirement Pension Plan",
         "productdetail":"A single-premium retirement pension policy that provides you the 
                          opportunity to enjoy regular income post retirement by paying just 
                          a single premium. This product comes with the Pension Return 
                          Guarantee Fund (PRGF) that provides you a minimum guaranteed  
                          return by way of a guaranteed NAV at the time of vesting.",
         "producttype":"Retirement Solution",
         "launchDate":"1st OCtober 2014",
         "jurisdiction":"4",
          "Province":"WB,MH,TN"
    
        },
    
       {
         "productcode":"3",
         "productname":"GLIP",
         "productdescription":"Guaranteed Lifetime Income Plan",
         "productdetail":"A fixed amount guaranteed at the policy inception, will be paid to 
                          you throughout your life.",
         "producttype":"Insurance",
         "launchDate":"1st December 2014",
         "jurisdiction":"11", 
         "Province":"ALL"
       }
      ]
  4. それぞれの JSON ファイルを選択して、新しいクラス名を指定するか、既存のクラスを選択してから、「Import (インポート)」をクリックします。
    3 つの必須 JSON ファイルをインポートする画面のスクリーンショット
    3 つの必須 JSON ファイルをインポートする画面のスクリーンショット

    3 つの必須 JSON ファイルは、以下に示されているクラス名でロードされます。前のステップで作成した Web API は、これらのクラスを使用してデータを取得し、そのデータをモバイル・アプリに配信します。本番シナリオでは、このデータはファイアウォールで保護されたエンタープライズ・データベースに保管されるため、Bluemix からこのデータにアクセスするには、このデータベースへのアクセス用に公開されている API を使用することになります。例えば、Bluemix Cloud Integration サービスを利用すると、クラウド・サービスを企業の基幹システムに統合することができます。Bluemix Cloud Integration は、バックエンドの基幹システムを、アプリケーションが使用可能な REST API として公開します。バックエンドの基幹システムを公開するための API が使用するデータ・クラスのスクリーンショット
    バックエンドの基幹システムを公開するための API が使用するデータ・クラスのスクリーンショット

ステップ 5. Android アプリケーションを作成して API を使用する

  1. Android プラグインをインストールします。Bluemix クライアントから jar ファイルをダウンロードして libs フォルダー内に配置します。プッシュ通知用の jar は、これらの jar ファイルに含まれています。必須の jar ファイル
  2. プッシュ通知用の基本的な権限を追加します。AndroidManifest.xml ファイルに基本的なネットワーク機能および権限として、以下の権限を含めます。
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.RECORD_VIDEO" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.GET_TASKS" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE"/>
    <uses-permission android:name="com.example.<aplication name>.permission.C2D_MESSAGE" />
    <uses-permission android:name="com.google.android.c2dm.permission.RECEIVE" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    <uses-permission android:name="android.permission.USE_CREDENTIALS" />
  3. res/values フォルダー内にある string.xml ファイルに、アプリ ID とセキュリティー・キーを設定します。また、以下の Bluemix API の URL を string.xml に追加します。
         <!-- IBM Key -->
    <string name="IBMKey">f211a12c92d2dccaf3a2f8cacd43c2e2f518c2f6</string>
    
    <!-- URLs -->
    <string name="dashboardurl">
          https://<host name>/<application name>/v1/apps/<app Id>/eAPP/</string>
    <string name="producturl">
          https://<host name>/<application name>/v1/apps/<app id>/products</string>
    <string name="viewproducturl">
          https://<host name>/<application name>/v1/apps/<app id>/eAPPid/</string>
    <string name="loginurl">
          https://<host name>/<application name>/v1/apps/9<app id>/user</string>
  4. Bluemix で公開された Web API を使用するために、Activity クラスで非同期呼び出しを行います。LongRunningGetIO 非同期クラスが IBM Mobile Data サービスを呼び出すと、後は getASCIIContentFromEntity() メソッドがすべての処理を行って、該当するデータを Android アプリに表示します。private class LongRunningGetIO は、AsyncTask <String, Void, String> を継承します。
    protected String getASCIIContentFromEntity(HttpEntity entity) throws 
                IllegalStateException, IOException {
           InputStream in = entity.getContent();
           StringBuffer out = new StringBuffer();
           int n = 1;
           while (n>0) {
           byte[] b = new byte[4096];
           n =  in.read(b);
           if (n>0) out.append(new String(b, 0, n));
           }
           return out.toString();
               }
  5. プッシュ通知の Google API プロジェクト番号と GCM (Google Cloud Messaging) API キーを入手します。それには、「Push の概要」で説明しているステップに従ってください。
  6. プッシュ通知を使用して Google Play サービスをプロジェクトに追加します。それには、「Setting Up Google Play Services」で説明しているステップに従ってください。
  7. 以上のステップで構成を完了すると、Android プロジェクトの依存関係は以下のようになります。Android プロジェクトの依存関係
  8. ここからは、Bluemix の IBM Push サービス、および Node.js ランタイムとやりとりするための変更を加えていきます。まず、AndroidManifest.xml を開いて、アクセス権とアクティビティーのセクションを以下のように更新します。最後の activity セクションの後に、GCM Intent サービスと RECEIVE および REGISTRATION のインテント・フィルターを新たに追加します。
    <activity
    android:name="com.example.<application name>.SplashScreen"
    android:windowSoftInputMode="stateHidden"
    android:label="@string/app_name" >
    <intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
    <!-- Push Settings Start -->
    <!-- Notification Intent -->
    <intent-filter>
    <action android:name="com.example.<application name>.IBMPushNotification" />
    <category android:name="android.intent.category.DEFAULT" />
    </intent-filter>
    <!-- Push Settings End -->
    
    </activity>
    <!-- Push Settings Start -->
    <!-- Add GCM Intent Service and intent-filters for RECEIVE and REGISTRATION of 
            notifications -->
    <service android:name="com.ibm.mobile.services.push.IBMPushIntentService" />
    <receiver
    android:name="com.ibm.mobile.services.push.IBMPushBroadcastReceiver"
    android:permission="com.google.android.c2dm.permission.SEND" >
    <intent-filter>
    <action android:name="com.google.android.c2dm.intent.RECEIVE" />
    <category android:name="com.ibm.mbaas.push.sdk.client.android.sample" />
    </intent-filter>
    <intent-filter>
    <action android:name="com.google.android.c2dm.intent.REGISTRATION" />
    <category android:name="com.ibm.mbaas.push.sdk.client.android.sample" />
    </intent-filter>
    <intent-filter>
    <action android:name="android.intent.action.BOOT_COMPLETED" />
    <category android:name="com.ibm.mbaas.push.sdk.client.android.sample" />
    </intent-filter>
    </receiver>
    <!-- Push Settings End -->
  9. 以下のコードを追加します。
    //Push Registration Work
    private IBMPush push=null;
    private IBMPushNotificationListener notificationListener = null;
    private Context context;
    
    //Push Registration start
    IBMBluemix.initialize(context, getResources().getString(R.string.IBMAPI),getResources()
        .getString(R.string.IBMKey), getResources().getString(R.string.domain));
    
    IBMCloudCode.initializeService();
    IBMData.initializeService();
    IBMPush.initializeService();
    
    push = IBMPush.getService();
    // register the device with the IBM Push service
    //call the push service to register the device
    TelephonyManager tm = (TelephonyManager) 
         getSystemService(Context.TELEPHONY_SERVICE);
    push.register(tm.getDeviceId(), 
         tm.getLine1Number()).continueWith(new Continuation<String,Void> () {
    @Override
    public Void then(Task<String> task) throws Exception {
    if(task.isFaulted()) {
    Exception e = task.getError();
    //Handle failed calls
    } else {
    System.out.println("Push is registered");
    String deviceId= task.getResult();
    IBMCloudCode ccs = IBMCloudCode.initializeService();
    ccs.get("/sendPushMessage/"+deviceId).continueWith(new Continuation<IBMHttpResponse, 
         Void>() {
    
    @Override
    public Void then(Task<IBMHttpResponse> task) throws Exception {
    if (task.isFaulted()) {
    // error handling code here
    System.out.println("Failed" + task.getResult() );
    Toast.makeText(SplashScreen.this, 
         "Failed to register,please check your internet connection.....", 500).show();
    } else {
    IBMHttpResponse response = task.getResult();
    if(response.getHttpResponseCode() == 200) {
    System.out.println("Push is successful");
    Toast.makeText(SplashScreen.this, "Push registered successfully.....", 500).show();
    }
    }
    return null;
    }
    });
    }
    //Handle successful calls
    notificationListener = new IBMPushNotificationListener() {
    public void onReceive(final IBMSimplePushNotification message) {
    showSimplePushMessage(message);
    }
    };
    @Override
    protected void onResume() {
    super.onResume();
    
    if (push != null) {
    push.listen(notificationListener);
    }
    }
    
    void showSimplePushMessage(final IBMSimplePushNotification message) {
    runOnUiThread(new Runnable() {
    @Override
    public void run() {
    Builder builder = new AlertDialog.Builder(SplashScreen.this);
    builder.setMessage("Notification Received : "
    + message.toString());
    builder.setCancelable(true);
    builder.setPositiveButton("OK",
    new DialogInterface.OnClickListener() {
    @Override
    public void onClick(DialogInterface dialog, int s) {
    }
    });
    AlertDialog dialog = builder.create();
    dialog.show();
    }
    });
  10. ここで、この Android アプリを実行します。Eclipse で、「Project (プロジェクト)」 > 「Properties (プロパティー)」 > 「Android」の順に選択します。サンプル・アプリケーションで使用している API レベルの Google API が選択されていることを確認してから、「Apply (適用)」をクリックします。Android Virtual Device Manager を開き、端末を選択してから「Edit (編集)」をクリックし、「Target (ターゲット)」「Google APIs (Google Inc.) - API Level XX」(XX は、サンプル・アプリケーションで使用している API レベル) に設定します。「Run (実行)」 > 「Run As (実行)」 > 「Android Application (Android アプリケーション)」の順に選択します。

Android 端末の画面に、アプリケーション・アイコンが表示されるようになっているはずです。そのアイコンをクリックすると、スプラッシュ画面が表示されます。ユーザーがログインして e-メール・アドレスとパスワードを入力すると、e-申請手続きとそれぞれの状況を示すリストが表示されます。ユーザーが特定の申請手続きを選択すると、その e-申請手続きの詳細が表示されます。PDF アイコンを選択することによって、ユーザーは PDF 版の申請手続きの概要を表示してダウンロードすることができます。ログアウトすると、ユーザーはログイン画面に戻されます。「About Us (会社概要)」を選択すると、この架空の保険会社に関する情報が表示されます。「Contact Us (お問い合わせ)」を選択すると、カスタマー・サービスに関する情報が表示されます。

e-申請手続きの状況が更新されると、ユーザーはプッシュ通知を受け取ります (Bluemix 内で IBM Push サービスがプロビジョニングされています)。

ステップ 6. iOS アプリを作成して API を使用する

  1. Bluemix で Mobile Cloud サービスを作成した後、「Overview (概要)」ページから iOS SDK をダウンロードします。(「Overview (概要)」ページを表示するには、Bluemix にログインしてダッシュボードにアクセスし、対象のアプリケーションをクリックします。それによって表示される「Overview (概要)」ページで、「Download SDK (SDK のダウンロード)」をクリックしてください)。
  2. Mac の Finder を使用して、IBMBluemix フレームワーク (<unzipped_location>/IBMBluemix.framework) を見つけます。このフレームワークを、「Frameworks」フォルダーに作成した Xcode プロジェクトにドラッグします。Xcode プロジェクトに組み込まれた IBMBluemix フレームワークのスクリーンショット
    Xcode プロジェクトに組み込まれた IBMBluemix フレームワークのスクリーンショット
  3. 「Copy items into destination group's folder (項目を宛先グループのフォルダーにコピー)」にチェック・マークを入れます (必要な場合)」。
  4. Finder で、IBMCloudCode.frameworkIBMPush.framework を見つけて、この 2 つのフレームワークも Xcode プロジェクトにドラッグします。
  5. <application name>.plist ファイルに変更を加え、applicationId、applicationSecret、および applicationRoute の値を含めます。これらの値は、アプリケーションの「Overview (概要)」ページから (アプリ・キー、アプリ・シークレット、経路の値として) 取得することができます。
    アプリケーションの ID (キー)、シークレット、経路を追加する画面のスクリーンショット
    アプリケーションの ID (キー)、シークレット、経路を追加する画面のスクリーンショット

    注: XCode を使用して新規 iOS アプリを作成する際には、-ObjC および -lsqlite3 リンカー・フラグをビルド設定に追加する必要があります。それには、アプリケーションのターゲットを選択してから「Build Settings (ビルド設定)」をクリックし、そこから「Other Linker Flag (その他のリンカー・フラグ)」を検索します。「Other Linker Flag (その他のリンカー・フラグ)」が表示されていない場合は、「Basic (基本)」ではなく「All (すべて)」の設定が選択されていることを確認してください。このサンプル・プロジェクトには、すでにこれらのフラグを追加しておきました。ビルド設定に -ObjC および -lsqlite3 リンカー・フラグが追加された画面のスクリーンショット
    ビルド設定に -ObjC および -lsqlite3 リンカー・フラグが追加された画面のスクリーンショット
  6. アプリケーションでプッシュ通知を有効にするには、iOS 端末上でアプリケーションを実行する必要があります。それには、Apple 開発者用ライセンスが必要です。Bluemix でプッシュ通知をセットアップする方法についての詳細は、「Push の概要」を参照してください。Apple の iOS 開発者向けライブラリーで説明されているプロビジョニング手順に従って、必要な証明書とプロビジョニング・ファイルを作成します。
  7. このアプリケーションには、iOS ストーリーボードを使用しました。アプリケーションの iPhone ストーリーボードは、以下のようになっています (ホーム画面に戻るには、右にスワイプします。UI の設計原則として採用したのは、できるかぎりジェスチャー・ベースのナビゲーションを使用することです)。アプリケーションの iPhone ストーリーボード
    アプリケーションの iPhone ストーリーボード
  8. GICommon.m から抜粋した以下のコードに目を通してください。このコード・スニペットは、<application name>.plist 内に構成されている applicationId、applicationSecret、および applicationRoute の値を取得します。
    // Read the applicationId from the <application name>.plist.
        NSString *configurationPath = 
             [[NSBundle mainBundle] pathForResource:@"<application name>" ofType:@"plist"];
        if(configurationPath){
            NSDictionary *configuration = 
                 [[NSDictionary alloc] initWithContentsOfFile:configurationPath];
            self.applicationId = [configuration objectForKey:@"applicationId"];
            if(!self.applicationId || [self.applicationId isEqualToString:@""]){
               self.hasValidConfiguration = NO;
                self.errorMessage = @"Open the <application name>.plist and 
                     set the applicationId to the BlueMix applicationId";
            }
    
            self.applicationSecret = [configuration objectForKey:@"applicationSecret"];
            if(!self.applicationSecret || [self.applicationSecret isEqualToString:@""]){
                self.hasValidConfiguration = NO;
                self.errorMessage = @"Open the <application name>.plist and 
                     set the applicationSecret with your BlueMix application's secret";
            }
    
            self.applicationRoute = [configuration objectForKey:@"applicationRoute"];
            if(!self.applicationRoute || [self.applicationRoute isEqualToString:@""]){
                self.hasValidConfiguration = NO;
                self.errorMessage = @"Open the <application name>.plist and 
                     set the applicationRoute to the BlueMix application's route";
            }
    }
  9. GIAppDelegate.m に含まれている以下のコードに目を通してください。
    GICommon *sharedGICommon = [GICommon sharedCenter];
       // Intialize with IBM Bluemix and initialize IBM Push using app id, 
          app secret and app route.
        if(sharedGICommon.hasValidConfiguration) {
            [IBMBluemix initializeWithApplicationId: 
                 sharedGICommon.applicationId andApplicationSecret: 
                 sharedGICommon.applicationSecret andApplicationRoute: 
                 sharedGICommon.applicationRoute];
            [IBMPush initializeService];
        } else {
            [NSException raise:@"InvalidApplicationConfiguration" 
                 format: @"%@", sharedGICommon.errorMessage];
        }
            
            // Register application for push notifications
            [[UIApplication sharedApplication] 
                 registerForRemoteNotificationTypes:
                 (UIRemoteNotificationTypeBadge | 
                 UIRemoteNotificationTypeSound | 
                 UIRemoteNotificationTypeAlert)];
  10. GIProductViewController.m に含まれている以下のコードに目を通してください。このコードに、Web API URL を定式化し、カスタマー JSONWrapper ユーティリティーによって非同期で呼び出す方法が示されています。
    GICommon *sharedGICommon = [GICommon sharedCenter];
        NSDictionary *paramDictionary = @{
                                    @"IBM-Application-Secret" : 
                                         sharedGICommon.applicationSecret,
                                    @"Content-Type" : @"application/json"
                                    };
        NSMutableString *requestURI = [[NSMutableString alloc] init];
        [requestURI appendString:@"/<applicatiion name>/v1/apps/"];
        [requestURI appendString:sharedGICommon.applicationId];
        [requestURI appendString:@"/products"];
         [JSONWrapper performRequestWithUri:requestURI params:paramDictionary 
                completionHandler:^(NSDictionary *response, NSError *error) {
             self.mutableProductItems = [[NSMutableArray alloc] init];
             for (NSDictionary *product in response) {
                 NSDictionary *productItem = [product objectForKey:@"attributes"];
                 [self.mutableProductItems addObject:productItem];
                 self.items = [self.mutableProductItems copy];
                 [ self.productTableView reloadData];
             }
           [activityView stopAnimating];
         }];
  11. GreenInsuance API を非同期で呼び出す方法を確認するには、JSONWrapper.m から抜粋した以下のコード・スニペットに目を通してください。
    // Send an asyncronous request on the queue
       [NSURLConnection sendAsynchronousRequest:request queue:queue 
            completionHandler:^(NSURLResponse *response, NSData *data, NSError *error) {
           // If there was an error getting the data
           if (error) {
               dispatch_async(dispatch_get_main_queue(), ^(void) {
                   completionBlock(nil, error);
    
               });
               return;
           }
           // Decode the data
           NSError *jsonError;
           NSDictionary *responseDict = [NSJSONSerialization JSONObjectWithData:data 
                options:0 error:&jsonError];
           // If there was an error decoding the JSON
           if (jsonError) {
               dispatch_async(dispatch_get_main_queue(), ^(void) {
               });
               return;
           }
           // All looks fine, lets call the completion block with the response data
           dispatch_async(dispatch_get_main_queue(), ^(void) {
               completionBlock(responseDict, nil);
           });
       }];
  12. 最後に、アプリケーションを iOS シミュレーターまたは iPhone 端末内で実行します。
    iOS シミュレーター内、または iPhone 上で実行されている Green Insurance アプリのスクリーンショット
    iOS シミュレーター内、または iPhone 上で実行されている Green Insurance アプリのスクリーンショット

    ほとんどのボタンは、読んで字のごとくです。「Products (商品)」ボタンにタッチすると、有効な保険商品が表示されます。そのなかから、いずれかの保険契約の詳細を表示するには、その契約に対応する PDF アイコンにタッチすると、PDF 形式で保険契約が表示されます。このアプリケーションは、Bluemix 上に公開された API を呼び出すことによって取得した保険契約の詳細を表示します。随時、右にスワイプしてホーム画面に戻ることができます。

まとめと次のステップ

このチュートリアルでは、Bluemix の Mobile Cloud ボイラープレートを利用してネイティブ iOS/Android モバイル・アプリを開発するとともに、API を公開するために Node.js ランタイムと IBM Mobile Data サービスを利用する方法を紹介しました。Bluemix は、モバイル・アプリで使用するエンタープライズ規模の API を開発するのに役立つだけでなく、クラウド・サービスという手段でモバイル・データ機能をアプリケーションに統合することも可能にします。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Mobile development, Cloud computing
ArticleID=1000202
ArticleTitle=エンタープライズ規模の iOS/Android アプリ向けカスタム API を作成する
publish-date=03192015