モバイル チュートリアル:バックエンド ストレージ用に BaaS を使用する(iOS および Android)

提供: Appmethod Topics
移動先: 案内検索

モバイル チュートリアル:モバイル アプリケーション開発(iOS および Android) への移動


このチュートリアルでは、Kinvey および Parse を BaaS プロバイダとしてバックエンド ストレージを使用する基本手順を説明します。

このチュートリアルではショッピング リストを作成します。追加した項目は BaaS プロバイダによってクラウドに格納されるため、必要であればさまざまなデバイス間で共有したり更新することができます。

iOS Android

ShoppingListBaaSAppiOS.png
iPod

ShoppingListBaaSAppAndroid.png
Nexus 7

バックエンド ストレージを使用して、ファイルやデータをクラウドに格納することができます。その情報は、後で取得、更新、削除することができます。

このチュートリアルでは、以下を行います。

  • 新しい項目を作成してクラウドに格納する。
  • 項目をクラウドから取得する。
  • 項目をクラウドから削除する。

Kinvey および Parse でのアプリケーションの準備

このチュートリアルを開始する前に、Kinvey または Parse のアカウントが既にあることと、バックエンド プロバイダ内にアプリケーションを既に作成していることを確認してください。

ユーザー インターフェイスの設計とセットアップ

このチュートリアルでは、UI コンポーネントに TListView を使用して、クラウドから取得した情報を表示します。

以下の手順で、このサンプル チュートリアルの UI をセットアップします。

  1. 空のマルチデバイス アプリケーションを作成します。以下のいずれかを選択します。
    • Object Pascal の場合: [ファイル|新規作成|マルチデバイス アプリケーション - Object Pascal|空のアプリケーション]
    • C++ の場合: [ファイル|新規作成|マルチデバイス アプリケーション - C++|空のアプリケーション]
  2. フォームに TLabel をドロップし、[オブジェクト インスペクタ]で次のプロパティを設定します。
    • Text プロパティを「Shopping List」に設定します。
    • Align プロパティを Top に設定します。
    • TextSettings 内の HorzAlign プロパティを Center に設定します。
  3. TLabel 上に TButton をドロップし、[オブジェクト インスペクタ]で次のプロパティを設定します。
    • Align プロパティを Right に設定します。
    • StyleLookup プロパティを refreshtoolbutton に設定します。
    • Name プロパティを「RefreshButton」に設定します。
  4. フォームに TEdit をドロップし、[オブジェクト インスペクタ]で次のプロパティを設定します。
    • Align プロパティを Top に設定します。
  5. TEdit 上に TButton をドロップし、[オブジェクト インスペクタ]で次のプロパティを設定します。
    • Align プロパティを Right に設定します。
    • Text プロパティを「Add Item」に設定します。
    • Name プロパティを「AddItemButton」に設定します。
  6. フォームに TListView をドロップし、[オブジェクト インスペクタ]で次のプロパティを設定します。
    • Align プロパティを Client に設定します。

バックエンド コンポーネントの追加

このチュートリアルでは、TBackendStorage サービス コンポーネントを使用してバックエンド ストレージを管理し、オブジェクトの作成、取得、更新、削除を行います。また、次のいずれかの BaaS プロバイダ コンポーネントも使用します。

  • TKinveyProviderKinvey BaaS プロバイダ コンポーネント。Kinvey クラウド サービス接続についての情報を含みます。
  • TParseProviderParse BaaS プロバイダ コンポーネント。Parse クラウド サービス接続についての情報を含みます。

引き続き、以下の手順を実施します。

  1. アプリケーションで使用するバックエンド プロバイダに応じて、2 つの BaaS プロバイダ コンポーネント(TKinveyProviderTParseProvider)のいずれかをフォームにドロップします。
  2. フォームに TBackendStorage をドロップし、[オブジェクト インスペクタ]Provider プロパティを先ほどの BaaS プロバイダ コンポーネントに設定します。
  3. 使用する BaaS プロバイダに応じて、次のいずれかを行います。
ShoppingListBaaSAppMasterView.png

オブジェクトの作成と格納

アプリケーションで TEdit に何かを入力して[Add Item]をクリックすると、TEdit に入力した内容が、Kinvey または Parse BaaS プロバイダのクラウドに格納されます。オブジェクトの作成には CreateObject メソッドを使用します。

  1. AddItemButton をダブルクリックして次のコードを入力します。
Object Pascal の場合:
procedure TForm1.AddItemButtonClick(Sender: TObject);
var
    LJSONObject: TJSONObject;
    LEntity: TBackendEntityValue;
