SÖRAB is a waste disposal firm that is operative in nine of the municipalities in Stockholm County, Sweden. Each municipality has their own separate management of information and services. SÖRAB aspires to facilitate the process of finding and placing orders on waste disposal services for the residents in these municipalities. This thesis examines what should be done in order to centralize the municipalities’ waste disposal information into a shared portal. The main difficulties, concerning centralization, are that the municipalities use different underlying customer systems and have different practices in regulating waste disposal rates. After proposals for solutions for the identified problems are presented, an investigation into the most suited application type for the portal is conducted. This investigation focuses on a comparison between the two application types native mobile applications and mobile web applications. The usability of the portal is considered important. Hence different techniques, aiming to increase the usability of the graphical interface, are researched and presented. The identified problem areas, the application study and the usability aspects are the foundation for the development of a functional prototype of the portal. The result of the thesis is a prototype of a responsive web application. The prototype is implemented with the framework Angular. In order to facilitate potential future development, an architectural document describing the prototype is written. The thesis can be usable for future implementation projects. It presents a functioning methodology, gives insight in usability principles and compares pros and cons with different application types. / SÖRAB är ett avfallsbolag som är verksamt i nio av Stockholm läns kommuner. Varje kommun har separat hantering av information och tjänster. SÖRAB vill underlätta för kommuninvånarna att hitta och beställa tillgängliga avfallstjänster. Detta examensarbete undersöker vad som krävs för att centralisera kommunernas avfallsinformation i en gemensam portal. De stora svårigheterna kring centraliseringen ligger i att kommunerna använder olika bakomliggande kundsystem och tillämpar olika sätt att styra sina avfallstaxor. Efter att lösningsförslag för problemområdena presenteras, undersöks vilken typ av plattform som passar bäst för portalen. Denna undersökning jämför de två applikationstyperna nativa mobilapplikationer och mobila webbapplikationer. En viktig del för portalen anses vara dess användarvänlighet. I rapporten undersöks och presenteras därför olika tekniker som kan höja användarvänligheten i grafiska gränsnitt. De identifierade problemområdena, applikationsstudien och användarvänlighetaspekterna, blir underlag för att utveckla en funktionell prototyp av portalen. Examensarbetets resultat är en prototyp av en responsiv webbapplikation. Implementeringen sker med ramverket Angular. För att underlätta eventuellt fortsatt arbete, skrivs ett dokument som beskriver prototypens arkitektur. Rapporten kan vara till nytta för framtida implementeringsprojekt. Den uppvisar en fungerande metodik, ger insikt i användarvänlighetsprinciper och jämför föroch nackdelar med olika applikationstyper.

Web applications constitute an essential part of our daily lives, providing us access to significant online services and information. Despite their advantages, they are also vulnerable to security threats, particularly SQL injection attacks. SQL injection is a vulnerability that arises when an attacker inserts malicious SQL queries through user input parameters in a web application. This attack can have severe consequences, such as exposing sensitive information. The purpose of this study is to investigate and analyze the security of web applications against SQL injection attacks. This is achieved by examining SQL injection techniques, their impact on security and integrity, as well as the most common protective solutions. The goal of the study is to enhance and improve the security of applications and protect users from potential security risks. To achieve this, a combination of literature study and practical investigations is conducted. A literature review is performed to identify SQL injection techniques, security risks, and the most prevalent protective solutions. Subsequently, these factors are evaluated and analyzed to determine the effectiveness of the techniques using the penetration testing tool SQLmap. The results of the study indicate that the most common and effective attack techniques are Inband SQL injection and Inferential SQL injection. These techniques can have severe implications for users, businesses, and society at large, such as unauthorized access to protected data, data manipulation in databases, and the compromise of confidentiality and data integrity. To safeguard against such attacks, it is crucial to employ defensive coding practices, including the use of prepared statements with parameterized queries and input validation. However, manual implementation remains challenging. A combination of automated prevention techniques and best coding practices should be employed to ensure a reliable database protected against SQL injections, even concerning stored procedures that are difficult to prevent with existing automated prevention techniques. / Webbapplikationer utgör en viktig del av vårt dagliga liv och ger oss tillgång till betydelsefulla onlinetjänster och information. Trots deras fördelar är de också sårbara för säkerhetshot, särskilt SQL-injektionsattacker. SQL-injektion är en sårbarhet som uppstår när en angripare infogar skadliga SQL-frågor genom användarens inmatningsparametrar i en webbapplikation. Attacken medför allvarliga konsekvenser, såsom exponering av känslig information. Syftet med denna studie är att undersöka och analysera säkerheten i webbapplikationer mot SQL-injektionsattacker. Detta genomförs genom att undersöka SQL-injektionstekniker, deras påverkan på säkerhet och integritet, samt de vanligaste skyddslösningarna. Målet med studien är att öka och förbättra säkerheten hos applikationer samt skydda användarna från potentiella säkerhetsrisker. För att åstadkomma detta genomförs en kombination av litteraturstudier och praktiska undersökningar. En litteraturstudie genomförs för att identifiera SQL-injektionstekniker, säkerhetsrisker och de vanligast förekommande skyddslösningarna. Därefter utvärderas och analyseras dessa faktorer för att kunna fastställa effektiviteten hos teknikerna genom användning av penetrationstestningsverktyget SQLmap. Resultaten av studien visar att de vanligaste och mest effektiva attackteknikerna är Inband SQL-injektion och Inferential SQL-injektion. Dessa tekniker kan få allvarliga konsekvenser för användare, företag och samhället i stort, såsom åtkomst till skyddade data, manipulering av data i databasen och förlust av sekretess och dataintegritet. För att skydda mot sådana attacker är det avgörande att använda defensiva kodningsmetoder, inklusive användning av förberedda satser med parametriserade frågor och indatavalidering. Trots detta utgör manuell implementering en utmaning. En kombination av automatiserade förebyggande tekniker och bästa kod-praxis bör användas för att säkerställa en pålitlig databas som är skyddade mot SQL-injektioner, även när det gäller lagrade procedurer som är svåra att förhindra med befintliga automatiserade förebyggande tekniker.

