Idee
Voor Windows Phone heb ik een aantal apps gemaakt, waarvan Treintijden de meest serieuze en best gewaardeerde is. Een ideale app als je onderweg bent met de trein. Zou het nuttig zijn om daar een desktop app van te maken? Nee, natuurlijk niet. Wie gaat het downloaden? Waar gaan ze het vinden? Je gaat toch gewoon naar NS.nl?

Maar Windows 8 verandert de zaak. Windows 8 heeft een appstore waar Metro apps gedownload kunnen worden die full screen draaien op desktop computers, tablets en alles ertussenin. Dan is het opeens wel nuttig een Trein app te hebben die meer functionaliteit kan bieden dan de website.

Zo is het idee geboren een Windows 8 versie van Treintijden te maken.

 
Treintijden voor Windows Phone.Meer screenshots op de Windows Phone Marketplace.

Hergebruik Windows Phone code
Na het aanmaken van een nieuw Windows 8 project in Visual Studio heb ik eigenlijk als eerste een hoop code gekopieerd uit het Windows Phone project. Dit ging verrassend makkelijk, bijna alles bleef gewoon werken. De enige aanpassingen die ik moest doen waren wat using statements wijzigen en de code voor het doen van HTTP requests aanpassen.

Ook het opslaan van favoriete stations in de Isolated Storage moest ik aanpassen naar het nieuwe Windows 8 opslag model.

De frontend van de applicatie, alle schermen en interactie, zijn nieuw gemaakt voor Windows 8. Hierbij kon ik eigenlijk niks hergebruiken. Wel ben ik voor de style van de app volledig uitgegaan van de Windows Phone versie.


Startscherm eerste versie Windows 8 Trein app


Vertrektijdenscherm eerste versie Windows 8 Trein app

**
Eerste versie voor Windows 8 camp
**Op 12 en 13 april was er een Windows 8 Camp, met presentaties en een hands-on dag. Mijn doel was om die dag een eerste versie klaar te hebben, om te kunnen laten zien en feedback op te krijgen.

Bij de eerste versie van de app was ook de layout gebaseerd op de Windows Phone versie. Maar tijdens het Windows 8 Camp heb ik samengewerkt met Bram Stege. Hij heeft een volledig nieuw fris design gemaakt volgens de Windows 8 Metro Guidelines.

Deze samenwerking op het Windows 8 camp heeft de app veel goed gedaan. Een Windows Phone app opblazen naar full screen desktop formaat werkt gewoon niet! Een Windows 8 app verdient zijn eigen design waar weer goed over nagedacht moet worden.

Aan het einde van de dag hebben we op het podium de applicatie gepresenteerd en het verschil tussen oud en nieuw design laten zien.


Presentatie op Windows  8 camp door Bram en Michiel. Foto via @LocalJoost


Screenshot startscherm nieuwe layout

Windows 8 integratie
Trein voor Windows 8 integreert op drie punten met Windows 8:

  • Zoeken
    De app ondersteunt zoeken, er kan naar stations gezocht worden, waarvan direct de actuele vertrektijden opgevraagd worden. Dit werkt ook buiten de app, als de app niet draait. Als je op de Windows 8 desktop bent kan je bijvoorbeeld "Amsterdam Centraal" typen. Standaard wordt er naar applicaties gezocht, maar aan de rechterkant kan je ook Trein aanklikken. Dan zoek je in de app en ga je naar de vertrektijden van Amsterdam Centraal

  • Share
    Trein kan reisadviezen sharen. Andere applicaties kunnen aangeven dat ze een share target zijn. De standaard Mail applicatie is bijvoorbeeld een share target. Trein kan dan het reisadvies sharen met de Mail app waardoor je een reisadvies kan mailen.

  • Vastpinnen van een station
    Om snel naar de actuele vertrektijden van een station te gaan heeft Trein ook de mogelijkheid een station vast te pinnen aan het Windows 8 startscherm. Je komt dan direct uit bij de vertrektijden van dat station.

**App Excellence Lab
**De Windows 8 app store is nog niet geopend voor alle developers. Je komt hier pas in na het krijgen van een token. Een token krijg je als je app gekeurd is door Microsoft en voldoet aan alle Windows 8 guidelines tijdens een App Excellence Lab.

Tijdens dit App Excellence Lab wordt de applicatie aan alle kanten bekeken en getest. Voor het eerst kon de applicatie ook op een tablet worden getest. Visual Studio heeft een mooie simulator waardoor je een tablet en touch input kan simuleren, maar dit haalt het niet bij de real deal. Het bleek echt nodig de app op een tablet te testen.

Zo bleek je op een aantal punten in de app te kunnen pinch-zoomen, wat helemaal niet de bedoeling was. Dit was standaard gedrag van het gebruikte control (scrollviewer), maar totaal ongewenst. In de simulator probeer je dit niet snel uit, maar op een tablet merk je het al snel.

Een ander punt dat tijdens het App Excellence Lab aan het licht kwam was de werking van de autocomplete om een station in te voeren. Dit werkte nog niet altijd foutloos. Doordat Windows 8 nog zo nieuw is, zijn er nog maar weinig standaard controls. Ik heb zelf een autocomplete control moeten maken.
Inmiddels werkt dit goed genoeg, maar toch hoop ik dit snel te kunnen vervangen door een echt autocomplete control uit een gratis toolkit of een betaalde variant van bijvoorbeeld Telerik.

