Monika Kremláčková & Ivana Pivolusková: LEGO aplikace

Téma a cíl projektu

Tématem naší práce je vytvoření webové aplikaci pro lidi, kteří rádi staví Lego a chtěli by k postavení nových sestav využít kostky, které mají již doma z jiných setů a rádi by si dokoupili pouze ty kostky, které jim k požadované sestavě opravdu schází.

Kdo nám pomáhal

Poděkování patří našim mentorům — byli jimi Tomáš Bončo a Marek Olejník. Bez jejich pomoci by projekt nevznikl.

Princip fungování aplikace

Uživatel do aplikace zadá kódy setů, které vlastní a zadá též kód setu, který si chce postavit. Aplikace na základě dat vyhodnotí, kolik kterých kostek si uživatel musí dokoupit, aby si daný set mohl postavit.

Aplikace též uvede:

  • údaje o setu, který si chce uživatel postavit spolu s fotkou setu
  • seznam chybějících dílků a jejich počet
  • odkaz na stránku, kde si uživatel může jednotlivé dílky samostatně dokoupit
  • odkaz na stránku, kde uživatel najde instrukce k postavení daného setu

Součástí aplikace je i záložka Analýza, kde jsou reporty vytvořené v Power BI, které obsahují analýzu následujících oblastí:

  • report s celkovou analýzou LEGO stavebnic
  • report, ve kterém si uživatel může vyfiltrovat informace, které ho zajímají
  • 5 reportů, kde jsou informace o námi vybraných setech
  • report pro děti — sety a počet dílků

Data

Aplikace využívá volně dostupná data ze stránky https://rebrickable.com/downloads/. Stáhly jsme si csv soubory obsahující informace o všech setech a kostkách. Tyto soubory jsme následně nahrály do SQL databáze.

Dále jsme využily data z https://brickset.com/instructions. Stáhly jsme tabulku ve formátu csv, která obsahuje instrukce k jednotlivým setům. Tuto tabulku jsme očistily o duplicitní hodnoty a pomocí joinu v SQL jsme ji přes primární klíč set_num propojily s ostatními tabulkami.

Pro zobrazování obrázků jsme si vytvořily ke každému setu URL adresu. Csv obsahující kódy setů a URL na obrázek setu jsme následně nahrály do SQL databáze.

Postup práce a použité nástroje

Počáteční návrh

Na začátku jsme si v nástroji Justinmind vytvořily vizuální návrhy webové aplikace. Tyto návrhy nám pomohly v dalších fázích projektu — při programování vzhledu aplikace a také při psaní kódu, který bere potřebná data z databáze.

V této fázi jsme se trochu přecenily, jelikož naším původním záměrem bylo nechat pole „vlož kód setu, který chceš postavit“ volitelné, a kdyby jej uživatel nevyplnil, aplikace by porovnala kostky úplně všech setů a nabídla takové sety, k jejichž postavení by uživateli chybělo nejméně kostek, s údajem procentuální shody kostek. V průběhu psaní kódu nám došlo, že toto je zatím nad naše síly, potřebujeme se v této oblasti ještě trochu dovzdělat. Ale můžeme na tom ještě zapracovat 😊

MS SQL

Prvním krokem bylo vložit stažené csv soubory do MS SQL a propojit je pomocí primárních a cizích klíčů. Výsledný datový model vypadá následovně:

Dalším krokem bylo určení údajů, které jsou potřebné pro fungování aplikace. Těmito údaji jsou:

Tabulka sets:

  • set_num = kód setu
  • name = název setu
  • year = rok vydání setu
  • num_parts = počet kostek v setu

Tabulka inventory_parts:

  • part_num = kód kostky
  • quantity = počet kusů dané kostky v setu
  • is_spare = kostka je/není náhradní

Tabulka themes:

  • name = název tématu setu

Tabulka instructions:

  • URL = URL adresy návodů

Tabulka pictures:

  • URL = URL adresy obrázků

Python

Následně jsme vytvořily skript v Pythonu, který dokáže po zadání kódu setu vybrat z databáze potřebné údaje. Pro připojení do databáze jsme použily pymssql se standardní windows autentikací. Jako backend framework jsme vybraly flask.

Ve flask aplikaci máme definovaný jeden http endpoint, který bere parametry přes url query. Flask vrací jako odpověď na požadavek přímo html s potřebnými Lego kostkami. Flask má příjemný development mód, v němž se dá rychle iterovat (pustí změny, mohu hned vyzkoušet). Pro vytvoření sql dotazů jsme použily jednoduchý templátovaný string řetězec. Je tam nebezpečí sql injenction, ale vzhledem k povaze projektu jsme to více neřešily. JSON, který nám python vrací, obsahuje chybějící kostky. Vypadá například takto:

Zde jsme zohlednily náhradní kostky, které jednotlivé sety mohou obsahovat, a počítaly s nimi pouze u setů, které máme. Náhradní kostky obsažené v setu, který chceme postavit, nepotřebujeme.

Power BI

