Qt Quick 데모 - RESTful API 클라이언트

이 예는 가상의 컬러 팔레트 서비스를 사용하여 기본 QML RESTful API 클라이언트를 만드는 방법을 보여줍니다. 이 애플리케이션은 선택한 서버와의 RESTful 통신을 사용하여 데이터를 요청하고 전송합니다. REST 서비스는 서버에서 제공하는 개별 JSON 데이터 API를 래핑하는 하위 요소가 있는 QML 요소로 제공됩니다.

애플리케이션 기능

이 예제에서는 다음과 같은 기본 기능을 제공합니다:

• 통신할 서버 선택
• 사용자 및 색상 목록
• 사용자 로그인 및 로그아웃
• 색상 수정 및 새 색상 만들기

서버 선택

애플리케이션을 시작하면 색상표 서버와 통신할 수 있는 옵션이 표시됩니다. 미리 정의된 옵션은 다음과 같습니다:

• 공개적으로 사용 가능한 REST API 테스트 서비스인reqres.in
• 의Qt 기반 REST API 서버 예제 QtHttpServer

이 옵션을 선택하면 RESTful API 클라이언트가 컬러 API에 테스트 HTTP GET을 발행하여 서비스에 액세스할 수 있는지 확인합니다.

미리 정의된 두 가지 API 옵션의 가장 큰 차이점은 Qt 기반 REST API 서버 예제는 색상을 수정할 수 있는 상태 저장 애플리케이션인 반면, reqres.in은 상태 저장 없는 API 테스트 서비스라는 점입니다. 즉, reqres.in 백엔드를 사용할 때 색상을 수정해도 지속적인 영향을 미치지 않습니다.

사용자 및 색상 나열

사용자와 색상은 서버 측에서 페이지가 매겨진 리소스입니다. 즉, 서버는 페이지라는 청크 단위로 데이터를 제공합니다. 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 서비스를 구성하는 한 가지 방법을 보여줍니다. 이 예에서 리소스는 페이지가 지정된 사용자 및 색상 리소스와 로그인 서비스입니다. 리소스 요소는 기본 URL(서버 URL)과 공유 네트워크 액세스 관리자에 의해 함께 바인딩됩니다.

REST 서비스의 기본은 RestService 요소이며, 이 요소의 하위 항목이 실제 서비스를 구성합니다:

RestService {
    id: paletteService

    PaginatedResource {
        id: users
        path: "users"
    }

    PaginatedResource {
        id: colors
        path: "unknown"
    }

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

인스턴스화 시 RestService 요소는 하위 요소를 루핑하고 동일한 네트워크 액세스 관리자를 사용하도록 설정합니다. 이렇게 하면 개별 리소스가 서버 URL 및 권한 부여 토큰과 같은 동일한 액세스 세부 정보를 공유하게 됩니다.

실제 통신은 HTTP REST API를 특별히 처리하기 위한 몇 가지 편의 기능을 구현하고 필요에 따라 QNetworkRequest 및 QNetworkReply 송수신을 효과적으로 처리하는 rest 액세스 관리자를 통해 이루어집니다.

예제 실행하기

에서 예제를 실행하려면 Qt Creator에서 Welcome 모드를 열고 Examples 에서 예제를 선택합니다. 자세한 내용은 예제 빌드 및 실행하기를 참조하세요.

예제 프로젝트 @ code.qt.io