Az első appod

Ha szeretnél minket és ezt az útmutatót követni, letöltheted a gyors applikációkezdő mintánkat. Tudj meg többet ennek tartalmáról, és olvasd el az Alkalmazásminták útmutatót (a programozói felületek és programnyelvek angol nyelvtudást igényelnek)

Az alkalmazás felépítése

Csomagolt vs. Hostolt alkalmazások

A nyílt webes alkalmazásoknak két formájuk van: csomagolt and hostolt. A csomagolt appok alapvetően zip file-ok, melyek minden alkalmazáskiegészítőt tartalmaznak: HTML, CSS, JavaScript, képek, tanúsítványok, stb. A hostolt alkalmazások szerverről futnak, egy megadott domainen, akárcsak egy weboldal. Mindkét alkalmazástípus érvényes tanúsítványt igényel. Mikor eljön a pillanat, hogy feltöltsd az alkalmazásodat a Firefox Piactérre, akkor vagy ezt a zip file-t töltöd fel, vagy a hostolt applikációhoz mutató linket fogod megadni

Ezen útmutatón keresztül el fogod készíteni a hostolt alkalmazásodat, amely a te localhost címeden lesz elérhető. Amint az appod készen áll arra, hogy megoszthasd a Firefox Piactéren, eldöntheted, hogy csomagolva, vagy hostolva osztod meg.

App Tanúsítványok

Minden Firefox appnak szüksége van egy manifest.webapp file-ra az alkalmazáson belül. A manifest.webapp file biztosítja a létszükségletű információkat az appról, úgy, mint verzó, név, leírás, ikon, hely, helyszíni láncolatok, domain, ahonnan az app telepíthető, és még sokminden. Csak a név és verziószám kötelező. A legegyszerűbb tanúsítvány (az alkalmazásmintán belül) a következőképpen néz ki:

{
  "version": "0.1",
  "name": "Open Web App",
  "description": "Your new awesome Open Web App",
  "launch_path": "/app-template/index.html",
  "icons": {
    "16": "/app-template/app-icons/icon-16.png",
    "48": "/app-template/app-icons/icon-48.png",
    "128": "/app-template/app-icons/icon-128.png"
  },
  "developer": {
    "name": "Your Name",
    "url": "https://yourawesomeapp.com"
  },
  "locales": {
    "es": {
      "description": "Su nueva aplicación impresionante Open Web",
      "developer": {
        "url": "https://yourawesomeapp.com"
      }
    },
    "it": {
      "description": "La tua nuova fantastica Open Web App",
      "developer": {
        "url": "https://yourawesomeapp.com"
      }
    }
  },
  "default_locale": "en"
}

A kezdéshez egy alap tanúsítványra van szükséged. További részletekért olvasd el az  Alkalmazástanúsítványt.

App Tervezés & Design

Az appok kinézete kiemelkedően fontossá vált, ahogy a képernyők felbontása egyre jobb színvonalat ért el. Noha az appok fő célterülete a telefonplatformokban van, mint például a Firefox OS, egyéb eszközöknek is lehet hozzáférésük. A CSS médium lista lehetővé teszi, hogy különböző eszközök megjelenítéséhez igazodj, ahogy azt alábbi CSS példaváz mutatja:

/* The following are examples of different CSS media queries */

/* Basic desktop/screen width sniff */
@media only screen and (min-width : 1224px) {
  /* styles */
}

/* Traditional iPhone width */
@media
  only screen and (-webkit-min-device-pixel-ratio : 1.5),
  only screen and (min-device-pixel-ratio : 1.5) {
  /* styles */
}

/* Device settings at different orientations */
@media screen and (orientation:portrait) {
  /* styles */
}
@media screen and (orientation:landscape) {
  /* styles */
}

Számos JavaScript és CSS keretrendszer elérhető, hogy segítsen a tervezésben és mobil app fejlesztésben (Bootstrap, stb.) Válaszd azt, amelyik a legjobban illik a stílusodhoz.

