Scukařina, žádná dřina - díl první: agilně!

V červenci 2010 byla spuštěna webová služba Scuk.cz — průvodce po místech, kde se dobře jí a nakupuje (viz článek na Lupě Příkladně odstartovaný startup Scuk hledá dobré jídlo a pití). Jeho vývojáři nám v několika článcích představí, jak tento portál vznikal, jak při vývoji postupovali, jaké problémy řešili a jaké technologie volili a proč. Prvním dílem tohoto miniseriálu se vrátíme na začátek roku a podíváme se, jakým stylem začali projekt vyvíjet.

Díl první - agilně

Našim primárním cílem bylo vytvořit komunitní nástroj, s jehož pomocí budeme schopni doporučovat veřejnosti kvalitní podniky. I když jsme měli naše představy podrobně sepsány a daly by se přímo z nich vytvořit wireframy, nakreslit grafika i naprogramovat samotná aplikace, domluvili jsme se hned na počátku jinak: vytvořme co nejrychleji prototyp, který bude sbírat data, a teprve podle charakteru získaných informací navrhněme finální podobu aplikace.

Po dobu jednoho měsíce se proto ze mě stal informační architekt, návrhář uživatelského rozhraní, kodér a programátor. Pokud vás zajímá, jak se mi tento cíl povedl splnit, přeji příjemné počteníčko.

Poznámka: Scuk byl vytvořen s pomocí webového frameworku Django. I když se teď v jeho niternostech nebudeme nijak vážněji pitvat, určitou základní představu byste mít měli <flame>(pro ty co neví — je to takový lepší ROR)</flame>. Nápomocen vám může být seriál na Zdrojáku, přeložený tutoriál nebo oficiální anglická dokumentace.

Papír a strouhátko

Tak pojďme na to. Vyzbrojen propiskou a pastelkami konvertuji klientovo zadání do inženýrštější podoby, s modely a vztahy mezi nimi:

První návrh modelů Scuku

Po ujasnění hrubých rysů aplikace se vrhám k počítači a začínám od základu — popisu podniku (modelu):

from django.db import models

class Shop(models.Model):
    PRICE_LEVELS = (
        (u'$',   u'$ levné'),
        (u'$$',  u'$$ střední třída'),
        (u'$$$', u'$$$ luxus'),
    )

    title       = models.CharField(u"Název podniku", max_length=200)
    slug        = models.SlugField(u"Webové jméno", max_length=100, unique=True)
    description = models.TextField(u"Popis")
    web         = models.URLField(u"Webové stránky", verify_exists=True, blank=True)
    address     = models.TextField("Adresa")
    level       = models.CharField(u"Cenový rozsah", max_length=3, choices=PRICE_LEVELS)
    delivery    = models.BooleanField(u"Eshop/Rozvoz", default=False)
    created     = models.DateTimeField(auto_now_add=True, editable=False)
    updated     = models.DateTimeField(auto_now=True, editable=False)

    class Meta:
        verbose_name = u"Podnik"
        verbose_name_plural = u"Podniky"
        ordering = ['title']

    def __unicode__(self):
        return self.title

Hned poté rozjíždím administraci (stačí 3 řádky kódu) a vrhám se na views:

from django.views.generic.list_detail import object_list, object_detail
from models import Shop

def index(request):
    return object_list(
        request, 
        queryset = Shop.objects.all(),
        template_name='shops/index.html'
    )

def detail(request, slug):
    return object_detail(
        request, 
        queryset= Shop.objects.all(),
        slug=slug,
        template_name='shops/detail.html'
    )

Žádná revoluce. Útržky kódu jako by z oka vypadly hromadám tutoriálů na internetu.

Nicméně ono to opravdu stačilo. Krátce po nastřelení základní funkčnosti jsme byli schopni vkládat první podniky a díky interakci s daty opracovávat Scuk do jemnějších podob.

Rychle s tím ven

Kdybyste se mě tehdy zeptali, jaká bude architektura webu, jakou podobu budou mít URL, co bude na homepage, odpovědí by vám ve všech případech bylo: "Nevím".

