Deine erste App

This is an archived page. It's not actively maintained.

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": "http://ihrebeeindruckendeapp.eu"
  },
  "locales": {
    "es": {
      "description": "Su nueva aplicación impresionante Open Web",
      "developer": {
        "url": "http://ihrebeeindruckendeapp.eu"
      }
    },
    "it": {
      "description": "La tua nuova fantastica Open Web App",
      "developer": {
        "url": "http://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 http://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.