Denna rapport behandlar arbetet som en kandidatgrupp, bestående av åtta civilingenjörsstudenter inom data- och mjukvaruteknik vid Linköpings universitet, utförde under våren 2021. Arbetet gjordes som en del av kursen Kandidatprojekt i programvaruutveckling, med kurskod TDDD96, där kandidatgruppen utvecklade en webbapplikation åt företaget Neue Labs. Webbapplikationen baserades på Neue Labs mobilapplikation Playground, och utvecklades med hjälp av JavaScript-biblioteken React och Redux. Applikationen är en plattform för visuell programmering av IoT produkter, där programmen tar formen av flödesgrafer. Rapporten beskriver arbetsprocessen och redogör för den slutgiltiga produkten. Projektet har bedrivits helt på distans enligt en något modifierad Scrum-metodik. Några av de viktigaste lärdomarna som gruppen tar med sig rörde utbildning, kommunikation och testning. Dessutom innehåller rapporten åtta individuella bidrag, som är skrivna av kandidatgruppens medlemmar

Företaget M Hälsa Träning behövde ett bokningssystem där kunder kunde boka träff med personalen, systemet skulle integreras i deras redan befintliga webbsida. Den befintliga webbapplikationen byggde på ett CMS för hantering av data. Tidbokningssystemet behövde anpassas för att kunna användas tillsammans med CMS:et. Utvecklingen av systemet gjordes med webbramverket React.js samt en utbyggnad av redan befintlig webbserver arkitektur. Befintliga beroenden och verktyg användes i så stor utsträckning som möjligt. Utifrån M Hälsa Tränings beskrivning av önskad funktionalitet togs en kravlista för systemet fram. Reactdelen av systemet delades in i React komponenter som alla ansvarade för en specifik del av tidbokningssystemet. Komponenterna kommunicerade med ett API för att skicka och ta emot data. React redux användes för att hantera datat i reactdelen. Anpassningsbar data implementerades på servern i så stor utsträckning som möjligt för att kunna ändras i CMS:ets instrumentbräda. Implementeringen av funktionalitet på serversidan byggde på tidigare programmerares struktur och exempel. Resultatet av konstruktionen blev ett bokningssystem inbyggt i den existerande applikationen. Bokningssystemet är uppdelat i tre steg, en sida för att välja behandling, en kalender för att välja en tid och slutligen ett formulär för att fylla i personuppgifter och bekräfta bokning. Slutsatserna som kunde dras av arbetet var att denna tilläggsutveckling förde med sig både för och nackdelar, svårigheter så som okända och utdaterade verktyg och beroenden. Fel val av språk i och dålig planering av reactdelen. Fördelar med denna utveckling var den struktur och stomme som utvecklaren av M Hälsa Träning gjort, vilket förenklade utvecklingen av serverdelen då en tydlig struktur med goda exempel fanns att följa.

Denna studie ämnade att undersöka hur en webbapplikation för välgörenhetsdonationer, kunde utformas så att en användare upplever den som intresseväckande, lättnavigerad och tillförlitlig. Utvecklingen av denna webbapplikation delades upp i två iterationer med två användartest och resultaten jämfördes. De tre fokusområdena fick alla goda resultat i användartest 1 och resultatet förbättrades ytterligare till det andra användartestet. Det mest intressanta resultatet var den upplevda tillförlitlighetens stora positiva förändring. Studien kom fram till att det är viktigt att användaren ”vet vart de kan gå” för att uppnågod navigerbarhet på webbapplikationer avsedda för att skänka pengar till välgörenhetsorganisationer. Det är dessutom viktigt för den här typen av webbapplikation att ge ett gott första intryck och att den innehåller flera unika funktioner för att den ska ses som intresseväckande. Att betalningsprocessen är väl utformad och att webbapplikationen använder kända logotyper är viktigt för att den ska upplevas som tillförlitlig. / This study aimed to examine how a web application for charity donations can be designed in such a way that a user would assess the application as being navigable and trustworthy, as well as having an interesting design. The development process was split into two iterations with two user tests and the results were compared. The three focus areas all received good results in the first user test and all of them improved their results in the second user test. The most interesting result was the major increase of the perceived trustworthiness. The study concluded that it is important, for the user, to ”know where they can go” to achieve good navigability on web applications meant for donating money to charities. To be considered interesting, it is also important for this type of web application to make a good first impression and that it contains many unique functions. That the payment process is well designed and for the web application to use known logos are important for it to appear trustworthy.

