Cordova Integration in Visual Studio 2013 (Part 1) – Installation and First Steps

Man sollte immer vorsichtig sein, mit dem was man sich wünscht. Während einer Konferenz-Session (zusammen mit Jan Schweda auf dem Dotnet Day Franken über die Entwicklung mit Cordova/PhoneGap), wurden wir von Teilnehmern in der QA-Runde gefragt, wie wir uns die Zukunft von Cordova/PhoneGap und die Gestaltung der Tools vorstellen könnten. Die Antwort lag auf der Hand – Vollwertige Integration in Visual Studio, Cordova-Build mit F5 unter Berücksichtigung der Target- und Deployment-Platform-Angabe. Keine zusätzliche Console und anderen Chichi, dafür Debugging. Mit dem Update 2 für das Visual Studio 2013 wurde uns nur 2 Tage später der Wunsch erfüllt.

AWESOME – sie haben es wirklich getan. Cordova fand mit dem Update 2 den Weg in Visual Studio 2013. Wobei diese Aussage nicht ganz richtig ist, braucht es doch nach der Installation des Updates noch die Preview der Multi-Device Hybrid Apps welche die eigentliche Integration von Cordova in Visual Studio vornimmt. Aber bevor die Multi-Device Hybrid Apps arbeiten können wie sie sollen, muss bei den installierten Features von Visual Studio Update 2 die Default-Auswahl um die letzten beiden Punkte „Tools for Maintaining Store Apps for Windows 8“ und „Windows Phone 8.0 SDK“ erweitert werden, sofern dies noch nicht geschehen ist

 

UpdateVS

 

 

Installation:

Nachdem das Update installiert ist, kann die Preview der Multi-Device Hybrid Apps folgen. Hier werden folgende 3rd Party Komponenten mit installiert:

  • Joyent Node.js –
  • Apache Ripple™ Emulator
  • Git CLI –
  • Google Chrome
  • Apache Ant 1.8.0+
  • Multi-Device Hybrid Apps for Visual Studio 7
  • Oracle Java JDK 7
  • Android SDK
  • SQLLite for Windows Runtime
  • Apple iTunes

 

CTPFeatures

WICHTIG: Falls auf dem System bereits PhoneGap auf dem klassischen Wege installiert ist, oder Komponenten wie NodeJS oder Cordova bereits vorhanden sind, sollte unbedingt das PDF beachtet werden, dass der Installation beiliegt. Hier wird beschrieben, wie die Komponenten einzeln installiert und ggfs. konfiguriert werden müssen. Aus eigener Erfahrung kann ich sagen – tut man das nicht, hat man wenig Spaß mit dem Thema.

Betrachtet man die 3rd Party Komponenten die für die Cordova Integration auf das System geladen werden, stechen doch einige davon hervor und man fragt sich (mancher stöhnt es vielleicht sogar laut heraus): Warum brauch ich das? Wofür iTunes oder Google Chrome? Was ist denn bitte Apache Ripple?

iTunes und Visual Studio? Musik und Code? Weit gefehlt. iTunes wird benötigt, um die in Visual Studio entstandene App auf ein Apple-Device zu deployen. Stutzig macht allerdings die Tatsache, dass für iOS kein SDK oder ähnliches installiert wurde, obwohl doch für Windows Apps (Store und Phone) und Android SDKs mit ausgerollt wurden. Der Grund ist simpel: Für die Windows Plattform gibt es schlichtweg kein SDK für iOS, mit welchem Visual Studio und Cordova einen Build erzeugen könnte, der nativ auf einem geeigneten Apple-Gerät läuft. Soll auf ein iOS-Gerät deployed werden, braucht es den Umweg über ein Remote-Mac-System, auf welchem der Build erstellt wird. Wie dies im Detail funktioniert, werde ich in einem separaten Blog-Eintrag beleuchten. Das Bauen einer iOS-Version für einen der mitgelieferten Emulatoren ist allerdings direkt aus Visual Studio heraus möglich.

Und da sind wir auch schon bei den beiden anderen Exoten-Komponenten – Apache Ripple ist ein Device-Emulator-Plugin für den Chrome-Browser von Google. Mit Ripple ist es möglich, das Layout der HTML5/CSS App zu testen UND Geräte-Funktionen, wie Sensoren oder Geolocation, die von Cordova angesprochen werden im Browser zu simulieren. Bei der Darstellung des Layouts verwendet Ripple allerdings nicht die Browser-Regeln von Chrome, sondern berücksichtigt den Browser des zu simulierenden Gerätes. Damit Visual Studio Ripple als Emulator anbieten kann, ist die Installation des Chrome Browsers zwingend notwendig.

.

Erste Schritte:
Sobald das Setup abgeschlossen ist, findet sich in Visual Studio unter den Templates für Projekte einiges Neues – Unter „Templates – Other Languages“ kommen für „Javascript“ und „Typescript“ die Sparte „Multi-Device Hybrid App“ zum Vorschein, welches die Projektvorlage „Blank App (Apache Cordova) beinhaltet.

NewProject

 

 

