Football scores and statistics web app

Student: Filip Germanov

Supervised by Dr. Liping Zhao

The report is part of my 3rd Year Project for the degree of

BSc. Computer Science in the School of Computer Science

Apr 2016

PAGE ! OF !1 26

Abstract Football is one of the most popular sports and a lot of people are closely following it. Many of these people are checking the scores of their games online and are looking for as much information possible about their team or a league. Most of the competitors provide only basic information and real-time scores. The goal of the project is to create an application where I can add custom statistics which might be interesting for these fans.

My application shows basic information about the different competitions, teams and players. It also shows previous and future games, as well as the league table at the moment for each competition. The additional information I did was to create a next round league table which shows how the league can change in the next round and how much each team can rise or fall in that round, considering the games to be played.

This report covers why the project is created, which are the main competitors and how was it developed. Another comparison is provided based on a given feedback. Mistakes are being discussed and further development is being suggested.

PAGE ! OF !2 26

Acknowledgements

I would like to thank my supervisor Dr. Liping Zhao for being so supportive and patient, for all the guidelines and for all the

suggestions she gave me. I would also like to thank my second marker, Carole Twining, for the additional feedback which helped me massively. Last but not least, I would like to thank my family and all my friends for being by my side and helping every time I

needed their help.

PAGE ! OF !3 26

Table Of Contents Abstract 2

Acknowledgements 3

Table of contents 4

Table of Figures 5

1.Context 6

1.1 Overview 6

1.2 League structures 6

1.3 Project goals 8

1.4 Competition 8

2.Development 11

2.1 Requirements gathering 11

2.2 Difficulties and mistakes 12

2.3 The API 12

2.4 Technologies used 13

2.5 Applications and environment 15

2.6 Project structure 16

2.7 Main logic 17

3.Evaluation 19

3.1 Feedback 19

3.2 Possible errors 22

3.3 Testing and logs 23

4.Reflection and Conclusion 24

4.1 Agile vs Waterfall 24

4.2 Achievements 24

4.3 Future Development 25

4.4 Conclusion 25

References 26

PAGE ! OF !4 26

Table Of Figures

Table 1. Champions and Europa League and Relegation positions distribution 7

Table 2. Promotion, Promotion playoff and Relegation positions distribution 7

Table 3. Comparison between the main competitors’ features 8

Table 4. Comparison between main competitors’ performance 10

Figure 1. MEAN stack explained 14

Figure 2. Functions that run the logic behind the application 18

Figure 3. Speed comparison between Score Stats and its competition 19

Figure 4. Usability comparison between Score Stats and its competition 20

Figure 5. Appearance comparison between Score Stats and its competition 21

Figure 6. Features comparison between Score Stats and its competition 21

Figure 7. Overall comparison between Score Stats and its competition 22

PAGE ! OF !5 26

1.Context

In that section, a basic overview is provided which explains why the project is chosen. League structures are discussed and first comparison of the competitors is created.

1.1 Overview

Football is one of the most popular and entertaining sports in the world. It is estimated that football has 3.5 Billion fans in the world, and most popular in Europe, Africa, Asia and South America.[1] And most certainly, the fans that have access to internet use the web for finding more information about what is happening in the football world — news about their favourite club or football league, live scores and interesting statistics which might be useful for them in use for betting, or are just interesting facts for a football fan. However, there were statistics that were missing in the major live scores websites, so that is the reason I wanted to create a similar website which I can customise by my liking with my own custom statistics.

1.2 League structures

Before we jump into the project itself, I would like to first explain how the different leagues are structured. In my website I cover ten different competitions — English Premier League, German First and Second Bundesliga, French League One and Two, Spanish Primera and Segunda Division, Italian Serie A, Portuguese Primeira Liga and Dutch Eredivisie. All the teams in the league are playing against each other twice during a season which is (N-1)*2 games for each team where N is the number of teams in the league. The first division teams of each nation are fighting

PAGE ! OF !6 26

for first place (champion), Champions League and Europa League spots and avoiding relegation. The second division teams are fighting for the first place (champion), promotion and again avoiding relegation. You can see the position allocation in Table 1 and Table 2:

Table 1. Champions and Europa League and Relegation positions distribution

Table 2. Promotion, Promotion playoff and Relegation positions distribution

PAGE ! OF !7 26

Position needed for:

Competition Teams Champions League

Europa League Relegation

German Bundesliga 1 18 1, 2, 3, 4 5, 6 16, 17, 18

