Qt Quick デモ - RESTful API クライアント

この例では、架空のカラーパレットサービスを例に、基本的なQML RESTful APIクライアントの作成方法を示します。このアプリケーションは、ローカルサーバーとの間でRESTful通信を行い、データの要求や送信を行います。RESTサービスはQML要素として提供されており、その子要素はサーバーが提供する個々のJSONデータAPIをラップしています。

例の動作確認

以下の手順でサンプルを実行できます：

• Qt Creator

  Welcome モードを開き、Examples からこの例を選択します。詳細については、Qt Creator の「チュートリアル：ビルドと実行」を参照してください。

• Qt Extension for Visual Studio Code

  Command Palette から `Qt: Open Qt examples ` コマンドを実行し、リストから例を選択します。詳細については、Qt Extension for Visual Studio Code の「チュートリアル: ビルドと実行」を参照してください。

アプリケーションの機能

このサンプルでは、以下の基本機能を提供しています：

• ユーザーと色の一覧表示
• ユーザーのログインおよびログアウト
• 色の変更および新規作成

サーバーの実行

クライアントは、QtHttpServer にあるQt ベースの REST API サーバーのサンプルと通信します。このサーバーはhttp://127.0.0.1:49425 でリクエストを待機しています。クライアントを起動する前に、このサーバーを起動してください。

クライアントは起動時に接続し、カラーAPIに対してHTTP GETリクエストを発行します。サーバーに接続できない場合、ダイアログに接続失敗のメッセージが表示され、サーバーが稼働し次第、再試行できるようになります。

この Qt ベースの REST API サーバーは、色の変更が可能なステートフルなアプリケーションであり、変更内容はサーバープロセスの存続期間中保持されます。

ユーザーと色のリスト表示

ユーザーと色は、サーバー側でページ分割されたリソースとして扱われます。つまり、サーバーはデータを「ページ」と呼ばれるチャンク単位で提供します。一覧表示するUIはこのページ分割を反映しており、データをページ単位で表示します。

UI でのデータの表示は、標準の QML ビューを使用して行われます：

ListView {
    id: colorListView

    model: root.colors.data

ここで、モデルはサーバーから受信したJSONデータのリストです。

ログイン

ログインは、ログインポップアップが提供するログイン機能を通じて行われます：

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

内部的には、ログイン処理はHTTP POSTリクエストを送信します。正常なレスポンスを受信すると、そのレスポンスから認証トークンが抽出され、その後、トークンを必要とするHTTPリクエストでこのトークンが使用されます。

色の編集

色の編集や新しい色の追加は、ポップアップで行われます：

なお、色の変更をサーバーに反映させるには、ユーザーがログインしている必要があります。

RESTの実装

この例は、個々のリソース要素からRESTサービスを構成する一例を示しています。この例では、リソースとしてページネーションが適用されたuser およびcolor リソースに加え、ログインサービスが使用されています。これらのリソース要素は、ベースURL（サーバーURL）と共有のネットワークアクセスマネージャによって結び付けられています。

REST サービスの基盤となるのはRestService 要素であり、その子要素が実際のサービスを構成しています：

RestService {
    id: paletteService
    url: window.serverUrl

    PaginatedResource {
        id: users
        path: "users"
    }

    PaginatedResource {
        id: colorPalette
        path: "unknown"
    }

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

インスタンス化されると、RestService 要素はその子要素を順に処理し、それらすべてが同じネットワークアクセスマネージャーを使用するように設定します。これにより、個々のリソースは、サーバーURLや認証トークンなどのアクセス詳細情報を共有することになります。

実際の通信は、HTTP REST APIを具体的に扱うための便利な機能を実装し、必要に応じてQNetworkRequest およびQNetworkReply の送受信を効率的に処理するRESTアクセスマネージャによって行われます。

ソースファイル

code.qt.io 上のサンプルプロジェクト