The diploma thesis deals with the design, creation and implementation of a software application in the corporate environment of Velká Pecka s.r.o., better known as Rohlík. The first goal is to analyze the given company and find its shortcomings. The second, the main one, is to create and implement a software, which would eliminate them. The resulting solution is a mobile application, which improves issue reporting in their warehouses, thus saving resources overall.

The thesis deals with design and implementation of prototype of mobile application for Android and iOS operating systems. Framework React Native was chosen for realization because it allows multiplatform development. Application focuses on data visualization from sales of handmade products on Fler web portal.

The purpose of this project is to create a website with a React-based prototype recommendation system of a large cultural collection. The aim of the website is to provide a function that allows a user to upload an image to which the system consequently recommends correlating artwork from the publicly available collection of the Metropolitan Museum of Modern Art (MET). The correlation coefficient between the uploaded image and the artworks from (MET) is acquired through Pearson Correlation. Furthermore the artwork with the highest correlation to the uploaded picture is shown first, then each subsequent artwork is shown in order of highest correlation. The main challenge for building this prototype was to combine the different components together with JavaScript and the REACT framework. The recommendation engine demands numerical representations of these artworks, and most effort was given to the automatic conversion of photos of artworks into a proper format for the recommendation engine.

Der Schwerpunkt dieser Arbeit liegt auf der Konzeption sowie prototypischen Implementierung eines web-basierten Dashboards zur Softwarevisualisierung. Ziel der Arbeit ist es, ein Dashboard zu entwickeln, welches Informationen eines Softwareprojekts dynamisch aus einer Graphdatenbank visualisiert und Projekteitern aufgabenbezogen zur Entscheidungsunterstützung darstellt. Derzeit existiert keine Softwarelösung, die diesen Anforderungen vollumfänglich gerecht wird. Es existieren jedoch bereits Bibliotheken und Softwaresysteme, welche Teilaspekte zu einer möglichen Gesamtlösung beitragen können. Diese können bei der prototypischen Implementierung von Nutzen sein und müssen daher beachtet werden. Um die Ziele der Arbeit zu erreichen, werden verschiedene Forschungsmethoden angewandt. Es wird eine Literaturrecherche durchgeführt, mit dem Ziel, typische Aufgaben von Projektleitern im Bereich Software Engineering zu identifizieren. Um die vom Dashboard zu unterstützenden Aufgaben ableiten zu können, werden außerdem verschiedene existierende Dashboard-Werkzeuge analysiert. Mithilfe der gewonnenen Ergebnisse wird das Dashboard konzipiert und prototypisch implementiert. Durch eine Fallstudie anhand von Open-Source-Projekten wird das Dashboard abschließend evaluiert.:1 Einleitung 1.1 Motivation und Problemstellung 1.2 Zielstellung 1.3 Methodisches Vorgehen 2 Grundlagen 2.1 Softwarevisualisierung 2.2 jQAssistant 2.3 Neo4j 2.4 Webanwendungen und web-basierte Frameworks 2.5 D3.js 2.6 Dashboards 3 Konzeption 3.1 Mission Statement 3.2 Architekturziele 3.3 Kontextabgrenzung 3.3.1 Fachlicher Kontext 3.3.1.1 Literaturrecherche zu typischen Aufgaben von Projektleitern 3.3.1.2 Analyse existierender Dashboard-Werkzeuge 3.3.1.3 Use-Case-Diagramm der zu unterstützenden Aufgaben 3.3.1.4 Mockups der Benutzungsschnittstelle 3.3.2 Technischer Kontext 3.4 Randbedingungen 3.4.1 Technische Randbedingungen 3.4.2 Organisatorische Randbedingungen 3.5 Risiken und technische Schulden 3.6 Entwurfsentscheidungen 3.6.1 Auswahl des Neo4j-Treibers 3.6.2 Vergleich existierender Webframeworks 3.6.2.1 Angular 3.6.2.2 Backbone.js 3.6.2.3 Ember.js 3.6.2.4 Vue.js 3.6.2.5 React 3.7 Lösungsstrategie 4 Implementierung 4.1 Implementierungskomponenten 4.1.1 CoreUI 4.1.2 Nivo 4.2 Dashboard 4.2.1 Startseite 4.2.2 Einstellungen 4.2.3 Benutzerdefinierte Abfragen 4.2.4 Visualisierungskomponenten 4.2.4.1 Struktur 4.2.4.2 Dateitypen 4.2.4.3 Abhängigkeiten 4.2.4.4 Aktivitäten 4.2.4.5 Wissensverteilung 4.2.4.6 Hotspots 4.2.4.7 Statische Quellcodeanalyse 4.2.4.8 Testabdeckung 4.2.4.9 Erstellung 4.3 Eingesetzte Werkzeuge 4.3.1 Entwicklung und Test 4.3.1.1 Jest 4.3.1.2 Codecov 4.3.1.3 Travis CI 4.3.1.4 Prettier 4.3.1.5 Docker 4.3.2 Installation und Wartung 5 Evaluation 6 Fazit und Ausblick

