Windows 市集應用程式實作手冊 - 使用 JavaScript : Lab 08

實驗 8 ： Windows 市集

概述

寫作 Windows 市集應用程式最吸引人的理由之一是您很容易在 Windows 市集出版它們。目前全球使用 Windows 7 來運作的個人電腦超過 7 億台，每一台都有升級到 Windows 8 的可能性。市場和營收潛力都非常鉅大而且多元。我們所提供的「收益分享計劃」指向將 80% 以上的營業收益分給作者。因此，我們相信：開發人員絕對不缺乏寫出好的、偉大的應用程式並將它們出售到全世界的動機。

本市集有很靈活的商業化選項：您可以做試賣、一次性購買、應用程式內（ in-app ）購買、第三方商務、和廣告。

在試賣方面，您可以使用 Windows.ApplicationModel.Store 命名空間裡的 Windows 市集 APIs 來檢測某一應用程式是否使用試用授權。 Windows 執行階段（ Windows Runtime ）也提供其他 APIs ，可讓您輕鬆地將試用版升級為付費版本、支援更多產品的應用程式內購買、檢索授權資訊、 … 等等。 Windows 執行階段（ Windows Runtime ）的 CurrentAppSimulator 類別（ class ）提供簡便的方法來模擬購買和測試 Windows 市集 APIs 的程式碼，所有動作都在控制環境下進行。

在本實驗裡，您將使用 Windows 市集 APIs 來販賣 Contoso 食譜。

首先，您將修改「關於」對話框來檢測試用版，並包括一個購買按鈕，以供尚未付費者使用。接下來，在購買按鈕被點擊時，您將使用 CurrentAppSimulator 來模擬購買。最後，您將模擬應用程式內購買，以便出售義大利菜（ Italian ）食譜配方並收費，而不是免費提供。

目標

本實驗將引導您如何：

  • 檢測您的應用程式是否為試用版。

  • 模擬從應用程式本身購買此應用程式。

  • 模擬在應用程式內購買更多其他產品。

  • 檢索與應用程式和產品有關的授權資訊。

系統需求

要完成本實驗，您必須擁有下列東西：

  • Windows 8

  • Microsoft Visual Studio 2012

設定

為了讓您的電腦能進行本實驗，您必須先實作下列步驟：

  1. 安裝 Windows 8。

  2. 安裝 Microsoft Visual Studio 2012 。

練習

本動手做實驗室包含下列練習：

  1. 檢測試用版本

  2. 模擬應用程式購買

  3. 模擬產品購買

完成本實驗，估計需要費時： 30 到 40 分鐘。

練習 1 ： 檢測試用版本

在這個練習裡，您將使用 Windows 執行階段（ Windows Runtime ）裡的 Windows 市集 APIs 來客製化 Contoso 食譜的「關於」頁面之內容。如果此應用程式已經被購買，您將顯示授權資訊。如果它尚未被購買，也就是說，如果它仍然是試用版，您將顯示一購買按鈕。此外，購買按鈕上所顯示的價格不是寫死的，而是從 Windows 市集檢索出來的價目表資訊。

任務 1 – 載入測試授權檔