Web API-k

A JavaScript API-k (alkalmazásprogramozási felületek) legalább olyan gyorsan fejlődnek, mint maguk a készülékek. A Mozilla WebAPI kezdeményezés temérdek szabvány mobilvázlatot integrál a JavaScript API-kba. A támogatott eszközök listája elérhető a WebAPI oldalon. A legjobb gyakorlást a JavaScript eszközérzékelő biztosítja, ahogy azt itt mutatjuk:

// If this device supports the vibrate API...
if('vibrate' in navigator) {
    // ... vibrate for a second
    navigator.vibrate(1000);
}

A következő példában a <div> megjelenítését módosítottuk a készülék töltöttségének függvényében:

// Create the battery indicator listeners
(function() {
  var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery,
      indicator, indicatorPercentage;

  if(battery) {
    indicator = document.getElementById('indicator'),
    indicatorPercentage = document.getElementById('indicator-percentage');

    // Set listeners for changes
    battery.addEventListener('chargingchange', updateBattery);
    battery.addEventListener('levelchange', updateBattery);

    // Update immediately
    updateBattery();
  }

  function updateBattery() {
    // Update percentage width and text
    var level = (battery.level * 100) + '%';
    indicatorPercentage.style.width = level;
    indicatorPercentage.innerHTML = 'Battery: ' + level;
    // Update charging status
    indicator.className = battery.charging ? 'charging' : '';
  }
})();

A fenti kódmintában, amint megerősíted a Battery API támogatottságot, további eseményfigyelőket adhatsz a chargingchange és a levelchange kódhoz, hogy frissíthesd az elemek megjelenítése. Próbáld meg hozzáadni a mintádhoz, és nézd meg magad a működését.

Rendszeresen ellenőrizd a WebAPI oldalt, hogy naprakész legyél az API készülékstátuszokkal.

API funkcionálisság telepítése

Az app kezdőmintánkban elhelyeztünk egy telepítőkapcsolót, amivel megtekintheted az appodat, mint egy mintaweboldalt, mintha az egy telepített alkalmazás lenne a Firefox OS-en. A gomb megjelenésében nincs semmi különös:

<button id="install-btn">Install app</button>

A kapcsoló az API telepítő használatával is működtethető (lásd install.js):

var manifest_url = location.href + 'manifest.webapp';

function install(ev) {
  ev.preventDefault();
  // define the manifest URL
  // install the app
  var installLocFind = navigator.mozApps.install(manifest_url);
  installLocFind.onsuccess = function(data) {
    // App is installed, do something
  };
  installLocFind.onerror = function() {
    // App wasn't installed, info is in
    // installapp.error.name
    alert(installLocFind.error.name);
  };
};

// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button.
var button = document.getElementById('install-btn');

var installCheck = navigator.mozApps.checkInstalled(manifest_url);

installCheck.onsuccess = function() {
  if(installCheck.result) {
    button.style.display = "none";
  } else {
    button.addEventListener('click', install, false);
  };
};

Összegezzük, mi is történik:

1. Kapunk egy hivatkozást a telepítőkapcsolóra, amit a  button változó alatt tárolunk.
2. Eztuán a navigator.mozApps.checkInstalled kódot használjuk, hogy ellenőrizzük a tanúsítványban foglalt app (helyileg: https://people.mozilla.com/~cmills/location-finder/manifest.webapp) telepítve van-e az eszközön. Ezt a teszt az installCheck változóban tárolódik.
3. Miután a teszt sikeresen lefut, létrehoz egy sikeres eseményt, ezáltal az installCheck.onsuccess = function() { ... } fut tovább.
4. Eztuán tesztet futtatunk az installCheck.result létezésére egy egyszerű if állítás használatával. Ha létezik, ezzel alátámasztva, hogy az app telepítve van, elrejtjük a kapcsolót, mivel ezután erre már nincs szükség.
5. Ha az app nincs telepítve, egy kattintásfigyelőt adunk a kapcsolóhoz, így az install() funkció fut, amikor arra kattintunk.
6. Mikor a gombra kattintunk, és az install() funkció fut, eltároljuk a tanúsítvány fájlt egy manifest_url változóban tároljuk, ezután telepítjük az appot a navigator.mozApps.install(manifest_url) használatával, eltárolva ezzel egy hivatkozást az installLocFind változóban. Észrevehetjük, hogy ez a telepítés sikeres és sikertelen eseményeket is létrehoz, így annak függvényében tudsz parancsokat futtatni, hogy a telepítés sikerült-e, vagy sem.

Feltehetőleg igazolni szeretnéd a API teljesítési állapot-ot, mikor először jutsz a telepíthető webalkalmazásokhoz.

WebRT API-k (Engedély-alapú API-k)

Sok  WebAPI létezik, amelyek ugyan elérhetők, de külön engedély kell egy-egy speciális tartalom eléréséhez. Az appok az engedélykérelmet a manifest.webapp file-ba regisztrálják, a következőképpen:

// New key in the manifest: "permissions"
// Request access to any number of APIs
// Here we request permissions to the systemXHR API
"permissions": {
    "systemXHR": {}
}

Az engedély három szintje a következők:

• Normál — API-k, melyek nem ígényelnek különleges elérési engedélyt.
• Privilegizált — Ezek elérhetők a fejlesztőknek, hogy használják a saját appjukban, amíg feltüntetik az elérési hozzájárulást a tanúsítványban, és megbízható forráson keresztül terjesztik.
• Igazolt — Azok az API-k, amik kritikus eszközfunkciókat használnak, legyen az például tárcsázó, vagy üzenetküldő szolgáltatás. Ezeket általában kívülálló fejlesztők nem használhatják

Az engedélyekről bővebben a Csomagolt apptípusok alatt olvashatsz. Itt többet megtudhatsz az engedélyköteles API-król, és hogy milyen engedélyre van szükséged, nézd meg az App engedélyek tájékoztatót.

Eszközök és tesztelés

A tesztelés rendkívül fontos, amikor az eszköztámogatásról van szó. Számos opció áll rendelkezésre a telepíthető webalkalmazások tesztelésére.

Firefox OS Szimulátor

Installing and using the Firefox OS Simulator is the easiest way to get up and running with your app. After you install the simulator, it is accessible from the Tools -> Web Developer -> Firefox OS Simulator menu. The simulator launches with a JavaScript console so you can debug your application from within the simulator.

App Manager

The new kid on the block with regards to testing tools is called the App Manager. This tool allows you to connect desktop Firefox to a compatible device via USB (or a Firefox OS simulator), push apps straight to the device, validate apps, and debug them as they run on the device.

Unit Testing

Unit tests are extremely valuable when testing on different devices and builds. jQuery's QUnit is a popular client-side testing utility, but you can use any set of testing tools you'd like.

Installing Firefox OS on a Device

Since Firefox OS is an open source platform, code and tools are available to build and install Firefox OS on your own device. Build and installation instructions, as well as notes on what devices it can be installed on, can be found on MDN.

Dedicated Firefox OS developer preview devices are also available: read our Developer preview phone page for more information.

App benyújtása és terjesztése

Once your app is complete, you can host it yourself like a standard web site or app (read Self-publishing apps for more information), or it can be submitted to the Firefox Marketplace. Your app's manifest will be validated and you may choose which devices your app will support (e.g. Firefox OS, Desktop Firefox, Firefox Mobile, Firefox Tablet). Once validated, you can add additional details about your app (screenshots, descriptions, price, etc.) and officially submit the app for listing within the Marketplace. Once approved, your app is available to the world for purchase and installation.

More Marketplace & Listing Information

1. Submitting an App to the Firefox OS Marketplace
2. Marketplace Review Criteria
3. App Submission Video Walkthrough