Ionic2: Leichter Einstieg – Tutorial

Ionic 2 ist ein sehr mächtiges Framework für die Erstellung von mobilen Applikationen durch Web-Komponenten. Ionic 2 basiert auf Angular 2. Dieses stellt ebenfalls ein JavaScript Framework dar für die Entwicklung von Single-Page Anwendungen. Der klare Vorteil von Ionic 2 basiert auf die Entwicklung also von hybriden Apps. Im Studium darf ich den Client für eine Lernanwendung entwickeln. Dafür setzen wir auf Ionic 2 auf. Ich möchte Fehler ungern zweimal machen und deshalb dient dieser Artikel auch für mich als eine Art Nachschlagewerk. Im Laufe der Entwicklung des Clients kann ich somit das ein oder andere nachschauen. Ein leichter Einstieg in Ionic 2 möchte ich Dir mit diesem Tutorial bieten.

Ionic 2 – Leichter Einstieg

Als erstes durfte ich in Software Engineering das Ionic 2 Tutorial von Bengt Weiße durcharbeiten. Dies gilt als Grundlage für die Einarbeitung von dem Web-Framework. Ich persönlich finde das Tutorial sehr gut geschrieben und bildet eine hervorragende Grundlage für das Erlernen von Ionic 2. Dennoch habe ich beim Durcharbeiten viele Fehler gemacht und bin auf Probleme gestoßen. Im Folgenden möchte ich Dir auf Grundlage des Tutorials einen leichten Einstieg geben und auf meine Fehler hinweisen.

Bevor ich direkt in das Tutorial einsteige, möchte ich Dir noch empfehlen, die Grundelemente von Ionic 2 kennenzulernen. Die Overview Seite von Ionic 2 ist atemberaubend und gibt einen guten Einblick in die Möglichkeiten des Frameworks. Einen Blick lohnt es sich auf jeden Fall.

Was bedeutet hybride App Entwicklung?

Man nutzt Webtechnologien, wie HTML5, CSS3 und JavaScript anstatt Objective-C, Swift oder Java für die Entwicklung von mobilen Apps. Dadurch schafft man eine gemeinsame Code-Basis für alle Plattformen. Den Zugriff auf native Schnittstellen des mobilen Gerätes erhält man mit Apache Cordova.

Wichtige Befehle in der Kommandozeile

Für die Installation von Ionic 2 wird der Ionic CLI benötigt. Außerdem installieren wir dazu noch Cordova. Der entsprechende Befehl dafür lautet wie folgt:

npm install -g ionic cordova

Es kann sein, dass ihr sudo npm install -g ionic cordova benötigt, da ihr Ionic 2 und Cordova global einrichtet.

Projekt anlegen

ionic start ionic2-pizza-service blank --v2 --ts
  • Projekt anlegen: ionic start
  • Name des Projekts: ionic2-pizza-service
  • Sauberes Projekt (keine vordefinierten Templates): blank
  • Basis der neuen Version: --v2
  • Verwendung von TypeScript: --ts

Um die App in Deinem Standardbrowser anzeigen zu lassen benötigst Du einen der folgenden Befehle. Die App startet jeweils unter localhost. Gerade, wenn Du die App beendest und wieder startest, musst Du darauf achten, dass der ursprügnliche Port wieder frei wird.

App unter ios, Android oder Windows Phone starten

ionic serve --lab

App in der Desktop Version starten

ionic serve

Ordnerstruktur

In dem Ordner src findet die Programmierung statt. Hier speichern wir alle relevanten Dateien ab. In dem Ordner www befinden sich die kompilierten Dateien.

Bild für die Ordnerstruktur in Ionic 2

Ionic2 Tutorial Ordnerstruktur