French League 1 20 1, 2, 3 4, 5 18, 19, 20

English Premier League 20 1, 2, 3, 4 5, 6 18, 19, 20

Spanish Primera Division 20 1, 2, 3, 4 5, 6 18, 19, 20

Italian Serie A 20 1, 2, 3 4, 5 18, 19, 20

Portuguese Primeira Liga 18 1, 2, 3 4, 5 17, 18

Dutch Eredivisie 18 1, 2 3, 4, 5 16, 17, 18

Position needed for:

Teams Promotion Promotion playoff Relegation

German Bundesliga 2 18 1, 2 3 16, 17, 18

French League 2 20 1, 2, 3 No playoff 18, 19, 20

Spanish Segunda Division

22 1, 2 3, 4, 5, 6 19, 20, 21, 22

1.3 Project goals

My initial goal was to create a website where the user could check live scores, information about the different leagues, teams or even players. That is something that is already done by a number of websites with large user base, so my next goal was to add statistics that were not common or present at all in the popular websites. Since these statistics were very specific, my thought was that I was creating a website mainly for my personal use, where if I expand it enough and it gains enough interest, I could release it for more people.

1.4 Competition

After doing a brief research on the industry, I identified five websites as my potential main competitors - Livescore.com, Flashscore.com, BBC Livescores, UEFA Livescores and Sofascore.com. I made a comparison between their main features (Table 3) :

Table 3. Comparison between the main competitors’ features

PAGE ! OF !8 26

App name Live scores Statistics My games Notifier Bookmaker odds Preview and Report

Livescore.com + + + + - -Flashscore.com + + + - + -BBC Livescore + + - - - +

UEFA Livescore + + + + - +Sofascore.com + + + + + +

Live scores means that the website shows real-time information about the games in progress. It is usually the main feature of the website and that is the reason why all of these websites have it.

Statistics is a broad term varies ranges from showing previous and next features, displaying league information such as top goalscorers and top scoring teams to additional match information such as shots on target, possession, corners, etc.

My matches is a way to select all the games you want and show them on a separate page where you can follow only them. That is very useful because on busy days there are a lot of games from all the different leagues and keeping only the games you are interested in helps for better experience.

Notifier is a feature that gives you notifications on events on the games you selected in My games. That way you are notified if a there is a goal or a red card in any of the games.

Some of the websites provide a real-time comparison on the odds between the different bookmakers. It helps if you are live betting and want to have a quick look on where would be the most profitable place to bet on a specific game.

Preview and match report are pre-game and post-game articles discussing a specific game. Since they are written by a person and not automatically generated, they are available only for a selected number of games, usually the most import ones.

After I made that comparison between the main features, I compared them for their non-functional part — speed, usability and appearance:

PAGE ! OF !9 26

Table 4. Comparison between main competitors’ performance

I used a speed test to compare the speeds of the websites, and ranked them on usability and appearance by my personal opinion.[2] As we can see, even though Sofascore ranks best on speed and appearance, it is second best after Livescore because of its usability. In my opinion that is, as we can see on the features comparison, because there are too many features and it is hard to navigate between the menus and different parts of the website. This is the reason why I decided that I should aim for speed and simplicity on my project.

PAGE ! OF !10 26

2.Development

In that section I will explain how the project have been implemented. We start with the functional and non-functional requirements, finding a source of information and continue with the technologies used and the working environment. Project structure is being discussed and the program logic is being explained.

2.1 Requirements gathering

After analysing my main competitors I created a list with my functional and non-functional requirements:

Functional:

•Cover at least top 5 leagues (England, Germany, Spain, Italy and France)

•Show real-time match results

•Show previous and future match results

•Show league standing

•Show league information

•Show team information

•Show players information

•Additional statistics

Non-functional:

•Make the website faster than the competitors

•Make the website responsive so that it can look good even if used on a smartphone or tablet

•Make the website easy to navigate

•Structure the code so that it can be easy to add more functionality

PAGE ! OF !11 26

2.2 Difficulties and mistakes

After structuring the requirements, I started looking for the most important part for my project — a data source which I can use for its information. This is where I realised that I made a mistake — that should have been the first thing to do, even before the requirements gathering. After doing some research I found out that all the websites that provided an API with real-time live results were paid, starting at $300 a month. I still managed to find an API with football information which updated to results around an hour after the game was finished. That way, even though I was already not able to cover one of my functional requirements, I managed to find a free source which covers the rest of them.

2.3 The API

