Tutoriel mobile : Utilisation de BaaS pour le stockage backend (iOS et Android)

Remonter à Tutoriels mobiles : Développement d'applications mobiles (iOS et Android)

Ce tutoriel donne les étapes de base pour utiliser le stockage backend avec Kinvey et Parse comme fournisseurs BaaS.

Ce tutoriel crée une liste de courses dans laquelle les éléments ajoutés sont stockés dans le cloud par le fournisseur BaaS. Ces éléments peuvent ainsi être partagés et mis à jour entre différents périphériques, le cas échéant.

iOS	Android
iPod	Nexus 7

Avec le stockage backend, vous pouvez stocker les fichiers et les données dans le cloud. Ces informations peuvent être récupérées, mises à jour et supprimées ultérieurement.

Dans ce tutoriel, vous allez :

• Créer de nouveaux éléments et les stocker dans le cloud.
• Récupérer des éléments dans le cloud.
• Supprimer des éléments du cloud.

Préparation de votre app dans Kinvey et Parse

Avant de commencer ce tutoriel, assurez-vous que vous avez déjà un compte avec Kinvey ou Parse et une app créée dans le fournisseur backend.

• Introduction à Kinvey et Parse
  • Création d'un compte avec Kinvey
  • Création d'un compte avec Parse
  • Création d'une app avec Kinvey
  • Création d'une app avec Parse

Conception et configuration de l'interface utilisateur

Ce tutoriel utilise un composant d'interface utilisateur TListView pour afficher les informations récupérées dans le cloud.

Pour configurer l'interface utilisateur pour ce tutoriel exemple, suivez ces étapes :

1. Créez une application multi-périphérique vide en sélectionnant :
   • Pour Delphi : Fichier > Nouveau > Application multi-périphérique - Delphi > Application vide
   • Pour C++ : Fichier > Nouveau > Application multi-périphérique - C++Builder > Application vide
2. Déposez un TLabel sur la fiche et définissez les propriétés suivantes dans l'inspecteur d'objets :
   • Définissez la propriété Text sur Shopping List.
   • Définissez la propriété Align sur Top.
   • Définissez la propriété HorzAlign dans TextSettings sur Center.
3. Déposez un TButton sur le TLabel et définissez les propriétés suivantes dans l'inspecteur d'objets :
   • Définissez la propriété Align sur Right.
   • Définissez la propriété StyleLookup sur refreshtoolbutton.
   • Définissez la propriété Name sur RefreshButton.
4. Déposez un TEdit sur la fiche et définissez les propriétés suivantes dans l'inspecteur d'objets :
   • Définissez la propriété Align sur Top.
5. Déposez un TButton sur le TEdit et définissez les propriétés suivantes dans l'inspecteur d'objets :
   • Définissez la propriété Align sur Right.
   • Définissez la propriété Text sur Add Item.
   • Définissez la propriété Name sur AddItemButton.
6. Déposez un TListView sur la fiche et définissez les propriétés suivantes dans l'inspecteur d'objets :
   • Définissez la propriété Align sur Client.

Ajout des composants backend

Ce tutoriel utilise le composant de service TBackendStorage pour gérer le stockage backend afin de créer, récupérer, mettre à jour et supprimer des objets. Cette app utilise également l'un des composants fournisseur BaaS :

• TKinveyProvider est le composant fournisseur BaaS Kinvey qui contient les informations relatives à la connexion au service cloud Kinvey.
• TParseProvider est le composant fournisseur BaaS Parse qui contient les informations relatives à la connexion au service cloud Parse.

Poursuivez avec les étapes suivantes :

1. Déposez l'un des deux composants fournisseur BaaS sur la fiche TKinveyProvider ou TParseProvider selon le fournisseur backend utilisé dans votre app.
2. Déposez un TBackendStorage sur la fiche, et dans l'inspecteur d'objets, définissez la propriété Provider sur le composant fournisseur BaaS utilisé.
3. Selon le fournisseur BaaS utilisé :
   • Sélectionnez le composant KinveyProvider1, et dans l'inspecteur d'objets, définissez les propriétés AppKey, AppSecret et MasterSecret sur les valeurs fournies par Kinvey.
   • Sélectionnez le composant ParseProvider1, et dans l'inspecteur d'objets, définissez les propriétés ApplicationID, MasterKey et RestApiKey sur les valeurs fournies par Parse.
     

Création et stockage des objets

Dans l'app, lorsque vous tapez quelque chose dans le TEdit et cliquez sur Add Item, le contenu tapé dans le TEdit est stocké dans le cloud, dans le fournisseur BaaS Kinvey ou Parse. Pour créer l'objet, utilisez la méthode CreateObject.

1. Double-cliquez sur le bouton AddItemButton et tapez le code suivant :

Delphi :

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="";
	 }
}

Suppression des objets

