Máquina de café

Esta aplicación demuestra una forma multiplataforma, multitamaño de pantalla y responsive de implementar una interfaz de usuario típica para el pedido de productos.

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.

Recorrido de la interfaz de usuario

Esta sección le guiará a través del flujo de usuario típico de la aplicación.

Seleccionar una receta

La aplicación de la máquina de café le permite elegir un tipo de café e indica cuántos cafés de ese tipo le quedan por pedir.

Personalización del café

Una vez seleccionada una receta, la aplicación muestra qué proporción contendrá la mezcla de café

• café preparado
• leche caliente
• espuma de leche
• azúcar

Esta proporción puede modificarse mediante controles deslizantes.

Visualización del estado de preparación

Una vez que el usuario ha confirmado que la taza está en la máquina, se inicia la infusión.

Una vez iniciada la preparación, la aplicación muestra una animación del proceso de preparación.

El café está listo

Una vez finalizado el proceso de infusión, la aplicación muestra la taza de café con la mezcla deseada durante unos segundos antes de volver a la página de inicio.

Cómo funciona

A continuación explicamos cómo se implementan estas funciones.

Adaptación al tamaño y orientación de la pantalla

El objeto raíz de la ventana de la aplicación tiene valores iniciales para la altura y la anchura, que se utilizarán como tamaño de la ventana en las plataformas de escritorio. El valor predeterminado QWindow::AutomaticVisibility garantiza que la ventana se mostrará maximizada o a pantalla completa en las plataformas que lo requieran, como las móviles.

