Ionic Tutorial – Hybride App Entwicklung

Ionic Beginner Tutorial Steffen Lippke Ultimate Guide

Heute schon geAPPt? Willkommen zu einem neuen Ionic Tutorial, eine Web-basierte App Entwicklung für Android, Ios und Windows Phone.

Mit Ionic kannst Du effizient und schnell mit 1x Code schreiben und für 3x Geräte 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

Wolltest Du nicht schon immer eine eigene App schreiben? Dann bist Du im Ionic Tutorial genau richtig. Wir bauen eine "freundliche, anständige" Ionic App, die Dich mit Deinem Lieblingsgruß begrüßt.

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
  • Zum besseren Verständnis wären HTML und/oder CSS Kenntnisse gut
  • Programme installieren und deinstallieren

Technische Voraussetzungen

  1. Installieren vom Java JDK - Die Entwicklungsumgebung für Android Studio
    JDK
    JDK
  2. Anmeldung bei Ionic Basic for Free: Damit wird er Build-Prozess vereinfacht
    Ionic Framework- Ionic Tutorial
    Ionic Framework - Ionic Tutorial
  3. Am Mac: Installation von XCode und von Android Studio - Nur zum BuildenXocde im Itunes Store
  4. Windows: Installieren von Android Studio - Nur zum Builden
  5. Android Studio Web Page

  6. Windows: Anlegen der Umgebungsvariablen - Wichtig, um einen funktionierenden Build Prozess anzustoßen
    Umgebungsvariablen
    Umgebungsvariablen
  7. Ein Editor. Ich liebe Visual Studio Code, da es für das Tool extra Erweiterungen gibt.
    VS Code
    VS Code

2. Kapitel

Konzept & Lösungsansatz: Etwas HTML, CSS, TypeScript und Angular

Konzept und Lösungsansatz
Konzept und Lösungsansatz

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

Das klingt im ersten Moment viel, aber wir brauchen nur ein paar Konzepte zu lernen. Weiter geht es mit dem Ionic Tutorial...

Was ist Ionic Framework und hybride Apps?

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

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

Das macht Ionic zu einem extrem erweiterbaren und gebrauchbaren Framework.

Ordner und Orientierung im 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
  • RESOURCES - Alle Android, Ios Builds, Screenshots und Icons
  • nodes_module - die Hintergund-Bibliotheken
  • assets - Bilder, Audio und Co für die App
  • Pipes/Providers/Themes - eigene "Erweiterungen"
  • andorid / Ios - Builds der fertigen Ionic App

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 unteres Tab Menu 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 - Datenspeicherungsstruktur

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 Aussehen unsere App definieren.

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 die Steuerungselemeten 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.

11 Kostenlose Exklusive App Dev Tipps

Deine Mail für Zugang zu praxisnahe App Entwicklung Tipps zu erhalten

  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 unser Ionic App.

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-Abfrage 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);
 }

Mit TypeScript werde auch die Daten von z. B. einer JSON Datei in die App geladen und über eine Variabel abgespeichert, ausgelesen und geändert.

Über sogenannte Provider wird über eine relativen oder absoluten Link Daten in die App geladen. Diese Abfrage wird mit  POST und GET Anweisung gesteuert.

4. Kapitel

Coden: Jetzt wird's ernst.

Coding und Umsetzung
Coding und Umsetzung

Ich hoffe, Du konntest alle Voraussetzungen installieren, um einen schnellen und guten Start mit Ionic zu haben. Jetzt wollen wir zusammen die ersten Code Zeilen für Ionic schreiben. (Wenn nicht schreibe in die Comments Deine Installationsprobleme)

Einrichtung eines Ionic-Projekts

Installiere Ionic mit dem nodes.js Paket Manager gloabal über Dein System über das Windows Terminal mit Adminbefehlen:

npm install -g ionic cordova

Dann navigiert mit cd zu dem Ordner, in dem Du das Projekt einrichten willst. Dann gebe folgendes in das Termainal 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 Devloper 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.

11 Kostenlose Exklusive App Dev Tipps

Deine Mail für Zugang zu praxisnahe App Entwicklung Tipps zu erhalten

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 eine 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 den Ü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 Komponeten 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 Teminalbefehle für das Ionic Framework

Bei Ionic Cordova musst Du viel mit dem Terminal arbeiten. Dabei erleichtert die LiveReload Funktion von Ionic unnötiges Neustarten des Browsers.

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.

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.

11 Kostenlose Exklusive App Dev Tipps

Deine Mail für Zugang zu praxisnahe App Entwicklung Tipps zu erhalten

  • 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

Sichere Dir den kompletten
Fundamental Ionic Course

Die kostenlosen Tutorials sind ein Ausschnitt
aus dem Fudamental Ionic Course by Steffen Lippke.

Schon 4832 erfolgreiche Absolventen

  • Code Downloads + umfangreiche Lösungen + Dateien für Grundlagen zum Coden
  • Visuelle Beschreibungen mit HD+ Screenshots und Hilfen
  • Steffen's Clean Code - Erweiterung - Verbesserungs - Tipps
 

100 h Kurslänge | 100 % Geld-Zurück-Garantie | Live-Support

 
1 Star2 Stars3 Stars4 Stars5 Stars (7 votes, average: 4,57 out of 5)
Loading...

Schreibe einen Kommentar

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