WACK tool
Essentieel onderdeel van het voorbereiden van je applicatie naar de app store is het draaien van de Windows App Ceritication Kit (WACK). Dit test de app op punten zoals opstartsnelheid, afmetingen van aangeleverde iconen en of er alleen WinRT DLLs gebruikt worden.

Via de WACK tool kwam ik er achter dat de DLL Microsoft.Practices.ServiceLocation.dll gebruikt werd, terwijl die DLL niet voor WinRT is gebouwd. Dit werd gedaan door de MVVM Light Toolkit, het framework dat ik gebruik als basis voor de app.
Hier heb ik een bugmelding voor aangemaakt en deze is inmiddels opgelost:
http://mvvmlight.codeplex.com/workitem/7567

De WACK Tool zelf was ook niet altijd even stabiel. Het blijft allemaal beta he? De WACK tool die met de Release Preview meekomt is gelukkig heel wat stabieler en Trein komt goed door de keuring heen:

Certificering voor de Windows Store
Een goede score met de WACK tool geeft nog geen garanties op een vlekkeloze certificering voor de Windows Store. De eerste keer werd de applicatie afgekeurd om de volgende redenen:

  • Geen Privacy Policy link
    De app gebruikt locatie bepaling, in dat geval is het verplicht een privacy policy te hebben. Dez url hiervan kan je toevoegen bij het submitten van je app.

  • Age Rating
    De age rating stond initieel op 3+. Weinig wapens en geweld in deze trein app. Maar dat was niet goed. Waarschijnlijk ook door het gebruik van de locatie bepaling heeft deze app een hogere age rating nodig. De guideline van Microsoft is hier op dit moment nog niet heel duidelijk over. Ik heb de age rating op 12+ gezet.

**Leerpunten en valkuilen
**Hou je schermopbouw flexibel!
Apps moeten draaien op uiteenlopende resoluties. Daarnaast heb je ook nog een full, fill en snapped breedte en kan je in portrait of landscape draaien.
Gelukkig is het XAML layout systeem erg krachtig en kan je er flexibele apps mee ontwikkelen. Let er wel op dat je dus oppast als je vaste breedtes gaat gebruiken.

Ik kwam hiermee in de knel bij het overzicht van actuele vertrektijden. Daar had ik elke kolom een vaste breedte gegeven. Dit ging goed, totdat het scherm in portrait mode gedraaid werd, toen vielen de laatste kolommen van het scherm af.

Oplossing: percentages gebruiken voor de kolom breedte. Dit kan in XAML door bijvoorbeeld te zeggen: Width="2*" en Width="3*". Je krijgt dan een kolom die 2/5 breed is en één die 3/5 breed is.
Dit kan je nog bijsturen door bijvoorbeeld ook een MaxWidth en MinWidth te zetten, zodat kolommen niet te breed of te smal worden. Op deze manier ziet het grid er op elke resolutie goed uit!

Bij Windows Phone kom je met het gebruik van vaste breedtes nog wel weg, omdat er maar één schermresolutie is (gaat ook in de toekomst veranderen!). Maar bij Windows 8 dus niet.


Grid met actuele vertrektijden


Zelfde Grid, maar nu in portrait mode

  • Standaard Windows 8 styles op ListViews / GridViews
    De standaard styles op ListViews en GridViews zijn erg uitgebreid. Er zit standaard gedrag op voor mousehovers, selecties, minimale hoogte van items etc. Dit is super fijn als je het nodig hebt, maar vreselijk als je het niet wilt gebruiken.
    Het kwam er op neer dat ik veel standaard gedrag er uit moest halen. Dit heb ik gedaan met behulp van Blend, die een kopie kan maken van de default style. Die kopie kan je vervolgens aanpassen en gebruiken op de ListViews of GridViews.

Toekomst
De eerste versie staat en ik hoop dat er veel gebruik van gemaakt gaat worden. Stuur je feedback in en laat een goede review achter in de Windows 8 store.
De app zal natuurlijk geupdate worden naar de final versie van Windows 8. Ook zijn er al een aantal ideeën voor een redesign van het startscherm. De app blijft dus in ontwikkeling!

Download Trein voor Windows 8
Trein voor Windows 8 staat in de Windows 8 Store onder de categorie Travel.

Heb je geen Windows 8? Bekijk de Windows 8 Store via het Web:
http://apps.microsoft.com/webpdp/en-us/app/trein/bc0b903d-6f1e-4c2b-b759-54aa6ebc3e1a

FAQ
Waarom heet deze app Trein en de Windows Phone variant Treintijden?
Trein is natuurlijk dé naam voor een Treintijden/Treinplanner app, ook door de bekendheid van de iPhone Trein app. Op Windows Phone was er al een app met de naam Trein en Treinplanner. Ook al hoeven namen bij Windows Phone niet uniek te zijn, ben ik toch voor een unieke naam gegaan, in dit geval Treintijden.
Voor Windows 8 moeten namen wel uniek zijn. Met nog geen Nederlandse apps in de store, kon ik dit keer zelf kiezen voor welke naam ik wilde gaan. Trein past in dit geval ook beter in het design (zie screenshots).