Matchlogger update: I can add teams now!

I did quite a lot today. From working login, I went to being able to add teams through the user interface. All code changes can be seen in today’s pull request.

Tables and entity classes for countries and teams

I started with a database table for country information. I decided that this one will be (for now) managed only through Liquibase changesets, as I expect that country list will be static. For the beginning, there’s only one country (Poland), but I already have a task to add more. Each of the countries consists of name, some country codes (ISO-3166-1, FIFA, IOC) and a link to flag picture from Wikimedia Commons.

My structure for teams starts simple and is likely to grow. We’ve got a name, country and a link to team’s crest (logo). Right now I don’t store pictures, just links to them. This will likely change in future, but that requires a decision on how to store them – something that is a good topic for another post 🙂

Vue.js attempt

I must admit that I had some issues with Vue.js. My first idea was to create a REST API returning team list, load them with Vue.js and present records in a table with Angular-like syntax. I must have overlooked that before, but it turns out that core Vue cannot trigger AJAX calls and needs to use a separate library for that. One has several options, starting with vue-resource, up to jQuery. I decided to start with jQuery, as I already was importing it for Bootstrap JS features. Turned out that fighting with what it looked like a simple „for each row print <tr> and three <td> tags” took me three hours after which I decided that for this module, I will go the known way and implement it with Thymeleaf.

With Thymeleaf, the structure of the application is different. We don’t provide a REST API but insert needed values on backend side using a Model object instead. The templating engine works fairly similar to what I wanted with Vue.js though, so while I don’t remove Vue yet, I’ll start with Thymeleaf and read more on Vue in the meantime.

Thymeleaf layout

Thymeleaf has its benefits – one of them is a fragment-based layout. I now have a structure where layout.html defines the core layout and each of pages doesn’t have to include a header, footer, core CSS and JS files all over again. Of course, as I’m a lazy developer that wants to start with something that looks decent and is responsive, I started with Bootstrap that I aim to customize when I get the functional part done.

So, how does the team list look like?

The user is able to add a new team, define a country (from a long list that includes Poland, Poland and… Poland), add a link to a crest picture and that’s it. Not much, but it is a first real functional part of the application. More to come soon.

Matchlogger: a slow start

As the Polish-speaking followers (quite likely 100% of all my followers) already know, I am taking part in a software development contest called „Daj się poznać” where the aim is to develop an open-source application for three months and blog about it. The contest starts today, so this is the moment when many participants write about their aims. So, my project is…

Matchlogger

A web-based app that can be used by players, referees, and supporters to mark matches they either took part in or watched. The aim is to enable the users to log their matches in various disciplines and add data they deem important, for example, minutes they played, goals they scored, match result, attendance… The idea is based a bit on a now-defunct website called footballfans.eu where the functionality was fairly limited and the service closed down a few months ago, but extends it not to include only supporters and only of teams that play in higher leagues.

As for the technology stack – Spring Boot is my backend choice for this project. I still consider several options for the frontend, but one that is now on my spotlight is Vue.js. I’ll likely decide on the approach here in several days. The database will be using MySQL.

First steps are already done. Today I set up the project using Spring Initializr. While most chosen dependencies were fairly standard, the one that required some extra configuration was Liquibase – the library for database versioning which I’m going to use from the very beginning. As often with Spring Boot, also this time it was a one-liner in the configuration file. The empty changelog file also was needed to be created at the referenced location.

After today, the application can be run using mvn spring-boot:run and starts up correctly with Basic auth as default security setting. Not much can be seen, though:

The code is available at Github. I’ll be using Github issues to take care of the backlog and Toggl for time logging. For the first deployment, I want to have a functioning login (likely Google- or another provider- based).