Inhalte über WP REST API in Cordova App anzeigen

17. April 2017 - AngularJS, Cordova, Ionic, REST API, Wordpress

Im letzten Beitrag ging es um die Nutzung der WP REST API. Nun möchte ich euch zeigen, wie ihr die Beiträge in eurer App ausgegeben könnt.
Das Projekt Setup haben wir ja bereits angelegt. Wir wollen also nun einmal unser Projekt öffnen. Dieses sollte zu Beginn so aussehen, wie auch meins aussieht.

Projektstruktur

Wenn man sich mal die Datei playlists.html ansieht wird man erkennen, dass wir diese im Prinzip so für unser Vorhaben verwenden können.
Wir wollen Beiträge (und keine Songs) in einer Liste ausgeben. Und wenn man einen Beitrag anklickt, soll sich gerne eine neue Seite öffnen mit dem ganzen Inhalt.
Fangen wir aber vorne an.

State hinzufügen

Wir müssen zuerst in der app.js unsere gewünschte Seite bekannt machen und verlinken. Da meine App die Inhalte der Besten Zeitung ausgeben soll, werden sowohl mein HTML Template als auch mein Controller entsprechend bezeichnet.

.state('app.beste', {
      url: '/beste',
      views: {
        'menuContent': {
          templateUrl: 'templates/beste.html',
          controller: 'BesteCtrl'
        }
      }
    })


HTML Seite hinzufügen 

Wir benötigen also einmal die Datei beste.html und danach einen Controller. Die HTML Seite sieht, wie bereits erwähnt, genau so aus wie die playlists.html Seite. Also kopieren wir uns einfach mal den Inhalt und benennen das ganze unseren Bedürfnissen entsprechend.

<ion-view view-title="Beste Zeitung" ng-init="getArticles()">
  <ion-content>
    <button >Rest</button>
    <ion-list>
      <ion-item ng-repeat="article in articles" href="#/app/playlists/{{playlist.id}}">
        <!-- Hier kommt später der Name des Artikels hin -->
      </ion-item>
    </ion-list>

  </ion-content>
</ion-view>

Wir passen also erst einmal oben den view-title an und auch das ng-repeat. Unser href Tag ignorieren wir erst einmal. Wir fügen ein ng-init hinzu, über welches dann unsere Artikel geladen werden sollen, sobald die Seite geöffnet wird.

Controller hinzufügen

Wir müssen natürlich noch unseren Controller (hier BesteCtrl) in der Datei controller.js hinzufügen. Zuerst soll dieser nur unsere Methode zum auslesen der Artikel beinhalten und ein Array, in welches diese dann hinein kommen.

.controller('BesteCtrl', function($scope, $http) {

    $scope.articles = [];

    $scope.getArticles = function() {
        $http({
          method: 'GET',
          url: 'http://DeinLINK.de/wp-json/wp/v2/posts?_embed',
          headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
        }).then(function successCallback(response) {
          console.log("success");
          console.log(response);
          $scope.articles = response.data;
        }, function errorCallback(response) {
          console.log("error");
          console.log(error);
        });
    }
  })

Vergesst nicht die url anzupassen. Hier muss natürlich eure Seite, deren Inhalte ihr auslesen möchtet, hin. Und das $http als function Parameter wird auch gerne mal vergessen.
Wir müssen nun nur noch in der html Datei unsere Überschrift der Beiträge an der dafür vorgesehenen Stelle ausgeben und dann sind wir auch schon ein ganzes Stück weiter mit unserem Vorhaben. Die Überschrift befindet sich unter response.title.rendered. Wenn wir die Inhalte ins Array articles laden können wir sie also über article.title.rendered ausgeben lassen.

<ion-view view-title="Beste Zeitung" ng-init="getArticles()">
  <ion-content>
    <button >Rest</button>
    <ion-list>
      <ion-item ng-repeat="article in articles" href="#/app/playlists/{{playlist.id}}">
       {{article.title.rendered}}
      </ion-item>
    </ion-list>

  </ion-content>
</ion-view>

 

Ihr müsst natürlich noch daran denken eure Seite zu verlinken. Beispielsweise in der menu.html, damit ihr sie auch im Browser oder am Handy aufrufen könnt. Ich habe jetzt erst einmal im Sidemenu eine entsprechende Verlinkung zu meiner beste.html Seite hinzugefügt.

<ion-item menu-close href="#/app/beste">
          Beste
</ion-item>

Wenn ihr nun euer Projekt startet und eure entsprechende Seite öffnet sollte das Ergebnis ungefähr so aussehen:

Ausgabe der Beitragsüberschriften

Herzlichen Glückwunsch, ihr habt die Beiträge eurer Seite in einer App ausgegeben und könnt sie nun auch via Smartphone oder Tablet öffnen.
Beim nächsten mal wollen wir anfangen und die Ausgabe Beiträge etwas netter zu gestalten und auch mit den entsprechenden Featured Images zu befüllen.

 

Hinterlass doch ein Like :)Share on FacebookTweet about this on TwitterShare on Google+

One response to “Inhalte über WP REST API in Cordova App anzeigen”

  1. […] letzten Artikel ging es ja darum, wie man Inhalte mit Hilfe der WP REST API auslesen kann. In meinem Fall wurden mir die Überschriften der einzelnen Artikel der Besten Zeitung in […]

Leave a Reply