Saab is a large swedish company providing a multitude of different products and services. This also means that Saab has to provide support and customer service for said products. Currently this is handled online in Support Portals, where customers and partners can access product information as well as an issue management system called SIRS. In the current situation the system is tailored for a desktop experience, and the workflow is therefore limited in terms of mobility. This project aims to allow the users to be more mobile by investigating the possibility of developing a mobile application for usage with SIRS. During the project a proof of concept of such an application has been developed. The implementation relies largely on using currently available api:s and when necessary porting some code from server to client side. By using various UX-related methods during the development of the application it is expected that the application is user friendly and fits the target audience. When looking at the result of the work, it is indeed possible to integrate a standalone mobile application with SIRS. The application also has usability which is comparable to the current system. However, some limitations were found that required rewriting the existing system to provide necessary data to client side applications like the one developed in this project. To conclude, the application is a proof of concept that shows what can be done without modifying the current system. Some of the major things that has to be modified before taking the application to production, such as stability concerns and testing, is also presented as results of the project.

Arbetet jämför JavaScript-ramverken Vue.js och React huruvida vilket av ramverken som presterar lägst svarstider i ett experiment. Bakgrunden till arbetet är att undersöka visualiseringav data och i form av en interaktion som är filtrering. Arbetet är inriktat på parkeringsplatser som blir svårare att finna och att filtrering används för att finna lediga parkeringsplatser. Experimentet består av en webbapplikation skapad i en implementation av respektive ramverk som innehåller en lista med parkeringsplatser som går att filtrera. Mätningar genomfördes automatiserat genom ett egenskrivet skript med användning av Tampermonkey för att få fram ett resultat. Resultatet visar att det fanns en signifikant skillnad mellan ramverkens resultat från experimentet till fördel för Vue.js. Det går att följa arbetet steg för steg hur det genomfördes med mål att studien ska vara replikerbar.

Denna rapport redogör för ett projekt utfärdat av sju teknologer vid Linköpings univer-sitet som en del av kursen TDDD96 Kandidatprojekt i programvaruutveckling på uppdrag avföretaget EcCell Environmental. Ett system har utvecklats som möjliggör för avfallstekni-ker att enkelt bokföra avfallet de hanterar i sitt arbete samt underlätta sammanställningenav det. I detta arbete har en progressiv webbapplikation utvecklats med React, en backendutvecklad i Node.js och en tillhörande databas. Databasen och backend använder sig avmolntjänsten Firebase som erbjuder hostning av webbappen, inloggningsmöjligheter samtlagring av dokument och bilder. Resultatet av projektet är webbapplikationen Trace theWaste där rapporter kan skapas och skickas till databasen samt historik av gamla rapporterkan ses. I diskussionsdelen utvärderas arbetet, alternativa implementationssätt diskuteras samtvilka lärdomar gruppmedlemmarna tar med sig. Därefter dras slutsatser kring rapportensfrågeställningar. Rapporten avslutas med individuella delar från gruppmedlemmarna somär kopplade till projektet.

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

Med ett ökat antal API:er på internet ökar även behovet av anvisningar kring dessa. När användarna för API:er har olika nivåer av erfarenhet blir den nödvändiga dokumentationen och instruktionerna svårare att precisera från en utvecklares perspektiv. I detta projekt är målet att fastställa vad som utgör en bra dokumentation för ett API och tillämpa det för ett existerande API på begäran av Askås. Det befintliga materialet analyserades för att bygga en bättre förståelse för vilka API-anrop som stöttades, och skulle byggas om på ett sådant sätt att det skulle vara enkelt att implementera i Askås nya dokumentationssida. För att få klarhet kring vad som utgör bra API-dokumentation undersöktes fältstudier. Givet detta kunde arbetet utföras enligt etablerade studier tillsammans med kontinuerlig feedback från uppdragsgivaren. Resultatet är ett verktyg som kan användas för att göra API-anrop där parametrarna är förklarade på ett dynamiskt sätt som är byggt i React, uttryckt i Docusaurus, i väntan på att bli sammansatt i Askås nya dokumentationssida. / As the number of APIs on the internet increases, so does the need for guidance on how to use these. In APIs where the users have varying experience, the necessary documentation and instructions needed becomes harder to pinpoint from a developer's point of view. In this project, the objective is to conclude what constitutes a good documentation for an API and apply it to an existing API, as requested from Askås. The pre-existing material was analysed to build an understanding for which API calls were supported, and was to be re-built in such a way that it would be easily implemented in Askås' new API documentation site. To bring clarity to what constitutes good API documentation, field studies were examined. With this, the project could be executed according to the examined studies, as well as feedback from the client. The result is a tool that can be used to make API calls where the parametres are explained in a dynamic fashion - developed in React, expressed in Docusaurus, waiting to be merged into Askås new documentation site.