The use of no-code editors makes developing web applications more accessible since they are based on Graphical User Interface elements instead of conventional programming languages. This allows users without previous programming experience to design web-application interfaces. However, designing web applications with no-code editors can be a daunting process for beginners without design experience. This study therefore investigates which aspects of no-code editors can support novice designers when designing aesthetically pleasing web-application layouts. A usability analysis of three state-of-the-art no-code editors was conducted using the Cognitive Dimensions of Notations framework. The main aspect that impacted usability in the no-code editors was a difficulty aligning and positioning elements due to hidden dependencies and unforeseen actions. Based on this finding, a prototype was developed to address these issues. The prototype introduced the concept of a "Golden Ratio Guide", a visual guide intended to support the alignment and positioning of elements. A user study was conducted with inexperienced designers (n=5) to test if the Golden Ratio Guide helps with designing aesthetic web-application layouts. Contrary to expectations, a survey with users of such web-applications (n=36) showed that the web-layouts designed without the Golden Ratio Guide were preferred. / Att använda sig av programmeringsfria redigeringsprogram för att utveckla webbapplikationer bidrar till en större tillgänglighet då de är baserade på grafiska användargränssnittselement istället för konventionella programmeringsspråk. Detta tillåter användare utan tidigare programmeringserfarenhet att designa webbapplikationsgränssnitt. Men att designa webbapplikationer i ett programmeringsfritt redigeringsprogram kan vara en skrämmande process för nybörjare utan designerfarenhet. Denna studie undersöker därför vilka aspekter av programmeringsfria redigeringsprogram som stödjer nybörjare med att designa estetiskt tilltalande layouter för webbapplikationer. En användbarhetsanalys av tre programmeringsfria redigeringsprogram relevanta inom fältet genomfördes med hjälp av ramverket Cognitive Dimensions of Notations. Den huvudsakliga aspekten som påverkade användbarheten i programmeringsfria redigeringsprogram var svårigheten att anpassa och placera element på grund av dolda beroenden och oförutsedda händelser. Baserat på denna upptäckt utvecklades en prototyp för att lösa dessa problem. Prototypen introducerade konceptet med en "Gyllene Snittet Guide", en visuell guide avsedd att stödja anpassning och positionering. En användarstudie genomfördes med oerfarna designers (n=5) för att testa om guiden baserad på det Gyllene Snittet hjälper med att designa estetiska layouter för webbapplikationer. Tvärtemot förväntningarna visade en undersökning med användare av dessa webbapplikationer (n=36) att webblayouterna som designats utan guiden baserad på det Gyllene Snittet föredrogs.

