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의 예제 프로젝트