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

Erstellen Sie eine mobile Anwendung zum Anzeigen Ihrer Website-RSS-Inhalte mit Ionic

by
Read Time:14 minsLanguages:

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

In diesem Tutorial werfen wir einen Blick auf die Erstellung einer mobilen Anwendung, die den RSS-Inhalt einer Website anzeigt. Wir konfigurieren die RSS-URL und die Anwendung lädt sie herunter, analysiert sie und zeigt die Beiträge aus dem RSS an.

Um die mobile Anwendung zu erstellen, verwenden wir das Ionic Framework v1 zusammen mit AngularJS. Um dieses Tutorial abzuschließen, benötigen Sie etwas Erfahrung mit JavaScript und HTML. Es hilft auch, wenn Sie schon einmal mit AngularJS gearbeitet haben.

Wenn Sie noch nie mit Ionic Framework gearbeitet haben, empfehle ich Ihnen, zumindest einen Blick in den Leitfaden Erste Schritte zu werfen, da er Ihnen einen schnellen Einblick in die Funktionsweise gibt.

Lass uns anfangen!

Einrichten des Ionic-Projekts

Ich gehe davon aus, dass Sie Node auf Ihrem System installiert haben und auch den npm (den Node-Paketmanager) haben. Die Installation des Ionic-Frameworks ist so einfach wie das Ausführen der folgenden Schritte:

Dadurch werden Cordova und Ionic auf Ihrem Computer installiert.

Cordova ist die Kerntechnologie von Ionic und ermöglicht es uns im Grunde, einen eingebetteten Browser in unsere mobile Anwendung zu haben. In diesem Browser können wir unseren gesamten HTML- und JavaScript-Code ausführen. Dies wird als hybride mobile Anwendung bezeichnet, da die Anwendung keinen nativen Code ausführt, sondern innerhalb des Browsers ausgeführt wird.

Neben Cordova fügt Ionic die Möglichkeit hinzu, AngularJS zum Schreiben unseres Codes zu verwenden, und fügt auch ein sehr schönes UI-Framework hinzu.

Wenn Ionic installiert ist, können wir unser Projekt mit der Ionic CLI erstellen, einem sehr nützlichen Befehlszeilentool. Ionic bietet drei Standard-Projektvorlagen, die als Ausgangspunkt verwendet werden können:

  • blank: Wie der Name schon sagt, ist es ein leeres Projekt mit nur den minimal notwendigen Komponenten.
  • Registerkarten: eine Anwendung, die Registerkarten zum Navigieren durch ihre Bildschirme verwendet.
  • Seitenmenü: eine Anwendung, die ein standardmäßiges mobiles Seitenmenü für die Navigation verwendet.

Für dieses Tutorial verwenden wir die Registerkarten-Anwendungsvorlage. Um unser Projekt zu starten, führen wir Folgendes aus:

Ionic lädt alle benötigten Komponenten herunter und installiert sie und erstellt den Projektordner namens myWebsiteOnMobile. Gehen Sie in das Projektverzeichnis, indem Sie Folgendes ausführen:

Da es sich bei unserer Anwendung um eine hybride mobile Anwendung handelt, haben wir den Vorteil, die Anwendung in einem Browser ausführen zu können. Um dies zu tun, bietet Ionic einen ordentlichen integrierten Webserver, der unsere Anwendung wie folgt ausführt:

Dies öffnet einen Browser mit unserer geladenen Anwendung und sieht so aus:

The Ionic homescreenThe Ionic homescreenThe Ionic homescreen

Um den Server zu stoppen, verwenden Sie Strg-C auf Ihrem Befehlszeilenbildschirm. Um eine bessere Vorstellung davon zu bekommen, wie die Anwendung auf einem Mobiltelefon aussieht, können Sie Folgendes verwenden:

Dadurch wird die Anwendung im Browser geöffnet und eine iOS- und eine Android-Vorschau der App nebeneinander angezeigt.

The iOS and Android PreviewThe iOS and Android PreviewThe iOS and Android Preview

Die Registerkarten Ionic-Anwendungsvorlage hat drei Registerkarten: Status, Chats und Konto. In den nächsten Schritten werden wir die Anwendung an unsere Bedürfnisse anpassen.

So passen Sie die Standardanwendung für die Ionen-Tabs-Vorlage an

