Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ionic
Code

Erste Schritte mit Ionic: Einführung

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Getting Started With Ionic.
Getting Started With Ionic: JavaScript Components

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Ionic ist ein beliebtes Framework für mobile Apps, mit dessen Hilfe Sie mithilfe von HTML, CSS und JavaScript schnell mobile mobile Apps erstellen können.  In dieser Serie erfahren Sie, wie Sie mit Ionic Ihre eigenen mobilen Apps einrichten und erstellen, indem Sie zusammen eine voll funktionsfähige mobile App erstellen.  Wir beginnen mit einer Einführung in Ionic und lernen, wie man mit dem Werkzeug anfängt.

In diesem Tutorial behandeln wir:

  • was Ionic ist und seine verschiedenen Komponenten
  • warum Sie sich für Ionic entscheiden würden
  • So richten Sie Ihren Computer für das Erstellen von Ionic-Hybrid-Apps ein
  • den Entwicklungsworkflow, vom Start bis zur Bereitstellung von Apps

1. Ionischer Stapel: Cordova, Angular, Ionic

Ionic besteht aus mehreren Technologien, die ordentlich gebündelt und gemeinsam verwaltet werden.  Ich denke an Ionic als einen Stapel verschiedener Frameworks.  Durch das Zusammenspiel dieser Technologien wird letztendlich die resultierende App erstellt und ein gutes Entwickler- und Benutzererlebnis geboten.

Cordova: Hybrid App Framework

Als Grundlage verwendet Ionic Cordova als Hybrid-App-Framework.  Im Wesentlichen kann eine Webanwendung in einer nativen App gebündelt werden, die auf einem Gerät installiert werden kann.  Es integriert eine Webansicht, eine isolierte Browserinstanz, auf der Ihre Webanwendungen ausgeführt werden.

Sie bietet auch eine API, mit der Sie mit dem Gerät selbst kommunizieren können, beispielsweise um GPS-Koordinaten abzufragen oder auf die Kamera zuzugreifen.  Viele dieser zusätzlichen Hardwarefunktionen werden über das Cordova-Plug-In-System aktiviert, sodass Sie nur die benötigten Funktionen installieren und verwenden müssen.  Ich stelle Ihnen in einem späteren Tutorial mehr Cordova vor.

Angular: Web Application Framework

Angular ist ein bekanntes JavaScript-Framework für die Erstellung von Webanwendungen, auf dem Ionic aufbaut. Angular stellt die Webanwendungslogik bereit, die zum Erstellen der tatsächlichen Anwendung verwendet wird.

Wenn Sie sich bereits damit auskennen, können Sie schnell die ionischen Funktionen nutzen.  Wenn Sie neu bei Angular sind, können Sie weiterlesen und beginnen, einige grundlegende Angular-Elemente zu erlernen.

Ich werde Angular nicht ausführlich behandeln. Daher empfehle ich Ihnen, sich etwas Zeit für das Erlernen der Grundlagen zu nehmen, indem Sie die Angular-Dokumentation lesen.

Ionic: Benutzeroberflächen-Framework

Die Hauptverkaufsfunktion von Ionic ist ein sauberer Satz von Komponenten für die Benutzeroberfläche, die für Mobilgeräte entwickelt wurden.  Wenn Sie eine native App erstellen, gibt es native SDKs, die Ihnen Schnittstellenkomponenten wie Registerkarten und Dialoge zur Verfügung stellen.

Ionic bietet einen ähnlichen Satz von Schnittstellenkomponenten für die Verwendung in Hybridanwendungen.  Ionic behauptet gern, es sei das fehlende SDK für Hybrid-Apps und erfüllt diese Rolle recht gut.  Darüber hinaus verfügt Ionic über eine Reihe weiterer wichtiger Merkmale, die es zu einer sehr überzeugenden Wahl machen.

2. Warum ionisch

Ionic ist mehr als nur ein Satz von Benutzeroberflächenkomponenten, es ist auch ein Satz von Entwicklertools und ein Ökosystem für das schnelle Erstellen hybrider mobiler Apps.  Ich möchte über die Gründe sprechen, warum Hybrid-Apps für Webentwickler eine gute Lösung sind, Details zu Ionic-Plattform und -Tooling und wann Ionic möglicherweise nicht die richtige Lösung ist.

