Wir erstellen eine Cross Platform App mit der WP REST API

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

In diesem Beitrag soll es darum gehen zu mit der REST API von WordPress zu arbeiten. Die mit Hilfe dieser API ausgelesenen Inhalte sollen in einer App angezeigt werden.
Die App wird mit Cordova, Ionic und AngularJS entwickelt. Sie ist also später (theoretisch) auf allen Betriebssystemen von Smartphones zu benutzen.


Ich nutze noch immer die Version 1 von Ionic als auch von AngularJS. Ich habe zwar schon angefangen hier auf der Seite TypeScript vorzustellen und wollte auch dann einen fließenden Übergang zu Angular2 schaffen, doch irgendwie fehlt mir bislang die Motivation mit näher damit zu befassen. Mit AngularJS und Ionic kann man einfach gut arbeiten, sodass es momentan für mich noch keinen Grund gibt mit intensiv mit Angular2 zu beschäftigen.

App Idee

Eine weitere meiner Seiten ist die Beste Zeitung. Ich denke einfach mal, dass der Name für sich spricht. Qualität braucht keine näheren Beschreibungen. Es soll also darum gehen die Inhalte dieser Seite auszulesen und in einer App darzustellen.
Zu Anfang möchte ich das ganze recht schnell umsetzen und mir großartige Features sparen. Diese können später hinzugefügt werden. Zuerst sollen die wichtigsten Sachen funktionieren. Beiträge auslesen, in einer Liste darstellen und das mit den wichtigen Dingen wie Überschrift, Bild und dem Inhalt.
Später folgen dann gerne noch andere Funktionen, die man aus Nachrichten Apps so kennt. Wetteranzeige, Speichern der Inhalte oder das Merken von favorisierten Nachrichten, Kommentar Funktion etc. Für weitere Vorschläge bin ich natürlich immer dankbar.

Projekt Setup

Aber kommen wir nun dazu unser Projekt anzulegen.
Wieso weshalb warum ihr dieses und jenes installieren müsst könnt ihr meinem Beitrag über die Entwicklung einer App auf Basis von Cordova, Ionic und AngularJS entnehmen.

Wir legen also ein neues Ionic Projekt, welches bereits ein Sidemenu besitzt. Dies gelingt uns dank eines wunderbaren Github Projekts.
In meinem Fall soll die App den Namen BesteZeitung tragen.

ionic start BesteZeitung sidemenu


WP REST API

Als nächstes wollen wir die WP REST API zum Laufen bringen und unsere Inhalte erhalten.
Hierfür müsst ihr zuerst das WP REST API Plugin auf eurer Seite installieren. Wenn ihr bei den Plugins danach sucht werdet ihr zwei verschiedene Plugins finden. Ein Plugin ist für die Version 2 der WP REST API, welches ich auch benutzen werde. Ihr müsst eventuell zuerst eure WordPress Version aktualisieren, um dieses Plugin installieren zu können. Dies wird euch aber unterhalb des Plugins anzeigt, wie es bei mir auch der Fall war.

Übersicht Plugins WP REST API

Wenn ihr das gewünschte Plugin installiert und auch aktiviert habt könnt ihr nun noch testen, ob es auch wirklich funktioniert. Gebt einfach den folgenden Befehl mit dem Link zu eurer Seite im Browser ein. Wenn das Plugin funktioniert sollten die Inhalte eurer Seite ausgegeben werden.

http://DeinLink.de/wp-json/wp/v2/posts

In meinem Fall sieht der Aufruf für die Seite BesteZeitung.de so aus:

http://bestezeitung.de/wp-json/wp/v2/posts

Das v2 bezieht sich auf die Version 2 der WP REST API. Wenn ihr die normale, erste Version benutzt müsst ihr dieses v2 wahrscheinlich weglassen oder durch eine v1 ersetzen. Ich nehme aber an es müsste einfach nur weggelassen werden.

Wenn ihr nun eure Beiträge im Browser ausgegeben bekommt habt ihr schon die Hälfte erledigt. Die App ist so gut wie fertig.

Kleiner Tipp noch am Rande und kleiner Vorgeschmack auf den nächsten Beitrag:
Wenn ihr euch etwas genauer anschaut, was nun ausgegeben wird werdet ihr vermutlich, genau wie ich, etwas enttäuscht darüber sein, dass eure Featured Images nicht mit ausgegeben werden. Das ist natürlich eine unschöne Sache.
Es gibt aber glücklicherweise noch weitere Befehle wie den folgenden:

http://DeinLink.de/wp-json/wp/v2/media

Über diesen werden euch die Images ausgegeben. Die ausgegebenen Bilder besitzen ein Tag ID. Diese ID ist gleich der Zahl im Tag featured_media beim vorherigen API Aufruf.
Zwei http Requests sind jedoch eine unschöne Sache. Zumindest für eine so simple Sachen. Deshalb gibt es glücklicherweise einen weiteren Befehl, mit dem man sich seine Beiträge mit den beinhalteten Bildern ausgeben lassen kann.
Dieser sieht so aus:

http://DeinLink.de/wp-json/wp/v2/posts?_embed

Das soll es auch erst einmal gewesen sein. Im nächsten Beitrag werden wir uns unsere Artikel in der App ausgeben und anzeigen lassen.

 

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

2 responses to “Wir erstellen eine Cross Platform App mit der WP REST API”

  1. […] 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 […]

  2. […] genau. Am liebsten natürlich, wie bereits zuvor, anhand eines praktischen Beispiels, also anhand einer konkreten App Entwicklung. Leider habe ich momentan keine wirkliche Idee für eine App. Und ich möchte nicht unbedingt diese […]

Leave a Reply