SmartOff är ett småföretag i Fellingsbro som utvecklar en webbapplikation för hantering av ordrar, offerter, planering, fakturor o s v. Företaget grundandes och ägs av Henning Baeckström. Deras huvudprodukt, SmartOff, är ett orderprogram för småföretag. När detta exjobb genomfördes så utvecklade företaget en ny version av applikationen, SmartOff 2.0, vilken var omskriven från grunden. Denna skrevs med stort fokus på strukturering av koden, modularitet och ”clean code”, för att se till att den fick bra underhållsmässighet, och att det var lätt att lägga till nya funktioner. Den är också designad med ett mer simplistiskt och strukturerat gränssnitt, som anpassar sig beroende på skärmstorleken. Detta möjliggör att samma sida fungerar bra både på PC och mobiler. Målet var att utveckla SmartOff 2.0 så att denna på sikt skulle kunna ta över efter den gamla versionen, i vilket fall man får en enda kodbas som används både på mobiler och på webben. Detta exjobb gick ut på att utveckla två vyer under orderfliken i SmartOff 2.0: en offertvy och en kalkylvy. Innan projektets start fanns där en ordersida.   Offertvyn skulle nås genom att klicka på en vänsterpil på ordervyn. Denna skulle efterlikna en offert som den ser ut på papper, och i stort sett se ut som en redigerbar version av en pappersoffert. Den skulle visa de element som fanns på offerten, inklusive företagets uppgifter, kundens uppgifter, artikellista och texter över och under artikellistan. Dessa skulle alla vara redigerbara eller valbara.   Det skulle finnas en kalkyl (en lista med material och arbete för som krävs för att tillverka artikeln, samt mängd, priser o s v för dessa) för varje artikel på ordern, och man skulle komma till en artikels kalkyl genom att klicka på en pil på artikeln i artikellistan på ordervyn. Kalkylvyn skulle ha en tabell med kalkylrader, där varje rad representerar ett material som måste köpas in, eller ett arbete som måste utföras. På varje rad skulle man kunna slå in t ex pris och antal för att räkna ut hur mycket den raden kostar, och det skulle finnas ett totalpris på varje rad. Under kalkyltabellen skulle det finnas totalpriser; redigerbart påslag samt ett sätt att redigera artikelpriset och föra över priset från kalkylen till artikeln. / SmartOff is a small company in Fellingsbro, developing a web app for managing orders, offers, planning, invoices etc. The company was founded and is owned by Henning Baeckström. Their main product, SmartOff, is an order program for small companies. When this project was done, they were developing a new version of the application, SmartOff 2.0, which was rewritten from the ground up. This was written with a great focus on code structure, modularity, and “clean code”, to make sure it was maintainable, and it was easy to add new functions. It’s also designed with a more simplistic and well structured user interface, which adapts depending on the screen size. This allows the same page to function well on both PCs and phones. The goal was to develop SmartOff 2.0, so that eventually it could entirely replace the old version, at which point they could use a single code base on both phones and the web site. This project consisted of developing two new views under the order tab of SmartOff 2.0: an offer view and a calculation view. Before the start of the project the tab contained an order view.   The offer view was to be reached by clicking a left arrow on the order view. It was to resemble an offer as it appears on paper, and essentially look like an editable version of a paper offer. It should contain all the elements that were on an offer, including the company information, the customer information, an article list, and some texts above and below the article list. All of these were to be editable or selectable.   There was to be one calculation (a list of materials and work needed to make the article, as well as amounts, prices etc for these) for each article in an order, and you should be able to get to the calculation by clicking an arrow on the article in the article list on the order view. The calculation view was to have a table with calculation rows, where each row represents a piece of material that needs to be purchased, or some work that needs to be done. On each row you were supposed to be able to input e g price and amount, to calculate the price of the row, and each row was to have a total price. Below the calculation table, there was to be total prices; an editable surcharge; as well as a way to edit the article price and transfer the price from the calculation to the article.