begin
    if Edit1.Text = '' then
      ShowMessage('Please, enter an item.')
    else
      begin
        LJSONObject := TJSONObject.Create;
        LJSONObject.AddPair('item', Edit1.Text);
        BackendStorage1.Storage.CreateObject('ShoppingList', LJSONObject, LEntity);
        ShowMessage('New item created: ' +Edit1.Text);
        LJSONObject.Free;
        Edit1.Text := '';
      end
end;
C++ の場合:
void __fastcall TForm1::AddItemButtonClick(TObject *Sender)
{
	TJSONObject *LJSONObject;
	TBackendEntityValue LEntity;

	if (Edit1->Text == "") {
		ShowMessage("Please, enter an item.");
	}
	else  {
		LJSONObject = new TJSONObject;
		LJSONObject->AddPair("item", Edit1->Text);
		BackendStorage1->Storage->CreateObject("ShoppingList", LJSONObject, LEntity);
		ShowMessage("New item created: "+ Edit1->Text);
		LJSONObject->Free();
		delete LJSONObject;
		Edit1->Text="";
	 }
}


オブジェクトの削除

ユーザーがリストから任意の項目を削除できるようにします。TListView コンポーネントで、TListView の 1 つの項目上で指を左または右にスワイプすると、右側に削除ボタンが表示されます。項目の削除ボタンがクリックされたときにその項目を削除するには、以下を行います。

  1. TListView を選択し、[オブジェクト インスペクタ][イベント]タブで OnDeletingItem イベントをダブルクリックします。このイベントは項目が削除される前に発生します。次のコードを追加します。
Object Pascal の場合:
procedure TForm1.ListView1DeletingItem(Sender: TObject; AIndex: Integer; var ACanDelete: Boolean);
var
  LQuery: string;
  LJSONArray : TJSONArray;
  LEntities: TArray<TBackendEntityValue>;
begin
  ACanDelete := False;
  LJSONArray := TJSONArray.Create;
  try
    LQuery := Format('query={"item":"%s"}', [(Sender as TListView).Items[AIndex].Text]); // 'query={"item":"%s"}' in Kinvey and 'where={"item":"%s"}' in Parse
    BackendStorage1.Storage.QueryObjects('ShoppingList', [LQuery], LJSONArray, LEntities);
    if (Length(LEntities) > 0) and BackendStorage1.Storage.DeleteObject('ShoppingList', LEntities[0].ObjectID) then
      ACanDelete := True
    else
      ShowMessage ('Item could not be deleted.');
  finally
    LJSONArray.Free;
  end;
end;
メモ: The line LQuery := Format('query={"item":"%s"}', [(Sender as TListView).Items[AIndex].Text]); is for Kinvey. Parse では、単語 querywhere に変更しなければならず、Parse を BaaS プロバイダとして使用している場合には、この行はこのようになります: LQuery := Format('where={"item":"%s"}', [(Sender as TListView).Items[AIndex].Text]);


C++ の場合:
void __fastcall TForm1::ListView1DeletingItem(TObject *Sender, int AIndex, bool &ACanDelete)
{
	System::UnicodeString LQuery[1];
	DynamicArray<TBackendEntityValue> LEntities;
	ACanDelete = False;
	TJSONArray *LJSONArray;
	LJSONArray = new TJSONArray;
	try {
		TListView* list = reinterpret_cast<TListView*>(Sender);
		LQuery[0] = ("query={\"item\":\""+(list->Items->Item[AIndex]->Text)+"\"}"); // "query={\"item\":\"" in Kinvey and "where={\"item\":\"" in Parse
		BackendStorage1->Storage->QueryObjects("ShoppingList", LQuery, 0, LJSONArray, LEntities);
		if (((LEntities.Length)>0) & BackendStorage1->Storage->DeleteObject("ShoppingList", LEntities[0].ObjectID)) {
		   ACanDelete = True;
		} else {
			ShowMessage("Item could not be deleted.");
		}
	}
	__finally {
		LJSONArray->Free();
	}
}
メモ: この行、LQuery[0] = ("query={\"item\":\""+(list->Items->Item[AIndex]->Text)+"\"}"); は、Kinvey の場合です。Parse では、単語 querywhere に変更しなければならず、Parse を BaaS プロバイダとして使用している場合には、子の行はこのようになります: LQuery[0] = ("where={\"item\":\""+(list->Items->Item[AIndex]->Text)+"\"}");

オブジェクトの取得

