Qt Quick Demo - RESTful-API-Client

Dieses Beispiel zeigt, wie ein einfacher QML RESTful API-Client mit einem imaginären Farbpalettendienst erstellt wird. Die Anwendung verwendet RESTful-Kommunikation mit dem ausgewählten Server, um Daten anzufordern und zu senden. Der REST-Dienst wird als QML-Element bereitgestellt, dessen untergeordnete Elemente die einzelnen vom Server bereitgestellten JSON-Daten-APIs umhüllen.

Funktionalität der Anwendung

Das Beispiel bietet die folgenden grundlegenden Funktionalitäten:

• Auswahl des Servers, mit dem kommuniziert werden soll
• Benutzer und Farben auflisten
• Benutzer anmelden und abmelden
• Ändern und Erstellen neuer Farben

Auswahl des Servers

Beim Start der Anwendung werden die Optionen für den Farbpalettenserver angezeigt, mit dem kommuniziert werden soll. Die vordefinierten Optionen sind:

• reqres.in, ein öffentlich verfügbarer REST-API-Testdienst
• Qt-basiertes REST-API-Server-Beispiel in QtHttpServer

Nach der Auswahl gibt der RESTful API-Client einen Test-HTTP-GET an die Farb-API aus, um zu prüfen, ob der Dienst zugänglich ist.

Ein wesentlicher Unterschied zwischen den beiden vordefinierten API-Optionen besteht darin, dass es sich bei dem Qt-basierten REST-API-Server-Beispiel um eine zustandsabhängige Anwendung handelt, die das Ändern von Farben ermöglicht, während reqres.in ein zustandsloser API-Testdienst ist. Mit anderen Worten: Bei Verwendung des reqres.in-Backends hat die Änderung der Farben keine dauerhaften Auswirkungen.

Benutzer und Farben auflisten

Die Benutzer und Farben sind paginierte Ressourcen auf der Server-Seite. Das bedeutet, dass der Server die Daten in Abschnitten, den so genannten Seiten, bereitstellt. Die UI-Liste spiegelt diese Paginierung wider und zeigt die Daten auf Seiten an.

Die Anzeige der Daten auf der Benutzeroberfläche erfolgt mit Standard-QML-Ansichten:

ListView {
    id: colorListView

    model: root.colors.data

Dabei ist das Modell eine Liste von JSON-Daten, die vom Server empfangen wurden.

Einloggen

Die Anmeldung erfolgt über die Login-Funktion, die vom Login-Popup bereitgestellt wird:

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

Unter der Haube sendet die Anmeldung eine HTTP POST-Anfrage. Nach Erhalt einer erfolgreichen Antwort wird das Autorisierungs-Token aus der Antwort extrahiert, das wiederum in nachfolgenden HTTP-Anfragen, die das Token benötigen, verwendet wird.

Bearbeitung von Farben

Das Bearbeiten und Hinzufügen neuer Farben erfolgt in einem Popup-Fenster:

Beachten Sie, dass das Hochladen der Farbänderungen auf den Server voraussetzt, dass sich der Benutzer angemeldet hat.

REST-Implementierung

Das Beispiel veranschaulicht eine Möglichkeit, einen REST-Dienst aus einzelnen Ressourcenelementen zusammenzustellen. In diesem Beispiel sind die Ressourcen die paginierten Benutzer- und Farbressourcen sowie der Anmeldedienst. Die Ressourcenelemente sind durch die Basis-URL (Server-URL) und den gemeinsamen Netzzugangsmanager miteinander verbunden.

Die Grundlage des REST-Dienstes ist das Element RestService, dessen untergeordnete Elemente den eigentlichen Dienst bilden:

RestService {
    id: paletteService

    PaginatedResource {
        id: users
        path: "users"
    }

    PaginatedResource {
        id: colors
        path: "unknown"
    }

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

Bei der Instanziierung schleift das RestService-Element seine Kinderelemente und richtet sie so ein, dass sie denselben Netzzugangsmanager verwenden. Auf diese Weise teilen sich die einzelnen Ressourcen die gleichen Zugangsdaten wie die Server-URL und das Autorisierungs-Token.

Die eigentliche Kommunikation erfolgt mit einem Rest Access Manager, der einige Komfortfunktionen implementiert, um speziell mit HTTP REST APIs umzugehen, und sich effektiv um das Senden und Empfangen der QNetworkRequest und QNetworkReply kümmert, je nach Bedarf.

Ausführen des Beispiels

Zum Ausführen des Beispiels von Qt Creatorzu starten, öffnen Sie den Modus Welcome und wählen Sie das Beispiel unter Examples aus. Weitere Informationen finden Sie unter Erstellen und Ausführen eines Beispiels.

Beispielprojekt @ code.qt.io