Compare Revisions

Simulator Walkthrough

Revision 398971:

Revision 398971 by jasonngpt on

Revision 439685:

Revision 439685 by Mykmelez1 on

Title:
Simulator Walkthrough
Simulator Walkthrough
Slug:
Tools/Firefox_OS_Simulator/Simulator_Walkthrough
Tools/Firefox_OS_Simulator/Simulator_Walkthrough
Tags:
"Tools","Apps","Firefox OS"
"Tools","Apps","Firefox OS"
Content:

Revision 398971
Revision 439685
n11      The walkthrough is structured into three parts: each part un11      The walkthrough is structured into six parts: each part use
>ses a different diagnostic/debugging tool, specifically, <a href=>s a different diagnostic/debugging tool, specifically, <a href="#
>"#Using-manifest-validation" title="#Using-manifest-validation">m>Using-manifest-validation" title="#Using-manifest-validation">man
>anifest validation</a>, <a href="#Using-the-Error-Console" title=>ifest validation</a>, <a href="#Using-the-WebConsole" title="#Usi
>"#Using-the-Error-Console">the Error Console</a>, and <a href="#U>ng-the-Error-Console">the Web Console</a>, <a href="#Using-the-Ja
>sing-the-JavaScript-Debugger" title="#Using-the-JavaScript-Debugg>vaScript-Debugger" title="#Using-the-JavaScript-Debugger">the Jav
>er">the JavaScript Debugger</a>. It's intended that each part sho>aScript Debugger</a>, <a href="#Using-the-NetworkMonitor" title="
>uld be self-contained, so it should be possible to read only that>#Using-the-NetworkMonitor">the Network Monitor</a>, <a href="#Usi
> part and have it make sense.>ng-the-StyleEditor" title="#Using-the-StyleEditor">the Style Edit
 >or</a> and the <a href="#Using-the-TestReceipts" title="#Using-th
 >e-TestReceipts">Test Receipts</a>.
12    </p>
13    <p>
14      It's intended that each part should be self-contained, so i
 >t should be possible to read only that part and have it make sens
 >e.
n18        If you want to follow along, the various revisions of then21        If you want to follow along, the various revisions of the
> app are in the <a href="https://github.com/wbamberg/firefoxos-si> app are in the <a href="https://github.com/rpl/firefoxos-simulat
>mulator-walkthrough" title="https://github.com/wbamberg/firefoxos>or-walkthrough" title="https://github.com/rpl/firefoxos-simulator
>-simulator-walkthrough">firefoxos-simulator-walkthrough</a> repos>-walkthrough">firefoxos-simulator-walkthrough</a> repository on G
>itory on GitHub, and you can pick the walkthrough up at this poin>itHub, and you can pick the walkthrough up at this point by start
>t by starting with the <a href="https://github.com/wbamberg/firef>ing with the <a href="https://github.com/rpl/firefoxos-simulator-
>oxos-simulator-walkthrough/tree/master/whereami-1" title="https:/>walkthrough/tree/master/whereami-1" title="https://github.com/rpl
>/github.com/wbamberg/firefoxos-simulator-walkthrough/tree/master/>/firefoxos-simulator-walkthrough/tree/master/whereami-1">whereami
>whereami-1">whereami-1</a> version of the app.>-1</a> version of the app.
n28      First we'll add the app to the Dashboard by clicking "Add Dn31      First we'll add the app to the Dashboard by clicking <stron
>irectory" and selecting the manifest. We'll see this:>g>"Add Directory"</strong> and selecting the manifest. We'll see 
 >this:
29    </p>
30    <p>32    </p>
33    <p>
31      <img alt="" src="https://mdn.mozillademos.org/files/5207/ma34      <img alt="" src="https://mdn.mozillademos.org/files/5529/ma
>nifest-error-collapsed.png" style="width: 791px; height: 634px;">>nifest-error-collapsed-4.0.png" style="width: 1044px; height: 680
><br>>px;"><br>
n33      Clicking on "(1 errors and 1 warnings)"&nbsp; we see this:n36      Clicking on <strong>"(2 errors and 0 warnings)"</strong>&nb
 >sp; we see this:
