Client REST multi-plateforme FireMonkey

Introduction

Les web méthodes du serveur REST précédemment implémenté peuvent être exploitées par n’importe quelle application cliente utilisant le protocole HTTP, ce qui permet par ailleurs de réaliser une application embarquée dans un navigateur.

Dans ce chapitre, nous allons regarder comment faire simplement une application multi-plateforme utilisant le framework FireMonkey compatible Windows/iOS/Android et Linux (Ubuntu) tout en suivant le design pattern MVC comme dans le chapitre Serveur d’application REST. Les unités gérant les modèles seront les mêmes que celles utilisées pour l’implémentation du serveur.

1. Design graphique

Le design graphique de l’application s’appuie sur une fenêtre principale portant un TTabControl qui gère la navigation entre les écrans.

La fenêtre principale sera délimitée en trois zones : la zone haute aussi appelée Header, la zone du milieu où se trouve le TTabControl où les différents écrans apparaîtront et la zone basse, aussi appelée Footer, qui ne sera pas utilisée dans le cas présent.

Dans le Header pourront apparaître deux menus qui permettront de se déconnecter et d’accéder à la page de gestion du compte quand un utilisateur est logué.

Ci-dessous une capture d’écran de l’application dans l’attente d’un utilisateur logué :

On dénombre trois écrans.

L’écran d’accueil

Cet écran apparaît au démarrage de l’application ou une fois qu’on est délogué. Il propose de s’inscrire ou de se connecter si on est déjà inscrit.

L’écran de choix d’objet

Une fois qu’un utilisateur est logué, la page de sélection des objets apparaît comme dans la capture d’écran ci-dessous :

Le design de l’écran de sélection d’objet est similaire à celui réalisée au chapitre Utilisation du design pattern MVC. La zone vide en haut à gauche est la représentation graphique...

Appel REST simple, enregistrement d’un utilisateur

Le point d’entrée de cette action est l’appui sur le bouton Inscription de l’IHM comme dans la capture d’écran ci-dessous :

L’implémentation de la méthode appelée dans le cas de l’appui sur ce bouton est écrite ci-dessous :

procedure THeaderFooterwithNavigation.btnRegisterClick(Sender: TObject); 
begin 
 FClientControler.RegisterUser(edtRegisterLogin.Text, 
edtRegisterPassword1.Text, edtRegisterPassword2.Text); 
end; 

procedure TClientControler.RegisterUser(login, password1, 
password2: string); 
var aResult :TJsonResult; 
begin 
 FCurrentAction := twmregister; 
 if (password1=password2) then 
 begin 
   DoRegisterUser(login,password1); 
 end 
 else 
 begin 
   aResult :=TJsonResult.Create(errPasswordNotComplete); 
   FCurrentResult := aResult; 
   DoActionCompleted; 
 end; 
end; 

Si la règle sur le mot de passe n’est pas respectée, une erreur est renvoyée par le mécanisme de callback.

Pour rappel, il a été prévu au chapitre Serveur d’application REST que l’enregistrement d’un utilisateur se fasse par l’appel :

POST http://www.myecommerce.fr/delphi/users 

L’exécution de la requête REST se fait dans la méthode DoRegisterUser dont l’implémentation est écrite ci-dessous :

procedure TClientControler.DoRegisterUser(login, password:string); 
var aJson:TJsonObject; 
   aResult :TJsonResult; 
begin 
 aResult := TJsonResult.Create(errSuccess); 
 RESTClient.BaseURL := c_BaseURL+'delphi/users'; 
 RESTRequest.Method := rmPost; 
 aJson := CreateLoginPasswordJson(login,password); 
 RESTRequest.ClearBody; 
 RESTRequest.AddBody(aJson); ...

Authentification REST de type Basic et login d’un utilisateur

Le point d’entrée de cette action est l’appui sur le bouton Connexion de l’IHM comme dans la capture d’écran ci-dessous :

L’implémentation de la méthode appelée dans le cas de l’appui sur le bouton Connexion est présentée ci-dessous :

procedure THeaderFooterwithNavigation.btnLoginClick (Sender: TObject); 
begin 
 FClientControler.LoginUser(edtLogin.Text,edtPassword.Text); end; 

procedure TClientControler.LoginUser(login, password: string); 
var Authent:THTTPBasicAuthenticator; 
    aResult :TJsonResult; 
begin 
 FCurrentAction := twmLogin; 
 aResult := TJsonResult.Create(errSuccess); 
 HTTPBasicAuthenticator.Username := login; 
 HTTPBasicAuthenticator.Password := password; 
 RESTClient.Authenticator := HTTPBasicAuthenticator; 
 RESTClient.BaseURL := c_BaseURL+'delphi/tokens'; 
 RESTRequest.Method := rmPost; 
 RESTRequest.ClearBody; 
 RESTRequest.ExecuteAsync( 
   procedure 
   begin 
     FCurrentStatusCode := RESTResponse.StatusCode; 
 ...

Utilisation du Livebinding avec un modèle de données

Concernant les appels REST, il n’y a pas grand-chose à connaître en plus. Encore une fois, l’implémentation de l’appel est similaire aux deux autres cas d’usage vus précédemment :

procedure TClientControler.GetItemList; 
  var aResult :TJsonResult; 
  tmpStr:string; 
begin 
  FCurrentAction := twmgetshop; 
  aResult := TJsonResult.Create(errSuccess); 
  RESTClient.BaseURL := c_BaseURL+'delphi/items'; 
  RESTRequest.Method := rmGET; 
  RESTRequest.ClearBody; 
  RESTRequest.ExecuteAsync( 
    procedure 
    begin 
      FCurrentStatusCode := RESTResponse.StatusCode; 
      aResult.ParseJsonString(RESTResponse.Content); 
      FCurrentResult := aResult; 
      TThread.Queue(nil,DoActionCompleted); 
    end, 
    False 
  ); 
end; 

Par contre, ce cas d’application va permettre de voir comment utiliser un modèle de données à travers le concepteur de liaison visuel.

Pour rappel, le modèle de produit est comme suit :

 type TProduct = class(Tobject) 
  private 
    FId : integer; 
    Fname : string; 
    FDescription : string; 
    FPrice : double; 
    Fimage :TImage; 
    function GetImageFormat:string; 
    function GetBitmap:TBitMap; 
  public 
    property Id : integer read FId write FId; 
    property name : string  read Fname write Fname; 
    property Description : string read FDescription write 
FDescription; 
    property Price : double  read FPrice write FPrice; 
    property Image :TImage read FImage write FImage; 
    property Bitmap :TBitmap read GetBitmap; 
    constructor Create;reintroduce; 
    function GetImageURL(aPath:string):string; 
    procedure ExportImageToFile(anImageFolderPath:string); 
end; 

L’appel...