På grund av snabb digitalisering så finns ett behov av en översikt över de utvecklade produkterna. Detta inte bara för att analysera dess användning utan också för att säkerställa dess korrekta användning. Målet med detta arbete har varit att skapa ett analysverktyg för ett komponentbibliotek och visa var och hur komponenterna används. Det långsiktiga målet med arbetet är att öka produktiviteten för de som använder komponent-bibliotek. Detta har åstadkommits genom intervjuer och en nulägesanalys på ett annat verktyg av Bitbucket. Baserat på resultaten utformades tre designer som utgjorde grunden till implementationen. Implementationen var i sin tur skapt med Javascript kombinerat med React, NextJS och Typescript. När implementationen var färdig genomfördes ett flertal användbarhetstester med flertalet deltagare på implementationen respektive det tidigare verktyget. En jämförelse gjorde därefter på de två verktygen. På grund av en liten testgrupp kan resultaten inte definitivt påstå att implementationen åstadkommer en högre produktivitet eller användbarhet. Resultatet kan, utifrån resultaten hävda att det sannolikt skett en förbättring i produktivitet och användbarhet, fler tester krävs för ett definitivt svar. En framtida implementation bör överväga möjligheten att inkludera en integrerad AI assistent som kan ge rekommendationer och dela insikter kring användningen av komponenterna. / Due to a fast digitalization, there exists a need for an overview over the developed products. This to not only analyze their usage but also ensure their correct usage. The objective of this work has been to create an analysis tool for a component-library and show where and how the components are used. The long-term goal is to increase productivity for those who use component-libraries. This was accomplished through interviews and a current situation analysis on another tool by Bitbucket. Based on the results three designs were created forming the groundwork for the implementation. The implementation was created using Javascript with React and NextJS alongside Typescript. Once the implementation was done a usability test with multiple participants was conducted on the implementation and the previous tool. A comparison was then made between the two tools. Due to the small test size the results are not conclusively able to say that the implementation results in a higher productivity or better usability. It can however be concluded from the comparison that it is likely that there is an increase in productivity and usability, but more tests are needed for a conclusive answer. A future implementation should consider the possibility to include AI as an integrated assistant who can make recommendations and share insights into the usages of components.

Error messages in compilers is a topic that is often overlooked. The quality of the messages can have a big impact on development time and ease oflearning. Another method used to speed up development is to build a domainspecific language (DSL). This thesis migrates an existing framework to use TypeScript in order to speed up development time with compile-time error handling. Alternative methods for implementing a DSL are evaluated based onhow they affect the ability to generate good error messages. This is done usinga proposed list of six usability heuristics for error messages. They are also usedto perform heuristic evaluation on the error messages in the TypeScript compiler. This showed that it struggled with syntax errors but had semantic errormessages with low amount of usability problems. Finally, a method for implementing a DSL and presenting its error messages is suggested. The evaluationof said method showed promise despite the existence of usability problems. / Felmeddelanden i kompilatorer är ett ämne som ofta förbises. Kvaliténpå felmeddelanden kan ha stor påverkan på utvecklingstid och lätthetatt lära. En annan metod för att sänka utvecklingstid är att bygga ettdomänspecifikt programmeringspråk. Detta examensarbete migrerar ettexisterande ramverk till TypeScript för att snabba på utvecklingstidmed felhantering i kompileringsstadiet. Alternativa metoder för attimplementera ett DSL evalueras baserat på hur de påverkar möjlighetenatt generera bra felmeddelanden. Detta görs med en föreslagen lista avsex heuristiker för felmeddelanden. De används också för att utföra enheuristik utvärdering på felmeddelandena i TypeScriptkompilatorn. Detta visade att den har svårt för syntaxfel men hademeddelanden för semantiska fel med låg mängdanvändbarhetsproblem. Till sist föreslås en metod för att implementeraett DSL och presentera dess felmeddelanden. Evalueringen av den nämndametoden visade lovande resultat trots förekomsten av användbarhetsproblem.

Inom tillverkningsindustri används styrsystem för att övervaka och styra produktionen. Företaget Outokumpu har en produktionsanläggning i Degerfors för valsat rostfritt stål, kallat Det varma flödet. Det nuvarande systemet övervakar och styrs av en applikation som enbart fungerar i Windows-miljö. För att få en flexiblare övervakning av produktionslinjen och kunna använda andra enheter såsom surfplattor, eller nå informationen över internet, har vi fått i uppdrag att utveckla en webb-baserad prototypapplikation. Denna applikation kan simulera produktionen i realtid för olika scenarion. Användaren blir informerad om vart materialen befinner sig i produktionslinjen, statistik över produktionen, stillestånd och fyllnadsgrad i ugnar. Denna realtidsbaserade webbapplikation har utvecklats med ramverken ASP.NET Core och JavaScriptspråket TypeScript tillsammans med ramverket Aurelia. Vid vidareutveckling av prototypen kan all funktionalitet från den nuvarande applikationen implementeras i prototypen, exempelvis så att operatörer kan kontrollera produktionsverksamheten och inte endast övervaka. / Manufacturing systems uses control systems to monitor and control the production. The company Outokumpu has a production in Degerfors for rolling stainless steel, called The Heated Stream. The current system is monitored and controlled by an application that only works in Windows environment. By having the system more flexible and making the monitoring of the production available on other devices such as tablets or to get the information on the internet. Our project is a prototype of a real-time web application which will simulate the production with different scenarios. The user of this application will be informed with position of the material currently in production, statistics about the production, a machince downtime and the fill ratio of the ovens. The real-time application has been developed using the framework ASP.NET Core and the JavaScript language TypeScript working with the framework Aurelia. For future development of the prototype, all features from the current system could be implemented such as to control the production line from the web application and not just to monitor the system.

