Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

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

Anlegen eines neuen Projekts

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Video legen Sie ein neues Cordova-Projekt inklusive Ionic und TypeScript unter Zuhilfenahme der Vorlage "Blank" an.
08:31

Transkript

Ich würde gerne eine App erstellen, mit der ich Ausgaben erfassen kann, die ich nicht hatte. Bedeutet also, wenn ich morgens auf dem Weg zur Arbeit zum Beispiel am Becker vorbeikomme und mir da normalerweise einen Kaffee geholt hätte, dann würde ich mir heute diesen Kaffee nicht holen und einfach in meine App eintragen, dass ich mir einen Kaffee gespart habe und dass das zum Beispiel EUR 2,50 waren. Im Laufe der Zeit wird sich dann immer mehr finden, was ich nicht gekauft und dadurch gespart habe und so kann ich dann in dieser App später sehen, wie viel ich insgesamt gespart habe. Um diese App anzulegen, wähle ich in Visual Studio Datei, neues Projekt und entscheide mich hier im Bereich TypeScript für die leere Vorlage. Das liegt daran, weil ich in meiner App weder eine Tab-Navigation haben möchte noch eine Navigation über ein Seitenmenü. Die App nenne ich savedIt und wähle OK. Visual Studio wird jetzt im Hintergrund die Abhängigkeiten wiederherstellen und in dieser Zeit sollten wir uns einmal anschauen, was wir hier überhaupt erhalten haben. Wir haben nun also eine Lösung, die schon eine ganze Menge an Dateien hat, obwohl sie eigentlich leer ist. Ich fange mal hier in diesem Bereich an. Wir haben hier zum einen die Datei bowerrc. Und das ist die Konfiguratiosdatei für Bower. Bower ist ein Werkzeug zum Management von clientseitigen Abhängigkeiten. Ich würde mit Bower also irgendwelche Frontend Bibliotheken, typischerweise also JavaScript Frameworks oder CSS Frameworks herunterladen. Und hier steht eben drin, dass solche Bilbliotheken im Ordner www/lib landen sollen. Also hier. Danach habe ich die editorconfig. Die können wir einmal außen vor lassen. Wir haben dann die bower.json und in dieser Datei sind die Abhängigkeiten am Frontend. Aktuell ist das nur Ionic. Und in dieser Datei sind die Abhängigkeiten enthalten, die ich am Frontend habe. Aktuell ist das nur Ionic. Die Datei config.xml ist schon etwas wichtiger. Das ist die Konfigurationsdatei meiner Anwendung. Und Sie sehen hier, dass es in Visual Studio einen schönen Editor dafür gibt. Ich kann hier also zum einen festlegen, welches meine Startseite ist. Hier wird also die Indexseite genommen, die wir hier finden. Ich kann außerdem den Anzeigenamen der App definieren, ich kann den Paketnamen eintragen und den sollte ich direkt mal ändern. Wir fahren hier in der Regel das Prinzip, dass wir den umgekehrten Domänennamen nehmen, also zum Beispiel de.andrekraemer.savedIt und das ist auch später der Indentifier, unter dem meine App in den verschiedenen Stores dann zu finden sein wird. Bedeutet also, der muss weltweit eindeutig sein. Ich kann hier unten dann noch den Autorennamen eintragen. Da macht das auch Sinn, meinen Namen einzutragen. Natürlich sollten Sie Ihren Namen eintragen bzw. Ihren Firmennamen. Mache ich das auch mal schnell. Und jetzt kann ich hier noch eine Beschreibung für meine App angeben zum Beispiel die "SavedIt App erfasst alle Ausgaben, die ich mir gespart habe." Ich kann hier weiter angeben, ob ich im Hoch- und im Querformat bedient werden kann oder nur im Hoch- oder nur im Querformat. Ich kann die Cordova CLI auswählen und hier empfiehlt es sich, die Cordova CLI zu wählen, die mit den Templates mitgekommen ist. Heißt also, ich nutze hier die Version 6.1.1. Ich kann jetzt hier Plugins hinzufügen. Im Moment brauche ich noch keine Plugins. Die werden allerdings später bestimmt noch benötigen und ich kann hier für Windows Android und IOS noch spezifische Einstellungen vornehmen. Als weitere Datei haben wir hier unser Gulp File und in so einem Gilp File kann ich Aufgaben eintragen, die ausgeführt werden sollen. Zum Beispiel sehen wir hier, dass es eine Aufgabe Default gibt und diese Aufgabe Default wird vor jedem Kompiliervorgang ausgeführt, dass diese eine Abhängigkeit auf sass und tsc hat. Und hier sehen wir, dass es diesen sass task gibt, der geht hin und ruft das sass Plugin auf, also im Endeffekt macht der einen Pre-Processing von der sass Datei nach CSS und tsc hier unten macht das Gleiche für TypeScript. Wir haben dann weiter die package.json. In der package.json finden wir die Entwicklungsabhängigkeiten wie Gulp oder ähnliche Werkzeuge. Bower, sourcemaps usw. und das sind eben die Bibliotheken, die Visual Studio beim Öffnen des Projekts herunterlädt. Wir haben zwei readme Dateien, die brauchen wir uns jetzt nicht anschauen. Wir haben außerdem die taco.json Datei, die wurde eben schon in dem Editor mit angezeigt, indem wir die config.xml geöffnet haben, nämlich die cordova-cli, die kommt aus der taco.json. Dann habe ich die tsconfig und das ist meine TypeScript Konfigurationsdatei. Hier steht zum Beispiel drin, dass wir nach ECMAScript5 kompilieren wollen, dass wir sourcemaps erzeugen wollen, dass das Ganze in das Verzeichnis www/js später rein soll. Also im Endeffekt hier rein und hier steht außerdem drin, welche Verzeichnisse nicht durch TypeScript kompiliert werden sollen. Zum Beispiel der lib Ordner und der platforms Ordner usw. Hier unten haben wir die typings.json und das ist die Datei, in der drin steht, für welche Plugins wir IntelliSense haben möchten. Jetzt kommen wir zu den weiteren Ordnern. Wir haben hier oben den App Ordner und im App Ordner dort entwickeln wir unser TypeScript später. Wir haben hier schon die Startup Datei enthalten. Wir würden hier noch später eigene TypeScript Dateien hinzufügen. Wir haben hier dann weiter diesen Ordner hooks, der wurde automatisch schon von Ionic mit einer Datei befüllt, weil da müssen Sie ein bisschen aufpassen, wenn Sie ein Remote Build für ein IOS-Gerät auf einem Mac machen, dass kann es sein, dass Sie eine Fehlermeldung in Visual Studio sehen, in der dieser Dateiname hier später auftaucht. Und wenn Sie die erhalten, dann liegt das daran, dass die Datei mit Windows-Zeilen enden, also einem Carriage Return Line Feed gespeichert worden ist auf dem Mac aber ein Line Feed erwartet wurde. Also im Zweifelsfall müssen Sie die dann einfach im Windows noch schnell einmal konvertieren. Dann haben wir den Ordner merges. Hier kommen plattformspezfische Dateien herein. Zum Beispiel irgendwelche Dateien, die Standardfunktionalität überschreiben sollen. Wir haben den Ordner resources. Ja, und hier sind halt unsere Bilder und andere Resourcen enthalten. Und hier können wir auch je nach Plattform erschiedene Resourcen ablegen. Wir haben dann den Ordner scss. Hier ist das sass von Ionic drin und sass das ist so ein Präprozessor für CSS. Und dann haben wir hier den Ordner typings mit den heruntergeladenen TypeScript IntelliSense Einträgen. Und zu guter Letzt haben wir hier den Ordner www und das ist der Ordner, der später dann immer in der App verpackt wird, der ausgeliefert wird, der für jede Plattform dann auch neu erstellt wird. Und hier sehen wir, dass wir eine index.html haben. Das ist unsere Startseite. Hier werden also die ganzen Ionic Scripts zum Beispiel geladen. Und wir sehen darüber hinaus, dass wir den Ordner js haben. Hier ist eben unsere JavaScript Datei herein kopiert worden, die aus den TypeScript kompiliert worden ist. Wir haben den Ordner Images mit Bildern und den Ordner CSS, wo unsere sass-Geschichten reingekommen sind. Soweit erst einmal zu der Struktur dieses Projektes. Wie Sie also gesehen haben, ist bei der leeren App zwar einiges drin, sie ist nicht ganz leer, aber Sachen wie Controller, Services oder Routing sind hier eben noch nicht konfiguriert.

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!