Démonstration d'achat dans l'application

Qu'est-ce que cette démo ?

Cette démo est une application de jeu mobile basée sur le jeu classique de devinettes, où les voyelles peuvent être achetées par le biais de la boutique interne de la démo. Dans le jeu, une rangée de tirets représentant les lettres du mot à deviner vous est présentée. Si vous devinez une lettre qui se trouve dans le mot donné, elle sera placée sur le ou les tirets correspondants dans le mot. Si vous devinez toutes les lettres du mot ou si vous devinez correctement le mot entier à tout moment, le jeu est terminé et vous avez gagné. Si vous vous trompez, vous devez dessiner un élément d'une figure de bâton suspendue. Une fois que la figure est complète, vous n'avez plus rien à deviner et vous perdez.

La démo montre comment il est possible de proposer des produits in-app à l'intérieur d'une application Qt, pour les plateformes Android et iOS. Afin de tester la fonctionnalité d'achat in-app dans la démo, vous devez d'abord enregistrer l'application et ses produits dans le magasin externe. Pour savoir comment procéder, consultez les guides pour Google Play et App Store respectivement.

Magasins d'applications tiers

Les produits in-app doivent être enregistrés dans les magasins cibles avant de pouvoir être interrogés ou achetés dans une application. Nous recommandons d'utiliser les mêmes identifiants pour les produits dans chaque boutique, car cela simplifie le code pour interroger et acheter les produits.

• Enregistrer des produits dans Google Play
• Enregistrer des produits dans l'App Store

Comment fonctionne la démo ?

La démo est une application QML qui enregistre des types QML pour accéder aux informations sur les produits in-app, ainsi que pour demander l'achat de ces produits. Ceux-ci sont enregistrés dans le magasin externe de la plateforme cible

Les achats in-app sont ajoutés à l'application en ajoutant d'abord un objet Store. Dans la démo, l'objet Store est créé par le composant MainView qui est chargé au démarrage de l'application.

Store {
    id: iapStore
}

La démo définit un composant permettant d'afficher une boutique pour l'achat de produits in-app mis à disposition. Ces produits doivent d'abord être enregistrés avec l'objet store que nous avons créé ci-dessus dans MainView. Deux produits sont disponibles, le premier étant un produit consommable.

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();
    }
}

Ce produit consommable fournit 100 voyelles supplémentaires à utiliser pour deviner des mots dans le jeu. Lorsqu'il est acheté avec succès, nous mettons à jour l'état de l'application pour inclure 100 voyelles supplémentaires. Nous appelons ensuite finalize() sur l'objet de la transaction pour confirmer au magasin de la plateforme que le produit consommable a été fourni.

Le second produit est un type de produit non consommable qui débloquera les voyelles de manière permanente à l'avenir. Outre la mise à jour de l'état de l'application lors de l'achat, nous devons nous assurer de fournir un moyen de restaurer cet achat sur d'autres appareils utilisés par l'utilisateur final. Dans ce cas, nous créons un gestionnaire de signal pour 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();
    }
}

Outre l'enregistrement des produits, la démo fournit également une interface permettant d'acheter le produit enregistré. La démo définit un composant personnalisé appelé StoreItem pour afficher et gérer l'interaction d'achat.

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();
    }
}

Le composant StoreItem affichera les données du produit qui sont interrogées à partir du magasin de la plateforme et appellera la méthode purchase() sur le produit lorsque l'utilisateur cliquera dessus.

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 et iOS utilisent les classes de base. À partir des classes de base, il existe des classes dérivées pour Android et iOS :

• Classes de base
• Classes de démonstration pour Android
• Classes de démonstration iOS

Achats In-App

Les achats in-app sont un moyen de monétiser une application. Ces achats sont effectués à l'intérieur de l'application et peuvent aller du déverrouillage de contenu à des objets virtuels. La démo utilise les API du système pour les achats in-app, ce qui signifie que le processus d'achat est plus familier à l'utilisateur et que les informations déjà stockées par la plateforme (telles que les informations relatives à la carte de crédit) peuvent être utilisées pour simplifier le processus d'achat.

Licences et attributions

En ce qui concerne le déploiement de la démo sur Android, voir Android GNU C++ Run-time Licensing pour plus d'informations.

Exemple de projet @ code.qt.io