This report is about implementing Graphical User Interface for the CatFish website. The CatFish project is iterative research on water pollution where samples from water bodies aremonitored and collected using three different vehicles. The authors of this report, the frontend team, have created a website that aims to represent collected data from the vehicles in the form of diagrams and charts. It also shows live video streaming and gives the CatFish team the ability to control the vehicles remotely. Our results have shown that the website is functional, user-friendly, and ready to be hosted and used. / Den här rapporten handlar om att implementera grafiskt användargränssnitt för CatFish-webbplatsen. CatFish-projektet är iterativ forskning om vattenföroreningar där prover frånvattenförekomster övervakas och samlas in med tre olika fordon. Författarna till denna rapport, frontend-teamet, har skapat en webbplats som syftar till att representera insamlade data från fordonen i form av olika typer av diagram, visa live-videoströmning och ge CatFish-teametmöjligheten att fjärrstyra fordonen. Våra resultat har visat att webbplatsen är funktionell, användarvänlig och redo att hostas och användas.

TypeScript (TS) has been growing in popularity since its release in October 2012. It is beingadopted by many tech companies who specialize in web development. However, migrating old JSprojects to TS can be challenging and time consuming which can prove problematic due to limitedtime at the developers’ disposal.The aim of this study is to find out what the benefits of using TS over JS are, and their relationto Software Sustainability. By developing a migration tool that helps with automating the migrationprocess we investigate if such a tool would bring benefits to Axis Communications AB; especially,their web developers who work with JS and TS.After the development of the artifact, a focus group consisting of six experienced web developersand one tester was invited to a workshop in order to evaluate it. The workshop consisted of threeparts: Five open questions, a demo presentation of the artifact, and an artifact evaluation basedon the system dimensions: goal, environment, structure, activity, and evolution, by using the fivepoints Likert scale.Results from the workshop allowed us to understand better the needs and the challenges faced byAxis developers during software maintenance. Furthermore, the results indicated that the artifactnot only helps with improvements in terms of code maintenance but also indirectly improves codegreenability which in itself lowers CO2 emissions as a result.Migrating JS to TS improves some aspects of code maintenance and maintainability, and ourartifact helps with the automation of that migration process. With JavaScript, companies have tobalance sustainability with greenability. Fortunately, by adding green maintenance practices andusing TypeScript it is easier to keep that stability.

Denna rapport behandlar ett projektarbete som utfördes av sju studenter i kursen TDDD96 - Kandidatprojekt i programvaruutveckling vid Linköpings universitet under våren 2022. Projektet var beställt av RISE och syftet var att skapa en användarvänlig applikation som möjliggör annotering av bilder. Rapporten introducerar projektet och beskriver relevant teori. Därefter beskrivs vilka metoder och tekniker som användes för att utveckla produkten. I resultatet presenteras programmets olika vyer tillsammans med bland annat en beskrivning över hur databasen fungerar och hur annoteringar representeras internt. Slutligen diskuteras resultatet, alternativa implementationssätt och värdet produkten har för kunden. I slutet av rapporten finns individuella bidrag från gruppmedlemmarna som innehåller djupdykningar inom relaterade ämnen.

This research compares the performance of three TypeScript Object-Relational Mapping (ORM) libraries, MikroORM, Prisma, and Sequelize, selected based on a set of software quality attributes. A REST-API was implemented with uniform functionality for each library. A total of 24 endpoints, with functionality representing base SQL queries, were tested for comparison of response time, throughput, and memory usage. Results show that no library is superior in all performance metrics, suggesting ORM selection should align with specific project needs. Generalizability was ensured through varied query complexities and iterations. Future research could expand on this study by testing in diverse environments, testing against baseline query performance, and introducing randomness via true experiments.

The goal of the project is to develop a news widget for the company Atega In-sight. This news widget will be integrated into their Priceagent application and improve the ability of customers to set prices for their products. Daily meetings with the company as well as communication via chat and other spontaneous meetings. The project includes adjustments to previous sketches to meet current requirements as well as planning the functionality of the widget in the design tool Figma. The project's code will primarily be written in Visual Studio Code. The back-end is developed with NodeJS and the Serverless Framework as the basis for the API, while MongoDB is used as the database manager. Testing of the back-end takes place using the Postman API platform. On the front-end side, reusable components are created with React, mainly written in TypeScript. Ready-made components from Ant Design and styling are done with Styled-Components. The front-end structure follows the Atomic Design Pattern. The result of the project has given the company a functional widget where users can add, remove, edit and view their news feeds. Users can also switch between different tabs and paginate the news articles. Testing of the widget has mainly been performed with various browser add-ons, including VisBug to see if the size of the various components matches the sketches and responsiveness. Wave for testing availability and Lighthouse for performance. However, there is room for more superficial development, such as a better implementation of the NewsAPI in the back-end and small adjustments to improve the user experience, as the widget can sometimes be perceived as slow. / Målet med projektet är att utveckla en nyhetswidget åt företaget Atega Insight. Denna nyhetswidget ska integreras i deras Priceagent -applikation och förbättra kundernas förmåga att satta priser på sina produkter. Dagliga möten med företaget samt kommunikation via chatt och andra spontana möten. Projektet innefattar justeringar av tidigare skisser för att möta aktuella krav samt planering av widgetens funktionalitet i designverktyget Figma. Projektets kod kommer främst att skrivas i Visual Studio Code. Back-end utvecklas med NodeJS och Serverless Framework som grund för API: et, medan MongoDB används som databashanterare. Testning av back-end sker med hjälp av API-plattformen Postman. På front-end-sidan skapas återanvändbara komponenter med React, huvudsakligen skrivet i TypeScript. Färdiga komponenter från Ant Design och styling sker med Styled Components. Front-end-strukturen följer designmönstret Atomic Design Pattern. Resultatet av projektet har gett företaget en funktionell widget där man kan lagga till, ta bort, redigera och se sina nyhetsflöden. Användarna kan ocksa byta mellan olika flikar och paginera nyhetsartiklarna. Testning av widgeten har främst utförts med olika webbläsartillägg, bland annat VisBug för att se om storleken på de olika komponenterna stämmer överens med skisserna och responsivitet. Wave för att testa tillgängligheten och Lighthöuse för prestanda. Det finns dock utrymme för ytterligare utveckling, såsom en bättre implementering av NewsAPI i back-end öch sma justeringar för att förbättra användarupplevelsen, då widgeten ibland kan upplevas som långsam.

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.

