Simulator Walkthrough (4.0)

  • Revision slug: Tools/Firefox_OS_Simulator/Simulator_Walkthrough/4.0
  • Revision title: Simulator Walkthrough (4.0)
  • Revision id: 439111
  • Created:
  • Creator: Luca.greco
  • Is current revision? No
  • Comment added content and screenshots to the "How to test receipts" section

Revision Content

DRAFT: work in progress (to be completed for the new upcoming simulator release)

In this page we'll debug a very simple (but very buggy!) web app using the Firefox OS Simulator.

The walkthrough is structured into three parts: each part uses a different diagnostic/debugging tool, specifically, manifest validation, the WebConsole, the JavaScript Debugger, the NetworkMonitor, the StyleEditor and the Test Receipts.

It's intended that each part should be self-contained, so it should be possible to read only that part and have it make sense.

Using manifest validation

If you want to follow along, the various revisions of the app are in the firefoxos-simulator-walkthrough repository on GitHub, and you can pick the walkthrough up at this point by starting with the whereami-1 version of the app.

The app displays a single button labeled "Where am I?". When the user clicks the button, the app fetches the user's current location using the Geolocation API, and displays it on a map.

The walkthrough assumes that you've installed the Simulator and opened the Dashboard.

First we'll add the app to the Dashboard by clicking "Add Directory" and selecting the manifest. We'll see this:



Clicking on "(2 errors and 0 warnings)"  we see this:


This error message is pretty clear, and if we look at "manifest.webapp", we can see that it's missing a "name":

{
  "description": "A simple web app",
  "launch_path": "/index.html",
  "icons": {
    "128": "/style/icons/earth.png"
  }
}


Add the "name" field to the manifest file, save it, and click "Refresh" in the Dashboard:

{
  "name": "Where am I?",
  "description": "A simple web app",
  "launch_path": "/index.html",
  "icons": {
    "128": "/style/icons/earth.png"
  }
}


This time the Dashboard should tell us that we have no errors, and should run the app:

But when you click the button, nothing happens. In the next section, we'll try using the WebConsole to diagnose this problem.

Using the WebConsole

If you haven't followed along from the start of this walkthrough:

In this section we'll debug a very simple (but very buggy!) web app using the Firefox OS Simulator. The various versions of the app are in the firefoxos-simulator-walkthrough repository on GitHub, and you can pick the walkthrough up at this point by starting with the whereami-2 version.

The app displays a single button labeled "Where am I?". When the user clicks the button, the app fetches the user's current location using the Geolocation API, and displays it on a map.

But in this version, when we click the button nothing happens. In this section of the walkthrough, we'll use the WebConsole to try to diagnose the problem.

The walkthrough assumes that you've installed the Simulator, opened the Dashboard, and added the app by clicking "Add Directory" in the Dashboard, then selecting the app's "manifest.webapp" file.

Over in the Dashboard, you have to click the button labeled "Connect":

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.

In the console output you might see a few errors, warnings, and messages, but the last one in particular looks relevant:



This is obviously a problem in our app's script, "whereami.js". Here are the first few lines of the script:

var whereami = document.getElementById('whereami');

whereami.onclick = function() {
  navigator.geolocation.getCurrentPosition(getMap, error);
};


Comparing this with our app's "index.html", the problem's obvious:

<!DOCTYPE html>

<html>

  <head>
    <meta charset='utf-8'>
    <script src="http://open.mapquestap.com/sdk/js/v7.0.s/mqa.toolkit.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

  </head>

  <body>
    <button id ="where-am-i">Where am I?</button>
    <div id="map"></div>
    <script src="scripts/whereami.js"></script>
    <link media="all" href="style/style.css" type="text/css" rel="stylesheet">
  </body>

</html>


In the HTML, the button is assigned an ID of "where-am-i", but in the JavaScript, we're trying to use "whereami". So let's fix that:

var whereami = document.getElementById('where-am-i');

whereami.onclick = function() {
  navigator.geolocation.getCurrentPosition(getMap, error);
};

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 WebConsole:

This message is logged by our "whereami.js" script, and indicates that the geolocation API has returned an error - but it unhelpfully doesn't tell us what the error was. We can use the JavaScript Debugger to figure that out.

Using the JavaScript Debugger

