Überblick: Ionic-Framework für hybride, plattformübergreifende Anwendungen

Haben Sie sich jemals gefragt, wie es einigen Unternehmen gelingt, über mehrere Anwendungen hinweg und auf mehreren Plattformen (Web und Mobil) Konsistenz zu gewährleisten? Wie schaffen sie das?

Wenn Sie eine Struktur wie Ionic verwenden, ist das alles viel einfacher, als Sie es sich vorgestellt haben, denn damit kann man:

  • mobile Anwendungen mit Web-Funktionalitäten entwickeln;
  • eine konsistente Benutzererfahrung über mehrere Plattformen hinweg liefern;
  • eine einzige Technologie sowohl für Web- als auch für mobile Anwendungen verwenden;
  • doppelte Kodierung/Implementierung vermeiden;
  • die Lieferzeit reduzieren;
  • die Entwicklungskosten senken.

Wir bei Berg Software sind der Meinung, dass dies unabhängig von der Branche eine großartige Option für komplexe Unternehmen oder Produkte ist. Obwohl B2C-Nutzungen am meisten davon profitieren können, haben wir auch B2B-Nutzungsfälle gesehen, in denen Ionic erfolgreich eingesetzt wurde.

Ionic verwendet Web-Technologien (HTML, CSS und JavaScript), mit Integrationen für beliebte Technologien wie Angular und React. Da wir mit Angular bauen, ist es großartig, eine einzige Codebasis zu haben, die vollständig von Ionic unterstützt wird, um großartige Ergebnisse auf Mobil und Web oder auf Mobil und Desktop zu erzielen.

Um unseren Worten Taten folgen zu lassen, wollen wir nun einen Blick auf den Prozess der App-Entwicklung mit Ionic (anstatt auf eine bestimmte App-Entwicklung) werfen.

Wie funktioniert Ionic?

Schritt 0: Erforderliche Tools

Um fortzufahren, haben Sie wahrscheinlich (bereits) die richtige Toolbox bereitstehen:

  • Node.js und sein Paketmanager (npm) für die Interaktion mit dem Ionic-Ökosystem.
  • Einen Code-Editor mit Unterstützung für Javascript / TypeScript (z. B. Visual Studio Code)
  • Ein/e Befehlszeilenschnittstelle/-terminal (z. B. Visual Studio Code für das Befehlszeilen-Terminal).

Schritt 1: Installieren der Ionic-Tools

Mit der Ionic CLI können Ionic-Anwendungen mit einem einzigen Befehl erstellt, kopiert und auf Android-Simulatoren und -Geräten eingesetzt werden. Um die Ionic CLI zu installieren, führen Sie einfach folgende Schritte im Befehlszeilen-Terminal aus:
npm install -g @ionic/cli

Schritt 2: Ionic-App erstellen

2.1. Geben Sie den Befehl ein:

ionic start <name>
Dieser Befehl erstellt eine funktionierende Ionic-Anwendung. Sie installiert Abhängigkeiten für Sie und richtet Ihr Projekt ein. Das erste Argument ist der Name Ihrer Anwendung.

2.2. Wählen Sie ein Framework

Wie in der Abbildung unten zu sehen ist, muss nach Eingabe des Befehls „ionic start“ in einem Terminal das gewünschte Framework Angular oder React ausgewählt werden. In meinem Fall habe ich Angular gewählt. @ionic/angular kombiniert die Ionic-Kernerfahrung mit den Werkzeugen und APIs, die auf Angular-Entwickler zugeschnitten sind.
Berg Software - ionic framework - pick a framework 1200px

2.2. Wählen Sie eine Vorlage

Berg Software - ionic framework - pick a template 1200px

Schritt 3: (Standard-) Ionic-Components & Beginn der Entwicklung

Die Ionic-Anwendungen bestehen aus High-Level-Bausteinen, den so genannten Components, mit denen Sie die Benutzeroberfläche für Ihre Anwendung schnell erstellen können. Ionic ist mit einer Reihe von Components ausgestattet, darunter Karten, Listen und Registerkarten.

