Lab 4: Fullstack med Vue och Express

Översikt

I den här labben ska ni bygga ett labbokningssystem för att kunna boka in labbtider hos specifika handledare. Om ni tänker göra bonusuppgiften är det rekommenderat att göra den samtidigt som grunduppgiften. För att komma igång med labben är det bra att kika i README:n i git-repot ni fått tillgång till.

Systemet ska bestå av 3 sidor:

• En bokningssida där studenter kan se handledarnas namn och vilka tider som finns för en handledare
• En bekräftelsesida där studenter fullbordar en bokning efter att ha valt en tid genom att ange sitt namn och trycka OK
• Adminsida där en handledare kan logga in med namn och lösenord och därefter redigera sina tider (ta bort/lägga till), på denna sida syns även vilka som bokat en viss tid

Webbsidan hanterar två sorters objekt. Assistant och TimeSlot. Ett förslag på struktur på datan är som följer:

Assistant {
  id: Number
  name: String
}
TimeSlot {
  assistant_id: Number // Foreign key
  id: String
  time: String // Tiden som visas för studenten 
  booked_by: String //Studentens namn
}

Dessutom saknar exempleprojektet någon databas. Detta innebär att alla användare samt chattrum sparas i minne och raderas när servern stängs av. Utöver det är det också möjligt att skapa en stor mängd användare och på det sättet fylla applikationens minne och få servern att krascha. Därför så ska ni skriva om hur modeller lagras genom att integrera en databas på serversidan. Av administrativa skäl behöver denna databas vara en SQLite databas, precis som i labb 3. Kom ihåg att commit:a era SQLite filer till Github för att vi ska kunna testköra er lösning!

* Vill ni slippa att skriva SQL-queries för hand? Titta på bonusuppgiften!

Bokningsflödet ska fungera som följande

1. En student går in på bokningssidan och får se alla assistenter och alla lediga tider.
2. Studenten klickar på en tid som hen vill boka varpå två saker sker:
   1. Studenten blir omdirigerad till bekräftelsesidan
   2. Med hjälp av websockets så blir övriga studenter som kollar på bokningssidan notifierade om att tiden är reserverad och just den tiden går inte att boka längre i deras UI.
3. Studenten på bekräftelsesidan har nu tre val:
   • Fylla i namn och trycka på OK varpå man skickar till servern att tiden är bokad och användaren blir omdirigerad till bokningssidan.
   • Vänta i 20 sekunder på en timeout varpå tiden blir fri igen och studenten omdirigerad till bokningssidan.
   • Trycka på cancel varpå servern skickar ut till alla anslutna att tiden är ledig igen med hjälp av websockets.

Som hjälp så har vi producerat en kort mockup-video som ni finner på canvas.

Specifika krav

1. use strict skall användas i alla javascript filer.*
2. ESLint skall användas. Samt de ESLint regler som inkluderas i labbskelettet skall vid redovisning köras UTAN NÅGRA VARNINGAR ELLER FEL.
3. Ni måste använda SPA (Single page application) ramverket Vue för er front-end.
4. Ni måste använda NodeJS med ExpressJS för er back-end.
5. Ni måste ha en förståelse för hur komponenterna hänger ihop och varför de är uppdelade på det sättet de är.
6. När man navigerar till bokningssidan så hämtas datan om lediga tider med en AJAX-request (d.v.s. en HTTP-request till er back-end REST API) och därefter så uppdateras listorna med nya/borttagna tider och vilka tider som är bokade via websockets.
7. Vid redovisning ska ni ha skapat åtminstone 2 handledare med 4 tider vardera innan redovisningen, detta för att det ska gå snabbare att redovisa.
8. Timeouten för en tid som är reserverad men ej bokad ska ske både på server och på den klient som har reserverat tiden. På klienten för att man enkelt ska kunna omdirigera studenten till bokningssidan om studenten av någon anledning inte hinner slutföra bokningen inom de 20 sekunderna. På servern för att se till att tiden blir ledig igen även om klienten inte hinner slutföra bokningen inom de 20 sekunderna. Mockup av förväntat beteende: lab4_demo.mov Download lab4_demo.movPlay media comment.
9. Eran hantering av tider, assistenter samt inloggningar för dessa ska uppfylla samma krav som kraven i labb 3. Alltså:

• Databasen SQLite skall användas, samt alla queries skall vara säkra mot SQL-injections.
• UTF-8 ska användas i hela stacken (frontend, backend, databas, osv); testa genom att använda ÅÄÖ i användarnamnet. Detta borde vara default på de flesta av era datorer, men dubbelkolla för säkerhets skull!
• Registrerade assistenter skall sparas i databasen.
• Inloggning skall enbart tillåtas om det angivna användarnamnet och lösenordet finns registrerat i databasen.
• Lyckade inloggningar skall automatisk omdirigera Links to an external site. användaren till dess profilsida (adminsidan i detta fall), medans misslyckade inloggningar skall visa inloggningssidan igen fast med ett felmeddelande.

10. Ni får hårdkoda assistenterna. Det finns alltså inget krav på att det ska gå att registrera nya assistenter på sidan.

OBS! Hashning samt saltning av lösenord ÄR ett krav för denna uppgift så alla lösenord ska hashas och saltas inför lagring i databasen. Tänk dock på att lösenord ska skickas i klartext** mellan klient och server, och sen hashas på serversidan.

* Node.js lägger till use strict automatiskt.

** I verkligheten måste ett sånt registerings/inloggningssystem tillämpa HTTPS protokollet för att se till att kommunikationen krypteras så att lösenordet inte går att kapa på vägen mellan klienten och servern, men det är inget ni behöver tänka på i denna labb. Ni kommer att få lära er om HTTPS i labb 5.

Tips

• Börja i tid, labb 4 är utan tvekan den tyngsta av alla labbar i kursen och den kan ta väldigt mycket tid!
• Börja med att experimentera med det givna exemplet innan ni börjar med själva uppgiften. 50% av arbetet är att förstå hur saker hänger ihop.
• Utgå eventuellt från exemplet och gör små inkrementella ändringar för att göra om exemplet till något som löser uppgiften. Det kan vara ganska svårt att debugga i början om man gjort stora ändringar.
• Kom ihåg att använda er av de tillgängliga devtools i någon modern browser, inspektorn kommer att hjälpa er mycket i denna labb. Det finns även Vue specifika devtools Links to an external site. för flera browsers som kan vara användbara.
• Och kom ihåg att ni alltid kan be en assistent om hjälp om ni har fastnat med någonting.

Testsekvens

1. Öppna 2 webbläsare (vanlig + inkognitoläge exempelvis)
2. Det under a görs i ena webbläsaren, det under b görs i andra
   a. Öppna bokningssidan
   b. Gå in i adminläget och lägg till en ny tid
3. 
   a. Se att tiden som lades till dyker upp med hjälp av WS(websockets)
   b. Gå till bokningssidan
4. 
   a. Börja boka en tid, du bör bli omdirigerad till bekräftelsesidan
   b. Se att tiden blir reserverad
5. 
   a. Tryck på cancel
   b. Se att tiden är ledig igen
6. 
   a. Boka en tid hela vägen
   b. Se att tiden är tagen
7. 
   a. Gå till adminsidan, kontrollera att namnet på den som bokade är korrekt och ta bort den bokade tiden
   b. Se att den bokade tiden försvinner
8. 
   a. Börja boka en tid, men låt bekräftelsesidan timea ut
   b. Se att tiden blir reserverad och därefter ledig igen
9. 
   a. Börja boka en tid, stäng därefter webbläsaren utan att bekräfta tiden
   b. Se att tiden blir reserverad och därefter ledig igen
10. 
    a. Starta om servern
    b. Se att all tidigare data finns kvar, d.v.s. att databasintegrationen fungerar korrekt

Anteckningar

• Ni får bygga mer funktionalitet än kraven i labben om ni vill (det resulterar dock inte i ett högre betyg, men kan vara kul och lärorikt och resultera i en glad assistent).

Bonus

Använd er av ORM (Object-relational mapping, förslagvis via npm paketet "sequelize" Links to an external site.) för att definiera och manipulera era modeller i databasen. Fördelen med en sån lösning är att ni slipper skriva SQL-queries för hand, samt ni får skydd mot SQL-injection på köpet. Coolt va?