行われた変更をすべて反映するよう TListView のすべての内容を更新するには、QueryObjects でオブジェクトを取得し、リスト ビューをクリアし、バックエンド ストレージから取得したすべての項目を追加します。

  1. リストの表示を更新するための新しいメソッドを追加するには:

    Object Pascal の場合:

    • [表示|クラス エクスプローラ]を選択してクラス エクスプローラ ウィンドウを開きます。
    • クラス ビューア ペインで Unit1 の下の TForm1 を右クリックし、[オペレーションの追加...]を選択します。
    • [メソッド名]に「RefreshList」と入力し、[メソッド タイプ]で[手続き]を選択して、[OK]をクリックします。
    AddMethodRefreshListDEL.png

    C++ の場合:

    • [表示|C++ クラス エクスプローラ]を選択してクラス エクスプローラ ウィンドウを開きます。
    • 型リスト ペイン(左側のペイン)でプロジェクトを展開し、その下の TForm1 を右クリックして、[オペレーションの追加...]を選択します。
    • [名前]に「RefreshList」、[戻り値の型]に「void」と入力し、[可視性]を[public]に設定して、[追加]をクリックします。
    AddMethodRefreshListCPP.png
  2. 作成した新しいメソッドに次のコードを追加します。
    Object Pascal の場合:
    procedure TForm1.RefreshList;
    var
      LJSONArray : TJSONArray;
      LItem: TListViewItem;
      I: Integer;
    begin
      LJSONArray := TJSONArray.Create;
      try
        BackendStorage1.Storage.QueryObjects('ShoppingList', [], LJSONArray);
        ListView1.ClearItems;
        for I := 0 to LJSONArray.Count-1 do
        begin
          LItem := ListView1.Items.Add;
          LItem.Text := (LJSonArray.Items[I].GetValue<string>('item'));
        end;
      finally
        LJSONArray.Free;
      end;
    end;
    
    C++ の場合:
    void TForm1::RefreshList()
    {
    	String LQuery [1];
    	TJSONArray *LJSONArray;
    	TListViewItem *LItem;
    	TJSONObject *LJSONObject;
    	String ItemText;
    	int i;
    	LJSONArray = new TJSONArray;
    	try {
    		BackendStorage1->Storage->QueryObjects("ShoppingList", LQuery, 0, LJSONArray);
    		ListView1->ClearItems();
    		for (i = 0; i < LJSONArray->Count; i++) {
    			LItem = ListView1->Items->Add();
    			LJSONObject = dynamic_cast<TJSONObject *>(LJSONArray->Items[i]);
    			ItemText = (LJSONObject->Values["item"]->Value());
    			LItem->Text = ItemText;
    		}
    	}
    	__finally {
    		LJSONArray->Free();
    	}
    }
    
  3. RefreshButton をダブルクリックし、このボタンで RefreshList メソッドを呼び出すよう、次のコードを追加します。
    Object Pascal の場合:
    procedure TForm1.RefreshButtonClick(Sender: TObject);
    begin
      RefreshList;
    end;
    
    C++ の場合:
    void __fastcall TForm1::RefreshButtonClick(TObject *Sender)
    {
    	RefreshList();
    }
    
  4. 項目が追加されたときにリストの表示を更新します。AddItemButton をダブルクリックして先ほど追加した OnClick イベントのコードを開き、else の最後の文として次のコードを追加します。
    Object Pascal の場合:
    RefreshList;
    
    C++ の場合:
    RefreshList();
    
  5. 項目の削除後にリストの表示を更新します。TListView を選択し、[オブジェクト インスペクタ][イベント]タブで OnDeleteItem イベントをダブルクリックします。このイベントは項目が削除された後に発生します。次のコードを追加します。
    Object Pascal の場合:
    procedure TForm1.ListView1DeleteItem(Sender: TObject; AIndex: Integer);
    begin
      RefreshList;
    end;
    
    C++ の場合:
    void __fastcall TForm1::ListView1DeleteItem(TObject *Sender, int AIndex)
    {
    	RefreshList();
    }
    

アプリケーションの実行

アプリケーションを実行するには、次のステップに従います:

  1. [プロジェクト マネージャ]で、アプリケーションを実行するターゲット プラットフォームを選択します。
    メモ: このアプリケーションでは、モバイル アプリケーション(iOS および Android)とタッチ入力が有効なデスクトップ アプリケーション(Windows および Mac OS X)でサポートされているスワイプ削除機能を使用します。
  2. [実行|実行]または[実行|デバッガを使わずに実行]を選択します。
  3. アプリケーションで項目を追加または削除したら、Kinvey コンソールまたは Parse ダッシュボードを開いて、クラウドでも変更を確認できます。
iOS Android

ShoppingListBaaSAppiOS.png
iPod

ShoppingListBaaSAppAndroid.png
Nexus 7

関連項目

コード サンプル