Compare Revisions

Simulator Walkthrough (4.0)

Change Revisions

Revision 439197:

Revision 439197 by Luca.greco on

Revision 439437:

Revision 439437 by Mykmelez1 on

Title:
Simulator Walkthrough (4.0)
Simulator Walkthrough (4.0)
Slug:
Tools/Firefox_OS_Simulator/Simulator_Walkthrough/4.0
Tools/Firefox_OS_Simulator/Simulator_Walkthrough/4.0
Content:

Revision 439197
Revision 439437
n14      The walkthrough is structured into six parts: each part usen14      The walkthrough is structured into six parts: each part use
>s a different diagnostic/debugging tool, specifically, <a href="#>s a different diagnostic/debugging tool, specifically, <a href="#
>Using-manifest-validation" title="#Using-manifest-validation">man>Using-manifest-validation" title="#Using-manifest-validation">man
>ifest validation</a>, <a href="#Using-the-WebConsole" title="#Usi>ifest validation</a>, <a href="#Using-the-WebConsole" title="#Usi
>ng-the-Error-Console">the WebConsole</a>, <a href="#Using-the-Jav>ng-the-Error-Console">the Web Console</a>, <a href="#Using-the-Ja
>aScript-Debugger" title="#Using-the-JavaScript-Debugger">the Java>vaScript-Debugger" title="#Using-the-JavaScript-Debugger">the Jav
>Script Debugger</a>, <a href="#Using-the-NetworkMonitor" title="#>aScript Debugger</a>, <a href="#Using-the-NetworkMonitor" title="
>Using-the-NetworkMonitor">the NetworkMonitor</a>, <a href="#Using>#Using-the-NetworkMonitor">the Network Monitor</a>, <a href="#Usi
>-the-StyleEditor" title="#Using-the-StyleEditor">the StyleEditor<>ng-the-StyleEditor" title="#Using-the-StyleEditor">the Style Edit
>/a> and the <a href="#Using-the-TestReceipts" title="#Using-the-T>or</a> and the <a href="#Using-the-TestReceipts" title="#Using-th
>estReceipts">Test Receipts</a>.>e-TestReceipts">Test Receipts</a>.
n188      Clicking on the <strong>"whereami.js:8"</strong> link, the n188      Clicking on the <strong>"whereami.js:8"</strong> link, the 
>Javascript Debugger will be automatically loaded and pointed to t>JavaScript Debugger will be automatically loaded and pointed to t
>he related file and line number.>he related file and line number.
n276      In the Developer Tools panel connected to the app, click thn276      In the Developer Tools panel connected to the app, click th
>e <strong>Network</strong> tab and the following panel will be pr>e <strong>Network</strong> tab and the following panel will be pr
>esented to you, where you can notice that requests of <strong>"mq>esented to you, where you see that requests for the <strong>"mqa.
>a.toolkit.js"</strong> resource from the <strong>"open.mapquestap>toolkit.js"</strong> resource from the <strong>"open.mapquestap.c
>.com"</strong> domain are never completed successfully:>om"</strong> domain are never completed successfully:
n282      Successfull requests are <strong>green colored</strong>, ifn282      Successful requests are <strong>green colored</strong>, if 
> we click on one of the requests to the <strong>"open.mapquestap.>we click on one of the requests to the <strong>"open.mapquestap.c
>com"</strong> domain (<strong>dark grey colored</strong>) and sel>om"</strong> domain (<strong>dark grey colored</strong>) and sele
>ect the <strong>Timings</strong> detail panel, you can figured ou>ct the <strong>Timings</strong> detail panel, we can figure out t
>t that the request never reach the <strong>Connecting</strong> st>hat the request never reached the <strong>Connecting</strong> sta
>atus, because the DNS resolution results could not resolve the do>tus, because DNS resolution did not succeed.
>main correctly. 
n347      Select <strong>"style/style.css"</strong> from the style shn347      Select <strong>"style/style.css"</strong> from the style sh
>eets list on the left and start change the applied CSS rules and >eets list on the left and make some changes to the CSS rules. The
>the new style rules will be applied real time to the connected ap> new rules will be applied to the connected app immediately:
>p: 
n353      Now you can click on the <strong>"Save"</strong> link just n353      Now you can click on the <strong>"Save"</strong> link just 
>below the <strong>"style/style.css"</strong> in the style sheets >below <strong>"style/style.css"</strong> in the style sheets list
>list to save it back into the project.> to save it back into the project.
n363        In this section we'll add payment receipts validations con363        In this section we'll add payment receipt validation code
>de to a web app using the <a href="https://developer.mozilla.org/> to a web app using the <a href="https://developer.mozilla.org/en
>en-US/docs/Tools/Firefox_OS_Simulator" title="/en-US/docs/Tools/F>-US/docs/Tools/Firefox_OS_Simulator" title="/en-US/docs/Tools/Fir
>irefox_OS_Simulator">Firefox OS Simulator</a>. The various versio>efox_OS_Simulator">Firefox OS Simulator</a>. The various versions
>ns of the app are in the <a href="https://github.com/rpl/firefoxo> of the app are in the <a href="https://github.com/rpl/firefoxos-
>s-simulator-walkthrough" title="https://github.com/rpl/firefoxos->simulator-walkthrough" title="https://github.com/rpl/firefoxos-si
>simulator-walkthrough">firefoxos-simulator-walkthrough</a> reposi>mulator-walkthrough">firefoxos-simulator-walkthrough</a> reposito
>tory on GitHub, and you can pick the walkthrough up at this point>ry on GitHub, and you can pick the walkthrough up at this point b
> by starting with the <a href="https://github.com/rpl/firefoxos-s>y starting with the <a href="https://github.com/rpl/firefoxos-sim
>imulator-walkthrough/tree/master/whereami-6" title="https://githu>ulator-walkthrough/tree/master/whereami-6" title="https://github.
>b.com/rpl/firefoxos-simulator-walkthrough/tree/master/whereami-6">com/rpl/firefoxos-simulator-walkthrough/tree/master/whereami-6">w
>>whereami-6</a> <a href="https://github.com/wbamberg/firefoxos-si>hereami-6</a> <a href="https://github.com/wbamberg/firefoxos-simu
>mulator-walkthrough/tree/master/whereami-5" title="https://github>lator-walkthrough/tree/master/whereami-5" title="https://github.c
>.com/wbamberg/firefoxos-simulator-walkthrough/tree/master/wheream>om/wbamberg/firefoxos-simulator-walkthrough/tree/master/whereami-
>i-5"></a>version.>5"></a>version.
n376      Now that your app is bug free and properly styled, you can n376      Now that your app is bug-free and properly styled, you can 
>add payment receipts validations to create a paid web app from it>add payment receipt validation to ensure that users of your app h
>.>ave purchased it.
377    </p>
378    <p>377    </p>
379      Mozilla has released a small javascript library which will 
>help you to check the receipts from javascript: <a href="https:// 
>github.com/mozilla/receiptverifier" title="https://github.com/moz 
>illa/receiptverifier">http://github.com/mozilla/receiptverifier</ 
>a> 
380    </p>378    <p>
379      Mozilla has released a small JavaScript library which will 
 >help an app check its receipts: <a href="https://github.com/mozil
 >la/receiptverifier" title="https://github.com/mozilla/receiptveri
 >fier">http://github.com/mozilla/receiptverifier</a>