Warum Hybrid gegen natives oder mobiles Web

Es gibt alte Debatten über die Qualität verschiedener Ansätze beim Erstellen von Apps.  Vor einigen Monaten schrieb ich einen ausführlichen Artikel über die drei Arten von mobilen Erlebnissen.  Ich empfehle Ihnen, es zu überprüfen, wenn Sie sich der Stärken und Schwächen dieser unterschiedlichen Ansätze auf modernen Geräten nicht sicher sind.

Hybrid-Apps sind der ideale Ort, um Webentwicklern die Möglichkeit zu geben, ihre bereits bekannten Fähigkeiten zu nutzen, um mobile Apps zu erstellen, die wie native Apps aussehen und sich anfühlen.

Große Werkzeug- und Ionenplattform

Nur wenige der verfügbaren mobilen Frameworks verfügen über Werkzeuge, die der Qualität der Werkzeuge von Ionic nahekommen.  Wir betrachten die wichtigsten Werkzeuge, die im Rest des Tutorials verfügbar sind, etwas genauer. Ich möchte jedoch auf einige der Funktionen eingehen, die im Laufe der Zeit wahrscheinlich nützlich sein werden.

Ionic CLI

Die CLI-Tools von Ionic sind erstklassig und bieten zahlreiche Funktionen, mit deren Hilfe Sie ein Projekt starten, eine Vorschau anzeigen und schließlich erstellen können.

Ionische Plattform

Ionic bietet eine Reihe von Funktionen (einige kostenlos und andere kostenpflichtig), die für die berufliche Entwicklung nützlich sind, z. B. App-Analysen, Push-Benachrichtigungen und Bereitstellungstools.

Ionischer Markt

Es gibt eine Reihe kostenloser und kostenpflichtiger Add-Ons für Ionic, die einfach in Ihre App integriert werden können.  Es gibt Themes, einzigartige Komponenten und andere Plugins.

Ionische Einschränkungen

Ionic passt nicht für jede mobile App.  Berücksichtigen Sie die folgenden Fälle, um zu entscheiden, ob Ionic für Ihr Projekt geeignet ist.

  • Ionic unterstützt nicht jede Plattform.  iOS und Android werden vollständig unterstützt, Ionic funktioniert jedoch in gewissem Maße mit anderen.  Es funktioniert auch am besten in moderneren Versionen.  Die Unterstützung alter (er) Geräte oder alter (er) Betriebssysteme kann die Leistung beeinträchtigen, normalerweise aufgrund schlechter Browserimplementierungen.
  • Ionic bietet keine echte native App.  Wenn für Ihre App eine intensive Integration in die native Plattform erforderlich ist, z. B. intensive Grafiken, kann Ionic möglicherweise nicht die gesamte erforderliche Leistung bereitstellen.  Dies liegt an der Notwendigkeit, die Hardware über Cordova mit der Webanwendung zu verbinden, was zu Verzögerungen führen kann.

Wenn Sie also keine App für alte Geräte erstellen und nicht viel auf Hardwareebene programmieren müssen, ist Ionic mehr als in der Lage, Ihren Benutzern ein qualitativ hochwertiges App-Erlebnis zu bieten.

3. Ionic und Cordova installieren

Ionic verfügt über eine fantastische CLI (Command Line Interface), mit deren Hilfe Sie Ihre Apps starten, erstellen und bereitstellen können.  Sie werden die CLI während der Entwicklung intensiv nutzen.  Ionic ist auch auf Cordova angewiesen, sodass Sie es indirekt verwenden.

Sie müssen Node.js installiert haben, um zu beginnen.  Wenn Sie dies nicht tun, nehmen Sie sich einen Moment Zeit, um es auf Ihrem System zu installieren.  Ich benutze Node.js 5.6 für dieses Tutorial und empfehle, auf der neuesten stabilen Version zu sein.

Die Installation von Ionic und Cordova ist so einfach wie die Installation von zwei globalen Knotenmodulen.  Wenn Sie dies schon einmal getan haben, sollte dies ziemlich vertraut aussehen.  Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus:

Dies kann einige Momente dauern, aber Sie sollten eine Erfolgsmeldung erhalten, die besagt, dass beide installiert sind.  Sie können dies überprüfen, indem Sie Folgendes ausführen, um die Ausgabe der Versionsnummern anzuzeigen.