Quality assurance and software testing of software artifacts is as important as ever and this is especially so the case in web applications. The web applications of today are more complex and are used in more critical systems at a larger scale than ever before. However, testing of these applications is very challenging due to their dynamic nature. It is somewhat challenging to find clear and up-to-date guidelines on how to implement and evaluate regression software testing in small and medium-size enterprises (SME’s) developing web applications. The purpose of this thesis was to investigate the problem at hand and propose an approach to implementing software regression testing in web applications for SME’s. That is, recommending what to test, recommending what kind of software testing could be implemented and using what state of the art front end testing frameworks. An in-depth literature study was conducted to see what had been done in the past and present. Two rounds of semi structured in-depth interviews were conducted with software developers at the company where this thesis was conducted. The main purpose of the first interview was to find business goals from which to derive and subsequently create a testing suite in four different testing frameworks; Cypress, Jest, Playwright and Vitest. The purpose of the second interview was to evaluate and compare the aforementioned testing suites in order to propose an approach on software testing in web applications. In addition, code coverage and mutation scoring was also considered when evaluating the testing suites. The findings of this thesis is that a reasonable approach of introducing software testing into an SME which develops a web application, is to use business requirements for generating test cases and prioritizing end-to-end testing since the perceived benefits of the latter in this thesis far outweigh the benefits of the component testing suites although a combination of both would be the best of both worlds. Although this thesis was conducted on a web application written in React, the findings and recommendations can be applied to any front end framework such as Angular or Vue. / Kvalitetssäkring och testning av mjukvara är lika viktigt som alltid och detta är i synnerhet även fallet i webbapplikationer. Dagens webbapplikationer är mer komplexa och används i mer kritiska system på en större skala än någonsin tidigare. Dessvärre är det svårt att testa dessa applikationer eftersom att de är dynamiska. Det är svårt att hitta riktlinjer för hur man ska implementera och utvärdera regressionstester på små och medelstora företag (SMF) som utvecklar webbapplikationer. Syftet med denna uppsats var att undersöka problemet och föreslå en riktlinje för hur man kan implementera regressionstestning i SMF och i webbapplikationer. Detta innebär att föreslå vad man kan testa, vilken form av mjukvarutestning man kan implementera och med vilka moderna testningsramverk man kan göra detta med. En ingående litteraturstudie genomfördes för att ta reda på vad som hade gjorts tidigare inom området. Två rundor av semistrukturerade intervjuer genomfördes med mjukvaruutvecklarna på företaget där uppsatsen genomfördes. Syftet med den första intervjun var att hitta företagsmål som sedan agerade grund till testningssviter i fyra olika ramverk; Cypress, Jest, Playwright och Vitest. Syftet med den andra intervjun var att utvärdera och jämföra dessa testsviter för att rekommendera ett tillvägagångssätt för att implementera mjukvarutestning i webbapplikationer. Utöver intervjuerna så bidrog mutationspoäng och kodtäckning till rekommendationerna. Uppsatsen finner att ett rimligt sätt att implementera regressionstester i ett SMF och en webbapplikation är att generera testfall utifrån affärskrav och att prioritera testning på användarnivå eftersom att fördelarna från denna nivå av testning överväger fördelarna från komponenttestning. Allra helst bör man implementera en kombination av båda nivåerna. Fastän denna uppsats undersökte en webbapplikation i React så kan dessa upptäckter och rekommendationer även tillämpas på vilket frontendramverk som helst så som exempelvis Angular eller Vue.