381    <p>380    </p>
381    <p>
382      Let's include receiptverifier to the app, e.g. adding a new382      Let's add receiptverifier to the app, e.g. adding a new scr
> script tag ithe "index.html":>ipt tag to its "index.html" file:
n446      Receipts are cryptographically signed (by the Marketplace an446      Receipts are cryptographically signed (by the Marketplace a
>nd the Payment services), but you can use the Simulator to inject>nd the Payment services), but you can use the Simulator to instal
> a test payments receipts into your app manifest easily, selectin>l your app with a test receipt by selecting the type of receipt t
>g a test receipts (which defaults to <strong>"None"</strong>) usi>o install (which defaults to <strong>"None"</strong>) using the <
>ng the <strong>"Receipts"</strong> menu in the app entry:>strong>"Receipts"</strong> menu in the app entry:
n452      Now you can test how the app will behave on a <strong>"Valin452      Now you can test how the app will behave with <strong>"Vali
>d"</strong>, <strong>"Invalid"</strong>, <strong>"Refunded"</stro>d"</strong>, <strong>"Invalid"</strong>, and <strong>"Refunded"</
>ng> receipts (or on when there isn't any receipts) and look to th>strong> receipts (or when there isn't any receipt) and observe th
>e logs produced by the <strong>receiptverifier</strong> library i>e results by looking at the logs produced by the <strong>receiptv
>n the WebConsole:>erifier</strong> library in the Web Console:
t465        <strong>Note:</strong> You can pick the completed app frot465        <strong>Note:</strong> You can get the completed app from
>m the <a class="external" href="https://github.com/rpl/firefoxos-> the <a class="external" href="https://github.com/rpl/firefoxos-s
>simulator-walkthrough/tree/master/whereami-7" title="https://gith>imulator-walkthrough/tree/master/whereami-7" title="https://githu
>ub.com/rpl/firefoxos-simulator-walkthrough/tree/master/whereami-7>b.com/rpl/firefoxos-simulator-walkthrough/tree/master/whereami-7"
>">whereami-7</a> version.>>whereami-7</a> version.

Back to History