Dienstag, 26. Februar 2013

Windows 8 App Entwicklung - Erfahrungsbericht

 

Da mir viele Tools, Libraries und Webseiten mit diversen Tipps bei der Entwicklung von KakusaMusa (im Windows 8 Store) geholfen haben, will ich mir die Zeit nehmen und einen Erfahrungsbericht über die Entwicklung schreiben, indem ich Hinweise auf diese Quellen geben kann.  Außerdem ist es für den einen oder anderen vielleicht interessant mehr über das Projekt zu erfahren.

km-de-screen_start-2

 

Apps4austria - Musa

Angetrieben vom Wettbewerb apps4austria, bei dem man Anwendungen einreichen kann, die auf den frei verfügbaren österreichischen Verwaltungsdaten beruhen (Österreichische Open Government Data-Plattform), habe ich eine Windows 8 Applikation entwickelt.

Mir sind gleich die Daten der Kunstsammlung  zeitgenössischer Kunst der Kulturabteilung der Stadt Wien - MUSA aufgefallen und wollte daraus etwas machen.

Lange habe ich überlegt, ob ich mein großes Projekt unterbreche und dafür eine kleine Windows 8 Store App schreibe. Die Versuchung war schließlich doch stärker und als dann meine Anfrage an das Magistrat Wien, wie weit auch die Fotos der Kunstwerke geschützt sind, für mich positiv beantwortet wurde, habe ich begonnen.

Ich wollte eigentlich eine App bauen, mit der der Benutzer seine eigene Ausstellung aus den Kunstwerken zusammenstellen kann. Doch zunächst wurde mal einfach begonnen, damit ich die Daten anzeigen kann und man gut danach suchen kann.


Problem: Daten

Doch das stellte sich als gar nicht so einfach dar. Das Problem sind die angebotenen Daten. Es gibt nur einen Feed, der die Kunstwerke auflistet, man kann ihn mit Parametern einschränken, aber nicht soweit, dass man eine eindeutige Id für ein Kunstwerk hätte. Pro Kunstwerk gibt es einen Link, der auf eine Webseite verweist und da könnte man die Webseiten parsen, aber das wollte ich mir nicht antun. So habe ich begonnen, die Daten in die eigene Datenbank zu spiegeln. Wer sich die Web Applikation Kulturgut Suche ansieht, bemerkt jedoch schnell, dass die Bilder oft nicht verfügbar sind, immer wieder kommt ein Status Code 500 (Internal Error) zurück. Somit kann ich auch nicht direkt auf die Bilder dort verweisen, sonst sieht man ja oft ein leeres Bild. Somit wurden auch die Bilder abgesaugt.
Das Abgleichen der Datenbestände ist sehr mühsam. Es gibt unzählige Fehlerquellen und immer wieder bin ich auf ein Problem gestoßen, dass mir wieder irgendwelche Datensätze zerstört hat. Inzwischen wiederhole ich bis zu zehnmal eine Bildanfrage, bevor ich zum nächsten Datensatz weitergehe und trotzdem fehlen mir noch immer ein paar wenige. Erst in den letzten Wochen bin ich nun draufgekommen, warum immer wieder auch Synchronisationsprobleme auftreten, weil der Feed leider bei manchen Kunstwerken mehrere Einträge enthält. Sie verweisen alle auf denselben Link, aber haben unterschiedliche Metadaten oder ein Eintrag hat ein Bild, die anderen aber nicht. Somit musste ich das nochmals ändern und erzeuge mir aus dem Feed zunächst einen eigenen indem ich die doppelten Items entferne und nach einer Gewichtung entscheide, welches Item verwendet wird (doppelten Einträge werden nicht zusammengemischt, scheint mir zu gefährlich zu sein). Der gesamte Feed zeigt 24188 Einträge, es gibt aber "nur" 22949 Kunstwerke, somit sind über 1000 Einträge zu viel vorhanden. Die meisten Einträge haben übrigens ein Foto dabei (fast 17700 Fotos).
Das Sammeln der Daten machte das Projekt sehr spannend. - Sie machen es einem nicht leicht! :-)

Faszination: Daten

Und trotzdem gefallen mir die Daten. Ich habe mich oft ertappt, dass ich beim Testen bei irgendwelchen Kunstwerken hängen blieb und mir weitere Werke des Künstlers ansah. Es ist schon faszinierend, was man da sieht und dass man schnell seine Gedanken schweifen lässt um zu ergründen, was es damit auf sich hat. Bei manchen Werken habe ich aber schon Schwierigkeiten sie als Kunstwerk zu sehen und bin dann fasziniert, dass es das in eine Kunstsammlung schaffte. :-)