Es sollte die Version von Ionic und Cordova ausgegeben werden.  In diesem Tutorial verwende ich Version 1.7.14 von Ionic und Version 6.0.0 von Cordova.

Die Ionic-CLI enthält eine Reihe von Funktionen, und Sie können jederzeit einen Überblick über die ionic help erhalten.  Sie können sich auch online die Dokumentation ansehen, um bei Bedarf weitere Unterstützung zu erhalten.

Andere Installationen

Ionic bündelt nicht alle Tools, die zum Erstellen einer App erforderlich sind. Es basiert auf einigen zusätzlichen SDKs und Software, die von Apple und / oder Google bereitgestellt werden.  Es ist gut, die von Cordova bereitgestellten Plattformhandbücher zu lesen und zu befolgen, um sie für jede Plattform festzulegen, mit der Sie arbeiten möchten.

Sie können dies zu einem späteren Zeitpunkt tun, aber Sie müssen die Plattform-Tools einrichten, bevor Sie eine Anwendung auf einem Simulator oder einem Gerät in der Vorschau anzeigen oder emulieren können.

4. Ionischer Entwicklungsfluss

Es gibt eine Reihe allgemeiner Schritte, die Sie ausführen müssen, wenn Sie eine ionische App entwickeln.  Diese Schritte enthalten entsprechende CLI-Befehle, um Ihnen zu helfen.  Schauen wir uns die primären Befehle an, die einen typischen Entwicklungsablauf für das Erstellen von ionischen Apps darstellen.

Schritt 1: Ein Projekt starten

Vorausgesetzt, Sie haben bereits eine grundlegende Idee, was Sie bauen möchten, besteht der erste Schritt darin, ein neues Projekt zu erstellen.  Ionische Projekte basieren auf Cordova und erfordern ein Gerüst, damit Cordova später Ihr Projekt verstehen kann.  Ionic verfügt über mehrere vorgefertigte Vorlagen, die Sie zum Generieren eines Starterprojekts verwenden können. 

Sie können jedoch auch eigene ionic start sample erstellen. Basierend auf dem von Ihnen angegebenen Namen (d. H. Beispiel) wird ein neuer Ordner im aktuellen Verzeichnis erstellt. Während der Befehl ausgeführt wird, lädt er die für das Projekt erforderlichen Dateien von GitHub herunter und initialisiert das Projekt für Sie.  Es verwendet das Standardprojekt, das eine Basis-App mit einer Basis-Tabs-Oberfläche hat.

Führen Sie cd sample aus, um in das neue Verzeichnis zu navigieren.  Wenn Sie das Verzeichnis überprüfen, werden Sie einige Dateien und Verzeichnisse feststellen.  Kümmern Sie sich im Moment nicht zu sehr um jede einzelne Datei.  Hier sind einige Dinge, mit denen Sie anfänglich arbeiten müssen.

  • cordova.xml:  Diese Datei enthält die Konfiguration für Cordova.
  • ionic.project:  Diese Datei enthält die Konfiguration für Ionic.
  • /plugins: Dieses Verzeichnis enthält alle installierten Cordova-Plugins.  Zunächst wird ein paar Standard-Plugins geladen, die Ionic für Sie vorinstalliert.
  • /platform: Dieses Verzeichnis enthält Assets für alle Plattformen, die Sie für Ihre App als Ziel konfiguriert haben, z. B. Android und iOS.  Ionic installiert möglicherweise standardmäßig eine Plattform für Sie.
  • /scss: Dieses Verzeichnis enthält die Quelldateien für die SASS-Stile für die Anwendung.  Sie können es anpassen, wie Sie später erfahren werden.
  • /www: Dieses Verzeichnis enthält die Webanwendungsdateien, die von Cordova geladen werden.  Alle Ihre JavaScript-, HTML- und CSS-Dateien sollten sich in diesem Verzeichnis befinden.

Für den Rest dieses Lernprogramms arbeiten wir mit dem soeben erstellten Projekt und erfahren, wie Sie die App entwickeln und in der Vorschau anzeigen.

Schritt 2: Entwickeln und Vorschau der App

Sie haben ein Projekt gestartet, jetzt möchten Sie mit der Entwicklung beginnen.  Während der ersten Entwicklung werden Sie wahrscheinlich eine Vorschau Ihrer Arbeit in einem Browser anzeigen.  Eine Ionische App ist eigentlich nur eine Webanwendung.  Ionic wird mit einem lokalen Entwicklungsserver geliefert, der Ihre App erstellt und bedient.

