Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Deine erste App

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Hinweis: Das Quickstart-Abschnitt wurde mit einem neuen, fokussierter Quick Artikel, der alle bisherigen Artikel ersetzt aktualisiert. Wir hoffen, dass Sie diese nützlicher finden, und eine schnellere Lernerfahrung als die älteren Artikel haben.

Offene Web-Anwendungen (Web-Entwickler) geben, was sie seit Jahren gewünscht haben: ein Cross-Plattform-Umgebung, um installierbare Apps mit nur HTML, CSS und JavaScript erstellen gewidmet - mit Firefox OS, der erste dedizierte Open Web App-Plattform.

Dieser Leitfaden soll Sie unternehmungslustig schnell mit einer grundlegenden Architektur und Anweisungen zu bauen inspirieren, so dass Sie die nächste große app erstellen können!

Wenn Sie dieser Anleitung folgen möchten, können Sie unsere Schnellstart-app-Vorlage herunterladen. Finden Sie mehr heraus was unser Apps-Vorlage-Guide enthält.

App-Struktur

 

Verpackt vs. gehostete Anwendungen

Es gibt zwei Arten der offenen Web-apps :  verpackt und gehostet. Verpackte apps sind im Wesentlichen die Zip-Dateien, alle Anwendung Anlagewerten: HTML, CSS, JavaScript, Bilder, Manifest, etc.. Gehostete Anwendungen laufen von einem Server in einer bestimmten Domain, genau wie eine standard-Website. Beide app-Arten benötigen ein gültiges Manifest. Wenn Ihre app auf dem Firefox-Marktplatz kommt, wird Ihre Anwendung als  Zip-Datei hochladen oder geben Sie die URL an, wo Ihre gehostete Anwendung  ist.

In Partnerschaft mit Treehouse erstellt : Zu die Treehouse Seite

Für die Zwecke dieses Leitfadens erstellen Sie eine gehostete app die werden dann an Ihre Adresse "localhost" geschickt. Sobald Ihre app bereit ist um auf die Liste des Firefox-Marktplatz zukommen, können Sie die Entscheidung, als verpackte app oder als gehostete Anwendung zu starten.

Manifeste App

Alle Firefox-app erfordern eine manifest.webapp -Datei im Stammverzeichnis der app.  Die manifest.webapp -Datei enthält wichtige Informationen über die app wie Version, Name, Beschreibung, Symbolspeicherort, Locale Zeichenfolgen, Domains, wo die app aus, installiert werden kann, und vieles mehr. Nur der Name und die Beschreibung sind erforderlich. Das einfache Manifest innerhalb der app-Vorlage enthalten ist, die der folgenden ähnelt:

{
  "version": "0.1",
  "name": "Open Web App",
  "description": "Die eeindruckende 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": "Ihr Name",
    "url": "https://ihrebeeindruckendeapp.eu"
  },
  "locales": {
    "es": {
      "description": "Su nueva aplicación impresionante Open Web",
      "developer": {
        "url": "https://ihrebeeindruckendeapp.eu"
      }
    },
    "it": {
      "description": "La tua nuova fantastica Open Web App",
      "developer": {
        "url": "https://ihrebeeindruckendeapp.eu"
      }
    }
  },
  "default_locale": "de"
}

In Partnerschaft mit Treehouse erstellt : Zu die Treehouse Seite

 

Eine grundlegende Manifest ist alles, was Sie brauchen um loszulegen. Lesen Sie mehr über Manifeste Apps.

App Layout & Design

Das Design ist zunehmend wichtig, da die Bildschirmauflösungen standard auf verschiedenen Geräten geworden ist. Selbst wenn das Hauptziel Ihrer App mobile Plattformen wie Firefox-OS ist, haben andere Geräte wahrscheinlich auch darauf zugriff.  Mit CSS Media Queries können Sie das Layout des Gerät anpassen, wie in diesem CSS-Beispiel gezeigt:

 
 
/* Im folgenden Text werden Beispiele von Verschiedenen CSS Media Queries gezeigt */

  /* Grundlegende Desktop/Bildschirm breite */ 
@media only screen and (min-width : 1224px) {
  /* style */
}

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

/* Geräteeinstellungen auf verschiedenen Ausrichtungen */
@media screen and (orientation:portrait) {
  /* styles */
}
@media screen and (orientation:landscape) {
  /* styles */
}

Es gibt viele JavaScript und CSS-Frameworks für responsive Design und mobile app Entwicklung (Bootstrap, etc.) Wählen Sie die Framework(s), die am besten zu Ihrer app-Entwicklung passen.

Web APIs

JavaScript-APIs werden erstellt und so schnell wie Geräte erweitert. Mozillas WebAPI Aufwand bringt Dutzende von mobilen Standardfunktionen von JavaScript-APIs. Eine Liste der Geräte-Support und Status steht auf der Seite des WebAPI zur Verfügung. JavaScript-Feature-Erkennung ist immer noch die beste Praxis, wie im folgenden Beispiel gezeigt:// Wenn dieses Gerät das Vibrieren API unterstützt

