AppBox Octopress - a Plugin for Octopress/Jekyll to Display Apps More Smart in Your Post

In Blogs wie bei Caschy oder Marcel findet man die WPAppBox bereits in fast jedem Beitrag. Zumindest in solchen, die ueber Apps und deren Entwicklungsstand oder Updates berichten.

Die Loesung einer Appbox um alle relevanten Informationen zu buendeln und anschaulich darzustellen gibt es aber derzeit nur fuer Wordpress. Marcel hat hier eine praktikable Loesung erarbeitet die es Wordpress Bloggern ermoeglicht Informationen zu einer App aus dem Apple AppStore oder aus dem Google PlayStore in einen Post einzubinden. Auch andere Stores wie etwa der Chrome WebStore oder Wordpress Plugins aber auch der Steam Store werden unterstuetzt.

Inspiriert von Marcels Idee habe ich ein Plugin fuer Octopress oder auch Jekyll entwickelt, um nahezu das gleiche zu realisieren. Die Umsetzung und den Weg dorthin moechte ich hier gern festhalten.

Der Weg der Entwicklung beginnt bei der Analyse wie ich an die Daten gelange. Bei Apples AppStore fuer iOS und OSX gestaltet sich die Sache ganz einfach. Apple liefert einen JSON String bei der entsprechenden URL unter Angabe der AppID.

Schwieriger hingegen wird es beim GooglePlay Store. Hier gibt es keine Moeglichkeit an einen JSON String oder ein XML File zu gelangen. Also fuehrt der Weg direkt ueber die Webseite.

ScreenScraping heisst hier das Zauberwort. Gluecklicherweise bringen die RubyGems das Nokogiri Gem mit. Dieses ermoeglicht auf einfachem Weg das gezielte Auslesen von Daten direkt von einer angegebenen Webseite.

Ueber sogenannte CSS Selektoren werden die HTML Elemente gesucht und Ihre Inhalte oder Attribute ausgelesen. Die Arbeit ist ein wenig muessig, fuehrt aber schlussendlich zum gewuenschten Ziel.

Ein Problem stellt sich hier jedoch fuer die Zukunft. Aendert Google die Webseite im Layout, kann es passieren, dass die statisch eingetragenen CSS Selektoren nicht mehr funktionieren und die Abfrage der Daten zu ungewuenschten Ergebnissen fuehrt. Damit kann ich derzeit aber leben. Wenn es soweit ist, liegt das Ziel in der schnellen Korrektur der Selektoren, damit das Plugin weiterhin funktioniert. Es ist in der Regel immer so, das von aussen abgefragte und aufbereitete Daten sich jederzeit aendern koennen.

Ich habe mich bei der Wahl der Shops erstmal auf den AppStore und den Google PlayStore festgelegt. Damit ist mein persoenlicher Bedarf an AppStores gedeckt. Eventuell kann man das Plugin spaeter noch wie Marcel um weitere Stores ergaenzen.

Ich wollte aufgrund der Gegebenheiten von Octopress einen Cachingmechanismus einbauen. Octopress oder auch Jekyll sind ein Framework die aus verschiedenen Quellen (Markdown, Textile und Assets wie JavaScripts und Sass oder CSS) statische Seiten generieren. Damit nicht bei jedem generieren fuer jeden Post wieder alle Daten aus den AppStores geladen werden, hat jeder AppBox Aufruf ein Cachefile aus dem es die Daten beim Generate beziehen kann. Diese finden sich in einem versteckten Verzeichnis .appboxcache wieder. Das bedeutet jedoch auch, dass sich die Daten fuer alte Beitraege nur aktualisieren wenn man vorher das entsprechende Cachefile loescht. Es ist quasi eine Momentaufnahme der App im Store zum Moment der Generation des Beitrages.

Das Design meiner AppBox orientiert sich stark an dem Design von Marcel. Ich habe Teile seines CSS Code uebernommen, da ich der Meinung bin, dass es hier wenig bis gar nichts zu verbessern gibt. Lediglich ein paar Grafiken habe ich weggelassen und das Rating System vom Quellcode anders umgesetzt.

Installation des Plugins in Octopress

Fuer die Installation habe ich es ganz einfach gestaltet und ein Rubygem um das Plugin herumgeschrieben. Damit kann man das Plugin sehr einfach in Octopress oder Jekyll einbinden. Auf http://rubygems.org/gems/appbox-octopress ist das Plugin hinterlegt. Der Code wird auf Github gehostet.

Zur Installation fuegt man einfach das appbox-octopress Gem in das Gemfile der Octopress oder Jekyll Installation ein und macht ein bundle install.

Damit wird unter anderem ein Executable installiert, mit dem sich die Installation vornehmen laesst.

Beide Befehle muessen jeweils im Octopress oder Jekyll Root Directory ausgefuehrt werden.

Installation

1
appbox-octopress install

Deinstallation

1
appbox-octopress remove

Manuelle Installation des Plugins

Das eigentliche Plugin liegt im Git Repository im Verzeichnis templates. Hier findet sich im Verzeichnis plugins das Plugin appbox.rb. Diese Datei wird in das plugins Verzeichnis der Octopress/Jekyll Installation kopiert.

Die andere notwendige Datei ist appbox.css. Hier sind alle noetigen Formatierungen enthalten die man nach belieben auch gern anpassen darf. Diese findet sich im Verzeichnis css. Kopiert wird sie im Verzeichnis der Octopress/Jekyll Installation in source/stylesheets.

Im letzten Schritt muss das CSS noch eingebunden werden. Hier wird die Datei youroctopressinstallation/source/_includes/custom/head.html angepasst. Ans Ende des Dokumentes wird die folgende Zeile eingefuegt.

1
<link href="/stylesheets/appbox.css" media="screen, projection" rel="stylesheet" type="text/css">

Das Plugin benoetigt noch einige Rubygems die installiert werden muessen.

1
2
3
gem install nokogiri
gem install json
gem install open-uri

Benutzung von AppBox in Octopress

Auch bei der Syntax habe ich mich stark an den schon vorhandenen Kandidaten gehalten. Das macht es auch fuer Umsteiger von Wordpress einfacher.

Die einfache AppBox kommt ohne zusaetzliche Syntax aus. Hier wird nur der LiquidTag sowie Store und ID der App angegeben.

1
{% appbox STORE APPID %}

Die Variable STORE erwartet hier entweder appstore fuer Apples AppStore oder googleplay fuer den Google PlayStore.

Beispiel AppStore mit Tweetbot:

1
{% appbox appstore 722294701 %}

Die APPID fuer eine App sind bei AppStore und PlayStore unterschiedlich. Aufschluss darueber wie man an die entsprechenden IDs kommt geben die folgenden Grafiken.

Die Syntax laesst sich noch um den Befehl screenshots erweitern. Damit wird eine groessere Box generiert, die ein Scrollfeld mit den Screenshots enthaelt.

1
{% appbox STORE screenshots APPID %}

Beispiel fuer eine App mit Screenshots aus dem Google PlayStore. Hier Need for Speed:

1
{% appbox googleplay screenshots com.ea.games.nfs13_row %}

Zu guter letzt moechte ich noch einmal Marcel Schmilgeit danken. Dank seiner Vorarbeit mit WPAppBox war die Arbeit um einiges leichter als gedacht. Ich habe viele nuetzliche Tipps bekommen und habe mich auch ein wenig an seinem Stylesheet vergriffen.

Ich wuensche allen die es nutzen moechten viel Spass und Freude mit AppBox-Octopress. Fuer Fragen und Kritik bin ich offen und freue mich auf Feedback.

Comments

GitHub Repos

  • Status updating...