Erstellen der ersten App mithilfe von Visual Studio-Tools für Apache Cordova

  • Artikel

Die Cordova-Tools sind in Visual Studio 2013 als Preview (CTP) Version veröffentlicht. Die Cordova-Tools werden Als Teil von Visual Studio 2015 veröffentlicht und wir empfehlen, zum Entwickeln von Apps Visual Studio 2015 RTM und die Visual Studio-Tools für Apache Cordova zu verwenden. Sie können Visual Studio aus dem Microsoft Download Center herunterladen.

Eine mithilfe von Visual Studio-Tools für Apache Cordova erstellte App verwendet Cordova, um mithilfe von Webtechnologien wie HTML und CSS auf systemeigene APIs zuzugreifen. Da der Bedarf nach systemeigenem Code reduziert wurde oder ganz wegfällt, funktionieren Apps auf vielen verschiedenen Geräten.

Einige Aufgaben sind den meisten Cordova-Apps gemein. Dazu gehören:

  • Erstellen eines Cordova-Projekts

  • Erstellen und Ausführen der "Hello"-Standard-App

  • Auswählen eines JavaScript-Frameworks eines Drittanbieters

  • Erstellen einer Benutzeroberfläche

  • Hinzufügen systemeigener Funktionen (Plug-Ins)

  • Hinzufügen von verbundenen Diensten

  • Hinzufügen von plattformspezifischen Ressourcen

  • Testen, Packen und Veröffentlichen

Erstellen eines Cordova-Projekts

Stellen Sie vor dem Erstellen eines neuen Projekts sicher, dass Sie alle Systemvoraussetzungen erfüllen und die Erweiterung Visual Studio-Tools für Apache Cordova für Visual Studio installiert haben. Weitere Informationen finden Sie unter Installieren von Visual Studio-Tools für Apache Cordova.

So erstellen Sie ein neues Projekt

  1. Öffnen Sie Visual Studio. Wählen Sie in der Menüleiste Datei, Neu, Projekt aus.

  2. Wählen Sie im Dialogfeld Neues Projekt unter Vorlagen die Option JavaScript, Apache Cordova-Apps und dann die Vorlage Leere App aus.

    Hinweis

    Eine Vorlage der leeren App für TypeScript befindet sich unter TypeScript, Apache Cordova (für das gesamte „ToDoList“-Lernprogramm wird JavaScript verwendet).

  3. Wählen Sie Durchsuchen, um einen Speicherort für das Projekt zu ermitteln.

  4. Benennen Sie die Anwendung, und wählen Sie dann OK aus.

    Hinweis

    Wenn Sie das gesamte Lernprogramm durcharbeiten möchten, benennen Sie die App „AngularJSToDo“.

    Erstellen eines neuen Mehrgeräte-Hybrid-App-Projekts

  5. Wählen Sie eine Quellcodeverwaltungs-Option für das Projekt oder die Option Abbrechen aus, um diesen Schritt für den Moment zu überspringen.

    Visual Studio erstellt das neue Projekt und öffnet den Projektmappen-Explorer im rechten Fensterbereich.

    Projektstruktur einer Apache Cordova-App in VS

Die Projektstruktur in Visual Studio 2015 wird aktualisiert, damit CLIs von Drittanbietern unterstützt, und die Cordova-Projektstruktur abgeglichen werden kann. Visual Studio 2013 verwendet die veraltete Projektstruktur. Es wird empfohlen, Cordova-Apps mit Visual Studio 2015 zu erstellen.

Warnung

Wenn Sie ein Projekt von einer früheren Version von Visual Studio migrieren, lesen Sie diese Migrationsinformationen.