Führen Sie zum Starten des Entwicklungsservers einen ionic serve Dienst aus.  Sobald dies ausgeführt wird, wird eine Vorschau der App in Ihrem Standardbrowser geöffnet.  An diesem Punkt können Sie die Entwickler-Tools des Browsers verwenden, um die Anwendung zu überprüfen, auf Fehler zu überprüfen und andere Aufgaben zu erledigen, die Sie normalerweise beim Erstellen einer Webanwendung ausführen würden.

Der Server läuft weiterhin im Hintergrund und überwacht das Projekt auf Dateiänderungen.  Wenn Sie feststellen, dass Sie eine Datei bearbeitet und gespeichert haben, wird der Browser automatisch für Sie neu geladen.

Vorschau der in Chrome ausgeführten ionischen App, Verwenden der Geräteemulation in den Entwicklertools

Ich empfehle, Chrome als Browser zu verwenden, da er großartige Tools für Entwickler enthält.  Eine besonders nützliche Funktion ist die Möglichkeit, Geräteabmessungen zu emulieren, sodass Sie leicht sehen können, wie die App auf einem bestimmten Gerät aussieht.  Es ist kein echter Emulator, der die App wie ein echtes Gerät ausführt, sondern ahmt nur die Abmessungen der App nach.

Schritt 3: Fügen Sie eine Plattform hinzu

Cordova unterstützt viele verschiedene Arten von mobilen Geräten, die als Plattformen bezeichnet werden.  Sie müssen die Plattformen, auf die Sie zielen möchten, mit Ihrer App registrieren und die entsprechenden Projektdateien installieren.  Glücklicherweise wird dies meistens über die Ionic CLI verwaltet.  Ionic unterstützt die iOS- und Android-Plattformen vollständig.

Um eine Plattform hinzuzufügen, führen Sie die ionic platform add android hinzu.  Ersetzen Sie Android durch IOS, um stattdessen iOS hinzuzufügen.  Nach dem Hinzufügen sehen Sie einen neuen Ordner im Plattformverzeichnis Ihres Projekts.  Dieser Ordner enthält plattformspezifische Dateien.  Im Allgemeinen müssen Sie vermeiden, zu viele Änderungen an den Dateien in diesem Verzeichnis vorzunehmen.

Bei Problemen können Sie die Plattform entfernen und erneut hinzufügen.  Um eine Plattform zu entfernen, führen Sie die ionic platform remove android.

Schritt 4: Emulieren Sie die App

An einem bestimmten Punkt möchten Sie die Vorschau Ihrer App in einem echten Emulator starten.  Emulatoren sind im Wesentlichen Softwareversionen eines realen Geräts.  Dies ist sehr nützlich, um schnell zu testen, wie sich die App auf einem realen Gerät verhält.  Beachten Sie, dass Emulatoren nicht alle Funktionen eines physischen Geräts besitzen, da sie nur Software-Emulationsgeräte sind.

Möglicherweise funktioniert Ihr Code nicht wie erwartet, wenn Sie beispielsweise die Kontaktliste des Geräts verwenden.  Normalerweise funktionieren möglicherweise nur die Funktionen, die in die Hardware integriert werden, nicht wie erwartet, für die meisten Dinge sollte dies jedoch einwandfrei funktionieren.

Das Einrichten von Emulatoren kann eine Aufgabe sein, abhängig davon, welchen Computertyp Sie verwenden und was Sie testen müssen.  Das Emulieren eines iPhone kann nur auf einem Computer mit OS X erfolgen, Android kann jedoch auf jedem Betriebssystem emuliert werden.  Informationen zum Einrichten von Emulatoren finden Sie in den Plattform-Handbüchern, mit denen ich zuvor verlinkt habe.

Sobald Sie dies getan haben, können Sie mit dem ionic emulate android -c -l.  Ersetzen Sie Android wie zuvor durch iOS, wenn Sie iOS als Ziel verwenden.  Dadurch wird die App im Simulator erstellt, installiert und gestartet.  Dies kann einige Momente dauern. Daher möchten Sie möglicherweise einige der hilfreichen Funktionen für das Live-Nachladen wie zuvor im Browser verwenden.

