❓Ionic Projekt erstellen

Handbücher und Bedienungsanleitung liest niemand und verstauben doch nur oder? Richtig, daher ist die Ionic Doku auch elektronisch und hier zu finden: https://ionicframework.com/docs/

Du findest dort sehr anschauliche Beispiele fürs Styling deiner App, gute Codebeispiele für native Komponenten und vieles mehr.

Ionic Command Line Interface

Du kannst ionic mit folgendem Befehl installieren:

npm install -g @ionic/cli

Die Ionic CLI ist bester Helfer für die künftige Entwicklung mit Ionic. Wir wissen, aller Anfang ist schwer, aber wie wärs mit

ionic

in deinem Terminal/Gitbash einzugeben.

Wie erstelle ich ein neues Projekt

Ein neues Projekt erstellt du mit

ionic start myNewProject

# Übersicht aller Möglichkeiten
ionic start --list

Evt. hast du Probleme unter Windows mit den Pfeiltasten (arrow-Keys). Du kannst ein Projekt auch manuell erstellen: ionic start <NAME> <ART> --type=angular ionic start testProjekt sidemenu --type=angular

wobei myNewProject der Name deines Projekt ist. Es dauert einen Moment, dann kannst du mit

cd myNewProject

ins eigentlich Projektverzeichnis wechseln.

Tipp von Jason:

Mit dem Befehl cd kannst du unter Linux/Unix navigieren. , ionic start legt übrigens immer einen neuen Ordner an :)

Wie kann ich meine App im Browser simulieren

Ionic bietet uns ein super Möglichkeit die von Euch programmierte App mit folgenden Befehl in Eurem Projektordner anzuschauen:

ionic serve

Ein neuer Tab im Browser wird dabei geöffnet, meist auf der URL http://localhost:8100/

Vorteile von ionic serve

• kein direktes Deployment via Build (Android SDK / XCode) auf Mobiltelefon nötig (==> Ihr spart Zeit)

• Änderungen sind direkt sichtbar (inkl. Live-Reload im Browser)

• Ihr könnt eine App ohne zusätzliche Installation von SDK's / XCode Programmen mit HTML, CSS, JS (Typescript) entwickeln

• Hinsichtlich von PWA (Progressive Web Apps) ein weitere Vorteile

Generator

Ionic hat seit CLI-Version 3.x den Generator eingeführt. Ein super Hilfsmittel um die wichtigsten Dinge per CLI generieren zu lassen. In der Struktur oben kannst du sehen, dass es z.B. im Verzeichnis /app/pages/home immer 3 Dateien hat:

• HTML

• Typescript

• Styling (SCSS)

Möchten wir nun eine neue Seite z.B. Einstellungen (settings) zu unseren Projekt hinzufügen, könnten wir den Ordner home duplizieren und ein mühsames Refactoring starten, oder die einfache Variante wählen und mit

ionic g page Settings

uns das ganze generieren lassen. Praktisch nicht?

Verschaff dir doch bitte in folgender Doku einen Überblick: Generierung von diversen Elementen