Jak dvě „blondýny“ k webové appce přišly

Webová aplikace Týdeníček — absolventský projekt Kateřiny Bambáskové a Michaely Drápelové v rámci Digitální akademie Praha, podzim 2018 (Czechitas).

Díky Týdeníčku si můžete naplánovat, co máte každý den vařit a také si vygenerovat nákupní seznam z potravin, které vám doma chybí. Jednou týdně věnujete pár minut plánování a pak celý týden máte klid. :-)

Pokud si chcete přečíst, naše strasti a úspěchy při tvorbě aplikace, pokračujte ve čtení níže. Pokud vás tyto detaily až tak nezajímají, koukněte rovnou SEM a vytvořte si svůj jídelníček na příští týden. ;-)

Kdo jsme?

Kateřina Bambásková

Káťa je čerstvá absolventka VŠE, která nedávno začala s testováním software.

Od mala se věnuje americkému stepu a později i choreografii, ráda cestuje nebo hraje volejbal. Věří, že díky IT najde spoustu nových možností, kde může uplatnit svůj potenciál. >>linkedin

Michaela Drápelová

Míša je teď na rodičovské dovolené, při které se naučila HTML, CSS a nyní staví weby na Wordpressu.

Má ráda hory, cestování a akční život. Zajímá se o udržitelný způsob života a minimalismus nebo různé možnosti investování. >>linkedin

Do akademie jsme šly s tím, že nás v datové analytice zajímá vše. :-) Neměly jsme přesnou představu, jestli na konci akademie budeme chtít být analytičkami, nebo programátorkami, ale že uvidíme, co nás nejvíc “chytne”. Naším cílem bylo si „osahat“ co nejvíce toolů, činností a zjistit, co nás nejvíce baví a čemu bychom se chtěly věnovat.

A proč jsme se daly dohromady právě my dvě? Když jsme se tak jednou na začátku akademie zapovídaly na obědě, zjistily jsme, že jsme obě studovaly stejnou školu i obor (Diplomacie na VŠE) nebo že jsme obě před 10 lety hrály závodně volejbal. Krom toho jsme si vzájemně sympatické a prostě jsme si “sedly”. Možná i proto, že máme podobnou představu o tom, jakou práci bychom (typově) chtěly a co je pro nás v práci podstatné — možnost učit se nové věci, zlepšovat se a zároveň mít svobodu, která je pro nás obě podstatná.

Proč jídelníček?

Kromě toho, že máme trochu podobný background, máme také jednu společnou charakteristiku. Až tak moc nás nebaví vařit, teda hlavně vymýšlet, co budeme vařit, kdy na to nakoupíme a necheme každý den zoufale běhat do obchodu, že nám zase něco chybí.

Ale potom jíst, to nás baví hodně a nejlépe, pokud to jídlo je i zdravé (což se teda nepovede vždycky, však to znáte). Škoda, že to bez toho předchozího procesu nejde. :-) Takový ubrousku, prostři se, kdyby existovalo… (zasněný pohled)

A v tom nás to napadlo! Co kdybychom si vytvořily aplikaci, která by nám ten proces zjednodušila a provedla část práce za nás. My se toho spoustu naučíme a ještě z toho my i vy budeme mít něco praktického, co nám bude ulehčovat život. Win-Win.

Naše velkolepé plány, že aplikace bude málem sama vařit a nakupovat :-) nám pomohl usměrnit náš mentor Tomáš Frnka z firmy Billigence (kterému tímto děkujeme za rady). Vytvořily jsme logický rámec, jak postupovat, v jakém pořadí naplánovat jednotlivé kroky a hlavně dostaly jednu cennou radu — udělejte alespoň funkční BETA verzi a dotáhněte ji do konce. Tuto radu jsme si často připomínaly, když se nám data nezdálo dost dokonalá, nebo když jsme chtěly donekonečna upravovat už funkční, ale ne ještě „krásný“ kód.

A teď už zbývaly jen dvě “drobnosti” — vymyslet, kde sehnat data a také vytvořit tu aplikaci. Však jak říkám, drobnosti, nebo ne? Tak jdeme na to!

Odkud máme data a jak jsme je čistily?

Poté, co jsme vymyslely, že bychom rády vytvořily plánovač týdenního jídelníčku a navíc ideálně se zdravým jídlem (to je teďka moderní, ne?) vyvstala otázka, kde seženeme potřebná data. Napadlo nás si data postahovat z námi vybraných internetových stránek (které splňovaly naše kritéria o správnosti receptů), kde je plno receptů a v rámci jídelníčku pak odkazovat na recept přímo na dané stránce.

