SWAPITO

Kolik máte doma věcí, které nepotřebujete, ale někdo jiný je shání? A naopak, kolik existuje lidí, kteří mají to, co chcete a nepoužívají to? A co, kdyby existovala snadná možnost, jak tyto lidi najít, zkontaktovat se s nimi a domluvit se? Šli byste do toho?

My ano a proto jsme se rozhodli si takové místo naprogramovat. Platformu, kde bude jednoduché nahrát inzeráty a chytře vyhledávat pomocí klíčových slov. A tak vznikl nápad na Swapito.

Logo Swapita

Swapování, neboli výměna zboží za zboží nebo služby je prastará metoda, která v naší digitální éře nabírá na popularitě. Je to zábava a navíc to šetří naši planetu, protože využíváme zdroje, které už tady jsou. Souzní to i s oblíbeným konceptem minimalismu. Jsou pořádané jak offline setkání, na které účastníci přináší věci vhodné ke směně, tak také existují online skupiny na facebooku, kde členové přidávají příspěvky se svými přebytky/poptávkami. Avšak zaužívaný portál neexistuje.

A tak jsme se spojili. Denisa Zábranská jako koordinátorka projektu a UX designérka, Michaela Drápelová jako Backend vývojářka, Žaneta Dvořáčková v roli data a databáze specialistky a Radka Melicharová spolu s Petrou Zemanovou jako Frontend vývojářky a Javascriptové nadšenkyně.

_________________________________________________________________

OBSAH ČLÁNKU:

1. PRŮBĚH
2. AKTUÁLNÍ STAV
3. CO SI Z PROJEKTU ODNÁŠÍME?
4. ZÁVĚR A PODĚKOVÁNÍ

_________________________________________________________________

1. PRŮBĚH

Naše dobrodružství začalo už při zadávání témat a směřování našeho tématu. Přemýšlely jsme i nad dalším tématem bazarového vyhledávače, avšak když jsme už povedenou verzi objevili, tak jsme si zvolili přispět svojí prací do světa swapu. Přemýšleli jsme, že bychom se připojili k již existujícímu projektu, ale ukázalo se, že by to nebylo v možné v takové formě, jaké jsme chtěli a tak jsme se rozhodli začít od začátku budovat nový web swapito.cz.

Druhým velkým tématem bylo zpracování a výběr technologii. Ke koordinaci projektu jsme si zvolili Jiru a Confluence.

Nejprve jsme provedli průzkum trhu ve velmi aktivní swapovací facebookové komunitě. Ohlasy byly pozitivní a velká část zúčastněných projevila zájem o přehlednější platformu, kde by bylo jednodušší swap domluvit.

Ukázalo se, že mezi hlavní potřeby swaperů (a které na facebooku nemohou využít) patří zejména: mít vlastní přehledný profil, mít přehled o probíhajících swapech a jednoduché a intuitivní ovládání.

Rozhodly jsme se proto pro progresivní webovou aplikaci, které umožňuje webovou stránku stáhnout jako aplikaci a vybrané funkcionality používat i offline, zasílat uživatelům do mobilu notifikace, využívat fotoaparát k okamžitému vyfocení nabízených předmětů a využít geolokaci pro jednodušší domluvení swapu.

Schéma architektury aplikace, jsme vytvořily v Miru. Denča vymyslela design webu a logo a pracovala s nástroji Just in mind, Proto.io a Figma. Míša si nastudovala a tvořila backend v Pythonu ve frameworku Flask.

Frontend a backend jsme vyvíjely odděleně a komunikují spolu přes Rest API. Jako databázi jsme zvolily Cloud Firestore od Firebase.

Kódy pro backend a frontend jsme si sdílely pomocí Gitu a využívaly jsme GitHub, ve kterém jsme se hodně zlepšily. Žanet vymyslela schéma databáze, i když jsme se nakonec rozhodly pro NoSQL databázi. Radka vytvořila kostru PWA aplikace, funkcionalitu přidání inzerátu i s obrázkem a následné zobrazení, dále pracovala s Míšou na propojení frontendu a backendu a nakonec vylepšovala kód drobnými funkcemi. Peťa vytvořila schéma aplikace, zprovoznila možnost registrace přihlášení přes email, Facebook a Google pomocí integrovaného Firebase UI, spolupracovala s Míšou na propojení mezi databází uživatelů a obecnou databází Cloud Firestore a navrhla základní design aplikace. Frontend aplikace jsme vytvořily ve Vue.js, pro nakódování UI jsme využily knihovnu Vuetify a pro validaci formulářů Vuelidate. Pro deploy jsme zvolily Netlify pro frontend a Heroku pro backend.