34    </p>
35    <p>37    </p>
38    <p>
36      <img alt="" src="https://mdn.mozillademos.org/files/5209/ma39      <img alt="" src="https://mdn.mozillademos.org/files/5531/ma
>nifest-error-expanded.png" style="width: 791px; height: 634px;"><>nifest-error-expanded-4.0.png" style="width: 1044px; height: 680p
>br>>x;"><br>
37      This error message is pretty clear, and if we look at "mani40      This error message is pretty clear, and if we look at <stro
>fest.webapp", we can see that it's missing a "name":>ng>"manifest.webapp"</strong>, we can see that it's missing a <st
 >rong>"name"</strong>:
n50      Add the "name" field to the manifest file, save it, and clin53      Add the <strong>"name"</strong> field to the manifest file,
>ck "Update" in the Dashboard:> save it, and click <strong>"Refresh"</strong> in the Dashboard:
n67      <img alt="" src="https://mdn.mozillademos.org/files/5213/whn70      <img alt="" src="https://mdn.mozillademos.org/files/5533/wh
>ereami-nomap.png" style="width: 400px; height: 606px;">>ereami-no-map-4.0.png" style="width: 1044px; height: 478px;">
68    </p>
69    <p>71    </p>
72    <p>
70      But when you click the button, nothing happens. In the next73      But when you click the button, nothing happens. In the next
> section, we'll try using the Error Console to diagnose this prob> section, we'll try using the WebConsole to diagnose this problem
>lem.>.
n72    <h3 id="Using_the_Error_Console">n75    <h3 id="Using_the_WebConsole">
73      <a name="Using-the-Error-Console" id="Using-the-Error-Conso76      <a name="Using-the-WebConsole" id="Using-the-WebConsole">Us
>le">Using the Error Console</a>>ing the WebConsole</a>
n80        In this section we'll debug a very simple (but very buggyn83        In this section we'll debug a very simple (but very buggy
>!) web app using the <a href="https://developer.mozilla.org/en-US>!) web app using the <a href="https://developer.mozilla.org/en-US
>/docs/Tools/Firefox_OS_Simulator" title="/en-US/docs/Tools/Firefo>/docs/Tools/Firefox_OS_Simulator" title="/en-US/docs/Tools/Firefo
>x_OS_Simulator">Firefox OS Simulator</a>. The various versions of>x_OS_Simulator">Firefox OS Simulator</a>. The various versions of
> the app are in the <a href="https://github.com/wbamberg/firefoxo> the app are in the <a href="https://github.com/rpl/firefoxos-sim
>s-simulator-walkthrough" title="https://github.com/wbamberg/firef>ulator-walkthrough" title="https://github.com/rpl/firefoxos-simul
>oxos-simulator-walkthrough">firefoxos-simulator-walkthrough</a> r>ator-walkthrough">firefoxos-simulator-walkthrough</a> repository 
>epository on GitHub, and you can pick the walkthrough up at this >on GitHub, and you can pick the walkthrough up at this point by s
>point by starting with the <a href="https://github.com/wbamberg/f>tarting with the <a href="https://github.com/rpl/firefoxos-simula
>irefoxos-simulator-walkthrough/tree/master/whereami-2" title="htt>tor-walkthrough/tree/master/whereami-2" title="https://github.com
>ps://github.com/wbamberg/firefoxos-simulator-walkthrough/tree/mas>/rpl/firefoxos-simulator-walkthrough/tree/master/whereami-2">wher
>ter/whereami-1">whereami-2</a> version.>eami-2</a> version.
81      </p>
82      <p>84      </p>
83        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. 
84      </p>85      <p>
86        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.
85      <p>87      </p>
88      <p>
86        But in this version, when we click the button nothing hap89        But in this version, when we click the button nothing hap
>pens. In this section of the walkthrough, we'll use the Error Con>pens. In this section of the walkthrough, we'll use the WebConsol
>sole to try to diagnose the problem.>e to try to diagnose the problem.
n90      Over in the Dashboard, click "Running" to stop the Simulaton93      Over in the Dashboard, you have to click the button labeled
>r, and check the box labeled "Console":> <strong>"Connect"</strong>:
91    </p>
92    <p>94    </p>
93      <img alt="" src="https://mdn.mozillademos.org/files/5195/da
>shboard-connect-box.png" style="width: 791px; height: 634px;"> 
94    </p>95    <p>
96      <img alt="" src="https://mdn.mozillademos.org/files/5497/co
 >nnect-to-app-button.png" style="width: 1044px; height: 650px;">
