Helmbergers· 4 min read
Ionic und Visual Studio
Bei der Entwicklung einer hybriden App auf Basis Cordova/Ionic ist es immer wieder mal wichtig, dass man mit dem CLI (command line interface) vertraut ist. - Spätestens, wenn man zum Builden und Testen der iPhone App dann plötzlich am Mac unterwegs ist, dann ist man froh, dass einem die Tools geläufig sind.
In diesem Artikel, soll aber meine Vorgangsweise vorgestellt werden, wie man Visual Studio einsetzt.
Dieser Artikel ist Teil der Serie: Ionic_Start - Teil 7
Initialisierung mit Template
In der Visual Studio Gallery findet man ein paar wenige Ionic Templates. Ich habe sie vor ein paar Monaten getestet, bin damit aber nicht glücklich geworden. Vielleicht hat sich inzwischen ja einiges verbessert, trotzdem beschreibe ich hier den Weg, den ich gegangen bin.
Ich beginne immer auf der Commandline und erzeuge das Template mit ionic start … (siehe Initialisierung eines Ionic Projekts).
Projekt erstellen in Visual Studio
Dann geht es aber schon in Visual Studio weiter:
- File - New - Project From Existion Code
Apache Cordova auswählen
Project file location und Project name ausfüllen.
In meinem Beispiel:
- location: C:\Dev\App\uc.App1
- name: uc.App1
Dadurch wird ein Solution File angelegt.
Packagemanager
Visual Studio analysiert das Projekt, erkennt die beiden Packagemanager Dateien bower.json und package.json und beginnt nach kurzer Zeit die Dependencies zu laden.
Dies dauert nun einige Minuten.
Falls nichts passiert, kann man das auch händisch starten im Kontext Menü der Dependencies - Restore Packages (oder auch auf den Files: bower.json bzw. package.json)
Oft treten hier nun Fehler auf. Proxy Probleme oder falsche node.js Version, … (siehe vorige Artikel, wie Pakete installieren mit npm und Node.js und npm installieren).
Fehler werden im Output Fenster angezeigt. Man kann dort auswählen (Show output from) bower output, build, …
Falls Bower einen Fehler anzeigt, dass er die www/lib/ionic nicht überschreiben darf, dann liegt das daran, dass bei ionic start schon eine ionic lib geladen. Falls sich die dann unterscheidet in der Version, die im bower.json File aufgelistet ist, gibt es einen Konflikt. Am einfachsten zu lösen indem man den Ordner www/lib/ionic löscht und restore packages erneut aufruft.
Falls man schon ein erfolgreiches Projekt hat, kann man auch folgende Ordner von diesem Projekt in das neue Projekt kopieren:
- node_modules
- plugins
- typings
- www/lib
Wobei man bei node_modules schnell an die Pfadlängenbeschränkung von Windows stößt und daher, besser den Ordner zippt und ihn so transportiert.
Builden
Werden keine Fehler mehr angezeigt, dann kann man das Projekt nun in Visual Studio builden.
Es hat sich bewährt, Visual Studio zu beenden und neu zu starten. Somit wird die Solution gespeichert und Visual Studio wieder “gereinigt”.
Testen
Sind auch beim Erstellen des Projektes keine Fehler aufgetreten, dann ist meist der erste Test, die Solution mit dem Ripple Emulator auszuprobieren. Einfach mal auf den grünen Pfeil klicken und den Debugger damit starten: 
Der Ripple zeigt üblicherweise an, dass man warten muss (Wait klicken). Auch können Fehler angezeigt werden, die man vorerst getrost wegklicken kann. Je nachdem, wie man nun weiterarbeitet, ob man ionic serve verwendet oder am Device debuggt, sieht man sich die Fehlermeldungen genauer an oder auch nicht. Man kann sich hier die Mühe sparen, denn das die App am Ripple Emulator läuft, wird nicht das endgültige Ziel sein.
Deployen
Der nächste Schritt wäre auf die Zielplattform zu deployen. Man wählt die Platform: Windows Phone Universal / Device z.B. und klickt F5. Das Phone muss angesteckt und freigeschaltet sein.
Die Fehlermeldungen bekommt man in der JavaScript Konsole in Visual Studio.
Wichtig sind nun auch die Einstellungen, in der config.xml (siehe Bild oben): Version, Name, PackageName.
Fazit
Diese Vorgangsweise ist nicht jene, die von Microsoft oder Ionic vorgegeben wäre, doch sie hat sich bewährt. Trotzdem sollte man hier flexibel sein und auch mal ausprobieren, ob einem ein anderer Prozess einfacher erscheint. Die Tools entwickeln sich schnell weiter und mit dem nächsten Update kann alles besser werden. :-)
Bei auftretenden Problemen, nicht verzagen, google fragen. Ich versuche auch noch einen Artikel, mit Tipps und Tricks zu erstellen.
Links
Dieser Artikel ist Teil der Serie Ionic_Start.
Links und Glossar