Skip to content

kmom10 - projekt

I projektet bygger vi vidare på webbshoppen. Vi försöker få till “the finishing touches”, de små detaljer som skapar helheten.

Börja kmom10 med att skapa branchen kmom10.

Terminal window
# stå i ditt repo
git checkout -b kmom10
Play

Välj minst 2 av 4 krav för att få godkänt. Tillsammans med poängen för kmom01-kmom06 (totalt max 40 poäng) utgör de bedömningsunderlag för kursens slutbetyg, se översikten över bedömning och slutbetyg.

För varje krav dokumentera tydligt i din redovisningstext på GitHub enligt specifikationen i kravet. Vår rättning av projektet utgår från din redovisningstext.

Krav 1 är uppdelat i två delar 1A och 1B.

Välj ut fem delar av din webbshop du vill förbättra design och utseende på. Använd detta som ett sätt att få till de små detaljer som förbättrar helheten. Dokumentera under rubriken KRAV 1A i din redovisningstext med före och efter bilder samt en beskrivning av ditt designtänk på de fem delarna du förbättrat.

Skapa sidor för de tre kategorier av musikalbum som du inte valde för category.html i kmom02. På dessa sidor skapa ett passande tema som fungerar i både Light och Dark-mode. Ändra både färg, typsnitt och till dels layout för de olika kategorierna. Dokumentera under rubriken KRAV 1B i din redovisningstext val av typsnitt och färgpalett för de tre nya kategori-sidorna.

Tips från coachen: Använd variabler som i kmom02 och döp de till de olika kategorierna.

Gör en analys liknande den vi gjort tidigare i kursen där du använder samma mall. Skriv rapporten i reports/kmom10.md.

Välj tre (3) webbplatser, du behöver inte begränsas av tidigare kategorin webbshoppar. Beskriv ditt urval och hur du resonerat kring urvalet.

Analysera sedan 3 sidor från varje webbplats (totalt 9 sidor) avseende.

  • Färg och typsnitt (kmom02).

  • Filer som laddas ner (kmom04).

  • Tillgänglighet och Google Lighthouse (kmom05).

Skriv under rubriken KRAV 2 i redovisningstexten att du gjort kravet och om du lärde dig något specifikt under arbetet med analysen.

En stor del av en användarens upplevelse är när saker går fel. Lägg till felhantering i din webbshop för följande delar:

  • Felhantering av alla API-anrop till Lager-API:t och OpenAI-API:t med hjälp av try-catch för fetch. Se exempel på detta Using the Fetch API. Visa tydligt för användare om anropen går fel. Testa både genom att inte ha internet uppkoppling efter sidan laddats och genom att skicka felformaterat data.

  • När produkter läggs till i varukorgen får antal produkter inte överstiga lagersaldot. Lagersaldot finns som stock attributet på alla produkter från API:t. Se till att tydligt skriva ut/förhindra användaren i att beställa fler produkter än det finns i API:t.

Beskriv under rubriken KRAV 3 i din redovisningstext hur du gick tillväga och hur

Använd dina kunskaper från webtec-kursen för att göra en webbplats som fungerar på ett bra sätt på enheter i alla storlekar. Använd media-queries på ett bra sätt i din CSS-kod. För att anpassa bilder till olika stora enheter kan artikeln Responsiva bilder ge ett antal tips.

Dokumentera ditt tillvägagångssätt under rubriken Krav 4 i din redovisningstext.

Gör en Pull Request från kmom10 branchen mot din egna fork likt tidigare i kursen. Som en del av din Pull Request skriv följande reflektionstext:

  1. För varje krav du implementerat skriver du ett textstycke som uppfyller kravet. Poängsättningen tar sin start i din text så se till att skriva väl för att undvika poängavdrag. Missar du att skriva/dokumentera din lösning så blir det 0 poäng. Du kan inte komplettera en inlämning för att få högre betyg. Underlätta för lärarna som rättar genom att ha en rubrik enligt ovan för varje krav du gör.

  2. Skriv ett allmänt stycke om hur projektet gick att genomföra. Problem/lösningar/strul/enkelt/svårt/snabbt/lång tid, etc. Var projektet lätt eller svårt? Tog det lång tid? Vad var svårt och vad gick lätt? Var det ett bra och rimligt projekt för denna kursen?

  3. Avsluta med ett sista stycke med dina tankar om kursen och vad du anser om materialet och handledningen (ca 5-10 meningar). Ge feedback till lärarna och förslå eventuella förbättringsförslag till kommande kurstillfällen. Är du nöjd/missnöjd? Kommer du att rekommendera kursen till dina vänner/kollegor? På en skala 1-10, vilket betyg ger du kursen?

Spela in en redovisningsvideo där du berättar om ditt tillvägagångssätt för att implementera de olika kraven du har valt. Visa både funktionalitet och koden bakom. Bifoga videon i din inlämning via ett PR på GitHub.