TouK Hackathon – March 2019

Hackathons are prone to fail. It’s because we have very little time to create something useful, actually working and making a wow!-effect.

So this time we wanted to run “THE HACKATHON”, a well-prepared event with a very high success rate. We called it “Ship IT!” to ensure that we will focus on delivering a working product, not only on having fun while making it. We formed an organising team responsible for internal communication, collecting the needs, removing obstacles and buying some snacks and pizza for the event itself.

We thought that if we want to succeed, we’ll have to prepare well. So each team gathered before the event and talked about their plans, the technologies they intend to use and what hardware they need to order. The organizers met with all teams, exchanged details and gave some good advice.

And finally, the day has come! Seven teams started the two-day hacking session at 9AM, continued until 5PM, and showed the demos of all seven projects after 4.30PM on the second day. We gathered 25 participants total.

Here is a quick presentation of the projects we delivered.

Lidar/ROS.org based robot

robot image We always wanted to build a fully autonomous vehicle to transport sandwiches and monitor the Wi-Fi quality over the whole office space. The first step we took was creating a remote controlled platform with Lidar, which allowed to build the office map and made a foundation for future experiments. We reached this goal with ROS.org and mapped a few corridors and rooms in our office at the end of the hackathon. Now we’re almost ready to conquer Mars :D

Quak Liero-like Game

quak team Quak is a PvP platform game inspired by Liero or Soldat. We used a mix of Kotlin, libGDX and box2d (physics) to build a good-looking 2D game in less than 2 days. Destructible level as a mesh of boxes are generated from provided png layers. Additionally, we implemented some extras to diversify the player experience, such as multiple weapons, double jump, blood effects and explosions.

Quiz Game

quiz game DuckQuiz is a game we wanted to use at public event, e.g. conferences. It’s a little bit similar to the legendary Flappy Bird. Your goal is to make the title hero – a duck – go as far as possible! Correct answers give the duck a bump, so the more questions you answer correctly, the further the duck will go. Be careful, though! Three wrong answers will make a brick fall on the duck’s head! To spice things up a little, we decided to introduce a score threshold, which – once achieved – guaranteed a prize. Plus, of course, if you beat the highest score, you will make history as the reigning champion Duck Flyer. The quiz application is written in Kotlin for Android. We used RxJava and Retrofit for communication with the server. For the back-end side, we chose SpringBoot along with Kotlin. There is also a web-based “Hall of Fame” panel and a simple CMS which allows the management of the quiz questions, written in ReactJS.

Own Card Authorization system

demo4 We’re waiting for our private brand new vending machine which we’re going to use for distribution of snacks in Touk. We’ve noticed that we can communicate with it using MDB protocol. We’d like to authenticate in the machine with RFID cards which are commonly used in TouK to open doors. As a first step, we wanted to create authorization system based on RFID cards, but with additional PIN verification part added. Our system should be integrated with internal LDAP. We’ve separated our project into 4 modules: backend (spring boot), web frontend (scalajs-react), mobile app (android) and hardware device (arduino yun). Backend part connects all modules and allows matching RFID cards UID with LDAP logins. Web frontend is designed for users to set and manage their PINs. The mobile app at the moment is dedicated for our administrator to make pairing existing cards with LDAP logins easier. Finally, hardware device was created to read data from card, get PIN from user and check if PIN is correct (via backend). In the next step, we’d like to integrate our system with mentioned vending machine and make payments using it. There is also a plan to enhance mobile app and use it as mobile payment terminal and integrate web UI with Touk SelfCare system.

Notification lights

lights hackers Three suites (3 lights in red, yellow and blue) controlled by Raspberry Pi Zero W communicating with the managing service via MQTT protocol. The service handles messages from Rocket’s (our chat) outgoing web hooks and notifications from GitLab (e.g. opened merge requests).

Team gathering app (e.g. for football matches)

Team gathering app We regularly play football and volleyball after work, but we sometimes struggle with completing the teams. So far, we used a sign-up system based on Confluence pages, which is not mobile-friendly. We also wanted to allow registration for “reserve” players from outside the company. That’s why we built a simple mobile app with a sign-up form, game history and basic player ranking. The app was built with Dart using the Flutter framework and Firebase for storage and authorization.

Internal time reporting API

hr This HR project’s goal was to integrate and simplify the way we log time in our company. We’ve achieved that with a Google Calendar-like GUI and multiple microservices written in TypeScript, Python, Java and Scala!

The Grand Finale

