Interní aplikace pro kontrolu expedice objednávek
Frontend interní React aplikace pro skladový proces Spořílka, která pomáhala kontrolovat produkty, EAN kódy a správné množství při expedici objednávek.
Shrnutí projektu
Ve Spořílkovi jsem získal první dlouhodobou zkušenost s reálným provozem e-shopu. Vedle běžného frontendového vývoje jsem se postupně zapojil také do vývoje interní React aplikace, která skladníkům pomáhala kontrolovat správnost produktů a jejich množství při expedici objednávek.
Detaily projektu
Kontext, problém, řešení a moje role v projektu.
Kontext klienta
Spořílek provozoval vlastní e-shopové řešení postavené na Ruby on Rails. Práce na projektu mi umožnila poznat, jak web a interní aplikace fungují v každodenním provozu nejen z pohledu zákazníka, ale také z pohledu skladu, objednávek a dalších interních procesů.
Kontext spolupráce
Spořílek běžel na vlastním e-commerce řešení v Ruby on Rails a expedice byla součástí širšího interního systému. Jedním z opakujících se problémů byly chyby při kompletaci objednávek, zejména u produktů objednaných ve více kusech. Skladník mohl správně vybrat produkt, ale omylem zabalit pouze jeden kus místo požadovaného množství. Cílem aplikace bylo doplnit expedici o jasný vícekrokový proces a kontrolu pomocí EAN kódů.
Řešení
Rozhraní bylo navrženo jako jednoduchý pracovní postup, který skladníka vede od objednávky až ke kontrole poslední položky. Aplikace zobrazovala produkty z objednávky, požadované množství a EAN kódy, umožnila postupnou kontrolu položek a výrazně upozorňovala na produkty objednané ve vyšším počtu kusů. Frontend v Reactu komunikoval s backendem napojeným na stávající Ruby on Rails aplikaci Spořílku.
Co jsem udělal
- Frontendový vývoj v Reactu
- Návrh a implementace vícekrokového průchodu expedicí
- Zobrazení objednávek a jejich položek
- Práce s informacemi o produktech, množství a EAN kódech
- Vizuální stavy správně a nesprávně ověřených položek
- Upozornění na vyšší počet kusů
- Responzivní rozhraní přizpůsobené skladovému provozu
- Průběžné úpravy podle reálného používání
Co jsem řešil
- výběr objednávky určené k expedici
- přehled položek z dodacího listu
- zobrazení požadovaného množství
- zobrazení odpovídajících EAN kódů
- postupná kontrola produktů
- upozornění na produkty objednané ve více kusech
- jednotný vícekrokový proces expedice
- frontend napojený na backend existujícího e-shopu
Hlavní výzva
Aplikace musela být dostatečně jednoduchá, aby skladníka při práci zbytečně nezdržovala, ale zároveň ho provedla kontrolou všech položek objednávky. Nestačilo pouze zobrazit obsah dodacího listu. Systém musel jasně ukázat jednotlivé produkty, požadovaný počet kusů, EAN kódy a stav kontroly tak, aby se minimalizovalo riziko přehlédnutí části objednávky.
Výsledek
Vznikl interní nástroj, který doplnil expedici o systematickou kontrolu objednávky. Aplikace skladníkům poskytla přehled položek objednávky na jednom místě, kontrolu pomocí EAN kódů, jasné zobrazení požadovaného množství a upozornění na položky s více kusy. Nejvýznamnějším přínosem bylo sjednocení kontroly a omezení situací, kdy byl expedován správný produkt, ale nesprávný počet kusů.
Poznámka ke spolupráci
Na projektu jsem spolupracoval s kolegou Matějem. Já jsem řešil především frontend a uživatelské rozhraní interní React aplikace. Matěj měl na starosti backend, práci s daty a napojení na stávající systém e-shopu v Ruby on Rails.
Použité technologie
Vybrané oblasti práce
Konkrétní části projektu, na kterých jsem se v rámci spolupráce podílel.
Seznam objednávek
Úvodní obrazovka interní aplikace umožňovala skladníkovi otevřít konkrétní objednávku a zahájit její kontrolu.
- výběr objednávky
- rychlá orientace ve frontě expedice
- navázání na interní systém e-shopu
Přehled položek
Aplikace zobrazovala jednotlivé produkty z objednávky, jejich požadovaný počet a identifikační EAN kódy.
- produkty z dodacího listu
- množství
- EAN kódy
- stav kontroly položek
Kontrola produktu a množství
Při průchodu expedicí skladník postupně kontroloval, zda vybraný produkt i počet kusů odpovídají objednávce.
- ověření správné položky
- upozornění na více kusů
- snížení rizika přehlédnutí množství
Dokončení expedice
Po ověření položek měl skladník přehled, že objednávka prošla celým kontrolním procesem.
- rekapitulace kontroly
- jednotnější pracovní postup
- návaznost na provoz skladu
Ukázky z projektu
Vybrané obrazovky interní aplikace pro expedici a kontext původního e-shopu Spořílek.
Seznam objednávek
Přehled expedice
Upozornění na množství
Dokončení expedice
E-shop Spořílek
Potřebujete interní aplikaci pro konkrétní firemní proces?
Pomohu navrhnout a vytvořit webovou aplikaci, která nahradí nepřehledný ruční postup a přizpůsobí se reálné práci vašeho týmu.
Probrat aplikaciDalší projekty
Vývoj funkcí na míru pro Renovality CZ a SK
Interaktivní test typu pleti, úpravy košíku pro slevové kampaně, produktové poradenství a další vlastní funkce pro český a slovenský Shoptet.
Dlouhodobý vývoj Shoptet e-shopů Buga a Buga Outlet
Kompletní implementace nového vzhledu, vlastní funkce nad rámec Shoptetu a dlouhodobý rozvoj hlavního e-shopu Buga i jeho outletové verze.