Das neue Cordova-Projekt enthält vier Ordner der obersten Ebene:

  • Zusammenführen wird verwendet, um plattformspezifischen Code hinzuzufügen. Weitere Informationen finden Sie unter Konfigurieren der mit Visual Studio-Tools für Apache Cordova erstellten App.

    • Standardmäßig umfasst die Vorlage der leeren App häufig verwendeten plattformspezifischen Code für Windows- und Android-Geräte im Ordner Zusammenführen. ("platformOverrides.js" wird zur Bestimmung der Plattformdatei verwendet.)

    • Bei Android-Geräten wird eine .js-Datei mit einbezogen, um Unterstützung für die JavaScript-Function.prototype.bind()-Funktion auf Android 2.3-Geräten bereitzustellen.

    • Unter Windows 8, Windows 8.1 und Windows Phone 8.1 ist eine Datei vom Typ "Winstore-jscompat.js" zum Aktivieren der Unterstützung für eine Vielzahl von JavaScript-Bibliotheken im Ordner merges\Windows enthalten. Weitere Informationen finden Sie unter der Projektwebsite zu JavaScript Dynamic Content Shim für Windows Store-Apps.

  • Plug-Ins dient für Apache Cordova-Plug-Ins, die Zugriff auf systemeigene Gerätefunktionen bereitstellen.

  • Res wird für plattformspezifische visuelle Objekte (Symbole und Begrüßungsbildschirme), Signaturzertifikate und (sofern erforderlich) plattformspezifische Konfigurationsdateien verwendet. Weitere Informationen finden Sie unter Konfigurieren der mit Visual Studio-Tools für Apache Cordova erstellten App.

  • www wird für den App-Code verwendet.

    Der Ordner www enthält einige weitere Ordner:

    • css enthält grundlegende CSS-Stylesheets, die über die leere Vorlage verfügbar sind.

    • Bilder ist der empfohlene Speicherort für die Bilder Ihrer App.

    • Skripts ist der Standardspeicherort für alle JavaScript- oder TypeScript-Dateien.

Neben CSS- und JavaScript-Dateien enthält das neue Projekt auch einige weitere Dateien:

  • "config.xml" enthält Konfigurationseinstellungen für die App. Sie können diese Datei über den Projektmappen-Explorer im Configuration-Designer öffnen, einer Schnittstelle für die Datei "config.xml". Alternativ können Sie sie direkt bearbeiten, indem Sie Code anzeigen aus dem Kontextmenü für die Datei wählen.

  • In taco.json sind Projektmetadaten gespeichert, die es Visual Studio ermöglichen, die Erstellung auf anderen Betriebssystemen als Windows, z. B. auf einem Mac, vorzunehmen.

  • Die Standard-Startseite für die App lautet www\index.html.

  • In Project_Readme.html sind Links zu nützlichen Informationen enthalten.

Ausführliche Informationen zum Cordova-Erstellungsprozess in Visual Studio und zur Visual Studio-Projektstruktur finden Sie unter Bereitstellen und Ausführen der App.

Erstellen und Ausführen der "Hello"-Standard-App

Führen Sie nach der Erstellung eines Projekts mithilfe der Standardvorlage der leeren App einen Schnelltest aus, um die Installation und Einrichtung zu überprüfen. Bei diesem ersten Test führen Sie die "Hello"-Standard-App (unveränderte leere App-Vorlage) entweder unter Windows oder einem der Apache Ripple-Emulatoren aus, die sich durch minimale Einrichtungsanforderungen auszeichnen. Wenn Sie Ihre App für ein anderes Ziel testen möchten, lesen Sie die folgenden Themen: Ausführen der Apache Cordova-App unter Android, Konfigurieren von Visual Studio-Tools für Apache Cordova und Ausführen der Apache Cordova-App unter Windows Phone.

So erstellen Sie die "Hello"-Standard-App und führen diese aus

  1. Wählen Sie Windows-x64, Windows-x86 oder Android aus der Liste der Projektmappenplattformen.

    In der folgenden Abbildung ist die Android-Plattform dargestellt.

    Android als Bereitstellungsziel wählen

    Wenn die Liste der Projektmappenplattformen nicht angezeigt wird, wählen Sie Projektmappenplattformen aus der Liste Schaltflächen hinzufügen/entfernen aus. Wählen Sie dann die entsprechende Plattform (Windows-x64, Windows-x86 oder Android) aus.

    Plattform für Bereitstellung auswählen

  2. Wenn Sie die Android-Plattform ausgewählt und Google Chrome installiert haben, wählen Sie wie hier gezeigt einen der Apache Ripple-Emulatoren.

    Ripple-Emulator auswählen

    Hinweis

    Chrome ist standardmäßig nicht installiert.

    Wenn Sie Visual Studio 2015 verwenden und Hyper-V auf dem Computer aktiviert haben, können Sie die App im Visual Studio-Emulator für Android ausführen (wählen Sie eine Option wie VS-Emulator für Android Phone aus).

    Wenn Sie eine Windows-Plattform ausgewählt haben, können Sie die App im Standardbereitstellungsziel, lokaler Computer, ausführen.

  3. Drücken Sie F5, um mit dem Debuggen zu beginnen, oder UMSCHALT+F5, um ohne Debuggen zu beginnen.

    Die Standard-App sieht in einem der Ripple-Emulatoren folgendermaßen aus:

    Führen Sie die "Hello" Standard-Anwendung im Ripple-Emulator

    Tipp

    Wenn Sie einen Ripple-Emulator ausführen und eine Fehlermeldung erhalten, welche angibt, dass Sie eine neue Version von Android SDK installieren müssen, verwenden Sie für die Installation den Android SDK-Manager.Öffnen Sie unter Windows den SDK-Manager in einer Befehlszeile, indem Sie den folgenden Befehl eingeben: android sdk

    Wenn ein Fehler wie etwa Cannot find module [modulename] oder Buildfehler angezeigt wird, lesen Sie die Informationen unter Erneutes Installieren von vs-tac. Wenn durch das Löschen des Cordova-Caches (oder durch die Neuinstallation von „vs-tac“) das Problem nicht behoben wird, lesen Sie Bekannte Probleme.

  4. Drücken Sie UMSCHALT + F5, um das Debuggen zu beenden.

