Göm menyn

TDDE43 Design och utveckling av interaktiva system

Fas 5


Fas 5, utveckling av interaktiva system - Interaktionsmönster som GUI-komponenter

Den här fasen i projektet går ut på att självständigt utforska olika interaktionsmönster på en lite djupare nivå, inom ramen för en tänkt implementation av er prototyp. Tyvärr hinner vi inom ramen för kursen (tid och poängmässigt) inte implementera ett färdigt system (app) utan ni kommer att få fokusera på några av de olika komponenter i gränssnittet som krävs för specifika interaktioner med användaren.

Ni fortsätter att jobba i era labbgrupper/par, som utgör delar av er projektgrupp, liksom i fas 4. Varje par väljer ut en del av er design/prototyp från Fas 2-3, som ni fokuserar på. I den här delen av gränssnittet (som kan vara en specifik skärm/sida eller en specifik funktion) ska ni identifiera de interaktionsmönster som skulle kunna användas för att realisera gränssnittet. Det spelar inte så stor roll om flera par väljer att jobba på samma sida eller funktion, men ni får gärna välja olika delar. I projektinstruktionerna nedan finns flera olika föslag på vilka mönster man kan välja att fördjupa sig i, det är upp till dig att välja omfattning och uppgifter enligt betygskriterierna som står beskrivna nedan, och baserat på vilken del av er design/prototyp ni valt att fokusera på. Ni kommer alltså sedan att bygga de komponenter som kan ligga till grund för interaktionen på den sida/funktion ni valt, men vi hinner tyvärr inte med att även fokusera på design av resten av gränssnittet, underliggande data mm.

Instruktioner för implementationen i Fas 5 och betygskriterier

Här beskrivs kriterier för det olika betygsstegen, samt generella instruktioner för vad som ska göras. Tänk på att det inte bara är kvantitativa skillnader mellan betygsnivåerna utan även kvalitativa.

Det finns även ett exempelprojekt från den "gamla" kursen, där projektet inte var kopplat till ett specifikt designprojekt, att hämta (baserat på swing) här och readme-fil här , projektet är tänkt att motsvara de kvalitativa kraven för betyg 5, så för lägre betyg ställs inte riktigt samma krav på kodkvalité. (Prova att skriva "Hej" resp "Hejsan".)

Betyg 3

Du skall (tillsammans i ert par) på ett i huvudsak korrekt sätt implementera två interaktionsmönster med hjälp av Android SDK. Skapa sedan ett enkelt testprogram/applikation genom att implementera (en enkel version av) den sida/funktion som ni har valt att fokusera på från er prototyp, för att på detta sätt visa hur man kan använda er komponent (interaktionsmönster), observera att det ska vara tydlig skillnad mellan er generella komponent och den specifika tillämpningen i er designlösning/app. Du väljer själv vilka interaktionsmönster du vill implementera från ui-patterns. De mönster du väljer att implementera ska vara icke-triviala mönster och där du bygger större delen av UI-komponenterna själv, icke godkända är de som redan finns som en färdig komponent i Android. I ditt val ska du naturligtvis även utgå från den del av er design ditt par valt att fokusera på. Är du osäker om något mönster är för trivialt kolla med temaansvarig (Anders) på workshopen eller via mail. För varje interaktionsmönster ska du tillhandahålla tillräckligt med data så att det är möjligt att visa hur mönstret är tänkt att fungera. Använd de designmönster du anser vara lämpliga för att lösa uppgiften och som passar bäst till den design/prototyp som din grupp tagit fram. Din kod skall vara effektiv nog för att implementationen skall kunna användas. Koden ska följa gängse konventioner och vara godtagbart kommenterad med javadoc.

