kmom01 - kom igång

Vi ska i detta kursmoment starta igång kursen. Målet är att ha en snygg och fungerande förstasida till vår musik-webbshop i slutet av veckan.

Så här kan de se ut när du är klar med kmom01.

Läsa & titta

(Ungefär 6 studietimmar)

Kurslitteratur

I kursen används Designing interfaces: patterns for effective interaction design skriven av Tidwell J, Brewer C, Valencia A som kurslitteratur. Boken är tillgänglig som e-bok via biblioteket.

Läs kapitlarna:

1. Designing for People
1. Organizing the Content: Information Architecture and Application Structure

Dokumentation och referenser

MDN Flexbox är bra referensdokumentation för Flexbox.
Bra översikt över flexbox och de attribut som kan användas för att hantera element på en webbplats finns i CSS-tricks: CSS Flexbox Layout Guide .

Veckans genomgång

Tisdag eftermiddag har Emil genomgång av veckans material och uppgifter, efter genomgången laddas videon upp och finns här.

Veckans föreläsning

Onsdag eftermiddag håller Kenneth, Mattias och Emil en gemensam föreläsning, efter föreläsningen laddas videon upp och finns här.

Hållbarhet

Som en del av BTH’s uppdrag har 5 perspektiv på utbildning definierats: Hållbarhet, forskningsanknytning, samverkan, internationalisering och jämställdhet. Perspektiven integreras i undervisningen för att belysa dessa viktiga områden.

I jsux kommer vi fokusera på perspektivet hållbarhet och vilken roll vi som programmerare har i den sammanhangen.

Senare i kursen kommer vi se några praktiska exempel på hur vi som programmerare kan skapa en mer hållbar webb. För att vi har tillräcklig förståelse för vad hållbarhet innebär kommer vi under kursmoment 01-03 skapa oss en grundförståelse om hållbarhet och vad det innebär.

I följande video beskriver professor Johan Rockström jordklotets nuvarande status och hur vi påverkar det.

En plats att koda på

(Ungefär 1 studietimme)

Emil berätter i videoerna nedan hur du kommer igång med kursen.

Lämna in uppgiften GitHub Konto på Canvas

Steg för steg:

Logga in på GitHub med ditt studentkonto.
Öppna Settings och välj Emails i menyn till vänster.
Hitta din primary e-postadress. Det kan vara din student-adress hos BTH, men även en vanlig Gmail- eller Hotmail-adress, så länge det är den som är markerad som primary.
Kopiera adressen.
Gå till uppgiften “GitHub Konto” på Canvas och klistra in adressen i rutan. Det är det enda som ska stå där.
Tryck på Skicka uppgift.

Efter en stund får du en inbjudan till organisationen via e-post. Den hanterar du i nästa steg.

Acceptera inbjudan till organisationen dbwebb-jsux på GitHub

Steg för steg:

Öppna inbjudan i e-posten som skickades till din primary e-postadress. Det kan ta en stund innan den kommer.
Klicka på knappen Join dbwebb-jsux.
När du har gått med, autentisera ditt konto: klicka på Authenticate your account och sedan Single sign-on to dbwebb-jsux. Det här steget är viktigt, det gör att vi senare kan koppla ditt BTH-konto (Canvas) till ditt GitHub-konto och sätta betyg i Canvas.
Om du inte redan är inloggad hos BTH i webbläsaren skickas du till BTH:s inloggning och sedan tillbaka till GitHub. Logga in där så går det vidare.

Skapa din fork av repot dbwebb-jsux/webshop

Steg för steg:

1. Skapa forken

Gå till repot dbwebb-jsux/webshop på GitHub.
Klicka på Fork uppe till höger och välj Create a new fork.
Välj ditt personliga konto som Owner, inte organisationen eller något annat som dyker upp.
Du behöver ingen beskrivning. Lämna övriga val som de är.
Klicka på Create fork. När den är klar hamnar du på ditt-användarnamn/webshop och inte längre under dbwebb-jsux.

