Ionic Tutorial – 30m zur Eignen App

Ionic Beginner Tutorial Steffen Lippke Ultimate GuideWillst Du den Traum Deiner App erfüllen?

... für Android, IOS und Windows Phone - dann bist Du bei diesem Ionic Tutorial in Deutsch genau richtig.

Mit Ionic kannst Du effizient und schnell mit 1x Code schreiben und für 3x Gerätetypen entwickeln.

Bereit für Deine erste App?

Dieses Tutorial gibt Dir einen spannenden Einblick in die Grundlagen des Ionic Frameworks.

Ionic Tutorial - Inhalt - 6 Schritte zur Hybriden App

Herausforderung und Ziel

Coding und Umsetzung

Konzept und Lösungsansatz

Erweiterungen und Weiterführendes

Theorie einfach erklärt

Ziel und Fazit

1. Kapitel

Herausforderung & Ziel: Wir bauen eine Ionic App

Herausforderung und Ziel
Herausforderung und Ziel

Wir bauen eine "freundliche, anständige" Ionic App, die Dich mit Deinem Lieblingsgruß begrüßt.

"Mehr als ein Hello-World-Projekt - einfach erklärt"

Das Tutorial gibt Dir eine Einführung in das Entwickeln einer App mit dem Ionic Framework.

Mit Ionic entwickelst Du für IOS, Android und Windows Phone zu gleich. Hört sich gut an?

Deine "freundliche" App - Ionic Tutorial mit Praxis Beispielen

Fertige App Seite 1
Fertige App Seite 1

Voraussetzungen: Dein Wissen

  • Du solltest schon einmal etwas programmiert haben. e.B. Java, Python oder jede andere Sprache
  •  HTML und / oder CSS sind Kenntnisse vorteilhaft
  • Admin Rechte / Programme installieren und deinstallieren

Technische Voraussetzungen:  Notwendige Grundlage für Ionic

Für den Beginn reicht Node.js und ein Editor aus. Wenn Du Apps für Dein Geräte builden willst brauchst Du mehr.

  1. (Notwendig) Nodes Packet Managment:  node.js zur Installation von Ionic

    Node Packet Management
    Node Packet Management
  2. (Notwendig) Ein beliebigen Code-Editor / Windows Editor . Ich liebe Visual Studio Code, da es für das Tool extra Erweiterungen gibt.

    VS Code
    VS Code

Erweiterungen / für fortgeschritten Nutzer sinnvoll

  1. (Optional) Installieren vom Java JDK - die Entwicklungsumgebung für Android Studio (Für die Erstellung eine Android App)

    JDK
    JDK
  2. (Optional) Anmeldung bei Ionic Basic for Free: Damit wird er Build-Prozess vereinfacht (Konvertierung von Icons und Ladebildschirme) - ist nicht zwingend notwendig

    Ionic Framework- Ionic Tutorial
    Ionic Framework - Ionic Tutorial
  3. (Optional) nur für de Mac: Installation von XCode und von Android Studio (Nur zum Builden von Apple Apps)Xocde im Itunes Store
  4. (Optional) Windows: Installieren von Android Studio (Nur zum Builden von Android Apps)Android Studio Web Page
  5. (Optional) Windows: Anlegen der Umgebungsvariablen - Wichtig, um einen funktionierenden Build Prozess anzustoßen

    Umgebungsvariablen
    Umgebungsvariablen

2. Kapitel

Konzept & Lösungsansatz: HTML, CSS + Angular

Konzept und Lösungsansatz
Konzept und Lösungsansatz

Um eine universelle Ionic App zu erstellen, schreiben wir die Ionic App mit HTML, CSS, Angular als TypeScript.

Das klingt im ersten Moment viel, aber wir brauchen nur ein paar Konzepte zu lernen.

Was ist Ionic Framework und hybride Apps?

Stell Dir vor: Du nimmst etwas HTML, CSS und Angular und schreibst Code: Du baust eine Ionic App, die in dem Apache Cordova Container auf den 3 bekanntesten Plattformen IOS, Android und Windows Phone läuft.

Ressource: Angular Dokumentation

