TimeWarriors, Grupp 1

TimeWarriors, Grupp 1 Kund: Johan Leitet, Linnéuniversitetet Kalmar Projektgrupp: Mathias Sundin, Richard Söderman, Anton Larsson, Wictor Kihlbaum, Lucas Wik, Jonas Tornfors Handledare: David Grenmyr Kurs: Webbprojekt I, 1DV411

Sammanfattning Vi fick i uppgift att till vår kund, Johan Leitet som jobbar på Linnéuniversitetet i Kalmar, att utveckla flera system. Leitet har som vision att den nybyggda datavetenskapliga avdelningen nere i hamnen ska förmedla en teknisk och framtidsinspirerad känsla. Systemens uppgift blev att underlätta för elever och lärare att se om en sal är bokad eller inte. Systemet är även till för att underlätta för lärare under föreläsningar samt på ett enkelt sätt visa tillgängligheten på lärare. I denna projektrapport kommer vi att gå igenom vårt genomförande, de problem som uppstod, vad som gick bra och vad som gick mindre bra under arbetsprocessen. 1

Innehållsförteckning Ordlista: 3 Inledning/bakgrund/Syfte och mål 4 Projektorganisation: 5 Genomförande: metodik, teknik 6 Resultatbeskrivning/måluppfyllelse 9 Avvikelser/Efterkalkyl 10 Slutsats 11 Förslag på vidareutveckling 12 Eventuell övertagande organisation 12 Litteraturförslag/dokumentationshänvisning 12 Förslag till förbättringar inför kommande projekt 12 2

Ordlista: Närvaro klient En webbapplikation som visar kort av varje lärare och med hjälp av indikation av olika bakgrundsfärger på dessa kort så kan man se om en lärare befinner sig i skolområdet. TimeLamp En del i vårt projekt som sköter det mesta med lamporna. TimeEditAPI En del i vårt projekt som läser av TimeEdit. TimeEdit En schema applikation som Linnéuniversitetet använder. IFTTT (If this then that) En webbtjänst som finns på ifttt.com. Slack En chat applikation som finns på slack.com. 3

Inledning/bakgrund/Syfte och mål Johan Leitet har länge velat att de nya lokalerna i hamnen ska ha en väldigt modern känsla som nästan känns som framtiden. Det ska finnas elektroniskt frostade glas, visualisering av commits, en sida där man kan se närvaro på lärarna, en klient som ska filtrera ut frågor och problem ur en Slack kanal så att detta kan visas på en skärm under ett undervisningstillfälle och även lampor som visar tillgänglighet på salarna i skolan. Vi fick då i uppgift att sköta de tre sistnämnda, nämligen: skärmar med lärarnas närvarostatus, skärmar med Slack chat samt lampor som visar tillgänglighet på salarna. Lärarnas närvaro som ska visas på skärmar började som en annan idé: att det skulle visas med små lampor vid namn Blink(1) mk2. Men detta ändrades till att bara visas på en hemsida istället. När en lärare går in eller ur skolområdet ska denna sidan automatiskt uppdateras för att visa andra om dem är tillgängliga eller ej. Detta för att man inte ska behöva gå förbi de andra lärarnas kontor för att sedan mötas av ett tomt kontor där läraren man söker brukar sitta. Detta gör det lättare för både den som söker personen och även de som sitter i sina egna kontor som då slipper undra om den som går utanför deras kontor söker dem eller inte. Lamporna ska primärt vara styrda av salarnas scheman det ska vara enkelt för någon som är utanför en sal att veta om de kan sätta sig ner och jobba i salen eller om den strax är bokad. Detta ska då ske utefter salarnas schema på TimeEdit och ska visas med hjälp av Philips Hue lampor. Är en sal ledig de närmsta timmarna så ska salens lampa lysa grönt, är den inom ett tidsinterval när salen närmar sig en bokning ska den lysa gult och när tiden är knapp så ska den lysa orange för att sedan slå över till rött när salen är upptagen. Det vi har gjort är ett system som binder ihop TimeEdit och Philips Hue lamporna. När ett rum är bokat och lamporna indikerar detta ska lamporna också indikera om en elev har en ny fråga eller om det är problem på föreläsningens stream. Detta ska ske genom att läsa av den chatt som används under lektionen. Denna chatt är något som har ändrats flera gånger under projektets gång. Från Adobe Connect till LiveCoding men sedan slutligen till att endast använda sig utav Slack. Genom Slacks API så ska vi läsa av chatten för att se om en elev har en fråga eller om de skriver att det är något problem med streamen. Har tittarna en fråga eller meddelande om problem med streamen så indikeras detta genom blinkning på lampan i rummet. Detta för att läraren ska kunna fokusera på undervisningen utan att behöva hålla koll på sin skärm hela tiden för att se om det är något problem eller om det finns några frågor på distans. Här kommer även en till del upp med att de meddelanden som är markerade som frågor eller problem ska visas på en skärm i salen som läraren lätt kan läsa. Meddelandena ska 4

