Crew Hackathon XIII

Der Ablauf

Im Lauf der Jahre und durch die bisherigen Hackathons hat sich ein ziemlich gut funktionierender Workflow für diesen Tag etabliert. Dank kleinerer Anpassungen klappt die Umsetzung sowohl vor Ort im Büro, als auch komplett remote aus dem Homeoffice und neuerdings auch in einem Hybrid-Modell, bei dem ein Teil vom Büro aus und ein Teil im Homeoffice arbeitet.

Im Wesentlichen läuft unser Hackathon so ab:

• Alle paar Monate lassen wir unser Tagesgeschäft einen Tag ruhen und veranstalten unseren Crew Hackathon.
• Wir starten mit einem gemeinsamen und gespannten Blick auf unser Ideen-Board. Dort hat im Vorfeld jede:r schonmal einen Blick draufgeworfen und sich ein paar Favoriten rausgesucht.
• Ziel ist die Bearbeitung von drei bis fünf Themen, von denen wir uns idealerweise einen Mehrwert für unseren Arbeitsalltag, einzelne Großprojekte oder ganz einfach einen “Invest in die Zukunft” erhoffen.
• Eventuell werden manche Themen nochmal kurz vorgestellt und dann geht es eigentlich auch schon an die Gruppenfindung.
• Danach beginnt der eigentliche Hackathon mit Arbeitssession eins, gefolgt von einem kurzen Update jeder Gruppe, um einen Zwischenstand und ggf. Herausforderungen mit der großen Gruppe besprechen zu können, anschließend Mittagspause, Arbeitssession zwei und zum Schluss Präsentation und Besprechung der Ergebnisse. Und dann ist der Tag auch schon wieder rum.

Die Themen

Unser Ideenboard ist stets gut gefüllt und so standen wie immer mehr als genügend Themen zur Auswahl. Dieses Mal mussten wir zunächst etwas intensiver überlegen, welche Projekte am geeignetsten wären, um innerhalb eines Tages vorzeigbare Ergebnisse zu produzieren. Schlussendlich landeten wir bei drei neuen Projekten…

Heex Components

• Team: Simon, Mats, Flo
• Ziel: Tailwind-UI Komponenten mit Phoenix LiveView umsetzen

Seit dem Update 0.17 von Phoenix LiveView gibt es neue Möglichkeiten einzelne Komponenten noch besser zu kapseln. Durch die Einführung von Slots können HTML-Blöcke strukturierter genutzt werden, während die neuen JS-Commands es ermöglichen Operationen auszuführen, welche nur auf der Clientseite stattfinden. Dazu gehören beispielsweise das Öffnen und Schließen eines Modals oder das Hinzufügen und Entfernen von CSS-Klassen.

Wir wollten uns das Ganze zu Nutze machen und anfangen fertige Tailwind-UI Komponenten in LiveView Komponenten zu migrieren. Diese könnte man dann in den einzelnen Projekten wiederholt nutzen. Als Beispiel für diesen Blogpost haben wir ein einfaches Dropdown-Menü ausgewählt.

Im Markup sieht der Dropdown-Aufruf wie folgt aus:

<Dropdown.dropdown id="example_dropdown" class="ml-32 mt-32">
  <:menu_button>
    Options
  </:menu_button>
  <:menu_item href="account-settings">
    Account-Settings
  </:menu_item>
  <:menu_item href="support">
    Support
  </:menu_item>
  <:menu_item href="license">
    License
  </:menu_item>
  <:menu_item href="signout">
    Sign out
  </:menu_item>
</Dropdown.dropdown>

Hier geben wir den Inhalt für den Menü-Button sowie für die Menü-Items an. Zusätzlich können wir noch weitere Attribute übergeben, die wir dann in der Dropdown-Komponente selbst verwenden können. Alles Weitere, wie beispielsweise die CSS-Klassen, ist dann in der Komponente definiert.

Damit sich das Menü öffnen und schließen lässt, kann für den Menü-Button toggle_menu/2 benutzt werden. Die Funktion sieht wie folgt aus:

def toggle_menu(js \\ %JS{}, id) do
  js
  |> JS.toggle(
    to: id,
    in:
      {"transition ease-out duration-100", "transform opacity-0 scale-95",
       "transform opacity-100 scale-100"},
    out:
      {"transition ease-in duration-75", "transform opacity-100 scale-100",
       "transform opacity-0 scale-95"}
  )
end

Dahinter verbirgt sich ein JS-Command, welcher das Element darstellt oder versteckt. Zusätzlich dazu kann man CSS-Klassen angeben, die beim Umschalten zum Element hinzugefügt oder entfernt werden sollen.

Automatisiertes Zeiterfassungs-Controlling

• Team: Hauke, Sebastian, Bene
• Ziel: Vereinfachung des Controllings für Projektmanager

In allen Projekten ist es essentiell die geplanten Aufwände und die tatsächlich angefallenen Aufwände im Blick zu behalten und stetig auf dem Laufenden zu sein. Dieser Prozess ist manuell sehr aufwändig und birgt eine gewisse Fehleranfälligkeit. Sowohl unsere Projektplanungs- & Entwicklungssoftware, als auch unsere Zeiterfassung besitzen alle notwendigen Daten und bieten passende Schnittstellen an. Deshalb haben wir uns entschieden, die verschiedenen Daten automatisiert miteinander zu verbinden und abzugleichen, um diesen Prozess zu optimieren und zu vereinfachen.

Bevor wir angefangen haben, in die Tasten zu hauen, haben wir uns Gedanken gemacht, was wir eigentlich brauchen. Durch eine strukturierte Arbeitsweise sind wir in der Lage, die nötigen Informationen automatisiert zu sammeln und aufzubereiten. Durch ein Ablauf-Diagramm wurde sehr schnell klar, was wann zu passieren hat und welche Daten wo und in welcher Form benötigt werden, um das Controlling einfacher zu gestalten. Die daraus resultierte Datenbankstruktur wurde in einem Entity Relationship Diagramm festgehalten.

In der Folge haben wir begonnen, eine Anwendung in Elixir zu schreiben, die die einzelnen Dienste miteinander verbindet und dafür sorgt, dass Informationen eventbasiert und somit live ausgetauscht werden.

In Zukunft soll die Anwendung in der Lage sein, rechtzeitig Benachrichtigungen zu verschicken, sobald Aufwände drohen aus dem Ruder zu laufen.

Weiterhin soll sie in der Lage sein, on-demand Reportings des Ist-Zustandes zu erzeugen, um die bisherigen manuellen, zeitaufwändigen und fehleranfälligeren Abgleiche zu ersetzen.

Learning Bot

• Team: Katharina, Kevin
• Ziel: Ein Learning Bot, der regelmäßig verschiedene Tipps in Slack postet.

Für den Wissensaustausch haben wir uns überlegt, einen Slackbot für tägliche Tipps zu bauen. Dafür haben wir eine Laravel-Anwendung aufgesetzt, in der wir über ein mit Filament Admin aufgesetztes Adminpanel Tipps einpflegen und einstellen können, wann und in welchen Slack-Channel der jeweilige Tipp gepostet wird.

Für die Interaktion mit Slack verwenden wir den offiziellen Laravel Notification-Channel für Slack, für den wir einen Slack-App Webhook angeben müssen. So können wir dann einfach Nachrichten an den entsprechenden Channel senden.

In Zukunft muss dieses Projekt noch auf einem Server eingerichtet werden. Zusätzlich könnten wir eine Einstellung hinzufügen, wann das erste mal ein Tipp gepostet wird und dass weitere Nutzer eingeladen werden können.

Ach übrigens, falls Du Dich für Softwareentwicklung mit PHP & Laravel interessierst, schau doch mal bei unseren Jobanzeigen vorbei. Wir suchen aktuell unter anderem PHP-Entwickler:innen. ;-)