mozilla

Compare Revisions

Simulator Walkthrough (4.0)

Change Revisions

Revision 439099:

Revision 439099 by Luca.greco on

Revision 439111:

Revision 439111 by Luca.greco 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 439099
Revision 439111
n297    &lt;script src="http://open.mapquestapi.com/sdk/js/v7.0.s/mqan297    &lt;script src="<span style="background-color:#ffff00;">http:
>.toolkit.js"&gt;&lt;/script&gt;>//open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js</span>"&gt;&l
 >t;/script&gt;
n323        In this section we'll inspect network request from a veryn323        In this section we'll customizing the app stylesheets usi
> simple (but very buggy!) web app using the <a href="https://deve>ng the <a href="https://developer.mozilla.org/en-US/docs/Tools/Fi
>loper.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator" title="/>refox_OS_Simulator" title="/en-US/docs/Tools/Firefox_OS_Simulator
>en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a>. >">Firefox OS Simulator</a>. The various versions of the app are i
>The various versions of the app are in the <a href="https://githu>n the <a href="https://github.com/wbamberg/firefoxos-simulator-wa
>b.com/wbamberg/firefoxos-simulator-walkthrough" title="https://gi>lkthrough" title="https://github.com/wbamberg/firefoxos-simulator
>thub.com/wbamberg/firefoxos-simulator-walkthrough">firefoxos-simu>-walkthrough">firefoxos-simulator-walkthrough</a> repository on G
>lator-walkthrough</a> repository on GitHub, and you can pick the >itHub, and you can pick the walkthrough up at this point by start
>walkthrough up at this point by starting with the <a href="https:>ing with the&nbsp;version <a href="https://github.com/wbamberg/fi
>//github.com/wbamberg/firefoxos-simulator-walkthrough/tree/master>refoxos-simulator-walkthrough/tree/master/whereami-5" title="http
>/whereami-5" title="https://github.com/wbamberg/firefoxos-simulat>s://github.com/wbamberg/firefoxos-simulator-walkthrough/tree/mast
>or-walkthrough/tree/master/whereami-5">whereami-5</a> version.>er/whereami-5">whereami-5</a>.
tt358    <div class="note">
359      <p>
360        <strong>If you haven't followed along from the start of t
 >his walkthrough:</strong>
361      </p>
362      <p>
363        In this section we'll add payment receipts validations co
 >de to a web app using the <a href="https://developer.mozilla.org/
 >en-US/docs/Tools/Firefox_OS_Simulator" title="/en-US/docs/Tools/F
 >irefox_OS_Simulator">Firefox OS Simulator</a>. The various versio
 >ns of the app are in the <a href="https://github.com/wbamberg/fir
 >efoxos-simulator-walkthrough" title="https://github.com/wbamberg/
 >firefoxos-simulator-walkthrough">firefoxos-simulator-walkthrough<
 >/a> repository on GitHub, and you can pick the walkthrough up at 
 >this point by starting with the <a href="https://github.com/wbamb
 >erg/firefoxos-simulator-walkthrough/tree/master/whereami-6" title
 >="https://github.com/wbamberg/firefoxos-simulator-walkthrough/tre
 >e/master/whereami-6">whereami-6</a> <a href="https://github.com/w
 >bamberg/firefoxos-simulator-walkthrough/tree/master/whereami-5" t
 >itle="https://github.com/wbamberg/firefoxos-simulator-walkthrough
 >/tree/master/whereami-5"></a>version.
364      </p>
365      <p>
366        The app displays a single button labeled "Where am I?". W
 >hen the user clicks the button, the app fetches the user's curren
 >t location using the Geolocation API, and displays it on a map.
367      </p>
368      <p>
369        In this version we're going to change it to became a paid
 > web app<span class="short_text" id="result_box" lang="en"><span 
 >class="hps">.</span></span>
370      </p>
371      <p>
372        The walkthrough assumes that you've <a href="/en-US/docs/
 >Tools/Firefox_OS_Simulator#Installing_the_Simulator_add-on" title
 >="/en-US/docs/Tools/Firefox_OS_Simulator#Installing_the_Simulator
 >_add-on">installed the Simulator</a>, opened the Dashboard, and a
 >dded the app by clicking "Add Directory" in the Dashboard, then s
 >electing the app's "manifest.webapp" file.