Val av interaktionsmönster De flesta mönster går att välja, det viktiga är att ni står för implementation själva. Det vill säga ni kan välja Module Tabs, men då får ni inte använda Androids TabHost för att lösa uppgiften. Tänk efter när ni bygger komponenten vad en annan programmerare kan vilja anpassa efter sina behov, tex om ni skulle vilja använda samma komponent på flera ställen i er tänkta app, eller till ett annat app-projekt senare. Kolla på hur Android bygger upp sina mer komplexa komponenter (List/ExpandableListView), (Default modeller/adpater, Rendrerare för att beskriva utseende, anpassa algoritmer osv). Nedan finns några exempel på mönster som har varit ganska vanliga historiskt sett i liknande kurser (samt några tips om vad ni kan tänka på).

  • Password Strength Meter
    • Hur byter man ut algoritmen för att avgöra hur startkt ett lösenord är?
    • Hur kan jag välja att visualisera styrkan av ett lösenord?
  • Carousel
    • Hur många element ska visas samtidigt?
    • Hur ska varje element visas, går det att byta ut?
  • Inplace Editor
    • Vilka element är editerbara, hur visas det ?
    • Kan du byta ut hur element editeras?
  • Shopping cart
    • Hur ser kundvagnen ut?
    • Finns det olika vyer av kundvagnen(liten, kompakt, full), hur ser de ut?
  • Input feedback (se Password Strength Meter)
  • Account Registration
    • Vilken data ska finns om ett konto (och vilka data-typer)?
    • Vilka fält ska vara obligatoriska?
  • Steps Left
    • Hur kan jag namnge steg?
    • Hur kopplar jag information till varje steg (vad ska synas vid steg 2)?

Implementationen genomförs i par, och koden godkänns först av assistenten men ska sedan redovisas individuellt vid en "munta" i januari. Ert resultat presenteras även tillsammans med resten av projektgruppen på den gruppvisa redovisningen i december.

Betyg 4:

För betyg 4 krävs att du gör allt som gäller för betyg 3 samt att du gör en av följande uppgifter:

  • React nativ/Flutter uppgiften (se nedan)
  • UI-testning för en av dina komponenter (se nedan)
Dessa uppgifter redovisas som individuella uppgifter vid "muntan" i januari, samtidigt som koden för betyg 3.

Betyg 5:

För betyg 5 krävs att du gör allt som gäller för betyg 3 samt att du gör *både* :

  • React nativ/Flutter uppgiften (se nedan)
  • UI-testning för en av dina komponenter (se nedan)
Dessa uppgifter redovisas som individuella uppgifter vid "muntan" i januari, samtidigt som koden för betyg 3.

React Native eller Flutter

Du implementerar en enkel bildvisare i React Native eller Flutter . Applikationen ska ha stöd för att kunna rotera och skala bilder. Koppla gärna bildvisaren till designen av er app, men det är inte nödvändigt att integrera den med exemplekoden (sidan/funktionen) ni byggt för betyg 3.
Din kod ska vara genomtänkt och effektiv. Det är upp till dig att förklara varför din lösning är tillräckligt bra. Koden skall följa gängse konventioner och vara korrekt kommenterad.

UI-testning

Du utför UI-testning av en av dina komponenter du har implementerat. Du ska använda dig av rekomenderade testningsverktyg/ramverk för android (UI-Testing). Dina tester behöver inte vara heltäckande men du ska visa förståelse hur man bedriver testning för gränssnitt.

Redovisning

Redovisa varje komponent/mönster du har implementerat, tillsammans med ditt test-program (sidan/appen) där du redovisar hur man använder din komponent/mönster, samt lämna in ev. skriftlig redogörelse (kod med javadoc), till din assistent. Sista ordinarie tillfälle ser du i schemat samt på hålltider-sidan till vänster i menyn, i övrigt kontakta assistenten i god tid för annan överenskommelse.

Examination: När du är godkänd av din assistent på de moment du gjort i projektet så kommer det ske en muntlig examination. Tidpunkter för den muntliga examinationen kommer att ligga i tentamensperioden i januari. Är du klar tidigt finns det möjlighet att i mån av tid examineras tidigare i kursen. Syftet med den muntliga examinationen är att säkerställa att du verkligen producerat arbetet och tagit till dig den kunskap som vi förväntar oss, därför sker den muntliga examinationen individuellt - dvs båda i paret ska redogöra för all kod som producerats. Dessutom presenterar ni även ert resultat tillsammans med resten av projektgruppen på den gruppvisa redovisningen i december.

Sidansvarig: Eva Blomqvist
Senast uppdaterad: 2021-10-13