2. AKTUÁLNÍ STAV

Co jsme dokázaly do deadline?

Progresivní webová aplikace Swapito aktuálně umí:

• vytvořit profil uživatele přihlásit uživatele
• přihlásit uživatele a a vypsat jím přidané inzeráty
• přihlášený uživatel může přidat inzerát ke swapu
• přihlášený uživatel může updatovat své profilové informace
• ke swapu prozatím dochází, tak že přihlášený uživatel vidí email inzerenta a mohou se tam individuálně domluvit

Odkaz na Figmu: https://www.figma.com/file/7VvQesUjGUosektQIFU2Ki/SWAPITO

Odkaz na web: www.swapito.cz

Odkaz na GitHub — backend: https://github.com/Morielled/backendSWAPITO

Odkaz na GitHub — frontend: https://github.com/RadkaHrabcova/frontendDAprojektSwap

3. CO SI Z PROJEKTU ODNÁŠÍME?

V následující části každá za sebe odpovídáme na následující otázky:

→ Co byla pro mě největší výzva?

→ Za co bychom se pochválily, co bychom udělaly jinak?

DENČA:

Výzvou byl pro mě projekt sám o sobě, protože to byla zkušenost úplně z jiného soudku. Poprvé jsem koordinovala tým a navrhovala design webu. Koordinace týmu mě bavila, pravidelné meetingy byli vedeny v agilním duchu. Začínaly jsme s tím, kdo co udělal, zda potřebuje něco vyřešit a na co se chystá do dalšího meetingu. Design webu byl pro mě trochu větší oříšek, protože převést představu, kterou mám v hlavě do vizuálního náhledu není vůbec jednoduché (i když jsem si před projektem myslela opak :D). Začala jsem s PC softwarem, který mi poté, co jsem pochopila jak funguje začal házet error. “Co už” povzdechla jsem si a naučila jsem se s dalším online nástrojem, který však po 14 denní zkušební lhůtě zablokoval přístup k projektu a ja byla zase na nule. To mě už naštvalo, ale nakonec jsem se zasmála svému fuckupu, zeptala se mentorů na nástroj, který mají ověřený a konečně se dostala k Figmě, na které jsem dopracovala zbytek návrhů. S nástrojem se mi pracovalo velmi dobře, myslím, že ho v životě ještě zužitkuji!

Líbilo se mi, že při koordinaci jsem použila i své znalosti z psychologie a koučování věřím, že jsem svým kouskem přispěla k tomu, že v týmu nám panovala přátelská, svobodná a tvůrčí atmosféra :) Pokud bych mohla začít znovu, tak bych se dříve zeptala na doporučení mentorů na online nástroj, anebo hledala ověřený nástroj pro tvorbu designu.

MÍŠA:

Nejcennější na projektu, pro mě, byla možnost vidět a pochopit vývoje aplikace jako “celek”. Prošly jsme navrhováním architektury aplikace, zvolením, pro nás, vhodných technologií. Uvědomila jsem si, že neexistuje žádné správně řešení, že je vždy na konkrétním člověku, co preferuje a jak se s tím popere :-)

Jelikož jsem jako jediná z týmu už “z dálky” viděla vývoj backendu aplikace (Týdeníček) tak jsem se do toho úkolu pustila i tady. Díky znalosti Pythonu byla celkem jasná volba využít framework Flask.

Hlavní funkcionalitou backendu v naší aplikaci jsou REST API endpointy, které směřují dotazy z frontendu Vue.js do databáze Cloud Firestore.

Co mě ještě hodně posunulo byla možnost práce s gitem, testování vývoje lokálně a následné nasazení do produkce na server a debugging (hlavně jak a kde hledat chybu a co sní potom :-)). To jsou takové věci co se špatně googlí, jelikož člověk moc neví na co se má ptát a co vlastně potřebuje udělat.