Ich habe mich nicht zu 100 % an die Ordnerstruktur aus dem Tutorial gehalten. Vor allem bei den import und export Anweisungen ist es wichtig, den genauen Pfad anzugeben, da sonst die Datei logischerweise nicht gefunden werden kann. Der unten aufgeführte Quellcode basiert somit auf diese Ordnerstruktur. Ich empfehle Dir, das Tutorial selber durchzuarbeiten. Du kannst als Anhangspunkt die unten aufgeführten Dateien nehmen. Mir hat das nämlich gefehlt. In dem ausgelieferten Projekt auf github ist jedenfalls nur das fertige Projekt hinterlegt. Gerade die Zwischenschritte können somit nicht genau nachgeforscht werden. Dafür dienen die unten aufgeführten Dateien.

app.component.ts

import { Component } from '@angular/core';
import { OrderComponent } from '../pages/order/order.component';
 
 
@Component({
  templateUrl: './app.component.html'
})
export class PizzaAppComponent {
  rootPage: any = OrderComponent;
}

app.component.html

<ion-menu [content]="content" persistent="true">
 
  <ion-toolbar>
    <ion-title>Menü</ion-title>
  </ion-toolbar>
 
  <ion-content>
  </ion-content>
 
</ion-menu>
 
<ion-nav [root]="rootPage" #content>
</ion-nav>

order.component.ts

import {Component, ViewChild} from '@angular/core';
import {Content} from 'ionic-angular';
import {NavController} from 'ionic-angular';
import {AboutComponent} from '../../about/index';
 
@Component({
  templateUrl: 'order.component.html'
})
 
export class OrderComponent{
  aboutComponent = AboutComponent;
  constructor (private nav: NavController){
 
  }
  openAbout() {
    this.nav.push(AboutComponent);
  }
  @ViewChild(Content) content : Content;
 
  scrollToTop(){
    this.content.scrollToTop();
  }
  scrollToBottom(){
    this.content.scrollToBottom();
  }
}

order.component.html

<ion-header>
  <ion-toolbar>
    <button menuToggle ion-button icon-only>
      <ion-icon name='menu'></ion-icon>
    </button>
   <ion-title>Pizza App</ion-title>
 </ion-toolbar>
</ion-header>
<ion-footer>
  <p>Das ist ein Test im Footer.</p>
</ion-footer>
<ion-content>
  <button ion-button [navPush]="aboutComponent">Über Uns</button>
  <div style="height: 2000px;">
    <b>Hello</b> World!
  </div>
  <b>on bottom</b>
  <button ion-button (click)="scrollToTop()">To Top</button>
</ion-content>

about.component.ts

import {Component} from '@angular/core';
 
@Component({
  templateUrl: 'about.component.html'
})
export class AboutComponent {
  constructor() {}
}

about.component.html

<ion-header>
  <ion-navbar>
    <ion-title>Über Uns</ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content padding>
  Wir sind Ihr Lieferdienst, wenn es um PIZZA* geht! Dafür stehen wir mit unserem Namen.
</ion-content>
 
<ion-footer>
  <ion-toolbar>
    <small>*ohne Ananas!</small>
  </ion-toolbar>
</ion-footer>

index.ts

export {AboutComponent} from './about.component';

app.module.ts

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { PizzaAppComponent } from './app.component';
import { OrderComponent } from '../pages/order/order.component';
import { AboutComponent } from '../about/index';
 
@NgModule({
  declarations: [
    PizzaAppComponent,
    OrderComponent,
    AboutComponent
  ],
  imports: [
    IonicModule.forRoot(PizzaAppComponent)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    PizzaAppComponent,
    OrderComponent,
    AboutComponent
  ],
  providers: []
})
export class AppModule {}

Erster Eindruck von Ionic 2

Obwohl ich schon Vorkenntnisse in Angular habe, habe ich mich am Anfang etwas schwer getan. Gerade wenn der Fehler an einer einfachen Thematik, wie beispielsweise die falsche Ordnerstruktur liegt, kann das sehr ärgerlich sein. Jedenfalls bin ich von den Möglichkeiten von Ionic 2 sehr beeindruckt und freue mich, weiter damit zu arbeiten. Mache Dir selber einen eigenen Eindruck in der Dokumentation von Ionic 2. Übung macht ja bekanntlich den Meister.

Schreibe einen Kommentar

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