segunda-feira, 17 de fevereiro de 2014

Firefox OS - Hot to start and make your first app

First, you need to install the Firefox OS Simulator in Firefox Browser

Go to this link: https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/

Take a look about: https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager

  1. Make sure you have Firefox Desktop 26+ installed
  2. Open the App Manager (in the URL bar, type about:app-manager)
  3. If you don't have a real device:
    1. Install the Firefox OS Simulator
    2. In App Manager's bottom toolbar, click on Start Simulator, then click on the name of the installed simulator, which should appear there.
  4. If you have a real device:
    1. Make sure your device is running Firefox OS 1.2+
    2. On Windows, make sure to install the drivers provided by your phone manufacturer
    3. In the Settings of your device, disable Screen Lock (Settings > Phone Lock) and enable Remote Debugging (Settings > Device information > More information > Developer)
    4. Install the ADB Helper add-on in Firefox Desktop
    5. Install device driver, look at here and here. To help with connecting a Firefox OS device look at here. To install ADB in Ubuntu Linux look at here.
    6. Connect your device to your machine via a USB cable
    7. You should see the name of your device in the App Manager's bottom bar. Click on it.
  5. The bottom bar should show "Connected to: xxx"
  6. Click on the Apps panel and add an app (packaged or hosted)
  7. The Refresh button validates your app and installs it on the Simulator/Device
  8. The Debug button connects the developer tools to the running app
  9. See the Troubleshooting section for help if you are having trouble

To create the first app

  1. create a directory with name firstApp
  2. create in firstApp directory the files:
    1. manifest.webapp
    2. index.html
  3.  edit the manifest.webapp and put this text
    1. {
        "version": "1.0",
        "name": "firstApp",
        "description": "My first app",
        "launch_path": "/index.html",
        "developer": {
          "name": "Bruno Heins",
          "url": "http://brunoheins.blogspot.com"
        },
        "locales": {
          "br": {
            "description": "Meu primeiro app",
            "developer": {
              "url": "http://brunoheins.blogspot.com"
            }
          }
        },
        "default_locale": "en"
      }
       
  4. edit the index.html and put this text
    1. <!DOCTYPE html>
      <html lang="en-us">
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width">

          <title>My first app</title>
         
      </head>
      <body>
          <p>This is my first app!</p>
      </body>
      </html>
       
  5.  In Firefox, select Web Developer -> App Manager
  6. Click in Add Packaged App and select the firstApp directory that has the manifest.webapp file
  7. Click in Start Simulator and then start with Firefox OS 1.2 ou 1.3... 
  8. Select your app and  then click in Debug

You'll get a warning "Missing 'icons' in Manifest.". To correct, make this:
  1. create a app-icons directory into firstApp
  2. create the files:
    1. /app-icons/icon-16.png
    2. /app-icons/icon-48.png
    3. /app-icons/icon-128.png
  3. put this code in manifest
    1.  ...
      "launch_path": "/index.html",
        "icons": {
          "16": "/app-icons/icon-16.png",
          "48": "/app-icons/icon-48.png",
          "128": "/app-icons/icon-128.png"
        },
      ...
       
  4.  close the simulator and click in Update from your App Dashboard

Postado por às
Marcadores:

Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)