One of the latest tools in the strive troughwards a fast and secure Web is called WebAssembly. It is a low-level, assembly-like language that can run in the browser alongside JavaScript. WebAssembly is designed to load fast and aims to execute at near-native speed. Being a compilation target for system languages like C, C++, and Rust, WebAssembly is not very accessible from a Web developer perspective. This project explores ways to generate WebAssembly directly from JavaScript code, in order to lower the learning curve, and allow for a more widespread adoption of WebAssembly. This has resulted in a utility tool called Esmbly, which can turn simple JavaScript programs into WebAssembly binaries by collecting and utilizing type information from various flavours of statically typed JavaScript.

This thesis deals with the design and implementation of a tool for generating parts of client applications in TypeScript language from the description of a REST interface. The goal of the tool is an automatic generation of an application skeleton which uses the Angular framework including data structures and services enabling access to server endpoints. The thesis describes the interfaces based on the REST architectural style, as well as the technologies used for their description. The tool was implemented in TypeScript language and uses the Node.js runtime. The output file generation is based on the Mustache.js template system. The result is a tool which allows the generation of source code based on the provided WADL or OpenAPI interface description, which can be simply used as a part of an Angular application.

The goal of this project has been to create an interface for time accounting thatthe digital agency Devize can use in its own system Devize Admin. In the project, the work has been carried out in an agile development with various elements. As an introductory step, the work has consisted of planning followed bycreating design sketches/prototypes. User tests have since been performed where Devize's own developers have tested the prototypes. The tests have then beencompiled to find improvements which then have been implemented in a newversion of the prototype. In the process, the interface has since been developedwith the front-end framework React Admin within the frameworks and rulesfound in Devize's graphic profile and the existing system Devize Admin. In parallel with front-end development, back-end functionality has been developed ina sister project that the interface has since used to be able to handle and accessdata. Continuously through interface development, the environment has alsobeen tested in the browser and console to detect potential error messages andunclear structures. Based on the development process that has been carried outand the functionality that has been implemented, the application has resulted inan interface for time accounting that has the basic functionality that is necessaryto be able to report time. With that outcome, a conclusion has been drawn that the outcome is to some extent consistent with the project's set goals. / Målet med detta projekt har varit att skapa ett gränssnitt för tidsredovisning som digitalbyrån Devize kan använda i sitt egna system Devize Admin. I projektet har arbetet utförts i en agil utveckling med olika moment. Som inledande moment har arbetet bestått av planering följt av att skapa designskisser/prototyper. Användartester har sedan utförts där Devize egna utvecklare har testat prototyperna. Testerna har sedan sammanställt för att hitta förbättringar som sedan har implementerats i en ny version av prototyp. I processen har gränssnittet sedan utvecklats med frontend-ramverket React Admin inom de ramar och regler som finns i Devize grafiska profil samt det existerande systemet Devize Admin. Parallellt med frontend-utveckling har backend-funktionalitet utvecklats i ett systerprojekt som gränssnittet sedan har använt sig av för att kunna hantera och komma åt data. Kontinuerligt genom gränssnittsutveckling har miljön även testats i webbläsaren och konsolen för att upptäcka potentiella felmeddelanden och oklara strukturer. Utifrån den utvecklingsprocess som genomförts och den funktionalitet som implementerats, har tillämpningen resulterat i ett gränssnitt för tidsredovisning som har grundläggande funktionalitet som är nödvändig för att kunna tidsredovisa. Med det utfallet har en slutsats dragits om att utfallet till viss del stämmer överens med projektets uppsatta mål.

This report summarizes the procedure of the independent work in the final course DT140G. The project's task and main goal has been to help the company involved to enable a potential interruption with a time registration service called Harvest which they currently consume. The task itself has been sectioned into three clear parts with completely different orientations but towards the same end goal. The first part has involved data management from the consumed time registration service in terms of both exporting and importing data. The second part has been about developing a CRUD functionality that can be consumed in the frontend by another developer. The last part has meant that a report compilation application has been created where data from the previous parts is handled and produces various reports which could then be exported in Excel files. The result of this independent work resulted in an application with great similarities in terms of functionality as the previous time registration service. The company has taken a step closer to their vision of a break from Harvest. This has been done with access to source code from a previous developer who shared his repository via GitLab and the React Admin framework. The CRUD functionality has been checked with the help of the test tool ARC and all code development has taken place in the software development environment Visual Studio Code. / Denna rapport sammanfattar proceduren av det självständiga arbetet i slutkursen DT140G. Projektets uppgift och främsta mål har varit att hjälpa det involverade företaget att möjliggöra ett potentiellt avbrott med en tidsregistreringstjänst vid namn Harvest som de i dagsläget konsumerar. Själva uppgiften i sig har varit sektionerad i tre tydliga delar med helt olika inriktningar fast mot samma slutmål. Den fösta delen har involverat datahantering ifrån den konsumerade tidsregistreringstjänsten vad det gäller att både exportera och importera data. Den andra delen har handlat om att utveckla en CRUD-funktionalitet som skall kunna konsumeras i frontend av en annan utvecklare. Den sista delen har inneburit att en rappportsammanställningsapplikation har skapats där data ifrån de tidigare delarna hanteras och frambringar olika rapporter som sedan skulle kunna exporteras i Excel-filer. Utkomsten av detta självständiga arbete resulterade i en applikation med väldiga likheter funktionsmässigt vad det gäller den tidigare tidsregistreringstjänsten. Företaget har tagits ett steg närmare sin vision om en frislagning ifrån Harvest. Detta har genomförts med tillgång till källkod ifrån en tidigare utvecklare som delat sitt repository via GitLab samt ramverket React Admin. CRUD-funktionaliteten ha kontrollerats med hjälp av testverktyget ARC och all utveckling av kod har skett i programutvecklingsmiljön Visual Studio Code