därför visas på en applikation som visas på skärmen och denna applikation ska också kunna styras genom en administrationssida där de kan ta bort besvarade frågor och lösta problem med video ström, eller framhäva frågor som de ska prata om. Allt detta ville Leitet ha gjort i Node.js och att det ska vara väldigt lätt att vidareutveckla om intresset och/eller behovet för det uppstår. Projektorganisation: Kund: Johan Leitet Handledare: David Grenmyr Projektgrupp(TimeWarriors): Lucas Wik Projektledare Anton Larsson Kund och kravansvarig Mathias Sundin Kund och kravansvarig Jonas Tornfors Testansvarig Wictor Kihlbaum Teknisk ansvarig Richard Söderman Teknisk ansvarig 5

Genomförande: metodik, teknik Tekniken vi har använt på efterfrågan utav kunden är Node.js och då föll det sig naturligt att använda sig utav JavaScript som standardspråk. Vi har också använt oss utav websocket i form av ramverket Sockets.io, då vi jobbar mot en klient som ska köras i samband med snabba uppdateringar. Vi såg Sockets.io som bästa lösningen då det näst intill uppdaterar i realtid. För enhetstestning valde vi att använda oss utav testramverket Mocha. Vi valde Mocha för att det såg enkelt ut och fick det som rekommendation från vår handledare att det var bra när vi nämnde att vi hade studerat det. Tanken var att i slutet av varje iteration skulle vi testa systemet och uppdatera de nuvarande testerna. En utav våra klienter valde vi att bygga med hjälp av frontend ramverket Vue.js. Vi valde Vue.js på grund av tidigare erfarenheter och dess enkelhet. Genomförandet av projektet har utförts med en kombination av Unified Process och SCRUM. Vi använde oss utav denna kombination då det är det som skolan har lärt ut och att vi kände oss bekväma att jobba enligt de modellerna. Vi har inför varje vecka skapat iterationsplaner som grund för att veta vad vi ska arbeta med under veckan. Då vi har jobbat med mer än en uppgift i vårt projekt samtidigt så valde vi att dela upp arbetsuppgifterna i mindre grupper. Det här skapade en förbättring då vi kunde parprogrammera och arbeta med flera saker samtidigt samt effektivisera vårt arbete så mycket som möjligt. Enligt vår planering kom vi fram till att vi behövde arbeta 20 timmar varje vecka per person. Det vill säga 180 timmar per person för hela projektet. De här 20 timmarna är bara effektiv arbetstid med våra krav och med vår dokumentation. Eftersom vi har arbetat mot en fysisk produkt har vi valt att installera denna produkt i en specifik sal. Detta har gjort att vi under projektets gång suttit i samma sal hela tiden. Vi valde även att alltid sitta ihop i samma sal för att delprojekten mer eller mindre hörde ihop med varandra. 6

