Qest hackathon 2022

Když se sejde skupina vynalézavých programátorů, stojí za to. Jedno výživné setkání přineslo i sobotní odpoledne, kdy jsme se rozhodli podniknout náš první vnitrofiremní hackathon. K mání nebyla předepsaná zadání ani honosné ceny, přesto se během pár hodin programování vznikly báječné projekty. Posuďte sami.

Brainstorming a bleskový start

Jaké to celé začalo? Nejdřív jsme se potřebovali domluvit na tom, co vlastně budeme dělat. V rámci společného brainstormingu jsme si představili témata, technologie a nápady na různé projekty, které by stály za realizaci. Pak vypukla další zábavná část — a to přetahovaná o to, kdo bude s kým v týmu. Každý se snažil prodat svůj nápad a nalákat do týmu svého oblíbence, což mělo občas komický průběh. Na dlouhé vyjednávání ale nebyl čas, protože hodinky našeho hackathonu neúprosně tikaly. Za malou chvíli bylo vše rozhodnuto a kódování tak mohlo začít.

Pojďte si přečíst, na čem jednotlivé týmy pracovaly.

Tým Radima a Míry: Consolove

Radim s Mírou se pustili do projektu, který jim ležel v hlavě už nějakou dobu. Radim je zastánce vývojových nástrojů a často používá console.log, aby zjistil, co se děje uvnitř jeho kódu. Nikdy mu ale nevyhovovalo spuštění aplikace v debug modu a chaotická příkazová řádka. Tým proto přišel s návrhem jednoduché aplikace, která umí sbírat všechny console logy, zobrazí je v přehledné podobě, a navíc umožní vyhledávat a vidět další užitečné informace.

V rámci řešení začali Radim s Mírou sbírat všechny requesty a response, včetně všech meta informací, jako je headers nebo čas zpracování. Chtěli, aby aplikace byla co možná nejjednodušeji integrovatelná do jakéhokoliv projektu. Proto se rozhodli, že do startu aplikace dají jednoduchý import „consolove”.

Použité technologie:
K pushování jednotlivých logů použili http event stream (jedná se o navázání spojení se serverem, které se neukončuje, ale stále trvá. Podobně funguje například sbírání metrik pro prometheus). Fronted napsaný v react.js ukládá data do Indexed DB pomocí wrapperu Dexie.js a jeho funkcionalita umožňuje hned několik věcí: fulltext vyhledávání, filtrování dle typu a levelu logu, autoscroll (lze vypnout), zobrazení formátovaného json nebo třeba vyčištění logu. Vzniklý nástroj si tak poradil s odchytáváním requestů, a to včetně délky jejich trvání.

Řešení Míry a Radima se jim podařilo dostat do npm, a dokonce je částečně funkční. Posuďte sami: https://www.npmjs.com/package/consolove. Stačí doladit jen pár detailů. Řeč je třeba o sníženém performance aplikace při použití interceptorů http requestů.

Tým Cyrila a Toma: chytré IoT tlačítko

Tým ve složení Cyrila Urbana a Tomáše Hampla se vrhnul na projekt chytrého IoT tlačítka. Jedná se o tlačítko umístěné v kanceláři, které pomáhá svolat kolegy k oblíbeným kancelářským aktivitám. Stačí ho zmáčknout a tlačítko hned pošle do Slacku zprávu o tom, že jdeme na kávu do kuchyňky. Rychlé a elegantní, co říkáte?

Pokud se tlačítko zmáčkne dvakrát, tak se do Slacku pošle seznam karlínských restaurací. Název restaurace plní zároveň funkci odkazu na jídelní menu daného dne. Každý pak může pod příspěvkem hlasovat, pro to na co má chuť, a spojit se s lidmi, kteří chtějí vyrazit na stejné místo. To ale není všechno. Kromě odkazu na denní menu se tato informace stáhne a vloží přímo do Slacku, takže není nutné otevírat stránku dané restaurace.

Použité technologie:
Jak to funguje z hlediska technologií? Tlačítko provolá AWS Lambda funkci, ve které je skrytá scrapovací logika. Scrapování funguje tak, že se stáhne HTML s jídelním menu a pomocí knihovny Cheerio se následně vybere pouze ta relevantní část stránky, která obsahuje informace o jídlech daného dne. Tato informace se pak pomocí POST REST-API requestu pošle na Slack API, která zobrazí zprávu v aplikaci.

Tlačítko nám dělá dobrou službu ve dne i večer. Když se totiž zmáčkne třikrát, tak všem přijde výzva na pivo.

Tým Pepy, Jitky a Pavla: booking míst v kanceláři

V plné polní nastoupil rovněž tříčlenný tým ve složení Pepa, Jitka a Pavel. Ti se pustili do tvorby aplikace, která by umožňovala booking pracovních míst v naší kanceláři. Šlo tedy o jakýsi zjednodušený rezervační systém, kde by každý Qesťák měl možnost si na konkrétní datum zvolit svou oblíbenou sedačku.

Použité technologie:
Během vývoje aplikace se tým rozhodl vyzkoušet technologie jako Remix a Tailwind. Databáze byla dělána ve Firebase a grafický návrh kanceláří ve Figmě. Během dopoledne stihlo naše trio vytvořit úvodní stránku s přihlášením, grafický návrh a nastavení databáze. Po obědové pauze se vrhli do tvorby kalendáře, endpointů a interaktivního UI pro výběr preferovaného místa.

Čas ale utíkal jako voda, a i přes hodinové prodloužení původního deadlinu se týmu nepodařilo aplikaci stihnout včas. To ale vůbec nevadí, alespoň mají na příští hackaton na čem pracovat.

Tým Radka a Vítka: i18next editor

Na závěr tady máme tým Radka a Vítka, který pracoval na vývoji knihovny i18next. Proč si vybrali zrovna tento projekt? Při vývoji multijazyčných webových aplikací je totiž těžké udržovat texty pro všechny jazyky aktuální. Chtěli proto vytvořit nástroj, který by to měl jednou provždy zjednodušit.

Použité technologie:
Volba padla na knihovnu i18next, která podporuje načítání textů z API. Takže stačí, když aplikace provolá URL, ve které bude požadovaný jazyk a namespace a v response přistanou data v jsonu. Suma sumárum, i18next editor umožňuje vytvořit nový projekt (jako je naše webová aplikace) a v něm nastavit podporované jazyky. Potom už může kdokoliv mimo kód přidávat a editovat veškeré texty z aplikace.

Finální rovinka a vražedný deadline

My v Qestu máme rádi výzvy. Na samotné dokončení úkolů jsme si dali pouze 4 hodiny. Někteří si mohou povzdechnout, že na vývoj komplexnějšího řešení to nestačí. To máte pravdu. Tento šibeniční termín nám ale ukázal, jak důležité je jít přímo k jádru věci a umět pracovat pod tlakem. I za tento krátký čas se nám podařily navrhnout a vytvořit skvělé věci, co říkáte?

Chcete s námi spolupracovat? Ozvěte se nám na info@qest.cz 📩