Demo zum In-App-Kauf

Was ist diese Demo?

Diese Demo ist eine mobile Spiele-App, die auf dem klassischen Wortratespiel „Hangman“ basiert, bei dem Vokale über den internen Store der Demo gekauft werden können. Im Spiel wird dir eine Reihe von Strichen angezeigt, die die Buchstaben des zu erratenden Wortes darstellen. Wenn du einen richtigen Buchstaben errätst, der in dem gegebenen Wort vorkommt, wird dieser Buchstabe an der entsprechenden Strichstelle oder den entsprechenden Strichstellen im Wort platziert. Sobald du alle Buchstaben des Wortes erraten hast oder das gesamte Wort zu einem beliebigen Zeitpunkt richtig errätst, ist das Spiel beendet und du hast gewonnen. Ist der Tipp falsch, wird ein Element einer hängenden Strichfigur gezeichnet. Sobald die Figur vollständig ist, sind deine Versuche aufgebraucht und du hast verloren.

Die Demo zeigt, wie es möglich ist, In-App-Produkte innerhalb einer Qt-Anwendung für die Plattformen Android und iOS anzubieten. Um die In-App-Kauf-Funktionalität in der Demo zu testen, musst du zunächst die Anwendung und ihre Produkte im externen Store registrieren. Eine Einführung dazu findest du in den Anleitungen für Google Play bzw. den App Store.

App-Stores von Drittanbietern

Die In-App-Produkte müssen in den Ziel-Stores registriert sein, bevor sie in einer Anwendung abgefragt oder gekauft werden können. Wir empfehlen, für die Produkte in jedem Store dieselben Identifikatoren zu verwenden, da dies den Code für die Abfrage und den Kauf der Produkte vereinfacht.

• Demo zu In-App-Käufen – Google Play
• Demo zu In-App-Käufen – iOS App Store

So funktioniert die Demo

Die Demo ist eine QML-Anwendung, die QML-Typen registriert, um auf Informationen zu In-App-Produkten zuzugreifen und Käufe dieser Produkte anzufordern. Diese sind im externen Store für die Zielplattform registriert.

In-App-Käufe werden der Anwendung hinzugefügt, indem zunächst ein „Store“-Objekt hinzugefügt wird. In der Demo wird das „Store“-Objekt von der „MainView“-Komponente erstellt, die beim Start der Anwendung geladen wird.

Store {
    id: iapStore
}

Die Demo definiert eine Komponente zur Anzeige eines Shops für den Kauf der verfügbaren In-App-Produkte. Diese Produkte müssen zunächst bei dem oben in „MainView“ erstellten Store-Objekt registriert werden. Es stehen zwei Produkte zur Verfügung, wobei es sich beim ersten um einen Verbrauchsartikel handelt.

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

Dieses Verbrauchsgut stellt 100 zusätzliche Vokale zur Verfügung, die beim Erraten von Wörtern im Spiel verwendet werden können. Nach erfolgreichem Kauf aktualisieren wir den Zustand der Anwendung, um die 100 zusätzlichen Vokale einzubeziehen. Anschließend rufen wir `finalize()` für das Transaktionsobjekt auf, um dem Plattform-Store zu bestätigen, dass das Verbrauchsgut bereitgestellt wurde.

Das zweite Produkt ist ein nicht-verbrauchsartiges Produkt, das Vokale in Zukunft dauerhaft freischaltet. Zusätzlich zur Aktualisierung des Anwendungsstatus beim Kauf müssen wir sicherstellen, dass eine Möglichkeit besteht, diesen Kauf auf anderen vom Endnutzer verwendeten Geräten wiederherzustellen. In diesem Fall erstellen wir einen Signal-Handler für „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();
    }
}

Neben der Registrierung der Produkte bietet die Demo auch eine Schnittstelle zum tatsächlichen Kauf des registrierten Produkts. Die Demo definiert eine benutzerdefinierte Komponente namens „ StoreItem “, um die Kaufinteraktion anzuzeigen und zu verarbeiten.

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

Die „StoreItem“-Komponente zeigt die Produktdaten an, die aus dem Store der Plattform abgefragt werden, und ruft die Methode „purchase()“ des Produkts auf, sobald der Nutzer darauf klickt.

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 und iOS verwenden die Basisklassen. Von den Basisklassen gehen abgeleitete Klassen für Android und iOS ab:

• Demo zum In-App-Kauf – Basisklassen
• Demo zum In-App-Kauf – Android-Klassen
• Demo zu In-App-Käufen – iOS-Klassen

In-App-Käufe

In-App-Käufe sind eine Möglichkeit, eine Anwendung zu monetarisieren. Diese Käufe werden direkt innerhalb der Anwendung getätigt und können alles umfassen, vom Freischalten von Inhalten bis hin zu virtuellen Gegenständen. Die Demo nutzt die System-APIs für In-App-Käufe, was bedeutet, dass der Kaufvorgang für den Nutzer vertrauter ist und bereits von der Plattform gespeicherte Informationen (wie beispielsweise Kreditkartendaten) zur Vereinfachung des Kaufvorgangs genutzt werden können.

Lizenzen und Quellenangaben

Informationen zur Bereitstellung der Demo auf Android finden Sie unter „Android GNU C++ Run-time Licensing“.

Beispielprojekt auf code.qt.io