The API I used is Football-data.org.[3] It provides information about twelve different competitions, including the results of all the games in the season, information about all the teams in the league and all their prayers. It also has a league table for each competition but I decided not to use it because it is too simple and static and if I use it I would not be able to customise it the way I want. Instead I calculated my own league table, following the rules of the competition, which would help a lot if a better API is found (one with more stats provided).

PAGE ! OF !12 26

2.4 Technologies used

Ever since I picked that project, I realised that it is perfect for a web application. The most used stack for web development is the LAMP stack, which includes Linux, Apache, MySQL and PHP/Python/Perl.[4] But currently it is most used because it is how the websites were build ten years ago and not because it is the best at the moment. At the moment Javascript is most used, mostly because it is very fast, for new projects and because of that is why I decided that it would fit perfectly for my project. By using Javascript for everything, it is much easier to make changes on the project and the project itself is much more scalable. Most popular replacement of LAMP is the MEAN stack which is a full stack, meaning that the front-end, the back-end and the database are all written in Javascript. MEAN stands for MongoDB, Express.js, Angular.js and Node.js. MongoDB is a NoSQL database which means that there are no SQL queries —instead there are JSON queries since the information is saved in form of JSON.[8] Node.js is a platform build on Chrome’s Javascript runtime and it is used as a back-end of the server.[5] Express.js is a Node.js web-application framework which expands its functionality and is almost compulsory component for every Node web application.[6] And finally Angular.js is a front-end framework, maintained by Google, which extends the functionality of HTML.[7] It is shown how the MEAN stack components work with each other on Figure 1 [9]:

PAGE ! OF !13 26

Figure 1. MEAN stack explained

The user sends a request from the front-end (Angular.js). Angular then handles the request and sends it to the server (Node.js). Node parses the request to Express, which sends it to the Mongo database. Then data is returned to Node, using Express, which returns the request to Angular. Angular then handles the response and displays it to the end user.

Before I even started with the coding I found a very interesting template engine called Jade, which helps for faster HTML coding and also helps to easily write Javascript code inside HTML.[10] For example :

-var hello = ‘world’ div.container h1= hello

would give us

<div class=“container> <h1>World</h2></div>

PAGE ! OF !14 26

I found it very useful and decided that I would not need Angular.js and I can use Jade instead.

Another plus for using Node is that you can use a lot of packages created for such applications. I used a few of them:

•request.js — it is a very simple way of handling http requests. It is needed for the API calls to the external server (Football-data.org).

•underscore.js — it is a helper which provides a lot of added functionality. It is mainly used for running through arrays of data.

•moment.js — it is a package which helps for parsing, validating, manipulating and displaying dates in Javascript.

For the front-end I use Bootstrap which is a HTML, CSS and Javascript framework which helps with making the website responsive on all different screen sizes and resolutions — big monitors, laptops, tables and smartphones. It uses another Javascript library - JQuery which expands the Javascript functionality.

2.5 Applications and environment

For developing my application, I used the Git Hub version control and the Dropbox cloud based file hosting server. I used Git Hub so I could keep track on all the features I implement and roll back to a previous version if I mess up my code and Dropbox to use my files from different computers, from home and university for example.

As a code editor I decided that I should use an IDE and since it is a Javascript project, I chose Web Storm. But after using it for a while, I realised that I am not using the IDE functionality and I did not like the Git Hub integration. That is why I switched to Atom, which is a simple code editor, very similar to Sublime Text, which is developed by Git Hub with that integration in mind. It also has packages which expand its functionality to an IDE level, in case I needed them in the future. The

PAGE ! OF !15 26

interesting fact about it is that it is written in Node.js and you can customise it however you want.

Since MongoDB is a NoSQL database, it does not have graphical interface like MySQL for example. But I still wanted to have a better and easier look at the database than the terminal view only where I needed to send queries to the database every time I wanted to check if the data was correctly inserted. So I looked up and found another Node.js application called Admin Mongo which provided that graphical interface for my database. It takes the database path as an input and start a local server with easy to navigate web interface.

2.6 Project structure

The MEAN stack is based on the MVC (Model-view-controller) architectural pattern where the files responsible for displaying the content are separated from the files responsible for the logic behind the data. This is how the folders are structured in my project:

.git Git config filesbin Contains basic server configurations

data This is where the data is stored

downloadData Here we have the files responsible for automatically requesting data from the API

node_modules The folder contains node packages

public Contains images, style files, Bootstrap and JQuery

routes This is where the logic is

views All the Jade files, they handle the front-end

PAGE ! OF !16 26

