Demostración de compra dentro de la aplicación

¿Qué es esta demo?

Esta demo es una aplicación de juego para móviles basada en el clásico juego de adivinar palabras Hangman, donde las vocales se pueden comprar a través de la tienda interna de la demo. En el juego se te presentará una fila de guiones, que representan letras de la palabra a adivinar. Al adivinar una letra correcta que aparece en la palabra dada, la letra se colocará en el guión o guiones correspondientes de la palabra. Al adivinar todas las letras de la palabra o adivinar toda la palabra correctamente en cualquier momento, el juego habrá terminado y habrás ganado. Si la adivinación es incorrecta, se dibuja un elemento de una figura de palo colgante. Una vez completada la figura, se acaban las adivinanzas y se pierde.

La demo muestra cómo es posible ofrecer productos in-app dentro de una aplicación Qt, para las plataformas Android e iOS. Para probar la funcionalidad de compra dentro de la aplicación en la demo, primero debes registrar la aplicación y sus productos en la tienda externa. Para obtener una introducción sobre cómo hacerlo, consulte las guías para Google Play y App Store respectivamente.

Tiendas de aplicaciones de terceros

Los productos in-app deben estar registrados en las tiendas de destino, antes de que puedan ser consultados o comprados en una aplicación. Recomendamos utilizar los mismos identificadores para los productos en cada tienda, ya que simplifica el código para consultar y comprar los productos.

• Registro de productos en Google Play
• Registro de productos en App Store

Cómo funciona la demo

La demo es una aplicación QML que registra tipos QML para acceder a información sobre productos in-app, así como para solicitar compras de dichos productos. Éstos se registran en la tienda externa de la plataforma de destino.

Las compras in-app se añaden a la aplicación añadiendo primero un objeto Store. En la demo, el objeto Store es creado por el componente MainView que se carga al iniciar la aplicación.

Store {
    id: iapStore
}

La demo define un componente para mostrar una tienda para comprar productos in-app disponibles. Estos productos deben ser registrados primero con el objeto tienda que creamos anteriormente en MainView. Hay dos productos disponibles, el primero es de tipo consumible.

Product {
    id: product100Vowels
    store: iapStore
    type: Product.Consumable
    identifier: "qt.io.demo.hangman.100vowels"

    onPurchaseSucceeded: {
        console.log(identifier + " purchase successful");
        //Add 100 Vowels
        applicationData.vowelsAvailable += 100;
        transaction.finalize();
        pageStack.pop();
    }

    onPurchaseFailed: {
        console.log(identifier + " purchase failed");
        console.log("reason: "
                    + transaction.failureReason === Transaction.CanceledByUser ? "Canceled" : transaction.errorString);
        transaction.finalize();
    }
}

Este producto consumible proporciona 100 vocales adicionales para ser utilizadas al adivinar palabras en el juego. Cuando se compra con éxito, actualizamos el estado de la aplicación para incluir 100 vocales adicionales. A continuación, llamamos a finalize() en el objeto de transacción para confirmar al almacén de la plataforma que se ha proporcionado el producto consumible.

El segundo producto es un tipo no consumible que desbloqueará vocales permanentemente en el futuro. Además de actualizar el estado de la aplicación en la compra, debemos asegurarnos de proporcionar una forma de restaurar esta compra en otros dispositivos utilizados por el usuario final. En este caso creamos un manejador de señales para onPurchaseRestored.

Product {
    id: productUnlockVowels
    type: Product.Unlockable
    store: iapStore
    identifier: "qt.io.demo.hangman.unlockvowels"

    onPurchaseSucceeded: {
        console.log(identifier + " purchase successful");
        applicationData.vowelsUnlocked = true;
        transaction.finalize();
        pageStack.pop();
    }

    onPurchaseFailed: {
        console.log(identifier + " purchase failed");
        console.log("reason: "
                    + transaction.failureReason === Transaction.CanceledByUser ? "Canceled" : transaction.errorString);
        transaction.finalize();
    }

    onPurchaseRestored: {
        console.log(identifier + " purchase restored");
        applicationData.vowelsUnlocked = true;
        console.log("timestamp: " + transaction.timestamp);
        transaction.finalize();
        pageStack.pop();
    }
}

Además de registrar los productos, la demo también proporciona una interfaz para comprar realmente el producto registrado. La demo define un componente personalizado llamado StoreItem para mostrar y manejar la interacción de compra.

Product {
    id: productUnlockVowels
    type: Product.Unlockable
    store: iapStore
    identifier: "qt.io.demo.hangman.unlockvowels"

    onPurchaseSucceeded: {
        console.log(identifier + " purchase successful");
        applicationData.vowelsUnlocked = true;
        transaction.finalize();
        pageStack.pop();
    }

    onPurchaseFailed: {
        console.log(identifier + " purchase failed");
        console.log("reason: "
                    + transaction.failureReason === Transaction.CanceledByUser ? "Canceled" : transaction.errorString);
        transaction.finalize();
    }

    onPurchaseRestored: {
        console.log(identifier + " purchase restored");
        applicationData.vowelsUnlocked = true;
        console.log("timestamp: " + transaction.timestamp);
        transaction.finalize();
        pageStack.pop();
    }
}

El componente StoreItem mostrará los datos del producto que se consulta desde la tienda de la plataforma, y llamará al método purchase() del producto cuando el usuario haga clic en él.

Text {
    id: titleText
    text: product.title
    font.bold: true
    anchors.right: priceText.left
    anchors.rightMargin: topLevel.globalMargin
    anchors.top: parent.top
    anchors.topMargin: topLevel.globalMargin
    anchors.left: parent.left
    anchors.leftMargin: topLevel.globalMargin
}

Text {
    id: descriptionText
    text: product.description
    anchors.right: priceText.left
    anchors.rightMargin: topLevel.globalMargin
    anchors.left: parent.left
    anchors.leftMargin: topLevel.globalMargin
    anchors.top: titleText.bottom
    anchors.topMargin: topLevel.globalMargin / 2
    wrapMode: Text.WordWrap
}

Text {
    id: priceText
    text: product.price
    anchors.right: parent.right
    anchors.rightMargin: topLevel.globalMargin
    anchors.verticalCenter: parent.verticalCenter
}

MouseArea {
    anchors.fill: parent
    onClicked: {
        pendingRect.visible = true;
        spinBox.visible = true;
        statusText.text = "Purchasing...";
        storeItem.state = "PURCHASING";
        product.purchase();
    }
    onPressed: {
        storeItem.state = "PRESSED";
    }
    onReleased: {
        storeItem.state = "NORMAL";
    }
}

Android e iOS utilizan las clases base. A partir de las clases base existen clases derivadas para android e ios:

• Clases Base
• Demo Clases Android
• Demo Clases iOS

Compras dentro de la aplicación

Las compras dentro de la aplicación son una forma de monetizar una aplicación. Estas compras se realizan desde dentro de la aplicación y pueden incluir cualquier cosa, desde desbloquear contenido hasta objetos virtuales. La demo utiliza las APIs del sistema para las compras in-app, lo que significa que el proceso de compra es más familiar para el usuario, y la información ya almacenada por la plataforma (como la información de la tarjeta de crédito) se puede utilizar para simplificar el proceso de compra.

Licencias y atribuciones

En lo que respecta al despliegue de la demo en Android ver Android GNU C++ Run-time Licensing para más información.

Proyecto de ejemplo @ code.qt.io