Windows 8 AppRace-inzending: Photostream

Door CodeCaster op zaterdag 05 januari 2013 18:30 - Reacties (16)
Categorie: Tech, Views: 3.423

Morgen is de laatste dag dat je je app kunt aanmelden voor de AppRace die Tweakers en Microsoft organiseren. Bij deze AppRace werden ontwikkelaars uitgedaagd om een Windows 8-app te bouwen, met kans op leuke prijzen. Ik heb ook meegedaan.

Wat wilde ik doen?
Begin vorig jaar heb ik tijdens de TechDays al het een en ander gehoord over het ontwikkelen van (toen nog) Metro-applicaties, maar had nog niet met de nieuwe API, die verplicht is voor Store-apps, gewerkt.

Om een app in de Store te kunnen zetten moet je gebruikmaken van WinRT, die is aan te spreken middels enkel onder Windows 8 beschikbare onderdelen van het .NET 4.5-Framework. Een maand geleden heb ik dit OS dan ook aangeschaft (en een week erna de voor het publiceren van een app benodigde developers license ŗ § 37) en ben ik aan het programmeren geslagen. Het resultaat hiervan wil ik met jullie delen: Photostream. Als iemand een mooiere rechtenvrije foto heeft voor de screenshots hoor ik het graag.


Photostream screenshot


De app haalt een verzameling van de "explore"-fotoset op van Flickr en toont deze in een diashow. Je kunt van iedere foto de details bekijken, de tijd tussen de foto's instellen en foto's delen.

Hoe kom je erop?
Die vraag kaart direct het grootste probleem aan bij het maken van wat dan ook: inspiratie. Of beter gezegd, gebrek daaraan. Het gevolg hiervan is dat mijn app net zo inspiratieloos is als die tosti van vanmorgen.

Je kunt geen letter programmeren (of geen ingrediŽnt uitkiezen) als je niet het flauwste besef hebt waarop het eindresultaat moet gaan lijken. Gelukkig worden legio code- en appvoorbeelden aangeboden op MSDN die aantonen waar Windows 8 allemaal toe in staat is, waaruit je wellicht inspiratie kunt halen. Verder las ik eens dat je misschien wel een API van een online dienst kunt gebruiken waar je toevallig recentelijk mee in aanraking bent gekomen.

Uit die laatste opmerking ontsproot uiteindelijk toch een ideetje: ik wilde foto's van de site Flickr presenteren in mijn app.

Beren op de weg
Het tweede probleem bij het ontwikkelen van iets is natuurlijk: bestaat het niet al, ga je niet het wiel opnieuw uitvinden? En ja, er bestaan vergelijkbare apps. De ingebouwde "Photos"-app van Windows kan bijvoorbeeld jouw foto's ophalen van Flickr en in een diashow tonen, maar ook in de Store staan al alternatieven. Nu was dat voor mij niet zozeer een probleem, omdat het een leerproject was. Je zou me kunnen betichten van Storevervuiling, waarvoor dan bij dezen mijn excuses.

Ook op programmeergebied moet je zorgen dat je geen problemen gaat tackelen die al lang en breed gestrekt liggen. Nu had ik de Flickr-API had ik nog nooit gebruikt, maar het zag er redelijk eenvoudig uit. Daarnaast had ik eens iets gelezen over FlickrNet, een .NET-library voor de Flickr-API zodat je niet zelf met strings, webrequests en (de)serializatie hoeft te rommelen, maar gewoon:


C#:
1
2
3
4
var options = new PhotoSearchOptions();
options.UserId = "1234567@N01"// Your NSID

var PhotoCollection firstSet = flickr.PhotosSearch(options);


Deze library werkte dan ook uitstekend. Helaas is FlickrNet ontwikkeld voor .NET 3.5 en gebruikt klassen uit het framework die voor Windows Store apps niet beschikbaar zijn. Er is een Windows 8-alpha beschikbaar die dat probleem niet heeft, maar dat is een debug-build, wat eveneens niet is toegestaan in de Store.

Omdat ik niet wist (en nog steeds niet weet) waar ik heen wil met de app, was mijn eerste ingeving toch om de code te proberen te fixen. Ik had er namelijk weinig trek in alle functionaliteit van de API zelf te moeten programmeren als ik die nodig bleek te hebben, omdat elke API toch weer over eigenaardigheden beschikt die de ontwikkelaar van FlickrNet al heeft ontdekt en opgelost. Enig onderzoek later bleek dat dit toch zou neerkomen op het herschrijven van de deserializatiecode, omdat daarvoor [Serializable]-attribuut en de XmlTextReader voor werden gebruikt, en dat mag niet meer.