Voici la procédure permettant aux utilisateurs de supprimer les éléments de la liste. Dans le composant TListView, si vous faites glisser votre doigt vers la gauche ou la droite sur l'un des éléments du TListView, un bouton Supprimer apparaît sur le côté droit. Pour supprimer l'élément, lorsque le bouton Supprimer de cet élément est cliqué, procédez comme suit :

1. Sélectionnez le TListView, et dans l'onglet Evénements de l'inspecteur d'objets, double-cliquez sur l'événement OnDeletingItem. Cet événement se produit avant la suppression de l'élément. Ajoutez le code suivant :

Delphi :

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;

Remarque : La ligne LQuery := Format('query={"item":"%s"}', [(Sender as TListView).Items[AIndex].Text]); est uniquement valable pour Kinvey. Dans Parse, le mot query doit être remplacé par where, ainsi si vous utilisez Parse comme fournisseur BaaS, la ligne doit être la suivante : 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\":\""+(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();
	}
}

Remarque : La ligne LQuery[0] = ("query={\"item\":\""+(list->Items->Item[AIndex]->Text)+"\"}"); est uniquement valable pour Kinvey. Dans Parse, le mot query doit être remplacé par where ainsi si vous utilisez Parse comme fournisseur BaaS, la ligne doit être la suivante :LQuery[0] = ("where={\"item\":\""+(list->Items->Item[AIndex]->Text)+"\"}");.

Récupération des objets

Pour mettre à jour le contenu du TListView afin de refléter toutes les modifications éventuelles, vous pouvez récupérer les objets avec QueryObjects, effacer la vue liste et ajouter tous les éléments que vous avez récupérés dans le stockage backend.

1. Pour ajouter une nouvelle méthode permettant d'actualiser la liste :

   Delphi :

   • Ouvrez la fenêtre Explorateur de classes en choisissant Voir > Explorateur de classes.
   • Dans la visionneuse de classes, cliquez avec le bouton droit sur TForm1 sous Unit1 et sélectionnez Ajouter une méthode.
   • Ecrivez RefreshList sous "Nom de méthode", sélectionnez Procédure sous "Type de méthode" et cliquez sur OK.

   

   C++ :

   • Ouvrez la fenêtre Explorateur de classes en choisissant Voir > Explorateur de classes C++.
   • Dans le volet Liste des types (volet de gauche), développez votre projet, cliquez avec le bouton droit sur TForm1 et sélectionnez Ajouter une méthode.
   • Ecrivez RefreshList sous "Nom", void sous "Type de retour", définissez "Visibilité" sur public et cliquez sur Ajouter.

   

2. Ajoutez le code suivant à la nouvelle méthode :
   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();
   	}
   }
   

3. Double-cliquez sur RefreshButton afin que ce bouton appelle la méthode RefreshList :
   Delphi :

   procedure TForm1.RefreshButtonClick(Sender: TObject);
   begin
     RefreshList;
   end;
   

   C++ :

   void __fastcall TForm1::RefreshButtonClick(TObject *Sender)
   {
   	RefreshList();
   }
   

4. Pour actualiser la liste dès qu'un élément a été ajouté, double-cliquez sur le bouton AddItemButton pour accéder au code de l'événement OnClick ajouté avant, et ajoutez le code suivant comme la toute dernière phrase de l'instruction else :
   Delphi :

   RefreshList;
   

   C++ :

   RefreshList();
   

5. Pour actualiser la liste après la suppression d'un élément, sélectionnez le TListView, et dans l'onglet Evénements de l'inspecteur d'objets, double-cliquez sur l'événement OnDeleteItem. Cet événement se produit après la suppression de l'élément. Ajoutez le code suivant :
   Delphi :

   procedure TForm1.ListView1DeleteItem(Sender: TObject; AIndex: Integer);
   begin
     RefreshList;
   end;
   

   C++ :

   void __fastcall TForm1::ListView1DeleteItem(TObject *Sender, int AIndex)
   {
   	RefreshList();
   }
   

Exécution de votre application

Pour exécuter votre application, suivez les étapes suivantes :

1. Dans le Gestionnaire de projets, sélectionnez la plate-forme cible sur laquelle vous voulez exécuter votre app.

   Remarque: Cette app utilise la fonctionnalité Balayer pour supprimer qui est supportée sur les apps mobiles (iOS et Android), ainsi que sur les apps de bureau (Windows et OS X) lorsque la saisie tactile est disponible.

2. Sélectionnez Exécuter > Exécuter ou Exécuter > Exécuter sans débogage.
3. Dès que vous ajoutez ou supprimez des éléments dans votre application, vous pouvez accéder à votre console Kinvey ou votre tableau de bord Parse pour voir les modifications également à partir du cloud.

iOS	Android
iPod	Nexus 7

Voir aussi

• Présentation de BaaS
• Introduction à Kinvey et Parse
• Gestion des utilisateurs BaaS
• Utilisation de BaaS pour le stockage backend

• Tutoriel mobile : Utilisation des notifications distantes (iOS et Android)

Exemples de code

• Exemple BaaS ToDo