Ionic Tutorial – 30m zur eignen App

Ionic Tutorial - Inhalt - 6 Schritte zur Hybriden App

1. Kapitel

Herausforderung & Ziel: Wir bauen eine Ionic App

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?

2. Kapitel

Konzept & Lösungsansatz: HTML, CSS + Angular

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

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
  • andorid / Ios - Builds der fertigen Ionic App
• 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?

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.

4. Kapitel

Coden: Jetzt wird's ernst.

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).

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

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>

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

  
  round color="secondary" (click)="openDetialPage()">Sag Hallo!

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

5. Kapitel

Erweiterungen: Wie kann ich die App erweitern?

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.

6. Kapitel

Fazit: Gratulation zu Deinem mutigen 1. Hybriden App

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