K vytvoření analýzy jsme použily vizualizační nástroj Power Bi, do kterého jsme opět nahrály datový model. Výsledkem našeho snažení je několik vizualizací. Sloupcový graf nám ukazuje, jaké množství setů vydalo LEGO v průběhu let. Celkově vidíme stoupající tendenci. Nejvíce setů LEGO vydalo v roce 2014, nechme se překvapit, zda tento počet bude v příštích letech překonán. Další tabulka nám ukazuje cenu za jednotlivé sety v dolarech. Cena nejdražších setů je až 100 USD. Můžeme zde filtrovat jednotlivé země — ne každý set je prodáván ve všech zemích. Další sloupcový graf nám říká, která kategorie zahrnuje kolik setů. Vidíme, že rozhodně nejobsáhlejší kategorií je City, která obsahuje dokonce dvakrát tolik setů než druhá nejpočetnější kategorie. V další tabulce najdeme informaci o počtu kostek v jednotlivých setech. Největší set obsahuje přes 7 a půl tisíce kostek. A pokud bychom zakoupili všechny dostupné sety, vysypali kostky na hromadu a spočítali je, dostali bychom číslo 2 187 758 kostek. Toto číslo samozřejmě dále roste.

HTML a CSS

Na vytvoření webové aplikace jsme použily HTML a CSS. Po vytvoření vzhledu bylo nutné propojit script v pythonu s HTML a vypsat potřebná data. Níže uvádíme dva příklady, prvním je vypsání základních údajů o setu, který si chce uživatel postavit:

Druhý příklad zobrazuje, jak se vypisují kódy chybějících dílků a jejich počet do tabulky:

Finální verze aplikace

Uživatel si na úvodní stránce vybere, zda che analyzovat LEGO sety, nebo stavět — tedy zjistit, které kostky ještě potřebuje na postavení daného setu.

Po kliknutí na „Chci stavět“ se zobrazí stránka, kde uživatel zadá kódy setů, které má doma a kód setu, který si chce postavit. V případě, že například neví kód setu nebo neví, co si chce postavit, může si prohlédnout všechny kategorie v dolní části stránky. Po kliknutí na název kategorie se uživatel dostane na oficiální stránky Lega, kde se může prohlídnout všechny sety a případně zjistit kód setu.

Po kliknutí na tlačítko „Vyhledat“ se uživatel dostane na stránku, která mu zobrazí informace o setu, který chce postavit. V dolní části je tabulka, ve které se nacházejí všechny dílky, které uživatel doma ještě nemá — vypíše se jejich kód, barva a počet kusů.

Uživatel si ještě může kliknout na „Dokoupit dílky“ — dostane se na stránku, kde se jednotlivé dílky dají samostatně koupit.

Po kliknutí na “Stáhnout návod” se zobrazí ve formátu pdf návod na postavení setu, který si chce postavit.

Po kliknutí na „Chci analyzovat“ se uživatel dostane na stránky, kde najde námi vypracované reporty v PowerBI, které jsme vypublikovaly do webové aplikace.

Po kliknutí na “Všeobecné” se zobrazí první report, který obsahuje informace o počtu setů vydaných v jednotlivých letech, kolik setů je v dané kategorii, jaké jsou ceny setů a které sety mají největší počet dílků.

Po kliknutí na “Filtrování” se zobrazí report, kde si uživatel může filtrovat údaje podle roku vydání, názvu setu, kategorie setu a barvy dílku. V tabulce se následně zobrazí sety, které splňují vyfiltrované podmínky.

Sekce “Vybrané sety” obsahuje námi vybraných 5 setů, pro které jsme vypracovaly reporty. Každý report obsahuje název setu, obrázek, kód setu, rok vydání, počet kostek a informace o kostkách v setu.

Naše aplikace není primárně určená pro menší děti, ale rozhodly jsme se zahrnout i jeden report, který by právě děti mohl zajímat. Po kliknutí na “Pro děti” se zobrazí report s rybkami plavajícími v akváriu. Rybky zobrazují jednotlivé sety a čím víc dílků set obsahuje, tím je rybka větší. Uživatel si může vybrat kategorii Lega a datum vydání setu, a v akváriu se příslušné sety zobrazí jako rybky.

Co jsme se naučily

Naučily jsme se pracovat s databází, trochu programovat v pythonu, vizualizovat v Power BI, psát HTML a CSS… Ale hlavně jsme se naučily nelekat se chybových hlášek, a že jich bylo…, řešit problémy, dokud je nevyřešíme 😊 a pochopily jsme, že co může vypadat jako práce na 5 minut, může klidně zabrat několik hodin, možná i dnů…

Další možné rozšíření aplikace

Aplikaci je možné rozšířit o další funkcionality, například:

  • uživatel si sám určí, zda mu záleží na barvě kostek nebo ne
  • vytvoření uživatelského konta, kde si uživatel uloží sety, které má doma a které by chtěl postavit
  • možnost uložit si jednotlivé kostky, které si uživatel již samostatně dokoupil tak, aby aplikace při přepočtu uměla zohlednit i kostky mimo sety, které vlastní
  • přidání fotek jednotlivých kostek
  • více analýzy
  • přidání vlastního vymyšleného modelu včetně seznamu potřebných kostek a fotografie