Ionic ist ein spezielles Framework mit dem Du in sehr kurzer Zeit stabile, performante starke Apps bauen kannst. Ionic läuft auf Deinem Smartphone in eine Art Browser, der durch Ionic Native auf Dein Gerät zugreifen kann: die Kamera, den Geschwindigkeitssensor, Push-Notifikation, Kompass ...

Das macht Ionic zu einem extrem erweiterbaren und gebrauchbarem Framework.

Ordner und Orientierung im Ionic Projekt

Ionic Stuktur
Ionic Stuktur

So findest Du Dich in der Ionic Struktur zu recht

  • src- wichtigster Ort zum Programmieren. Hier sind alle Ansichten der App gespeichert
  • resourcen - alle Android und IOS ferigen Apps, Screenshots und Icons
  • nodes_modules - die Hintergrund-Bibliotheken von JavaScript
  • assets - für alle Bilder, Audio und co, die in Deine App eingebunden werden sollen
  • Pipes / Providers / Themes - eigene "Erweiterungen"

Wichtigste Dateitypen im Ionic Projekt

  • .ts - TypeScript Datei - damit läuft die Seite dynamisch und tritt in Aktion
  • .html - das Design Template - Struktur und Aufbau der Seite
  • .scss ist eine Style Sheet Datei, in der Du Designanpassung wie bei normalen Webseiten vornehmen kannst

Wichtige, spezielle Dateien

  • ts - Einbindung der Module des gesamten Projekts z.B. Kamera Funktion - neue Ansichten
  • scss - Definition der Farben, Themas und Designs, die über die gesamte App gelten sollen
  • html - in dieser Datei wird das untere Tab Menü dargestellt. Hier kann man Icons, Text und Verlinkung zu den Seiten anpassen
  • html - die erste Ansicht, wenn man die App öffnet
  • xml - App-spezifische Einstellungen, Autoren-Kommentare, Einbindung von Screenshots und Icons
  • json - Datenabsicherungsstruktur

3. Kapitel

Theorie: Wie funktioniert Ionic?

Theorie einfach erklärt
Theorie einfach erklärt

In diesem Abschnitt des Ionic Tutorials klären wir zum besseren Verständnis, wie die Sprachen in dem Ionic Framework zusammenarbeiten.

Außerdem erfährst Du auf welchen Grundlagen Ionic aufbauen und wie es die verscheiden Sprachen für welche Aufgabe verwendet.

HTML. Das Gerüst.

In den HTML Dateien werden mit  den speziellen Ionic Tags das Aussehen der App definiert und die Verknüpfung der Buttons und Kontrollelemente angelegt. Die meisten Tags beginnen mit <ion- . Diese erstellen dieSteuerungselemente in der Grund-Farbpalette  mit den notwendigen Formen.

Jederzeit kannst Du hier Angular in die HTML Datei einbauen.

Diese sind direkt mit der TypeScript Datei verbunden. Schreibst Du {{example}} an einer beliebigen Stelle die HTML Datei, kannst Du den Wert im TypeScript definieren example:sting = "Hallo Welt"; . In der App wird dann nur "Hallo Welt" angezeigt.

{{category.money}}

In {{}} kannst Du auch Methodenaufrufe schrieben, die im TypeScript File näher beschreiben sind. Diese geben z.B. mit return einen String zurück und schreiben den Wert in die HTML Datei.

  categories: any;

Du kannst auch andere HTML Tag in der Datei nutzen und diese mit CSS gestalten. Nutze die zugehörige .scss Datei für die Gestaltung der Seite mit CSS. Das dient der Übersicht. Mit id und class kannst Du die Verbindung zu dem .scss Datei herstellen.

TypeScript. Der Motor.

Mit TypeScript, einer Weiterentwicklung von Microsoft, schaffen wir das Fachkonzept, die logische Struktur unserer App, die Buttons zum Leben erweckt. Wer Javascript schon kann, der ist hier klar im Vorteil, da Javascript in TypeScript gültig ist.

Let's begin: Grundlagen. Warm-up