Ich hoffe sehr, dass sie die Sammlung stetig erweitern und dass es vielleicht andere Sammlungen gibt, die ebenfalls ihre Daten frei zur Verfügung stellen.


Features: Grundsystem fertig

Schließlich habe ich beim Erstellen der Applikation die Features sehr stark eingeschränkt, sodass ein solides Grundsystem übrigblieb, auf das ich aufbauen kann und das dafür rechtzeitig fertig wird. Schließlich muss die App bis Ende Februar eingereicht sein. (Zum Glück ist der Zertifizierungsprozess vom Windows Store sehr rasch gegangen, sodass ich noch eine zweite Release veröffentlichen konnte, die ein paar kleine Fehler beseitigt hat.)

Der Benutzer kann zwar derzeit noch keine eigenen Ausstellungen zusammenstellen, aber zumindest mal eine Featureliste, in der er gefundene Werke vermerken kann.
Auch kann man noch keine Notizen zu den Kunstwerken einfügen (z.B. um zu notieren, wann man es live gesehen hat). Auch Verschlagworten geht noch nicht und somit gibt es auch noch kein wirkliches Vorschlagsystem, was einen auch interessieren könnte.
Ob ich diese Ideen noch alle umsetze ist eine Frage der Zeit und Motivation, im Moment werde ich mich mal wieder um mein Hauptprojekt kümmern.
Wichtig war mir mal die Suche und dass es schön in Windows 8 integriert ist.


Windows 8 Store App

Mit Windows 8 Apps hatte ich noch keine Erfahrung, doch es gibt eine Menge Information im Internet darüber. Ich habe mich auch entschlossen, die Applikation in Javascript, Html und CSS zu entwickeln, was einen besonderen Reiz hat. Damit ich es als C++/C#/Java Entwickler einfacher habe, wurde statt Javascript dann sogar das ganz neue Typescript verwendet. Da die Toolunterstützung noch nicht so toll ist, braucht man aber doch immer wieder auch Javascript Erfahrung. Trotzdem eine geniale Sache dieses Typescript. Da es von Microsoft stammt wird es schwierig sich in der Web Entwickler Welt durchzusetzen.
Die asynchrone Programmierung in Type-/Javascript war die große Herausforderung. Eigentlich macht es einem das Promise Pattern wirklich einfach, aber man kann doch viel falsch machen und es hat lange gedauert, bis ich den Fehler im Zusammenhang mit dem Binding der listview fand.
Im Prinzip sieht KakusaMusa nun wie viele Windows 8 Store Apps aus, aber das soll auch so sein, denn der Benutzer soll sich schnell zurechtfinden. Auch dachte ich, dass ich es dadurch sehr einfach haben werde, indem ich eines der vielen Beispiele verwende und ein wenig abändere. Dem ist natürlich auch so, aber der Teufel steckt doch im Detail und es ist eben keine Website, man ist völlig frei, wie man was macht und muss sich z.B. um die Navigation kümmern. Dafür gibt es nicht das Problem der unterschiedlichen Browser im Untergrund (Es gibt ja keinen Browser hinter einer App.).

Eine weitere Hürde ist natürlich auch der Windows Store. Der fordert einem nämlich ganz schön. Man braucht Logos in diversen Größen und Auflösungen, Beschreibungen und Screenshots, auch die Fileformate sollte man nicht außer Acht lassen (der Typescript Compiler erzeugt zur Zeit Dateien die nicht in UTF-8 sind!) usw.

Das man Windows Apps mit dem Wissen aus der Web Entwicklung machen kann, war ein genialer Schachzug von Microsoft. Da haben sie plötzlich eine viel größere Entwicklergemeinde.


Am Server - alles Azure

Ich habe bei diesem Projekt ganz stark auf Microsoft Technologie gesetzt. Und nicht nur die Entwicklungssachen, wie Visual Studio, TFS Online (mit git - das klappt schon ganz gut mit Visual Studio.) verwendet, sondern auch die www.windowsazure.com Microsoft Cloud Technologie Azure eingesetzt. Mit den Cloud Services hatte ich schon Erfahrung und daher viel es mir leicht jetzt die SQL Datenbank und den Storage (Blob Speicher für die Bilder) einzusetzen. Neu war aber, dass ich jetzt nicht die Cloud Services verwendete, wären auch übertrieben, sondern die Mobile Service als Schicht, der mir die Daten via Open Data Protocol (OData) liefert. Programmiert habe ich da allerdings nur zwei kleine Scripts, die mir am Server die Datensätze zusammenmischen und ich nicht zu viele unnötige Zugriffe habe (Da ist noch Verbesserungspotential vorhanden).  Bei Azure Mobile Service verwendet man ebenfalls Javascript.

