Higher Education Diploma in Software Engineering with emphasis in Web Programming
June 2020
Interface for displaying transactions in PEPPOL
Emelie Åslund
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: emau18@student.bth.se
University advisor:
Kenneth Lewenhagen
Department of Computer Science
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.
Contents
Abstract 1
Acknowledgments 2
1 Introduction 5
1.1 Background . . . . 5
1.2 About Qvalia and PEPPOL . . . . 6
1.3 Purpose and Problem . . . . 6
1.4 Scope . . . . 6
2 Questions To Be Answered 7 3 Method 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.1 User Interface (UI) . . . . 11
5.2 Material Designs . . . . 12
5.3 Highlighting a transaction . . . . 14
5.4 Conclusion of Highlighting a Transaction . . . . 16
5.5 Filtering a transaction . . . . 17
5.6 Conclusion of Filtering a Transaction . . . . 18
5.7 PEPPOL . . . . 19
5.8 Adding the data into Angular . . . . 19
5.9 Comments . . . . 25
5.10 Conclusion of Maintaining Code . . . . 26
6 Conclusion 27
7 Future Work 28
References 29
A Interview 32
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.4 Searching the table . . . . 17
5.5 Filter the frontend . . . . 17
5.6 Sorting table headers . . . . 18
5.7 Transaction query . . . . 20
5.8 Folders . . . . 21
5.9 Service . . . . 22
5.10 Datasource code with comments . . . . 23
5.11 Peppol-list component . . . . 24
5.12 Useless comment . . . . 26
5.13 Useful comment . . . . 26
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].
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.
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. It is also important that the administrator can see when a transaction has gone through.
RQ2. What is a good solution for filtering the displayed data?
The goal of this question is to filter the data in a way so that the administrator can find the transaction they are looking for.
RQ3. How can code be designed and written, to make it easy to main- tain?
The goal of this question is to make the coding easy to understand for developers, by making it maintainable and readable.
Chapter 3
Method
3.1 The Coding
The JavaScript [8] framework Angular 9 [9] has been chosen to this project. The reason for using Angular is because it is an MVC (Model-View-Controller) framework using the MVC design pattern. The MVC pattern helps to structure the code better, with the model being the central component. The pattern is segmented such that the model manage the data, the view implements the user interface and the controller contains the application logic, which means that the underlying interface to the data source (the model), the visual design (view), and the application logic (controller) may each be changed independently without affecting the other areas significantly [10].
3.2 RQ Methods
RQ1 is being answered by doing an experiment with a test group, they are going to look at a list of all the transactions that has been made, and then see if they can easily point out the transactions that has failed. It is also being answered by comparing different approaches of highlighting a transaction.
RQ2 would have been answered by doing an experiment with a test group, who would have retrieved a list of all transactions and then searched for specific trans- actions. To see if they could get the correct results, and see if they could filter the transactions by their status (error, duplicate, processed). However due to the code not having been completed due to running out of time, the test group will instead answer questions about their expectations of the operation of a search bar for filter- ing and sorting transactions.
RQ3 is being answered by letting a couple of frontend developers look through the code and then answer a few questions regarding the coding to see if it is easy to read and understand the content of the code. It is also being answered by researching different ways of maintaining code.
3.3 The Experiment
The experiments that are going to be done will be done in a way where the test participants will get the user interface and then on their own, they will look through it and see if they can find everything that is on the page. Afterwards, I will ask them some questions regarding the interface. Side note, due to the 2020 pandemic this is the way the experiment has to be done, the original plan was to sit with each one of the test persons and ask them to check certain things such as point out a few failed transactions, search for a specific one and so on. But now they have to do this on their own.
Lastly I will ask a couple of programmers to look through the code, and then answer some questions to see if they understand the structure of the code, and the code itself.
The interviews are available at the end of this thesis (Page 28).
3.4 Reference/Research Method
To find references for this thesis I will mostly make use of BTH Library and sometimes Google. There is not a lot of studies when it comes to transactions, hence of why I am going to have to use Google to find information about certain things. When searching for things I am going to use words such as ’User Interface’, ’Transaction interface’, ’Angular interface’, ’Angular Materials’ and ’Highlight Colors’.
Chapter 4
Literature Review
My main resources to find references and literature has been BTH Library [11] and Google [12]. The main reason for having to use google is due to the lack of informa- tion of my researches. But by having to use Google I spend extra time to research the information that I find, I want to make sure that it is a trustworthy source and there are several ways of doing that. I will look up the author and make sure that they are reliable and if an article does not have an author I will look up the information that they have provided and make sure there are other articles that can validate their information.
One of my references is https://www.justinmind.com/blog/ui-layout-design-6-must- know-patterns/ [13] which is about how you should design your layout and in most cases you would not use a blog to refer to things. However when looking at this website it turns out that they do design prototypes and already there it gives you a hint that they know about design. Lastly when you look up the author of this article it shows that he has plenty of experienced in UX and therefore I see this blog as a reliable source. And that is how I have worked with the articles I have found and used as references.
One reoccurring search that I have done on the BTH Library is "Angular inter- face" which gives me a result of 759 essays, 1 594 books, 98 610 articles and much more. Obviously this gives me plenty of choices and some of them are useful and is actually about an Angular Interface, but most of these are just about Angular.
Having the word Angular in a search term will give you many hits.
Therefore I also search for "User Interface" which gives me a result of 7 294 essays, 250 352 books and 524 581 articles. This is many results to go through and in this case I only look at the essays as they are the most relevant. There are plenty of essays in this search that describes the graphical part of a user interface which is what I am looking for.
A more specific search for "Angular table user interface with search" may have been better and given fewer hits, but I found sufficiently relevant essays quickly enough that a more specific search was not necessary.
Chapter 5
Analysis and Results
5.1 User Interface (UI)
A user interface (UI) designer helps a company to create a user experience for their product [14]. One key requirement in developing a user interface is to make it "user- friendly". The definition of user-friendly remains vague, but to achieve a successful user interface design, it is important to have it well documented and making it pre- cise [15]. In order to be able to make an interface that looks good and is easy to navigate it is important to structure it well, so that everything is not scattered in a haphazard manner around on the page. It is important to know what is required on the interface; a good way is to sketch the idea on paper before integrating it.
Colors
A color is used to make an interface more attractive and meaningful, using a color in the wrong place can make an interface look clumsy and confusing [16]. Even though a computer can display over 16 million colors [17] it is not always as easy as it sounds.
Choosing a color that suits a particular web page depends a lot on what the subject matter of the web page is, and who are the customers. If a web page is directed towards children it can be appropriate to use vivid colors to an extend [18], while if a web page is a forum it may be more appropriate to use light colors as it will be easier to read and write. The importance of colors is to make the interface more attractive and help in differentiating one item from another. When choosing a color it is also important to acknowledge the different culture a color can bring. A color can mean something in one culture while it can mean something else in another culture [19].
Typography
One of the first thing you notice when looking at a web page is the font. A font can tell a lot about a web page, and it can easily change the way the page is viewed.
Therefore it is important to not only choose the right font, but also place it correctly.
There are many fonts to choose from, and each font brings its own mood and style to the interface and your choice will influence the user’s first impression of your web page [20]. When designers decide what size they want a font to be, they make use of clear typographic hierarchy which makes the text legible and easy to scan and it allows certain parts to be highlighted to draw a user’s attention [20]. It is also important to consider the letter spacing, the closer the letters are placed the harder it is to read, and the font that is used determines the letter spacing that should be chosen. For example, a sans-serif font requires less letter spacing than a serif font.
Structure
When an interface is designed, it needs to be easy to access and navigate, and a good way to achieve this is to make the interface simple, and there is no need to add unnecessary elements. When planning the page layout, it should always be kept in mind that when placing elements, there should be a purpose to the placements [21].
A frequent goal should be to ensure that a common pattern is used, with enough white space between each element. One way to achieve this result is to use grids, which are a common way to create a structure and can help define proportion and create a rhythm [13].
5.2 Material Designs
Angular Material is Google’s design language, which provides a rich set of guidelines.
The components and controls on the user interface show depth and texture, cast shadows and use animation in a meaningful way [14]. To make an interface have a consistency in its look and feel, behavior and experience a design language is developed. There are several design languages apart from Angular Material such as Flat Design, Microsoft Metro Design and Fluent Design System.
There are several Google products that use Angular Material, such as Gmail, YouTube, Google Drive, Google Plus and Google Docs. One may ask if everything will look the same if we use Angular Material, but the answer is no as the Angular Material library provides enough extensibility to build a unique identity [14] and a big part of that has to do with themes, it is possible to use existing themes or you can build your own custom one. For this project we are solely focusing on the tables and we will use an existing theme.
Flat Design
When a very simple web page is required, that has a clean look that seems visually flat on the screen Flat Design should be chosen [22]. It was a popular trend back in 2012 and 2013 [23] because of it’s minimalistic look. A flat design means that all extra elements that are not necessary such as lighting, effects and shadows are removed. And by doing that it gives the web page a very simple look without giving it any depth. Some of the world famous companies such as Google, Facebook and Apple have redesigned their logos and user interfaces to match the Flat Design look [22]. When Facebook and Google redesigned their logo to flat design all they had to do was to remove some shadows, and therefore it is a very simple approach, it can look good but in 2020 it is not quite as a common approach like it used to be.
Microsoft Metro Design
Microsoft Metro Design also known as MDL is a design language created by Mi- crosoft and it was formerly known as "Metro". Its design purpose is mostly focused on typography and simplified icons. It is used in popular applications such as Xbox One, Windows 8 and Outlook [24].
Fluent Design System
The Fluent Design System previously known as Project Neon is a revamp of MDL.
It was developed in 2017 by Microsoft. The purpose of this design language is to help user interfaces look more modern. It can be described using five fundamental elements such as light, depth, motion, material and scale [25].
Angular Material ends up being having some traits from each of these design lan- guages. Perhaps not so much from Flat Design as there is a lot of shadows and effects in Angular Material. And that is why the Angular Material is being used to create our interface, to give it a much more of a modern look and there is no need to design the table on your own. And it does not take much code to add a good looking table where it would take much more time to design your own from scratch.
Tables
With the help of a table, the information is displayed in a regular readable form.
When the data includes a lot of different objects, all of them are often not displayed at the same time, and that is when tables come in handy and the objects in the data that are to be shown are chosen. Usually only the most essential data such as name is displayed, and then instead of displaying all the data a clickable link is added within a column called "action" or such, which can be clicked to show all the data of a certain transaction.
Figure 5.1 shows how a very standard HTML table looks with minimal style added to it, and while it is not awful, it is perhaps not the greatest look. A lot of time could be spent by make it look better, but that is not always the priority.
Figure 5.1: Standard HTML Table
Figure 5.2 shows how an Angular Material table looks, it already comes styled, looks modern, and it is easy to read and looks overall good. One might think that it is hard to implement this table, but it is not. When the data has been collected, all that is needed to do is add "<table mat-table>" into the HTML code and pass the data in, which is usually done by a "dataSource" input. Similarly, in order to add a column, all that is needed is to add a tag "<th mat-header-cell *matHeaderCellDef>" which defines the table header and for a cell the tag "<td mat-cell *matCellDef="test">"
is added to define the table cell. Where it says "test" the data for the columns would usually be passed in, such as a company name, status and so on. To display colors on the statuses depending on what they are, it is done by checking what the column name is and adding a CSS class to it. If the text is for example "error" then the CSS class "failed-transaction" will be used which includes a color red to change the text color. And the same works for the other column texts.
Figure 5.2: Material Design Table
Therefore it is easy to conclude that, it is not only more efficient to use Angular Materials but that it also looks good and it is easy to implement. It is also possible to override the style of Figure 5.2 if a different font, color or such is wanted.
5.3 Highlighting a transaction
It is very important that an administrator can tell when a transaction has gone wrong. With the help of a table this can quite easily be done. Figure 5.2 show us the difference between transactions that have gone wrong, are duplicate and have processed and it is clear that adding colors makes the status of the transaction much more obvious. Highlighting a failed transaction in red, it becomes instantly associ- ated with something that is bad, while having green for successful transactions, it is associated with something good. Highlighting a duplicate transaction with yellow does not instantly give us an association, it mostly makes us think that something is going on, it is nothing bad and nothing good, and is something in between.
Red
During childhood, children are taught that red means some kind of danger, as it is the color of blood, fire and stop signs as long as many other things. Red is a highly visible color and our attention gets drawn very quickly when it is seen, and makes people alert and do quick decisions [26].
Green
The green color makes us feel like something is right, when a green traffic light is seen it is time to go, and when there is a green light above a shop till it is okay to start adding stuff onto the conveyor belt. Why green has become a color that is associate with "go" has to do with an incident in 1914, and at that time on the railroads, red was stop, white was go, and green was caution. There was an accident when the red light lens for a signal fell out, causing it to look clear/white. When a train approached the signal which should have been red (stop) it showed white (go), so the train kept on moving even though it was meant to stop and this ended up in
order to prevent that this would ever happen again [27].
Yellow
There is not a lot of information as of why yellow is used as a neutral color, one reason could be that if you mix red and green you get yellow [28]. However the yellow color gives humans a feeling of hope and happiness while it also represents caution [29]. And in this situation we want to highlight caution, because we know that the transaction has not passed yet nor failed. And in this state it has a fifty percentage of doing either which is why we want to keep an eye open about this transaction. And if a transaction has been duplicated it is not necessary to show it with a red color, but rather with a yellow color to say that it should be taken a look at.
Colorblindness
What happens if colors cannot be seen? The most common form of color blindness is red-green color blindness [30], which obviously has implications if the only indication of failure or success is using red or green color. Is the administrator going to have a harder time to find out the status of a transaction? It does not necessarily have to be, but it can also be a little bit more difficult to adjust for colorblind people. As can be seen on Figure 5.2 the status of the transaction is marked in bold, but that is not necessarily going to help anyone. There is a possibility that there might be a colorblind person who is going to look at the interface so colors can not be the only way that the status of a transaction can be highlighted. In the table, the font of the
"error" text could be increased, so that it is more visible to the eye and then the
"duplicate" font could be made into an italic font and perhaps make the "processed"
text be a normal bold font. It is also possible to use color blind friendly colors, but the developer would need to learn the meaning of these colors before implementing it.
Symbols
However, there are more options, one of which is symbols. As the internet has evolved and web pages are getting more advanced, a lot of them use symbols, especially when it comes to navigation. Figure 5.3 shows the kind of symbols that could be added either beside the "processed", "error", "duplicate" text or only the symbols could be used without the text. These symbols would work just as well if they were black and white. Just as with colors the meanings of these symbols has been learnt by most users during childhood.
Figure 5.3: Symbols of processed, caution and error
A check mark is mostly used in the English speaking world as an indication to "yes", e.g. if something has been verified and if something is correct. However in certain countries, such as Sweden, Finland, Japan and Korea, a check mark can actually indicate that something is incorrect e.g. on a test where there is an incorrect answer
a check mark is commonly placed beside it [31]. However, in the context of this project, it will be seen as a "yes" if there is a check mark.
When the yellow exclamation mark with a triangle around it is seen, the meaning is typically "caution" [32]. These symbols will sometimes pop up in an application such as email, if a user has tried to send a message, and it has failed. They can also pop up on a car dashboard, when there is something that is wrong, such as low reservoir for the windscreen washer system [32]. They usually show up in scenarios where the site is telling the user that there is something not completely correct, and to pay attention to whatever has been flagged.
When a big red cross is seen, it is normal to associate it to a warning, critical error or danger [33]. When driving, some of those signs may be seen, and it is pretty clear that the driver should stop or not enter. Therefore by having a cross (whether it is red or not) the user knows that there is something wrong with this transaction and should investigate further.
5.4 Conclusion of Highlighting a Transaction
Looking through the alternatives to highlight a transaction, it is clear that the in- terface that is being created will be used with colors. The reason is because it is an efficient implementation; there is not a lot that has to be added to change the color of a status, while it would take more development time to use symbols. Changing the size of a font depending on its status would not look good.
When asking the three test users if they were able to spot the status of the transac- tion easily, they all answered that they could, and one of them stated that the colors helped to make the status even clearer.
When asked if they could identify the status of a transaction because of their colors, they all answered yes. They thought that it was easy to tell the difference because of the colors used. After asking them about colors, I move on and asked them how they would feel if symbols were used, instead of colored text, and if they would be able to identify the different transaction statuses. Two of the test people did not think it would make a difference using symbols, and it would be more or less the same as having colored text. However one test user was not quite as convinced that he would be able to tell the difference right away and that it may take a few seconds to identify them.
I finally asked them whether if they had a choice between having colored text or symbols which they would prefer. All of them said that they preferred colored text, mostly because it looked better than symbols. However one of the test people said that if the table would be on a smaller screen, such as a smartphone, he would prefer symbols.
The user statements indicate that colored text is very visible and makes the different statuses of the transaction clear and easy to spot. Thus the decision to pick red for failed transactions, green for successful transactions, and yellow for warnings seems to be a good solution for highlighting. It is worth mentioning that none of the test people were color blind, and if they were, the answers would most likely be
5.5 Filtering a transaction
Qvalia is a very fast growing company, and since their customer count is increasing every year, it means that more transaction will be made and therefore it is very important to still be able to keep track of all the transactions. Even if there are only 30 transactions it can be hard to keep track of each one of them, and as mentioned earlier it is very important to keep track of them as there is money involved and failing to respond to one transaction failing could be devastating for the company.
While a table is a good solution for displaying data, it is also important to be able to search transaction as it can be hard to find what the user is looking for otherwise.
Search
With the help of Angular Materials it is possible to add a search function for the table. The point of the search function is to find what ever you are searching for.
Whether it is a company name, a status, a date and so on. This is a very good way of finding what you are looking for. To add the visual effect of a search bar in Angular Materials all you have to add is "<mat-form-field>" with an input field before closing the form field tag.
Figure 5.4 displays how the search bar looks like. Before typing anything into the search bar it will say "Search" where "2020" is with no blue line, but as soon as you click on the search bar and start typing Figure 5.4 is what it will look like. And this animation does not require any extra code.
Figure 5.4: Searching the table
To add the search function into the code all that should be needed is to add a function that has event as a parameter and will look through the data, and should output the matching data as to what the user has written and in the HTML file. This function would be called inside of the "<input matinput keyup="functionName(event)>"
which makes it filter the data every time the user release a keyboard key. However because of the way the data has been added into the backend for this project this does not work, and due to time constraints, it has not been implemented.
Figure 5.5: Filter the frontend
Figure 5.5 displays how the filter could have been done in the frontend. The filtered output has been sent back to the console rather than the datasource because
the datasource is private and read-only, and hence the filtered output is not shown in the browser table.
Table Headers
Another great way of filtering a transaction is by being able to click the table headers.
By clicking a table header the column will be ordered in either ascending or descend- ing order and that is a great way of seeing all the transactions that have failed in order. It is easy to add the visual effect of sorting a header with Angular Materials, all that is needed is to add "mat-sort-header" inside of the "<th>". When hovering over a table header it will show an arrow up, and if you press on it the arrow will point down.
Figure 5.6 displays how it looks like when you click on a table header, in this case
"Date" has been clicked. "From" displays how it looks like when you hover over a table header. If you have not clicked on a table header, nor hover over them, none of the arrows will be displayed.
Figure 5.6: Sorting table headers
To filter the transactions by clickable headers all that should be needed is to add
"@ViewChild(MatSort, static: true) sort: MatSort;" into the "peppol-list.component.ts"
file and add "this.dataSource.sort = this.sort;" into the "ngOnOnit" function in the same file. But because of the same reason as the search bar, it does not work.
Pagination
Pagination is not particularly a way of finding a transaction, but it helps the overall view of all the transactions. You would not usually show all the transactions at once if there are more than twenty of them. Angular Materials offers a way off adding pagination, but due to the way the API is built a custom pagination will be used.
At the end of the table there will be a "Show More" button, where if it is clicked, twenty more transactions will be shown. And when there are no more transactions it will start from the beginning. It is not the most efficient way of doing a pagination, as there is no way of going back one page, but it was the best solution for this API.
Figure 5.10 displays a function called "loadPeppol" which calls "getAll" which is seen on Figure 5.9, which in return calls "API.graphql" to get the next 20 transactions from that token. And after the response come back, inside "loadPeppol", it updates
"this.nextToken" to the new "nextToken".
5.6 Conclusion of Filtering a Transaction
Even though the filtering was not implemented properly in the project, I still asked
I started by asking them if they understood what the search bar (Figure 5.4) above the table would do, and they all answered that it will search the transactions in the table.
Then I ask them if they know which column of the table the search bar would search, and here they are all very sure that it would search all the table columns, and that it would not matter if your typed in a date, who the transaction is from and to, or the status, it would look at all possible matches.
The next question was if they realised that it was possible to click on the table headers (Figure 5.6) to sort the different columns. They all have different answers to this, one said that he would have guessed that you could click on them as it is a pretty common thing for tables. Another one said that he would probably not have noticed if I had not mentioned it to him. The last one did not think that it was an obvious feature, since the arrows do not show up unless you hover over the table headers.
From their answers I realised how it would be important to change the headers to make it more obvious that the feature of sorting rows by clicking on the column headers exist. However, as it is a part of Angular Materials, it would not be possible to change the look of it, but it would be a possibility to add a small text close to the table headers which would say "Click on the table headers to sort them", and that would make it much clearer that the table headers can be clicked to sort.
5.7 PEPPOL
All the data that is being displayed on the interface is coming from PEPPOL. It is a network that connects many existing platforms, sort of an IT infrastructure which makes it possible to connect and send messages to other systems that are also con- nected to the network [7]. With the help of PEPPOL it is possible to send e-invoices, which is more efficient than paper and emailed invoices.
In our table we show who a transaction has gone to and from, one might expect a company name but with PEPPOL it works a bit differently. Instead of a company name a PEPPOL id and PEPPOL address will be shown as displayed in Figure 5.2.
These are something that the administrator will know about and can look up which id/address belongs to which company.
5.8 Adding the data into Angular
Angular is a JavaScript app-design framework that is used to build single-page ap- plications [34]. Angular is a MVC framework which, as described in section 3.1, means Model-View-Controller. MVC is a popular design pattern for developing web applications as it isolates the logic from the user interface [35]. Therefore it is a well organized framework and includes features such as handling routing and http requests.
Angular is built with TypeScript, which is a superset of JavaScript, so there is
no need to learn a completely new language but still receive features like classes, namespaces and interfaces [36].
Each Angular application has at least one module, which is the root module called AppModule which contains the whole application. Inside of AppModule there is a possibility to import other modules, such as Angular Material.
Within the modules there are components, each component only controls its own view and data, therefore a component should not modify any data that is outside its scope [37]. Each component has its own data and view, which can be anything from a button to a whole page. Components can also use services, which can do multiple things such as storing data and making http requests [38]. Components can also include interfaces which includes a list of data, this is sometimes used directly into a component but for more structure it is preferred to have it separated.
AWS AppSync
In order to get all the data from PEPPOL, Amazon Web Services AppSync is being used [39]. AppSync lets you create a flexible API which also uses GraphQL to make it easier for the interface to get the exact data that is needed. To access the API that is being used for this project, all that is needed is to add a link to the backend, the region that it is provided in, which authentication type that is being used which in this case is an API key, and lastly the API key needs to be added. This is done inside "environments".
GraphQL
GraphQL is a query language for an API, which together with a server side service allows you to execute queries, using a type system you define, to get exactly the data you want and need. It is not tied to any particular type of datbase [40]. Figure 5.7 displays how a query is done to get all the fields that we want from the API.
Figure 5.7: Transaction query
Figure 5.8: Folders Code structure
It is important that other developers can look through someone else’s code and understand what is being done.
This is especially important when there is a group project and someone else is supposed to continue main- tenance or development of existing code. Angular is al- ready helping a lot with this by being an MVC frame- work.
By looking at Figure 5.8 it is possible to see how all the folders are placed. Inside of "app" is where all the code is.
Starting from the top folder, inside of "modules" there is an "authentication" folder, but due to time limits it has not yet been completed at the time of this study, so it will be skipped.
The next part is the main component in this project which is "peppol". Inside of here we have three folders,
"peppol-list" and "transaction" which is a part of the
"view" folder. It is in a "view" folder because they both display a separate view on the application. Inside of "pep- pol" there are files for service, routes, module, interface and datasource.
Navigation is one of the components that is included in this project, but as it has not been a priority it only includes a bit of HTML to display a Qvalia text along with a URL to the transactions. This is using the Angular Material "mat-toolbar" to make it blend in with the table.
Basically a very simple navigation bar to be able to get to the transactions easily.
When using different modules, they can be placed in a shared folder which can be imported into the
"app.module.ts" file. These modules can then be used in any other file. In this project everything that has to do with Angular Material that is needed is placed inside the shared folder and then in a modules folder to make it obvious that it is a module and lastly inside a material folder to state that the Angular Material modules are in there.
After that there is the "environments" folder, which is where the API request is coming from. The "assets"
folder only includes a ".svg" image which is not being used anywhere at this time.
Lastly there is "graphql" where all the GraphQL re-
lated files are placed, and it is here that the GraphQL queries and interface code is stored.
PEPPOL Service
The service includes the http request to the API, where all the transactions are being fetched. By looking at Figure 5.9 it is possible to see how this is done. There are two asynchronous functions, which means that it returns a promise rather than a return value. The first one gets all of the transactions and returns the data where as the next function also gets all the transaction, but it also includes a limit and a token, these are used to limit the amount of transactions being shown to 20 and when click- ing a "load more" button it will get the next 20 transactions. The "API.graphql"
is a part of the aws-amplify library, which is used to build secure web applications where you can securely store different kind of data [41].
Figure 5.9: Service
PEPPOL Routes and Module
The routes file is basically what it is called. It includes all the routes via transactions.
There are three routes for this application, the first one is "/transactions" which is the main route, which then has two route children. One is an empty string, which means that if a user does not type anything in after the main URL, it will take the user to "/transactions". The last route is accessible by clicking on the "view" button on the table, it will take the user to a page with complete information about the clicked transaction.
The module file is where other modules are imported, such as the "shared" mod- ule where Angular Material is. And then the modules that are being created in
"peppol-list" and "transaction" are being declared.
PEPPOL Interface and Datasource
Inside of the interface is where all the data is added. Because of how this project is structured, it is not going to be used as the data is being fetched from "graphql"
directly. Figure 5.10 is displaying the datasource. A datasource is needed to be able to use Angular Material. With the help of the comments it is possible to see what the code is doing. The connect and disconnect function both have "CollectionViewer" as a parameter, what this is doing is that it is helping keeping track of changes to the
Figure 5.10: Datasource code with comments PEPPOL Transaction
The other component that is used is the transaction, what it does is that it displays all the information about a transaction. Which you see by pressing the "view" but- ton in the table beside a transaction. To show all the info for one transaction we add code into the "ngOnInit" function which will get one transaction and then loop through all the fields in the transaction.
Displaying the data in the table
To send data between different components of an application observables are being used, it is a part of the RxJS library [42]. Observables are an object that can be subscribed to and opens up a connection which the data can be passed through.
Therefore we create an observable in the datasource so that it is easy to access its data in our components if needed.
There has been a description earlier of how to use Angular Material to display a table. But to actually add the data into the table it is needed to add some code into the "peppol-list" component. This can be done by looking at Figure 5.11. We make
use of the datasource that is seen on Figure 5.10. The columns that we want to display on the table is added here, which makes it easy to change if wanted. The service is being called so that it will fetch the data from the API. The "ngOnInit" function is an Angular life-cycle method and is being executed as soon as the component has been initialized. By looking at this code it is easy to conclude that it uses a lot of the functions that is made in datasource. Usually when using Angular Material this is not the kind of data that you would use, normally you would not need the "loadPeppol"
function in datasource but because the data from PEPPOL looks different this is how it has to be done to make it work.
Figure 5.11: Peppol-list component Maintainability
One important part of writing code is that it should be written in a way to make it easy to maintain. There are different ways of doing this, one way is to write code that can easily be tested. By making your code testable it is easy to spot any errors and make it easier to fix. Testing can be a bit time consuming however, and not everyone has the time to do it right away. One way to solve this is to use automated testing tools. That way you can see what needs to be fixed when making changes.
Another way to make code maintenance easier is to write small amount of code, as writing really long functions does not help anybody. Instead try to split the code up it as it will make it easier to maintain.
You should always spend time to error check the code. By error checking it will stop your program from crashing and make it faster to debug [43].
Lastly a very good way of aiding code maintenance is to write comments. If you
it is always good to have comments as it can make another developers job much easier.
It does not have to be hard to write maintainable code, it just requires some self- discipline. Try to always keep it simple, do not duplicate code into several functions, keep the functions short and choose names for variables/functions that make sense to its purpose [44].
5.9 Comments
A great way to help another developer understand code is to write comments. There is no need to write comments for every single line of code as that would just be time consuming, and most of the time not very necessary. It is very easy to write code and not consider its complexity, but when the old code is revisited some weeks later, there is a strong possibility that the code has to be studied for some time before it is understood. This is when comments could help. Looking at Figure 5.10, it is easy to understand what these different functions are doing, with just one or two line of comments. For example, the last function "loadPeppol" does quite a lot and it might be hard to understand what is happening. Just by adding a comment saying
"Function with responsibility to fetch the data from the API" helps in the under- standing the purpose of this function. Comments could be added for every section here, but it really is not necessary. Writing a short description of a function is all that is needed. A classic book from the 1985 called "Structure and Interpretation of Computer Programs" described the need of using comments by saying "Programs must be written for people to read, and only incidentally for machines to execute"
[45]. This is a perfect quote for why developers should comment code, as it is people who will read the code, the machine does not.
One problem with writing comments it that they can easily become out of date.
Just because the code gets updated does not mean that the comment will automati- cally get updated, therefore it is important to have self-discipline. Whether you are updating any code, it is important to update the comments immediately, or remove them completely, as code that has inaccurate comments are worse than no comments at all.
There are developers around the world who do not think you should have many comments in your code, and that it is better to prioritise to make good code instead, while some argue that you should always have comments in your code, one of those is Jason C. McDonald from the US who has plenty of experience in the world of coding.
He is stating that the time to read and understand the code is exponentially reduced by using comments [46]. By looking at a comment you know what is supposed to happen, and it gives you a basic understanding. It is also important to write useful comments. Figure 5.12 displays how you should not make comments. There is no need to write a comment that is stating something obvious. Figure 5.11 instead dis- plays how a comment can be useful. It is instead giving a proper explanation of what the code is doing rather than paraphrasing the code in the comment. By looking at this we can say that you should use comments, but only to a certain extent. There
Figure 5.12: Useless com- ment
Figure 5.13: Useful com- ment
is no need to overdo it. There is no need to comment something that is obvious which the developer should already know what it means such as basic HTML code.
In this project there are certain bits that have been commented, the parts that have some more advanced code may not be understandable to others, while things such as HTML code does not have comments.
5.10 Conclusion of Maintaining Code
In order to find out if the code that has been created is maintainable and readable, I asked two frontend developers for their opinions.
I started off by asking them their thoughts about the code. They both thought that the code is good; one of them said that all the functions are short and therefore he had an easier job understanding them. The other one mentioned that the structure is good, and that the way the code is divided into several folders and files makes it easier for him to find what he was looking for.
Then I asked both of them if they can easily understand what the code is doing and they both said that it was easy to understand, and it helped that there are comments added.
Finally I asked them if there was anything that they would change about the code, and they both said that there is not anything they would change.
These answers indicate that the structure of the project has been done well and with the help of the structure and comments, it is easy for other developers to un- derstand the code better and that there is nothing that needs to be changed.
Chapter 6
Conclusion
In this study, we have looked at how an interface can be built with the help of the right colors, typography and structure. We take a quick look for what Angular really is and why we use Angular as the chosen framework for this project. We also took a deeper look into Angular Materials and compared it to three other design languages and concluded that Angular Materials is the better choice for this study.
For our research questions, firstly, we examine how to highlight a transaction, and we have looked at different ways this can be done. First we talk about how colors can be used to highlight and what colors such as red, green and yellow makes us feel when we see those colors. We also looked at how symbols can be used to highlight a transaction, but came to a conclusion that in an application like this one it will look better to just have colored text. Three test users was interviewed and said they spotted the status of the transaction easily, and generally, that the use of color helped to make the status stand out. Symbols could help, but they were not in agreement with whether they make a big difference.
Secondly, we looked at how we can filter transactions to be able to find a specific one.
However the API interface functions provided did not contain any way to filter the PEPPOL transactions at source, and due to being inexperienced with Angular and AWS, this could not be done due to the time constraints and lack of timely help from my mentor. We have still analysed what the intent was, and how this would have been implemented. This could be done with the help of a search bar which would search through all of the table columns, and it can also be done by clicking the table headers which makes the rows sort in descending or ascending order of the value in that column. The test users statements generally indicated that they expected the search bar at the top of the table to search all columns in the table and return those rows that contained the search string. Only one of the users realised that the rows could potentially be sorted by clicking on a column header, so this would need to be made more obvious to the user.
Finally, we looked at how the code can be structured, to be maintainable and easy to read. This can mainly be done by adding sufficient comments to the code. We also conclude that we should focus on writing short commented functions, with no duplicated code, and having appropriate names to variables and functions. Two de- velopers assessed the code and replied that it was easy to read and understand the content and structure of the code.
Chapter 7
Future Work
There are a lot of things that has not been covered in this study. We have only created a very simple user interface which for most of the part is about a table done in Angular Materials. One may want to have a look if there are any other design languages that can be used to create an interface, apart from the ones that has been mentioned in this study.
There is also a possibility to dive deeper into the world of user interfaces and see if there are any other ways of creating one. Perhaps one without a table. It is also a possibility to create a transaction page in the other JavaScript frameworks such as Vue and React, and see what the differences would be and which one is the more efficient one.
One may also want to analyse the backend of the transactions that has been made.
Where do the data come from, how does it work "behind the scenes", and why should AWS and GraphQL be used as the database? Perhaps this could be done by using another database?
References
[1] What is peppol. 2019. https://qvalia.com/help/what-is-peppol/, Visited:
2020-04-25.
[2] History of databases. 2019. https://www.digg.se/
nationella-digitala-tjanster/e-handel-och-e-faktura/peppol/
peppol/, Visited: 2020-04-25.
[3] Aws. 2020. https://aws.amazon.com/about-aws/, Visited: 2020-04-24.
[4] Ashley McKown. What is the purpose of a dashboard. 2018.
[5] Qvalia. www.qvalia.com, Visited: 2020-04-24.
[6] Peppol. 2019. https://www.digg.se/nationella-digitala-tjanster/
e-handel-och-e-faktura/peppol/peppol/.
[7] Trent Targa. All you need to know about peppol. 2017. https://www.pagero.
com/blog/all-you-need-to-know-about-peppol/, Visited: 2020-05-01.
[8] Javascript. https://www.javascript.com/, Visited: 2020-04-24.
[9] Angular. https://angular.io/, Visited: 2020-04-24.
[10] Mvc. https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%
93controller, Visited: 2020-04-24.
[11] Bth bibliotek. https://www.bth.se/bibliotek/, Visited: 2020-04-24.
[12] Google. https://www.google.com/.
[13] Steven Douglas. When it comes to ui layout design, getting your head around some common design patterns can help you create and prototype better designs. https://www.justinmind.com/blog/
ui-layout-design-6-must-know-patterns/, Visited: 2020-04-28.
[14] Venkata Keerti Kotaru. Material Design. O’Reilly, 2020.
[15] Yun-Maw Cheng Li-Chieh Chen, Po-Ying Chu. Identifying the Features of Friendly User Interfaces. Springer, 2011.
[16] Umakant Mishra. Inventions on using colors in GUI. 2014.
[17] 16 million colors. https://encyclopedia2.thefreedictionary.com/16+
million+colors, Visited: 2020-06-03.
