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 |
|---|---|
|
|
|
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.
Sommaire
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.
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 :
- 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
- 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.
- 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.
- 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.
- Déposez un TButton sur le TEdit et définissez les propriétés suivantes dans l'inspecteur d'objets :
- 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 :
- Déposez l'un des deux composants fournisseur BaaS sur la fiche TKinveyProvider ou TParseProvider selon le fournisseur backend utilisé dans votre app.
- 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é.
- 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.
- 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 :
- 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 pour Kinvey. Dans Parse, le mot query doit être remplacé par where, ce qui fait que si vous utilisez Parse en tant que fournisseur BaaS, la ligne doit être comme suit : 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 pour Kinvey. Dans Parse, le mot query doit être remplacé par where, ce qui fait que si vous utilisez Parse en tant que fournisseur BaaS, la ligne doit être comme suit : LQuery := Format('where={"item":"%s"}', [(Sender as TListView).Items[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.
- 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.
- 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(); } }
- 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(); }
- 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();
- 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 :
- Dans la fenêtre 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 macOS) lorsque la saisie tactile est disponible.
- Sélectionnez Exécuter > Exécuter ou Exécuter > Exécuter sans débogage.
- 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 |
|---|---|
|
|
|
Voir aussi
- Présentation de BaaS
- Introduction à Kinvey et Parse
- Gestion des utilisateurs BaaS
- Utilisation de BaaS pour le stockage backend