Studier visar att intresset för att handla lokalt ökar, samtidigt som antalet köp av matprodukter via e-handel växer. Syftet med denna studie var att lägga grunden för en digitalisering av gårdsförsäljning. För att uppnå detta undersöktes frågan ”Hur ska en digital marknadsplats för gårdsförsäljning utformas för att upplevas ha en god användbarhet med avseende på navigerbarhet?”. En webbapplikation med fokus på användbarhet och navigerbarhet utvecklades, där arbetet utfördes i två iterationer med användartester i slutet av iterationerna. Användartesterna utfördes med de beprövade metoderna Concurrent Think-Aloud Procedure, System Usability Scale och Retrospective Probing. Studiens slutsats visar på att en användares tidigare erfarenheter och förväntningar på en webbapplikations design och funktionalitet har en stor påverkan på webbapplikationens upplevda användbarhet och navigerbarhet. Relevanta och väldesignade filtrerings- och sorteringsalternativ har upplevts bidra till en ökad användbarhet. Även bekräftande animationer då användaren utför uppgifter har konstaterats öka användbarheten. Vidare visar studien att oväsentliga funktioner bör undvikas att implementeras, då de upplevts försämra webbapplikationens navigerbarhet. / Studies show that the interest in purchasing locally produced products is increasing, at the same time as the amount of purchases of grocery prodcuts online is steadily growing. The purpose of this study was to lay the foundation for a digitalization of farm sales. In order to achieve this, the question ”How should a digital marketplace for farm sales be designed to be perceived as having good usability with regard to navigability?” was examined. A webapplication with focus on usability and navigability was developed, where the development took place over two iterations with user testing at the end of each iteration. The tests were constructed according to the methods Concurrent Think-Aloud Procedure, System Usability Scale and Retrospective Probing. The study concludes that a users prior experiences and expectations on the design and functionality of a webapplication has a large impact on its perceived usability and navigability. Well designed and relevant filtering and sorting options has been perceived as benefitial for the usability of a webapplication. Confirmatory animations when the user performs tasks have been ascertained to increase usability. However, the study shows that unnessecary functions should be avoided, as they are detrimental to the perceived navigability of the webapplication.

The primary aim of this study was to examine the effects of a web application’s navigability on user satisfaction. This was studied by developing a web application for the rental of pri- vate belongings such as tools, party equipment, outfits, et cetera. The study’s scope was hav- ing students at Linköping University as the target group. During the development phase, two different user tests were conducted on two different versions of the web application to obtain feedback on important factors within navigability such as functionalities, design, and layout. Said factors were tested with methods such as Concurrent Think-Aloud (CTA), Smith’s Mea- sure of Lostness, and Likert-styled questions. The first test provided a variety of feedback that, by applying retrospective probing, resulted in major improvements for the second user test. The study shows that in designing user tests it is important to have a widespread test group, test users without relations, and longer than one week between different iterations of a test. The study concludes that a thumbnail system is preferred over displaying products in a list. Moreover, tests showed that feedback and communication from the system improved the user experience. / Studiens huvudsakliga syfte var att undersöka hur en webbapplikations navigerbarhet påverkar användarupplevelsen. Detta gjordes genom att en webbapplikation för uthyrning av privatägda prylar såsom verktyg, festutrustning, utklädnader, etcetera utvecklades. Stu- dien hade en tydlig omfattning med studenter från Linköpings Universitet som målgrupp. Under utvecklingsfasen utfördes användartester på två olika iterationer av webbapplikatio- nen vid separata tillfällen. Detta gjordes för att samla in respons och åsikter kring centrala faktorer inom navigerbarhet, såsom funktionalitet, design och layout. Dessa faktorer testades med en rad metoder, till exempel Concurrent Think-Aloud (CTA), Smith’s Measure of Lost- ness och Likert-Styled questions. Det första testet tillhandahöll respons som då retrospektiv sondering applicerades medförde betydande förbättringar av webbapplikationen inför det andra testet. Studien visar på en rad premisser som är centrala då användartester utförs. Det är då viktigt att ha en hög variation på testgruppens deltagare, att utföra tester på deltagare som inte har någon relation till varandra, samt att vänta längre än en vecka mellan olika test. Ett antal slutsatser dras från studien. En av dessa är att thumbnail-system föredras över att visa produkterna i en lista. Testen visade också att tydlig kommunikation från systemet ökade användarvänligheten.