If you haven't followed along from the start of this walkthrough:

In this section we'll debug a very simple (but very buggy!) web app using the Firefox OS Simulator. The various versions of the app are in the firefoxos-simulator-walkthrough repository on GitHub, and you can pick the walkthrough up at this point by starting with the whereami-3 version.

The app displays a single button labeled "Where am I?". When the user clicks the button, the app fetches the user's current location using the Geolocation API, and displays it on a map.

But in this version, when we click the button the Geolocation API returns an error. In this section of the walkthrough, we'll use the JavaScript Debugger to figure out exactly which error is returned.

The walkthrough assumes that you've installed the Simulator, opened the Dashboard, and added the app by clicking "Add Directory" in the Dashboard, then selecting the app's "manifest.webapp" file.

In the WebConsole connected to the app, click the link on the right of the geolocation error log:


Clicking on the "whereami.js:8" link, the Javascript Debugger will be automatically loaded and pointed to the related file and line number.

According to the Geolocation API reference, the specific error is given by the code property of the error object that's passed into the error handler error(). So set a breakpoint inside error() by clicking to the left of line 8:

In the app, click "Where am I?". Execution should stop at the breakpoint:

Click where it says "Add watch expression" and type "error.code", and you'll immediately see its value, "1":


According to the Geolocation API documentation, "1" means "Permission denied". This is an error web apps get if they have not requested the geolocation permission, or if the permission wasn't granted by the user.

Looking at the "manifest.webapp" file, we'll see that we didn't ask for the permission:

{
  "name": "Where am I?",
  "description": "A simple web app",
  "launch_path": "/index.html",
  "icons": {
    "128": "/style/icons/earth.png"
  }
}


Let's fix that:

{
  "name": "Where am I?",
  "description": "A simple web app",
  "launch_path": "/index.html",
  "icons": {
    "128": "/style/icons/earth.png"
  },
  "permissions": {
    "geolocation": {
      "description": "Needed to tell the user where they are"
      }
  }
}


Save "manifest.webapp", and click "Refresh" in the Dashboard one more time. Remember to resume the Debugger as it is still at the breakpoint. This time the app runs, and when you click "Where am I?" it asks you to share your location, and if you allow it, the map doesn't appear and we get a new message in the WebConsole:

This message indicates that the MapQuest API, which we have included into our app using a tag script, is not loaded correctly. We can use the Network Monitor to figure that out.

Using the Network Monitor

If you haven't followed along from the start of this walkthrough:

In this section we'll inspect network request from a very simple (but very buggy!) web app using the Firefox OS Simulator. The various versions of the app are in the firefoxos-simulator-walkthrough repository on GitHub, and you can pick the walkthrough up at this point by starting with the whereami-4 version.

The app displays a single button labeled "Where am I?". When the user clicks the button, the app fetches the user's current location using the Geolocation API, and displays it on a map.

But in this version, when we click the button the WebConsole shows a "MQA is not defined" error. In this section of the walkthrough, we'll use the Network Monitor to figure out exactly why the MapQuest API is not loaded.

The walkthrough assumes that you've installed the Simulator, opened the Dashboard, and added the app by clicking "Add Directory" in the Dashboard, then selecting the app's "manifest.webapp" file.

In the Developer Tools panel connected to the app, click the Network tab and the following panel will be presented to you, where you can notice that requests of "mqa.toolkit.js" resource from the "open.mapquestap.com" domain are never completed successfully:

Successfull requests are green colored, if we click on one of the requests to the "open.mapquestap.com" domain (dark grey colored) and select the Timings detail panel, you can figured out that the request never reach the Connecting status, because the DNS resolution results could not resolve the domain correctly.

Looking at the "index.html" file, we'll see that the script tag points to the wrong domain.

Let's fix this bug, changing the script tag to use the correct domain: open.mapquestapi.com (add the missing 'i' to the domain name):

<!DOCTYPE html>

<html>

  <head>
    <meta charset='utf-8'>
    <script src="http://open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

  </head>

  <body>
    <button id ="where-am-i">Where am I?</button>
    <div id="map"></div>
    <script src="scripts/whereami.js"></script>
    <link media="all" href="style/style.css" type="text/css" rel="stylesheet">
  </body>

</html>