demo1 At the end of “Ship IT!”, the teams had demonstrated the effects of their work. They shared some successes and other stories :) about the used software and hardware and the lessons learned during those two intensive days. The audience were amused when the robot started to explore the room. The Quak team had a bloody battle in their game. The lights were blinking when one of the team members wrote “kanapki” on our internal TouK chat.

demo2 demo3 demo5 demo6

It was very impressive that each team managed to deliver a viable result and show their projects in action. We can’t wait to run the next edition of The TouK Hackahton and hope there will be even more participants and surprising ideas to see.

You May Also Like

Atom Feeds with Spring MVC

How to add feeds (Atom) to your web application with just two classes?
How about Spring MVC?

Here are my assumptions:
  • you are using Spring framework
  • you have some entity, say “News”, that you want to publish in your feeds
  • your "News" entity has creationDate, title, and shortDescription
  • you have some repository/dao, say "NewsRepository", that will return the news from your database
  • you want to write as little as possible
  • you don't want to format Atom (xml) by hand
You actually do NOT need to use Spring MVC in your application already. If you do, skip to step 3.


Step 1: add Spring MVC dependency to your application
With maven that will be:
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>3.1.0.RELEASE</version>
</dependency>

Step 2: add Spring MVC DispatcherServlet
With web.xml that would be:
<servlet>
    <servlet-name>dispatcher</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:spring-mvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>dispatcher</servlet-name>
    <url-pattern>/feed</url-pattern>
</servlet-mapping>
Notice, I set the url-pattern to “/feed” which means I don't want Spring MVC to handle any other urls in my app (I'm using a different web framework for the rest of the app). I also give it a brand new contextConfigLocation, where only the mvc configuration is kept.

Remember that, when you add a DispatcherServlet to an app that already has Spring (from ContextLoaderListener for example), your context is inherited from the global one, so you should not create beans that exist there again, or include xml that defines them. Watch out for Spring context getting up twice, and refer to spring or servlet documentation to understand what's happaning.

Step 3. add ROME – a library to handle Atom format
With maven that is:
<dependency>
    <groupId>net.java.dev.rome</groupId>
    <artifactId>rome</artifactId>
    <version>1.0.0</version>
</dependency>

Step 4. write your very simple controller
@Controller
public class FeedController {
    static final String LAST_UPDATE_VIEW_KEY = "lastUpdate";
    static final String NEWS_VIEW_KEY = "news";
    private NewsRepository newsRepository;
    private String viewName;

    protected FeedController() {} //required by cglib

    public FeedController(NewsRepository newsRepository, String viewName) {
        notNull(newsRepository); hasText(viewName);
        this.newsRepository = newsRepository;
        this.viewName = viewName;
    }

    @RequestMapping(value = "/feed", method = RequestMethod.GET)        
    @Transactional
    public ModelAndView feed() {
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName(viewName);
        List<News> news = newsRepository.fetchPublished();
        modelAndView.addObject(NEWS_VIEW_KEY, news);
        modelAndView.addObject(LAST_UPDATE_VIEW_KEY, getCreationDateOfTheLast(news));
        return modelAndView;
    }

    private Date getCreationDateOfTheLast(List<News> news) {
        if(news.size() > 0) {
            return news.get(0).getCreationDate();
        }
        return new Date(0);
    }
}
And here's a test for it, in case you want to copy&paste (who doesn't?):
@RunWith(MockitoJUnitRunner.class)
public class FeedControllerShould {
    @Mock private NewsRepository newsRepository;
    private Date FORMER_ENTRY_CREATION_DATE = new Date(1);
    private Date LATTER_ENTRY_CREATION_DATE = new Date(2);
    private ArrayList<News> newsList;
    private FeedController feedController;

    @Before
    public void prepareNewsList() {
        News news1 = new News().title("title1").creationDate(FORMER_ENTRY_CREATION_DATE);
        News news2 = new News().title("title2").creationDate(LATTER_ENTRY_CREATION_DATE);
        newsList = newArrayList(news2, news1);
    }

    @Before
    public void prepareFeedController() {
        feedController = new FeedController(newsRepository, "viewName");
    }

    @Test
    public void returnViewWithNews() {
        //given
        given(newsRepository.fetchPublished()).willReturn(newsList);
        
        //when
        ModelAndView modelAndView = feedController.feed();
        
        //then
        assertThat(modelAndView.getModel())
                .includes(entry(FeedController.NEWS_VIEW_KEY, newsList));
    }

    @Test
    public void returnViewWithLastUpdateTime() {
        //given
        given(newsRepository.fetchPublished()).willReturn(newsList);

        //when
        ModelAndView modelAndView = feedController.feed();

        //then
        assertThat(modelAndView.getModel())
                .includes(entry(FeedController.LAST_UPDATE_VIEW_KEY, LATTER_ENTRY_CREATION_DATE));
    }