Detta har varit vår arbetsstation då vi satte upp våra Philips Hue lampor här som kan ses vid fönsterna (sal 106). Iterationerna inleddes varje vecka med ett möte med vår handledare. Detta möte resulterade i att vi i gruppen delade upp uppgifter som sedan genomfördes under dagen. För oss var kundkontakten viktig och därför hade vi ett möte tidigt varje vecka med kunden angående uppgiften vi blivit tilldelade. Anledningen till att vi ville ha handledarmöte och kundmöte tidigt i veckan var för att vi skulle stämma av så att projektet ligger i fas och är i riktning med kundens tankar. Resterande av veckan arbetade man med de ändringar som skulle göras, vidare arbete med baskraven samt potentiella nya krav. Vi har inte haft några kontinuerliga leveranser till vår kund. Vi har dock visat upp arbetet varje vecka och berättat om vad vi gjort. Vi valde att arbeta enligt denna process för att stämma av med kunden om vi uppfyllde kraven och om vi implementerade de funktioner som efterfrågades. Vi har fått riktlinjer utav vår handledare och kursansvarig och vi anser att riktlinjerna varit till mycket hjälp under projektets gång. Vi tyckte även att riktlinjerna var mycket tydliga. När det kommer till de olika delarna i projektet så har vi TimeLamp, Slack Reader, TimeEdit och IFTTT API. Alla delar är byggda med hjälp utav Node.js men de alla har sitt eget sätt hur de är uppbyggda. TimeLamp är en modulbaserad kontroller över Philips Hue lamporna. Med hjälp utav TimeEdit API:et skapas ett schema för TimeLamp som styr lampornas egenskaper. Uppgiften för vårt IFTTT API är att ta emot anrop från IFTTT tjänsten. Dessa anrop skapas av användare för närvaroklienten då de innehåller data som ska ändra status på en lärare. Den information vi är intresserade av är om en lärare är inom en radie för skolområdet eller ej. Vi är även intresserade om läraren befinner sig inom en radie för ett skolområde på annan 7

ort. Den här informationen skickas sedan vidare till en klient med hjälp utav websockets för att kunna uppdateras i realtid. Slack Reader läser av samtliga kanalers skickade meddelanden i team CoursePress. Detta sker med hjälp av Slacks real time messaging API vilket är websocket baserat. De skickade meddelandena hanteras enbart om de innehåller #!, #? och #I. Meddelanden som innehåller #? presenteras på en skärm som föreläsare sedan enkelt kan se utan att behöva stå vid en dator. 8

Resultatbeskrivning/måluppfyllelse Det vi har utvecklat är som tidigare nämnt uppdelat i fyra olika delar och vi kan stolta säga att alla fyra delarna har uppfyllt sina krav och blev redo för leverans. Vi lyckades med att tackla alla de nya krav som tillkommit under projektets gång. Som vi nämnde tidigare har vi arbetat i iterationer veckovis med 20 timmar för varje person. Varje vecka kunde inte alla nå upp till 20 timmar, delvis på grund av brist på arbete och personliga skäl. Med detta i baktanke så höll vi nästan tidsplanen men det saknas någon timme här och där. När det kommer till vår dokumentation så tycker vi den blev heltäckande för alla delar och har den information som vi anser vara väsentlig. Den funktionalitet som vårt delprojekt vid namn TimeLamp uppfyller idag är att med hjälp utav ett API som vi själva har skapat runt TimeEdit, läsa av olika bokningar på ett schema för ett specifikt rum. Med detta schema bygger TimeLamp upp ett eget schema som sedan används för att styra färgen på de olika Philips Hue lamporna som sitter i respektive rum. TimeEdit API läser av varje rums schema och skapar ett eget schema till sina lampor. Vi har även skapat ett energisparläge för lampan som vi kallar för NightMode. Energispararläget går igång fram mot kvällen och gör så att lampans ljusstyrka sänks samt att färgen ändras till mörkblå. Lamporna går bara in i NightMode då det inte är någon bokning på rummet lampan sitter i. I TimeLamp ingår även en av våra andra delar i projektet vid namn Slack Reader. Slack Reader s funktionalitet idag är att läsa av en specifik Slack kanal och leta efter specifika tecken. När den hittar ett av dessa tecken så skickar den vidare meddelandet till vår TV klient vars uppgift är att visa meddelandet som skrevs. Meddelandet skickas även till vår administratörs klient som är till för att manövrera TV klienten på olika sätt. Anledningen till att vi inte brutit ut Slack Readern från TimeLamp är att Philips Hue lamporna är kopplade till den. När någon använder sig utav de tecknen vi nämnde tidigare så blinkar lampan i blå färg för att visa att ett meddelande är motaget. Vårt sista delprojekt är ett API byggt kring IFTTT som vi använder för att visualisera lärarnas närvaro på en närvaroklient. Detta delprojekt ligger inte under TimeLamp utan vi har valt att bryta loss denna del ifrån de övriga delprojekten. Vi valde denna lösning då vårt API inte har några beroende utav de övriga delprojekten. Delprojektets uppgift idag är att ta emot data ifrån IFTTT tjänsten då den datan representerar närvarostatusen på lärarna för datavetenskapliga avdelningen. Detta presenteras sedan på vår närvaroklient med hjälp utav grönt, gult och rött ljus. 9