我們將使用 CurrentAppSimulator 類別（ class ）來模擬購買、檢索授權資訊、…等等。為了讓模擬盡可能真實，我們將使用一個授權檔（ license file ）來提供有關定價、到期日等資訊到 CurrentAppSimulator 。

  1. 打開您在 Visual Studio 實驗 7 所完成 ContosoCookbook 專案。如果您尚未完成實驗 7 或想啟動另一參考複本，您可以在起始材料中找到一份完整的實驗版本。

  2. 如果專案尚未有 data 資料夾，就請您創建一個。

  3. 用滑鼠右鍵單擊此 data 資料夾，使用加入 > 現有項目（ Add > Existing Item ）命令從起始材料的 data 資料夾裡，匯入 license.xml 。

  4. 打開 default.js ，在「文件」頂部，加入下列陳述式到其他像它的陳述式。

    JavaScript
    var appmodel = Windows.ApplicationModel;
    var storage = Windows.Storage;

  5. 現在，加入下列陳述式到被啟動的事件處理常式，其位置就在 if (app.sessionState.history) 陳述式的前面。

    JavaScript
    appmodel.Package.current.installedLocation.getFileAsync("data\\license.xml").done(
    function (file) {
    Windows.ApplicationModel.Store.CurrentAppSimulator.reloadSimulatorAsync(file).done( );
    });

    備註：您剛剛加入的程式碼使用 Windows 執行階段（Windows Runtime）的存放區（ Storage ） API 來找出 license.xml 文件，此文件內就有我們的授權和產品。您不用有代理文件就可以模擬應用程式購買和產品購買，但是，如果您想要有更豐富的模擬，以便檢索價格和其他資訊，使用像這樣子的設定文件才能給您最大的靈活度。

  6. 打開 license.xml ，花一點時間檢視它的內容。 <ListingInformation> 元素包含了應用程式本身的資訊，也提供了義大利菜（ Italian ）食譜配方的資料，這項產品我們將在練習 3 提出來販售； <LicenseInformation> 包含了應用程式和產品的授權資訊。在真實生活中，這些資訊都會由 Windows 市集來提供。然而，在模擬裡，這些資訊都來自 license.xml （或您使用來當授權的任何文件 — 您可以使用任何名稱）。

任務 2 – 修改「關於」頁

現在，讓我們修改您在實驗 6 所創建的「關於」頁。目前，「試用版」這幾個字就出現在「關於」頁此應用程式標題的下面。我們將使用 Windows 市集 APIs 來判斷此應用程式是否真的是試用版，然後根據結果來客製化頁面的內容。

  1. 打開 about.html 。

  2. 找出包含「試用版」這幾個字的 H4 元素，加入 id="info" 屬性。

    HTML
    <h4 id="info">Trial Version</h4>

  3. 在 H4 元素後面加入下列按鈕（ BUTTON ）聲明。

    HTML
    <button id="purchase" class="purchase-button"></button>

  4. 打開 about.css 並加入下列 CSS 類別（ class ）來設計按鈕樣式。

    CSS
    .purchase-button {
    width: 225px;
    height: 120px;
    margin-top: 24px;
    }

  5. 打開 about.js ，加入下列陳述式到使用嚴格（ use strict ）陳述式後面。

    JavaScript
    var app = Windows.ApplicationModel.Store.CurrentAppSimulator;

  6. 打開 about.js ，加入下列陳述式到 ready 函式裡。

    JavaScript
    if (app.licenseInformation.isTrial) {
    // Show the purchase price on the purchase button
    var button = document.querySelector("#purchase");

    app.loadListingInformationAsync().then(function (listing) {
    button.textContent = "Upgrade to the Full Version for " + listing.formattedPrice;
    });
    }
    else {
    // Show the expiration date and hide the purchase button
    document.querySelector("#info").textContent = "Valid until " + app.licenseInformation.expirationDate.toLocaleDateString();
    document.querySelector("#purchase").style.visibility = "hidden";
    }

  7. 花一點時間來檢查您剛剛加入的程式碼。它使用 CurrentAppSimulator.licenseInformation.isTrial 來判斷此應用程式是否為試用版，它也呼叫 CurrentAppSimulator.loadListingInformationAsync 來檢索顯示在購買按鈕上的價格。被送回來的 ListingInformation 物件還包含了應用程式的其他資訊。詳情請參閱 SDK 文件（ SDK documentation ）裡的 Windows.ApplicationModel.Store.ListingInformation 。

任務 3 – 測試結果

