DDevelopment & Design

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.

— Previous article

How we use Kotlin with Exposed at TouK

Next article —

Hacking a robot

You May Also Like
DDevelopment & Design

CasperJS for Java developers

Why CasperJS

Being a Java developer is kinda hard these days. Java may not be dead yet, but when keeping in sync with all the hipster JavaScript frameworks could make us feel a bit outside the playground. It’s even hard to list JavaScript frameworks with latest releases on one website.

In my current project, we are using AngularJS. It’a a nice abstraction of MV* pattern in frontend layer of any web application (we use Grails underneath). Here is a nice article with an 8-point Win List of Angular way of handling AJAX calls and updating the view. So it’s not only a funny new framework but a truly helper of keeping your code clean and neat.

But there is also another area when you can put helpful JS framework in place of plan-old-java one - functional tests. Especially when you are dealing with one page app with lots of asynchronous REST/JSON communication.

Selenium and Geb

In Java/JVM project the typical is to use Selenium with some wrapper like Geb. So you start your project, setup your CI-functional testing pipeline and… after 1 month of coding your tests stop working and being maintainable. The frameworks itselves are not bad, but the typical setup is so heavy and has so many points of failure that keeping it working in a real life project is really hard.

Here is my list of common myths about Selenium: * It allows you to record test scripts via handy GUI - maybe some static request/response sites. In modern web applications with asynchronous REST/JSON communication your tests must contain a lot of “waitFor” statements and you cannot automate where these should be included. * It allows you to test your web app against many browsers - don’t try to automate IE tests! You have to manually open your app in IE to see how it actually bahaves! * It integrates well with continuous integration servers like Jenkins - you have to setup Selenium Grid on server with X installed to run tests on Chrome or Firefox and a Windows server for IE. And the headless HtmlUnit driver lacks a lot of JS support.

So I decided to try something different and introduce a bit of JavaScript tooling in our project by using CasperJS.

Introduction

CasperJS is simple but powerful navigation scripting & testing utility for PhantomJS - scritable headless WebKit (which is an rendering engine used by Safari and Chrome). In short - CasperJS allows you to navigate and make assertions about web pages as they’d been rendered in Google Chrome. It is enough for me to automate the functional tests of my application.

If you want a gentle introduction to the world of CasperJS I suggest you to read: * Official website, especially installation guide and API * Introductionary article from CasperJS creator Nicolas Perriault * Highlevel testing with CasperJS by Kevin van Zonneveld * grails-angular-scaffolding plugin by Rob Fletcher with some working CasperJS tests

Full example

I run my test suite via following script:

casperjs test --direct --log-level=debug --testhost=localhost:8080 --includes=test/casper/includes/casper-angular.coffee,test/casper/includes/pages.coffee test/casper/specs/

casper-angular.coffe

casper.test.on "fail", (failure) ->
    casper.capture(screenshot)

testhost   = casper.cli.get "testhost"
screenshot = 'test-fail.png'

casper
    .log("Using testhost: #{testhost}", "info")
    .log("Using screenshot: #{screenshot}", "info")

casper.waitUntilVisible = (selector, message, callback) ->
    @waitFor ->
        @visible selector
    , callback, (timeout) ->
        @log("Selector [#{selector}] not visible, failing")
        withParentSelector selector, (parent) ->
            casper.log("Output of parent selector [#{parent}]")
            casper.debugHTML(parent)
        @echo message, "RED_BAR"
        @capture(screenshot)
        @test.fail(f("Wait timeout occured (%dms)", timeout))

withParentSelector = (selector, callback) ->
    if selector.lastIndexOf(" ") > 0
       parent = selector[0..selector.lastIndexOf(" ")-1]
       callback(parent)

Sample pages.coffee:

x = require('casper').selectXPath

class EditDocumentPage

    assertAt: ->
        casper.test.assertSelectorExists("div.customerAccountInfo", 'at EditDocumentPage')

    templatesTreeFirstCategory: 'ul.tree li label'
    templatesTreeFirstTemplate: 'ul.tree li a'
    closePreview: '.closePreview a'
    smallPreview: '.smallPreviewContent img'
    bigPreview: 'img.previewImage'
    confirmDelete: x("//div[@class='modal-footer']/a[1]")

casper.editDocument = new EditDocumentPage()

End a test script:

testhost = casper.cli.get "testhost" or 'localhost:8080'

casper.start "http://#{testhost}/app", ->
    @test.assertHttpStatus 302
    @test.assertUrlMatch /\/fakeLogin/, 'auto login'
    @test.assert @visible('input#Create'), 'mock login button'
    @click 'input#Create'

casper.then ->
    @test.assertUrlMatch /document#\/edit/, 'new document'
    @editDocument.assertAt()
    @waitUntilVisible @editDocument.templatesTreeFirstCategory, 'template categories not visible', ->
        @click @editDocument.templatesTreeFirstCategory
        @waitUntilVisible @editDocument.templatesTreeFirstTemplate, 'template not visible', ->
            @click @editDocument.templatesTreeFirstTemplate

casper.then ->
    @waitUntilVisible @editDocument.smallPreview, 'small preview not visible', ->
        # could be dblclick / whatever
        @mouseEvent('click', @editDocument.smallPreview)

casper.then ->
    @waitUntilVisible @editDocument.bigPreview, 'big preview should be visible', ->
        @test.assertEvalEquals ->
            $('.pageCounter').text()
        , '1/1', 'page counter should be visible'
        @click @editDocument.closePreview

casper.then ->
    @click 'button.cancel'
    @waitUntilVisible '.modal-footer', 'delete confirmation not visible', ->
        @click @editDocument.confirmDelete

casper.run ->
    @test.done()

Here is a list of CasperJS features/caveats used here:

  • Using CoffeeScript is a huge win for your test code to look neat
  • When using casper test command, beware of different (than above articles) logging setup. You can pass --direct --log-level=debug from commandline for best results. Logging is essential here since Phantom often exists without any error and you do want to know what just happened.
  • Extract your helper code into separate files and include them by using --includes switch.
  • When passing server URL as a commandline switch remember that in CoffeeScript variables are not visible between multiple source files (unless getting them via window object)
  • It’s good to override standard waitUntilVisible with capting a screenshot and making a proper log statement. In my version I also look for a parent selector and debugHTML the content of it - great for debugging what is actually rendered by the browser.
  • Selenium and Geb have a nice concept of Page Objects - an abstract models of pages rendered by your application. Using CoffeeScript you can write your own classes, bind selectors to properties and use then in your code script. Assigning the objects to casper instance will end up with quite nice syntax like @editDocument.assertAt().
  • There is some issue with CSS :first and :last selectors. I cannot get them working (but maybe I’m doing something wrong?). But in CasperJS you can also use XPath selectors which are fine for matching n-th child of some element (x("//div[@class='modal-footer']/a[1]")).
    Update: :first and :last are not CSS3 selectors, but JQuery ones. Here is a list of CSS3 selectors, all of these are supported by CasperJS. So you can use nth-child(1) is this case. Thanks Andy and Nicolas for the comments!

Working with CasperJS can lead you to a few hour stall, but after getting things working you have a new, cool tool in your box!