The project's primary goal is to develop a prototype for Columbus Global with the e-commerce platform Lithium GraphQL API and Next.js Commerce. It must contain a start and product page and a shopping cart. The prototype aims to investigate whether the untested combination of the mentioned tools is possible. A higher goal of the project is that Columbus can conclude that the prototype should be further developed and that I, as a developer, get more experience. It has since been tested for accessibility, performance and functionality with, among other things, user tests, Google Lighthouse and Wave.The result of the project shows that a combination of the two tools is feasible, and at the time of writing, there are no direct impossible obstacles. Regarding evaluation results, the prototype has fallen somewhat short in terms of performance but is still within the framework of the requirements that have been set. The availability is approved, and the user tests showed that the site was clear with a good product focus but with mixed reactions to the structure. The user tests also came with good suggestions on what can be improved, what was unclear and what functions are missing. The prototype's responsiveness is approved for both large and small screens. Columbus is pleased with the results, and further prototype development will take place. As a developer, I have gained a lot of new experience and have had the opportunity to start something that can potentially change a part of an international company. / Det huvudsakliga målet för projektet är att ta fram en prototyp-webbplats för företaget Columbus Global med e-handelsplattformen Litium GraphQL API och Next.js Commerce. Den ska innehålla en start och produktsida samt en kundvagn. Projektets syfte är att undersöka om den oprövade kombinationen mellan de nämnda verktygen är möjlig. Ett högre mål med projektet är att Columbus ser möjligheten att senare vidareutveckla prototypen. Dessutom får jag som blivande utvecklare arbetserfarenhet. Prototypen har testats gällande tillgänglighet, prestanda och funktionalitet med till exempel användartester, Google Lighthouse och Wave. Resultatet av projektet visar att en kombination mellan de två verktygen är utförbar och att det i skrivande stund inte finns några direkta omöjliga hinder. Utvärderingsresultaten av prototypen gällande prestanda kunde varit bättre men det föll ändå inom ramen för de krav som satts upp. Tillgängligheten är godkänd och användartesterna visade på att sidan var tydlig med bra produktfokus dock med blandade reaktioner på strukturen. Ur användartesterna kom även bra förslag på vad som kan förbättras, vad var otydligt och vilka funktioner fattas. Prototypens responsivitet är godkänd för både stora och små skärmar. Columbus är nöjda med resultaten och vidareutveckling av prototypen kommer att ske. Jag som utvecklare har fått mängder av ny erfarenhet och har fått chansen att starta något som potentiellt kan förändra en del av ett internationellt företag.

This paper studies how the newly released AI ChatGPT can be used to reduce the time and effort software developers spend on writing unit tests, more specifically if ChatGPT can generate quality unit tests. Another aspect of the study is how the prompting of ChatGPT can be optimized for generating unit tests, by creating a prompt framework. Lastly how the generated unit tests of ChatGPT compare to human written tests was tested. This was done by conducting an experiment where ChatGPT was prompted to generate unit tests for predefined code written in C# or Typescript which was then evaluated and rated. After the generated unit test had been rated, the next steps were determined, and the process was repeated. The results were logged following a diary study. The rating system was constructed with the help of previous research and interviews with software developers working in the industry which defined what a high-quality unit test should include. The interviews also helped in understanding ChatGPT’s perceived capabilities. The experiment showed that ChatGPT can generate unit tests that are of quality, though with certain issues. For example, reusing the same prompt multiple times revealed that the consistency in the responses was lacking. Inconsistencies included different testing approaches (how setup methods were used for example), testing areas and sometimes quality. The inconsistencies were reduced by using the deduced prompt framework, but the issue could be a current limitation of ChatGPT which could be handled with a future release.