2. Aktivera Actions

Actions används för att publicera din webbplats på GitHub Pages, köra automatiska tester och föra över betyg från GitHub till Canvas.

Gå till fliken Actions i din fork.
Klicka på den gröna knappen I understand my workflows, go ahead and enable them.
Du ser tre workflows. Du behöver inte göra något med dem.

3. Slå på GitHub Pages

Gå till Settings för din fork och välj Pages.
Under Build and deployment väljer du GitHub Actions som Source.
Att repot är privat men den publicerade sidan publik är precis som det ska vara.

4. Tillåt publicering från kmom-brancher

Som standard får bara main publiceras. Du ska kunna publicera varje kmom-branch också.

Gå till Settings och välj Environments.
Öppna miljön github-pages.
Under Deployment branches and tags, lägg till en regel med mönstret kmom*. Den matchar kmom01, kmom02, kmom10 och så vidare.

5. Klona forken till din dator

Gå till fliken Code, klicka på den gröna knappen Code och välj SSH. Adressen ska börja med git@github.com:. Kopiera den.
Öppna en terminal och skapa en katalog för kursen och gå in i den:
Terminal window
```
mkdir jsux
cd jsux
```

Klona ditt repo med adressen du kopierade:

git clone git@github.com:ditt-användarnamn/webshop.git
cd webshop

Kontrollera att filerna finns med ls -la.
Starta webbplatsen med npm start. Du ska se en sida med texten att webbshoppen snart börjar.

En branch för kmom01

Börja kmom01 med att skapa branchen kmom01.

# stå i ditt repo
git checkout -b kmom01

Skriv namnet med små bokstäver och dubbelkolla stavningen. Kör sedan git branch för att se att du står i kmom01. Branchen finns än så länge bara på din dator. Du pushar upp den till GitHub när du lämnar in, se videon längst ner på sidan.

Öva

(Ungefär 6 studietimmar)

Gör övningen “Lager API:t” där du skaffar dig en API-nyckel och kopierar produkter till din webbshop.
Gör sedan övningen “Förstasidan för en webbshop” där vi tittar på design för en förstasida.

Uppgifter

(Ungefär 6 studietimmar)

Gör uppgiften “Typsnitt och färg” enligt kravspecifikationen och lämna in enligt nedan.
Gör uppgiften “Webbshoppen del 1” enligt kravspecifikationen och lämna in enligt nedan.

Nedan förklarar Emil hur du gör en inlämning i jsux.

Obs: I videon skriver Emil reflektionerna i beskrivningen av pull requesten. Numera skriver du dem i reflections/kmom01.md istället och behöver inte fylla i beskrivningen. Rapporten från uppgiften Typsnitt och färg ligger fortfarande i reports/kmom01.md.

Reflektera

(Ungefär 1 studietimme)

Svara på nedanstående frågor i filen reflections/kmom01.md i ditt repo, mallen med frågorna finns redan där, och ta med filen i din inlämning. Se till att du skriver 5-8 meningar per fråga om dina lärdomar och reflektioner. Vi vill inte läsa vad ChatGPT, Claude eller Copilot har för reflektioner, men vad ni har lärt er under veckan.

Vad är din största lärdom om “Designing for People” från kurslitteraturen?
Vad tar du med dig av lärdomar kopplat till design från att inspireras av en befintlig webbshop?

TIL är en akronym för “Today I Learned” vilket leksamt anspelar på att det finns alltid nya saker att lära sig, varje dag. Man brukar lyfta upp saker man lärt sig och där man kanske hajade till lite extra över dess nyttighet eller enkelhet, eller så var det bara en ny lärdom för dagen som man vill notera.

Vilken är din TIL för detta kmom?

Vilken återkoppling kan du förvänta dig?

I videon nedan berättar Emil om vilken sorts återkoppling du kan förvänta dig i kursen och om hur du som student kan få mer återkoppling.