Mobile platform fragmentation is one of the main challenges of mobile development today, forcing developers to develop one application for each targeted platform, which significantly impacts time and cost for application development and maintenance. The fragmentation has given rise to cross-platform application development tools and frameworks, making it possible to develop one single application compatible with several platforms. This thesis focuses on the web-based approach Progressive Web Applications (PWAs), which, in contrast to previous approaches, targets both mobile and desktop devices. We aim to point out the supported features, evaluate their suitability for QR code scanning, and their performance compared to alternative approaches on iOS. We specifically cover a feature set of 33 features and measure response times, CPU and memory utilization, geolocation accuracy, and QR code scanning correctness. We developed three benchmark artifacts for the performance analysis: a PWA, a React Native application, and a native iOS application, and conducted automated run-time experiments using the tools Xcode and XCUITest. The performance evaluation shows that native applications performed best in memory and CPU utilization, whereas React Native achieved the shortest response times. The feature evaluation shows that the majority of the features are supported or partially supported for PWAs, and that the support continues to grow. Still, PWAs lack support for crucial mobile features such as push notifications and background synchronization, making PWAs insufficient for advanced mobile application development on iOS. Nevertheless, this study shows that PWAs are well worth considering for applications with low requirements. / Fragmentering av mobilplattformar är en av de största utmaningarna inom mobilutveckling, vilket tvingar utvecklare att utveckla en applikation för varje specific plattform, vilket avsevärt påverkar tid och kostnad för applikationsutveckling och underhåll. Fragmenteringen har gett upphov till plattformsoberoende applikationsutvecklingsverktyg och ramverk, vilka möjliggör utveckling av en enda applikation kompatibel med flertalet plattformar. Det här examensarbetet fokuserar på det webbaserade tillvägagångssättet Progressiva Webb Applikationers (PWAs), som till skillnad från tidigare tillvägagångssätt, riktar sig till både mobila och stationära enheter. Den här studien syftar till att reda ut vilka funktioner som stöds av PWAs, utvärdera PWAs lämplighet för QR-kodskanning och deras prestanda jämfört med alternativa tillvägagångssätt på iOS. Mer specifikt täcker den här stiduen en evaluering av 33 essentiella mobilfunktioner samt en prestandaanalys genom mätning av svarstid, CPU- och minnesanvändning, geolokaliseringsnoggrannhet och QR-kodsskanning korrekthet. Vi utvecklade tre benchmark-artefakter för prestandaanalysen: en PWA, en React Native-applikation och en inbyggd iOS-applikation, och genomförde automatiserade experiment med verktygen Xcode och XCUITest. Prestandautvärderingen visar att inbyggda applikationer presterade bäst i minne och CPU-användning, medan React Native uppnådde de kortaste svarstiderna. Funktionsutvärderingen visar att majoriteten av funktionerna stöds eller delvis stöds för PWAs, och att stödet fortsätter att växa. Ändå saknar PWAs stöd för viktiga mobila funktioner som push-meddelanden och bakgrundssynkronisering, vilket gör PWAs otillräckliga för utveckling av avancerade iOS mobilapplikationer. Däremot är PWAs väl värda att överväga för applikationer med lägre krav.

<p>Scania InfoMate develops web applications that support truck distributors and workshops with the necessary tools for an effective maintenance process. However, the end-users of these applications are faced with as many different graphical interfaces as there are applications. As a consequence, important effects of recognition are lost, developers spend unnecessary time designing new solutions for each application and Scania InfoMate does not present a homogeneous brand image towards its customers.</p><p>Therefore the aim of this study is to give a suggestion of how a standardized graphical interface for web applications at Scania InfoMate should be designed. The given suggestion should come from thorough investigation of both end-user needs and recent research within the area of usability. In addition to a standardized interface this study also aims to deliver guidelines that support future web application development at Scania InfoMate.</p><p>Through a combination of methods, mainly heuristic evaluation and user interviews, an elaborate description of usability and consistency problems in a defined web application portfolio is produced. This served as a basis for developing an interface design suggestion and helped pinpoint crucial areas in need of usability and consistency guidelines.</p><p>The main findings are a graphical interface design suggestion that specify positioning and visualization of common interface elements and guidelines ensuring that future web application development at Scania InfoMate is kept at a high standard regarding usability and consistency. This study also points out areas for further development at Scania InfoMate and suggests that additional studies should take place to establish a common view on consistency issues.</p>

Scania InfoMate develops web applications that support truck distributors and workshops with the necessary tools for an effective maintenance process. However, the end-users of these applications are faced with as many different graphical interfaces as there are applications. As a consequence, important effects of recognition are lost, developers spend unnecessary time designing new solutions for each application and Scania InfoMate does not present a homogeneous brand image towards its customers. Therefore the aim of this study is to give a suggestion of how a standardized graphical interface for web applications at Scania InfoMate should be designed. The given suggestion should come from thorough investigation of both end-user needs and recent research within the area of usability. In addition to a standardized interface this study also aims to deliver guidelines that support future web application development at Scania InfoMate. Through a combination of methods, mainly heuristic evaluation and user interviews, an elaborate description of usability and consistency problems in a defined web application portfolio is produced. This served as a basis for developing an interface design suggestion and helped pinpoint crucial areas in need of usability and consistency guidelines. The main findings are a graphical interface design suggestion that specify positioning and visualization of common interface elements and guidelines ensuring that future web application development at Scania InfoMate is kept at a high standard regarding usability and consistency. This study also points out areas for further development at Scania InfoMate and suggests that additional studies should take place to establish a common view on consistency issues.