Een basale API die met een await HttpClient.GetAsync() wat data ophaalt is natuurlijk zo geschreven, maar alles bij elkaar was ik alweer een uur of wat verder (had ik al gezegd dat ik minder dan een maand had om in mijn vrije tijd een app te bouwen op een voor mij relatief nieuw platform? :+). Wel maakt mijn library gebruik van async en await, waar FlickrNet gebruikmaakt van callbacks.

Verder was het werken met ťťn actief scherm in plaats van meerdere forms erg wennen. Dit (je frame, waarbinnen wel weer meerdere frames mogelijk zijn). Wanneer je van de ene naar de andere view navigeert, ben je net als bij een website zo'n beetje alle context kwijt. Je kunt wel de state van de view opslaan voor wanneer je er later weer naar navigeert, maar de onderlinge communicatie gaat behoorlijk anders dan met bijvoorbeeld een Windows Forms-applicatie. Daarnaast cachet Windows een screenshot van je views, wat terug in beeld schuift wanneer je de code this.Frame.GoBack() uitvoert. Op dat moment wordt echter gewoon een nieuwe versie van jouw view getoond, die je middels de opgeslagen state weer moet herstellen in de oorspronkelijke staat. Wanneer je dit niet (goed) doet en het nieuwe scherm totaal niet meer op de gecachete versie lijkt, zal het scherm niet vloeiend updaten, wat als storend ervaren kan worden.

Dit komt doordat beide schermen waaruit de app bestaat nog verantwoordelijk zijn voor hun eigen data, wat bij uitbreiding van de app alleen maar voor problemen gaat zorgen en dus veranderd moet worden. Dit kan worden opgelost door bijvoorbeeld een MVVM-framework of vergelijkbaar ontwerppatroon, waarbij ťťn object dat voortdurend blijft leven verantwoordelijk is voor de navigatie en datavoorziening. De volgende iteratie van de app wordt hierdoor een totale rewrite.

Ook het asynchroon laden van de foto's bleek voor een issue te zorgen. Het probleem was niet direct zichtbaar, maar toen ik met Fiddler modemsnelheden simuleerde, trad het aan het licht. Het fade-effect tussen te foto's start namelijk als de delaytimer tikt. Hierbij start ik een storyboard waarbij ik de opacity ('ondoorzichtigheid') van de ene foto van 1 naar 0 laat gaan, terwijl de andere foto op hetzelfde moment het omgekeerde doet. Als de tweede foto op dat moment echter nog gedownload wordt, wordt de afbeelding pas zichtbaar terwijl de andere al enigszins of zelfs helemaal weggevaagd is. Ook hier moest ik mijn licht verouderde (synchrone) denkwijze weer loslaten en de start van de animatie aan het ImageOpened-event van de afbeelding koppelen. Maar als alle foto's zijn langsgeweest (of als er op de knop voor de vorige foto wordt geklikt) en een reeds gedownloade afbeelding weer getoond wordt, gaan dat event en de animatie niet af en wordt de foto niet zichtbaar...

Door al deze en nog veel meer tijdrovende leermomentjes heb ik wat functionaliteiten moeten vallen, maar in mijn installatie van het projectmanagementsysteem Redmine staan voor dit project nu drie bugs (waardoor functionaliteit is uitgeschakeld) en veertien features open, en in beide categorieŽn komen er dagelijks meer bij dan er worden gesloten, dus ik kan er nog even tegenaan. Daarnaast wil ik mijn Flick-library, wanneer hij wat functioneler is, open source maken.

Wat kun jij voor mij betekenen?
Hoewel Photostream erg basaal is, doet 'ie wat hij moet doen: een slideshow tonen van hippe foto's. Je kunt me een plezier doen door de (uiteraard gratis) app te downloaden (via IE...) op zijn pagina of door "Photostream" te zoeken in de Store zelf. Zet daarbij wel uit dat je alleen lokale resultaten wil (Settings -> Preferences -> Make it easier to find apps in my preferred languages) of voeg Engels toe aan je talen bij Control Panel\Clock, Language and Region\Language. Die laatste actie is sowieso handig bij een installatie van een Engelstalige Windows 8 met een Nederlandse locale. Ook het vertalen van de nu in het Engels uitgevoerde app staat nog op de wensenlijst.