Další velké plus vidím v možnosti vyzkoušet si vývoj aplikace ve větším týmu (5 osob) a velmi přínosné byly dva Hackathony v průběhu, kde jsme udělaly spoustu práce a měly možnost spolupráce v reálném čase a hlavně za přítomnosti mentorů.

ŽANET:

Pro mě byl celý projekt vhled do úplně jiného světa, běžně se pohybuji mezi tabulkami a relačními databázemi, ve kterých jsem ponořená a tady nakonec nebylo třeba, protože jsme zvolily NoSQL.

Zažila jsem realizaci celého projektu od návrhu designu až po předávání v týmu lidi a také pochopila, proč někdy projekty neskutečně dlouho trvají. Vidět a zažít kolik úsilí, rozhodování za každým projektem stojí byl neskutečný zážitek. Uvědomila jsem si, že vybrat správné nástroje je důležité pro správný chod aplikace, ale i týmu a spoustu času zabere sladění týmu a domluva spolupráce a samotný návrh aplikace. Projekt jsme stavěli na zelené louce, náš tým neměl žádného zadavatele zvenčí, jehož požadavky bychom měli splnit, takže jsme si to “musely” celé vymyslet a poté i udělat.

Osobně si z projektu odnáším především znalost a práci s nástroji pro týmovou spolupráci jako je Jira, Confluence a pro vývojáře tolik důležitý GIT a Visual Studio Code.

RADKA:

Největší přínos pro mě osobně bylo vyzkoušet si pracovat v týmu. Oproti digitální akademii WEB, kde jsme ve dvojicích pracovaly na frontendu a kód si sdílely v Gitu to byl obrovský rozdíl. Hned na začátku jsme musely vyřešit, jakým způsobem spolupracovat a zorientovat se, abychom mohly plynule pracovat na projektu a neztrácely se nám nabyté vědomosti a rozhodnutí o projektu. Díky tomu jsme se naučili pracovat s dnes rozšířenými nástroji Confluence a Jira.

Dále si velmi cením zkušenosti, že jsem získala celistvý obrázek o tom, jak se vyvíjí aplikace. Že mimo frontendu je součástí také backend a často i databáze a je důležité mít předem jasno, jak budou tyto části spolu komunikovat. Myslím si, že právě nad propojením frontendu a backendu do funkčního celku jsme strávily nejvíce studování, přemýšlení a úprav kódu. O to větší pak byla radost, když vše zafungovalo. A nakonec, když se na to podívám zpětně, to není ani tak složité :)

Od začátku jsem měla záměr tuto aplikaci vyvíjet jako PWA. Kromě toho, že PWA se v současnosti těší stále větší oblibě se mi na PWA líbí, že PWA aplikace kombinují výhody webových, nativních i desktopových softwarů. Fungují na všech zařízeních, klidně offline, rychle a bezpečně. Má i další výhody jako ikonu na ploše, push notifikace a další. Sice jsme s vývojem nedospěli tak daleko, aby nám naše aplikace fungovala offline, ale rozhodně mám o PWA daleko větší znalosti, než před projektem a máme ikonu na ploše:)

Dále jsem zjistila, že mě více baví tvořit logické části kódu než stylování a tak jsem se spíše věnovala tomuto. Vlastně s každou další metodou a funkcí jsem si něco zopakovala, nebo se naučila něco nového.

Do budoucna bych se chtěla naučit lépe kód debugovat. Možná by bylo dobré se tomuto tématu věnovat více i v průběhu projektu, protože na opravách chyb jsme strávily hodně času.

Velmi přínosné byly dny hackatonu, kde jsme díky podpoře mentorů a intenzivní spolupráci posunuli kód vždy o hodně kupředu.

Dále si myslím, že by bylo lepší, aby každý tým měl mimo přístup ke všem mentorům i jednoho “svého” mentora, který by měl přehled o projektu, jakým směrem se vyvíjí a případně mohl tým popostrčit nebo odblokovat. Zdá se mi, že jako pětice nováčků jsme se někdy zbytečně dlouho plácaly na jednom místě a ztráceli naději na úspěch.

