Přejít k navigační liště

Zdroják » Různé » Scukařina, žádná dřina – díl první: agilně!

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

Články a Různé

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.

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

Subscribe
Upozornit na
guest
19 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
dingo

django, jquery, cufon, webfaction.com, vše mé oblíbené. Těším se na další díly seriálu…

Srigi

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í.

Toto mi trocha nejde do hlavy – hlavne ohladom tohto clanku od Adenta. Mohli by ste napisat ako sa vam nieco taketo podarilo. Alebo situacia opisana v tom clanku nie je az taka cierna ako Adent opisuje?

Martin Malý

Ale ono je to tam přesně napsané – před tím, než projekt odstartoval, bylo už dvacet lidí a plnilo obsah! Ti lidé nebyli „vzniklá komunita“, to byli „domluvení pomocníci“ – to je právě to „semínko komunity“, o němž jsem psal.

Srigi

Tak sa teda ospravedlnujem, necital som pozorne (iPhone + MHD :)

Martin Malý

Nic se neděje. U Scuku byla, jestli mohu ještě doplnit, podle mého výhoda v už existující komunitě kolem blogu pana Cuketky, z níž bylo snadnější vybrat betatestery a „ukázněné hordy“ uživatelů. Což by ovšem neměl být problém ani u jiných vznikajících webů – žádný z nich nevzniká v totálním vzduchoprázdnu a u každého lze najít „zárodečný krystal komunity“. Je potřeba s ním ale opravdu pracovat, ne čekat, že „sám přijde a udělá“. Pokusím se zeptat autorů, jestli by nechtěli připsat ještě jeden díl o tom, jak právě pracovali s tou zárodečnou komunitou…

Michala ze Scuku

Pokud by o článek o práci s komunitou byl zájem, myslím, že jsme schopní ho s Cuketkou dát dokupy. Teda hlavně Cuketka:)

Martin Malý

Právě jsem psal Michalu Valouškovi, jestli by o něčem takovém neuvažoval nebo jestli by nedoporučil někoho, kdo by takový článek napsal… :)

Petr Praus

Díky za zajímavý článek, jsem zvědavý co přinesou další díly.
Mám jen jednu technickou poznámku/dotaz ke kódu views: proč jsi je vůbec psal, když jdou namapovat přímo v urls a jen předat dict s klíčem „queryset“?

Petr Praus

Rozumím, zkrátka příprava pro další rozvoj :-)

.

Poznámka – nedávno jsem scuk.cz navštívil a zhrozil se nad dost nepříjemnou chybou. V horní části obrazovky vyberu filtr na typ podniku, např. maso. Na mapě si vyberu podnik, dám jeho detail a v tu ránu můj předvybraný filtr (maso) zmizí. Docela mi trvalo, než jsem přišel na to, proč když pak v mapě vyberu další podnik, je ten ze cela jiné kategorie (např. lahůdky).

veena

Super takovéhle představení aplikace. Jen si řikám, než se začlo kopat (programovat), neměl se udělat user research, zjistit, jaké potřeby má Scuk naplňovat a pak se zamyslet jak to má dělat? Udělat persony, prototyp a user testing? Možná na to nebyly peníze, možná se to dělalo, ale z článku to není vidět.
Já pořád nevim, komu je Scuk určen. Určitě ne když se chci během 15 min rozhodnout kam na večeři.
Zatím mi přijde, že byla aplikace dobře navržena pro recenzenty, ale už ne tolik pro uživatele.
Jakou pro mě má přidanou hodnotu mapa, že zabírá tak velký prostor na stránce? V čem jsou nějací anonymní hodnotitelé důveryhodnější než crowd? Každý člověk má svůj osobní pohled a preference zvlášť v oblasti restaurací a jídel. Pro mě je důležité hodnocení člověka, který má podobný pohled jako já. Nezajímá mě názor kdovíjak super odborníka, když se s ním neztotožňuji. Nebo chce snad Scuk duplikovat Maurerův Grand Restaurant? Nějaká „social“ vrstva na Scuku mi tak nějak chybí. A spousta dalších věcí. A nebo jsem prostě nepochopil účel nebo cílovou skupinu. Spousta otázek, které my zůstávají záhadou. Snad se odpovědi v budoucnu objasní. Ale každopádně respekt za práci, co jste do toho dali.
Kdybych měl dát příklad reputačního webu, který podle mě v ČR funguje nejlépe (ale tím neříkám, že tam není co zlepšovat), tak je to ČSFD.

veena

Tady na Zdrojáku by to taky mohlo umět převádět prázdný řádek na nový odstavec. Shame. I hate this.

David Grudl

plus jedna

cuketka / za Scuk tým

