Interface for Displaying Transactions in PEPPOL
Total Page：16
File Type：pdf, Size：1020Kb
Higher Education Diploma in Software Engineering with emphasis in Web Programming June 2020 Interface for displaying transactions in PEPPOL Emelie Åslund Faculty of Computing, Blekinge Institute of Technology, 371 79 Karlskrona, Sweden This thesis is submitted to the Faculty of Computing at Blekinge Institute of Technology in partial fulfilment of the requirements for the degree of Higher Education Diploma in Software Engineering with emphasis in Web Programming. The thesis is equivalent to 10 weeks of full time studies. The author declares that she is the sole author of this thesis and that she has not used any sources other than those listed in the bibliography and identified as references. She further declares that she have not submitted this thesis at any other institution to obtain a degree. Contact Information: Author(s): Emelie Åslund E-mail: [email protected] University advisor: Kenneth Lewenhagen Department of Computer Science Faculty of Computing Internet : www.bth.se Blekinge Institute of Technology Phone : +46 455 38 50 00 SE–371 79 Karlskrona, Sweden Fax : +46 455 38 50 57 Abstract The purpose of this study is to show how transaction data from PEPPOL can be displayed in an effective way. PEPPOL is used to exchange e-documents between public and private entities worldwide. When there are many transactions coming through every day it is important to highlight the ones that have failed, and to be able to filter the transactions. This is done with Angular 9, and because Angular is being upgraded frequently this study also focuses on making maintainable and readable code which will help future developers. Angular Materials table is being used, to display the transactions, as it provides a simple but modern table, and above the table there is a search bar which helps us find specific transactions. Comments are added to the code, so it is easy to tell what each code block does and the MVC pattern is used to split up the components, models and views. Keywords: Angular, Angular Materials, Transactions, PEPPOL Acknowledgments Ever since I was in grade school, programming has been a huge interest for me, I always felt like it was really something that I wanted to do and learn. Since I gradu- ated from Gymnasium I have been wanting to study programming at BTH. I applied a few years in a row, and I got accepted every time but never felt that I was ready to move so far away from home so I always ended up declining it. But then one year I saw their Web Programming program, and that it was available to do on a distance and that is when I decided that I would finally jump onto this train. It has now gone two years of studying and it has been very difficult but I have learnt so much. I want to thank all of the dbwebb teachers that we have had throughout these two years, they have always been very kind, helpful and supportive. No matter the time of the day some of the teachers have always been there to help, even when it has been the weekend. I also want to thank Qvalia for letting me help them with this project. There has been some difficult times with a lot of setbacks but in the end it has been an interesting journey where I have learnt a lot. 2 Contents Abstract 1 Acknowledgments 2 1 Introduction 5 1.1Background................................ 5 1.2 About Qvalia and PEPPOL ....................... 6 1.3 Purpose and Problem ........................... 6 1.4Scope................................... 6 2 Questions To Be Answered 7 3Method 8 3.1 The Coding ................................ 8 3.2 RQ Methods ................................ 8 3.3 The Experiment .............................. 9 3.4 Reference/Research Method ....................... 9 4 Literature Review 10 5 Analysis and Results 11 5.1UserInterface(UI)............................ 11 5.2 Material Designs ............................. 12 5.3Highlightingatransaction........................ 14 5.4 Conclusion of Highlighting a Transaction ................ 16 5.5Filteringatransaction.......................... 17 5.6 Conclusion of Filtering a Transaction .................. 18 5.7 PEPPOL ................................. 19 5.8AddingthedataintoAngular...................... 19 5.9 Comments ................................. 25 5.10 Conclusion of Maintaining Code ..................... 26 6 Conclusion 27 7 Future Work 28 References 29 A Interview 32 3 List of Figures 5.1 Standard HTML Table .......................... 13 5.2 Material Design Table .......................... 14 5.3 Symbols of processed, caution and error ................. 15 5.4Searchingthetable............................ 17 5.5Filterthefrontend............................ 17 5.6Sortingtableheaders........................... 18 5.7Transactionquery............................. 20 5.8Folders................................... 21 5.9Service................................... 22 5.10 Datasource code with comments ..................... 23 5.11Peppol-listcomponent.......................... 24 5.12Uselesscomment............................. 26 5.13 Useful comment .............................. 26 4 Chapter 1 Introduction This report is about how to develop an admin interface, which will allow an admin to know when transactions have gone through, and display when errors occur in PEPPOL [1]. An additional requirement is that the code is structured so that it is easier for other programmers to read and understand it. 1.1 Background Before the advent of computers in business, most companies would keep records on paper, typically stored in filing cabinets. Processing these records to sort, search, filter and modify would take considerable time, potentially require multiple people to do it and could also make it harder to find stuff. When the first computers finally arrived the filing cabinets would’ve been replaced with the earliest form of databases. Then as the features of the databases have improved, the information has been more tightly integrated so everything was held in one database. After the internet became relevant, a database would be accessible from multiple locations across the network [2]. In modern times, companies have grown bigger across multiple locations and there are a lot more administrative tasks to take care of. For a multi-location company that handles customers, the internet (or some sort of internal network) is essential to avoid having to add customers details to multiple database machines or ship database information between locations. Amazon Web Services (AWS) is going to be the platform used to for this project. AWS was created in 2006 and is a secure cloud services platform. They currently power thousands of businesses in 190 countries around the world. AWS offers low cost pricing, security, flexibility and agility [3]. AWS handles different kind of databases like MySQL, PostgreSQL and Oracle. In this project the PostgreSQL is the chosen database. There is no exact time when the first admin panel was created but it was likely to be very early on. The main reason for this is that it can make the job much easier as it can give us easy access to data, so that for example all your customer information can be accessed easily. Such a panel could also give interactivity so the customers could be filtered in many ways, such as which ones are new, which have left etc [4]. 5 1.2 About Qvalia and PEPPOL Qvalia [5] was formed in 2007 by Henri Taipale, with the main purpose of improv- ing and automating financial processes. Qvalia has been appointed as one of the Nordics’ fastest growing companies. They have offices in Stockholm, Helsinki, Oslo and Copenhagen. With Qvalia you can send and receive invoices as a company, since 2019 they are using PEPPOL. PEPPOL is short for Pan European Public Procurement On-Line and it’s an Euro- pean network that makes sharing of digital business documents between buyers and sellers easier [6]. When PEPPOL got released in 2008 its main purpose was to make easier trades between European governments. Ever since then it has evolved beyond that intention and its purpose today is to exchange safe e-documents between pub- lic and private entities worldwide [7]. It is also important to know that PEPPOL consists of a set of technical specifications rather than a being an e-Procurement plat- form, and it may be implemented in existing e-Procurement systems and e-Business exchange services allowing them to be interoperable between different systems across Europe. 1.3 Purpose and Problem The task that has been assigned is to design and develop an admin interface for displaying and searching transactions in PEPPOL. This is necessary because Qvalia currently has to go into their database and look through all the transactions, which can take an unnecessary amount of time, and make it hard to find a specific one due to the large number of transactions. Since the transactions are dealing with money, it is important that we know the status of them, so the admin interface needs to show if a transaction has gone through properly. If it has failed, it needs to display what has gone wrong, so the administrator can take the appropriate action. Since everything around is developing very quickly, and there are new companies being created each day, this project has the opportunity to show how an easy and understandable interface can be made, which can help with the workload of the company. 1.4 Scope This study is going to be focused on the frontend, that is, the design and structure. This study will not focus on the backend, it will not look at it at all. This study is also not gonna look into creating an interface in any other programming language and framework than TypeScript and Angular. 6 Chapter 2 Questions To Be Answered RQ1. How should transactions be highlighted depending on its status? The goal of this question is to see how a transaction can be presented for the admin- istrator and to be most easily perceived. The administrator should be able to see quickly when a transaction has failed, which can happen if a customer has not yet paid its invoice, the customer has paid twice, not paid enough or paid too much.