Hier sehen Sie ein Beispiel für HTML-Code, der einen Teil der Ionic-Components verwendet:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
 Tab 1
    </ion-title>
  </ion-toolbar>
</ion-header>
 
<ion-content [fullscreen]="true">
  <ion-list>
    <ion-item>
      <ion-label>Input</ion-label>
      <ion-input></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Toggle</ion-label>
      <ion-toggle slot="end"></ion-toggle>
    </ion-item>
    <ion-item>
      <ion-label>Radio</ion-label>
      <ion-radio slot="end"></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label>Checkbox</ion-label>
      <ion-checkbox slot="start"></ion-checkbox>
    </ion-item>
  </ion-list>
</ion-content>
Das ist die Webseite, die wir mit dem obigen HTML-Code erstellt haben:
Berg Software - ionic framework - resulting webpage 1200px
Ionic-Components sind in HTML, CSS und JavaScript geschrieben, was die Benutzerschnittstelle für viele Plattformen und Gerätetypen so schön und funktional wie möglich macht.

<ion-header> rstellt die oberste Navigations- und Werkzeugleiste dar, mit „Tab 1“ als Titel.
<ion-content> enthält die visuellen Aspekte der Anwendung.
<ion-list>
<ion-item> ist ein Element, das Text, Symbole, Avatare, Bilder, Eingaben und alle anderen nativen oder benutzerdefinierten Elemente enthalten kann.
<ion-input> ist für Eingaben von Textarten wie „Passwort“, „E-Mail“ gedacht.
<ion-label> ist ein Wrapper-Element, das in Kombination mit <ion-item,>, <ion-input,>usw. verwendet werden kann.
<ion-toggle> ist ein Knopf, der durch Drücken oder Streichen ein- oder ausgeschaltet werden kann.
<ion-checkbox> kann verwendet werden, um den Benutzer wissen zu lassen, dass es notwendig ist, eine binäre Entscheidung zu treffen.

Schritt 4: Ausführen Ihrer mit Ionic entwickelten

Anwendung Sie können einfach einen Entwicklungsserver einrichten, der in Ihrem Browser gestartet wird. Er überwacht Ihre Quelldateien auf Änderungen und lädt automatisch mit dem aktualisierten Build nach. Standardmäßig bootet der Ionic Server einen Entwicklungsserver auf localhost.
ionic serve [options]

Schritt 5: Bereitstellen auf iOS und Android

Mobile Anwendungen können entwickelt und dann über native App-Stores verteilt werden, um auf Geräten mit Cordova oder Capacitor installiert zu werden.

Cordova installieren:

npm install -g cordova

Kurze Auffrischung: Was ist Cordova? & Warum benutzt man es?

Cordova verpackt Ihre HTML-/JavaScript-App in einen nativen Container, der auf die Gerätefunktionen mehrerer Plattformen zugreifen kann. Diese Funktionen werden über eine einheitliche JavaScript-API bereitgestellt, sodass Sie problemlos einen Code schreiben können, der auf fast jedes heute auf dem Markt erhältliche Telefon oder Tablet ausgerichtet ist und in deren App-Stores veröffentlicht werden kann.” (Apache Cordova website)

Verwenden Sie Apache Cordova, um:

  • eine mobile Anwendung auf mehrere Plattformen zu erweitern, ohne ihre Funktionalitäten doppelt zu implementieren;
  • eine Webanwendung zu implementieren, die zur Verteilung in verschiedenen Anwendungsportalen gebündelt ist;
  • native Anwendungskomponenten mit einem WebView (d. h. einer hybriden Anwendung) zu mischen.

Native Plugins

Cordova bietet auch JavaScript-APIs an. Auf diese Weise kann die App auf eine Vielzahl von Gerätefunktionen zugreifen, z. B. auf die Kontaktdatenbank oder die Kamera oder den Standort des Geräts.

Für eines unserer Projekte, das Zugriff auf den aktuellen Standort des Geräts benötigte, haben wir das Geolocation-Plugin verwendet. Der Zugriff auf den Standort (oder andere Funktionen) des Geräts hängt von seiner Plattform ab. Der Platform-Dienst kann verwendet werden, um Informationen über Ihr aktuelles Gerät zu erhalten. Sobald die Geräteplattform eingestellt ist, rufen Sie eine Funktion auf, um auf den Standort zuzugreifen.

