Labb4-21

  • Inlämningsdatum Inget inlämningsdatum
  • Poäng 18

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. 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.

Specifika krav

Demoapp inkl. förtydligande instruktioner i lämpligt sammanhang: https://booking-spring-boot.herokuapp.com/ Links to an external site.

  1. Ni skall implementera en SPA (single-page application) Links to an external site. m.h.a. Vue.js (front-end) Links to an external site. samt Node.js Links to an external site./Express.js (back-end) Links to an external site..
  2. När man navigerar till bokningssidan på klienten:
    • Alla bokade/reserverade/lediga tider skall hämtas från servern, m.h.a AJAX-requests.
    • Därefter så skall klienten uppdateras med nya/borttagna tider, m.h.a. websockets (socket.io Links to an external site.).
  3. När man försöker boka en tid på klienten så sker det följande i ordning:
    1. En AJAX-request skickas från klienten till servern 
      • Notera att ni inte får använda "this.$socket.emit" på klienten
    2. Servern avgör om reservering/bokningen får genomföras, och svarar med en relevant status kod Links to an external site., t.ex. "200 OK", eller "403 FORBIDDEN"
    3. Servern skickar ut ett event (via socket.io Links to an external site.) till alla anslutna klienter, m.h.a. "io.emit"
  4. Timeouten för en tid som är reserverad men ej bokad ska ske både på serversidan, samt på klientsidan för den klienten som har påbörjat bokningen.
    • 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 20 sekunder.
    • På servern: för att se till att tiden blir ledig igen även om klienten inte hinner slutföra bokningen inom de 20 sekunderna.
  5. Linting.
    1. ESLint skall användas.
    2. Dem ESLint regler som inkluderas i labb skelettet skall vid redovisning köras UTAN NÅGRA VARNINGAR ELLER FEL.
  6. Databas.
    1. Databasen SQLite skall användas.
    2. Alla queries skall vara säkra mot SQL injections.
    3. Alla registrerade admins skall sparas i databasen.
    4. Inloggning skall enbart tillåtas om det angivna användarnamnet och lösenordet finns registrerat i databasen.
  7. Inloggning.
    1. Vid lyckad inloggning:
      1. Inloggningssession skall skapas på serversidan och associerad kaka skall skickas till klienten.
      2. Användaren skall bli omderigerad till adminsidan.
    2. Vid misslyckad inloggning:
      1. Användaren skall visas ett felmeddelande.
  8. Utloggning.
    1. Det skall finnas en utloggningsknapp på adminsidan. 
    2. Utloggning skall enbart tillåtas för inloggad användare.
    3. Vid lyckad utloggning:
      1. Inloggningssessionen skall tas bort på serversidan, samt assosierad kaka skall invalideras på klientsidan.
      2. Användaren skall bli omdirigerad från adminsidan.
  9. Säkerhet.
    1. Det skall finnas ett middelware Links to an external site. på serversidan som hindrar ej inloggade användare från att anropa admin endpoints. t.ex. skapa nya timeslots, eller ta bort existerande timeslots

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.
  • Vue använder en unik filtyp ".vue" som påminner om HTML. Många editors/IDE har stöd för ".vue" genom extensions. Vi tipsar om VSCode Links to an external site., samt en vue extension vid namn Vetur Links to an external site.. Det finns även en start guide för Vue i VSCode Links to an external site.. 
  • Och kom ihåg att ni alltid kan be en assistent om hjälp om ni har fastnat med någonting.

Bonus

Notera: Börja med basuppgiften. Basuppgiften är svårare än tidigare labbar. Fokusera på den, innan ni överväger att göra bonus.

Ni skall separera eran serverkod från basuppgiften i två delar. Vardera del skall köras som sin egen server, och skall lyssa på sin egen port. Ni skall dela upp koden i en "applikationserver" och en "API server":

  • Applikationsservern: Skall servera vue klienten. Enbart detta.
  • API Servern: Skall hantera alla api interaktioner. d.v.s. inkommande REST-resquests, samt utgående websocket events.

Er klient skall då altså serveras från applikationsservern, samt komunicera med API servern. Notera att API servern INTE får servera klienten.

Den här förändringen kommer vara enkel på serversidan, men troligen lite trixig på klientsidan.

Förklara följande begrepp innan ni börjar

 

0

Matris

labbRubric (4)
labbRubric (4)
Kriterier Bedömningar Poäng
Description of criterion
tröskel: poäng
Redigera beskrivning av kriterium
18 poäng Full marks
0 poäng No marks
poäng
18 poäng
--
Ytterligare kommentarer
Poängsumma: 18 av 18