Mit Ideapress zur eigenen App für Windows 8

Mobile Studien als App für Windows 8

Mobile Studien als App für Windows 8

Ideapress ermöglicht es WordPress-Bloggern, mit wenigen Klicks aus ihrem Blog eine App für Windows 8 zu erstellen. Das Ergebnis in Reinform ist allerdings bei weitem noch nicht fertig für die Einreichung im Windows Store. Mit ein paar individuellen Anpassungen wird daraus allerdings eine recht ansehnliche Windows 8-App.

Voraussetzungen und Grundlagen für Ideapress

Ideapress bietet derzeit drei Möglichkeiten an, aus dem eigenen WordPress-Blog eine App für Windows 8 zu erstellen: Nach der kurzen Konfiguration der App über das Web-Interface kann gewählt werden, ob man lieber ein fertiges App-Package oder ein Visual Studio-Projekt erhalten möchte, oder ob die App kostenpflichtig direkt über Ideapress veröffentlicht werden soll. Von Variante eins und drei kann eigentlich nur abgeraten werden, schließlich möchte man bei einer eigenen App das Ergebnis ja vor der Einreichung zumindest noch einmal sehen, bzw. idealerweise auch selbst anpassen.

Somit bleibt also nur die Visual Studio-Variante, um so die eigene App noch weiterbearbeiten zu können – und das ist auch dringend geraten, denn in Reinform dürfte die App aufgrund mancher Fehler und der englischen Sprache kaum Chancen auf die Veröffentlichung im (deutschen) Store haben.

Um die App selbst anzupassen wird also – neben Windows 8 als Betriebssystem – Visual Studio 2012 benötigt, das in der Express-Version kostenlos erhältlich ist. Wer noch kein Entwicklerkonto besitzt, muss sich zudem im Windows Store registrieren. Allerdings kann die Freischaltung mitunter zwei bis drei Tage dauern, wer es also eilig hat seine App in den Store zu bringen, der sollte sich frühzeitig um einen Store-Account kümmern.

Um überhaupt mit Ideapress auf die Inhalte seines Blogs zugreifen zu können, muss zudem über WordPress ein Json-Plugin installiert werden, hier bietet Ideapress eine hilfreiche Anleitung. Nach diesem Schritt steht der Konfiguration der eigenen App über Ideapress nichts mehr im Wege. Dabei ist es absolut empfehlenswert, lieber zu viel als zu wenig Zeit zu investieren und mehrere Projekte mit unterschiedlichen Layouts etc. durchzuspielen. So lässt sich ein Überblick über Möglichkeiten und Grenzen von Ideapress gewinnen.

Um sich die mit Ideapress generierte App ansehen zu können, muss mit Visual Studio über Starten/Projekt öffnen oder Datei/Öffnen/Projekt die .sln-Datei des Visual Studio-Projektes geöffnet werden. Anschließend startet man über Lokaler Computer in der Mitte der Optionsleiste das Debugging – und schon befindet man sich in der App und kann Funktionen und Layout testen. Wie bereits erwähnt empfiehlt sich das Ausprobieren verschiedener Layouts. Logos und Farben dagegen verdienen während des Spielens mit Ideapress noch keine große Aufmerksamkeit. Diese Elemente lassen sich später viel schneller über Visual Studio ändern.

Erste Anpassungen mit Visual Studio: Fehler bereinigen

Leider spuckt Ideapress keine vollkommen fehlerlose App aus, zumindest in der ersten Version mussten doch einige Bugs per Hand in Visual Studio behoben werden. Inzwischen wurde allerdings eine neue Version von Ideapress freigeschaltet, die die folgenden Fehlerkorrekturen unter Umständen unnötig macht.

Am auffälligsten ist das Problem, dass sich der Text bei mancher Layout-Kombination nicht an die dafür vorgesehenen Kästen hält. Die einfachste (wenn auch technisch nicht ganz saubere) Lösung besteht darin, die Kategorien-Tags zu deaktivieren und die Schriftgröße kleiner zu machen.

