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

Ein neues Projekt mit der Vorlage "Sidemenu" anlegen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Wenn Sie eine seitliche Navigation oder ein Burger-Menü erstellen möchten, wie man es häufig in Android-Apps sieht, dann ist die Vorlage "Sidemenu" der ideale Ausgangspunkt für Ihre App.
06:05

Transkript

Viele Apps setzten heutzutage auf eine Navigation über ein Sidemenu, eine Navigation Drawer oder ein Burger-Menü, wie man auch immer diese drei Striche hier oben am liebsten nennen mag. Wenn Sie mit Ionic eine App anlegen möchten, die einen solches Sidemenu hat, dann nutzen Sie dazu am besten die Sidemenu Projektvorlage. Wie diese Vorlage aufgebaut ist, möchte ich Ihnen gerne in diesem Film zeigen. Dazu lege ich eine neue App an, wähle als Projektvorlage im Bereich TypeScript, Cordova Apps die Ionic TypeScripts Sidemenu-Vorlage aus und gebe meiner App einen Namen. Zum Beispiel appside. Wenn ich nun OK klicke, werden erst alle Pakete wieder hergestellt. Das dauert einen kurzen Augenblick und anschließend starte ich einfach einmal die App im Emulator ehe ich Ihnen erkläre, was jetzt die einzelnen Bestandteile der App sind. Ob die Wiederherstellung der Pakete schon abgeschlossen ist, sehen Sie überigens nicht daran, ob hier unten bereits Fertig in Visual Studio steht, sondern daran, ob hier hinter den Abhängigkeiten der Text Wiederherstellung verschwunden ist und ob diese Pfeile, die sich hier unten bewegen, auch verschwunden sind. Den aktuellen Fortschritt können Sie sich übrigens über die Ausgabe Bower/Npm anzeigen lassen. Hier sehen Sie genau, welche Schritte aktuell durchgeführt worden sind und bekommen somit einen Überblick darüber, was bereits geschehen ist. So, die Pfeile sind verschwunden, außerdem ist Wiederherstellen als Textzusatz hier unten verschwunden und hier unten steht auch nicht mehr Fertig, sondern die Installation der Pakete ist abgeschlossen. Bedeutet, die App ist jetzt tatsächlich vollständig initialisiert und kann sie jetzt zum ersten Mal starten. Dazu nutze ich den Ripple Emulator und dieser Ripple Emulator ist im Endeffekt eine Browser-Emulation eines mobilen Gerätes. So, die App ist gestartet und wie wir hier erkennen können, haben wir bereits eine Seiten-Navigation in der App integriert. Wenn ich also auf diese drei Striche, die auch häufig Burger-Menü genannt werden, klicke, dann öffnet sich hier links ein Bereich, in dem ich zu einer anderen Bildschirmmaske navigieren kann. Und wir sehen hier, wir haben auf oberster Ebene die Bildschirme Login, Suche, Browse und Playlists und wenn ich auf Playlists klicke, dann erhalte ich hier einen List-View und innerhalb dieses List-Views kann ich mich dann noch einmal weiter bewegen. Schauen wir uns nun einmal an, wie das Ganze vom Quellcode her aufgebaut ist. Der für uns relevante Code befindet sich im Ordner App. Innerhalb dieses Ordners sind die TypeScript Dateien, die später übersetzt werden und in den Ordner www js kopiert werden. Und das sind die Dateien, die später ausgeliefert werden. Zur Entwicklung bewegen wir uns allerdings hier im Ordner App und hier sehen wir, dass es eine Datei controllers.ts gibt, in der jetzt mehrere Controller definiert worden sind. Zum einen der App Controller, dann der Playlist Controller und der Playlists Controller, also einmal für die Einzahl, einmal für die Mehrzahl. Und diese Controller, die sind alle mit TypeScript geschrieben und der Playlists Controller zum Beispiel, der hat hier unten ein festprogrammiertes Array von Playlists, die dann in der Oberfläche gerendered werden. Wenn wir hier also zum Beispiel diesen String ändern würden und würden diese Playlist Music to code by nennen und das Ganze jetzt starten, dann werden wir gleich auch sehen, dass sich der Name dieser Playlist in unserem UI verändert hat. In einer echten App würden Sie natürlich in der Regel Ihre Listen dynamisch befüllen und eben nicht aus einem festdefinierten oder vordefinierten Array für einen ersten Eindruck. In so einer Projektvorlage ist aber natürlich eine festdefinierte Liste sehr gut geeignet. Und hier sehen wir auch schon unsere Änderungen mit unserer neuen Playlist Music to code by. So, abgesehen von diesen Controllern haben wir dazu noch die Datei app.ts. Und in dieser Datei app.ts steht der Initialisierungscode unserer App. Unter anderem ist hier auch das Routing definiert. Bedeutet also, wir können hier genau sehen, welche Navigationspfade definiert werden und in welchem Status die App zu welcher Seite navigiert später. Diese Vorlage mit der Navigationsleiste auf der linken Seite, die bietet sich also immer dann besonders an, wenn Sie sowieso eine solche Navigtionsleiste in Ihrer App benutzen möchten. Sie sollten allerdings daran denken, dass auf Apple-Geräten eine Navigationsleiste, wie wir sie hier gesehen haben, eher unüblich ist. Auch wenn natürlich ein Umschalten auf einen Apple im Ripple Emulator zeigt, dass das Ganze auch auf einem Apple Gerät gerendered werden kann. Hintergrund ist jedoch, dass auf Apple-Geräten diese Navigation mit den drei Strichen an der linken Seite eher unüblich ist. Deswegen sollten Sie sich gut überlegen, ob Sie diese Art der Navigation in Ihrer App, wenn sie Cross-Plattform sein soll, gerne benutzen möchten. Und hier sehen wir das Ganze einmal im Apple Design. Bei den Elementen, wie sie hier genutzt worden sind, sehen wir aktuell noch relativ wenig Änderungen zwischen der Android und der IOS Variante. Wenn Sie später erweiterte Steuerelemente benutzen wie zum Beispiel ein Steuerelement, mit dem Sie Menüoptionen aktivieren und deaktivieren können, dann werden Sie allerdings schon sehen, dass es hier tatsächlich Änderungen im Rendering gibt.

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!