現在，讓我們測試這些變更，看看 CurrentAppSimulator 和 WindowsStoreProxy.xml 如何運作。

  1. 請按壓 F5 來啟動此應用程式。
  2. 顯示常用工具列並點擊設定快速鍵。
  3. 點擊「關於」設定選單來展示「關於」頁面。
  4. 確認有一個購買按鈕出現在「關於」頁面，上面的購買價格是 $12.99 ，如圖 1 所示。

    圖 1
    試用版應用程式的「關於」頁面
  5. 返回 Visual Studio 並停止偵錯。
  6. 打開 license.xml ，進到 <App> 節段裡的 <Price> 元素，將購買價格從 $12.99 改成 $8.99 。
  7. 再度啟動應用程式，進到「關於」頁面。現在出現在購買按鈕上的價格是多少錢？
  8. 再度返回 Visual Studio 和停止偵錯。
  9. 再度打開 license.xml ，將價格改回 $12.99 ，同時將 <IsTrial> 從 "true" 更改為 "false" 。
  10. 啟動應用程式，進到「關於」頁面。驗證一下，購買按鈕已經消失，您現在看見的是「有效期至 2022 年 12 月 31 日星期六」的資訊，如圖 2 所示。

    圖 2
    付費版本應用程式的「關於」頁面
  11. 返回 Visual Studio 並停止偵錯。
  12. 為下一個練習做準備，請將 license.xml 裡的 <IsTrial> 從 "false" 改回 "true" 。

練習 2 ：模擬應用程式購買

您可以使用授權檔（ license file ）來測試使用者介面（ UI ）的變更，並據以判斷應用程式是否為試用版，但是，還沒辦法模擬真正的購買行為。在這個練習裡，您將為購買按鈕寫處理常式，以便從 Windows 市集“購買”應用程式。

任務 1 – 加入購買程式碼到 about.js

為模擬應用程式的購買，當使用者點擊「關於」頁面的購買按鈕時，我們將呼叫 CurrentAppSimulator.requestAppPurchaseAsync 。

備註： requestPurchaseAppAsync 方法會提交一非同步的申購請求到 Window s市集去購買應用程式。當使用者購買應用程式時，您可以聽見 licensechanged 事件的提示聲。當該事件被觸發時，您可以檢查 CurrentAppSimulator.licenseInformation.isTrial 來核對購買已否完成。

  1. 打開 about.js 。

  2. 加入下列陳述式到 if (app.licenseInformation.isTrial) 文句後面，在 else 陳述式之前。

    JavaScript
    // Handle clicks of the purchase button
    button.onclick = function () {
    app.requestAppPurchaseAsync(false);
    };

任務 2 – 購買應用程式

很簡單，不是嗎？現在，讓我們模擬應用程式購買。請注意 CurrentAppSimulator 市集的購買資訊和記憶體裡的授權狀態之變更；它們並非記錄在您的 license.xml 裡。在您購買應用程式之後，只要應用程式保持在運作中，它就處於「已購買」（ purchased ）狀態；但是，每次您重新啟動此應用程式，它就回到試用版狀態。

  1. 請按壓 F5 來啟動應用程式。

  2. 進到「關於」頁面，點擊購買按鈕來模擬應用程式購買。

  3. 點擊 Windows 市集對話框中的**繼續（ Continue ）**按鈕來完成模擬購買。

  4. 再度顯示「關於」頁面，確認購買按鈕已消失不見。

    備註：在使用者完成購買之後， Contoso 食譜不會揭露其他額外功能，它只將購買按鈕替換成授權資訊。在真實生活中，您可能選擇限制試用版的使用範圍，但是，在使用者完成購買後，就全面揭露所有功能。

  5. 返回 Visual Studio 並停止偵錯。

練習 3 ：模擬產品購買

除了允許應用程式的一次性購買之外， Windows 市集也支援應用程式內產品購買。舉例來說，電玩就允許使用者在完成前一級遊戲後，購買更高層級的電動遊戲。在 Windows 市集物件模型裡，以這種方式購買的功能就被稱為產品。 Windows 執行階段（ Windows Runtime ）就提供您所需要的APIs之產品購買並為您判斷您已購買了哪些產品、這些產品的授權狀態、…等等。

在這個練習裡，您將修改 Contoso 食譜來販售義大利菜食譜配方，不再免費讓使用者觀賞。您將使用 CurrentAppSimulator 來加入一簡單的 UI 以方便購買，並植入邏輯來防止義大利菜食譜配方全面揭露，除非使用者已完成產品購買。

任務 1 – 修改項目明細頁

