Orderia
by AVLA
Adéla Kamenská
Vladena Benešová
Lucia Schoberová
Adéla Križanová
Kto je AVLA?
Team štyroch holiek, ktoré úplnou náhodou dala dokopy Vlaďka vďaka jej skvelému nápadu vytvoriť webovú objednávkovú aplikáciu pre B2B zákaznícky sektor. S veľkým prvotným nadšením sme sa pustili do dlhých hodín práce na projekte, ktorého aktuálnu verziu by sme Vám radi predstavili.
O čom je Orderia?
Orderia je webová B2B aplikácia pre malé dodavatele a odberatele, v ktorej sme sa snažili vytvoriť priestor pre jednoduché objednávky a vzájomnú komunikáciu, profily firiem a jejich produkty, jednoduchší systém reklamácií.
Ako sme postupovali?
Na začiatku nášho projektu sme mali obrovské nadšenie a optimisticky skreslenú predstavu o tom, čo všetko pre dotiahnutie Orderie do finálneho konca potrebujeme.
Projektovo sme si rozdelili úlohy, kde absolventky Digitálnej Akadémie — Web pracovali na frontende aplikácie a absolventky Digitálne Akadémie — Data si rozdelili databázu a backend. Všetky spoločne sme Orderiu brali ako osobnú challange, kde sme vedeli, že to nebude jednoduché, veľa sa priučíme a bude to stáť za to.
Všetko začalo tým, že sme spoločne pracovali na tom, ako chceme aby Orderia vyzerala a čo všetko obsahovala, ako bola členená. Dohodli sme sa, že aplikáciu chceme mať členenú na dve časti (jedna pre odberateľov, druhá pre dodávateľov), kde budú obidve vzájomne medzi sebou spolupracovať.
Viac-menej sú tieto dve časti identické, ale sú tam odlišnosti. Dodávateľ predsa len potrebuje väčšie možnosti, čo sa týka pridávania a spracovávania produktov a objednávok.
Naše schéma:
Databáza
Pro začátek práce na databázi bylo potřeba vytvořit schéma. K tomu jsme použily sqlDBM online schema designer. Po úpravách na základě připomínek frontendu a konzultaci s mentory toto schéma použilo jako základ pro vytvoření databáze v PostgreSQL.
Databázi jsme otestovaly, co se stability týče, vychytaly chybky a pro začátek jí lokálně uložily u naší členky zaštiťující data. Následně jsme začaly pracovat backendovém napojení.
Frontend
Celý Orderia projekt bol založený vo Vue, kde holky postupne začali vytvárať komponenty podľa dohodnutej štruktúry. Tie sa potom postupne začali plniť.
Počas toho, ako sa vytvárali komponenty, tak sa zistili veci, ktoré sme pred tým nevedeli. Hlavný kameň úrazu bol, že holky úplne celkom nevedeli ako to celé vyskladať, aby to dávalo zmysel a bolo to efektívne, ktoré komponenty majú byť spoločné pre dodávateľov aj odberateľov a ktoré majú byť naopak oddelené. Po praktických radách mentorov skončila väčšina komponentov spoločných a menia sa iba podľa toho, ktorý typ užívateľa sa pripojí.
Keď už boli hlavné otázky vyriešené, holky došli do bodu, kde začali riešiť, ako bude toto celé spolupracovať s databázou a backendom. Rozhodli sa používať Vuex, ktorý uľahčil prenos dát medzi jednotlivými komponentami vo VueJS, bez toho aby sa museli volať.
Po pripravení všetkých šablon sa holky pripojili na JSON server a zároveň si vytvorili aj cvičnú databázu, aby boli pripravené na prepojenie s reálnou databázou a reálnym backendom.
V tomto prostredí si skúšali prevolávať endpointy a zistili, že takto funguje všetko ako má a frontend je pripravený na spájanie.
Začatím prác na backende sa tiež začal vylepšovať frontend po vizuálnej stránke, kedy Adél úpenlivo pracovala na tom, ako to celé bude vyzerať.
Backend
Keďže ani jedna z členiek teamu neovládala backend dohodlo sa, že jedna si to vezme na starosti a naučí sa to. NodeJS znela voľba jazyka. Po hodinách a hodinách učenia a trénovania s jednoduchšími variantami kódu, prišla na rad reálna skúsenosť, kedy bolo potrebné vytvoriť Rest API, napojenie celého frontendu a zaručiť spoluprácu s databázou.
Na toto všetko sa holky dohodli, že bude použitá boilertemplate, ktorú si upravíme podľa seba. Žial nadobudnuté schopnosti nie úplne stačili na túto úlohu, aby sa projekt dotiahol do zdárneho konca v danom časovom limite. Preto sa holky dohodli, že kormidlo preberie Vlaďka a pokúsi sa napojiť databázu a aspoň jeden endpoint.
Napájanie databázi nebolo zrovna jednoduché, pretože sa veľmi ťažko obchádzala errorová hláška prihlasovania. Nakoniec sa napojenie podarilo a pomocou troch endpointov vieme načítať produkty z PostgreSQL databázy, editovať ich a tiež pridať nový produkt do databáze.
Kam sme Orderiu dostali?
Kvôli vyššie uvedeným komplikáciam a precenení síl sa nám nepodarilo Orderiu dostať do takého finále, ako sme si pôvodne predstavovali. Síce nie je napojená na serveroch, ale iba lokálne, no vo výsledku sa za tri mesiace podarilo Orderiu dostať veľmi ďaleko. Má funčnú databázu, premyslený frontend s pekným vizuálom a rozpracovaný backend.
Prínos jednotlivých členov AVLA:
Adéla Križanová
Frontend
V první fázi jsme společně v týmu vymýšlely vzhled aplikace, vybíraly barvy a navrhovaly layouty pro jednotlivé stránky. Následně jsme si s Vlaďkou rozdělily kódování stránek, kdy jsem měla na starost zejména vytváření formulářů (profil, přidání nového produktu, objednávka…). Po napojení na JSON server, který nám posloužil jako demo pro práci s REST API, jsme si opět sepsaly a rozdělily úkoly. Věnovala jsem se procesu vytvoření objednávky odběratelem, a s tím i nákupnímu košíku. Dále jsem pracovala na načítání dat do detailu objednávky a do úvodního dashboardu a také na přidání nového produktu. Rozpracovala jsem přihlašování a file uploader, obojí jsme se ale nakonec rozhodly dál řešit až bude hotový backend. Mým úkolem byla i vizuální úprava landing page, o které jsme měly nějaké představy, ale bylo potřeba jim trošku dát řád a styl. Ostatní části ještě čekají na své úpravy. Celkově bych na vizuální stránce aplikace rozhodně ještě ráda zapracovala, jak z hlediska vzhledu a responzivity, tak i UX.
Za celou dobu jsem nastudovala nespočet tutoriálů a přečetla hromadu článků a mám pocit, že jsem si neskutečně rozšířila obzory. Ověřila jsem si i to, jak je důležitý project management a že se určitě vyplatí mít někoho, kdo se věnuje zejména řízení projektu a zajišťuje komunikaci uvnitř týmu i navenek. V projektu bych určitě ráda pokračovala i po skončení Akademie, protože v něm vidím potenciál. Je na něm ještě spousta práce, ale myslím, že stojí za dokončení. Určitě je to i skvělá první zkušenost práce v různorodém týmu na komplexnější aplikaci.
Věci, které jsem si dostudovala:
Vuex, axios, REST API, JSON server, user authentication, file upload, programmatic scrolling
Věci, kde jsem si rozšířila znalosti:
Vue.js, Vuetify, HTML/CSS
Adéla Kamenská
Data
Práce na Orderii pro mne byla velkou výzvou. V datech pracuji, takže jsem zvyklá na MySQL i na Teradata prostředí, ale na živé aplikaci od začátku jsem zatím nikdy nepracovala. Mým hlavním úkolem bylo společně s holkami vybrat typ SQL databáze, která bude pro naše potřeby ideální, navrhnout datové schéma, sestavit databázi, otestovat stabilitu, databázi naplnit a do budoucna udržovat.
Při návrhu schématu databáze jsem se setkala s nečekaným problémem. Narozdíl od databází, se kterými jsem pracovala dříve, u Orderie nebylo potřeba pracovat s velkým řádek tabulek, ale bylo potřebovat chytře nastavit napojení jednotlivých tabulek a jejich propojení. Chtěly jsme databázi a aplikaci nastavit tak, aby existoval jednotný systém přihlašování a ukládání dat pro uživatele. Nakonec se mi tento problém pomohlo s pomocí mentorů překonat (viz. Screenshot ze schéma databáze v části data :)).
Dál jsem pokračovala sestavením databáze, nahráním testovacích data vychytávání drobných chyb, které by mohly v budoucnu způsobit nestabilitu databáze, nebo ovlivnit, jak se v ní data ukládají (jeden špatný varchar stačí :)).
Úkolem, který jsem nečekala, ale který nakonec také vyvstal, byla pomoc naší nové členky na backend, která má více zkušeností s frontendem, než s SQLkovými příkazy, které ale mimo jiné v backendu také potřebovala. Do budoucna mám v plánu se o naše data starat, databázi udržovat up-to-date a v neposlední řadě pomoci holkám při vytvoření statistických, responzivních grafů pro naši stránku v PowerBI.
Projekt mne naučil, jak lépe pracovat v týmu profesionálek z jiných odvětví. Byla to pro mne úplně první zkušenost s vývojem appky, ale rozhodně ne poslední.
Věci, které jsem dostudovala:
sqlDBM, PostgreSQL, enum, import a export z PosgreSQL, použití SQL kódu v backendu
Věci, o které jsem si rozšířila znalosti:
MongoDB, interaktivní použití PowerBI reportů online
Vlaďka Benešová
Frontend
Jako první krok bylo vytvoření struktury a logiky stranek, návrh celé architektury aplikace a následující soupis všech dílčích úkolů. Vytvořila jsem user stories pro lepší pochopení celé aplikaci, a na to jsem navazala strukturou REST API. Po nastudování Vuetify jsme rozvrhly první náčrt vizualni podoby stránek. Jelikož backend ještě byl v nedohlednu, napojila jsem Json-server pro nasimulování práci s backendem a napojení json dokumentu místo databazi.
Ze strany frontendu jsem měla na starostí hlavně stránky výpisu produktů, kartičku produktu, registraci uživatelů, soupis objednávek. K tomu jsem řešila celou architekturu frontendu, Vuexu a routeru.
Na konci jsem se vrhnula do backendu. Napojila jsem se na databázi PostgresSQL, upravila jsem boilerplate do vhodné konfiguraci a pro začátek jsem vytvorila endpointy pro načtení, editaci a přidání produktu. Určitě na stráně backendu mě čeká ještě spoustu práce, ale těším se na to a rozhodně plánuji v projektu pokračovát.
Věci, které jsem si dostudovala:
Vuex, Vuetify, axios, REST API, JSON server, Node.JS, Express.JS, komunikace s DB typu SQL
Věci, kde jsem si rozšířila znalosti:
Vue.js, VueRouter.
Aké máme plány s Orderiou do budúcna?
Orderia je skvelý projekt, ktorý nás potešil aj preveril. Vieme, že na nej chceme pracovať aj naďalej. Radi by sme dokončili, čo sa nestihlo — backend, napojenia, štatistiky, komunikačné rozhranie medzi dodávateľmi a odberateľmi a peknú vizualizáciu všetkých stránok. Následne by sme radi vypracovali business plán a dostali Orderiu na trh medzi reálnych podnikateľov.
Zdroje
Všetky holky v teame sme sa zhodli, že ono to nie je ako ked clovek ide do knižnice a prečíta si knizku na danú tému. Zvyčajne to bolo o množstve googlenia a nachádzanie rôznych typov ako ten ktorý problém alebo záležitosť zvládnuť a taktiež skúšania rôznych ďalších alternatív, keď predošlá nefungovala.
Stackoverflow, bezkoder, Youtube, Google, mentoři, kurz Vue a Backendu na Udemy
Link na náš projekt