95    <p>97    </p>
96      Now click "Run" over on the right-hand side, and the Error 98    <p>
>Console should launch alongside the app. In the console output yo 
>u might see a few errors, warnings, and messages, but the last on 
>e in particular looks relevant:<br> 
99      A Simulator window will open automatically and run the app 
 >(if it's not already), and the WebConsole should appear into the 
 >Simulator Dashboard tab.
100    </p>
101    <p>
102      In the console output you might see a few errors, warnings,
 > and messages, but the last one in particular looks relevant:<br>
n98      <img alt="" src="https://mdn.mozillademos.org/files/5215/ern104      <img alt="" src="https://mdn.mozillademos.org/files/5535/we
>ror-console-whereami-message.png" style="width: 720px; height: 56>bconsole-whereami-error.png" style="width: 1044px; height: 680px;
>0px;"><br>>"><br>
n120    &lt;script src="http://open.mapquestapi.com/sdk/js/v7.0.s/mqan126    &lt;script src="http://open.mapquestap.com/sdk/js/v7.0.s/mqa.
>.toolkit.js"&gt;&lt;/script&gt;>toolkit.js"&gt;&lt;/script&gt;
n146      Now the app starts up without any errors, but when we clickn152      Now the app starts up without any errors, but when we click
> the button, the map doesn't appear, and we get a new message in > the button, the map doesn't appear, and we get a new message in 
>the console:>the WebConsole:
147    </p>
148    <p>153    </p>
154    <p>
149      <img alt="" src="https://mdn.mozillademos.org/files/5203/er155      <img alt="" src="https://mdn.mozillademos.org/files/5537/we
>ror-console-geo-error-message.png" style="width: 720px; height: 5>bconsole-whereami-geolocation-error.png" style="width: 1044px; he
>60px;">>ight: 680px;">
n162        In this section we'll debug a very simple (but very buggyn168        In this section we'll debug a very simple (but very buggy
>!) web app using the <a href="https://developer.mozilla.org/en-US>!) web app using the <a href="https://developer.mozilla.org/en-US
>/docs/Tools/Firefox_OS_Simulator" title="/en-US/docs/Tools/Firefo>/docs/Tools/Firefox_OS_Simulator" title="/en-US/docs/Tools/Firefo
>x_OS_Simulator">Firefox OS Simulator</a>. The various versions of>x_OS_Simulator">Firefox OS Simulator</a>. The various versions of
> the app are in the <a href="https://github.com/wbamberg/firefoxo> the app are in the <a href="https://github.com/rpl/firefoxos-sim
>s-simulator-walkthrough" title="https://github.com/wbamberg/firef>ulator-walkthrough" title="https://github.com/rpl/firefoxos-simul
>oxos-simulator-walkthrough">firefoxos-simulator-walkthrough</a> r>ator-walkthrough">firefoxos-simulator-walkthrough</a> repository 
>epository on GitHub, and you can pick the walkthrough up at this >on GitHub, and you can pick the walkthrough up at this point by s
>point by starting with the <a href="https://github.com/wbamberg/f>tarting with the <a href="https://github.com/rpl/firefoxos-simula
>irefoxos-simulator-walkthrough/tree/master/whereami-3" title="htt>tor-walkthrough/tree/master/whereami-3" title="https://github.com
>ps://github.com/wbamberg/firefoxos-simulator-walkthrough/tree/mas>/wbamberg/firefoxos-simulator-walkthrough/tree/master/whereami-1"
>ter/whereami-1">whereami-3</a> version.>>whereami-3</a> version.
n175      In the Dashboard, click the "Connect" button:n181      In the WebConsole connected to the app, click the link on t
 >he right of the geolocation error log:
176    </p>
177    <p>182    </p>
178      <img alt="" src="https://mdn.mozillademos.org/files/5197/da
>shboard-connect-button.png" style="width: 791px; height: 634px;"> 
><br> 
179      Then click "Connect" in the new page that appears, then sel
>ect "chrome://prosthesis/content/shell.xul" in the next page. You 
> should see the developer tools window: 
180    </p>183    <p>
184      <img alt="" src="https://mdn.mozillademos.org/files/5539/we
 >bconsole-whereami-geolocation-error-annotated.png" style="width: 
 >1044px; height: 680px;"><br>
185      Clicking on the <strong>"whereami.js:8"</strong> link, the 
 >JavaScript Debugger will be automatically loaded and pointed to t
 >he related file and line number.
181    <p>186    </p>
182      <img alt="" src="https://mdn.mozillademos.org/files/5199/de
>v-tools-console.png" style="width: 985px; height: 325px;"><br> 
183      Click "Debugger", and you'll see the app's script:
184    </p>187    <p>
185    <p>
186      <img alt="" src="https://mdn.mozillademos.org/files/5201/de
>v-tools-debugger.png" style="width: 985px; height: 325px;"><br> 
n190      <img alt="" src="https://mdn.mozillademos.org/files/5191/brn191      <img alt="" src="https://mdn.mozillademos.org/files/5541/we
>eakpoint-set.png" style="width: 985px; height: 325px;">In the app>bconsole-whereami-set-breakpoint.png" style="width: 1044px; heigh
>, click "Where am I?". Execution should stop at the breakpoint:>t: 680px;">
191    </p>
192    <p>192    </p>
193      <img alt="" src="https://mdn.mozillademos.org/files/5189/br
>eakpoint-hit.png" style="width: 985px; height: 325px;"><br> 
194      Click where it says "Add watch expression" and type "error.
>code", and you'll immediately see its value, "1": 
195    </p>193    <p>
194      In the app, click <strong>"Where am I?"</strong>. Execution
 > should stop at the breakpoint:
196    <p>195    </p>
196    <p>
197      <img alt="" src="https://mdn.mozillademos.org/files/5545/we
 >bconsole-whereami-hit-breakpoint.png" style="width: 1044px; heigh
 >t: 680px;">
198    </p>
199    <p>
200      Click where it says <strong>"Add watch expression"</strong>
 > and type <strong>"error.code"</strong>, and you'll immediately s
 >ee its value, <strong>"1"</strong>:
201    </p>
202    <p>
197      <img alt="" src="https://mdn.mozillademos.org/files/5193/br203      <img alt="" src="https://mdn.mozillademos.org/files/5547/we
>eakpoint-watch.png" style="width: 985px; height: 325px;"><br>>bconsole-whereami-watch.png" style="width: 1044px; height: 680px;
 >"><br>
t233      Save "manifest.webapp", and click "Update" in the Dashboardt239      Save <strong>"manifest.webapp"</strong>, and click <strong>
> one more time. Remember to resume the Debugger as it is still at>"Refresh"</strong> in the Dashboard one more time. Remember to re
> the breakpoint. This time the app runs, and when you click "Wher>sume the Debugger as it is still at the breakpoint. This time the
>e am I?" it asks you to share your location, and if you allow it,> app runs, and when you click "Where am I?" it asks you to share 
> the app displays the map:>your location, and if you allow it, the map doesn't appear and we
 > get a new message in the WebConsole:
234    </p>
235    <p>240    </p>
241    <p>
242      <img alt="" src="https://mdn.mozillademos.org/files/5549/we
 >bconsole-whereami-mapquestapi-not-defined.png" style="width: 1044
 >px; height: 680px;">
243    </p>
244    <p>
245      This message indicates that the MapQuest API, which we have
 > included into our app using a tag script, is not loaded correctl
 >y. We can use the Network Monitor to figure that out.
246    </p>
247    <h3 id="Using_the_Network_Monitor">
248      <a name="Using-the-NetworkMonitor" id="Using-the-NetworkMon
 >itor"></a>Using the Network Monitor
249    </h3>
250    <div class="note">
251      <p>
252        <strong>If you haven't followed along from the start of t
 >his walkthrough:</strong>
253      </p>
254      <p>
255        In this section we'll inspect network request from a very
 > simple (but very buggy!) web app using the <a href="https://deve
 >loper.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator" title="/
 >en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a>. 
 >The various versions of the app are in the <a href="https://githu
 >b.com/rpl/firefoxos-simulator-walkthrough" title="https://github.
 >com/rpl/firefoxos-simulator-walkthrough">firefoxos-simulator-walk
 >through</a> repository on GitHub, and you can pick the walkthroug
 >h up at this point by starting with the <a href="https://github.c
 >om/rpl/firefoxos-simulator-walkthrough/tree/master/whereami-4" ti
 >tle="https://github.com/rpl/firefoxos-simulator-walkthrough/tree/
 >master/whereami-4">whereami-4</a> version.
256      </p>
257      <p>
258        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.
259      </p>
260      <p>
261        But in this version, when we click the button the WebCons
 >ole shows a "MQA is not defined" error. In this section of the wa
 >lkthrough, we'll use the Network Monitor to figure out exactly wh
 >y the MapQuest API is not loaded.
262      </p>
263      <p>
264        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.
265      </p>
266    </div>
267    <div class="warning">
268      <p>
269        <strong>Warning:</strong> the <a href="https://hacks.mozi
 >lla.org/2013/06/network-monitor-now-in-firefox-beta/" title="http
 >s://hacks.mozilla.org/2013/06/network-monitor-now-in-firefox-beta
 >/">Network Monitor is available for Firefox &gt;= 23.0</a> (which
 > is currently <a href="http://www.mozilla.org/en-US/firefox/beta/
 >" title="http://www.mozilla.org/en-US/firefox/beta/">Firefox Beta
 ></a>)