Berg Software - ionic framework - geolocation A 1000px
Berg Software - ionic framework - geolocation B 1000px
In der Abbildung unten sehen Sie den Inhalt der Methode getLocation(), in der ich auf den Standort des Geräts zugegriffen habe. Auf den Längen- und Breitengrad kann über die „coords“-Eigenschaft von „position“ zugegriffen werden.
Berg Software - ionic framework - geolocation C 1200px

Schritt 6: Ionic-App auf mobilen Geräten erstellen

Building Ionic Project

Cordova kann native Projekte programmgesteuert erstellen und bereitstellen.

Führen Sie Folgendes aus, um einen Live-Reload-Server zu starten, die App zu erstellen und bereitzustellen:

ionic cordova build <platform> [options]
Beispiele:
ionic cordova build android
ionic cordova build ios

Laufendes Ionic-Projekt

Mit cordova build können Sie Ihre App kompilieren und vorbereiten. Schließlich wird das native Dienstprogramm verwendet, um Ihre App auf einem Gerät auszuführen.

ionic cordova run [<platform>] [options]

Schritt 7: Debugging

Android-Anwendung

Sobald eine Anwendung auf einem Android-Gerät oder -Emulator ausgeführt wird, kann sie mit Chrome DevTools gedebuggt werden.

Chrome unterstützt Web-Entwickler-Tools für Android-Simulatoren und -Geräte. Gehen Sie in Chrome auf chrome://inspect, während der Simulator läuft oder ein Gerät an den Computer angeschlossen ist, und überprüfen Sie die Anwendung, die debuggt werden muss.

iOS-Anwendung

Sobald eine Anwendung auf einem iOS-Gerät oder Simulator ausgeführt wird, kann sie in Safari gedebuggt werden.

Safari bietet Web Inspector-Unterstützung für iOS-Simulatoren und -Geräte. Öffnen Sie das Menü „Develop“, wählen Sie den Simulator oder das Gerät und dann die Ionic-App, um den Web-Inspektor zu öffnen.

Wenn das Menü „Develop“ ausgeblendet ist, aktivieren Sie es in Safari » Preferences » Advanced » Show Develop menu in der Menüleiste.

Wenn die Anwendung nicht aufgelistet ist, muss der Web Inspector möglicherweise auf dem Gerät unter Settings » Safari » Advanced » Web Inspector aktiviert werden.

Die Nachteile von Ionic

Der Browser liefert nicht immer die richtigen Informationen über die Telefonumgebung, was das Testen erschwert. Es gibt so viele verschiedene Geräte wie Plattformen, und für genaueste Tests müssen so viele wie möglich abgedeckt werden.

Außerdem lassen sich die nativen Funktionalitäten nur schwer miteinander kombinieren. Es kann Plugin-Kompatibilitätsprobleme geben, d. h. Fehler, die schwer zu beheben und zu lösen sein können.

Schließlich sind Hybridanwendungen tendenziell langsamer als native. Da sich die mobilen Technologien verbessern, ist dies jedoch kein dauerhaftes Problem.

__

Ionic ist kein Hammer, mit dem man alle Nägel einschlagen kann. Alles in allem sehen wir jedoch viele Anwendungsfälle, bei denen die Vorteile die Nachteile überwiegen. Aufgrund seiner Geschwindigkeit und Bequemlichkeit ist es eine natürliche Wahl für Anwendungen, die mehrere Plattformen mit kurzen Bereitstellungszeiten und relativ weniger Ressourcen abdecken müssen. Wir bei Berg Software empfehlen es sehr.

__

Benutzen *Sie* Ionic? Wie & für welche Anwendungsfälle? Lassen Sie es uns wissen!

29 Jahre im Geschäft | 2700 Software-Projekte | 760 Kunden | 24 Länder

Wir verwandeln Ideen in Software. Wie lautet Ihre Idee?

Kontakt aufnehmen

6 + 10 =