Niby o piłce, a na Daj się poznać, czyli Morena Gdańsk – Karlikowo Sopot

Zaczyna się runda wiosenna polskiej ligi, więc pora nieco przyspieszyć prace nad Matchloggerem, żeby dało się zapisywać swoje mecze. Miałem dzisiaj okazję być na B-klasowym derby Trójmiasta pomiędzy Moreną Gdańsk, a Karlikowem Sopot. O samym meczu nie napiszę jednak za wiele, jeśli ktoś ma ochotę dowiedzieć się więcej, to polecam albo relację na regiowyniki.pl, albo album ze zdjęciami z meczu zrobionymi przeze mnie. Opowiem za to co nieco o różnych sposobach patrzenia na mecz i tym, jak te sposoby mają się do procesu wytwarzania oprogramowania.

Uwaga, post zawiera zdjęcia o łącznej wadze kilkunastu MB. Przed przejściem na „czytaj dalej” upewnij się, że korzystasz z Wi-Fi, jesteś na kablu albo masz odpowiednio duży pakiet transferu danych.

Jak w niemieckiej telewizji polskie memy i białe niedźwiedzie zobaczyłem

Gdy jestem w hotelu, zwykle częścią mojego porannego ogarniania się jest przeglądanie listy dostępnych kanałów. W hotelu Yup w Hasselt miałem spory wybór zagranicznych stacji – były zarówno liczne kanały francuskie, włoskie, brytyjskie, jak i niemieckie. Przeskakując pomiędzy kanałami, w pewnym momencie zobaczyłem napisy po polsku.

Jakbym skądś tego mema znał! W tym momencie narratorka reportażu tłumaczyła na niemiecki to, co było tam napisane. Po chwili pojawiło się kolejne ujęcie, tym razem widoczne dobrze były flagi KOD i unijne.

Po chwili (najwyraźniej) autorka reportażu pojwiła się na tle Warszawy. Tylko coś tu jakby nie gra…

Tak, dobrze widzicie, z tyłu przechadzają się… niedźwiedzie polarne. Zdążyły nawet co nieco ze sobą powalczyć 😉

Nie do końca słyszałem niestety, co pani mówiła. Podejrzewam, że coś w rodzaju, że niektórym Polska kojarzy się z niedźwiedziami polarnymi, ale rzeczywistość jest inna. Niemniej, ciekawy polski akcent 😉

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.