Sie können das optionale -l-Flag verwenden, um die App live im Simulator neu zu laden (ohne Neuaufbau und Neuinstallation).  Dies ist großartig, solange Sie nichts an der Erstellung der App ändern (z. B. Cordova-Einstellungen).  Sie können auch das optionale -c-Flag verwenden, um alle Konsolennachrichten an das Terminalprotokoll weiterzuleiten. Ich benutze sie fast jedes Mal.

Schritt 5: Stellen Sie die App auf einem Gerät bereit

Die beste Möglichkeit, eine Vorschau der App anzuzeigen, ist die Installation und Ausführung auf einem Gerät.  Voraussetzung ist, dass Sie eine Plattform eingerichtet haben und ein Gerät mit Ihrem Computer verbunden ist.  Dazu ist eine Konfiguration erforderlich, die je nach Gerätetyp variiert.  Informationen zum Anschließen Ihres Geräts finden Sie in den obigen Plattformhandbüchern.

Sobald Sie ein angeschlossenes Gerät angeschlossen haben, ist es ziemlich einfach, die App über die Befehlszeile darauf auszuführen.  Verwenden Sie den ionic run android -c -l und Ionic zum Erstellen, Bereitstellen und Starten Ihrer App.  Wieder können Sie ios durch Android ersetzen.  Genau wie beim Befehl emulate können Sie die optionalen Flags -l und -c verwenden, um das Live-Laden und die Protokollierung der Konsole auf dem Terminal zu aktivieren.

Sobald sich die App auf Ihrem Gerät befindet, können Sie sie trennen und die App bleibt auf dem Gerät installiert.  Dies ist hilfreich, wenn Sie die App über einen längeren Zeitraum verwenden möchten, um zu testen, wie sich die App verhält, oder um sie anderen zu zeigen.

5. Was ist mit Ionic 2?

Ich werde häufig nach Ionic 2 gefragt und ob die Leute es verwenden sollten. Zum Zeitpunkt des Schreibens Anfang 2016 gibt es noch keine einfache Antwort.  Ich habe damit gearbeitet und einige Prototypen entwickelt, und ich kenne ein paar Leute, die Produktions-Apps damit erstellt haben, aber es ist noch nicht fertig.

Die gute Nachricht ist, dass das Lernen von Ionic 1 heute bedeutet, dass das Lernen von Ionic 2 relativ einfach ist.  Die meisten ionenspezifischen Dinge, die Sie in dieser Serie erfahren, sind zwischen den Versionen ziemlich konsistent.  Die größten Änderungen werden auftreten, weil Ionic 2 auf Angular 2 basiert.

Während Sie heute Ionic-2-Apps erstellen konnten, sind sie noch nicht offiziell veröffentlicht.  Sie verlieren keine Zeit, indem Sie jetzt Ionic 1 lernen.  Das Upgrade sollte nach der offiziellen Veröffentlichung von Ionic 2 relativ unkompliziert sein.

Zusammenfassung

In diesem Tutorial haben wir viel über Ionic berichtet.

  • Sie haben die Stärken und einige Schwächen von Ionic kennengelernt.
  • Sie haben Ihren Computer für die Erstellung ionischer Apps eingerichtet.
  • Sie haben Ihr erstes Projekt erstellt und im Browser eine Vorschau angezeigt.
  • Sie richten einen Emulator und / oder ein angeschlossenes Gerät für die Vorschau Ihrer App ein.

Im nächsten Teil dieser Serie beginnen Sie mit der Erstellung einer echten, funktionalen App, die die in diesem Tutorial beschriebenen Techniken verwendet.

Erstellen Sie eine ionische Vorlage und gewinnen Sie 1.000$

Wenn Sie bereits mit dem Ionic-Framework vertraut sind, möchten Sie vielleicht den Envato Most Wanted-Wettbewerb für Ionic-Vorlagen in Betracht ziehen.  Wie? Erstellen Sie eine einzigartige Ionic-Vorlage und reichen Sie diese bis zum 27. April 2016 an Envato Market ein.

Die fünf besten Vorlagen erhalten 1.000 US-Dollar.  Interessiert?  Weitere Informationen zu den Anforderungen und Richtlinien des Wettbewerbs finden Sie auf der Website des Wettbewerbs.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.