I proto jsem ráda, že jsme to nevzdaly a vydržely až do konce. A i když naše aplikace splňuje jen zlomek toho, co jsme si na začátku “vysnily”, tak já jsem za náš tým moc spokojená.

PÉŤA:

DA projekt pro mě byl rozhodně zajímavou zkušeností a myslím, že jako tým jsme největší výzvu musely překonat hned na začátku při volbě tématu. Zatímco ostatní týmy si už vesele tvořily schémata a začínaly kódovat, my jsme stále neměly jasno, jakou podobu náš finální produkt bude vlastně mít. Dvakrát jsme téma musely změnit nebo upravit, aby výsledek našeho snažení měl nějaký reálný smysl a přidanou hodnotu. Po tomto škobrtnutí na začátku projektu už povětšinou vše probíhalo hladce, komunikace v týmu fungovala, každý přispěl tím, co mu bylo nejbližší a finální podoba aplikace se začala rýsovat. Mou osobní velkou výzvou bylo vůbec najít čas, kdy na projektu pracovat. Skloubit novou práci (kde bohužel pracuji s úplně jinými technologiemi), dálkové studium na VŠ a práci na projektu byl pěkný oříšek. Velmi mě však tato zkušenost posunula v oblasti time managementu. Nejvíc kódovací a programovací práce jsme definitivně odvedly na dvou oficiálních hackathonech, kde nám moc pomáhali mentoři a také v posledním týdnu práce na projektu, kdy jsme se scházely online skoro každý večer. Co se týče samotné práce na projektu — zabývala jsem se hlavně zajištěním registrace a přihlašování pomocí Firebase UI a správou uživatelských profilů a dále jsem prostřednictvím knihovny Vuetify navrhla základní design aplikace. S Firebase databází Cloud Firestore jsem měla již zkušenost z předchozího projektu, což byl jeden z důvodů proč jsme se ji rozhodly využít i zde. Další motivací bylo, že jsme chtěly využít integrované služby Firebase pro autentizaci uživatelů, abychom si trochu “ulehčily” práci vzhledem k tomu, že nikdo z nás neměl předchozí zkušenosti s řešením user managementu. Nakonec byla toto část práce, se kterou jsem nejvíce bojovala, protože jsme v aplikaci chtěly využít i funkce, které řešení Firebase neposkytuje — např. zjištění, zda se uživatel přihlásil do aplikace poprvé. Podobný pocit jsem měla i při implementaci knihovny Vuetify pro tvorbu základního designu aplikace, poprvé jsem díky ní ocenila direktivu !important a to ne v dobrém smyslu :D. Podle mého názoru, tyto “ready to use” řešení jsou využitelné v případě, že člověka tlačí čas a potřebuje mít “něco” hotové do určitého deadlinu, ale pro jakékoliv vlastní přizpůsobení funkce nebo designu jsou méně než ideální. Pro další rozvoj projektu bych tedy zvolila vlastní řešení autentizace uživatelů a správu jejich profilů pro zvýšení flexibility, stejně jako bych preferovala nakódovat si vlastní design a trochu se na něm “vyřádit” :)

4. ZÁVĚR A PODĚKOVÁNÍ

Především doufáme, že Swapito neskončí v propadlišti šuplíků a dějin a budeme dále pracovat na jeho vylepšením a dosáhneme cílů, kterých jsme si stanovily na začátku. Především bychom chtěly doplnit vyhledávání inzerátu samotnými uživateli pomoci klíčových slov a také uvést projekt do “praxe” a získat mnoho spokojených uživatelů.

Moc, moc děkujeme za super organizaci Aničce Mai a Pavlovi Chocholoušovi a celkově Czechitas za existenci :)

Chtěly bychom také touto cestou poděkovat především Zdeňkovi Sotolářovi, Filipovi Jirsákovi, Vlastovi Dolejšímu a Filipovi Chalupovi i všem ostatním mentorům za jejich rady a užitečné návody a trpělivost.

Za sebe bych chtěla poděkovat všem členkám týmu, kdy jsme 3 měsíce, týden co týden do projektu dávaly kus sebe a investovaly do něj čas, energii a mozkové buňky :) Jsme skvělé, že jsme vydržely a udělaly kus práce! Díky moc ❤

:D