Qt Quick Demo - Cliente API RESTful

Este ejemplo muestra cómo crear un cliente API RESTful QML básico con un servicio de paleta de colores imaginario. La aplicación utiliza la comunicación RESTful con el servidor seleccionado para solicitar y enviar datos. El servicio REST se proporciona como un elemento QML cuyos elementos hijo envuelven las API de datos JSON individuales proporcionadas por el servidor.

Ejecución del ejemplo

Para ejecutar el ejemplo desde Qt Creatorabra el modo Welcome y seleccione el ejemplo de Examples. Para más información, consulta Qt Creator: Tutorial: Construir y ejecutar.

Funcionalidad de la aplicación

El ejemplo proporciona las siguientes funcionalidades básicas:

• Seleccionar el servidor con el que comunicarse
• Listar usuarios y colores
• Iniciar y cerrar sesión de usuarios
• Modificar y crear nuevos colores

Selección del servidor

Al iniciarse, la aplicación presenta opciones predefinidas con las que el servidor de la paleta de colores puede comunicarse:

• reqres.in, un servicio de prueba de API REST disponible públicamente
• Ejemplo de servidor API REST basado en Qt en QtHttpServer

Una vez seleccionado, el cliente de la API RESTful emite un GET HTTP de prueba a la API de color para comprobar si el servicio es accesible.

Una diferencia importante entre las dos opciones de API predefinidas es que el ejemplo de servidor de API REST basado en Qt es una aplicación con estado que permite modificar los colores, mientras que reqres.in es un servicio de prueba de API sin estado. En otras palabras, cuando se utiliza el backend reqres.in, la modificación de los colores no tiene ningún impacto duradero.

Lista de usuarios y colores

Los usuarios y los colores son recursos paginados en el lado del servidor. Esto significa que el servidor proporciona los datos en trozos llamados páginas. El listado de la interfaz de usuario refleja esta paginación y visualiza los datos en páginas.

La visualización de los datos en la interfaz de usuario se realiza con vistas QML estándar:

ListView {
    id: colorListView

    model: root.colors.data

Donde el modelo es una lista de datos JSON recibidos del servidor.

Inicio de sesión

El inicio de sesión se produce a través de la función de inicio de sesión proporcionada por la ventana emergente de inicio de sesión:

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

Bajo el capó, el inicio de sesión envía una solicitud HTTP POST. Al recibir una respuesta satisfactoria, el token de autorización se extrae de la respuesta, que se utiliza en posteriores peticiones HTTP que requieran el token.

Edición de colores

La edición y adición de nuevos colores se realiza en una ventana emergente:

Tenga en cuenta que para cargar los cambios de color en el servidor es necesario que el usuario haya iniciado sesión.

Implementación REST

El ejemplo ilustra una forma de componer un servicio REST a partir de elementos de recursos individuales. En este ejemplo, los recursos son los recursos paginados user y color más el servicio de inicio de sesión. Los elementos de recursos están unidos por la URL base (URL del servidor) y el gestor de acceso a la red compartida.

La base del servicio REST es el elemento RestService, cuyos elementos hijos componen el servicio real:

RestService {
    id: paletteService

    PaginatedResource {
        id: users
        path: "users"
    }

    PaginatedResource {
        id: colors
        path: "unknown"
    }

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

Al instanciarse, el elemento RestService hace un bucle con sus elementos hijos y los configura para que utilicen el mismo gestor de acceso a la red. De este modo, los recursos individuales comparten los mismos detalles de acceso, como la URL del servidor y el token de autorización.

La comunicación real se realiza con un gestor de acceso restante que implementa algunas funciones prácticas para tratar específicamente con las API REST de HTTP y se encarga de enviar y recibir QNetworkRequest y QNetworkReply según sea necesario.

Archivos fuente

Proyecto de ejemplo @ code.qt.io