Die Synchronisierung der Daten geht zur Zeit noch halbautomatisch vor sich. Diverse kleine C# Programme helfen mir dabei. Sie parsen XML, vergleichen die Daten, generieren Thumbnails, speichern Bilder im Blob Storage und aktualisieren die Datenbank.
Dabei setze ich die Flow Runtime NPantaRhei von Ralf Westphal ein, die mir viel Arbeit abnimmt. Mich fasziniert Flow-Design schon lange und hoffe noch tiefer in die Materie einzusteigen. Die Synchronisation soll in Zukunft ein worker process im Cloud Service übernehmen.

Wichtig für eine Windows 8 App die in den Store will, sind die veröffentlichten Datenschutzbestimmung und damit man nicht alles im About Dialog einbauen muss und auch mal schneller was ändern kann, ist es inzwischen üblich nur Links zur Verfügung zu stellen und den Rest dann auf einer Website zu verstauen. Auch das ist natürlich wieder zusätzlich Arbeit die so nebenbei gemacht werden muss. Ich habe dazu mal so eine kostenlose Azure Web Site angelegt.


Zweisprachig

Die Website habe ich zweisprachig angelegt und dazu eine kleine MVC ASP.NET App (in C#) verfasst. Die Texte kommen daher von Ressource-Dateien.
Die Seite musste auch auf Englisch sein, weil ich die Windows 8 App zweisprachig publiziert habe.
Wobei ich wenig Zeit auf eine korrekte Übersetzung verwendet habe, ich denke, dass die englischen Texte wahrscheinlich niemand liest. Es war mir nur wichtig mal auszuprobieren, wie man das macht.
Es ist für die App Entwicklung ein kleiner zusätzlicher Aufwand, das einzige was ein wenig mühsam ist, sind die  Screenshots, die man dann auch in der entsprechenden Sprache zur Verfügung stellen muss.


Der Name KakusaMusa

Kakusa-Logo-Versuch7-largetile-goldIst einfach die Abkürzung von "Katalog Kunstsammlung Musa" und weil man unter dem Wort Kakusa einen Fisch findet, habe ich einen Fisch in zwei Bilderrahmen für das Logo gesteckt.

 


Entwicklungsumgebung

Ein paar Bemerkungen noch zur Entwicklungsumgebung. Ich bin seit Windows 8 auf Hyper-V umgestiegen und bin sehr zufrieden damit. Anders als mit dem VMWare Player arbeitet man hier über den Remote Desktop sonst funktioniert die Zwischenablage bei Hyper-V nicht.

Unbedingt erwähnen will ich noch OneNote, dieses Office Programm ist wie für mich geschaffen. Die Daten liegen auf skydrive. Mit OneNote kann man herrlich leicht seine Gedanken (und Schnipsel aus Webseiten) festhalten und eine gewisse Ordnung in Informationen bringen, die einem beim Projektablauf helfen.

BizSpark Das ist das Unternehmergründerprogramm von Microsoft und daher habe ich auch die Möglichkeit Azure kostenlos zu benutzen. Von Azure bin ich ja sehr begeistert. Es ist nur schwierig am Ball zu bleiben, weil es sich ständig erweitert.

In Visual Studio habe ich auch WebEssentials installiert, was für CSS sehr praktisch war, bei Typescript hat es mich schließlich eher gestört. - Passt in der aktuellen Version nicht ganz mit dem TypeScript for Visual Studio 2012 zusammen.
Blend habe ich probiert, allerdings war es mir nicht so sympathisch, alleine die Tastaturkürzel unterscheiden sich schon mal von meinen Einstellungen in Visual Studio, was es mühsam macht - vielleicht kann man es anpassen. Außerdem scheint es mit den Bindings von WinJS nicht zurecht zu kommen.
Visual Studio und WebEssentials sind eine große Erleichterung beim Schreiben von Javascript, jedoch wenn man den Komfort von C# unter Visual Studio kennt, fällt es einem oft schwer.

Hilfreiche Beispiele:

Folgende Beispiele haben mir sehr weitergeholfen:

Problemlöser

Tipps die mir bei diversen Problemen geholfen haben:


Ende

Wieder ein viel zu langer Beitrag geworden. Vielen Dank fürs Lesen!

Da ich sehr dankbar für die Hilfe aus dem Netz bin, hoffe ich mit diesem Bericht anderen weiterzuhelfen.

Und viel Spaß bei der Entdeckung interessanter Kunstwerke auf KakusaMusa (im Windows 8 Store).