ApplicationWindow {
    visible: true
    width: 1000
    height: 600
    title: qsTr("Coffee")

    background: Rectangle {
        color: Colors.currentTheme.background
    }

A partir de ahí, los objetos hijos de ApplicationWindow obtienen el tamaño de ApplicationWindow para determinar sus propios tamaños en consecuencia.

La aplicación utiliza GridLayout en todos los componentes de la página de la aplicación para adaptarse fácilmente a los cambios de orientación de la pantalla.

{La pantalla cambia a horizontal cuando la orientación del dispositivo Android es horizontal}

{El modo horizontal es la orientación por defecto en el escritorio de Windows}

Navegación por las páginas de la aplicación

La aplicación utiliza StackView tipo QML para mostrar las diferentes páginas de la app. El StackView manejo de los diferentes componentes de la página se implementa en ApplicationFlowForm.ui.qml.

La navegación de una página a la siguiente provoca un cambio de estado en ApplicationFlow.qml, donde los cambios de propiedad necesarios son gestionados por el tipo PropertyChanges QML:

states: [
    State {
        name: "Home"
        PropertyChanges {
            target: toolbar
            backButton.opacity: 0
            backButton.enabled: false
            themeButton.opacity: 0
            themeButton.enabled: false
            logo.sourceSize.width: 70
            logo.sourceSize.height: 50
        }

Las animaciones que tienen lugar durante estos cambios de estado se implementan con Transition y PropertyAnimation dentro del componente StackView en ApplicationFLowForm.ui.qml.

Implementación de la página de inicio

La aplicación comienza mostrando la página Home al usuario como elemento inicial en StackView:

StackView {
    id: stack
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.topMargin: parent.height / 20

    pushEnter: Transition {
        PropertyAnimation {
            property: "x"
            from: stack.width
            to: 0
            duration: 400
        }
    }

El componente Home se estructura colocando el componente Item como objeto raíz con máquina de estados y alias de propiedades apropiados, seguido de GridLayout. Este mismo tipo de estructuración se utilizará en todos los componentes de la página de la aplicación.

La página Home muestra una imagen de una taza de café con el logotipo de Qt en la parte superior, Coffee Machine como título, un pie de foto con alguna información pegadiza sobre lo que el usuario puede esperar y un botón getStartedButton.

El usuario puede avanzar pulsando el botón getStartedButton, la función onClicked se implementa ApplicationFlow.qml:

getStartedbutton.onClicked: {
    applicationFlow.state = "Coffee-selection"
    applicationFlow.stack.pushItem(applicationFlow.choosingCoffee, {appFlow: applicationFlow})
}

Esto provocará el cambio de estado a "Selección de café" en ApplicationFlow.qml y empujará el componente choosingCoffee encima del componente Home en StackView.

Implementación de la selección de café

En la página de selección de café se muestra ChoosingCoffee.qml, aquí el usuario ve 4 opciones diferentes de café para elegir. Estas opciones se muestran como CoffeeCards que se encuentran dentro de GridLayout en ChoosingCoffee.qml:

GridLayout {
    id: cards
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.top: parent.top
    rowSpacing: 20
    columnSpacing: 20
    CoffeeCard {
        id: cappuccino
        coffeeName: "Cappuccino"
        ingredients: "Milk, Espresso, Foam"
        time: 2
    }
    CoffeeCard {
        id: latte
        coffeeName: "Latte"
        ingredients: "Coffee, Foam"
        time: 3
    }
    CoffeeCard {
        id: espresso
        coffeeName: "Espresso"
        ingredients: "Milk, Espresso"
        time: 2
    }
    CoffeeCard {
        id: macchiato
        coffeeName: "Macchiato"
        ingredients: "Milk foam, Espresso"
        time: 4
    }
}

La implementación de CoffeeCard se encuentra en CoffeeCard.qml.

Estas tarjetas pueden mostrarse en forma de cuadrícula o de fila dependiendo de las propiedades de ancho y alto de pantalla disponibles que el objeto raíz ApplicationWindow sigue y pasa al ChoosingCoffee.qml y al GridLayout a través de la máquina de estados.

CoffeeCards varían en sus nombres, tiempos de infusión, ingredientes y cuántas tazas hay disponibles en ese momento.

En esta página, el usuario también puede cambiar el tema de la aplicación por primera vez pulsando el pequeño botón con forma de sol de la esquina superior derecha de la pantalla. Al pulsar el botón de tema se llama a la función themeButton de ApplicationFlow.qml:

function themeButton() {
    if (Colors.currentTheme == Colors.dark) {
        Colors.currentTheme = Colors.light
    } else {
        Colors.currentTheme = Colors.dark
    }
}

La función cambia la propiedad currentTheme de Colors.qml y los colores cambian a lo largo de la aplicación automáticamente. Todos los colores utilizados en la aplicación se encuentran en Colors.qml.

Si el tema cambia a claro, el icono del botón de cambio de tema se convierte en una media luna.

Al pulsar sobre cualquiera de las tarjetas de café se produce un cambio de estado dentro de AbstractButton en CoffeeCard.qml que a su vez desencadena NumberAnimation a Transition:

AbstractButton {
    width: parent.width - 2
    height: parent.height - 2
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter
    id: button
    hoverEnabled: true
    checkable: true
    enabled: (root.cupsLeft != 0) ? true : false
    transitions: Transition {
        NumberAnimation {
            properties: "scale"
            duration: 50
            easing.type: Easing.InOutQuad
        }
    }

Esto reducirá el tamaño de la tarjeta de café seleccionada y hará que los bordes de la tarjeta se vuelvan verdes, lo que indicará al usuario que el café ha sido seleccionado.

Cada tarjeta de café button propiedad alias onClicked función se une a una función ubicada en ApplicationFlow.qml. Cuando el usuario pulsa cualquiera de las tarjetas de café, se llama a la función cuyo nombre se corresponde con la opción de café elegida. La función establecerá el estado de ApplicationFlow.qml en Settings, introducirá un nuevo componente en StackView y establecerá las propiedades de los ingredientes en consecuencia.

Configuración del café

En esta página, el usuario puede personalizar su opción de café según sus preferencias ajustando los tipos QML personalizados de Slider. Cambiar el valor de los deslizadores afectará a los niveles de líquido que se ven dentro de la taza de café, esto es posible vinculando la altura de las imágenes de líquido dentro de Cup.qml a los valores de los deslizadores correspondientes.

Los valores de los deslizadores en la página Settings se almacenan en CoffeeConfig para su uso posterior utilizando el tipo Qml Synchronizer.

Synchronizer {
     sourceObject: settingsForm.coffeeConfig
     sourceProperty: "sugarAmount"
     targetObject: settingsForm.sugarSlider
     targetProperty: "value"
}

Al hacer clic en el botón Inicio, el estado de ApplicationFlow.qml cambia a "Insertar", y la aplicación muestra la página Insert.qml.

Implementación de la taza de inserción

En esta página se indica al usuario que inserte su taza en la máquina antes de que pueda iniciarse el proceso de elaboración.

Al pulsar el botón Continue, la aplicación pasa a la página Progress.

Preparación del café

La página de progreso muestra una taza de café y una barra de progreso que, a su manera, indican el proceso de preparación en tiempo real.

La taza de café, una vez llena, mostrará exactamente la misma configuración que la seleccionada por el usuario en la página Settings. Esto se consigue vinculando las variables de propiedad de Cup a los valores correspondientes guardados en ApplicationFlow.qml.

La animación para llenar la taza de café ocurre con los motores de estado Transition y SmoothedAnimation.

Cup {
    id: cup
    Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
    state: "0"
}

La animación de la barra de progreso se implementa con Behavior.

Behavior on greenBar.width {
    SmoothedAnimation {
        easing.type: Easing.Linear
        velocity: (progressForm.contentItem.width / progressForm.brewTime) * 1000
    }
}

Timer se encargará de actualizar el estado de la aplicación una vez finalizada la preparación del café.

Timer {
    id: timer
    interval: progressForm.brewTime
    running: true
    onTriggered: {
        progressForm.appFlow.onFinished()
    }
}

Implementación de café listo

La página Listo muestra una taza de café llena con la configuración que el usuario haya seleccionado con un texto "Su café está listo" y un icono de verificación.

Cuando se muestra esta página, un Timer comienza a funcionar y una vez que se alcanza el intervalo establecido el usuario es dirigido de nuevo a Home.qml.

Archivos fuente

Pruebas de Squish GUI

Esta aplicación viene con pruebas Squish GUI dirigidas a Qt para Android. Las pruebas se realizan con Squish para Qt y están escritas en Python y se pueden encontrar en el directorio de pruebas de la aplicación.

Cuando utilice Squish para Qt para Android, asegúrese de utilizar el hook incorporado de Qt y reenviar el puerto de Squish con adb. Si recibes el error "Cannot load library" con dlopen fallando, desactiva QT_USE_TARGET_ANDROID_BUILD_DIR de la configuración CMake, o bórralo de Projects->Build Settings->CMake->Current Configuration en Qt Creator.

Si no tienes una licencia de Squish, puedes obtener una prueba gratuita.

Proyecto de ejemplo @ code.qt.io