// Wenn dieses Gerät Vibration API unterstützt ...

if('vibrate' in navigator) {
    // ... Vibration in Sekunden
    navigator.vibrate(1000);
}

Im folgenden Beispiel wird das Anzeigeformat von einer <div> basierend auf die Änderungen in der Ladezustand des Geräts geändert :

// Erstellen Sie die Batterie Indiktator Hörer
(function() {
  var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery,
      indicator, indicatorPercentage;

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

    // Zuhörer für Änderung
    battery.addEventListener('chargingchange', updateBattery);
    battery.addEventListener('levelchange', updateBattery);

    // Aktualisiert sofort
    updateBattery();
  }

  function updateBattery() {
    // Prozent aktualisieren Breite und Text
    var level = (battery.level * 100) + '%';
    indicatorPercentage.style.width = level;
    indicatorPercentage.innerHTML = 'Battery: ' + level;
    // Ladestatus Updaten
    indicator.className = battery.charging ? 'charging' : '';
  }
})();

Im Beispiel oben sobald Sie bestätigen, dass die Batterie-API unterstützt wird, können Sie Ereignis-Listener für Chargingchange und Levelchange um das Element Anzeige aktualisieren hinzufügen. Versuchen Sie, die folgenden auf die Quickstart-Vorlage, und sehen Sie, wenn Sie es funktioniert.

Überprüfen Sie die WebAPI-Seite regelmäßig, um sich mit Gerät API Status aktuell zu halten.
 

API-Funktionen installieren

 

In unserem Quickstart-app Beispielvorlage, haben wir eine installierungs-Schaltfläche, die Sie anklicken können, wenn Sie die app als standard website haben möchten ,
und diese Website auf Firefox-OS als app zu installieren. Das Knopf-Markup ist nichts Besonderes:

<button id="install-btn">App Installieren</button>
Diese Tastenfunktionen wird mithilfe der installieren-API implementiert (siehe install.js):
 
var mainifest_url = location.href + 'manifest.webapp';

function install(ev) {
  ev.preventDefault();
//Manifest URL Definieren
// App Installieren
  var installLocFind = navigator.mozApps.install(manifest_url);
  installLocFind.onsuccess = function(data) {
    // Wenn die App Installiert ist
  };
  installLocFind.onerror = function() {
    // App ist nicht Installiert
    // installapp.error.name
    alert(installLocFind.error.name);
  };
};

// Eine Verweis auf die Schaltfläche und rufen Sie install() auf Klick wenn die App nicht Installiert ist. Wenn sie installiert ist ist die Schaltfläche ausgeblendet.
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);
  };
};

Gehen Sie kurz alles durch was vor sich geht :

  1. Wir erhalten einen Verweis auf die Schaltfläche "installieren" und speichern Sie sie in die Schaltfläche "Variablen".
  2. Wir verwenden navigator.mozApps.checkInstalled um zu prüfen, ob die App definiert durch das Manifest im https://people.mozilla.com/~cmills/location-finder/manifest.webapp bereits auf dem Gerät installiert ist. Dieser Text wird als Variable installCheck gespeichert.
  3. Wenn der Test erfolgreich durchgeführt wird, dann wird sein Success Ereignis ausgelöst, daher wird installCheck.onsuccess = function() { ... } ausgeführt.
  4. Wenn die App bereits Installiert ist wird die Schaltfläche ausgeblendet.
  5. Wenn die app nicht installiert ist, fügen wir einen Click-Ereignis-Listener zur Schaltfläche, so dass die Funktion install() ausgeführt wird, wenn die Schaltfläche geklickt wird.
  6. Wenn die Schaltfläche angeklickt wird, und die Funktion install() ausgeführt wird, wird die Betriebsstätte für die manifest-Datei in eine Variable namens manifest_url und installieren dann die app unter Verwendung navigator.mozApps.install(manifest_url), einen Verweis auf die Installation in der InstallLocFind-Variablen zu speichern. Sie werden bemerken, dass diese Installation auch Erfolg und Fehler-Ereignisse auslöst, damit Sie Aktionen abhängig ausführen können, ob die Installation erfolgreich oder nicht passiert ist.

Vielleicht möchten Sie den Umsetzung Stand der API prüfen, wenn dann aber zuerst nach installierbare Webanwendungen.

Hinweis: Installierbare offene Web-Anwendungen haben eine Sicherheitsrichtlinie "einzelne app pro Herkunft"; Grundsätzlich können Sie nicht mehr als eine installierbare app pro Herkunft hosten. Dies vereinfacht das Testen ein wenig komplizierter, aber es gibt noch Wege, um dieses, wie das Erstellen von verschiedenen Subdomains für apps, testen sie mit der Firefox-OS-Simulator, oder testen die Install-Funktionalität auf Firefox Aurora/nächtliche, welches Ihnen erlaubt zu installierbare Webanwendungen auf dem Desktop zu installieren. Siehe FAQs über apps Manifeste für weitere Informationen zur Herkunft.