Als je het iets vindt, schroom dan niet een reviewtje te plaatsen. Hierdoor maak ik meer (of beter gezegd: misschien enige) kans op het winnen van zo'n Surface-tablet, wat de ontwikkeling van deze en volgende apps alleen maar ten goede kan komen! ;)

Ook als je het niks vindt of problemen ervaart, hoor ik dat natuurlijk graag.

Volgende: Bankmail: spam van je bank 07-'13 Bankmail: spam van je bank
Volgende: Gedeelde directory voor NuGet-packages en automatisch packages downloaden 11-'12 Gedeelde directory voor NuGet-packages en automatisch packages downloaden

Reacties


Door Tweakers user Zerfox, zaterdag 05 januari 2013 19:34

Leuk dat je ook meedoet aan de AppRace!
Ik was zelf ook van plan om mee te doen met mijn zelfgemaakte Tweakers applicatie (die nog niet in de Store staat) met o.a: reacties, video's met 'PlayTo'-functionaliteit etc. Maar aangezien de tijd begint te dringen en ik bezig ben met mijn profielwerkstuk komt het er niet van. Vooral omdat Tweakers nu een Cookie notificatie stuurt waardoor ik comments niet meer kan uitlezen (daar baal ik nogal van :P).

Vraagje voor jou, ik kom van 'traditionele' windows forms, en ik heb een hekel aan commando's zoals:
this.Frame.GoBack();
this.Frame.Navigate(typeof(Pagina_Voorbeeld));
Heb jij een manier uitgevonden om 'frames' te sluiten? Ik vind het helemaal niets namelijk :P

[Reactie gewijzigd op zaterdag 05 januari 2013 19:36]


Door Tweakers user CodeCaster, zondag 06 januari 2013 16:03

Dat wordt een beetje uitgelegd in het MVVM-blog dat ik linkte. Als je een centrale navigatie bijhoudt die events ontvangt van de verschillende views, dan weet die navigatie welke view 'ie moet openen.

Dus in plaats van dat view bij een klik op de detail-knop zelf de navigatie gaat doen naar de detailview, wordt een event gegooid waarop de navigatie zich op heeft ingeschreven (en dan dus niet Button1_Click maar bijvoorbeeld PersonDetailClicked), waarbij het event voldoende parameters bevat zodat de navigatie weet naar welke view de gebruiker gestuurd moet worden en welk object daarvoor geladen moet worden (op basis van een ID bijvoorbeeld).

Door Tweakers user upje, zondag 06 januari 2013 16:17

Je weet dat Apple ook een product heeft dat Photostream heet?

Door Willem, zondag 06 januari 2013 18:13

Ik ga absoluut niet op jou stemmen. Windows (Phone) 8 heeft een groot gebrek aan kwaliteit 'modern UI' ("Metro") apps. Daarom ook o.a. deze competitie. Jouw app ontstijgt niet het niveau van een random 1995 shareware-prog. Veel mensen zitten niet te wachten op nog meer rotzooi, maar willen juist goeie, innovatieve apps die hun kunnen overhalen om naar Windows (Phone) 8 over te stappen, zo'n 13 in dozijn appje als die van jou zeker niet !!!!

Dus mijn stem krijg je niet sorry.

Door Tweakers user Wietsee., maandag 07 januari 2013 08:47

Willem schreef op zondag 06 januari 2013 @ 18:13:
Ik ga absoluut niet op jou stemmen. Windows (Phone) 8 heeft een groot gebrek aan kwaliteit 'modern UI' ("Metro") apps. Daarom ook o.a. deze competitie. Jouw app ontstijgt niet het niveau van een random 1995 shareware-prog. Veel mensen zitten niet te wachten op nog meer rotzooi, maar willen juist goeie, innovatieve apps die hun kunnen overhalen om naar Windows (Phone) 8 over te stappen, zo'n 13 in dozijn appje als die van jou zeker niet !!!!

Dus mijn stem krijg je niet sorry.
En wat heb jij zoal gemaakt? Deze mensen steken er hun vrije tijd ik, net zoals ik trouwens. Ik ben ook bezig met een Windows 8 applicatie, die ik schrijf in HTML, CSS en JavaScript.
Daarom zou een beetje waardering wel op z'n plaats zijn.

