Accentsconagua
Share
In diesem Artikel werfen wir einen Blick auf Ionic 2, die neueste Version des Ionic Cross-Plattform-Frameworks für mobile Apps. Für den Anfang rekapitulieren wir, was Ionic ist und wofür es verwendet wird. Dann werden wir uns mit Ionic 2 beschäftigen. Ich erzähle Ihnen, was neu ist und wie es sich von Ionic 1 unterscheidet, und ich helfe Ihnen bei der Entscheidung, ob Sie es bei Ihrem nächsten Projekt verwenden sollten oder nicht.
Ionic ist ein Framework zum Erstellen von Hybrid-Apps mit HTML, CSS und JavaScript. Es verfügt über eine Reihe von UI-Komponenten und -Funktionen, mit denen Sie voll funktionsfähige und attraktive mobile Apps erstellen können.
Ionic basiert auf dem Cordova-Stack. Sie können mit Ionic keine mobilen Apps erstellen, da nur der Teil der Benutzeroberfläche behandelt wird. Es muss mit Angular arbeiten, das die Anwendungslogik übernimmt, und mit Cordova, dem plattformübergreifenden App-Framework, mit dem Sie Ihre App in eine installierbare Datei kompilieren und in der Webansicht des mobilen Geräts ausführen können.
Mit Cordova und Ionic erstellte Apps können sowohl auf Android- als auch auf iOS-Geräten ausgeführt werden. Sie können auch Cordova-Plugins installieren, um native Funktionen bereitzustellen, z. B. den Zugriff auf die Kamera und das Arbeiten mit Bluetooth Low Energy-Geräten.
Weitere Informationen zu Cordova finden Sie in Envato Tuts. Hier finden Sie einige unserer Kurse und Tutorials+.
Ionic ist jedoch mehr als nur ein UI-Framework. Das Unternehmen Ionic bietet auch Dienste an, die das Ionic UI Framework unterstützen, darunter Ionic Creator, Ionic View und Ionic Cloud.
In diesem Abschnitt werden einige wichtige Änderungen an Ionic in Version 2 sowie die neuen Funktionen und Tools, die in Ionic 2 eingeführt wurden, betrachtet.
Ionic 1 wurde ausschließlich für mobile Apps entwickelt. Ionic 2 unterstützt aber auch progressive Web-Apps und Electron-Apps. Dies bedeutet, dass Sie jetzt nicht nur Ionic-Apps erstellen können, die in der Cordova-Umgebung ausgeführt werden, sondern auch progressive Web-Apps, die moderne Web-Funktionen verwenden, um Benutzern eine App-ähnliche Erfahrung zu bieten.
Sie können auch auf Electron abzielen, eine Plattform zum Erstellen von plattformübergreifenden Desktop-Apps mit HTML, CSS und JavaScript. Electron ist Cordova ziemlich ähnlich, aber für Desktop-Betriebssysteme wie Windows, Ubuntu oder Mac OS.
Ionic 2 verwendet jetzt Angular 2 für die Template- und Anwendungslogik. Dies bedeutet, dass Entwickler die neue Angular 2-Syntax erlernen müssen, bevor sie bei der Erstellung von Ionic 2-Apps produktiv werden können. Machen Sie sich jedoch keine Sorgen, denn die Konzepte sind immer noch dieselben wie in Angular 1. Es gibt auch Ressourcen wie ngMigrate, mit deren Hilfe Sie Ihre Angular 1-Fähigkeiten in Angular 2 umwandeln können.
Abgesehen von Angular 2 verwendet Ionic 2 auch TypeScript. Für diejenigen, die sich nicht damit auskennen, ist TypeScript eine Obermenge von JavaScript. Das bedeutet, dass Sie weiterhin Vanilla-JavaScript-Syntax zum Schreiben Ihrer Apps verwenden können. Wenn Sie die mit TypeScript bereitgestellten Funktionen verwenden möchten, z. B. ES6- und ES7-Syntax, statische Typisierung und intelligente Code-Vervollständigung, können Sie die TypeScript-spezifische Syntax verwenden. Es gibt Plugins, die Sie in Ihrem bevorzugten Texteditor oder Ihrer bevorzugten IDE installieren können, um die Vorteile der erweiterten Code-Completion-Funktionen von TypeScript zu nutzen.
Wie ich bereits erwähnt habe, hat sich die Schablonensyntax in Ionic 2 erheblich geändert, hauptsächlich aufgrund der Umstellung auf Angular 2. Sie stellen sogar fest, dass die neue Syntax einfacher und prägnanter ist. Hier sind einige Beispiele für die Ionic 1- und Ionic-2-Syntax nebeneinander:
Veranstaltungen anhören:
Verwenden eines Modells:
Durchlaufen eines Arrays und Anzeigen jedes Elements:
Wenn Sie die Ordnerstruktur eines Ionic 1-Projekts mit einem Ionic 2-Projekt vergleichen, werden Sie feststellen, dass die meisten Ordner, die Sie in einem Ionic 1-Projekt verwenden, immer noch in Ionic 2 vorhanden sind Plattform hat sich nicht wirklich geändert - Ionic 2 verwendet immer noch Cordova. Das einzige, was sich geändert hat, sind die Teile, die mit Ihren Quelldateien zu tun haben. Hier ist ein Screenshot der Ordnerstruktur einer Ionic 1-App:
Und hier ist eine App, die mit Ionic 2 erstellt wurde:
Wenn Sie genauer hinsehen, werden Sie feststellen, dass es jetzt eine gibt src Mappe. Dort befinden sich alle Quelldateien Ihres Projekts. Jedes Mal, wenn Sie Änderungen an einer Datei in diesem Verzeichnis vornehmen, wird die geänderte Datei kompiliert und in das Verzeichnis kopiert www / bauen Verzeichnis. Zuvor befanden sich die Quelldateien alle im wwwVerzeichnis, und Sie benötigen keinen zusätzlichen Übersetzungsschritt.
Die Verzeichnisstruktur ist auch organisierter. Wenn Sie das überprüfen src / seiten In diesem Verzeichnis können Sie sehen, dass jede Seite über einen eigenen Ordner verfügt. In jedem Ordner befinden sich die HTML-, CSS- und JavaScript-Dateien für diese bestimmte Seite.
Zuvor hatten Sie in Ionic 1 lediglich ein leeres Verzeichnis und hatten die Freiheit, Ihr Projekt nach Belieben zu strukturieren. Dies war jedoch mit dem Nachteil verbunden, dass Sie nicht dazu gezwungen wurden, die beste Vorgehensweise zu tun. Sie könnten faul werden und bei einer Struktur bleiben, die alle Dateien zusammenfasst, was für größere Teams schwieriger werden kann, die an komplexen Apps arbeiten.
Im Gegensatz zu der vorherigen Version von Ionic, die für alle Plattformen nur ein einziges Erscheinungsbild hatte, unterstützt Ionic 2 jetzt drei Modi: Material Design, iOS und Windows. Jetzt stimmt Ionic mit dem Erscheinungsbild der Plattform überein, auf der es bereitgestellt wird. Wenn Ihre App beispielsweise auf Android installiert ist, verwendet sie ein Styling und ein ähnliches Verhalten wie native Android-Apps.
In Ionic gibt es Unterstützung für das Theming, obwohl es zum Zeitpunkt des Schreibens dieses Artikels nur mit dem Standard-Light-Design geliefert wurde. Wenn Sie das Design optimieren möchten, können Sie das bearbeiten src / theme / variables.scss Datei.
Ionic 2 enthält auch neue Tools, die das Erstellen von mobilen Apps zum Vergnügen machen. Ich werde Ihnen in diesem Abschnitt einige zeigen.
Ionic 2 bietet jetzt einen Generator, mit dem Sie Seiten und Dienste für Ihre App erstellen können:
ionische g Seite KontaktSeite
Dadurch werden die folgenden Dateien in Ihrem erstellt App / Seiten Mappe:
Kontaktseite / Kontaktseite.html Kontaktseite / Kontaktseite.ts Kontaktseite / Kontaktseite.scss
Jede Datei enthält auch einen Zusatzcode:
Kontaktseite
Dies dient auch als Anleitung für neue Entwickler, damit sie die bewährten Methoden zur Strukturierung ihres Codes kennen. Hier ist der generierte TypeScript-Code, der die Logik für die obige Seite verarbeitet:
//contact-page.js import Component aus '@ angle / core'; NavController, NavParams aus 'ionic-angle' importieren; / * Generierte Klasse für die ContactPage-Seite. Weitere Informationen zu ionischen Seiten und zur Navigation finden Sie unter http://ionicframework.com/docs/v2/components/#navigation. * / @Component (Selector: 'page-contact-page', templateUrl: 'contact-page.html') Exportklasse ContactPagePage Konstruktor (public navCtrl: NavController, öffentliches navParams: NavParams) ionViewDidLoad () console .log ('ionViewDidLoad ContactPagePage'); Ionic 2 enthält jetzt ein Fehlerberichts-Tool für das Frontend. Das bedeutet, dass jedes Mal, wenn ein Fehler in Ihrem Code auftritt, Ionic ein modales Fenster direkt in der App-Vorschau öffnet. Dies macht es Entwicklern sehr leicht, Fehler zu ermitteln, die in der App auftreten.
Ionische App-Skripts sind eine Sammlung von Build-Skripten für Ionische Projekte. Zuvor verwendete Ionic Gulp für die Abwicklung des Build-Prozesses.
Ionic 2 enthält einige dieser Skripte, um die Durchführung allgemeiner Entwicklungsaufgaben zu erleichtern. Dazu gehört das Umsetzen des TypeScript-Codes nach ES5, das Testen der App zum Testen im Browser oder die Ausführung auf einem bestimmten Gerät.
Sie finden die Standardskripts in den Projektdateien package.json Datei:
"scripts": "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "ionic: build": "ionic-app-scripts build", "ionic: dienen ":" ionic-app-scripts dienen ",
Komponenten sind die UI-Bausteine in Ionic. Beispiele sind Schaltflächen, Karten, Listen und Eingabefelder. In Ionic 2 wurden viele neue Komponenten hinzugefügt. In diesem Abschnitt werden wir uns einige davon ansehen.
Wenn Sie möchten, dass Ihre App für Erstbenutzer eine Einführung bietet, können Sie mit der Komponente Folien einfach eine erstellen. Mit dieser Komponente können Sie seitenbasierte Layouts erstellen, durch die der Benutzer alles über Ihre App lesen kann.
Aktionsblätter sind Menüs, die vom unteren Bildschirmrand nach oben verschoben werden. Ein Aktionsblatt wird auf der obersten Ebene des Bildschirms angezeigt. Sie müssen es entweder durch Tippen auf Whitespace verwerfen oder eine Option aus dem Menü auswählen. Dies wird häufig für Bestätigungen verwendet, z. B. wenn Sie eine Datei auf Ihrem iOS-Gerät löschen.
Segmente sind wie Registerkarten. Sie dienen dazu, verwandte Inhalte so zu gruppieren, dass der Benutzer nur die Inhalte des aktuell ausgewählten Segments sehen kann. Segmente werden im Allgemeinen mit Listen verwendet, um nach verwandten Elementen zu filtern.
Toasts sind die subtile Version von Warnungen. Sie werden häufig verwendet, um den Benutzer darüber zu informieren, dass etwas passiert ist, für das keine Benutzeraktion erforderlich ist. Sie werden oft oben oder unten auf der Seite angezeigt, um den aktuell angezeigten Inhalt nicht zu beeinträchtigen. Sie verschwinden auch nach einer festgelegten Anzahl von Sekunden.
Eine Symbolleiste wird als Container für Informationen und Aktionen verwendet, die sich in der Kopf- oder Fußzeile der App befinden. Beispielsweise sind der Titel des aktuellen Bildschirms, Schaltflächen, Suchfelder und Segmente häufig in einer Symbolleiste enthalten.
Die DateTime-Komponente wird verwendet, um eine Benutzeroberfläche für die Datums- und Uhrzeitauswahl anzuzeigen. Die Benutzeroberfläche ähnelt der bei Verwendung von datetime-local Der einzige Unterschied besteht darin, dass diese Komponente mit einer benutzerfreundlichen JavaScript-API ausgestattet ist. Zuvor hatte Ionic keine Komponente für das Arbeiten mit Datum und Uhrzeit. Sie mussten entweder die native Datumsauswahl des Browsers verwenden oder ein Plugin installieren.
Floating Action Buttons (FABs) sind Schaltflächen, die in einem bestimmten Bereich des Bildschirms festgelegt sind. Wenn Sie die Google Mail-App jemals verwendet haben, ist die Schaltfläche zum Erstellen einer neuen Nachricht eine schwebende Aktionsschaltfläche. Sie sind nicht auf eine einzelne Aktion beschränkt, da sie erweitert werden können, wenn Sie auf andere schwebende Schaltflächen klicken.
Weitere Informationen zu den neuen Komponenten finden Sie in der Dokumentation der Komponenten.
Ionic 2 ist auch voll mit neuen Funktionen und Verbesserungen. Diese sind hauptsächlich auf den Übergang zu Angular 2 und TypeScript zurückzuführen.
Ein Vorteil der Umstellung auf Angular 2 ist das neue Animationssystem von Angular, das auf der Web-Animations-API basiert. Beachten Sie, dass die Web Animations-API nicht in allen Browsern unterstützt wird. Daher müssen Sie Crosswalk verwenden, um einen unterstützten Browser zusammen mit Ihrer App zu installieren. Der einzige Nachteil ist, dass die Installationsgröße größer wird. Eine andere Möglichkeit ist die Verwendung einer Polyfill.
Apps, die mit Ionic 2 erstellt wurden, sind schneller als diejenigen, die mit Ionic 1 erstellt wurden.
ion-img Komponente. Verwendung dieser Komponente anstelle des Standards img Mit diesem Element können Sie die HTTP-Anforderungen zum Abrufen der Bilder an einen Web Worker delegieren. Dies macht das Laden von Bildern schneller, insbesondere in großen Listen. Das ion-img Die Komponente übernimmt auch das verzögerte Laden, wodurch das Bild nur angefordert und dargestellt wird, sobald es im Ansichtsfenster des Benutzers sichtbar wird.Ionic Native ist das Äquivalent von ngCordova für Ionic 2. Beide fungieren als Wrapper für die Cordova-Plugins, um native Funktionen (z. B. Camera, GeoLocation) zu implementieren. Sie können Ionic Native sogar in Ihrer Ionic 1-App verwenden, wenn Sie möchten. Der Hauptunterschied besteht darin, dass Sie mit Ionic Native Ihren Code unter Verwendung der ES6-Funktionen und der TypeScript-Syntax schreiben können. Dies erleichtert die Arbeit mit Ionic 2, da bereits standardmäßig TypeScript verwendet wird. Hier ein Beispiel, wie Sie das Cordova Camera Plugin in ngCordova implementieren können:
$ cordovaCamera.getPicture (quality: 50). then (Funktion (imageData) var image = "data: image / jpeg; base64," + imageData;, function (err) );
Und so geht's mit Ionic Native:
Camera von 'ionic-native' importieren; Camera.getPicture (Optionen) .then ((imageData) => let base64Image = 'data: image / jpeg; base64,' + imageData;, (err) => );
Die Dokumentation hat sich stark verbessert. Mir gefällt besonders die Tatsache, dass es jetzt für jede Komponente auf jeder Plattform unterschiedliche Vorschauen gibt. Dies gibt Entwicklern eine wirklich gute Vorstellung davon, wie ihre App aussehen würde. All dies, ohne dass der Entwickler eine einzige Codezeile schreibt!
Zum Zeitpunkt des Schreibens dieses Artikels wurde Ionic 2 veröffentlicht. Dies bedeutet, dass es für Produktionsanwendungen bereit ist. Angesichts all der neuen Funktionen, Tools und Vorteile, die Angular 2 und TypeScript bieten, kann Ionic 2 nur vom Status Ihres Projekts verwendet werden.
Wenn Sie gerade erst ein neues Projekt beginnen, können Sie Ionic 1 weiterhin verwenden, wenn Sie und Ihre Teamkollegen nur mit Angular 1 vertraut sind und Ihr Projekt so schnell wie möglich abgeschlossen werden muss. Wenn Sie jedoch ausreichend Zeit für das Projekt erhalten haben, sollten Sie die Verwendung von Ionic 2 in Betracht ziehen. Es wird eine gewisse Lernkurve geben, und Sie werden auch auf einige Probleme stoßen, weil es nicht so gut getestet ist wie Ionic 1, aber es ist Alle Anstrengungen lohnen sich aufgrund der neuen Funktionen und Verbesserungen von Ionic 2.
Wenn Sie Ihr aktuelles Projekt bereits mit Ionic 1 gestartet haben, möchten Sie wahrscheinlich bei Ionic 1 bleiben und eine erneute Umschreibung vermeiden. Machen Sie sich nicht zu viele Sorgen über Support, Verbesserungen und Fehlerbehebungen für Ionic 1-Ionic-Entwickler, die sich seit langem für Ionic 1 einsetzen. Wie lange genau ist nicht klar. Zumindest wird es noch einige Jahre nach der Veröffentlichung der stabilen Version Ionic 2 unterstützt. Wir müssen aber auch bedenken, dass Ionic ein Open-Source-Projekt mit über 200 Mitwirkenden ist. Solange die Menschen es weiterhin nutzen, können wir immer Unterstützung von der Community erwarten.
Das ist es! In diesem Artikel haben Sie alles über Ionic 2 erfahren. Insbesondere haben Sie die wesentlichen Unterschiede zwischen Ionic 2 und seinem Vorgänger kennen gelernt. Wir haben uns auch die neuen Funktionen von Ionic 2 angesehen und ob Sie es für zukünftige Projekte verwenden sollten oder nicht. In einem zukünftigen Lernprogramm werden wir dieses Wissen mit einer Ionic 2-App in die Praxis umsetzen. Bleib dran!
Wenn Sie mehr über Ionic 2 erfahren möchten, lesen Sie bitte die folgenden Ressourcen:
Und natürlich haben wir einen umfassenden Ionic 2-Kurs, den Sie hier auf Envato Tuts verfolgen können+!
