Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Cross-Plattform-Apps mit Cordova, Ionic, TypeScript und Visual Studio

Überblick über die Visual Studio Tools für Apache Cordova

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dieses Video zeigt die vielen Vorzüge der Visual Studio Tools für Apache Cordova, kurz VSTACO, wie zum Beispiel einfaches Plug-in-Management, Debugging oder Remote-Kompilierung.
07:48

Transkript

In diesem Video möchte ich Ihnen einen kurzen Überblick über die Visual Studio Tools für Apache Cordova geben. Wie der Name schon sagt, integrieren die Visual Studio Tools für Apache Cordova, Apache Cordova in Visual Studio. Aber was bedeutet das eigentlich? Das bedeutet zum einen, dass Sie sehr komfortabel arbeiten können. Z.b. müssen Sie sich selber gar nicht mehr darum kümmern, dass Android SDK auf dem aktuellen Stand zu halten oder Emulatoren oder ähnliches runterzuladen, dass macht für Sie alles Visual Studio. Alles was Sie also machen müssen, ist im Setup die Visual Studio Tools für Apache Cordova mit auszuwählen und alle weiteren Abhängigkeiten werden automatisch installiert. Des weiteren gibt es einige wirklich sehr gute Assistenten, mit denen wir verschiedenste Aufgaben im Bereich der App Entwicklung durchführen können. Z.b. gibt es einen Assistent, mit dem wir Bower-Pakete verwalten können. Wir können also hier nach Paketen direkt in einer graphischen Oberfläche suchen. Wir haben die Möglichkeit Pakete zu deinstallieren über diesen Assistenten. Wir haben darüber hinaus einen sehr schönen Dialog zum Bearbeiten der Konfigurationsdatei, wir müssen also hier nicht selber XML schreiben sondern wir können direkt die Datei in einem graphischen Editor bearbeiten und wir haben hier sogar die Möglichkeit, Plug-Ins zu installieren, haben hier links also eine Liste von Kern Plug-Ins und müssen zum Installieren eines Plug-Ins lediglich noch einen Button klicken. Abgesehen von solchen netten Erweiterungen und natürlich den Standard Features die Visual Studio sowieso hat, sprich wir haben tolle IntelliSense im Fall von TypeScript hier z.b. Sobald ich hier also einen Punkt drücke, bekomme ich auch nur wirklich das angezeigt, was das Objekt überhaupt an Methoden hat. Aber das sind natürlich die Standardfunktionen. An erweiterten Funktionen bekomme ich so Dinge wie, dass ich hier meinen TypeScript Code, den ich hier geschrieben habe, z.b. kompilieren kann nach JavaScript und diesen dann trotzdem noch debuggen kann. Das will ich Ihnen einmal zeigen. Ich gehe hin und habe hier in meinem Home Controller die Methode addItem. Ich habe mir hier einen Breakpoint gesetzt und werde jetzt einmal meine App im Emulator starten. Das hier ist übrigens ein Android Emulator, der kostenfrei von Microsoft zur Verfügung gestellt wird. Dieser Android Emulator, der basiert auf Hyper-V, der ist also entsprechend flott und lässt sich wirklich sehr gut bedienen. Und wie wir jetzt sehen werden, können wir wirklich sehr schön unseren Code im Emulator ausführen, und ihn gleichzeitig in VisualStudio debuggen. Dazu werde ich jetzt einfach einmal auf die Schaltfläche addItem klicken, sobald mein Emulator da ist, und das ist nämlich diese Schaltfläche hier, diese “Jetzt sparen!” Schaltfläche, und sofort lande ich im Quelltext Editor und hier an meinem Breakpoint. Jetzt kann ich hier, wie ich es gewohnt bin, meine Variablen inspizieren. Ich habe ja nichts eingegeben, darum kann ich dann hier auch direkt sehen, dass ich wieder rausspringe aus der Methode. Jetzt gebe ich einmal etwas ein: Also ich spare mir hier z.b. mal “Ein echtes Android Handy” weil ich ja den Emulator benutzte und das kostet, je nachdem was Sie ausgeben möchten, 150 bis 700 Euro. Ich spare also mal. Dieses Mal sehe ich, dass die entsprechenden Werte enthalten sind. Ich kann mit F10 hier durchspringen, und kann jetzt auch mit F11 in Methoden hereinspringen, also genau den Komfort, den wir aus Visual Studio kennen, den haben wir hier auch im Bereich der App Entwicklung. Wir haben darüber hinaus sogar noch ein wenig mehr. Wenn ich jetzt z.b. einmal unter “Debuggen” das Menu “Fenster” wähle und hier den “DOM Explorer” und dann auf “alle anzeigen” gehe, dann kann ich hier folgendes machen. Ich öffne jetzt hier einmal meinen Emulator und jetzt drücke ich auf “Element auswählen” und wähle z.b. hier den Button an. Oder nehmen mal darunter lieber das Label und wir sehen sofort, ich springe hier an den entsprechenden Quelltext. Ich kann also hier den Quelltext mir angucken, den html Quelltext, und kann den sogar live verändern. Wir haben ja hier z.b den Fall, dass hier innerhalb dieses spans der Wert 163,97 steht und jetzt klicke ich einfach doppelt rein, und mach daraus mal 163,97 Euro und enter und zurück im Emulator sehe ich sofort, dass sich das geändert hat. Das Ganze gilt natürlich auf für CSS. Bedeutet also, wenn ich jetzt hier meinem Label, was ja aktuell die Klasse Input-Label hat, noch mitgebe, dass die Hintergrundfarbe z.b. grün sein soll, dann sehen wir auch das sofort. Das ist natürlich ein extremer Produktivitätsvorteil, dass ich so schnell in meinem Emulator entsprechend das Mark-up ändern kann, um auszuprobieren, welche Auswirkungen jetzt eine gewisse Änderung haben. Neben einem Android Emulator haben wir noch ein weiteres tolles Feature, nämlich wir können auch unter iOS emulieren und wir können vor allem auch unter iOS kompilieren. Dazu wähle ich jetzt hier einmal als Ziel iOS aus und wähle hier oben den iOS Simulator aus und was im Endeffekt jetzt passiert ist, ich habe einen Mac in meinem Netzwerk, der einen bestimmten Dienst gestartet hat, und das ist auch ein Dienst, der von Microsoft kostenfrei bereitgestellt wird, das ist ein kleines Nord package, und wenn ich jetzt auf meinen Mac wechsle, dann können wir hier im Hintergrund sehen, wie jetzt hier dieser Dienst, der in Form einer Konsolen- oder Terminalanwendung läuft, gerade hingeht und dieses Bild ausführt, und jetzt auch hier die App für mich gestartet hat. Ich kann jetzt also hier wirklich im Simulator hingehen, und kann jetzt hier genau so gleich debuggen, wie ich das auch auf dem Windows Rechner machen konnte. Also von der Grundidee her eine wirklich tolle Geschichte. Ich gehe noch einmal kurz rüber ins Visual Studio, um sicherzustellen, dass ich hier auch die richtige Instanz gerade debugge. Aber wir sehen, so, Plattform aktualisiert. Es ist jetzt hier gerade alles dabei hochzuladen. Bedeutet also, wir sollten jetzt ungefähr soweit sein, dass wir die neue Version im Simulator gleich sehen. Genau, jetzt wird die App neu gestartet. Ich hatte die von eben noch einmal gestartet. Und jetzt kann ich hier genauso z.b. sagen, ich spare mir ein iPhone und wie wir wissen, ist so ein iPhone ein wenig teurer, das kostet mal locker 699 Euro. Klicke auf “Jetzt sparen!” und kann natürlich auch hier dann genau so später debuggen, wie ich das eben auch in der anderen Variante konnte. Bedeutet also, wir können also zusammenfassen, dass die Visual Studio Tools für Apache Cordova, die Cordova Entwicklung komplett ins Visual Studio herein integrieren. Bedeutet also, wenn ich jetzt eine hybride Cross Plattform abschreiben möchte, dann kann ich das vollständig in Visual Studio machen und zwar auch, wenn ich für iOS entwickeln möchte, was normalerweise auf dem Mac geschehen müsste. Ich brauche den Mac zwar noch im Netzwerk, aber ich kann trotzdem komplett in Visual Studio entwickeln. Ich kann debuggen, ich kann meinen Code zur Laufzeit verändern, und all das funktioniert mit dem gewohnten Komfort, den man als Visual Studio Entwickler kennt.

Cross-Plattform-Apps mit Cordova, Ionic, TypeScript und Visual Studio

Steigen Sie in die App-Programmierung ein und kombinieren Sie die praktischen Tools.

2 Std. 45 min (23 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:14.11.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!