    @Test
    public void returnTheBeginningOfTimeAsLastUpdateInViewWhenListIsEmpty() {
        //given
        given(newsRepository.fetchPublished()).willReturn(new ArrayList<News>());

        //when
        ModelAndView modelAndView = feedController.feed();

        //then
        assertThat(modelAndView.getModel())
                .includes(entry(FeedController.LAST_UPDATE_VIEW_KEY, new Date(0)));
    }
}
Notice: here, I'm using fest-assert and mockito. The dependencies are:
<dependency>
 <groupId>org.easytesting</groupId>
 <artifactId>fest-assert</artifactId>
 <version>1.4</version>
 <scope>test</scope>
</dependency>
<dependency>
 <groupId>org.mockito</groupId>
 <artifactId>mockito-all</artifactId>
 <version>1.8.5</version>
 <scope>test</scope>
</dependency>

Step 5. write your very simple view
Here's where all the magic formatting happens. Be sure to take a look at all the methods of Entry class, as there is quite a lot you may want to use/fill.
import org.springframework.web.servlet.view.feed.AbstractAtomFeedView;
[...]

public class AtomFeedView extends AbstractAtomFeedView {
    private String feedId = "tag:yourFantastiSiteName";
    private String title = "yourFantastiSiteName: news";
    private String newsAbsoluteUrl = "http://yourfanstasticsiteUrl.com/news/"; 

    @Override
    protected void buildFeedMetadata(Map<String, Object> model, Feed feed, HttpServletRequest request) {
        feed.setId(feedId);
        feed.setTitle(title);
        setUpdatedIfNeeded(model, feed);
    }

    private void setUpdatedIfNeeded(Map<String, Object> model, Feed feed) {
        @SuppressWarnings("unchecked")
        Date lastUpdate = (Date)model.get(FeedController.LAST_UPDATE_VIEW_KEY);
        if (feed.getUpdated() == null || lastUpdate != null || lastUpdate.compareTo(feed.getUpdated()) > 0) {
            feed.setUpdated(lastUpdate);
        }
    }

    @Override
    protected List<Entry> buildFeedEntries(Map<String, Object> model, HttpServletRequest request, HttpServletResponse response) throws Exception {
        @SuppressWarnings("unchecked")
        List<News> newsList = (List<News>)model.get(FeedController.NEWS_VIEW_KEY);
        List<Entry> entries = new ArrayList<Entry>();
        for (News news : newsList) {
            addEntry(entries, news);
        }
        return entries;
    }

    private void addEntry(List<Entry> entries, News news) {
        Entry entry = new Entry();
        entry.setId(feedId + ", " + news.getId());
        entry.setTitle(news.getTitle());
        entry.setUpdated(news.getCreationDate());
        entry = setSummary(news, entry);
        entry = setLink(news, entry);
        entries.add(entry);
    }

    private Entry setSummary(News news, Entry entry) {
        Content summary = new Content();
        summary.setValue(news.getShortDescription());
        entry.setSummary(summary);
        return entry;
    }

    private Entry setLink(News news, Entry entry) {
        Link link = new Link();
        link.setType("text/html");
        link.setHref(newsAbsoluteUrl + news.getId()); //because I have a different controller to show news at http://yourfanstasticsiteUrl.com/news/ID
        entry.setAlternateLinks(newArrayList(link));
        return entry;
    }

}

Step 6. add your classes to your Spring context
I'm using xml approach. because I'm old and I love xml. No, seriously, I use xml because I may want to declare FeedController a few times with different views (RSS 1.0, RSS 2.0, etc.).

So this is the forementioned spring-mvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">

    <bean class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver">
        <property name="mediaTypes">
            <map>
                <entry key="atom" value="application/atom+xml"/>
                <entry key="html" value="text/html"/>
            </map>
        </property>
        <property name="viewResolvers">
            <list>
                <bean class="org.springframework.web.servlet.view.BeanNameViewResolver"/>
            </list>
        </property>
    </bean>

    <bean class="eu.margiel.pages.confitura.feed.FeedController">
        <constructor-arg index="0" ref="newsRepository"/>
        <constructor-arg index="1" value="atomFeedView"/>
    </bean>

    <bean id="atomFeedView" class="eu.margiel.pages.confitura.feed.AtomFeedView"/>
</beans>

And you are done.

I've been asked a few times before to put all the working code in some public repo, so this time it's the other way around. I've describe things that I had already published, and you can grab the commit from the bitbucket.

Hope that helps.