Naše představa, že takto získáme data z různých webů se pak zúžila prozatím na web jeden, protože jsou ty stránky psané různým způsobem, různým stylem a není tak snadné ta data získat. Jak a odkud jsme tedy data postahovaly?

Schéma použitých nástrojů

Vybraly jsme web fitrecepty.info a zjistily jsme aniž bychom to předem tušily, že naše volba nevědomky padla na web, ze kterého nebude až tak moc těžké data stáhnout, že jsme si mohly vybrat i hůř. Ovšem i tak bylo třeba umět JavaScript. No, takže rychlokurz a pomoc od Dana Vrátila (tímto mnohokrát děkujeme). Pomocí APIFY a web scrapingu jsme se tedy dostaly k psaní crawleru v JavaScriptu, kterým jsme procházely všechny kategorie receptů (obědy a večere, vegetariánské, snacky a další) a všechny stránky, protože těch receptů v každé kategorii bylo celkem hodně.

Strávily jsme díky tomu na dvouhodinových pracovních skupinkách hodiny čtyři a taky jednu krásnou neděli ve studijní kavárně. Náš hlavní crawler, díky kterému jsme získaly recepty, byl na světě:

Apify crawler v JavaScriptu na stahování názvů receptů, jejich ingrediencí, tagů a url.

Krom tohoto crawleru jsme napsaly také crawler na stahování ingrediencí zvlášť, abychom je mohly spárovat s jejich základním tvarem, tedy aby mezi surovinami nebyla lžíce soli, ale jen sůl.

Dále jsme scrapovaly i obrázky receptů a samostatné tagy, tedy jakési kategorie, ke kterým daný recept náleží a podle kterých je možné recepty řadit do skupin, filtrovat je nebo prostě jen vizualizovat, jaké recepty náš jídelníček obecně obsahuje.

Rády bychom získaly do budoucna recepty i z dalších webových stránek, musíme však napsat nové crawlery, protože to není nějaký univerzální zápis, naopak se musí konkrétně připravit pro danou stránku.

Poté co jsme data takto získaly bylo třeba se na ně důkladně podívat, zda a co je z nich třeba vyčistit. Proto jsme si data nahrály do Kebooly přes Extractors Apify. Zjistily jsme, že data vypadají docela dobře, zdálo se tedy, že bude snadné je vyčistit a vytvořit z nich jednu hlavní tabulku obsahující všechna data, která se nám budou dále hodit.

Keboola sandbox — čistění dat a tvorba tabulky se všemi potřebnými daty

Avšak i když data v Keboole vypadala dobře, čištění nám dalo chvilku zabrat, zvlášť když se SQL dlouho tvářilo, že nevidí tabulátory a některé mezery. Až v Pythonu se nám podařilo těchto znaků zbavit a mohly jsme dál pokračovat v práci s již pěkně strukturovanými daty.

Python transformace v Keboole na dočištění dat

A jak to bývá, několikrát jsme se vracely a tabulky předělávaly. Zvláště když jsme se trochu rozkoukaly ve Flasku a zjistily, že struktura naší navrhované databáze je špatně a že jdeme vymýšlet znovu. Nakonec jsme skončily u krásné verze číslo 5.1.2 :-)

Jaký byl další postup?

Teď už jsme tedy měly v ruce vyčištěná data a připravenou tabulku, která obsahovala všechna potřebná data k jednotlivým receptům. Vyvstala otázka, jak by měla naše aplikace vypadat.

Pro lepší představu o tom, co by aplikace měla obsahovat, co by měla umět a také vlastně co naše finální tabulka nabízí za recepty, jsme se rozhodly data nejprve vizualizovat v Tableau a vytvořit si takovou cvičnou “aplikaci” přes dashboardy. Po nalití dat do Tableau a join hlavní tabulky Jídelníček s pomocnou tabulkou Tagy, obsahující jednotlivé kategorie receptů a vyzkoušení prvních vizualizací jsme došly k závěru, že tagy scrapované přímo ze zdrojového webu nejsou pro nás úplně vhodné.

Tyto tagy byly velmi podrobné, rozdělené pro nás do mnoha zbytečných kategorií a vysledná vizualizace tak byla nicneříkající. Tagy jsme si tedy raději vytvořily samy, čímž jsme dosáhly jejich zúžení z téměř 100 na asi 19 hlavních kategorií, které už mají lepší vypovídající hodnotu a pomocí kterých bude možné jak ve vizualizaci, tak poté v aplikaci filtrovat recepty.