Einfache Javascript Ausgabe nach Laden der App.

  ionViewDidLoad() {
    console.log('ionViewDidLoad DetailPage');
  }

if-Anweisung für Geldsorte:

  getCurrencySymbol(currency) {
    if (currency == "EUR") {
      return "€";
    } else {
      return "$";
    }
  }

Typischer Konstruktor, der Module einbindet und Parameter annimmt.

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private http: HttpClient,
  ) {
    this.expenseNumber = this.navParams.get("expenseNumber");
  }

Und nun eine Funktion, mit der man eine Seite "aufpoppen" lässt

  openEditPage() {
    this.navCtrl.push(EditPage);
 }

TypeScript lädt die Daten von z. B. einer JSON Datei in die App.

Provider laden über eine relativen oder absoluten Link Daten in die App.  POST sendet Formulare und GET fragt Daten ab.

4. Kapitel

Coden: Jetzt wird's ernst.

Coding und Umsetzung
Coding und Umsetzung

Ich hoffe, Du konntest npm und ionic  installieren, um einen schnellen und guten Start mit Ionic zu haben.

Jetzt wollen wir zusammen den ersten Code Zeilen für Ionic schreiben.

(Wenn nicht schreibe in die Koemmtare Deine Installationsprobleme)

Einrichtung eines Ionic-Projekts

Installiere Ionic mit dem nodes.js Paket Manager global über Dein System über das Windows Terminal mit Admin Befehlen:

npm install -g ionic cordova

Dann navigiert mit cd zu dem Ordner, in dem Du das Projekt einrichten willst. Dann gebe folgendes in das Terminal ein.

ionic start MyApp tabs

Wenn die Meldung "Would you like to integrate your new app with Cordova to target native iOS and Android?" wähle "y".

Die Einrichtung dauert einen Moment (1-10 Minuten je nach Internet und PC).

ionic Start
ionic Start

Bei der Meldung "Install the free Ionic Pro SDK and connect your app?" tippe "n"

- Navigiere in den neuen Projektordner:

cd myapp

Schauen wir uns mal das Ergebnis an und starten die rohe Ionic App in Deinem Browser (Vivaldi, Firefox, Chrome sind optimal).

ionic lab
Ionic lab
Ionic lab

Für das Entwickeln ist meistens ionic serve besser, da es schneller ist und mit den Developer Tools von Chrome besser nutzbar ist.

ionic serve

Wenn Du alles richtig gemacht hast, sieht es so aus wie oben im Bild.

Das Programmieren der hybriden App

Falls Du Probleme bei der Einrichtung hattest, schreibe es bitte in den Kommentar unten. Ich werde so schnell wie möglich auf Deine Frage reagieren.
Bei erfolgreicher Einrichtung des Projekts öffne die Datei home.html und säubere es so, dass wir mit arbeiten können:

<ion-header>
<ion-navbar>
<ion-title>Meine App</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<h2>Meine erste Ionic App</h2>
<p>
Das ist normaler HTML Text. Eine normale Webseite
</p>
<ion-input placeholder="Dein Begrüßung" [(ngModel)]="greeting"></ion-input>
<button ion-button round color="secondary" (click)="openDetialPage()">Sag Hallo!</button>
</ion-content>
öffne home
öffne home

Jetzt erstellen wir einen Button und ein Textfeld zur Texteingabe und einen erkennbaren Titel. Der Button ist abgerundet mit dem Attribut "round" und die Button-Farbe wird durch die Sekundärfarbe color="secondary" festgelegt.

Mit den ngModel speichern wir die Eingabe von der Begrüßung in greeting im Typscript File.

home.html

  
    Meine App

Meine erste Ionic App

Das ist normaler HTML Text. Eine normale Webseite

  
  

Wir hauchen den Button etwas Leben ein, in dem wir den Button um einen Funktionsaufruf ergänzen:

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { DetailPage } from '../detail/detail';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  greeting:any;

  constructor(public navCtrl: NavController) {

  }
  openDetialPage(){
    this.navCtrl.push(DetailPage,{greeting: this.greeting});
  }

}

