This post was originally published on Coding Glamour.

In de komende weken wil ik aandacht besteden aan het project waar ik op dit moment de lead voor ben: de herbouw van ons mobiele platform. Niet alleen puur technisch, maar ook een kijkje achter de deur wat betreft project management, planning en bepaalde keuzes. Vandaag deel 1: de kickoff.

http://www.100procentjan.nl/tweakers/mobiel_oud.png

Voortraject
In de afgelopen maanden heeft ons UX-team nagedacht over de specs, design en ondersteunde devices; wat resulteert in een Functioneel Ontwerp (81 pagina's), een volledig functionele demo (HTML) en een stapel telefoons om op te testen:
http://www.100procentjan.nl/tweakers/mobiel_telefoons.png

Kickoff meeting
Wanneer het voortraject klaar is wordt het projectteam (1 UX'er, 2 Devs, 1 Project Manager, 1 Tester) in een hok gestopt waarin er in een uur of twee door het FO en de demo wordt heengelopen. Vooral de demo is nogal prettig omdat alle interacties al zichtbaar zijn; bovendien is de opgeleverde HTML al productie-waardig (UX is verantwoordelijk voor de HTML en CSS) en kunnen we wat betreft de frontend-code al beginnen met knippen en plakken.

Architectuur
De keuze qua architectuur ligt in handen van de developers in het team, in samenwerking met de Software Architect. Binnen dit project heb ik allereerst mijn plannen beschreven in samenwerking met mijn fellow dev, en hierna vrij snel accoord gekregen vanuit SA. We kiezen binnen dit project om verder te bouwen op de API die we toch al op de plank hebben liggen en waarop momenteel de andere mobiele platformen die we hebben (iPhone, Layar) ook draaien. Voordeel hierbij is dat we ook voor deze platformen kunnen profiteren van de investeringen die we nu doen in onze service-laag.

Eh dus?
Dus gaan we ervoor zorgen dat onze website zo min mogelijk code bevat. Neem je als voorbeeld de resultaatlijst, dan ziet deze er globaal zo uit:
http://www.100procentjan.nl/tweakers/mobiel_nieuw.png
Dat betekent dus dat de informatie over:
  • Soort object dat je nu ziet ('Koopwoningen')
  • Beschrijving van je zoekopdracht ('Purmerend | ¤ 100.000 - ¤ 200.000 | etc.')
  • Vorige en volgende pagina (beschikbaar? nieuwe URL?)
  • Huidige pagina, en totaal aantal pagina's
Als nieuwe metadata moet worden toegevoegd aan de API. Wanneer we dit doen hebben we nauwelijks logica in onze website. De code van onze resultaatlijst wordt globaal iets als: 

<h1><%=Model.ObjectType %></h1>
<a><%=Model.Omschrijving %></a>
<div class="results-list">
    <% foreach(var obj in Model.Objects) { %>
        <% Html.RenderPartial("ZoekresultaatItem", obj); %>
    <% } %>
</div>
<a href="<%=Model.VorigeUrl%>">Vorige</a>
Pagina <%=Model.Paginanummer %> van <%=Model.PaginaTotaal %>
<a href="<%=Model.VolgendeUrl %>">Volgende</a>

Wanneer onze iPhone app van dezelfde metadata gebruik gaat maken hebben we bovendien altijd een consistente weergave.

Next up?
Nog geen idee, we zijn net begonnen :-)