2.7 Main logic

I have the main logic of the program in the routes folder. It has two files: index.js and competition.js. The index.js is used for the front page of the application — it connects to the database and returns the competitions from there. All the other logic is in the competition.js file. Here is a list with all the routes and what do they do:

• ‘/’

If we do not get an argument, we return the user to the front page.

• ‘/:id’

’:id’ corresponds to a specific competition. It has two functions — it gets information from the database about that competition and gets all the fixtures for that competition and computes a league table. League table is computed by assigning three points to each team that has scored more goals than its opponent in a game and one point for each team that has scored the same number of goals as its opponent. Goals scored and goals conceded are also stored. The information is returned to the front end.

• ‘/:id/fixtures’

The function requests the current and the previous match day only from the database and returns them to the front end.

• ‘/:id/fixtures/:matchday’

The function requests a matchday from the database with an id of ‘:matchday’ which ranges from one to the number of matchdays in the season for that competition. After that the information is returned to the front end.

PAGE ! OF !17 26

• ‘/:id/team/:teamId’

The function gets a competition id and a team id as an input, sends request to the database for that team and returns the information to the front end.

• ‘/:id/nextRound’

This is my additional statistic that I implemented. It is something that I have not seen before anywhere else and I believe it is really interesting for a football fan. It computes the possible ways the league table can change after the next matchday is played. We take the current league table and for each team we check how many points that team would have if they win their next game. Then we check who is the highest team with that much or less points and we set that as the highest possible position. We would usually take the goal difference into consideration but since there is no limit on the score in a game, we can say that it is not important in that case. After that we check how many teams are within three points from the selected team. We subtract that number from our position and that is the lowest possible position that team can reach.

Figure 2. Functions that run the logic behind the application

PAGE ! OF !18 26

3.Evaluation

That section is an evaluation on what have been done, what do the other people think about the application and the mistakes I did, while working with the external API. It explains what did I do for testing and logging information to the terminal.

3.1 Feedback

Since I made a comparison between my competitors, I though that it would be good if I compare them with my application. To make it as fair as possible, I asked friends and acquaintances to rate my application, comparing it to the competition. Nineteen people agreed to help me and I did the survey in five different group (four groups by four people and one group with three) where I spent around an hour with each one of them. It was very time consuming but I needed their opinion in case I decide to make my project public in the future.

The first question was “Which application feels fastest?”. These were the results:

Figure 3. Speed comparison between Score Stats and its competition

PAGE ! OF !19 26

The results were expected, considering the fact that most of these websites have a lot better and complex functionality which makes the slower. The interesting conclusion from that question was that even though SofaScore ranked first in the initial speed tests, the people actually said that it feels slower than most of them and it dropped from the fastest one (computer speed test) to the second slowest (human testing).

The second question was ”How easily usable do you think the website is?”. After taking the answers into consideration, here is how the comparison looks:

Figure 4. Usability comparison between Score Stats and its competition

As you can see on Figure 4 my website is ranked third in terms of usability. I would give that to the fact that my web application is simple and thus it is easily usable by a new user. The other websites remain the same as the initial comparison.

The third question was “How would you rate the appearance on the website?” and I received the following results:

PAGE ! OF !20 26

Figure 5. Appearance comparison between Score Stats and its competition

This time my website ranks second, which I would give to the minimalistic and simplistic look of the webpage. The only change from the initial comparison is that FlashScore now ranks better than LiveScore according to the people answering the survey.

The fourth and final question was “How would you rate the features and the information provided?”. I received the following response:

Figure 6. Features comparison between Score Stats and its competition

PAGE ! OF !21 26

After reviewing the results, I was pleasantly surprised with the responses because all the other five websites are working applications in production and not getting the last place, considering the time constraints, is a great personal success. The possible reason for BBC Livescores and UEFA Livescores to be on the last two places would possibly be the fact that they do not cover as much leagues as the other four and maybe my nextRound feature was something the people liked in my project, considering it interesting and innovative.

Now if I take the results from these four categories, I can create overall results:

Figure 7. Overall comparison between Score Stats and its competition

My web application ranked joint first with LiveScore the best overall application according to the people I asked. I know the results from friends and acquaintances cannot be taken as a fact but I am still proud of the results.

3.2 Possible errors

Ever since I submitted my project, I have been using it to check the scores and the league table whenever I was interested in them and I was

PAGE ! OF !22 26