270      </p>
271    </div>
272    <p>
273      In the Developer Tools panel connected to the app, click th
 >e <strong>Network</strong> tab and the following panel will be pr
 >esented to you, where you see that requests for the <strong>"mqa.
 >toolkit.js"</strong> resource from the <strong>"open.mapquestap.c
 >om"</strong> domain are never completed successfully:
274    </p>
275    <p>
276      <img alt="" src="https://mdn.mozillademos.org/files/5551/ne
 >twork-monitor-timing-panel.png" style="width: 1044px; height: 680
 >px;">
277    </p>
278    <p>
279      Successful requests are <strong>green colored</strong>, if 
 >we click on one of the requests to the <strong>"open.mapquestap.c
 >om"</strong> domain (<strong>dark grey colored</strong>) and sele
 >ct the <strong>Timings</strong> detail panel, we can figure out t
 >hat the request never reached the <strong>Connecting</strong> sta
 >tus, because DNS resolution did not succeed.
280    </p>
281    <p>
282      Looking at the <strong>"index.html"</strong> file, we'll se
 >e that the script tag points to the wrong domain.
283    </p>
284    <p>
285      Let's fix this bug, changing the script tag to use the corr
 >ect domain: <strong>open.mapquestapi.com</strong> (add the missin
 >g 'i' to the domain name):