Door Tweakers user CodeCaster, maandag 07 januari 2013 11:09

Willem schreef op zondag 06 januari 2013 @ 18:13:
Ik ga absoluut niet op jou stemmen. Windows (Phone) 8 heeft een groot gebrek aan kwaliteit 'modern UI' ("Metro") apps. Daarom ook o.a. deze competitie. Jouw app ontstijgt niet het niveau van een random 1995 shareware-prog. Veel mensen zitten niet te wachten op nog meer rotzooi, maar willen juist goeie, innovatieve apps die hun kunnen overhalen om naar Windows (Phone) 8 over te stappen, zo'n 13 in dozijn appje als die van jou zeker niet !!!!

Dus mijn stem krijg je niet sorry.
Ik heb mij in mijn post al verontschuldigd voor het ietwat basaal zijn van de app, dus dat ga ik niet herhalen. Ik begrijp je reactie, maar ik ben ondertussen hard bezig aan de volgende versies, waarbij telkens functionaliteit wordt toegevoegd.
upje schreef op zondag 06 januari 2013 @ 16:17:
Je weet dat Apple ook een product heeft dat Photostream heet?
Photo Stream, ja. Ik ben nog aan het denken over een creatievere naam, maar dan moet ik eerst even kijken welke functionaliteiten er op korte termijn worden uitgewerkt.

Door Wietsee, maandag 07 januari 2013 18:36

"En wat heb jij zoal gemaakt? Deze mensen steken er hun vrije tijd ik, net zoals ik trouwens. "

Ik steek (lees: stak) liever mijn tijd in OPEN SOURCE en FREE (as in BEER not LUNCH) SOFTWARE, ipv me voor het karretje van Microsoft voor hun eigen gewin te laten spannen....Wees een SLIM mens!

Door Willem, maandag 07 januari 2013 18:39

en dan niet lullen dat programmeurs ook hun brood moeten verdienen, en dat bedrijven zus en zo winst. DENK NA. HET INTERNET was anders heel anders geweest dankzij alle OPEN SOURCE & FREE SOFTWARE (als in je mag er doen wat je mee wilt) (Apache, Sendmail, GNU, Linux - etc want ja daar is het waar het INTERNET OPDRAAIT). Anders zaten we nu allemaal vast in MSN Web (vroeger probeerde Microsoft Internet te eigenen met MSN Network; zoals Compuserve).

Door Tweakers user CodeCaster, maandag 07 januari 2013 18:50

Ik doe niet aan reacties verwijderen Willem, maar die van jou SCHREEUWEN er wel om. Ik zie daarnaast niet echt veel relevantie met mijn blogpost noch de overige comments, is er een bepaald punt dat je probeert te maken? Dat opensourcesoftware een goed principe is? Dat zul je mij niet horen ontkennen.

[Reactie gewijzigd op maandag 07 januari 2013 20:18]


Door Tweakers user Wietsee., maandag 07 januari 2013 20:02

Der is iemand die mij doet voordoen door bijna exact dezelfde gebruikersnaam, CodeCaster, ik ben de Wietsee. met punt in de gebruikersnaam. Even voor de duidelijkheid.

En heb niks met het bovenstaande schreeuwende bericht te maken.

[Reactie gewijzigd op maandag 07 januari 2013 20:05]


Door Tweakers user i-chat, dinsdag 08 januari 2013 08:13

waarschijnlijk zal het die willem wel zijn, en dan blaten over opensource ik geloof nooit dat ie al ooit een eigen kernel heeft gecompiled laat staan iets voor een linux platform heeft gebouwd, opensource blaten is zooooo gemakkelijk als anderen er tijd en werk in steken (en geld natuurlijk) want want als opensource free(as in beer) is dan is het geen software maar hobbyware, met overduidelijk de verschillen..

linux (door oa redhad, oracle, google) is nu niet bepaald gratis, er staan letterlijk honderde mensen op de loonlijst om die kernel te onderhouden en door te ontwikkelen, ik meen ooit te hebben gehoord dat meer dan 99% van de linux code door werknemers is geprogrammeerd

die discussie voeren in een blog over een hobby metro app, is ongeveer even zinvol als.... ja als wat eigenlijk... gezondheids-voorlichting aan terminaal zieken, de morning afterpil geven aan tieners die al bevallen zijn, en ga zo verder.....

Door Tweakers user LiquidT_NL, dinsdag 08 januari 2013 09:34