Nächste Schritte:

Auswählen eines JavaScript-Frameworks eines Drittanbieters

Für gewöhnlich möchten Sie beim Erstellen einer Cordova-App ein JavaScript-Framework eines Drittanbieters miteinbeziehen, um die Anwendungsentwicklung zu vereinfachen oder um den Best Practices für das Entwerfen von Apps zu folgen. Sie sind nicht nur auf ein Framework begrenzt! (Und es ist nicht zwingend eines erforderlich. Diese Frameworks sind kein Bestandteil von Cordova.)

JavaScript-Frameworks von Drittanbietern enthalten möglicherweise verschiedene Funktionen und Entwurfsmerkmale, beispielsweise:

  • Model-View-Controller-Entwurfsmuster (MVC), die dabei helfen, Anwendungsprobleme zu isolieren. AngularJS und Backbone stellen hierfür zwei bekannte Beispiele dar.

  • Benutzeroberflächen-Steuerelemente und Stile. Ein Benutzeroberflächenframework (oder eine Bibliothek) umfasst für gewöhnlich bestimmte Steuerelemente wie ein Rastersteuerelement und manchmal CSS-Stylesheets. Weitere Informationen finden Sie unter Erstellen einer Benutzeroberfläche.

  • Navigationsmodell. Frameworks wie AngularJS und Open Source WinJS sowie andere Frameworks stellen ein Navigationsmodell für Einzelseiten bereit, um dabei zu helfen, ein App-ähnliches Verhalten zu ermöglichen.

Erstellen einer Benutzeroberfläche

Cordova-Apps werden in einem WebView-Steuerelement auf allen Plattformen mit Ausnahme von Windows und Windows Phone 8.1 ausgeführt, daher wirken sie tendenziell eher wie Web-Apps. Beim Planen einer UX für Kunden ist es wichtig, die folgenden Fragen zu berücksichtigen:

  • Soll Ihre App auf unterschiedlichen Plattformen identisch aussehen?

    Ein Benutzeroberflächen-Framework bietet gewöhnlich ein individuelles Erscheinungsbild und sollte plattformübergreifend identisch aussehen. Zu typischen bekannten Benutzeroberflächen-Frameworks zählen Ionic und Bootstrap.

    Ein Beispiel, bei dem eine Ionic-Vorlage verwendet wird, finden Sie unter Ionic SideMenu-Startvorlage.

  • Wenn Sie eine systemeigene Darstellung wünschen, zielen Sie dann auf eine bestimmte Plattform besonders ab?

    Einige Benutzeroberflächen-Frameworks ähneln möglicherweise der Darstellung einer bestimmten Plattform, z. B. iOS. Wenn Sie für jede Plattform eine systemeigene Darstellung wünschen, steigen die Entwicklungskosten. Zudem ist eine systemeigene Darstellung möglicherweise schwerer umsetzbar.

Es ist wichtig, die Entwurfsrichtlinien für bestimmte Plattformen zu befolgen, um sicherzustellen, dass Ihre App den Prüfvorgang besteht. Apps müssen nicht unbedingt systemeigen aussehen, um für einen App-Store genehmigt zu werden, sie sollten sich jedoch eher wie eine App und nicht wie eine Webseite verhalten. Weitere Informationen finden Sie unter Genehmigung der Apache Cordova-App durch die App-Stores.