Benutzer von Visual Studio, welche in ihrer Default-Projektpfad-Angabe Blanks verwenden, werden beim Klick auf OK eine Fehlermeldung ernten – wie es scheint, sind bei Cordova-Projekten keine Leerzeichen in Projektpfaden erlaubt. Kritisch dabei ist, dass im Visual Studio – Standardpfad Leerzeichen enthalten sind und der Pfad geändert werden MUSS.

.

NewProjectBug

 

 

Wurde der Pfad-Fehler (Sofern vorhanden) überwunden, findet man sich mit neuem Thema in vertrauter Umgebung. Alles Gewohnte ist dort, wo es immer ist und alles Neue ist da wo es hin gehört. Sofort sticht die Projekt-Startseite ins Auge, die einführende Worte und Links zu Ressourcen, Samples und der Apache Cordova Dokumentation beherbergt. Der Solution-Explorer zeigt die Default-Projektstruktur, die ein Cordova-Projekt out of the box verpasst bekommt. (bild anklicken für Vollbild)
.

StartPage

 

 

Die „eigentliche Magie“ verbirgt sich allerdings in der oberen Toolleiste unter dem Menü. Rechts neben der Combobox für die angelegten Solution-Configurations (Debug, Release, etc.) findet sich eine weitere Auswahlmöglichkeit mit den möglichen Zielplattformen (Solution Target), die Visual Studio für den Build mit Cordova anbietet. Neben den „üblichen Verdächtigen“ wie Android, iOS und Windows Phone sind erfreulicherweise auch die unterschiedlichen CPU-Versionen für Windows 8 Store Apps als Platform-Target möglich.
.

VSPlatformSelector

 

 

Um die erstellte Beispielanwendung nun starten zu können, muss bzw. kann noch festgelegt werden, wo das Deploying erfolgen soll. Mit dem Öffnen des Drop-Down-Menüs der Deployment Targets, kommen für jede Plattform die möglichen Optionen zum Vorschein, welche sich aus einer Anzahl von Emulatoren in unterschiedlichen Geräteformen und der Auswahl eines „Echt-Gerätes“ (Device) zusammensetzen. Für Zweiteres muss natürlich ein entsprechendes Gerät über ein Kabel mit dem System verbunden und als Entwickler-Gerät freigeschalten sein.

DeployTarget

 

 

So wird z.B. mit den Einstellungen „Android“ als Solution Target und „Ripple Nexus (Galaxy) als Deployment Target mit dem Druck der F5 Taste Chrome und Apache Ripple gestartet, um die App in der Simulation für ein Nexus Phone zu deployen und anzuzeigen. (Bild anklicken für Vollbild)

RippleNexusScreen

 

 

FAZIT:

Die Integration von Cordova in Visual Studio ist der nächste Schritt in die richtige Richtung – nämlich in Richtung Cross-Device Development. Für alle, die in der Webwelt zu Hause sind, ist die Entwicklung von Apps auf Grund ihrer Vorkenntnisse in HTML5/CSS verlockend und Cordova das ernstzunehmende Gegenstück zu Xamarin. Durch die Einführung in Visual Studio fallen viele umständliche Zwischenschritte um eine App zu bauen weg, und machen das Tooling und den Entwicklungsprozess einfacher und intuitiver. Ja, es fühlt sich schon fast an wie das Entwickeln von nativen Apps. Aber eben nur fast. Im zweiten Teil werden wir das Arbeiten mit Cordova in Visual Studio näher beleuchten und testen, wie einfach es wirklich ist, damit ein wertige App für alle Solution Targets zu entwickeln.

Eine Spoiler-Information vorweg – Debugging geht tatsächlich!

 

 

 

 

2 comments to Cordova Integration in Visual Studio 2013 (Part 1) – Installation and First Steps

  • Daniel Steiner  says:

    Hallo, ich hab mir grad die multidevice hybrid app ctp installiet und würde gern die cordova app auf meinem windows phone testen – leider bekomme ich da einen fehler (Fehler 2 Der Befehl „“C:\Users\Daniel\AppData\Roaming\npm\node_modules\vs-mda\vs-cli“ build –platform „Windows Phone“ –configuration „Distribution“ –projectDir . –projectName „Opening Hours“ –buildServerUrl „“ –buildTarget „PhoneDevice““ wurde mit dem Code 8 beendet. C:\Users\Daniel\AppData\Roaming\npm\node_modules\vs-mda-targets\Microsoft.MDA.targets 68 5 Opening Hours) haben Sie da eine Ahnung woran das liegen kann?

    • mrichardson@tilegarage.net  says:

      Hi,

      ich habe die Frage jetzt erst lesen können, sorry.

      War auf dem System vorher Cordova oder andere der Komponenten bereits installiert, die die Multidevice Hybrid Apps installieren wollen?
      Ist beim Update das Windows Phone SDK angehakt gewesen?

      Ich habe auch Code 8 bekommen, als ich für Android gebaut habe, und mich beim installieren/konfigurieren der CTP-Komponenten nicht an das beigelieferte PDF (der Punkt was zu tun ist, wenn Komponenten wie Android SDKs, NodeJS oder auch Cordova schon installiert sind) gehalten habe. So hat Visual Studio das Android SDK und JAVA nicht gefunden, da ich das bereits bestehende nicht händisch neu verlinkt habe. Sieht für mich so aus, als würde er bei Dir Komponenten nicht finden.

      viele Grüße

      Marco

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>