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

Vývoj webu, to není jen naprogramování backendu a nakódování šablon. Omezit vývoj jen na čistě technické a technologické záležitosti by bylo hrubé zjednodušení problému vývojařiny. Pojďme se proto podívat podrobněji na vývoj jednoho takového projektu právě očima jeho vývojářů. Pojďte se podívat, jak vznikal Scuk.cz.

Seriál: Scukařina, žádná dřina (5 dílů)

  1. Scukařina, žádná dřina – díl první: agilně! 18.8.2010
  2. Scukařina, žádná dřina – díl druhý: Django je naše máma 25.8.2010
  3. Scukařina, žádná dřina – díl třetí: Djangová je náš táta 1.9.2010
  4. Scukařina, žádná dřina – díl čtvrtý: jiná práce s CSS 8.9.2010
  5. Scukařina, žádná dřina – appendix 15.9.2010

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.

Komentáře: 19

Přehled komentářů

dingo Nádhera...
srigi Nejde mi do hlavy
Martin Malý Re: Nejde mi do hlavy
srigi Re: Nejde mi do hlavy
Martin Malý Re: Nejde mi do hlavy
Michala ze Scuku Re: Nejde mi do hlavy
Martin Malý Re: Nejde mi do hlavy
msgre Re: Nejde mi do hlavy
Petr Praus Technická poznámka k views
msgre Re: Technická poznámka k views
Petr Praus Re: Technická poznámka k views
. Chyba na stránkách
msgre Re: Chyba na stránkách
veena Scuku, Scuku, kam kráčíš?
veena Re: Scuku, Scuku, kam kráčíš?
David Grudl Re: Scuku, Scuku, kam kráčíš?
cuketka / za Scuk tým Re: Scuku, Scuku, kam kráčíš?
mikiqex Re: Scuku, Scuku, kam kráčíš?
cuketka / za Scuk tým Re: Scuku, Scuku, kam kráčíš?
Zdroj: https://www.zdrojak.cz/?p=3302