← Všechny projekty
React Interní aplikace E-commerce provoz Kontrola expedice

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.

Interní aplikace pro kontrolu expedice 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.

React
frontend aplikace
Rails
stávající e-shopový systém
2021
začátek spolupráce
Frontend
moje role

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

React JavaScript Ruby on Rails HTML CSS REST API Git

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 z projektu Interní aplikace pro kontrolu expedice objednávek

Seznam objednávek

Přehled expedice z projektu Interní aplikace pro kontrolu expedice objednávek

Přehled expedice

Upozornění na množství z projektu Interní aplikace pro kontrolu expedice objednávek

Upozornění na množství

Dokončení expedice z projektu Interní aplikace pro kontrolu expedice objednávek

Dokončení expedice

E-shop Spořílek z projektu Interní aplikace pro kontrolu expedice objednávek

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 aplikaci