Kategorie receptů vizualizované v Tableau

Na této vizualizace jde krásně vidět, která kategorie receptů je početnější než ostatní a kde naopak máme jen několik málo receptů. Pokud vám připadá, že zřejmě nejvíce tam bude receptů v kategorii Dezerty, tak vám to připadá správně. :-) V prvotní verzi této aplikace si tedy všichni notně osladíme život a při dalším doplňování dat a rozšiřování funkcí aplikace, kategorie lépe vyvážíme.

V Tableau jsme pak tuto mapu kategorií propojily na dashboard zobrazující návrh naší aplikace. Na tomto dashboardu lze vidět název receptu, potřebné ingredience a foto receptu z webu. Abychom si vyzkoušely, jak by fungoval výběr pěti náhodných receptů jako týdenního jídelníčku v naší připravované aplikaci, jsme se rozhodly použít také funkci RANDOM společně s filtrem na výběr pěti receptů, což tedy vybere pět náhodných receptů z naší tabulky a zobrazí je na dashboardu s návrhem naší aplikace, jako kdyby to opravdu aplikace byla. Worksheet s tímto postupem a nápady co vařit tento týden vidíme níže.

Funkce RANDOM spolu s filtrem na pět receptů vybrala recepty na jeden týden

Škoda jen že udělat tuto vizualizace funkční z hlediska opakování random výběru pěti receptů není úplně možné, nebo jsme alespoň nezjistily, jak to udělat. Avšak to pro nás není úplně zásadní, protože pro představu jak by měla naše aplikace vypadat a fungovat to takto bohatě stačí. Tableau totiž jak asi tušíte není primárně stavěno pro vizualizaci nějaké budoucí aplikace, tak jsme byly vlastně překvapeny, co všechno se v něm vlastně dalo udělat ohledně simulace aplikace. Chtěly bychom tak poděkovat Zuzce Marvanové a Lukáši Havránkovi z Billigence za rady.

Výběr pěti náhodných receptů přes filter top 5 a funkci RANDOM — tedy co bude tento týden k obědu. :-)

S Tableau jsme si vyhrály poměrně dlouho, protože jsme postupně zjišťovaly, co by v něm šlo ukázat a nasimulovat a Kátiny otázky na Lukáše ohledně toho, jestli by tam mohla udělat to či ono byly někdy dost záludné a pravděpodobně by ráda Tableau přidala další funkčnosti, které by ale možná nikdo kromě ní už nikdy nepotřeboval. :-) No ale to bychom se k tvorbě aplikace asi nikdy nedostaly, takže bylo třeba se posunout dál.

Tvoříme aplikaci!

Když to vezmeme z časového hlediska, tak se právě nacházíme v posledním týdnu před odevzdáním tohoto blogu a nastává závěrečný pressure. Míša sjíždí videa ohledně Flasku a Káťa o HTML, CSS a Bootstrapu, protože nastává tvorba samotné aplikace.

Hodně jsme se věnovaly vizualizacím a hodně studovaly, pro nás, webové novinky, tak nám na samotnou aplikaci zbylo jen pár dní. Zřejmě to tak bude nejrychleji vzniklá aplikace ever. Snad si právě neříkáte, že je to na ní vidět, ale makaly jsme ostošest. Frontend vzniká metodou pokus omyl, ale Káťa to nevzdává a zlepšuje se podle slov okolí z hodiny na hodinu.

A to i když se technika spikla proti ní a GitHub, na kterém si s Míšou přeposílají postupné změny, jí hlásí error za errorem. Dokonce i takový error, který ani Dan prý ještě nikdy neviděl. Když vám tohle řekne programátor, co ví nejspíš úplně všechno, tak to je definice špatné zprávy. Dobrá zpráva ale je, že ví úplně všechno, takže i tak je schopný vám poradit a nakonec ten frontend nějak dobojujete. A dokonce se správně zobrazuje i na jiném než jen na vašem počítači. Na to, že je sobota a videa o tvorbě webu jste dokoukali před třemi dny, je to dobré skóre. Třikrát hurá…hurá…hurá!

Mezitím Míša tvoří backend. Základem byl online kurz na Udemy — Python and Flask Bootcamp: Create Websites using Flask!, který Míša poctivě celý zkoukla a upadla do lehké deprese, že toho, co se musí udělat, a hlavně pochopit, je fakt dost.

Stockoverflow má Míša přečtený i pozpátku a tak o pár dní později a pár šedivých vlasů více, začínájí vznikat základní stavební kameny naší aplikace.

Flask — nastatení databázových modelů