Für unsere Anwendung haben wir zwei Registerkarten:

  • Neueste Beiträge: Zeigt eine Liste der neuesten Beiträge an, die aus dem RSS-Feed abgerufen wurden.
  • Einstellungen: Hier kann der Benutzer verschiedene Aspekte der Anwendung konfigurieren.

Auf der Registerkarte Neueste Beiträge kann der Benutzer auf einen der neuesten Beiträge klicken und weitere Informationen über den Beitrag anzeigen, mit der Möglichkeit, den Beitrag in einem externen Browser zu öffnen.

Da unsere Registerkarte Neueste Beiträge ähnlich der Registerkarte Chats ist, die von der Vorlage bereitgestellt wird, werden wir diese zusammen mit der Registerkarte Konto wiederverwenden, die zu unserer Registerkarte Einstellungen wird. Wir können alle Änderungen bei laufendem Ionic-Webserver vornehmen und Ionic wird die App für uns neu laden. Dies ist eine sehr nette Funktion, die die Entwicklung beschleunigt.

Wie bereits erwähnt, verwendet Ionic AngularJS, und die gesamte Anwendung ist eigentlich ein AngularJS-Modul. Das Modul ist in www/js/app.js definiert, hier werden auch die Pfade oder Routen der Anwendung definiert. Jeder Bildschirm der Anwendung hat eine entsprechende Route.

Lassen Sie uns die Registerkarte Status entfernen, da wir sie nicht benötigen. Dazu müssen wir zuerst den Standardbildschirm (oder die Route) unserer Anwendung ändern, um auf den Chats-Bildschirm zu verweisen, der unser Hauptbildschirm wird. Der Standardbildschirm wird über $urlRouterProvider.otherwise() konfiguriert, also ändern wir das in:

Wenn wir jetzt http://localhost:8100 in unserem Browser neu laden, sehen wir, dass die Registerkarte Chats standardmäßig geladen wird.

Um die Registerkarte Status zu entfernen, müssen wir die Datei www/templates/tabs.html bearbeiten, die die Vorlage für die Registerkartenkomponente enthält. Wir entfernen das Element:

Beim Speichern sehen wir, dass die Anwendung jetzt nur noch zwei Registerkarten hat: Chats und Konto.

Während wir in der Datei www/templates/tabs.html feststellen, dass es einige HTML-Tags gibt, die kein Standard-HTML sind, wie ion-tabs, ion-tab und ion-nav-view. Dies sind eigentlich AngularJS-Direktiven, die vom Ionic Framework definiert sind. Die Direktiven sind Tags, die die Funktionalität dahinter packen, und sie sind sehr bequeme Möglichkeiten, strukturierteren und prägnanteren Code zu schreiben.

In unserem Fall ist die ion-tabs-Direktive die tabs-Komponente, die für jede Registerkarte eine ion-tab-Direktive erfordert.

Lassen Sie uns unsere Registerkarten von Chat und Konto auf unsere erforderlichen Namen ändern Neueste Beiträge und Einstellungen. Dazu ändern wir mehrere Dinge in der Datei www/templates/tabs.html:

  • title-Attribut der ion-tab-Elemente, das den Text auf dem Tab-Button bestimmt. Wir werden dies in Neueste Beiträge bzw. Einstellungen ändern.
  • href-Attribut der ion-tab-Elemente, das auf die Routen- oder Bildschirm-URL zeigt. Wir ändern diese in #/tab/latest-posts und #/tab/settings.
  • name-Attribut der ion-nav-view-Elemente zu tab-latest-posts und tab-settings. Dies sind die Bezeichner für die Ansichtsvorlagen, die für die Bildschirme Neueste Beiträge und Einstellungen verwendet werden.

Als Ergebnis sollte www/templates/tabs.html so aussehen:

Nachdem wir diese Änderungen vorgenommen haben, werden einige Fehler angezeigt. Dies liegt daran, dass wir auch unsere Routen anpassen müssen, um die neuen Identifikatoren zu verwenden, die wir verwendet haben. In www/js/app.js müssen wir die Status-IDs, die View-IDs und die url für jede Route gemäß den obigen Einstellungen ändern.