第一步是將購買按鈕加入項目明細頁。當義大利菜食譜配方被載入頁面時，如果義大利菜食譜配方產品還未被購買，我們就顯示購買按鈕或菜餚烹飪法的說明（如果食譜裡有該烹飪法的話）。在這裡，我們將為購買按鈕加入程式碼，以便啟動應用程式內購買。

  1. 打開 itemDetail.html ，找到類別（ class ）為 directions 的 DIV 元素。

  2. 插入按鈕（BUTTON）元素到類別（ class ）為 item-directions 的 H2 元素裡。

    HTML
    <button id="purchaseRecipes" class="purchase-recipes-button"></button>

  3. 打開 itemDetail.css ，加入下列陳述式到您剛剛加入的按鈕，以定義其樣式。

    CSS
    .purchase-recipes-button {
    width: 225px;
    height: 120px;
    margin-top: 24px;
    background-color: rgba(255, 255, 255, 0.2);
    display: none ;
    }

  4. 打開 itemDetail.js ，以下列陳述式來替換顯示烹飪法的那一行程式碼（此陳述式會指派 item.directions 到 "article.item-directions" 查詢選擇器所送回來的 HTML 元素之 textContent 屬性裡。）

    JavaScript
    // Determine whether Italian recipes have been purchased
    var app = Windows.ApplicationModel.Store.CurrentAppSimulator;
    var license = app.licenseInformation;

    if (license.productLicenses.ItalianRecipes.isActive || item.group.key !== "Italian") {
    // Display cooking directions
    element.querySelector("article .item-directions").textContent = item.directions;
    }
    else {
    // Show the purchase price on the purchase button
    var button = document.querySelector("#purchaseRecipes");

    app.loadListingInformationAsync().then(function (listing) {
    var price = listing.productListings.ItalianRecipes.formattedPrice;
    button.style.display = 'block';
    button.textContent = "Purchase Italian Recipes for " + price;
    });

    // Handle clicks of the purchase button
    button.onclick = function () {
    if (!app.licenseInformation.isTrial) {
    app.requestProductPurchaseAsync("ItalianRecipes", false).done(
    function () {
    if (app.licenseInformation.productLicenses.lookup("ItalianRecipes").isActive) {
    var directions = element.querySelector("article .item-directions");
    if (directions !== null) {
    directions.textContent = item.directions;
    }
    button.style.display = 'none';
    }
    });
    }
    else
    new Windows.UI.Popups.MessageDialog("You must go into settings->about and purchase the app first").showAsync();
    };
    }

    備註：這時候發生的動作還真多。我們首先檢查命名為 "ItalianRecipes" 的產品授權，該產品定義於 license.xml 內。在購買一項產品之前，我們先檢查此應用程式的確被授權。當購買按鈕被點擊時，我們呼叫 CurrentAppSimulator.requestProductPurchaseAsync 來購買產品。當申購請求返回時，我們就檢查 ItalianRecipes 是否已被購買並以烹飪法來替換購買按鈕。

任務 2 – 購買產品

剩下來的動作就是測試您所做的變更是否引發產品購買。

  1. 按壓 F5 來啟動應用程式。
  2. 點擊一義大利菜食譜配方，進到項目明細頁。
  3. 確認出現的是購買按鈕，不是烹飪法，如圖 3 所示。

    圖 3
    購買產品的使用者介面
  4. 點擊此按鈕來啟動產品購買。
  5. 點擊 Windows 市集對話框中的**繼續（ Continue ）**來模擬產品購買。
  6. 確認按鈕消失，而烹飪法出現。
  7. 查看其他一些義大利菜食譜配方，驗證一下，烹飪法均被顯示出來。
  8. 返回 Visual Studio 並停止偵錯。

摘要

您在本實驗所做的練習展示了一些 Windows 市集 API 最重要的層面：如何檢測試用版、如何模擬應用程式購買、如何模擬應用程式內產品購買、和如何檢索那些產品的資訊。當然，在真實的應用程式裡，您將呼叫 CurrentApp 而不是呼叫 CurrentAppSimulator 。這麼一來，您將擁有所有把自己的應用程式轉換成金錢的工具。好吧，勇往直前，創造營收去！

繼續下一個實驗 
  • Last updated on