Z nejhorších stavů ji zachraňuje Ondra Šlejtr, kdy po dvou dnech vymýšlení, jak napojit databázi SQLite, se na to Ondra podívá a v podstatě stačí naimportovat jeden soubor do jiného a vše frčí jak má. Aby to nebylo zase tak jednoduché, rozhodne se Míša psát dotazy na databázi v SQLAlchemy a ne klasicky v SQL, které už zná. Jelikož v budoucnu předpokládáme přechod na jinou databázi, tak nám to SQLAlchemy velmi usnadní.

A v neděli už generuje jídelníček první náhodné recepty. Sice zatím na každý den po celý týden stejný, ale tak hlady už bychom neumřely. A máme ještě dva dny, takže to určitě stihneme vylepšit.

V pondělí přichází záhadné osvícení a najednou vše začne dávat čím dál větší smysl a Míša píše kód jako po másle. Netrvá však dlouho a objeví se hluboké zatmění. Tyto stavy se střídají stále dokola v dvou až pěti hodinových intervalech (včetně noci).

Další zkouška přichází při snaze o generování nákupního seznamu a zároveň udržení už vybraných receptů na stejné stránce. Po dlouhém a litém boji se sessions se na ně Míša, díky Danově radě, vyprdne a svět je zase krásný. Metodou tři kroky dopředu a dva zpět, se pomalu blížíme k cíli.

HURÁ UŽ TO FUNGUJE!

Úvodní stránka aplikace

Vzájemně si přepinkáváme kód, ladíme frontend i backend a tramtadadá…. Aplikace funguje! Zvládla úspěšně i deployment (umístění) na server na heroku.com a už je oficiálně na těch internetech pro všechny dostupná — https://tydenicek.herokuapp.com/.

Týdenní jídelníček, včetně potřebných surovin a odkazu na recept

V aplikaci se náhodně generuje pět receptů a dokud není uživatel spokojen může generovat do aleluja. Jakmile je s volbou receptů spokojen, zaškrne si v seznamu ingrediencí, ty co nemá doma zmačkne tlačítko a vygeneruje se mu nákupní seznam.

Nákupní seznam na příští týden

Máme hotovo! A jak to bude dál?

Naše aplikace teď už spatřuje světlo světa, je možné ji používat a tím ušetřit svůj čas i nervy (protože kdo by se chtěl po práci prodírat davem lidí v supermarketu a ještě přemýšlet nad tím, co to vlastně chtěl vařit, aby to doma všichni jedli a nikdo “neohrnoval nos”, že “zase rajská?”).

Ale má před sebou ještě cestu vylepšování, na které se vrhneme hned, jak si trochu odpočineme a potkáme s rodinou a kamarády, kteří už možná zapomněli, jak vůbec vypadáme. :-)

Jaké jsou naše nápady na budoucí vylepšení appky?

  • Rozšíření výběru receptů o další recepty z jiných webových stránek a aktualizování stávající databáze receptů.
  • Přidání možnosti nahrazení vybraných receptů z oněch pěti vygenerovaných novými, pokud na některý nemáme zrovna chuť.
  • Možnost zadání potravinové alergie, aby aplikace jídla obsahující tento alergen rovnou vyřadila z výběru.
  • Vytvořit funkci, která by umožňovala zadat, že mám doma určitou potravinu, například květák, a aplikace by pak automaticky do jídelníčku zařadila jídlo, které by ho obsahovalo.
  • Pro budoucí aktualizaci a rozšíření dostupných receptů vytvořit převodník tagů (tedy kategorií), do kterých jsou recepty zařazeny, přes číselník, který by jim automaticky přiřazoval jednu z námi stanovených kategorií.
  • A zároveň máme v Keboole připravenou orchestraci pro automatickou aktualizaci databáze, která spustí crawler, vyčistí data v SQL a následně v Pythonu a vrátí novou tabulku updatovanou o nové recepty.
  • Pokud bychom se hodně zasnily, mohly bychom vytvořit i uživatelské účty, které by si pamatovaly nastavení ohledně potravinových alergií, ukládaly oblíbené recepty či již vytvořené jídelníčky.
  • Jak vidíte, vylepšovat můžeme donekonečna a plánů máme hodně. :-)

Za závěr ještě jednou děkujeme všem lidem, kteří nám s vývojem této aplikace pomáhali. A hlavně také našim rodinám, které umožnily, abychom tuhle šílenou tříměsíční jízdu mohly absolvovat a zároveň bylo doma například co jíst nebo komu dát na hlídaní dítě. Díky Honzo, Vašku a Jonášku!