286    </p>
287    <pre class="brush: html">
288&lt;!DOCTYPE html&gt;
289 
290&lt;html&gt;
291 
292  &lt;head&gt;
293    &lt;meta charset='utf-8'&gt;
294    &lt;script src="<span style="background-color:#ffff00;">http:
 >//open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js</span>"&gt;&l
 >t;/script&gt;
295    &lt;script type="text/javascript" src="http://ajax.googleapis
 >.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;
296 
297  &lt;/head&gt;
298 
299  &lt;body&gt;
300    &lt;button id ="where-am-i"&gt;Where am I?&lt;/button&gt;
301    &lt;div id="map"&gt;&lt;/div&gt;
302    &lt;script src="scripts/whereami.js"&gt;&lt;/script&gt;
303    &lt;link media="all" href="style/style.css" type="text/css" r
 >el="stylesheet"&gt;
304  &lt;/body&gt;
305 
306&lt;/html&gt;
307</pre>
308    <p>
309      Save <strong>"index.html"</strong>, and click <strong>"Refr
 >esh"</strong> in the Dashboard one more time. This time the app r
 >uns, and when you click "Where am I?" it asks you to share your l
 >ocation, and if you allow it, the app finally displays the map:<b
 >r>
236      <img alt="" src="https://mdn.mozillademos.org/files/5211/wh310      <img alt="" src="https://mdn.mozillademos.org/files/5553/wh
>ereami-map.png" style="width: 400px; height: 606px;">>ereami-map.png" style="width: 399px; height: 663px;">
311    </p>
312    <h3 id="Using_the_Style_Editor">
313      <a name="Using-the-StyleEditor" id="Using-the-StyleEditor">
 ></a>Using the Style Editor
314    </h3>
315    <div class="note">
316      <p>
317        <strong>If you haven't followed along from the start of t
 >his walkthrough:</strong>