Ein Beispiel mit Verwendung von Ionic finden Sie unter der Ionic SideMenu Starter-Vorlage. Ein Beispiel mit Verwendung von quelloffenem WinJS finden Sie unter der WinJS Navigation-Vorlage.

Wenn Ihre Benutzeroberfläche vergleichsweise einfach ist oder Sie die Entwicklungsressourcen parat haben, können Sie mithilfe der Best Practices für plattformübergreifendes CSS, beispielsweise die Verwendung von CSS3 FlexBox und @media-Abfragen, Ihre eigene Benutzeroberfläche erstellen. Es gibt viele Webressourcen, die Informationen darüber bereitstellen. Ein Beispiel mit einigen dieser Verfahren finden Sie im AngularJS Master-Detail-Beispiel.

Im Folgenden finden Sie einige Punkte, die beim Erstellen einer eigenen Benutzeroberfläche beachtet werden sollten:

  • Wenn Sie auf Android 4.4 oder höher (Chromium-basierter Browser), Windows oder Windows Phone abzielen möchten, ist die Unterstützung für aktuelle CSS-Standards und andere Webtechnologien besser. Unter caniuse.com finden Sie spezifische Informationen über unterstützte Funktionen.

  • Wenn Sie auf iOS oder Android-Version vor 4.4 abzielen, ist der Browser WebKit-basiert. (Der Ripple-Simulator, der die installierte Version von Chrome verwendet, weist eher eine Funktionsweise wie Android 4.4 auf.) Einige WebKit-Browserverhaltensweisen unterscheiden sich. Beispielsweise stellen WebKit-Browsers keine konsistente Unterstützung für vw- und vh-Einheiten dar, die für das Entwerfen einer dynamischen Benutzeroberfläche nützlich sind.

Tipp

Verwenden Sie den Ordner merges in Ihrem Projekt, um Plattformunterschiede handzuhaben, die nicht in einer allgemeineren Form codiert werden können.

Hinzufügen systemeigener Funktionen (Plug-Ins)

Eine der wichtigsten Funktionen, die Cordova bereitstellt, ist die Unterstützung für Plug-Ins, die den Zugriff auf systemeigene Funktionen wie Geolocation und Akku ermöglichen. Mit einem Plug-In können Sie die Programmierung zu einer generischen JavaScript-API vornehmen. Kern-Plug-Ins umfassen für gewöhnlich die Unterstützung sämtlicher Hauptplattformen, während bei Drittanbieter-Plug-Ins möglicherweise mehr Eingriffe erforderlich sind. Wenn die Plug-In-Unterstützung nicht verfügbar ist, müssen Sie eventuell ein vorhandenes Plug-In anpassen oder ein eigenes schreiben, für das systemeigener Code erforderlich ist.

Weitere Informationen finden Sie unter Verwalten von Plug-Ins für mit Visual Studio-Tools für Apache Cordova erstellte Apps.

Hinzufügen von verbundenen Diensten

Lesen Sie Hinzufügen der verbundenen Dienste zur mit Visual Studio-Tools für Apache Cordova erstellten App, wenn Ihre App Azure- oder Office 365-Dienste verwendet. Ein Kern-Plug-In für Azure Mobile Services steht im Config Designer in Visual Studio zur Verfügung.

Informationen über das Hinzufügen der Azure-Dienste in der Beispiel-App der Aufgabenliste für Visual Studio-Tools für Apache Cordova (AngularJS-Version) finden Sie unter Erstellen der "ToDoList"-Beispiel-App.

Informationen zu den ersten Schritten beim Erstellen von Apps mithilfe von Azure- oder Office 365-Diensten mit Cordova finden Sie in den folgenden Artikeln und Blogbeiträgen.

Azure

O365

Hinzufügen von plattformspezifischen Ressourcen

Plattformspezifische Ressourcen wie Begrüßungsbildschirme und Speichersymbole sind erforderlich, damit Apps für den Download aus App-Stores genehmigt werden. Der Ordner "res" in Ihrem Projekt enthält diese Ressourcen. Sie können den Ordner "res" auch verwenden, um benutzerdefinierte Konfigurationsdateien zu verwenden. Weitere Informationen finden Sie unter Konfigurieren der mit Visual Studio-Tools für Apache Cordova erstellten App.

Die Tools herunterladen Herunterladen der Visual Studio-Tools für Apache Cordova oder weitere Informationen

Siehe auch

Weitere Ressourcen

AngularJS-Beispiel

WinJS-Beispiel

Backbone-Beispiel