A survey, carried out and answered by students at Linköping University proved that 92.6% of the surveyees are interested in buying second-hand course literature. Numerous retailers exist for this market, however the problems with the solutions at the time of the survey are clear; lack of structure and absence of filtering and search functions. Therefore, the thesis aims to create an e-commerce for second-hand course literature with good usability with regards to good navigability for students by applying scientific theories and the feedback of user tests at two separate iterations. The result was Bokhyllan, a web application where buyers and sellers meet to exchange second-hand course literature for money. The conclusion was that the navigation bar, visual confirmations after actions, useful search and filtering functions, and the layout and placement of links make up decisive roles in the navigability of web applications. A relevant addition to this report within the key area would be to investigate different age groups, as this report solely delimits to students. / En enkätundersökning som utfördes och besvarades av studenter vid Linköpings universitet påvisade att 92,6% av enkätbesvararna är intresserade av att köpa begagnad kurslitteratur. Ett flertal aktörer existerar för denna marknad men problemen med lösningarna vid enkätens tillfälle är tydliga; brist på struktur och avsaknad av filtrerings- och sökfunktioner. Arbetet ämnar därmed att skapa en e-shop för begagnad kurslitteratur med god användbarhet med avseende på god navigerbarhet för studenter genom att applicera vetenskapliga teorier samt återkopplingen från användartester vid två olika iterationer. Resultatet blev Bokhyllan, en webbapplikation där köpare och säljare möts för att utbyta begagnad kurslitteratur mot pengar. Slutsatsen drogs att navigationsmenyn, visuell bekräftelse vid handlingar, användbara sök- och filtreringsfunktioner samt länkars utformning och placering utgör avgörande roller för webbapplikationers navigerbarhet. En relevant påbyggnad för detta arbete inom huvudområdet skulle vara att undersöka olika åldersgrupper, då denna rapport endast avgränsar sig till studenter.

In this project a web application is being created for Knowit Experience with the goal of replacing their existing Excel-solution for storing steps towards a destination. The project has resulted in the development of a userfriendly and accessibility-focused web application for Knowit Experience, aimed at promoting everyday physical activity. With Supabase as the backend and Nuxt as the frontend framework, along with SASS for structured and reusable styling and Tailwind CSS, the application now offers functionality for registration, login, and step tracking towards destinations. An admin interface is implemented for managing destinations and activity lists with step conversion. Code validation has been performed to ensure security and quality, while accessibility has been continuously tested using the Wave accessibility tool. This combination of technologies and features, including SASS and Tailwind CSS, has resulted in a functional web application for Knowit Experience, replacing their previously used Excel-solution. / I detta projekt skapas en webbapplikation för Knowit Experience med målet att ersätta deras befintliga Excel-lö sning fö r lagring av steg gentemot ett destinationsmål. Resultatet är en användarvänlig och tillgänglighetsanpassad webbapplikation som främjar vardaglig fysisk aktivitet. Med hjälp av Supabase som backend och Nuxt som frontend-ramverk, tillsammans med SASS fö r strukturerad och återanvändbar stilhantering samt Tailwind CSS, erbjuder applikationen funktioner fö r registrering, inloggning och lagring av steg mot destinationsmål. Genom ett administratö rsgränssnitt kan destinationer hanteras och aktivitetslistor med stegkonvertering administreras. Koden har validerats fö r säkerhet och kvalitet, och tillgängligheten har kontinuerligt testats med verktyget Wave. Den lyckade kombinationen av dessa tekniker och funktioner, inklusive SASS och Tailwind CSS har resulterat i en fungerande webbapplikation för Knowit Experience som ersätter den tidigare använda Excel-lösningen.

Denna rapport beskriver ett kandidatarbete utfört av åtta studenter vid Linköpings universitet på uppdrag av Personalkollen AB. Projektet, med titeln ``Framtidens teknikstack för webbapplikationer'', genomfördes av arbetsgruppen Stack Underflow. Studien jämför två egenskapade webbapplikationer med olika renderingstekniker genom prestandatester såsom blockeringstid och hastighetsindex. Det klientrenderade systemet utvecklades med hjälp av biblioteket React, medan det serverrenderade systemet utvecklades i ramverket Next.js. För att utföra jämförelsen användes Google Lighthouse, ett verktyg för att systematiskt testa webbsidor. Prestandatesterna visade att det serverrenderade systemet överträffade det klientrenderade systemet vid större sidstorlekar, främst vad gäller blockeringstid. Resultaten syftar till att ge insikter till kunden om olika teknikstackars fördelar och nackdelar. Rapporten dokumenterar även de gemensamma och individuella erfarenheter som erhölls under projektets gång, specifikt vad gäller utvecklingen av de två systemen som jämförs.

