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.
| Identifer | oai:union.ndltd.org:UPSALLA1/oai:DiVA.org:miun-51656 |
| Date | January 2024 |
| Creators | Halvarsson, Maria |
| Publisher | Mittuniversitetet, Institutionen för data- och elektroteknik (2023-) |
| Source Sets | DiVA Archive at Upsalla University |
| Language | Swedish |
| Detected Language | Swedish |
| Type | Student thesis, info:eu-repo/semantics/bachelorThesis, text |
| Format | application/pdf |
| Rights | info:eu-repo/semantics/openAccess |
Page generated in 0.002 seconds