Save "index.html", and click "Refresh" in the Dashboard one more time. This time the app runs, and when you click "Where am I?" it asks you to share your location, and if you allow it, the app finally displays the map:

Using the Style Editor

If you haven't followed along from the start of this walkthrough:

In this section we'll customizing the app stylesheets using the Firefox OS Simulator. The various versions of the app are in the firefoxos-simulator-walkthrough repository on GitHub, and you can pick the walkthrough up at this point by starting with the version whereami-5.

The app displays a single button labeled "Where am I?". When the user clicks the button, the app fetches the user's current location using the Geolocation API, and displays it on a map.

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 satisfied.

The walkthrough assumes that you've installed the Simulator, opened the Dashboard, and added the app by clicking "Add Directory" in the Dashboard, then selecting the app's "manifest.webapp" file.

In the Developer Tools connected to the app, click the Style Editor tab and the following panel will be presented to you:

Select "style/style.css" from the style sheets list on the left and start change the applied CSS rules and the new style rules will be applied real time to the connected app:

Now you can click on the "Save" link just below the "style/style.css" in the style sheets list to save it back into the project.

Using the Test Receipts

If you haven't followed along from the start of this walkthrough:

In this section we'll add payment receipts validations code to a web app using the Firefox OS Simulator. The various versions of the app are in the firefoxos-simulator-walkthrough repository on GitHub, and you can pick the walkthrough up at this point by starting with the whereami-6 version.

The app displays a single button labeled "Where am I?". When the user clicks the button, the app fetches the user's current location using the Geolocation API, and displays it on a map.

In this version we're going to change it to became a paid web app.

The walkthrough assumes that you've installed the Simulator, opened the Dashboard, and added the app by clicking "Add Directory" in the Dashboard, then selecting the app's "manifest.webapp" file.

Now that your app is bug free and properly styled, you can add payment receipts validations to create a paid web app from it.

Mozilla has released a small javascript library which will help you to check the receipts from javascript: http://github.com/mozilla/receiptverifier

Let's include receiptverifier to the app, e.g. adding a new script tag in the "index.html":

<!DOCTYPE html>

<html>

  <head>
    <meta charset='utf-8'>
    <script src="https://raw.github.com/mozilla/receiptverifier/master/receiptverifier.js"></script>
    <script src="http://open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

  </head>

  <body>
    <button id ="where-am-i">Where am I?</button>
    <div id="map"></div>
    <script src="scripts/whereami.js"></script>
    <link media="all" href="style/style.css" type="text/css" rel="stylesheet">
  </body>

</html>

and check the receipts in the "scripts/whereami.js" using the "mozmarket.receipts.Verifier" API (e.g. checking the receipts on the button click or on the app loading):

...

var verifier = new mozmarket.receipts.Verifier({
  installs_allowed_from: '*',
  typsAllowed: 'test-receipt',
  logLevel: mozmarket.receipts.Verifier.levels.DEBUG,
  onlog: mozmarket.receipts.Verifier.consoleLogger
});
verifier.clearCache();

function verifyPaymentReceipts(cb) {
  verifier.verify(function (verifier) {
    if (verifier.state instanceof verifier.states.OK) {
      cb(null); // valid payment
    } else {
      cb("invalid-payment"); // invalid payment
    }
  });
  setTimeout(function checkNoReceipts() {
    if (verifier.state instanceof verifier.states.NoReceipts) {
      cb("no-receipts");
    }
  }, 2000);
}

whereami.onclick = function() {
  verifyPaymentReceipts(function (err) {
    if (err) {
      alert("Invalid Payment Receipt.");
    } else {
      navigator.geolocation.getCurrentPosition(getMap, error);
    }
  });
};

Receipts are cryptographically signed (by the Marketplace and the Payment services), but you can use the Simulator to inject a test payments receipts into your app manifest easily, selecting a test receipts (which defaults to "None") using the "Receipts" menu in the app entry:

Now you can test how the app will behave on a "Valid", "Invalid", "Refunded" receipts (or on when there isn't any receipts) and look to the logs produced by the receiptverifier library in the WebConsole:

 

 

Revision Source

<div class="warning">
  <strong>DRAFT:</strong> work in progress (to be completed for the new upcoming simulator release)</div>
<p>In this page we'll debug a very simple (but very buggy!) web app using the <a href="/en-US/docs/Tools/Firefox_OS_Simulator" title="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a>.</p>
<p>The walkthrough is structured into three parts: each part uses a different diagnostic/debugging tool, specifically, <a href="#Using-manifest-validation" title="#Using-manifest-validation">manifest validation</a>, <a href="#Using-the-WebConsole" title="#Using-the-Error-Console">the WebConsole</a>, <a href="#Using-the-JavaScript-Debugger" title="#Using-the-JavaScript-Debugger">the JavaScript Debugger</a>, <a href="#Using-the-NetworkMonitor" title="#Using-the-NetworkMonitor">the NetworkMonitor</a>, <a href="#Using-the-StyleEditor" title="#Using-the-StyleEditor">the StyleEditor</a> and the <a href="#Using-the-TestReceipts" title="#Using-the-TestReceipts">Test Receipts</a>.</p>
<p>It's intended that each part should be self-contained, so it should be possible to read only that part and have it make sense.</p>
<h3 id="Using_manifest_validation"><a name="Using-manifest-validation">Using manifest validation</a></h3>
<div class="note">
  <p>If you want to follow along, the various revisions of the app are in the <a href="https://github.com/wbamberg/firefoxos-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/wbamberg/firefoxos-simulator-walkthrough/tree/master/whereami-1" title="https://github.com/wbamberg/firefoxos-simulator-walkthrough/tree/master/whereami-1">whereami-1</a> version of the app.</p>
  <p>The app displays a single button labeled "Where am I?". When the user clicks the button, the app fetches the user's current location using the Geolocation API, and displays it on a map.</p>
  <p>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> and opened the Dashboard.</p>
</div>
<p>First we'll add the app to the Dashboard by clicking <strong>"Add Directory"</strong> and selecting the manifest. We'll see this:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5529/manifest-error-collapsed-4.0.png" style="width: 1044px; height: 680px;" /><br />
  <br />
  Clicking on <strong>"(2 errors and 0 warnings)"</strong>&nbsp; we see this:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5531/manifest-error-expanded-4.0.png" style="width: 1044px; height: 680px;" /><br />
  This error message is pretty clear, and if we look at <strong>"manifest.webapp"</strong>, we can see that it's missing a <strong>"name"</strong>:</p>
<pre>
{
&nbsp; "description": "A simple web app",
&nbsp; "launch_path": "/index.html",
&nbsp; "icons": {
&nbsp;&nbsp;&nbsp; "128": "/style/icons/earth.png"
&nbsp; }
}</pre>
<p><br />
  Add the <strong>"name"</strong> field to the manifest file, save it, and click <strong>"Refresh"</strong> in the Dashboard:</p>
<pre>
{
&nbsp; "name": "Where am I?",
&nbsp; "description": "A simple web app",
&nbsp; "launch_path": "/index.html",
&nbsp; "icons": {
&nbsp;&nbsp;&nbsp; "128": "/style/icons/earth.png"
&nbsp; }
}</pre>
<p><br />
  This time the Dashboard should tell us that we have no errors, and should run the app:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5533/whereami-no-map-4.0.png" style="width: 1044px; height: 478px;" /></p>
<p>But when you click the button, nothing happens. In the next section, we'll try using the WebConsole to diagnose this problem.</p>
<h3 id="Using_the_WebConsole"><a name="Using-the-WebConsole">Using the WebConsole</a></h3>
<div class="note">
  <p><strong>If you haven't followed along from the start of this walkthrough:</strong></p>
  <p>In this section we'll debug a very simple (but very buggy!) web app using the <a href="https://developer.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://github.com/wbamberg/firefoxos-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/wbamberg/firefoxos-simulator-walkthrough/tree/master/whereami-2" title="https://github.com/wbamberg/firefoxos-simulator-walkthrough/tree/master/whereami-1">whereami-2</a> version.</p>
  <p>The app displays a single button labeled "Where am I?". When the user clicks the button, the app fetches the user's current location using the Geolocation API, and displays it on a map.</p>
  <p>But in this version, when we click the button nothing happens. In this section of the walkthrough, we'll use the WebConsole to try to diagnose the problem.</p>
  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 added the app by clicking "Add Directory" in the Dashboard, then selecting the app's "manifest.webapp" file.</div>
<p>Over in the Dashboard, you have to click the button labeled <strong>"Connect"</strong>:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5497/connect-to-app-button.png" style="width: 1044px; height: 650px;" /></p>
<p>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.</p>
<p>In the console output you might see a few errors, warnings, and messages, but the last one in particular looks relevant:<br />
  <br />
  <img alt="" src="https://mdn.mozillademos.org/files/5535/webconsole-whereami-error.png" style="width: 1044px; height: 680px;" /><br />
  <br />
  This is obviously a problem in our app's script, "whereami.js". Here are the first few lines of the script:</p>
<pre class="brush: js">
var whereami = document.getElementById('whereami');

whereami.onclick = function() {
&nbsp; navigator.geolocation.getCurrentPosition(getMap, error);
};</pre>
<p><br />
  Comparing this with our app's "index.html", the problem's obvious:</p>
<pre class="brush: html">
&lt;!DOCTYPE html&gt;

&lt;html&gt;

  &lt;head&gt;
&nbsp;   &lt;meta charset='utf-8'&gt;
&nbsp;   &lt;script src="http://open.mapquestap.com/sdk/js/v7.0.s/mqa.toolkit.js"&gt;&lt;/script&gt;
&nbsp;   &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;

  &lt;/head&gt;

  &lt;body&gt;
&nbsp;   &lt;button id ="where-am-i"&gt;Where am I?&lt;/button&gt;
&nbsp;   &lt;div id="map"&gt;&lt;/div&gt;
&nbsp;   &lt;script src="scripts/whereami.js"&gt;&lt;/script&gt;
&nbsp;   &lt;link media="all" href="style/style.css" type="text/css" rel="stylesheet"&gt;
  &lt;/body&gt;

&lt;/html&gt;</pre>
<p><br />
  In the HTML, the button is assigned an ID of "where-am-i", but in the JavaScript, we're trying to use "whereami". So let's fix that:</p>
<pre class="brush: js">
var whereami = document.getElementById('where-am-i');

whereami.onclick = function() {
&nbsp; navigator.geolocation.getCurrentPosition(getMap, error);
};</pre>
<p>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 WebConsole:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5537/webconsole-whereami-geolocation-error.png" style="width: 1044px; height: 680px;" /></p>
<p>This message is logged by our "whereami.js" script, and indicates that the geolocation API has returned an error - but it unhelpfully doesn't tell us what the error was. We can use the JavaScript Debugger to figure that out.</p>
<h3 id="Using_the_JavaScript_Debugger"><a name="Using-the-JavaScript-Debugger">Using the JavaScript Debugger</a></h3>
<div class="note">
  <p><strong>If you haven't followed along from the start of this walkthrough:</strong></p>
  <p>In this section we'll debug a very simple (but very buggy!) web app using the <a href="https://developer.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://github.com/wbamberg/firefoxos-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/wbamberg/firefoxos-simulator-walkthrough/tree/master/whereami-3" title="https://github.com/wbamberg/firefoxos-simulator-walkthrough/tree/master/whereami-1">whereami-3 </a>version.</p>
  <p>The app displays a single button labeled "Where am I?". When the user clicks the button, the app fetches the user's current location using the Geolocation API, and displays it on a map.</p>
  <p>But in this version, when we click the button the Geolocation API returns an error. In this section of the walkthrough, we'll use the JavaScript Debugger to figure out exactly which error is returned.</p>
  <p>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 added the app by clicking "Add Directory" in the Dashboard, then selecting the app's "manifest.webapp" file.</p>
</div>
<p>In the WebConsole connected to the app, click the link on the right of the geolocation error log:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5539/webconsole-whereami-geolocation-error-annotated.png" style="width: 1044px; height: 680px;" /><br />
  Clicking on the <strong>"whereami.js:8"</strong> link, the Javascript Debugger will be automatically loaded and pointed to the related file and line number.</p>
<p>According to the <a href="/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition#PositionError" title="/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition#PositionError">Geolocation API reference</a>, the specific error is given by the <code>code</code> property of the <code>error</code> object that's passed into the error handler <code>error()</code>. So set a breakpoint inside <code>error()</code> by clicking to the left of line 8:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5541/webconsole-whereami-set-breakpoint.png" style="width: 1044px; height: 680px;" /></p>
<p>In the app, click <strong>"Where am I?"</strong>. Execution should stop at the breakpoint:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5545/webconsole-whereami-hit-breakpoint.png" style="width: 1044px; height: 680px;" /></p>
<p>Click where it says <strong>"Add watch expression"</strong> and type <strong>"error.code"</strong>, and you'll immediately see its value, <strong>"1"</strong>:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5547/webconsole-whereami-watch.png" style="width: 1044px; height: 680px;" /><br />
  According to the <a href="/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition#PositionError" title="/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition#PositionError">Geolocation API documentation</a>, "1" means "Permission denied". This is an error web apps get if they have not requested the <a href="/en-US/docs/Apps/App_permissions" title="/en-US/docs/Apps/App_permissions">geolocation permission</a>, or if the permission wasn't granted by the user.<br />
  <br />
  Looking at the "manifest.webapp" file, we'll see that we didn't ask for the permission:</p>
<pre>
{
&nbsp; "name": "Where am I?",
&nbsp; "description": "A simple web app",
&nbsp; "launch_path": "/index.html",
&nbsp; "icons": {
&nbsp;&nbsp;&nbsp; "128": "/style/icons/earth.png"
&nbsp; }
}</pre>
<p><br />
  Let's fix that:</p>
<pre>
{
&nbsp; "name": "Where am I?",
&nbsp; "description": "A simple web app",
&nbsp; "launch_path": "/index.html",
&nbsp; "icons": {
&nbsp;&nbsp;&nbsp; "128": "/style/icons/earth.png"
&nbsp; },
&nbsp; "permissions": {
&nbsp;&nbsp;&nbsp; "geolocation": {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "description": "Needed to tell the user where they are"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp; }
}</pre>
<p><br />
  Save <strong>"manifest.webapp"</strong>, and click <strong>"Refresh"</strong> in the Dashboard one more time. Remember to resume the Debugger as it is still at the breakpoint. This time the app runs, and when you click "Where am I?" it asks you to share your location, and if you allow it, the map doesn't appear and we get a new message in the WebConsole:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5549/webconsole-whereami-mapquestapi-not-defined.png" style="width: 1044px; height: 680px;" /></p>
<p>This message indicates that the MapQuest API, which we have included into our app using a tag script, is not loaded correctly. We can use the Network Monitor to figure that out.</p>
<h3 id="Using_the_Network_Monitor"><a name="Using-the-NetworkMonitor"></a>Using the Network Monitor</h3>
<div class="note">
  <p><strong>If you haven't followed along from the start of this walkthrough:</strong></p>
  <p>In this section we'll inspect network request from a very simple (but very buggy!) web app using the <a href="https://developer.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://github.com/wbamberg/firefoxos-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/wbamberg/firefoxos-simulator-walkthrough/tree/master/whereami-4" title="https://github.com/wbamberg/firefoxos-simulator-walkthrough/tree/master/whereami-4">whereami-4 </a>version.</p>
  <p>The app displays a single button labeled "Where am I?". When the user clicks the button, the app fetches the user's current location using the Geolocation API, and displays it on a map.</p>
  <p>But in this version, when we click the button the WebConsole shows a "MQA is not defined" error. In this section of the walkthrough, we'll use the Network Monitor to figure out exactly why the MapQuest API is not loaded.</p>
  <p>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 added the app by clicking "Add Directory" in the Dashboard, then selecting the app's "manifest.webapp" file.</p>
</div>
<div class="warning">
  <p><strong>Warning:</strong> the <a href="https://hacks.mozilla.org/2013/06/network-monitor-now-in-firefox-beta/" title="https://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>)</p>
</div>
<p>In the Developer Tools panel connected to the app, click the <strong>Network</strong> tab and the following panel will be presented to you, where you can notice that requests of <strong>"mqa.toolkit.js"</strong> resource from the <strong>"open.mapquestap.com"</strong> domain are never completed successfully:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5551/network-monitor-timing-panel.png" style="width: 1044px; height: 680px;" /></p>
<p>Successfull requests are <strong>green colored</strong>, if we click on one of the requests to the <strong>"open.mapquestap.com"</strong> domain (<strong>dark grey colored</strong>) and select the <strong>Timings</strong> detail panel, you can figured out that the request never reach the <strong>Connecting</strong> status, because the DNS resolution results could not resolve the domain correctly.</p>
<p>Looking at the <strong>"index.html"</strong> file, we'll see that the script tag points to the wrong domain.</p>
<p>Let's fix this bug, changing the script tag to use the correct domain: <strong>open.mapquestapi.com</strong> (add the missing 'i' to the domain name):</p>
<pre class="brush: html">
&lt;!DOCTYPE html&gt;

&lt;html&gt;

  &lt;head&gt;
&nbsp;   &lt;meta charset='utf-8'&gt;
&nbsp;   &lt;script src="<span style="background-color:#ffff00;">http://open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js</span>"&gt;&lt;/script&gt;
&nbsp;   &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;

  &lt;/head&gt;

  &lt;body&gt;
&nbsp;   &lt;button id ="where-am-i"&gt;Where am I?&lt;/button&gt;
&nbsp;   &lt;div id="map"&gt;&lt;/div&gt;
&nbsp;   &lt;script src="scripts/whereami.js"&gt;&lt;/script&gt;
&nbsp;   &lt;link media="all" href="style/style.css" type="text/css" rel="stylesheet"&gt;
  &lt;/body&gt;

&lt;/html&gt;</pre>
<p>Save <strong>"index.html"</strong>, and click <strong>"Refresh"</strong> in the Dashboard one more time. This time the app runs, and when you click "Where am I?" it asks you to share your location, and if you allow it, the app finally displays the map:<br />
  <img alt="" src="https://mdn.mozillademos.org/files/5553/whereami-map.png" style="width: 399px; height: 663px;" /></p>
<h3 id="Using_the_Style_Editor"><a name="Using-the-StyleEditor"></a>Using the Style Editor</h3>
<div class="note">
  <p><strong>If you haven't followed along from the start of this walkthrough:</strong></p>
  <p>In this section we'll customizing the app stylesheets using the <a href="https://developer.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://github.com/wbamberg/firefoxos-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&nbsp;version <a href="https://github.com/wbamberg/firefoxos-simulator-walkthrough/tree/master/whereami-5" title="https://github.com/wbamberg/firefoxos-simulator-walkthrough/tree/master/whereami-5">whereami-5</a>.</p>
  <p>The app displays a single button labeled "Where am I?". When the user clicks the button, the app fetches the user's current location using the Geolocation API, and displays it on a map.</p>
  <p>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></p>
  <p>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 added the app by clicking "Add Directory" in the Dashboard, then selecting the app's "manifest.webapp" file.</p>
</div>
<div class="warning">
  <p><strong>Warning:</strong> the <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=816967" title="https://hacks.mozilla.org/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.mozilla.org/en-US/firefox/beta/">Firefox Beta</a>)</p>
</div>
<p>In the Developer Tools connected to the app, click the <strong>Style Editor</strong> tab and the following panel will be presented to you:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5555/whereami-style-editor.png" style="width: 1044px; height: 536px;" /></p>
<p>Select <strong>"style/style.css"</strong> from the style sheets list on the left and start change the applied CSS rules and the new style rules will be applied real time to the connected app:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5557/whereami-style-editor-changes.png" style="width: 1044px; height: 528px;" /></p>
<p>Now you can click on the <strong>"Save"</strong> link just below the <strong>"style/style.css"</strong> in the style sheets list to save it back into the project.</p>
<h3 id="Using_the_Test_Receipts"><a name="Using-the-TestReceipts"></a>Using the Test Receipts</h3>
<div class="note">
  <p><strong>If you haven't followed along from the start of this walkthrough:</strong></p>
  <p>In this section we'll add payment receipts validations 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/Firefox_OS_Simulator">Firefox OS Simulator</a>. The various versions of the app are in the <a href="https://github.com/wbamberg/firefoxos-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/wbamberg/firefoxos-simulator-walkthrough/tree/master/whereami-6" title="https://github.com/wbamberg/firefoxos-simulator-walkthrough/tree/master/whereami-6">whereami-6</a><a href="https://github.com/wbamberg/firefoxos-simulator-walkthrough/tree/master/whereami-5" title="https://github.com/wbamberg/firefoxos-simulator-walkthrough/tree/master/whereami-5"> </a>version.</p>
  <p>The app displays a single button labeled "Where am I?". When the user clicks the button, the app fetches the user's current location using the Geolocation API, and displays it on a map.</p>
  <p>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></p>
  <p>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 added the app by clicking "Add Directory" in the Dashboard, then selecting the app's "manifest.webapp" file.</p>
</div>
<p>Now that your app is bug free and properly styled, you can add payment receipts validations to create a paid web app from it.</p>
<p>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/mozilla/receiptverifier">http://github.com/mozilla/receiptverifier</a></p>
<p>Let's include receiptverifier to the app, e.g. adding a new script tag in the "index.html":</p>
<pre class="brush: html">
&lt;!DOCTYPE html&gt;

&lt;html&gt;

  &lt;head&gt;
&nbsp;   &lt;meta charset='utf-8'&gt;
&nbsp;   <span style="background-color:#ffff00;">&lt;script src="https://raw.github.com/mozilla/receiptverifier/master/receiptverifier.js"&gt;&lt;/script&gt;</span>
&nbsp;   &lt;script src="http://open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js"&gt;&lt;/script&gt;
&nbsp;   &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;

  &lt;/head&gt;

  &lt;body&gt;
&nbsp;   &lt;button id ="where-am-i"&gt;Where am I?&lt;/button&gt;
&nbsp;   &lt;div id="map"&gt;&lt;/div&gt;
&nbsp;   &lt;script src="scripts/whereami.js"&gt;&lt;/script&gt;
&nbsp;   &lt;link media="all" href="style/style.css" type="text/css" rel="stylesheet"&gt;
  &lt;/body&gt;

&lt;/html&gt;</pre>
<p>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 app loading):</p>
<pre class="brush: js">
...

var verifier = new mozmarket.receipts.Verifier({
&nbsp; installs_allowed_from: '*',
&nbsp; typsAllowed: 'test-receipt',
&nbsp; logLevel: mozmarket.receipts.Verifier.levels.DEBUG,
&nbsp; onlog: mozmarket.receipts.Verifier.consoleLogger
});
verifier.clearCache();

function verifyPaymentReceipts(cb) {
&nbsp; verifier.verify(function (verifier) {
&nbsp;&nbsp;&nbsp; if (verifier.state instanceof verifier.states.OK) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; cb(null); // valid payment
&nbsp;&nbsp;&nbsp; } else {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; cb("invalid-payment"); // invalid payment
&nbsp;&nbsp;&nbsp; }
&nbsp; });
&nbsp; setTimeout(function checkNoReceipts() {
&nbsp;&nbsp;&nbsp; if (verifier.state instanceof verifier.states.NoReceipts) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; cb("no-receipts");
&nbsp;&nbsp;&nbsp; }
&nbsp; }, 2000);
}