Pokud navrhujete nějaký systém, začněte od toho nejdůležitějšího a na podružné věci se vykašlete. Zrealizujte co nejdříve jakous-takous funkční verzi a vystavte ji na web. Čím dřív zákazník aplikaci uvidí a začne si s ní hrát, tím dřív se ozvou problémová místa. Další výhodou je, že než se klient s prototypem seznámí, vyřádí & vyjádří, získáváte čas na implementaci dalších funkčních částí.

Stav Scuku po třech dnech vývoje ilustrují následující screenshoty:

Katalog podniků. Filtry na pravé straně stránky byly funkční, v horní části obrazovky jsme plánovali umístit Google Maps.

Detail podniku zatím zobrazoval pouze základní informace. Recenze ani hodnotící systém ještě nebyly zprovozněny.

Administrační rozhraní pro správu podniků. Z 90 % sestaveno ze standardních prvků aplikace django.contrib.admin, zbytek tvoří drobné libůstky z aplikací třetích stran.

Cuketka už mohl pohodlně plnit databázi podniky a kontrolovat jejich podobu ve veřejné části webu.

Vpád ukázněných hord

Čtrnáctý lednový den vpouštíme do Scuku beta testery. Není důvod tento moment dále odkládat — v databázi máme stovku záznamů a funkcionalita kolem publikování a hodnocení recenzí je hotova:

U podniku se již zobrazují recenze, které je možné 'palcovat'. Přihlášeným uživatelům je k dispozici formulář pro sepsání vlastní recenze.

Postupně doděláváme registraci nových uživatelů a přidávání podniků. Na detailních stránkách se objevují Google Maps, rozhraní posouváme do použitelnější formy jednoduchými jQuery skripty. Brány Scuku se otevírají širší komunitě uživatelů. Lidé nám prostým používáním aplikace pomáhají odhalovat slabá místa, ozývají se s návrhy na vylepšení. Přepracováváme hodnotící systém, protože nejsme spokojeni s algoritmem, který doporučuje kvalitní podniky.

V polovině února byl prototyp dokončen a šest měsíců nám spolehlivě sloužil. Za tu dobu dvacítka recenzentů naplnila databázi pěti sty podniky a šesti stovkami recenzí. Designér získal dokonalou startovací pozici v podobě velkého množství dat, funkčního prototypu a připomínek od uživatelů. Ale to už je zase jiný příběh...

Vše již bylo vymyšleno

Nic z popsaného by ale nevzniklo, pokud bych na cestu vyrazil pouze v doprovodu svého oblíbeného programovacího jazyka.

Pokuste se v průběhu vývoje oprostit od naivní představy "to si přece naprgám sám za 10 minut". No nenaprgáte! Fakt ne...

Programátoři rádi zapomínají na to, že realizace konkrétní funkčnosti je pouze jednou stranou mince. Jakmile se začne něco kazit, oceníte hotové testy. Pokud se ke kódu vrátíte po půl roce, rádi se začtete do existující dokumentace. A jak je možné, že uvnitř vašeho algoritmu byla chyba, které si měsíce nikdo nevšiml? Je to jednoduché: vidělo ji málo očí. Přesněji, pouze ty vaše. Na podobné souvislosti se v oněch deseti minutách tak snadno zapomíná (máte přece kopu práce s kódem, nerušit!)

Rozumnější je věnovat totožný čas hledáním hotových řešení a pročítáním publikovaných zkušeností ostatních vývojářů. Stoprocentně naleznete kvanta knihoven (django-registration, django-tagging), frameworků (Django, jQuery, Blueprint CSS) či služeb (Google maps, UserVoice, Tumblr, Basecamp, GitHub), díky kterým bude vaše aplikace dokonalejší a... rychleji hotova!

A to je jako všechno?

Není (pst, tenhle díl jsme záměrně sušili, protože je spíš pro vaše šéfy, víte?). Příště dojde na ryzí Django praxi. Máme v lednici naložena brilatní soustíčka, které vás nakopnou k efektivní práci, poradí vám, co platí na údržbáře od databází, a dojde taky na nějaké jedy. Na bugy jako.