Für jede Route (oder jeden Bildschirm) ist ein Controller definiert. Dies ist ein grundlegendes MVC-Entwurfsmuster (Model-View-Controller). Controller werden in der Datei www/js/controllers.js definiert. Aus Konsistenzgründen werden wir die Namen der Controller sowohl in www/js/app.js als auch in www/js/controller.js ändern:

  • ChatsCtrl wird zu LatestPostsCtrl.
  • ChatDetailCtrl wird zu PostDetailCtrl.
  • AccountCtrl wird zu SettingsCtrl.

Außerdem haben wir für jede Route eine Ansichtsvorlage definiert, also ändern wir sie auch. Bearbeiten Sie www/js/app.js und ändern Sie templateUrl wie folgt:

  • Ändern Sie tab-chats.html in tab-latest-posts.html. Benennen Sie auch die Datei www/templates/tab-chats.html in www/templates/tab-latest-posts.html um.
  • Ändern Sie chat-detail.html in post-detail.html. Benennen Sie auch die Datei www/templates/chat-detail.html in www/templates/post-detail.html um.
  • Ändern Sie tab-account.html in tab-settings.html. Benennen Sie auch die Datei www/templates/tab-account.html in www/templates/tab-settings.html um.
  • Ändern Sie schließlich die Ansicht, die standardmäßig geladen wird, auf latest-posts, indem Sie $urlRouterProvider.otherwise('/tab/latest-posts') verwenden.

Wenn alles gut gelaufen ist, sollte die Datei www/js/app.js so aussehen:

Und unsere aufgeräumte Datei www/js/controllers.js sieht so aus:

Nachdem wir die App nun an unsere Bedürfnisse angepasst haben, gehen wir zum nächsten Teil über und fügen einige Funktionen hinzu.

So rufen Sie einen RSS-Feed mit Ionic ab

Um die Liste der neuesten Beiträge anzuzeigen, muss unsere Anwendung den RSS-Feed von einer URL abrufen. Als bewährte Methode empfiehlt es sich, diese Art von Funktionalität in der Serviceschicht der Anwendung zu verankern. Auf diese Weise können wir es einfacher in unserem Controller verwenden und dann dem Benutzer über eine Ansicht präsentieren.

Der RSS-Dienst verwendet die YQL-REST-API von Yahoo, um das RSS unserer Website abzurufen. Um die REST-API aufzurufen, verwenden wir den von AngularJS angebotenen $http-Provider.

Ionische Dienste werden normalerweise in der Datei www/js/services.js definiert, also werden wir auch unsere dort ablegen. Der Code wird wie folgt aussehen:

Wir deklarieren den Dienst mit der Methode service() von AngularJS. Wir fügen dann das $http-Modul von Angular ein, damit wir es in unserem Service aufrufen können.

Die Variable self ist eine Referenz auf den RSS-Dienst, damit wir sie aus den Methoden des Dienstes heraus aufrufen können. Die Hauptmethode des Dienstes ist die Methode download(), die die Feed-Informationen herunterlädt und verarbeitet. Es gibt zwei Hauptformate für Website-Feeds: RSS und ATOM. Für unsere Bewerbung haben wir den Feed der Tutorials von Tuts+ https://tutorials.tutsplus.com/posts.atom verwendet, der im ATOM-Format vorliegt, aber der Vollständigkeit halber haben wir auch das RSS-Format berücksichtigt.

Die Methode download() ruft die YQL-API auf und analysiert die Ergebnisse mit den Methoden parseAtom() oder parseRSS(), je nach Art des Feeds. Die Idee hier ist, das gleiche Ausgabeformat zu haben, das über den Callback next() weitergereicht wird. Wenn der RSS-Dienst eingerichtet ist, können wir zum Controller übergehen.

Verbinden des RSS-Dienstes mit dem Controller für die neuesten Beiträge

In unserer Datei www/js/controllers.js müssen wir die RSS-Daten laden und an unsere Ansicht übergeben. Dazu müssen wir nur unseren LatestPostsCtrl-Controller wie folgt ändern:

Mit dem Dependency Injection-Mechanismus von Angular müssen wir nur die Variablen $scope und RSS als Methodenparameter angeben, und es wird wissen, wie diese Module geladen werden. Das $scope-Modul ermöglicht es uns, Variablen auf dem Modell zu setzen, das an die Ansicht gebunden ist. Alle im Bereich eingestellten Werte können dann abgerufen und in der dem Controller zugeordneten Ansicht angezeigt werden.