373      </p>
374    </div>
375    <p>
376      Now that your app is bug free and properly styled, you can 
 >add payment receipts validations to create a paid web app from it
 >.
358    <p>377    </p>
359      TODO: add a test receipts step378    <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>
381    <p>
382      Let's include receiptverifier to the app, e.g. adding a new
 > script tag in the "index.html":
383    </p>
384    <pre class="brush: html">
385&lt;!DOCTYPE html&gt;
386 
387&lt;html&gt;
388 
389  &lt;head&gt;
390    &lt;meta charset='utf-8'&gt;
391    <span style="background-color:#ffff00;">&lt;script src="https
 >://raw.github.com/mozilla/receiptverifier/master/receiptverifier.
 >js"&gt;&lt;/script&gt;</span>
392    &lt;script src="http://open.mapquestapi.com/sdk/js/v7.0.s/mqa
 >.toolkit.js"&gt;&lt;/script&gt;
393    &lt;script type="text/javascript" src="http://ajax.googleapis
 >.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;
394 
395  &lt;/head&gt;
396 
397  &lt;body&gt;
398    &lt;button id ="where-am-i"&gt;Where am I?&lt;/button&gt;
399    &lt;div id="map"&gt;&lt;/div&gt;
400    &lt;script src="scripts/whereami.js"&gt;&lt;/script&gt;
401    &lt;link media="all" href="style/style.css" type="text/css" r
 >el="stylesheet"&gt;
402  &lt;/body&gt;
403 
404&lt;/html&gt;
405</pre>
406    <p>
407      and check the receipts in the <strong>"scripts/whereami.js"
 ></strong> using the <strong>"mozmarket.receipts.Verifier"</strong
 >> API (e.g. checking the receipts on the button click or on the a
 >pp loading):
408    </p>
409    <pre class="brush: js">
410...
411 
412var verifier = new mozmarket.receipts.Verifier({
413  installs_allowed_from: '*',
414  typsAllowed: 'test-receipt',
415  logLevel: mozmarket.receipts.Verifier.levels.DEBUG,
416  onlog: mozmarket.receipts.Verifier.consoleLogger
417});
418verifier.clearCache();
419 
420function verifyPaymentReceipts(cb) {
421  verifier.verify(function (verifier) {
422    if (verifier.state instanceof verifier.states.OK) {
423      cb(null); // valid payment
424    } else {
425      cb("invalid-payment"); // invalid payment
426    }
427  });
428  setTimeout(function checkNoReceipts() {
429    if (verifier.state instanceof verifier.states.NoReceipts) {
430      cb("no-receipts");
431    }
432  }, 2000);
433}
434 
435whereami.onclick = function() {
436  verifyPaymentReceipts(function (err) {
437    if (err) {
438      alert("Invalid Payment Receipt.");
439    } else {
440      navigator.geolocation.getCurrentPosition(getMap, error);
441    }
442  });
443};
444</pre>
445    <p>
446      Receipts are cryptographically signed (by the Marketplace a
 >nd the Payment services), but you can use the Simulator to inject
 > a test payments receipts into your app manifest easily, selectin
 >g a test receipts (which defaults to <strong>"None"</strong>) usi
 >ng the <strong>"Receipts"</strong> menu in the app entry:
447    </p>
448    <p>
449      <img alt="" src="https://mdn.mozillademos.org/files/5559/re
 >ceipts-whereami-menu-annotated.png" style="width: 1044px; height:
 > 742px;">
450    </p>
451    <p>
452      Now you can test how the app will behave on a <strong>"Vali
 >d"</strong>, <strong>"Invalid"</strong>, <strong>"Refunded"</stro
 >ng> receipts (or on when there isn't any receipts) and look to th
 >e logs produced by the <strong>receiptverifier</strong> library i
 >n the WebConsole:
453    </p>
454    <p>
455      &nbsp;
456    </p>
457    <p>
458      <img alt="" src="https://mdn.mozillademos.org/files/5561/wh
 >ereami-receipt-invalid.png" style="width: 1044px; height: 539px;"
 >>
459    </p>
460    <p>
461      <img alt="" src="https://mdn.mozillademos.org/files/5563/wh
 >ereami-receipt-valid.png" style="width: 1044px; height: 535px;">
462    </p>
463    <p>
464      &nbsp;

Back to History