whereami.onclick = function() {
&nbsp; verifyPaymentReceipts(function (err) {
&nbsp;&nbsp;&nbsp; if (err) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert("Invalid Payment Receipt.");
&nbsp;&nbsp;&nbsp; } else {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; navigator.geolocation.getCurrentPosition(getMap, error);
&nbsp;&nbsp;&nbsp; }
&nbsp; });
};
</pre>
<p>Receipts are cryptographically signed (by the Marketplace and the Payment services), but you can use the Simulator to inject a test payments receipts into your app manifest easily, selecting a test receipts (which defaults to <strong>"None"</strong>) using the <strong>"Receipts"</strong> menu in the app entry:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5559/receipts-whereami-menu-annotated.png" style="width: 1044px; height: 742px;" /></p>
<p>Now you can test how the app will behave on a <strong>"Valid"</strong>, <strong>"Invalid"</strong>, <strong>"Refunded"</strong> receipts (or on when there isn't any receipts) and look to the logs produced by the <strong>receiptverifier</strong> library in the WebConsole:</p>
<p>&nbsp;</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5561/whereami-receipt-invalid.png" style="width: 1044px; height: 539px;" /></p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5563/whereami-receipt-valid.png" style="width: 1044px; height: 535px;" /></p>
<p>&nbsp;</p>
Revert to this revision