📱
M335 - Mobile-Applikation realisieren
  • ▶️Intro
  • 🗓️Kursplanung & Organisation
  • 🛠️Infrastruktur und Tools
  • âť“FAQ
  • TAG 1
    • đź“–Native, Hybrid, Web
    • đź“–Frameworks
    • đź“–Angular
    • 🦸‍♂️Tour of Heroes
      • đź“–Introduction
      • đź“–Create a project
      • đź“–1. The hero editor
        • đź’ˇHinweise und Zusatzaufgaben zu Kapitel 1
      • đź“–2. Display a list
        • đź’ˇHinweise und Zusatzaufgaben zu Kapitel 2
      • đź“–3. Create a feature component
        • đź’ˇHinweise zu Kapitel 3
      • đź“–4. Add services
        • đź’ˇHinweise zu Kapitel 4
      • đź“–5. Navigation
        • đź’ˇHinweise und Zusatzaufgaben zu Kapitel 5
        • đź’ˇErgänzend zu Navigation
      • đź’ˇ Debugging
    • đź“–CSS / SASS / SCSS
  • Tag 2
  • đź“–Ionic
  • âť“Ionic Projekt erstellen
  • đź’ˇIonic Ăśbungen
  • đź“–Usability
  • đź“–Prototyping
  • đź“–UI Elements
  • 🛠️ Projektsetup
  • Tag 3
    • đź“–Native Grundlagen
    • đź“–Capacitor EinfĂĽhrung
    • đź’ˇApp auf Gerät laufen lassen
    • đź’ˇNative Komponente mit Capacitor verwenden
  • đź“–Persistenz
    • đź“–Online Persistenz
    • đź“–Offline Persistenz
  • Tag 4
    • đź“–Testing
      • âť“Testplan: Praxisbeispiel
      • âť“Testprotokoll: Praxisbeispiel
  • Tag 5
    • đź’ˇBuild, Veröffentlichung, Ausblick
Powered by GitBook
On this page

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 ein wertvolles Werkzeug fĂĽr die zukĂĽnftige Entwicklung mit Ionic. Wir wissen, dass der Anfang manchmal herausfordernd sein kann, aber tipp mal das folgende in dein Terminal ein:

ionic

Du siehst eine ausfĂĽhrliche Auflistung aller Commands, welche du mit Ionic verwenden kannst.

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 im Terminal 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

PreviousIonicNextIonic Ăśbungen

Last updated 2 months ago

âť“
  • Ionic Command Line Interface
  • Wie erstelle ich ein neues Projekt
  • Wie kann ich meine App im Browser simulieren
  • Generator