In this project assignment, the ability to create RSS feeds for Smartsign's new web application, New Publisher, has been developed. The current version of Publisher has been in its current form for a long time and is beginning to feel somewhat outdated, motivating the need for an update. The development work has been carried out in the JavaScript framework Angular, in combination with SCSS and Angular-Materials. The purpose of the work has been to create this part of the new web application, which upon implementation will provide a new, simpler, and more visually appealing interface for users who want to distribute messages to connected signage screens in the form of RSS feeds, here in New Publisher called feeds. The work has resulted in a fully functional part of the application which is ready to be put into production / I detta projektarbete har RSS-flöden för företaget Smartsigns nya webbapplikation Nya Publisher utvecklats. Publisher används för att ge företagets kunder möjlighet att leverera budskap till signage-skärmar. Den nuvarande versionen av Publisher har funnits i sin nuvarande form en lång tid och börjar nu kännas något omodern, vilket motiverar behovet av en uppdatering. Utvecklingsarbetet har genomförs i JavaScript-ramverket Angular i kombination med SCSS och Angular-Materials. Syftet med arbetet har varit att skapa denna del i den nya webbapplikationen vilket vid implementering kommer att ge ett nytt, enklare och mer visuellt tilltalande gränssnitt för användare som vill nå ut med budskap till anslutna signage-skärmar i form av RSS-flöden vilket i Publisher kallas för feeds. Arbetet har resulterat i en fullt fungerande del av applikationen vilken i sig är redo att sättas i produktion

Omnia HR är en HR-plattform utvecklat för Microsofts SharePoint. I denna artikel beskrivs hur en liten del av plattformen är skapad – onboardingen. När en ny person anställs på ett företag bör det göras förberedelser inför den nyanställdes första dag, det är vad onboardingen handlar om. I detta projekt skapades förutsättningar för att administrera och hantera dessa förberedelser.   Projektet skrevs i Microsoft-utvecklade programmeringsspråket TypeScript, en påbyggnad på JavaScript. TypeScript transpileras ned till JavaScript och har stöd för de senaste funktionerna. I rapporten diskuteras fördelarna samt nackdelarna med att använda TypeScript för ett projekt, hur vida det faktiskt underlättar arbetet eller om det går lika bra att använda vanlig JavaScript. / Omnia HR is a HR-platform developed for Microsoft SharePoint. In this article, the creation of a smaller part for the platform – the onboarding – is described. When a new employee is hired, the company need to do some tasks before the new employees first day, that’s what the onboarding is all about. In this project conditions to administrate and handle these tasks were made.   The project was written in the programing language TypeScript, developed by Microsoft. TypeScript is superset of JavaScript and is transpiled down to pure JavaScript with support for the latest functions. In this rapport pros and cons by using TypeScript for a project is discussed, and if it actually makes the process easier or if it’s just as good to use regular JavaScript.

The goal of this master thesis was create suitable and easy to use software, which can help workers with maintaining of elevator. For this purpose it was necessary to study communication interface and protocol of control unit borrowed from the company Výťahy ZEVA s. r. o. There was necessary to find suitable device for communication between control unit and server. Server is used for store and visualize actual data of elevator system. Server can set the parameters of the elevator remotely and demand actual configuration of elevator. User can watch historical data from server. The users use server after authentication with different competency. Users with an appropriate competency can set the notifications in the system, which can warn their in case of problem with elevator and reduce the reaction time and time to resolution of the problem.

Tato diplomová práce staví na základech položených v rámci semestrální práce se stejným názvem. Na začátku jsou nejprve uvedeny základní vlastnosti slunečního záření nutné k pochopení výpočtu tzv. performance ratio. Dále jsou popsány solární senzory vyvinuty v ReRa Solutions, které byly zdrojem dat. V následné literární rešerši jsou zkoumány alternativy k nespolehlivému Wi-Fi připojení senzoru a za nejvýhodnější řešení je považována LoRa. V praktické části je detailně popsán proces návrhu a vývoje single page aplikace. Tato aplikace umožňuje jak ukládání dat ze senzorů do databáze, tak jejich opětovné čtení a zobrazení zpět uživateli ve srozumitelné podobě. Aplikace těží z využití moderních programovacích jazyků a frameworků (např. Kotlin, Spring, TypeScript, React, Material-UI). Databázový model, který byl navržen na základně skutečného využití, představuje koncept tzv. monitorované oblasti, což přináší široké konfigurační možnosti. Poté byl model přenesen do databáze ve formě programovatelných entit. Komunikace mezi klientem a serverem podporující autentifikaci na základě uživatelských rolí byla implementována přes REST API. Přes grafické rozhraní aplikace je možné konfigurovat prostředí podle uživatelských požadavků a zobrazit interaktivní grafy obsahující senzory naměřená data. Aplikace byla nasazena v Google Cloudu s oddělenou databází.