Und wir erstellen mit ionic g page detail im Terminal eine neue Unterseite. Dadurch entsteht ein neuer Ordner mit dem gleichen Aufbau.

ionic g page detail

Öffne Details.ts und füge die Übergabefunktion durch navPrams hinzu und speichere diese in greetings ab.

details.ts 

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the DetailPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-detail',
  templateUrl: 'detail.html',
})
export class DetailPage {
  greeting:any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.greeting = this.navParams.get("greeting");
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad DetailPage');
  }

}

Nun musst Du noch die Detailseite zu app.modules.ts hinzufügen, da dort alle Komponenten eingetragen sind.

src/app/app.modules.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import { DetailPage } from '../pages/detail/detail';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    DetailPage
   ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    DetailPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Nun zur visuellen Ausgabe in detail.html über eine Angular mit {{}} deutlich erkennbar. Noch etwas CSS und schon begrüßt die App Dich.

pages/detail/detail.html

<!--
  Generated template for the DetailPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Begrüßung</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
Deine Ionic App sagt:<br><br>
<span style="text-align: center; font-size: 30px;">{{greeting}}</span>
</ion-content>

Das Ergebnis: Deine Ionic App "freundlich"

Und so sieht das Ergebnis aus:

Fertige App Seite 1

Fertige App Seite 1

Begrüßung
Begrüßung

 

5. Kapitel

Erweiterungen: Wie kann ich die App erweitern?

Erweiterungen und Weiterführendes
Erweiterungen und Weiterführendes

Hast Du noch nicht genug von dem Ionic Tutorial?

Oder möchtest Du noch mehr von Ionic kennenlernen?

Dann zeige ich Dir in diesem Abschnitt, wie Du Deine App und Dein Wissen ausbauen kannst.

Wichtigste Terminal Befehle für das Ionic Framework

Bei Ionic kannst  Du viel mit dem Terminal arbeiten. Das  Live Reload erleichert das  Entwickeln ernorm, da Du nicht immer neu starten musst.

Wenn Du ionic serve ausgeführt hast und zugleich die Datei bearbeitest, wird beim Speichern der Datei die Ionic Seite im Browser komplett neu geladen.

Das spart eine Menge Zeit.

Hier sind noch weitere interessante Befehle, die Du beim Programmieren mit Ionic gebrauchen könntest.

Ressource: Ionic CLI

ionic serve  // starte die Browser Ansicht
ionic lab // Starte die "schönere" Browersansicht
ionic gerneate page meineNeueSeite // Generiert Seite
ionig gnerate provider getMyData // neue Daten

6. Kapitel

Fazit: Gratulation zu Deinem mutigen 1. Hybriden App

Ziel und Fazit
Ziel und Fazit

Du hast es geschafft. Deine erste eigne Ionic App ist fertig. Nach all den Installationen und Code Zeilen, kannst Du Dir eine Pause gönnen.

Damit das Tutorial noch besser wird, freute es mich, wenn Du unten die Seite kommentierst, mit Sternen bewertest oder mit Deinen Freunden teilst.

  • Schreibt von Fehlern, die auftreten ...
  • Textstellen, die undeutlich geschildert wurden
  • Kritik mit Verbesserungsvorschlägen ...
  • Vorschläge für neue Post ...
  • Installationsprobleme ...
  • Eure Erweiterungen Euer ersten Ionic App ...

Danke. Ich freue mich auf Euer Feedback

Credits zu den verwendeten Bildern
Icons made by Vectors Market from www.flaticon.com is licensed by CC 3.0 BY

Kommentare 3

  • Guten Tag

    Danke für die gute Anleitung, alles scheint gut zu laufen, ausser wenn ich im Browser localhost:8100/ionic-lab eingebe, erscheint eine weisse Seite (Fehler: Verbindung fehlgeschlagen).

    Noch aufgefallen:
    – Unter MyApp/src habe ich eine Datei index.html und im Unterordner app app.compenent.html, aber nirgends eine home.html

    • Gebe in die Konsole zuerst ionic serve ein, um Ionic zu starten.

      Dann kannst Du die App im Browser unter localhost:8100/ aufrufen

  • Wie binde ich PHP ein?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.