Willem schreef op zondag 06 januari 2013 @ 18:13:
Ik ga absoluut niet op jou stemmen. Windows (Phone) 8 heeft een groot gebrek aan kwaliteit 'modern UI' ("Metro") apps. Daarom ook o.a. deze competitie. Jouw app ontstijgt niet het niveau van een random 1995 shareware-prog. Veel mensen zitten niet te wachten op nog meer rotzooi, maar willen juist goeie, innovatieve apps die hun kunnen overhalen om naar Windows (Phone) 8 over te stappen, zo'n 13 in dozijn appje als die van jou zeker niet !!!!

Dus mijn stem krijg je niet sorry.
Wow, doe eens relaxt man. Er zit een verschil tussen zeggen "zou het niet beter zijn meer consistentie met de metro UI te hebben" en jouw reactie. "rotzooi", "1995 shareware", "13 in dozijn". Het is gratis, het is freeware (geen shareware), je MOET het niet downloaden.

pff je zou maar iets maken wat mensen misschien leuk vinden en biedt dit gratis aan zeg...

En je blaat over Free en Open, maar kan dit dan weer niet waarderen?

edit:i-chat hierboven slaat de spijker op zijn kop, gooi dit gewoon lekker tussen de reaguurders op Tweakers als MS met een of ander misproduct komt, niet bij een freeware home-brew app :S

[Reactie gewijzigd op dinsdag 08 januari 2013 09:36]


Door Tweakers user alwinuzz, dinsdag 08 januari 2013 15:11

Je schrijft vaak leuke blogs CodeCaster, deze ook weer. Trek je niets aan van die kneus in de comments. Als ik Windows 8 had zou ik gelijk je app proberen :)

Door Tweakers user Douweegbertje, woensdag 09 januari 2013 11:42

In feite is het een leuke 'les' voor je zelf, al mis ik persoonlijk nog wat dingen qua programmeren. Je app is vrij basaal, en eigenlijk (met alle respect) kun je het verkapt zien als knip en plak werk dmv bestaand werk hergebruiken.
Natuurlijk moet je als dev'r het wiel niet opnieuw uitvinden, maar zorg dan dat je er nog iets unieks aan toevoegt?
Ik mis vaak ook wel inspiratie, maar in mijn geval had ik dan als 'les' het zelfde gemaakt met een toevoeging erin.
Een voorbeeld is dat je er op zou kunnen gaan tekenen? Een verkapte paint overlay er in?
Ik noem dan maar wat he :+

Door Tweakers user CodeCaster, woensdag 09 januari 2013 13:14

Weet je wŠt knip- en plakwerk is? Zowat iedere andere app die ik zie. Eťn van de voorbeeldapps in Visual Studio zelf (File, New Project, Grid App) is een grid-app met foto's van 80x80 en 120x120 pixels met een half-transparant, grijs vlak over de onderkant van de foto met daarin een titel en ondertitel, en negen van de tien apps borduren daarop voort. Let maar eens op als je een simpele app downloadt.

Ik geef grif toe dat mijn app niet zo veel kan, maar ik heb dus nog een stapeltje nieuwe features in de wachtrij. Niet zozeer tekenen, maar bijvoorbeeld resizen hoort daar wel bij. Ik wil uiteraard iets toevoegen aan de store, dingen bieden die er niet zijn. Wellicht groeit het uit tot een alles-in-een-foto-app. ;)

Door Tweakers user Yohsoog, dinsdag 15 januari 2013 20:47

Ik begrijp het probleem van 'inspiratie'. Hoe vaak ik al gedacht heb eens een hobbyproject te starten om dan meteen weer tegen dat inspiratie probleem op te lopen ('want je wilt toch geen 13 in een dozijn applicatie maken'). Daarom toch wel respect dat je ergens mee begonnen bent. Je zegt in de beschrijving dat foto's gedownload worden (je moet ze ook tonen natuurlijk) maar wil dat ook zeggen dat deze achteraf op je toestel terug te vinden zijn of worden ze onmiddellijk weer verwijderd (vanwege copyright of diskspace redenen)?
Het zou wel interessant zijn om een download optie te hebben bij foto's met een geschikte licentie misschien?

(Heb de app nog niet kunnen testen vanwege een voorlopig gebrek aan een windows 8 machine, maar ik vond het wel interessant om te lezen.)

Reageren is niet meer mogelijk