WebRT APIs (APIs auf der Grundlage von Berechtigungen)

Es gibt eine Reihe von WebAPIs, aber die benötigen spezielle Berechtigungen für dieses Feature aktiviert werden. Apps können registrieren Berechtigungsanforderungen innerhalb der manifest.webapp-Datei wie folgt:
 
// Neuer Key im Manifest : "permissions"
// Anforderung der Zugriffe auf eine belibige Anzahl von APIs
// Hier bitten wir um die berechtigung für die SystemXHR API
"permissions": {
    "systemXHR": {}
}
Die drei Stufen der Berechtigung sind wie folgt:
 
  • Normal APIs, die jede Art von speziellen Zugriffsberechtigungen nicht brauchen.
  • Privilegierte APIs für Entwickler in ihren Anwendungen zu verwenden, solange sie in der app Zugriffsberechtigungen verfügbar Manifestdateien und verteilen diese durch eine vertrauenswürdige Quelle.
  • Zertifizierte APIs, die wichtige Funktionen auf einem Gerät, wie den Aufruf-Dialer und messaging-Dienste zu steuern. Diese sind in der Regel nicht verfügbar für Drittentwickler.
Weitere Informationen zu app-Berechtigungsstufen, Arten von verpackten apps lesen. Sie finden weitere Informationen über Berechtigungen welche APIs erfordern , und welche Berechtigungen sind erforderlich, um App-Berechtigungen.
 
Es ist wichtig zu beachten, dass nicht alle Web-APIs in der Firefox-OS-Simulator umgesetzt werden.

Tools & Testen

Testen ist unglaublich wichtig, wenn mobile Geräte unterstützt. Es gibt viele Optionen zum Testen von installierbaren open-Web-apps.
 

Firefox OS Simulator

Installation und Verwendung der Firefox-OS-Simulator ist der einfachste Weg zum aufstehen und laufen mit Ihrer app. Nach der Installation des Simulators ist es aus dem Tools-> Web Developer-> Firefox-OS-Simulator-Menü zugänglich. Der Simulator startet mit einer JavaScript-Konsole, damit Sie Ihre Anwendung in den Simulator Debuggen können.
 

App Manager

Das neue Kind auf den Block im Hinblick auf die Testtools nennt man den App-Manager. Mit diesem Tool können Sie Verbindung mit einem kompatiblen Gerät über USB (oder ein Firefox-OS-Simulator) desktop Firefox, apps direkt auf das Gerät schieben, apps zu validieren und Debuggen sie, wie sie auf dem Gerät ausgeführt.
 

Unit Tests

Unit-Tests sind sehr wertvoll, wenn Sie auf verschiedenen Geräten zu testen und baut. jQuery's QUnit ist eine beliebte Client-seitige Dienstprogramm zum Testen, aber können Sie einen beliebigen Satz von Testtools, die Sie möchten.
 

Firefox OS auf einem Gerät installieren

Da Firefox-OS ein open-Source-Plattform ist sind Code und Tools Erstellen und installieren Firefox-OS auf Ihrem eigenen Gerät verfügbar. Build sowie Installationsanweisungen und Anmerkungen zu welchen Geräten es auf, installiert werden kann finden Sie auf MDN.
 
Spezielle Firefox-OS Entwickler Vorschau Geräte stehen zur Verfügung: Lesen Sie unsere Entwickler-Vorschau-Telefon-Seite für weitere Informationen.
 
 

App-einreichen und Verteilung

Wenn Ihre app abgeschlossen ist, können Sie es selbst hosten wie eine standard-Website oder app (Lesen Sie self-publishing-Anwendungen für weitere Informationen), oder es kann eingereicht werden, auf den Firefox-Markt. Ihre Anwendung Manifest überprüft werden können Sie wählen, welche Geräte Ihr app unterstützt (z.B. Firefox OS, Desktop, Firefox, Firefox Mobile, Firefox Tablet). Sobald validiert, können die app Liste innerhalb der Marktplatz Sie fügen Sie zusätzliche Informationen über Ihre app (Screenshots, Beschreibungen, Preise, etc.) und offiziell einreichen. Sobald die App genehmigt ist, ist Ihre app der Welt für die Beschaffung und Installation zur Verfügung.

Marktplatz & Mehr Angaben

  1. Senden Sie eine App auf den Firefox-OS-Marktz
  2. Marktplatz-Prüfkriterien

 

 

Übersetzung bei Enes E.

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
 Mitwirkende an dieser Seite: SJW, Enes
 Zuletzt aktualisiert von: SJW,