2014

XD39NUR Semestrální práce Zimní semestr 2013/2014 Kamil Darebný [email protected]

Obsah Zadání ...................................................................................................................................................... 1 Deliverable D4 ......................................................................................................................................... 2 Vytvoření prototypu ............................................................................................................................ 2 Použité technologie ......................................................................................................................... 2 Popis prototypu ............................................................................................................................... 2 Screenshoty z prototypu ................................................................................................................. 3 State-transition network ................................................................................................................. 8 Zajímavosti řešení............................................................................................................................ 8 Testování ............................................................................................................................................. 8 Cíle testování ................................................................................................................................... 8 Testovací scénáře ............................................................................................................................ 8 Scénář 2 - Oblíbené ......................................................................................................................... 9 Vyhodnocení testů .......................................................................................................................... 9 Návrhy na zlepšení .......................................................................................................................... 9 Dokumentace pro vývojáře ................................................................................................................. 9 Funkční požadavky .......................................................................................................................... 9 Interakční design ........................................................................................................................... 10 Vizuální design ............................................................................................................................... 10 Prezentace ......................................................................................................................................... 10

Zadání Zadáním semestrální práce je navrhnout uživatelské rozhraní pro objednávání mraženého zboží z mrazírenských skladů do maloobchodů. Aplikace by měla být dostupná převážně na mobilní zařízení s operačním systémem Android. Měla by usnadňovat možnost výběru zboží - různé kategorie zboží s doprovodnými obrázky. Aplikaci by používali jak obchodní zástupci pro demonstraci zboží v terénu, tak i samotní klienti pro online objednávku.

1

Deliverable D4 Vytvoření prototypu Prototyp byl vytvořen pro platformu Android 4.1. Demonstruje základní funkcionalitu stanovenou v předcházejících dokumentech. Prototyp je omezen pouze na statická data. Žádná data se tedy nestahují online a ani se neobnovuje stav aplikace při opětovném spuštění. Použité technologie Pro tvorbu prototypu byl použit programovací jazyk C# .NET, nástroj Visual Studio 2013 a Xamarin.Android. Z pohledu architektury je použit MVVM. Aplikace využívá frameworku MvvmCross, která již obsahuje implementaci MVVM pro Android, iOS a Windows Phone 8. Popis prototypu V Hi-Fi prototypu je řešena následující funkcionalita:          

Navigace v katalogu během nákupu Přidávání do košíku Přidávání potraviny do oblíbených Smazání potraviny z oblíbených Přidání potraviny z oblíbených do košíku Náhled na košík Editace obsahu košíku Volba doručovací adresy Dokončení nákupu Náhled na login

2

Screenshoty z prototypu

3

4

5

6

7

State-transition network

Diagram 1 - State transition network

Z důvodu přehlednosti není v diagramu zachycen přechod mezi záložkami pomocí kliknutí na název záložky. Zajímavosti řešení Aby bylo možno zachovat přímý přechod z kategorie a položky do oblíbených a košíku, bylo potřeba implementovat view Nákup, Kategorie a Položka pomocí fragmentů. Při přechodu se pouze vyměňují fragmenty. Pro navigaci zpět z kategorie a položky se používá hardwarové tlačítko back.

Testování Cíle testování Cílem testování bylo ověřit návrh uživatelského rozhraní aplikace. Testy se zaměřily především na schopnost uživatelů provádět základní operace s aplikací. Testovací scénáře Scénář 1 - Nákup ze seznamu Nakupte 3x kornout vanilka a 1x Grand mix v čokoládě.

8

Scénář 2 - Oblíbené Uložte položku Grand mix v čokoládě a kornout vanilka do oblíbených. Poté odstraňte přidanou položku kornout vanilka z oblíbených. Položku Grand mix v čokoládě přidejte z oblíbených do košíku. Vyhodnocení testů Testování uživatelského rozhraní probíhalo na zařízení Sony Xperia Tipo. Uživatelé splnili oba scénáře. Při prvním scénáři bylo ověřeno, že navigace v položkách probíhala u obou uživatelů bez problému. Oba uživatelé hledali, jakým způsobem zadat množství při přidávání položky do košíku. Později tuto funkcionalitu objevili v košíku. Při druhém scénáři nebyl identifikován žádný problém. Návrhy na zlepšení Při přidávání položky by mohla aplikace nabídnout zadat množství. Aplikace by měla navíc podporovat snadnější zadávání většího množství kusů.

Dokumentace pro vývojáře Funkční požadavky Funkční požadavky zachycuje diagram 2.

Diagram 2 - Use case diagram

9

Z pohledu priorit je nejdůležitější podpora výběru předmětů z katalogu a nakupování. Interakční design Aplikace by měla využívat standardní ovládací prvky cílové platformy. Měla by podporovat tlačítko zpět při navigaci v katalogu. V aplikaci by měla být podpora pro přechod mezi jednotlivými stránkami Nákup, Oblíbené, Košík a Login pomocí tahu prstem doleva a doprava. Vizuální design Jednotlivé kategorie a položky v nákupu musí obsahovat kromě popisného textu i ikonu. Názvy položek by měly být větším fontem. Barvy a velikosti lze volit dle doporučeného nastavení platformy.

Prezentace Prezentace je dodána v samostatném souboru.

10