Die Schriftgröße kann, über den Projektmappen-Explorer von Visual Studio, über die custom.css unter modules/wordpress/css/templates geändert werden, die Untertitel über die custom.css in css/themes.

Das zweite Problem betrifft nur diejenigen Blogger, die ihren Einstiegstext mit dem read more-Tag vom Rest des Textes abtrennen. An dieser Stelle stoppt dann nämlich auch der Text innerhalb der App. Wer auf den entsprechenden „Weiterlesen“-Link klickt wird dann auf den Blog weitergeleitet – keine gute Benutzerführung für eine App!

Eine Lösung des Problems besteht darin, in der options.js im Ordner Js die Code-Zeile fetchOnPostInit:false auf true umzustellen. Das hat aber zumindest bei mir zur Folge, dass innerhalb der App sämtlicher Code des WordPress-Single-Templates (das php-Template, das für die Detail-Ansicht der WordPress-Artikel verantwortlich ist, meist single.php) nachgezogen wird – inklusive diverser Backlinks verschiedener Plugins, die im Blog selbst nicht sichtbar sind. Zusätzlich verzögert sich dadurch der Textaufbau in der App. Nicht viel, aber merklich. Die Alternative: Auf den more-Tag verzichten und den Text auf der WordPress-Startseite automatisch unterbrechen lassen…

Nach den Grundfunktionen: Fein-Tuning

Wenn die Grundfunktionen jetzt stehen, dann ist Fein-Tuning angesagt. Wer an die Farben für Text, Links, Kacheln, Hintergrund etc. ran will, der braucht wieder die custom.css unter css/themes. Bilder und Logos können mit jedem beliebigen Programm geändert oder neu erstellt werden, wichtig ist nur, dass Dateityp und –größe beibehalten werden. Der Bilderordner images liegt im Projektordner auf der ersten Ebene.

Über die CSS-Datei wp.module.detail.css unter modules/wordpress/css kann die Text-Formatierung geändert werden, hier lassen sich auch, falls gewünscht, Kommentare und Related Posts entfernen. Letzteres funktioniert aber zum Beispiel auch über die JavaScript-Datei wp.module.detail.js unter modules/js.

Das Fein-Tuning ließe sich beliebig fortsetzen. Wen zum Beispiel die Anzeige der Anzahl vorhandener Artikel stört, der kann dies in der wp.modules.css unter modules/wordpress/css deaktivieren. Wer an der Anzahl angezeigter News-Items schrauben will, kann dies über die wp.modules.js unter modules/wordpress/js, und so ließe sich die App noch in vielen Punkten weiter anpassen. Je nach Programmierkenntnissen und Zeit lassen sich natürlich auch größere Umbauten vornehmen, etwa der Einbau eines Twitter- oder Facebook-Feeds oder die Möglichkeit zur Auswahl bestimmter Feeds.

Genau darin liegt auch der Vorteil von Ideapress: Anfänger können das Visual Studio-Projekt mit ein paar Handgriffen anpassen und relativ schnell als App einreichen, Fortgeschrittene haben die Möglichkeit, sich mit der App lediglich den Aufbau des Grundgerüstes zu sparen und das Visual Studio-Projekt beliebig auszubauen.

Aber so oder so, ein wichtiger Schritt fehlt noch: Ideapress ist für den englischsprachigen Markt ausgelegt, daher muss die Sprache auf jeden Fall noch dem Zielmarkt, also dem deutschen Store, angepasst werden.

Ein letzter Schritt: Die Lokalisierung

Die App nutzt an einigen Stellen Text, der vor der Einreichung in den Windows Store für den deutschen Markt angepasst werden muss. Am auffälligsten ist hier natürlich die Überschrift „Recent News“ auf der Übersichtsseite (Hub Page) der App. Diese Stelle lässt sich ebenfalls in der bereits erwähnten options.js ändern, genauso wie die Überschrift der Seiten und auch der App-Titel.