Växa Sverige is one of Sweden's largest associations working towards sustainable, profitable and competitive agricultural production. In Sweden, there is a requirement for all cattle to be registered with the CDB and all events related to each animal have to be reported. Växa provides an application, MinGård, where farmers can register their herds, cattle and associated events. MinGård needs a new, more modern interface focusing on accessibility. Currently, the application is only adapted for computers, with accessibility issues. It needs to be usable by everyone, on all different devices. Växa is not going to use the whole application, they will only use it as an inspiration for a new interface. Hence only test data is used in the application. The application is developed using React, TypeScript, and Bootstrap for frontend and Laravel for backend with an API and a MySQL database is used for data storage. The web application includes functions for authentication, user registration, user login, viewing the user's herds and animals, fetching and reporting events related to the animals in the herd, viewing details about a specific animal and associated events and from the detailed view of an animal, browsing through all animals in the herd. Logged-in users can change account details such as name and email address and upload pictures of themselves and their animals. The result of the project is a new interface for MinGård that has been tested, validates correctly and meets the accessibility requirements for public services. The application is accessible to everyone, usable on all devices and browsers. Växa can use prototypes and the application for inspiration in developing a new version of MinGård. / Växa Sverige är en av Sveriges största husdjursföreningar som jobbar för en hållbar, lönsam och konkurrenskraftig lantbruksproduktion. I Sverige finns det krav på att all nötkreatur ska registreras hos CDB och att alla händelser för varje djur rapporteras. Växa tillhandahåller en applikation, MinGård där lantbrukare kan registrera sina besättningar, djur (nötkreatur) och tillhörande händelser. MinGård behöver ett nytt, modernare gränssnitt som fokuserar på tillgänglighet. Idag är applikationen endast anpassad för datorer och det finns brister i tillgängligheten. Den behöver kunna användas av alla, från alla olika enheter. Växa kommer inte att använda applikationen utan vill endast ha inspiration till ett nytt gränssnitt och därför används endast testdata i applikationen. Applikationen utvecklas med React, TypeScript och Bootstrap för frontend och Laravel för backend med API och en MySQL-databas som datalagringskälla. Webbapplikationen innehåller funktioner för autentisering, registrera användare, logga in användare, se användarens besättningar och djur, hämta och rapportera händelser kopplade till djuren i besättningen, se detaljer om ett specifikt djur och tillhörande händelser samt att från detaljnivå kunna bläddra mellan alla djur i besättningen. Inloggade användare kan dessutom ändra kontouppgifter såsom namn och mejladress och ladda upp bilder på användaren och djur. Resultatet av projektet är ett nytt gränssnitt till MinGård som har testats, validerar korrekt och följer de tillgänglighetskrav som finns för offentlig service. Applikationen är tillgänglig för alla, kan användas på alla enheter och i olika webbläsare. Växa kan använda prototyper och applikation för inspiration vid utveckling av en ny version av MinGård.

Detta projekt är givet som ett kandidatarbete i mjukvaruutveckling vid Linköpingsuniversitet, i kursen TDDD96 Kandidatprojekt i programvaruutveckling. Arbetet är utfört aven grupp tredjeårsstudenter på D- och U-programmen.Projektet ges av forskargruppen för integrerad systembiologi på IMT LiU, som utvecklarmatematiska modeller av biologiska system. Dessa modeller kan användas för att förståsystemen bättre, eller som beslutsstöd inom farmakologi och vård. Forskargruppens fokusför tillfället är att sammankoppla modeller för olika delar av människokroppen till en helhetsbildsom beskriver delsystemens samverkan.Denna helhetsbild för en särskild individs hälsotillstånd kallas för en digital tvilling, förvilken detta projekt ämnar framställa ett användargränssnitt.Användargränssnittet skall erbjuda grafer över hälsoparametrars förändring över tid,och användaren ska kunna ta fram olika sådana genom att interagera med gränssnittet.Utöver framtagning av själva gränssnittet, skall en brygga mellan applikationen ochkundens modeller tas fram. Detta har gjorts genom en version av programmet OpenCOR,vilket forskarna använder sig av, som exponerar ett API i Python. Detta API sammankopplatmed en server kallas i projektet för motor.