using the other websites only when I needed a real-time results. While checking some past fixtures, I saw a game which said that is finished but there was no result in that game. After researching why is that, I saw that the actual game was postponed and that is not identified in my application. The reason for this is that the API I am using does not change the date on postponed games and they are still marked as finished.

3.3 Testing and logs

After I gathered the functional and non-functional requirements, I decided that for my project testing would not be needed. The main reason for that is that there are no user inputs other than the browser address bar and if I handle the possible inputs properly, testing would not be needed. After I finished my project, I realised that testing is not important just for the inputs in my web application but for the data coming from the external API. As I stated in the previous sub-section, there are some bugs in the API data which cause unwanted bugs to occur. I should have made tests for the input from the API and that way, I would have handled them properly.

Since I wanted to create quality code which would be easily reusable, I used logs to store everything that happened on the server — every time a user sends a request to the server, it is shown in the server terminal windows. Additional info is shown, such as load time in milliseconds, the file path and the type of request. Each connection to the database is also logged with information about the function that opened the database.

PAGE ! OF !23 26

4.Reflection And Conclusion

This section is a reflection on what I think I achieved during the year, what mistakes did I make and did they help me. Future development is also discussed.

4.1 Agile vs Waterfall

After I picked my project and discussed it with my supervisor, I started doing research and respectively gathering requirements. I spent most of the first semester just planning and designing the application and I wanted everything to be perfect but after making some mistakes, a lot of time was lost. Learning how to use the MEAN stack components together was a difficulty at the beginning and I would give that to the fact that I did not try to learn it while working on the project but on side projects. After I started coding, everything become more clear and easier. Even though that I took the Agile Software Engineering course, I did not apply its principles and I would say that it was my main mistake.

However I still used an Agile practice as part of my assignment for that course and I chose to use online task board. Applying it to my workflow helped me fix my time management, thus keeping up with the deadlines set both by myself and by the school. Spending time on dividing my work into small tasks helped me to make a better plan for completing them.

4.2 Achievements

Most of my requirements have been completed by the end of the project. There are five more competition that the required five. Leagues, teams and players information has been implemented as well as additional

PAGE ! OF !24 26

statistics. Previous and future fixtures are being shown and according to the feedback received from the survey, all non-functional requirements have been completed. The code is structured properly, so future development would be possible and easy. Adding functionality in form of additional statistics would be reasonably easy, however it would not be possible with the currently available free API due to lack of information. After using Javascript for the project, now I am feeling confident using it and would definitely use it for my future projects.

4.3 Future Development

One of my future goals is to find a better source of information, either free or reasonably priced, so that different and more interesting statistics can be implemented. One of the missing features, the real-time results, is key and its implementation is compulsory if the project is going to compete in that field. If such source of information is found, a lot more complex statistics can be made, some of which might be helpful in a prediction application, where according to the stats, a reasonably accurate prediction can be made. If enough people are interested, there might be a monthly voting by everyday users which shows what features are needed and provides a way for the users to suggest interesting and innovative statistics.

4.4 Conclusion

For me, the Third Year Project has been a success considering how much I learned while doing the application itself and the experience I gained from the mistakes I made. If I could have returned back a year ago with my current experience, I would have done a lot of things differently but that is just the proof that the project have helped me improve by learning from the mistakes I make.

PAGE ! OF !25 26

References 1. Most popular sports [online]. Available from: <http://

www.topendsports.com/world/lists/popular-sport/fans.htm> [cited 26/04/16]

2. Website speed test [online]. Available from: <http://tools.pingdom.com/> [cited 26/04/16]

3. Football-data API [online]. Available from: < http://football-data.org > [cited 27/04/16]

4. LAMP stack [online]. Available from: < https://www.turnkeylinux.org/lampstack > [cited 27/04/16]

5. Node.js [online]. Available from: < https://nodejs.org/en/ > [cited 28/04/16]

6. Express.js [online]. Available from: < http://expressjs.com/ > [cited 28/04/16]

7. Angular.js [online]. Available from: < https://angularjs.org/ > [cited 28/04/16]

8. MondoDB [online]. Available from: < https://www.mongodb.org/ > [cited 28/04/16]

9. MEAN Stack explained [online]. Available from: <https://www.newspindigital.com/nsd-tech-primer-the-mean-stack-a-k-a-full-stack-javascript/> [cited 28/04/16]

10. Jade [online]. Available from: < http://jade-lang.com/ > [cited 28/04/16]

11. Bootstrap [online]. Available from: < http://getbootstrap.com/ > [cited 28/04/16]

PAGE ! OF !26 26