Díky za fajn dotazy! ;)
„User research“ proběhl v přirozeném prostředí blogu a lidí, čtenářů v prostředí gastronomie v průběhu několik let. Říkám, že jsme Scuku udělali „na objednávku komunity“ (nejen odborné), která si o něj říkala verbálně i neverbálně už delší dobu. Ostatně, úryvky dotazů a potřeb uživatelů, jejich citace, kde hledají dobrá místa („kde koupím steak“, „kde jít na dobrou indickou kuchyni“ etc.), jsme použili i v úvodní teasing kampani. Ty asi nejlépe vystihují užitnou podstatu Scuku, okolo které jsme obalili celé řešení.
„Nějací anonymní uživatelé“ jsou naši Scukaři, kteří prošli dvojitým vstupním filtrem a kteří prokázali, že jsou schopni podávat relevantní, autentické a praktické zkušenosti, ze kterých jsme na Scuku schopni sestavit smysluplná doporučení. Nestačí nám libí/nelíbí – čili jednoduché preference náhodných kolemjdoucích, jdeme hlouběji a v recenzích se spíše než preferencím věnujeme kvalitě. Identitu Scukařů také ověřujeme a průběžně s nimi pracujeme uvnitř Scuku. Dát dokupy katalog a zaplnit ho tisícem recenzí bez jakéhokoliv zásahu nebo dohledu shora není problém a takových projektů je tu bezpočet. Výsledná doporučená místa pak odpovídají preferencím a ne kvalitě – a to nás právě na Scuku nezajímá. Podle mého „crowd“ v oblasti doporučování udělá víc škody než užitku. Velkou část míst, která na Scuku máme, znám osobně. Výstupy a doporučení od Scukařů neustále srovnávám se svou zkušeností (a i když to zní blbě, tak musím napsat, že „odbornou“) a zatím se nám opravdu daří naplňovat cíl – dávat našim uživatelům na mapu jen to, co je ve světě jídla dobré. Doporučování na základě sociálních vazeb necháme klidně silnějším globálním hráčům, kteří na to mají prostředky.
Možná tento přístup není v dnešní době mainstreamový, na Scuku mu ale budeme dělat silného advokáta a věříme, že uspěje. Furt tady ale opakuju věci ze Scuk blogu, kde jsme vysvětloval vše podstatné už na začátku ;) Doporučuji k omrknutí – http://blog.scuk.cz/

mikiqex

Můj problém třeba s ČSFD je, že řada pětihvězdičkových filmů mě nechává chladným (Avatar) a u řady odpadů nevynechám jedinou reprízu. A věřím, že nejsem sám. Tím mířím k jakémusi dotazníku – „Ztotožni se se Scukařem“, který mi doporučí konkrétního hodnotitele, který má, řekněmě, podobné chutě. Stejně tak prolinkovat podobné podniky mezi sebou.
Hodnotitelé Scuku mají v mých očích punc Gordona Ramsaye a nejlevnější hodnocené restaurace tak čtu jako „pod 1000 Kč“. Jako řadového povrchního uživatele mě význam ikonek nezajímá a přiřazuji jim vlastní význam (určitě chápete, co mám na mysli :) Kromě toho by bylo fajn mít možnost filtrovat dle ceny (zobrazit na mapě jen jednokapkové podniky). Chci tím říct, že mám pocit, že to nebude nic pro mě, protože do žádných hogo fogo restaurací chodit nemusím. Vím, že to tak není, ale dojem je často silnější, než vědomí :) Prostě to tak na mě působí.
Mno, nerad klikám víc, než musím. Třeba štítky, které se mi po výběru zavřou. Navíc tam postrádám možnost „voda zdarma“, což, se přiznám, je taková moje úchylka :) Další chybějící štítek je „denní menu“ a „stravenky“ (nebo je přijímají všechny podniky?) Protože každý den řeším stejnou otázku, kam na oběd. Na Chodově se bude otevírat Kobe… neznám, rád bych si přečetl recenzi :)
No a na závěr, na webu se navíc cítím stísněně. Velké fonty? Nevím, možná. Tak snad vám můj slovní průjem bude k něčemu dobrý a držím palce do dalšího rozvoje.

cuketka / za Scuk tým

Michale, díky za všechny dotazy a připomínky :)
Rozložení podniků v cenových kategoriích je teď cca 24 % (levné), 63 % (střední) a 13 % (luxus). Jednokapkáčů bude v Česku pořád málo, protože provozovatelé i hosté mají rádi šunt. Na Scuk se snažíme dávat levné podniky, které opravdu stojí za to, ale kde to není na úkor kvality. Třeba v restauracích tam budou patřit etnická bistra, malá bistra a jednoduché české hospody.
Požadavek na filtr ceny ale bereme, je to určo praktická věc ;) Personalizace Scukařů je taky dobrý nápad, pokoumáme. Zatím můžete alespoň tak, že si můžete vybrat svého oblíbeného scukaře, který vás zaujal nějakou recenzí a jeho profil spodnik pak sledovat. Na specializované štítky a jejich snadnější využití se teprve chystám – zrovna s vodou zdarma počítáme už od začátku.
Co se týče dobrých restaurací na oběd za stravenky, tak to je na širší debatu. Obecně platí, že střední restaurace s vybaveným provozem, místem k sezení, s obsluhou a večerním provozem (tj. většina podniků u nás) si menu za 60 Kč si staví vlastní oprátku. Naštěstí už se objevují provozy, které jdou na obědy racionálně a dokážou cenu stlačit bez kompromisů na kvalitě. Počítejte ale s tím, že to dlouhodobě budou malá bistra, jídelny, bufety a fast foody.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.