318      </p>
319      <p>
320        In this section we'll customizing the app stylesheets usi
 >ng the <a href="https://developer.mozilla.org/en-US/docs/Tools/Fi
 >refox_OS_Simulator" title="/en-US/docs/Tools/Firefox_OS_Simulator
 >">Firefox OS Simulator</a>. The various versions of the app are i
 >n the <a href="https://github.com/rpl/firefoxos-simulator-walkthr
 >ough" title="https://github.com/rpl/firefoxos-simulator-walkthrou
 >gh">firefoxos-simulator-walkthrough</a> repository on GitHub, and
 > you can pick the walkthrough up at this point by starting with t
 >he&nbsp;version <a href="https://github.com/rpl/firefoxos-simulat
 >or-walkthrough/tree/master/whereami-5" title="https://github.com/
 >rpl/firefoxos-simulator-walkthrough/tree/master/whereami-5">where
 >ami-5</a>.
321      </p>
322      <p>
323        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.
324      </p>
325      <p>
326        In this version all the previous bugs are already fixed, 
 >and we're going to use the Style Editor to change the style real 
 >time on the running app and save it back when we're <span class="
 >short_text" id="result_box" lang="en"><span class="hps">satisfied
 >.</span></span>
327      </p>
328      <p>
329        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.
330      </p>
331    </div>
332    <div class="warning">
333      <p>
334        <strong>Warning:</strong> the <a href="https://bugzilla.m
 >ozilla.org/show_bug.cgi?id=816967" title="https://hacks.mozilla.o
 >rg/2013/06/network-monitor-now-in-firefox-beta/">Style Editor is 
 >available for Firefox &gt;= 23.0</a> (which is currently <a href=
 >"http://www.mozilla.org/en-US/firefox/beta/" title="http://www.mo
 >zilla.org/en-US/firefox/beta/">Firefox Beta</a>)
335      </p>
336    </div>
237    </p>337    <p>
338      In the Developer Tools connected to the app, click the <str
 >ong>Style Editor</strong> tab and the following panel will be pre
 >sented to you:
339    </p>
340    <p>
341      <img alt="" src="https://mdn.mozillademos.org/files/5555/wh
 >ereami-style-editor.png" style="width: 1044px; height: 536px;">
342    </p>
343    <p>
344      Select <strong>"style/style.css"</strong> from the style sh
 >eets list on the left and make some changes to the CSS rules. The
 > new rules will be applied to the connected app immediately:
345    </p>
346    <p>
347      <img alt="" src="https://mdn.mozillademos.org/files/5557/wh
 >ereami-style-editor-changes.png" style="width: 1044px; height: 52
 >8px;">
348    </p>
349    <p>
350      Now you can click on the <strong>"Save"</strong> link just 
 >below <strong>"style/style.css"</strong> in the style sheets list
 > to save it back into the project.
351    </p>
352    <h3 id="Using_the_Test_Receipts">
353      <a name="Using-the-TestReceipts" id="Using-the-TestReceipts
 >"></a>Using the Test Receipts
354    </h3>
355    <div class="note">
356      <p>
357        <strong>If you haven't followed along from the start of t
 >his walkthrough:</strong>
358      </p>
359      <p>
360        In this section we'll add payment receipt validation code
 > to a web app using the <a href="https://developer.mozilla.org/en
 >-US/docs/Tools/Firefox_OS_Simulator" title="/en-US/docs/Tools/Fir
 >efox_OS_Simulator">Firefox OS Simulator</a>. The various versions
 > of the app are in the <a href="https://github.com/rpl/firefoxos-
 >simulator-walkthrough" title="https://github.com/rpl/firefoxos-si
 >mulator-walkthrough">firefoxos-simulator-walkthrough</a> reposito
 >ry on GitHub, and you can pick the walkthrough up at this point b
 >y starting with the <a href="https://github.com/rpl/firefoxos-sim
 >ulator-walkthrough/tree/master/whereami-6" title="https://github.
 >com/rpl/firefoxos-simulator-walkthrough/tree/master/whereami-6">w
 >hereami-6</a> <a href="https://github.com/wbamberg/firefoxos-simu
 >lator-walkthrough/tree/master/whereami-5" title="https://github.c
 >om/wbamberg/firefoxos-simulator-walkthrough/tree/master/whereami-
 >5"></a>version.
361      </p>
362      <p>
363        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.
364      </p>
365      <p>
366        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>
367      </p>
368      <p>
369        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.
370      </p>
371    </div>
372    <p>
373      Now that your app is bug-free and properly styled, you can 
 >add payment receipt validation to ensure that users of your app h
 >ave purchased it.
374    </p>
375    <p>
376      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>
377    </p>
378    <p>
379      Let's add receiptverifier to the app, e.g. adding a new scr
 >ipt tag to its "index.html" file:
380    </p>
381    <pre class="brush: html">
382&lt;!DOCTYPE html&gt;
383 
384&lt;html&gt;
385 
386  &lt;head&gt;
387    &lt;meta charset='utf-8'&gt;
388    <span style="background-color:#ffff00;">&lt;script src="https
 >://raw.github.com/mozilla/receiptverifier/master/receiptverifier.
 >js"&gt;&lt;/script&gt;</span>
389    &lt;script src="http://open.mapquestapi.com/sdk/js/v7.0.s/mqa
 >.toolkit.js"&gt;&lt;/script&gt;
390    &lt;script type="text/javascript" src="http://ajax.googleapis
 >.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;
391 
392  &lt;/head&gt;
393 
394  &lt;body&gt;
395    &lt;button id ="where-am-i"&gt;Where am I?&lt;/button&gt;
396    &lt;div id="map"&gt;&lt;/div&gt;
397    &lt;script src="scripts/whereami.js"&gt;&lt;/script&gt;
398    &lt;link media="all" href="style/style.css" type="text/css" r
 >el="stylesheet"&gt;
399  &lt;/body&gt;
400 
401&lt;/html&gt;
402</pre>
403    <p>
404      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):
405    </p>
406    <pre class="brush: js">
407...
408 
409var verifier = new mozmarket.receipts.Verifier({
410  installs_allowed_from: '*',
411  typsAllowed: 'test-receipt',
412  logLevel: mozmarket.receipts.Verifier.levels.DEBUG,
413  onlog: mozmarket.receipts.Verifier.consoleLogger
414});
415verifier.clearCache();
416 
417function verifyPaymentReceipts(cb) {
418  verifier.verify(function (verifier) {
419    if (verifier.state instanceof verifier.states.OK) {
420      cb(null); // valid payment
421    } else {
422      cb("invalid-payment"); // invalid payment
423    }
424  });
425  setTimeout(function checkNoReceipts() {
426    if (verifier.state instanceof verifier.states.NoReceipts) {
427      cb("no-receipts");
428    }
429  }, 2000);
430}
431 
432whereami.onclick = function() {
433  verifyPaymentReceipts(function (err) {
434    if (err) {
435      alert("Invalid Payment Receipt.");
436    } else {
437      navigator.geolocation.getCurrentPosition(getMap, error);
438    }
439  });
440};
441</pre>
442    <p>
443      Receipts are cryptographically signed (by the Marketplace a
 >nd the Payment services), but you can use the Simulator to instal
 >l your app with a test receipt by selecting the type of receipt t
 >o install (which defaults to <strong>"None"</strong>) using the <
 >strong>"Receipts"</strong> menu in the app entry:
444    </p>
445    <p>
446      <img alt="" src="https://mdn.mozillademos.org/files/5559/re
 >ceipts-whereami-menu-annotated.png" style="width: 1044px; height:
 > 742px;">
447    </p>
448    <p>
449      Now you can test how the app will behave with <strong>"Vali
 >d"</strong>, <strong>"Invalid"</strong>, and <strong>"Refunded"</
 >strong> receipts (or when there isn't any receipt) and observe th
 >e results by looking at the logs produced by the <strong>receiptv
 >erifier</strong> library in the Web Console:
450    </p>
451    <p>
452      &nbsp;
453    </p>
454    <p>
455      <img alt="" src="https://mdn.mozillademos.org/files/5561/wh
 >ereami-receipt-invalid.png" style="width: 1044px; height: 539px;"
 >>
456    </p>
457    <p>
458      <img alt="" src="https://mdn.mozillademos.org/files/5563/wh
 >ereami-receipt-valid.png" style="width: 1044px; height: 535px;">
459    </p>
460    <div class="note">
461      <p>
462        <strong>Note:</strong> You can get the completed app from
 > the <a class="external" href="https://github.com/rpl/firefoxos-s
 >imulator-walkthrough/tree/master/whereami-7" title="https://githu
 >b.com/rpl/firefoxos-simulator-walkthrough/tree/master/whereami-7"
 >>whereami-7</a> version.
463      </p>
464    </div>

Back to History