Avvikelser/Efterkalkyl I samråd med kunden kunde vi själva skapa våra krav utifrån hans tankar och idéer. Under projektets gång uppkom flera krav som både var med hög och låg prioritet. Alla våra krav blev uppfyllda och inga påverkande avvikelser uppkom. De avvikelser vi har haft är på grund av nya kravändringar ifrån kunden som resulterade i att tidigare krav föll bort. De krav som föll bort var alla krav för Blink(1) mk2, Adobe Connect och Livecoding.tv. Anledningen till att de här kraven blev ersatta är att vi inte skulle använda oss utav Blink lampan eller strömnings tjänsterna längre. Blink lampan blev istället ersatt med en närvaroskärm samt att i framtiden kommer Slack vara huvudchatten för alla strömnings tjänster för datavetenskapliga avdelningen på Linnéuniversitetet. 10

Slutsats Samarbetet mellan grupp och kund har fungerat bra. Det har fungerat bra då vår kund alltid varit tillgänglig för oss via mail, Slack och personlig närvaro. Grupparbetet gick bra då vi alltid suttit tillsammans på campus och arbetat. Vi har under projektets gång haft bra kommunikation, respekt och högt i tak till varandra. Kunden har varit väldigt lös med sina krav och haft svårt att hålla sig till den vision som han haft. Detta har gjort så att vi själva fått ta beslutet om kraven uppfyller hans vision eller inte och därmed har vi lagt mycket tid på våra krav. Vi har varit mindre bra på att dokumentera kontinuerligt och hade inte så bra struktur i början av vårt projekt. An av anledningarna till detta var dels för att vi missade att skicka in första milstenen och därmed fick vi ingen feedback i början av projektet. Ett annat skäl till att dokumentationen föll i glömska var för att det är väldigt lätt att fastna i att skriva kod. Tittar man på vårt projekt på kort och lång sikt ser vi näst intill inga fenomen som kan utdatera vårt arbete, det skulle i så fall vara om TimeEdit skulle ändra sin struktur helt och hållet. I så fall skulle vår webbskrapa sluta fungera och behöva en uppdatering. En risk för närvaroklienten är om IFTTT skulle stänga ner sin tjänst, då vi är beroende utav denna och skulle isåfall få hitta eller skapa en ny lösning. 11

Förslag på vidareutveckling Då TimeLamp är gjort för att kunna vidareutvecklas så finns det praktiskt taget oändligt många funktioner man kan lägga till där. IFTTT kan vidareutvecklas för att kolla om till exempel en lärare är sjuk. Sen vet vi inte om det är möjligt men på något sätt skapa recept åt användare i settings filen för att underlätta användarvänligheten men detta är inget vi har kollat upp om det fungerar. I Slack Reader kan man lägga till flera hashtags och lägga till mer funktionalitet för botten, exempelvis funktionalitet för att bannlysa en användare. Eventuell övertagande organisation Projektet är open source så vem som helst kan ta del utav detta, men i huvudtanke så har det varit utvecklat mot Linnéuniversitetet. Litteraturförslag/dokumentationshänvisning Vi har under projektets gång inte använt oss utav någon litteratur. Vi har istället lutat oss tillbaka och skrivit vår egna litteratur på vår Wiki sida under vår organisation på Github. Förslag till förbättringar inför kommande projekt Till kommande projekt rekommenderar vi att kontinuerligt uppdatera dokumentationen så att den alltid representerar vad som finns i projektet och inte låta det byggas upp och falla i glömska. Börja testa tidigt så det är enkelt att underhålla koden samt tidigt implementera något testramverk som underlättar testning. 12