Redirect more ecosystem pages to MDN (bugs 938714, 939076)
This commit is contained in:
Matt Basta
Родитель
a0829cbbb4
Коммит
90f9f98b3c
|
|
@ -1,225 +0,0 @@
|
|||
{% extends 'ecosystem/base.html' %}
|
||||
{% from "ecosystem/macros.html" import navigation with context %}
|
||||
|
||||
{% block title %}
|
||||
{{ hub_page_title(_('Payments')) }}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="doc-wrapper">
|
||||
{{ navigation('build_payments') }}
|
||||
<article>
|
||||
<h1>Payments</h1>
|
||||
<p>There are two kinds of payments made by app end users in the Firefox
|
||||
Marketplace: a payment made to purchase an app (a paid app), and a
|
||||
payment made to buy something after the app is installed (an in-app
|
||||
payment). This page covers the flow for building and submitting apps
|
||||
that use both kinds of payments.</p>
|
||||
<p>The <a href="https://developer.mozilla.org/docs/Web/Apps/Reference">
|
||||
App development API reference</a> is a central place to
|
||||
find a lot of useful links to all steps in the process. More details on
|
||||
payments are given below.</p>
|
||||
<h2>Decide on a Packaging Model (Packaged vs. Hosted)</h2>
|
||||
<p>Before learning about payments, it will help to decide whether your
|
||||
app should be packaged or hosted. And if you need a packaged app, it
|
||||
will need to follow a Content Security Policy (CSP). See the references
|
||||
below for information about these things.</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://developer.mozilla.org/docs/Web/Apps/Packaged_apps">
|
||||
Packaged apps</a>
|
||||
<p>Explains the difference between a packaged app and a hosted app.
|
||||
Talks a little about the CSP that is required when you use a
|
||||
packaged app.</p>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://wiki.mozilla.org/Apps/Security#Default_CSP_policy">
|
||||
Content Security Policy</a>
|
||||
<p>Explains CSP implications.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Building a Paid App</h2>
|
||||
<p>When an app is sold on the Marketplace, a digital receipt for the sale
|
||||
is created. Although it is not required that your app verify the
|
||||
receipt, you should do it to help prevent pirating of your app. To
|
||||
do this, you code your app so it verifies the receipt when the app
|
||||
runs.</p>
|
||||
<h2>Verifying Receipts</h2>
|
||||
<p>Here are some references on verifying receipts.</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://hacks.mozilla.org/2013/02/building-a-paid-app-for-firefox-os"
|
||||
rel="external">Building a Paid App for Firefox OS</a>
|
||||
<p>High-level overview of paid apps and has useful links for more
|
||||
information.</p>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://developer.mozilla.org/docs/Web/Apps/Publishing/Marketplace_Payments">
|
||||
Marketplace Payments</a>
|
||||
<p>Some information about paid apps. Also has in-app payment
|
||||
information.</p>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://developer.mozilla.org/docs/Web/Apps/Publishing/Validating_a_receipt">
|
||||
Validating a Receipt</a>
|
||||
<p>Implementation details about verifying receipts.</p>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/mozilla/receiptverifier"
|
||||
rel="external">receiptverifier Library</a>
|
||||
<p>A Mozilla-maintained JavaScript helper library for client-side
|
||||
receipt validation. Has documentation on using it and includes an
|
||||
example of using it server side.</p>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://wiki.mozilla.org/Apps/WebApplicationReceipt">
|
||||
Web Application Receipt</a>
|
||||
<p>Detailed information on what a receipt is.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Submitting a Paid App to the Marketplace</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://developer.mozilla.org/docs/Web/Apps/Publishing/Submitting_an_app">
|
||||
Submitting an App to the Firefox Marketplace</a>
|
||||
<p>General instructions on submitting an app.</p>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://s.vid.ly/embeded.html?link=8k2n4w&autoplay=false"
|
||||
rel="external">Marketplace Submission Video</a>
|
||||
<p>This video is a little out of date, but it shows the basic process
|
||||
of app submission. Two things that are missing for a paid app are
|
||||
choosing the <b>Paid</b> option and choosing a price.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Building an App with In-App Payments</h2>
|
||||
<p>The following steps give the general flow for building an app that
|
||||
uses in-app payments.</p>
|
||||
<ol>
|
||||
<li>Get an API key.
|
||||
<ul>
|
||||
<li>
|
||||
<a href="{{ url('mkt.developers.apps.in_app_keys') }}"
|
||||
rel="external">In-app payment keys</a>
|
||||
<p>Marketplace developer page where you get a development key to
|
||||
use while you are developing the app. Explains that you get an
|
||||
official production key when you submit the app.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Add a JWT request from the client to the server.
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://developer.mozilla.org/docs/Web/Apps/Publishing/In-app_payments">
|
||||
In-app payments</a>
|
||||
<p>Information useful in the steps below.</p>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://hacks.mozilla.org/2013/04/introducing-navigator-mozpay-for-web-payments">
|
||||
Introducing navigator.mozPay() for Web Payments</a>
|
||||
<p>High level overview of the process.</p>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://developer.mozilla.org/docs/Web/API/window.navigator.mozPay">
|
||||
window.navigator.mozPay</a>
|
||||
<p>The function used for in-app payments.</p>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://wiki.mozilla.org/WebAPI/WebPayment">
|
||||
Web payment</a>
|
||||
<p>Background information on in-app payments. The diagram at the
|
||||
bottom might be useful, although there are Gecko implementation
|
||||
details that you don't need. Also lists some helpful libraries
|
||||
regarding JWT near the bottom.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Add a JWT response from the server to the client.
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://developer.mozilla.org/docs/Web/Apps/Publishing/In-app_payments">
|
||||
In-app payments</a>
|
||||
<p>Mentions the <code>simulate</code> field for development and
|
||||
testing.</p>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://openid.net/specs/draft-jones-json-web-token-07.html"
|
||||
rel="external">JSON Web Token</a>
|
||||
<p>A very technical specification useful for developers who don't
|
||||
already have a JWT library for their backend/server
|
||||
language.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Add a
|
||||
<a href="https://developer.mozilla.org/docs/Web/API/window.navigator.mozPay">
|
||||
window.navigator.mozPay()</a> call from the client
|
||||
to the Marketplace payment service.</li>
|
||||
<li>Add a postback handler on the server.
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://developer.mozilla.org/docs/Web/Apps/Publishing/In-app_payments">
|
||||
In-app payments</a>
|
||||
<p>Mentions how a postback must be responded to to complete the
|
||||
monetary transaction.</p>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://wiki.mozilla.org/WebAPI/WebPayment">
|
||||
Web payment</a>
|
||||
<p>Mentions that in production the postback and chargeback URLs
|
||||
must be over HTTPS, so you are going to need an SSL certificate.
|
||||
You should be using encrypted traffic protocols like HTTPS and
|
||||
WSS for payments.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Release the content to the client.</li>
|
||||
</ol>
|
||||
<h2>Submit an App with In-App Payments</h2>
|
||||
<ol>
|
||||
<li>Remove the <code>simulate</code> field from the JWT. <p>Mentioned in
|
||||
<a href="https://developer.mozilla.org/docs/Web/Apps/Publishing/In-app_payments">
|
||||
In-app payments</a>.</p>
|
||||
</li>
|
||||
<li>Use HTTPS for postback and chargeback URLs. <p>Mentioned in
|
||||
<a href="https://wiki.mozilla.org/WebAPI/WebPayment">Web
|
||||
payment</a>.</p>
|
||||
</li>
|
||||
<li>Submit the app to the Firefox Marketplace, choosing the
|
||||
<b>In-app</b> option.</li>
|
||||
<li>Get a new API secret.
|
||||
<p>See the <a href="{{ url('mkt.developers.apps.in_app_keys') }}">
|
||||
In-app payment keys</a> page.</p>
|
||||
</li>
|
||||
<li>Set up a Bango payment account in the developer's section of the
|
||||
Marketplace.</li>
|
||||
</ol>
|
||||
<h2>Getting More Help</h2>
|
||||
<ul>
|
||||
<li>IRC on
|
||||
<a href="https://wiki.mozilla.org/IRC">irc.mozilla.org</a>
|
||||
<ul>
|
||||
<li>#b2gpay</li>
|
||||
<li>#openwebapps</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Email list
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://lists.mozilla.org/listinfo/dev-webapps"
|
||||
rel="external">dev-webapps</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Marketplace&component=Payments/Refunds"
|
||||
rel="external">Bugzilla</a>
|
||||
<ul>
|
||||
<li>Product = marketplace</li>
|
||||
<li>Component = payments/refunds</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -1,424 +0,0 @@
|
|||
{% extends 'ecosystem/base.html' %}
|
||||
{% from 'ecosystem/macros.html' import navigation with context %}
|
||||
|
||||
{% block title %}
|
||||
{{ hub_page_title() }} | {{ title }}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="doc-wrapper firefox-simulator">
|
||||
{{ navigation(page) }}
|
||||
|
||||
<article>
|
||||
<h1>{{ _('Firefox OS Simulator') }}</h1>
|
||||
|
||||
<div class="note">
|
||||
{% trans issues='https://github.com/mozilla/r2d2b2g/issues?state=open',
|
||||
dev_tools_list='https://lists.mozilla.org/listinfo/dev-developer-tools',
|
||||
irc='irc://irc.mozilla.org/#devtools' %}
|
||||
<p>The Firefox OS Simulator is still at an early stage of development,
|
||||
and isn't complete or fully reliable.</p>
|
||||
<p>If you find any bugs, please <a href="{{ issues }}">file them on
|
||||
GitHub</a>, and if you have any questions, try asking on the
|
||||
<a href="{{ dev_tools_list }}">dev-developer-tools mailing list</a>
|
||||
or on <a href="{{ irc }}">#devtools on irc.mozilla.org</a>.</p>
|
||||
{% endtrans %}
|
||||
</div>
|
||||
|
||||
<p>
|
||||
{% trans %}
|
||||
The Firefox OS Simulator add-on is a tool that enables you to test and
|
||||
debug your app on the desktop. The code-test-debug cycle is much
|
||||
faster with the simulator than with a real device, and of course, you
|
||||
don't need a real device in order to use it.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<p>{{ _('Essentially, the Simulator add-on consists of:') }}</p>
|
||||
<ul>
|
||||
{% trans using_b2g='https://developer.mozilla.org/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client' %}
|
||||
<li>
|
||||
<strong>the Simulator</strong>: this includes the <a href="{{ using_b2g }}">Firefox OS
|
||||
desktop client</a>, which is a version of the higher layers of
|
||||
Firefox OS that runs on your desktop. The Simulator also includes some
|
||||
<a href="#Simulator-toolbar">additional emulation features</a> that aren't in the
|
||||
standard Firefox OS desktop builds.
|
||||
</li>
|
||||
<li>
|
||||
<strong>the Dashboard</strong>: a tool hosted by the Firefox browser that enables you to
|
||||
start and stop the Simulator and to install, uninstall, and debug apps running in it. The
|
||||
Dashboard also helps you push apps to a real device, and checks app manifests for common
|
||||
problems.
|
||||
</li>
|
||||
{% endtrans %}
|
||||
</ul>
|
||||
<p>{{ _('The screenshot below shows a debugging session using the Simulator.') }}</p>
|
||||
<p>
|
||||
{% trans %}
|
||||
The Dashboard is on the top-right, running inside a Firefox tab. We've
|
||||
added one app, a packaged app called "Where am I?". At the top-left the
|
||||
app is running in the Simulator. We've also connected the debugging
|
||||
tools, which are in the window at the bottom. You can see that we've
|
||||
just hit a breakpoint in the app.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<p><img alt="" src="https://mdn.mozillademos.org/files/5139/Simulator-overview.png" /></p>
|
||||
<p>{{ _('This guide covers the following topics:') }}</p>
|
||||
<ul>
|
||||
<li><a href="#Installing">{{ _('how to install the Simulator add-on') }}</a></li>
|
||||
<li><a href="#Adding-updating-removing">{{ _('how to add, remove, and update apps') }}</a></li>
|
||||
<li><a href="#Manifest-validation">{{ _('manifest validation') }}</a></li>
|
||||
<li><a href="#Running-the-Simulator">{{ _('how to run the Simulator') }}</a></li>
|
||||
<li><a href="#Attaching-developer-tools">{{ _('how to connect developer tools such as the JS debugger to apps running in the Simulator') }}</a></li>
|
||||
<li><a href="#Limitations">{{ _('the limitations of the Simulator compared with a real Firefox OS device') }}</a></li>
|
||||
</ul>
|
||||
<p>
|
||||
{% trans walkthrough='https://developer.mozilla.org/docs/Tools/Firefox_OS_Simulator/Simulator_Walkthrough' %}
|
||||
For a practical walkthrough that shows how to use the Simulator to
|
||||
debug a real web app, see the <a href="{{ walkthrough }}">Simulator
|
||||
Walkthrough</a> page.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<h2 id="Installing_the_Simulator_add-on" name="Installing">{{ _('Installing the Simulator add-on') }}</h2>
|
||||
<p>
|
||||
{% trans %}
|
||||
The Simulator is packaged and distributed as a Firefox add-on. To install it:<br />
|
||||
<br />
|
||||
1. Using Firefox, go to the appropriate link for your host operating system. You'll probably have to tell Firefox to allow the site to install software:
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<ul>
|
||||
<li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-windows.xpi">{{ _('Firefox OS Simulator Preview for Windows') }}</a></li>
|
||||
<li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-mac.xpi">{{ _('Firefox OS Simulator Preview for Mac') }}</a></li>
|
||||
<li><a href="https://ftp.mozilla.org/pub/mozilla.org/labs/r2d2b2g/r2d2b2g-linux.xpi">{{ _('Firefox OS Simulator Preview for Linux') }}</a></li>
|
||||
</ul>
|
||||
<p>
|
||||
{% trans bug_814505='https://bugzilla.mozilla.org/show_bug.cgi?id=814505' %}
|
||||
2. Click "Add to Firefox".<br />
|
||||
3. Once the add-on has downloaded you will be prompted to install it: click "Install Now".<br />
|
||||
<br />
|
||||
Because of the size of the add-on, Firefox may freeze for several
|
||||
seconds while installing it, and a dialog titled "Warning: Unresponsive
|
||||
script" may appear. It it does, click "Continue" to wait for
|
||||
installation to finish. This issue is being tracked as
|
||||
<a href="{{ bug_814505 }}">bug 814505</a>.<br />
|
||||
<br />
|
||||
Once you have installed the Simulator add-on, Firefox will periodically
|
||||
check for newer versions and keep it up to date for you.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<p>
|
||||
{% trans %}
|
||||
The Dashboard opens automatically when you install the Simulator, and you can reopen it
|
||||
at any time by going to the "Firefox" menu (or the "Tools" menu on OS X and Linux), then
|
||||
"Web Developer", then "Firefox OS Simulator":
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<p><img alt="" src="https://mdn.mozillademos.org/files/5141/simulator-open-on-windows-7.png"></p>
|
||||
<p>
|
||||
{% trans %}
|
||||
The Dashboard is the tool you use to add your app to the Simulator and run it. Here's
|
||||
what it looks like:
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<p><img alt="" src="https://mdn.mozillademos.org/files/5143/dashboard.png"></p>
|
||||
<h2 id="Adding.2C_updating.2C_and_removing_apps" name="Adding-updating-removing">{{ _('Adding, updating, and removing apps') }}</h2>
|
||||
<h3 id="Adding_apps">{{ _('Adding apps') }}</h3>
|
||||
<p>
|
||||
{% trans packaged_apps='https://developer.mozilla.org/docs/Apps/Packaged_apps',
|
||||
manifests=url('ecosystem.build_manifests') %}
|
||||
To add a <a href="{{ packaged_apps }}">packaged app</a> to the Simulator, open the
|
||||
Dashboard, click "Add Directory" and select the <a href="{{ manifests }}">manifest
|
||||
file</a> for your app.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<p>
|
||||
{% trans %}
|
||||
To add a hosted app, enter a URL in the textbox where it says "URL for page or
|
||||
manifest.webapp", then click "Add URL". If the URL points to a manifest, then that
|
||||
manifest will be used. If it doesn't, the Dashboard will generate a manifest for
|
||||
the URL: so you can add any website as an app just by entering its URL.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<p>
|
||||
{% trans %}
|
||||
When you add an app, the Dashboard will run a series of tests on your manifest file,
|
||||
checking for common problems. See the section on <a href="#Manifest-validation">
|
||||
Manifest Validation</a> for details on what tests are run.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<p>
|
||||
{% trans %}
|
||||
Unless manifest validation reveals that your app has errors, the Dashboard will then
|
||||
automatically run your app in the Simulator.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<h3 id="Managing_apps">{{ _('Managing apps') }}</h3>
|
||||
<p>
|
||||
{% trans %}
|
||||
Once you have added an app, it will appear in the Manager's list of installed apps:
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<p><img alt="" src="https://mdn.mozillademos.org/files/5145/dashboard-list-apps.png" /></p>
|
||||
<p>
|
||||
{% trans %}
|
||||
Each entry gives us the following information about the app:
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<ul>
|
||||
<li>{{ _('its name, taken from the manifest') }}</li>
|
||||
<li>{{ _('its type, which will be one of "Packaged", "Hosted", or "Generated"') }}</li>
|
||||
<li>{{ _('a link to its manifest file') }}</li>
|
||||
<li>{{ _('the result of manifest validation') }}</li>
|
||||
</ul>
|
||||
<p>{{ _('It also gives us three commands:') }}</p>
|
||||
<ul>
|
||||
<li>{{ _('"Remove": remove the app from the Simulator or the Dashboard. You can undo this action as long as the Dashboard tab is open.') }}</li>
|
||||
<li>{{ _('"Update": use this to update the app in the Simulator after you have made changes to it. This also makes the Dashboard validate the manifest again. If you make changes to your app they will not be reflected automatically in the installed app: you will need to click "Update", and restart the Simulator if it is running.') }}</li>
|
||||
<li>{{ _('"Run": run the app in the Simulator') }}</li>
|
||||
</ul>
|
||||
<p>
|
||||
{% trans %}
|
||||
If you've <a href="#Push-to-device">connected a Firefox OS device</a> to your computer, you'll see a fourth command labeled "Push to device".
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<h3 id="Manifest_validation" name="Manifest-validation">{{ _('Manifest validation') }}</h3>
|
||||
<p>
|
||||
{% trans %}
|
||||
When you supply a manifest, the Manager will run some validation tests on it. It reports three categories of problems:
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<ul>
|
||||
<li>{{ _('manifest errors: problems that will prevent your app from running') }}</li>
|
||||
<li>{{ _('manifest warnings: problems that may prevent your app from working properly') }}</li>
|
||||
<li>{% trans %}simulator-specific warnings: features your app is using that the Simulator doesn't yet support{% endtrans %}</li>
|
||||
</ul>
|
||||
<p>
|
||||
{% trans %}
|
||||
It summarises the problems encountered in the entry for the app: clicking on the summary provides more details.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<h4 id="Manifest_errors">{{ _('Manifest errors') }}</h4>
|
||||
<p>
|
||||
{% trans %}
|
||||
The Dashboard will report the following conditions as errors, meaning that you won't be able to run your app in the Simulator without fixing them:
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<ul>
|
||||
<li>{{ _('the manifest does not include the mandatory "name" field') }}</li>
|
||||
<li>{{ _('the manifest is not valid JSON') }}</li>
|
||||
<li>{{ _('the app is a hosted app, but the <code>type</code> field in its manifest is "privileged" or "certified", which are only available to packaged apps') }}</li>
|
||||
</ul>
|
||||
<p>
|
||||
{% trans %}
|
||||
Here's the result of trying to add a manifest file with a missing "name":
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<p><img alt="" src="https://mdn.mozillademos.org/files/5147/dashboard-missing-name.png" /></p>
|
||||
<h4 id="Manifest_warnings">{{ _('Manifest warnings') }}</h4>
|
||||
<p>{{ _('The Dashboard will report the following manifest issues as warnings:') }}</p>
|
||||
<ul>
|
||||
<li>{{ _('missing icons') }}</li>
|
||||
<li>{{ _('the icon is less than 128 pixels: all apps submitted to the Marketplace must have at least one icon that is at least 128 pixels square') }}</li>
|
||||
<li>{{ _('the <code>type</code> field is unrecognized') }}</li>
|
||||
<li>{{ _('the manifest requests a permission that is unrecognized') }}</li>
|
||||
<li>{{ _('the manifest requests a permission which will be denied') }}</li>
|
||||
<li>{{ _('the manifest requests a permission for which access could not be determined') }}</li>
|
||||
</ul>
|
||||
<h4 id="Simulator-specific_warnings">{{ _('Simulator-specific warnings') }}</h4>
|
||||
<p>{{ _('Finally, the Manager will emit warnings for apps that use features of Firefox OS not yet fully supported by the Simulator:') }}</p>
|
||||
<ul>
|
||||
<li>{{ _('the <code>type</code> field is "certified", but the Simulator does not yet fully supprt certified apps') }}</li>
|
||||
<li>{{ _('the manifest requests a permission to use an API that is <a href="#Unsupported-APIs">not yet supported</a> by the Simulator') }}</li>
|
||||
</ul>
|
||||
<h2 id="Running_the_Simulator" name="Running-the-Simulator">{{ _('Running the Simulator') }}</h2>
|
||||
<p>{{ _('There are two different ways the Simulator may be started:') }}</p>
|
||||
<ul>
|
||||
<li>{% trans %}if you add, update, or remove an app, or click the "Run" button next to your app's entry, the Dashboard will automatically run your app in the Simulator{% endtrans %}</li>
|
||||
<li>{% trans %}if you click the button labeled "Stopped" on the left-hand side of the Dashboard, the Simulator will boot to the Home screen and you'll need to navigate to your app{% endtrans %}</li>
|
||||
</ul>
|
||||
<p>
|
||||
{% trans %}
|
||||
Either way, once the Simulator is running, the button labeled "Stopped" turns green and the
|
||||
label changes to "Running". To stop the Simulator, click this button again.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<p>
|
||||
{% trans %}
|
||||
The Simulator appears as a separate window, sized so the simulated screen area is 320x480 pixels,
|
||||
with a <a href="#Simulator-toolbar">toolbar at the bottom that contains some extra features</a>.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<p>
|
||||
{% trans %}
|
||||
To simulate touch events you can click the mouse button and drag while holding the button down.
|
||||
So by clicking and dragging right-to-left from the Home Screen, you'll see the built-in apps,
|
||||
as well as any apps you have added:
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<p>
|
||||
<img alt="" src="https://mdn.mozillademos.org/files/5149/simulator-homescreen.png">
|
||||
<img alt="" src="https://mdn.mozillademos.org/files/5151/simulator-apps-screen.png">
|
||||
</p>
|
||||
<h3 id="Simulator_toolbar" name="Simulator-toolbar">{{ _('Simulator toolbar') }}</h3>
|
||||
<p>
|
||||
{% trans %}
|
||||
You'll see three buttons on the toolbar at the bottom of
|
||||
the Simulator window:
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<p><img alt="" src="https://mdn.mozillademos.org/files/5159/simulator-toolbar.png"></p>
|
||||
<p>
|
||||
{% trans %}
|
||||
From left to right, these are the Home button, the Rotation Simulation
|
||||
button, and the Geolocation Simulation button.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<ul>
|
||||
<li>{{ _('the Home button takes you to the Home screen') }}</li>
|
||||
<li>{{ _('the Rotation Simulation button switches the device between portrait and landscape orientation. This will generate the <code>deviceorientation</code> event.') }}</li>
|
||||
<li>{{ _('the Geolocation Simulation button triggers a dialog asking you to share your geographic location, either using your current coordinates or supplying custom coordinates: this will be made available to your app via the Geolocation API.') }}</li>
|
||||
</ul>
|
||||
<h3 id="Enabling_console_logging">{{ _('Enabling console logging') }}</h3>
|
||||
<p>
|
||||
{% trans %}
|
||||
If you check the "Console" box underneath the "Stopped/Running" switch,
|
||||
then the Error Console will be opened when you run the Simulator. Your
|
||||
app will be able to log to this console using the global console object.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<h3 id="Attaching_developer_tools" name="Attaching-developer-tools">{{ _('Attaching developer tools') }}</h3>
|
||||
<p>
|
||||
{% trans %}
|
||||
You can attach developer tools to the Simulator, to help debug your
|
||||
app. At the moment you can only attach the JavaScript Debugger and the
|
||||
Web Console, but we're working on adding support for more developer
|
||||
tools.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<p>
|
||||
{% trans %}
|
||||
While the Simulator is running another button appears underneath the
|
||||
"Console" checkbox. It is labeled "Connect...":
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<p><img alt="" src="https://mdn.mozillademos.org/files/5167/dashboard-connect.png"></p>
|
||||
<p>{% trans %}Click it, and you'll be taken to a page that looks like this:{% endtrans %}</p>
|
||||
<p><img alt="" src="https://mdn.mozillademos.org/files/5163/connect-port-selection.png"></p>
|
||||
<p>{% trans %}Click "Connect" here and you'll see another page, this time like this:{% endtrans %}</p>
|
||||
<p><img alt="" src="https://mdn.mozillademos.org/files/5165/connect-target-selection.png"></p>
|
||||
<p>
|
||||
{% trans debug_toolbar='/docs/Tools/Debugger#The_debugger_toolbar' %}
|
||||
To use the JavaScript Debugger, select
|
||||
"chrome://prosthesis/content/shell.xul" here. Once it's launched,
|
||||
you'll need to find your app's scripts in the
|
||||
<a href="{{ debug_toolbar }}">script chooser</a>, but if you open your
|
||||
app and then connect the debugger, your app's main script will be
|
||||
selected by default:
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<p><img alt="" src="https://mdn.mozillademos.org/files/5169/js-debugger.png"></p>
|
||||
<p>{% trans %}To use the Web Console with your app, select "Main Process" in the "Connect to remote device" window.{% endtrans %}</p>
|
||||
<p>
|
||||
{% trans %}
|
||||
At the moment, unfortunately, there's no single debugging target that
|
||||
will work with both the Web Console and the JS Debugger - but you can
|
||||
run two simultaneous instances of the debugging tools, one targeting
|
||||
"shell.xul" and the other targeting "Main Process".
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<h2 id="Push_to_device" name="Push-to-device">{{ _('Push to device') }}</h2>
|
||||
<p>
|
||||
{% trans %}
|
||||
If you have a Firefox OS device you can connect it to the Simulator,
|
||||
and can then push apps from the Dashboard to the device.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<h3 id="Connecting_a_device">{{ _('Connecting a device') }}</h3>
|
||||
<p>
|
||||
{% trans adb='http://developer.android.com/tools/help/adb.html' %}
|
||||
To connect a device to the Simulator, you need the
|
||||
<a href="{{ adb }}">Android Debug Bridge (adb)</a> to be installed,
|
||||
but the Simulator add-on bundles adb for you. You do, though,
|
||||
need to configure both the Firefox OS device and your desktop OS.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<ol>
|
||||
<li>
|
||||
{% trans %}
|
||||
On your Firefox OS device: open the Settings app, then <code>Device
|
||||
Information</code> > <code>More Information</code> > <code>Developer</code>.
|
||||
In the developer menu, check "Remote debugging".
|
||||
{% endtrans %}
|
||||
</li>
|
||||
<li>
|
||||
{% trans android_tools='https://developer.android.com/tools/device.html' %}
|
||||
Set up your OS to detect the device. Instructions for this are
|
||||
OS-specific, and are detailed in point 3 of
|
||||
<a href="{{ android_tools }}">"Setting up a Device for Development"
|
||||
</a> on the Android developer site. The vendor ID to use for Firefox
|
||||
OS Geeksphone devices is <code>05c6</code>.
|
||||
{% endtrans %}
|
||||
</li>
|
||||
</ol>
|
||||
<h3 id="Pushing_apps_to_the_device">{{ _('Pushing apps to the device') }}</h3>
|
||||
<p>
|
||||
{% trans %}
|
||||
Once you've set up the device and desktop, and connected the device to
|
||||
your desktop via USB, you'll see the note "Device connected." appear on
|
||||
the left of the Dashboard, and a new command appear in the entry for
|
||||
each app labeled "Push":
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<p><img alt="" src="https://mdn.mozillademos.org/files/5227/device-connected.png" /></p>
|
||||
<p>{% trans %}Click "Push", and the app will be installed on the Firefox OS device.{% endtrans %}</p>
|
||||
<h2 id="Limitations_of_the_Simulator" name="Limitations">{{ _('Limitations of the Simulator') }}</h2>
|
||||
<p>{% trans %}Note that the Firefox OS Simulator isn't a perfect simulation.{% endtrans %}</p>
|
||||
<h3 id="Hardware_limitations">{{ _('Hardware limitations') }}</h3>
|
||||
<p>
|
||||
{% trans %}
|
||||
Apart from screen size, the Simulator does not simulate the hardware limitations of a Firefox OS device such as available memory or CPU speed.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<h3 id="Audio_video_codecs">{{ _('Audio/video codecs') }}</h3>
|
||||
<p>{{ _('The following codecs depend on hardware-accelerated decoding and are therefore not yet supported:') }}</p>
|
||||
<ul>
|
||||
<li>MP3</li>
|
||||
<li>AAC</li>
|
||||
<li>H.264 (MP4)</li>
|
||||
<li>WebM</li>
|
||||
</ul>
|
||||
<h3 id="Unsupported_APIs" name="Unsupported-APIs">{{ _('Unsupported APIs') }}</h3>
|
||||
<p>
|
||||
{% trans %}
|
||||
Certain APIs that work on the device won't work on the Simulator,
|
||||
generally because the supporting hardware is not available on the
|
||||
desktop. We've implemented simulations for some APIs such as
|
||||
geolocation, and expect to add more in future releases. However, at
|
||||
the moment the following APIs are not supported. Using them might
|
||||
throw errors or just return incorrect results:
|
||||
{% endtrans %}
|
||||
</p>
|
||||
<ul>
|
||||
<li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/WebTelephony">{{ _('Telephony') }}</a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/WebSMS">{{ _('WebSMS') }}</a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/WebBluetooth">{{ _('WebBluetooth') }}</a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Using_Light_Events">{{ _('Ambient Light') }}</a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Proximity">{{ _('Proximity') }}</a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Network_Information">{{ _('Network Information') }}</a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-US/docs/Online_and_offline_events">{{ _('navigator.onLine and offline events') }}</a></li>
|
||||
<li><a href="https://developer.mozilla.org/en-US/docs/WebAPI/Vibration">{{ _('Vibration') }}</a></li>
|
||||
</ul>
|
||||
<h2 id="Getting_help">{{ _('Getting help') }}</h2>
|
||||
<p>
|
||||
{% trans issues='https://github.com/mozilla/r2d2b2g/issues?state=open',
|
||||
mailing_list='https://lists.mozilla.org/listinfo/dev-developer-tools',
|
||||
irc='irc://irc.mozilla.org/#devtools' %}
|
||||
If you find any bugs, please <a href="{{ issues }}">file them on GitHub</a>.
|
||||
If you have a question, try asking us on the <a href="{{ mailing_list }}">
|
||||
dev-developer-tools mailing list</a> or on <a href="{{ irc }}">#devtools on
|
||||
irc.mozilla.org</a>.
|
||||
{% endtrans %}
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -149,15 +149,11 @@
|
|||
{{- _('Developing Game Apps') }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ url('ecosystem.build_payments') }}"
|
||||
{%- if section == 'build_payments' %}
|
||||
class="selected"
|
||||
{% endif %}>
|
||||
<a href="{{ url('ecosystem.build_payments') }}">
|
||||
{{- _('Payments') }}</a>
|
||||
</li>
|
||||
<li class="has-children{{ ' active' if section in ('build_tools',
|
||||
'build_app_generator',
|
||||
'firefox_os_simulator',
|
||||
'build_dev_tools') }}">
|
||||
<h2 class="subtitle nav-title">
|
||||
<a href="{{ url('ecosystem.build_tools') }}">
|
||||
|
|
@ -176,10 +172,7 @@
|
|||
{{- _('App Validator') }}</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ url('ecosystem.firefox_os_simulator') }}"
|
||||
{%- if section == 'firefox_os_simulator' %}
|
||||
class="selected"
|
||||
{% endif %}>
|
||||
<a href="{{ url('ecosystem.firefox_os_simulator') }}">
|
||||
{{- _('Firefox OS Simulator') }}</a>
|
||||
</li>
|
||||
<li>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ from amo.urlresolvers import reverse
|
|||
VIEW_PAGES = (
|
||||
'build_app_generator', 'build_dev_tools', 'build_quick', 'build_reference',
|
||||
'build_tools', 'design_concept', 'design_fundamentals', 'design_ui',
|
||||
'dev_phone', 'partners', 'publish_deploy', 'support', 'build_payments',
|
||||
'dev_phone', 'partners', 'publish_deploy', 'support',
|
||||
)
|
||||
|
||||
REDIRECT_PAGES = (
|
||||
|
|
@ -18,6 +18,7 @@ REDIRECT_PAGES = (
|
|||
'build_manifests', 'build_mobile_developers', 'build_web_developers',
|
||||
'design_patterns', 'ffos_guideline', 'publish_hosted', 'publish_packaged',
|
||||
'publish_review', 'publish_submit', 'responsive_design',
|
||||
'firefox_os_simulator', 'build_payments',
|
||||
)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -51,6 +51,12 @@ redirect_patterns = patterns('',
|
|||
url('^docs/web_developers$',
|
||||
redirect_doc('/Web/Apps/Quickstart/Build/For_Web_developers'),
|
||||
name='ecosystem.build_web_developers'),
|
||||
url('^docs/firefox_os_simulator$',
|
||||
redirect_doc('/Tools/Firefox_OS_Simulator'),
|
||||
name='ecosystem.firefox_os_simulator'),
|
||||
url('^docs/payments$',
|
||||
redirect_doc('/Web/Apps/Quickstart/Build/Payments'),
|
||||
name='ecosystem.build_payments'),
|
||||
)
|
||||
|
||||
urlpatterns = redirect_patterns + patterns('',
|
||||
|
|
@ -58,8 +64,6 @@ urlpatterns = redirect_patterns + patterns('',
|
|||
url('^partners$', views.partners, name='ecosystem.partners'),
|
||||
url('^support$', views.support, name='ecosystem.support'),
|
||||
url('^dev_phone$', views.dev_phone, name='ecosystem.dev_phone'),
|
||||
url('^docs/firefox_os_simulator$', views.firefox_os_simulator,
|
||||
name='ecosystem.firefox_os_simulator'),
|
||||
url('^docs/concept$', views.design_concept,
|
||||
name='ecosystem.design_concept'),
|
||||
url('^docs/fundamentals$', views.design_fundamentals,
|
||||
|
|
@ -82,8 +86,6 @@ urlpatterns = redirect_patterns + patterns('',
|
|||
name='ecosystem.build_app_generator'),
|
||||
url('^docs/dev_tools$', views.build_dev_tools,
|
||||
name='ecosystem.build_dev_tools'),
|
||||
url('^docs/payments$', views.build_payments,
|
||||
name='ecosystem.build_payments'),
|
||||
|
||||
url('^docs/apps/(?P<page>\w+)?$', views.apps_documentation,
|
||||
name='ecosystem.apps_documentation'),
|
||||
|
|
|
|||
|
|
@ -366,12 +366,6 @@ def build_dev_tools(request):
|
|||
{'page': 'build_dev_tools', 'category': 'build'})
|
||||
|
||||
|
||||
def build_payments(request):
|
||||
"""Build - Payments page."""
|
||||
return jingo.render(request, 'ecosystem/build_payments.html',
|
||||
{'page': 'build_payments', 'category': 'build'})
|
||||
|
||||
|
||||
def apps_documentation(request, page=None):
|
||||
"""Page template for all reference apps."""
|
||||
|
||||
|
|
@ -510,12 +504,3 @@ def apps_documentation(request, page=None):
|
|||
|
||||
return jingo.render(request, ('ecosystem/reference_apps/%s.html' % page),
|
||||
ctx)
|
||||
|
||||
|
||||
def firefox_os_simulator(request):
|
||||
"""Landing page for Firefox OS Simulator."""
|
||||
ctx = {
|
||||
'page': 'firefox_os_simulator',
|
||||
'category': 'build',
|
||||
}
|
||||
return jingo.render(request, 'ecosystem/firefox_os_simulator.html', ctx)
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче