Qt Quick Démonstration - Client API RESTful

Cet exemple montre comment créer un client API RESTful QML basique avec un service de palette de couleurs fictif. L’application utilise la communication RESTful avec un serveur local pour demander et envoyer des données. Le service REST est fourni sous la forme d’un élément QML dont les éléments enfants encapsulent les différentes API de données JSON fournies par le serveur.

Exécution de l'exemple

Vous pouvez exécuter l’exemple à partir de :

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l’exemple dans « Examples ». Pour plus d’informations, consultez Qt Creator: Tutoriel : Compiler et exécuter.

• Qt Extension for Visual Studio Code

  Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.

Fonctionnalités de l'application

L'exemple offre les fonctionnalités de base suivantes :

• Liste des utilisateurs et des couleurs
• Connexion et déconnexion des utilisateurs
• Modification et création de nouvelles couleurs

Exécution du serveur

Le client communique avec l'exemple de serveur API REST basé sur Qt XML disponible à l'adresse QtHttpServer, qui écoute sur le port http://127.0.0.1:49425. Démarrez ce serveur avant de lancer le client.

Le client se connecte au démarrage et envoie une requête HTTP GET à l'API de couleurs. Si le serveur est inaccessible, une boîte de dialogue signale l'échec de la connexion et vous permet de réessayer une fois que le serveur est en cours d'exécution.

Le serveur d’API REST basé sur Qt est une application avec état qui vous permet de modifier les couleurs ; les modifications sont conservées pendant toute la durée de vie du processus serveur.

Lister les utilisateurs et les couleurs

Les utilisateurs et les couleurs sont des ressources paginées côté serveur. Cela signifie que le serveur fournit les données par blocs appelés « pages ». L’interface utilisateur reflète cette pagination et affiche les données par pages.

L’affichage des données dans l’interface utilisateur s’effectue à l’aide de vues QML standard :

ListView {
    id: colorListView

    model: root.colors.data

Le modèle étant une liste de données JSON reçues du serveur.

Connexion

La connexion s'effectue via la fonction de connexion fournie par la fenêtre contextuelle de connexion :

userMenu.userLoginService.login({"email" : userInfo.modelData.email,
                    "password" : "apassword",
                    "id" : userInfo.modelData.id})

En arrière-plan, la connexion envoie une requête HTTP POST. Une fois la réponse reçue, le jeton d’autorisation est extrait de celle-ci, puis utilisé dans les requêtes HTTP suivantes qui nécessitent ce jeton.

Modification des couleurs

La modification et l'ajout de nouvelles couleurs s'effectuent dans une fenêtre contextuelle :

Notez que la mise en ligne des modifications de couleurs sur le serveur nécessite que l'utilisateur soit connecté.

Implémentation REST

Cet exemple illustre une manière de composer un service REST à partir d'éléments de ressources individuels. Dans cet exemple, les ressources sont les ressources paginées user et color, ainsi que le service de connexion. Les éléments de ressources sont reliés entre eux par l'URL de base (URL du serveur) et le gestionnaire d'accès réseau partagé.

Le service REST repose sur l’élément ` RestService `, dont les éléments enfants composent le service proprement dit :

RestService {
    id: paletteService
    url: window.serverUrl

    PaginatedResource {
        id: users
        path: "users"
    }

    PaginatedResource {
        id: colorPalette
        path: "unknown"
    }

    BasicLogin {
        id: colorLogin
        loginPath: "login"
        logoutPath: "logout"
    }
}

Lors de son instanciation, l’élément RestService parcourt ses éléments enfants et les configure pour qu’ils utilisent le même gestionnaire d’accès réseau. De cette manière, les ressources individuelles partagent les mêmes informations d’accès, telles que l’URL du serveur et le jeton d’autorisation.

La communication proprement dite s’effectue via un gestionnaire d’accès REST qui implémente des fonctionnalités pratiques pour gérer spécifiquement les API REST HTTP et assure efficacement l’envoi et la réception des éléments ` QNetworkRequest ` et ` QNetworkReply ` selon les besoins.

Fichiers source

Exemple de projet sur code.qt.io