モバイル チュートリアル:バックエンド ストレージ用に BaaS を使用する(iOS および Android)
モバイル チュートリアル:モバイル アプリケーション開発(iOS および Android) への移動
このチュートリアルでは、Kinvey および Parse を BaaS プロバイダとしてバックエンド ストレージを使用する基本手順を説明します。
このチュートリアルではショッピング リストを作成します。追加した項目は BaaS プロバイダによってクラウドに格納されるため、必要であればさまざまなデバイス間で共有したり更新することができます。
iOS | Android |
---|---|
バックエンド ストレージを使用して、ファイルやデータをクラウドに格納することができます。その情報は、後で取得、更新、削除することができます。
このチュートリアルでは、以下を行います。
- 新しい項目を作成してクラウドに格納する。
- 項目をクラウドから取得する。
- 項目をクラウドから削除する。
目次
Kinvey および Parse でのアプリケーションの準備
このチュートリアルを開始する前に、Kinvey または Parse のアカウントが既にあることと、バックエンド プロバイダ内にアプリケーションを既に作成していることを確認してください。
ユーザー インターフェイスの設計とセットアップ
このチュートリアルでは、UI コンポーネントに TListView を使用して、クラウドから取得した情報を表示します。
以下の手順で、このサンプル チュートリアルの UI をセットアップします。
- 空のマルチデバイス アプリケーションを作成します。以下のいずれかを選択します。
- Delphi の場合: [ファイル|新規作成|マルチデバイス アプリケーション - Delphi|空のアプリケーション]
- C++ の場合: [ファイル|新規作成|マルチデバイス アプリケーション - C++Builder|空のアプリケーション]
- フォームに TLabel をドロップし、[オブジェクト インスペクタ]で次のプロパティを設定します。
- Text プロパティを「Shopping List」に設定します。
- Align プロパティを Top に設定します。
- TextSettings 内の HorzAlign プロパティを Center に設定します。
- TLabel 上に TButton をドロップし、[オブジェクト インスペクタ]で次のプロパティを設定します。
- Align プロパティを Right に設定します。
- StyleLookup プロパティを refreshtoolbutton に設定します。
- Name プロパティを「RefreshButton」に設定します。
- フォームに TEdit をドロップし、[オブジェクト インスペクタ]で次のプロパティを設定します。
- Align プロパティを Top に設定します。
- TEdit 上に TButton をドロップし、[オブジェクト インスペクタ]で次のプロパティを設定します。
- フォームに TListView をドロップし、[オブジェクト インスペクタ]で次のプロパティを設定します。
- Align プロパティを Client に設定します。
バックエンド コンポーネントの追加
このチュートリアルでは、TBackendStorage サービス コンポーネントを使用してバックエンド ストレージを管理し、オブジェクトの作成、取得、更新、削除を行います。また、次のいずれかの BaaS プロバイダ コンポーネントも使用します。
- TKinveyProvider: Kinvey BaaS プロバイダ コンポーネント。Kinvey クラウド サービス接続についての情報を含みます。
- TParseProvider: Parse BaaS プロバイダ コンポーネント。Parse クラウド サービス接続についての情報を含みます。
引き続き、以下の手順を実施します。
- アプリケーションで使用するバックエンド プロバイダに応じて、2 つの BaaS プロバイダ コンポーネント(TKinveyProvider、TParseProvider)のいずれかをフォームにドロップします。
- フォームに TBackendStorage をドロップし、[オブジェクト インスペクタ]で Provider プロパティを先ほどの BaaS プロバイダ コンポーネントに設定します。
- 使用する BaaS プロバイダに応じて、次のいずれかを行います。
- KinveyProvider1 コンポーネントを選択し、[オブジェクト インスペクタ]で AppKey、AppSecret、MasterSecret を Kinvey から提供された値に設定します。
- ParseProvider1 コンポーネントを選択し、[オブジェクト インスペクタ]で ApplicationID、MasterKey、RestApiKey を Parse から提供された値に設定します。
オブジェクトの作成と格納
アプリケーションで TEdit に何かを入力して[Add Item]をクリックすると、TEdit に入力した内容が、Kinvey または Parse BaaS プロバイダのクラウドに格納されます。オブジェクトの作成には CreateObject メソッドを使用します。
- AddItemButton をダブルクリックして次のコードを入力します。
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;
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 つの項目上で指を左または右にスワイプすると、右側に削除ボタンが表示されます。項目の削除ボタンがクリックされたときにその項目を削除するには、以下を行います。
- TListView を選択し、[オブジェクト インスペクタ]の[イベント]タブで OnDeletingItem イベントをダブルクリックします。このイベントは項目が削除される前に発生します。次のコードを追加します。
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;
LQuery := Format('query={"item":"%s"}', [(Sender as TListView).Items[AIndex].Text]);
Parse では、単語 query は、where に変更する必要があります。Parse を BaaS プロバイダとして使用する場合には、次の行のようになります:
LQuery := Format('where={"item":"%s"}', [(Sender as TListView).Items[AIndex].Text]);
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\":\""+(listView1->Items->operator[](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)+"\"}");
Parse では、単語 query は where に変更する必要があります。Parse を BaaS プロバイダとして使用する場合には、次の行のようになります: LQuery[0] = ("where={\"item\":\""+(list->Items->Item[AIndex]->Text)+"\"}");
オブジェクトの取得
行われた変更をすべて反映するよう TListView のすべての内容を更新するには、QueryObjects でオブジェクトを取得し、リスト ビューをクリアし、バックエンド ストレージから取得したすべての項目を追加します。
- リストの表示を更新するための新しいメソッドを追加するには:
Delphi の場合:
- [表示|クラス エクスプローラ]を選択してクラス エクスプローラ ウィンドウを開きます。
- クラス ビューア ペインで Unit1 の下の TForm1 を右クリックし、[オペレーションの追加...]を選択します。
- [メソッド名]に「RefreshList」と入力し、[メソッド タイプ]で[手続き]を選択して、[OK]をクリックします。
C++ の場合:
- [表示|C++ クラス エクスプローラ]を選択してクラス エクスプローラ ウィンドウを開きます。
- 型リスト ペイン(左側のペイン)でプロジェクトを展開し、その下の TForm1 を右クリックして、[オペレーションの追加...]を選択します。
- [名前]に「RefreshList」、[戻り値の型]に「void」と入力し、[可視性]を[public]に設定して、[追加]をクリックします。
- 作成した新しいメソッドに次のコードを追加します。
Delphi の場合:
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->Items->Clear(); 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(); } }
- RefreshButton をダブルクリックし、このボタンで RefreshList メソッドを呼び出すよう、次のコードを追加します。
Delphi の場合:
procedure TForm1.RefreshButtonClick(Sender: TObject); begin RefreshList; end;
C++ の場合:void __fastcall TForm1::RefreshButtonClick(TObject *Sender) { RefreshList(); }
- 項目が追加されたときにリストの表示を更新します。AddItemButton をダブルクリックして先ほど追加した OnClick イベントのコードを開き、else の最後の文として次のコードを追加します。
Delphi の場合:
RefreshList;
C++ の場合:RefreshList();
- 項目の削除後にリストの表示を更新します。TListView を選択し、[オブジェクト インスペクタ]の[イベント]タブで OnDeleteItem イベントをダブルクリックします。このイベントは項目が削除された後に発生します。次のコードを追加します。
Delphi の場合:
procedure TForm1.ListView1DeleteItem(Sender: TObject; AIndex: Integer); begin RefreshList; end;
C++ の場合:void __fastcall TForm1::ListView1DeleteItem(TObject *Sender, int AIndex) { RefreshList(); }
アプリケーションの実行
アプリケーションを実行するには、次のステップに従います:
- [プロジェクト マネージャ]で、アプリケーションを実行するターゲット プラットフォームを選択します。
- [実行|実行]または[実行|デバッガを使わずに実行]を選択します。
- アプリケーションで項目を追加または削除したら、Kinvey コンソールまたは Parse ダッシュボードを開いて、クラウドでも変更を確認できます。
iOS | Android |
---|---|