Wenn die Ansicht für die neuesten Beiträge geladen wird, ruft sie den LatestPostsCtrl-Controller auf, der wiederum den RSS-Dienst zum Herunterladen der Feed-Informationen verwendet. Die Ergebnisse werden geparst und als Array mit der Variablen posts zurückgegeben, die wir im aktuellen Bereich speichern.

Nachdem das alles erledigt ist, können wir jetzt zum Ansichtsteil übergehen und die Liste der aus dem Feed abgerufenen Beiträge anzeigen.

Verknüpfung der Ansicht der neuesten Beiträge mit den Feed-Daten

Wir müssen jetzt unsere Ansicht für die neuesten Beiträge ändern. Wenn Sie sich erinnern, wird dies in der Datei www/js/app.js über das Attribut templateUrl konfiguriert und verweist auf die Datei www/templates/tab-latest-posts.html.

Was wir tun möchten, ist die Liste der Feeds anzuzeigen. Da die Feed-Informationen HTML enthalten können und dies nur die Liste der neuesten Posts überfüllt, benötigen wir etwas, um den Text ohne die HTML-Tags aus dem Inhalt eines Posts zu extrahieren. Am einfachsten erreichen Sie dies, indem Sie einen AngularJS-Filter definieren, der die HTML-Tags aus dem Text entfernt. Lassen Sie uns das in www/js/services.js tun, indem wir Folgendes hinzufügen:

Nein, zurück zu unserer Ansicht in der Datei www/templates/tab-latest-posts.html, ändern wir sie so, dass sie so aussieht:

Wir verwenden die UI-Komponente der Ionic-Liste zusammen mit der ng-repeat-Direktive von Angular, die die im Bereich unseres Controllers festgelegten posts durchläuft. Für jeden Beitragseintrag haben wir ein Listenelement mit seinem Titel und der Beschreibung, bei der die HTML-Tags mithilfe des htmlToPlaintext-Filters entfernt wurden. Beachten Sie auch, dass das Klicken auf einen Beitrag uns zum Detail des Beitrags führen sollte, da das href-Attribut auf #/tab/latest-posts/{{post.id}} gesetzt ist. Das funktioniert noch nicht, aber darum kümmern wir uns im nächsten Abschnitt.

Wenn wir nun die Anwendung mit ionic serve --lab ausführen, sollten wir etwa Folgendes erhalten:

Viewing Latest PostsViewing Latest PostsViewing Latest Posts

Anzeigen der Details eines Beitrags

Wenn Sie auf einen Beitrag in der Liste klicken, gelangen wir zum Bildschirm mit den Beitragsdetails der Anwendung. Da jeder Bildschirm der Anwendung seinen eigenen Controller und damit seinen eigenen Bereich hat, können wir nicht auf die Liste der Beiträge zugreifen, um einen bestimmten Beitrag anzuzeigen. Wir können den RSS-Dienst erneut aufrufen, aber das wäre ineffizient.

Um dieses Problem zu lösen, können wir die $rootScope-Direktive von Angular verwenden. Dies verweist auf einen Bereich, der alle Controller in der Anwendung überspannt. Lassen Sie uns unsere LatestPostCtrl ändern, um die Posts im $rootScope festzulegen, und dann nach dem spezifischen Post suchen, auf den der Benutzer in der PostDetailCtrl geklickt hat. Der resultierende Code in www/js/controllers.js sieht so aus:

Wir injizierten einfach $rootScope in beide Controller und benutzten es, um posts zwischen den beiden Controllern zu übergeben. Bitte beachten Sie, dass wir in unserer Ansicht für die neuesten Beiträge keine Änderungen vornehmen müssen, da $rootScope und $scope beide auf die gleiche Weise von der Ansicht aus zugänglich sind.

Innerhalb des PostDetailCtrl-Controllers suchen wir einfach nach dem Beitrag mit der ID, die in dem vom Benutzer angeklickten Link übergeben wurde. Dazu vergleichen wir jede Post-ID mit dem Wert in der URL, die über die Variable $stateParams.postId übergeben wird. Wenn wir eine Übereinstimmung finden, setzen wir den Posten auf den Bereich, damit wir ihn aus unserer Sicht verwenden können.

Passen wir nun unsere Beitragsdetailansicht www/templates/post-detail.html wie folgt an:

Das haben wir in der Ansicht gemacht:

  • Wir haben den Titel des Beitrags in der Kopfzeile des Bildschirms platziert.
  • In der Kopfzeile rechts haben wir einen "Öffnen"-Button platziert. Diese Schaltfläche öffnet den Post-Link aufgrund des Attributs target="_system" in einem externen Browser. Wir müssen dies tun, da die Anwendung aufgrund von Cordova bereits in einem Browser ausgeführt wird. Wenn wir dieses Attribut nicht gesetzt hätten, wäre der Beitrag im selben Browser wie die Anwendung geöffnet worden, und wir hätten dann keine Möglichkeit, zur Anwendung zurückzukehren.
  • Wir zeigen die Beschreibung des Beitrags als HTML an, indem wir die ng-bind-html-Direktive von Angular verwenden.

Beim Ausführen der Anwendung ist mir aufgefallen, dass einige Bilder vom Bildschirm fallen, wenn die Beitragsbeschreibung Bilder enthält. Dies kann bei anderen HTML-Elementen wie Videos der Fall sein. Wir können dies leicht beheben, indem wir die folgende CSS-Regel in www/css/style.css hinzufügen.

Wenn wir nun einen Blick auf die Bewerbung werfen und auf einen der Beiträge klicken, sollten wir in etwa so aussehen:

Seeing posts for Tuts articlesSeeing posts for Tuts articlesSeeing posts for Tuts articles

Und unsere Bewerbung ist fast fertig. Im nächsten Abschnitt werfen wir einen Blick auf die Implementierung des Einstellungsbildschirms.

Hinzufügen von Einstellungen für unsere ionische Anwendung

Für unseren Einstellungsbildschirm werden wir eine Möglichkeit implementieren, um anzugeben, wie viele Beiträge auf dem Hauptbildschirm der Anwendung angezeigt werden sollen. Wir speichern diese Einstellung im localStorage-Speicher, der beim Schließen der Anwendung nicht gelöscht wird. Lassen Sie uns die Controller-Datei www/js/controllers.js bearbeiten und den SettingsCtrl-Controller wie folgt ändern:

Außerdem müssen wir den Einstellungsbildschirm in www/templates/tab-settings.html wie folgt ändern:

Der Controller ruft die Einstellung myWebsiteOnMobile.maxPosts vom localStorage ab. Wenn es nicht existiert, ist es null, und wir gehen davon aus, dass es keine Begrenzung für die maximale Anzahl von Beiträgen gibt.

Wir rufen die Methode $scope.$watch() auf, um Änderungen der Variablen settings.maxPosts zu überwachen, die an das Radio Control im Einstellungsbildschirm gebunden ist.

Wenn all dies vorhanden ist, wird jedes Mal, wenn wir die maximale Anzahl von Posts auf dem Einstellungsbildschirm ändern, die Einstellung im localStorage gespeichert und von dort beim Neustart der Anwendung abgerufen.

Jetzt nutzen wir diese Einstellung. Dies ist so einfach wie das Hinzufügen in LatestPostsCtrl von www/js/controllers.js:

Und Hinzufügen einer Anweisung im Bildschirm für die neuesten Beiträge www/templates/tab-latest-posts.html:

Beachten Sie den Filter limitTo:maxPosts Angular. Dadurch wird die Anzahl der angezeigten Beiträge auf die Anzahl aus dem localStorage beschränkt. Standardmäßig ist dies null, wodurch alle vom RSS-Dienst abgerufenen Feeds angezeigt werden.

Herzliche Glückwünsche! Wir haben jetzt eine voll funktionsfähige Anwendung, die einen RSS-Feed anzeigt.

Abschluss

In diesem Tutorial haben wir gesehen, wie Sie eine hybride mobile Anwendung mit dem Ionic Framework und AngularJS erstellen. Es gibt nur noch eines zu tun: Führen Sie die Anwendung auf einem mobilen Gerät oder einem mobilen Emulator aus. Mit Ionic geht das ganz einfach. Um die Anwendung auf einem Android-Emulator auszuführen, führen Sie einfach Folgendes aus:

Wenn Sie eine vorgefertigte Ionic-Anwendungsvorlage herunterladen möchten, um eine Website in eine mobile Anwendung umzuwandeln, probieren Sie die Website-zu-Mobile-Ionic-Anwendungsvorlage von CodeCanyon aus.

An application template on CodeCanyonAn application template on CodeCanyonAn application template on CodeCanyon
Advertisement
Did you find this post useful?
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.