Eine weitere große Baustelle ist die Charms Bar der App. Text und Überschrift für das „About us“ lässt sich über die Datei about.flyout.html im Ordner pages ändern. Ideapress hinterlegt hier in jedem Projekt den Hinweis auf Ideapress als Ursprung der App. Letztlich ist es jedem selbst überlassen, ob man diesen Hinweis bestehen lässt oder nicht. Meiner Meinung nach verdient ein so einfach zu bedienendes und vor allem kostenloses Tool aber durchaus eine kleine Danksagung!

Nachdem der Text des „About us“ geändert wurde, muss aber noch der entsprechende Link-Text geändert werden. Dies lässt sich über die default.js im Ordner js bewerkstelligen, genauso wie der „Privacy Policy“-Link. Nach diesem Schritt sind auch schon die wichtigsten Texte lokalisiert, allerdings gibt es noch den einen oder andern Text, der Nutzern nicht sofort auf den ersten Blick ins Auge springt.

In der Detailansicht der einzelnen Artikel erscheint unter der Überschrift die englische Datumsangabe. Diese JavaScript-Funktion kann in der Datei wp.module.detail.js unter module/wordpess/js bearbeitet werden. Wer sich nicht zu detailliert mit dem Datepicker auseinandersetzen will, kann einfach ein get item.tag einsetzen. Damit erhält man einen zwar unschönen, aber immerhin sprachlich neutralen Zeitstempel. Alternativ kann die Datumsangabe natürlich auch ganz deaktiviert werden.

In der gleichen Datei können schließlich auch die Text geändert werden, die bei der Abgabe von Kommentaren angezeigt werden. Die Überschriften für Kommentare und Related Posts finden sich dagegen in der wp.module.detail.html im pages-Ordner.

Damit bleibt als letzter große Punkt noch der Text für die Suchergebnisse. Dazu muss die Seite wp.module.searchResult.html unter modules/wordpress/pages sowie die JavaScript-Datei wp.module.searchResults.js unter modules/wordpress/js geändert werden. Nach diesem Schritt hält man schließlich endlich eine vollständig lokalisierte App für den Store in den digitalen Händen!

Jetzt aber ab in den Store!

Wenn die App fertig ist, muss sie zur Einreichung nur noch als App Package verpackt werden: Unter Visual Studio über Projekt/Store/App-Paket erstellen. Vorher sollte aber unbedingt das App-Manifest auf Richtigkeit und Vollständigkeit überprüft werden: Projekt/Store/App-Manifest bearbeiten. Je mehr an der ursprünglichen App geändert wurde, umso dringender sollten auch Tests der App auf möglichst vielen verschiedenen Endgeräten durchgeführt werden. Wer nur inhaltliche Änderungen am Text vorgenommen hat, kann darauf unter Umständen auch verzichten. Interessant ist es aber allemal, die App auf verschiedenen Geräten mit unterschiedlicher Auflösung zu sehen.

Dazu kann natürlich Visual Studio installiert und das entsprechende Projekt kopiert werden. Bei ARM-Geräten wie dem Surface RT ist dies aber nicht möglich, als Lösung bieten sich die Visual Studio Remote Tools an. Ebenfalls je nach Umfang der individuellen Änderungen kann auch ein Test der App mit dem Certification Toolkit nicht schaden, auf diese Weise erfährt man bereits vor der Einreichung, ob bei der Zertifizierung durch Microsoft Probleme auftauchen könnten. Nach diesem Schritt steht der Einreichung im Store aber endgültig nichts mehr im Wege, Ideapress bietet hierzu wieder eine passable Anleitung.

Meine App wurde innerhalb eines knappen Tages zertifiziert und im Store gelistet, größere Probleme sollte es also mit Ideapress-Apps nicht geben. In diesem Sinne: Viel Erfolg und happy coding!

 

Mobile Studien im Windows Store

Mobile Studien im Windows Store!

 

 

 

 

 

 

 

Achtung: Diese Anleitung gilt in erster Linie für selbst gehostete WordPress-Blogs! Das Vorgehen dürfte sich aber bei WordPress.com-Blogs nicht grundlegend unterscheiden, wenn statt des Ordners wordpress der Ordner wordpressCom gewählt wird!