Logo der codecentric AG, einem in Deutschland führenden IT-Consulting Unternehmen

Logo der codecentric AG einem in Deutschland führenden IT-Consulting Unternehmen

Cloud-Native

Data & Machine Learning

Generative KI

IT-Security

Produktentwicklung

Weitere Leistungen...

Leistungen

Arbeitsweise

Projekte

Berlin

Bielefeld

Dortmund

Erfurt

Frankfurt am Main

Hamburg

Karlsruhe

Leipzig

München

Münster

Nürnberg

Solingen

Stuttgart

Standorte

Blog

Softwerker

Fachmedien

Webinare

Events

Wissens-Hub

Unsere Kultur

Kultur & Karriere Podcast

Deine Entwicklung

Jobs

Karriere

Über uns

Aktuelles

Kontakt

International contact

Alle Standorte

Du hast Fragen oder möchtest dich mit mir austauschen? Gern – trag einfach deine Kontaktdaten ein.

Contact Us | Sub-Navi-Kontakt oder Zero Search Hits

Kontakt aufnehmen

Marketing & Community Management

Konntest du keine Einträge zu deinem Thema finden?  

STANDORT-TEAM

codecentric Bielefeld

Mitten in der Bielefelder Altstadt bauen wir passgenaue Software. Agile Werte und Zusammenarbeit auf Augenhöhe sind dabei Basis unserer täglichen Arbeit. 

codecentric Team Bielefeld

Willkommen im Team Bielefeld

<p>Typischerweise sind bei Hackathons viele Soft- und Hardware-Entwickler zu finden, die innerhalb eines begrenzten Zeitraums versuchen, kreative und ungewöhnliche Lösungen in Form von Code und ersten Prototypen für vorher definierte Challenges zu erarbeiten. Beim BIE City Hackathon (<a href="http://www.bie-city.de" target="_blank">www.bie-city.de</a> ) der Open Innovation City Bielefeld und dem Digitalisierungsbüro der Stadt Bielefeld wurden davon abweichend auch insbesondere Nicht-Techies eingeladen, um die kollektive Intelligenz einer Stadt zu nutzen – zur Generierung und Findung von Ideen für die Herausforderungen einer Stadt im neuen Alltag mit COVID-19. Als Teilnehmerin und Mentorin konnte ich einige spannende Lösungsansätze in ihrer Entstehung begleiten. Die zu lösenden Probleme kamen aus den Bereichen Breitensport, Einzelhandel, Kunst und Kultur, öffentlicher Raum, Mobilität und Gastronomie.</p><h2>Die Challenge</h2><p>Mein eigenes Team hat die Herausforderung der Erkennung und Vermeidung von überfüllten Plätzen und einem verantwortungsvollen Miteinander bearbeitet. Überfüllte Plätze sind in der aktuellen Pandemie- und in den alltäglichen Situationen eine besondere Herausforderung für die Stadt und ihre BürgerInnen. Aktuell steigert ein hohes Menschenaufkommen auf begrenztem Raum das Ansteckungsrisiko mit COVID-19. Zudem wird aber auch die Bevölkerungszahl in Bielefeld über Corona hinaus zunehmen – der Platz der Stadt bleibt aber begrenzt, was auch eine generelle Verringerung der Aufenthaltsqualität an öffentlichen Plätzen zur Folge haben kann.</p><h2><b>Unsere Lösung</b></h2><p>Unsere Lösung überzeugte die Jury und zeichnete sie als eine der beiden Gewinner-Lösungen aus. Neben der Freude über das Preisgeld haben wir die Hoffnung, dass die Lösung, die wie folgt aussieht, zeitnah realisiert wird:</p><ul><li> Wir zählen Personen im Bereich der Innenstadt, sowie an relevanten Orten und Verkehrsknotenpunkten (Haltestellen ÖPNV, Marktplätze, etc.) mittels Sensorik.</li><li> Die Daten zur Personendichte werden dann in Form einer Heatmap mit zusätzlichen Informationen veröffentlicht, z. B. auf den offiziellen Seiten der Stadt Bielefeld (<a href="http://www.bielefeld.de" target="_blank">www.bielefeld.de</a> ) und Bielefeld Marketing (<a href="http://www.bielefeld.jetzt" target="_blank">www.bielefeld.jetzt</a> ). Dabei wird das Personenaufkommen mittels Ampelsystem abgebildet und es werden noch nicht so stark besuchte Alternativen (Orte, Routen, Veranstaltungen) vorgeschlagen, aber auch Prognosen über die zukünftige Entwicklung der Personenzahlen ausgegeben.</li><li>Zusätzlich werden die Informationen an relevanten Orten mit Displays zur Verfügung gestellt und die Daten zu überfüllten Plätzen werden auch in der App von moBiel, dem Anbieter des öffentlichen Nahverkehrs in Bielefeld, beim Suchen nach Verkehrsverbindungen angezeigt.</li></ul><p><a href="https://media.graphassets.com/1c84f5JmQF6ezVdvcRiC"><img src="https://media.graphassets.com/1c84f5JmQF6ezVdvcRiC" alt="bie city hackathon" width="455" height="304" /></a> <i>Foto der Team-Leiter der beiden Sieger-Teams: rechts Helen Bielawa vom Team Sport, links Meike Wocken. (Foto: Open Innovation City).<br /> </i></p><h2><b>Umsetzung </b></h2><p>Generell basiert der Ansatz auf der Nutzung eines (inner)städtischen LoRaWans, welches die Sensoren zur Zählung der Menschen verbindet. LoRaWAN steht für <b>Lo</b>ng <b>Ra</b>nge <b>W</b>ide <b>A</b>rea <b>N</b>etwork und ist eine energieeffiziente Funktechnologie für die Datenübertragung insbesondere von Sensoren, Zählern, oder anderen Messinstrumenten. Die reinen Zähldaten werden über ein Gateway des LoRaWans ans Backend übermittelt und stehen dort mittels Open Data API zur Verfügung, um z.B. dann auf den Webseiten in Form einer Heatmap dargestellt zu werden.</p><p><a href="https://media.graphassets.com/cWOrw5xOR8yrpDU7fMfc"><img loading="lazy" src="https://media.graphassets.com/cWOrw5xOR8yrpDU7fMfc" alt width="371" height="209" /></a> </p><p>Aber wie zählen Sensoren Personen? Wir als Menschen können das durch einfache Beobachtung feststellen, ob es sich um ein hohes Menschenaufkommen handelt. Für unseren Prototypen zur Umsetzung der Lösung haben wir uns für den Einsatz einer Kamera entschieden, die erkennen soll, ob viele Menschen auf einem Platz zusammen kommen. D.h. der Sensor besteht aus einem Mikrocontroller (z. B. Raspberry Pi) plus Kamera. Auf dem Mikrocontroller läuft dann eine lokale Bilderkennung (KI-basiert), die Fußgänger, Radfahrer, Kinderwagen etc. erkennt und zählt.</p><p>Wichtig ist bei diesem Einsatz: Die Kamera speichert keine Bilder und gibt auch keine Bilder für die Auswertung weiter. Es ist keine Anbindung an das Internet oder eine Cloud erforderlich. Die Bilder werden sofort lokal ausgewertet und dabei analysiert die KI nur die einzelnen Pixel und deren Farbverläufe im Bild hinsichtlich bekannter Formen, die Menschen, Radfahrern oder Kinderwagen ähneln. Daher muss es bei dieser Lösung keine Datenschutzbedenken geben. Die einzigen Daten, die weitergegeben werden, sind die reinen Zählstände der erkannten Objekte und diese Datenweitergabe ist LoRaWan-basiert. Neben der Kameratechnik kann aber auch andere Sensortechnik zum Erkennen von Menschenmengen genutzt werden, beispielsweise Infrarot, Paxcounter oder Lichtschranken.</p><h2>Open Data</h2><p>Uns war es wichtig herauszustellen, dass unsere Lösung auch über die Corona-Zeit hinaus einen Mehrwert liefern wird. Wir legen viel Wert auf das Open-Data-Konzept, dass die Daten von jedermann verwendet werden können. Unsere Vision ist es, dass die Daten zu einer stärkeren Bürgerbeteiligung in der Stadtentwicklung führen werden, da transparent für alle Gruppen in der Stadt dargestellt wird, wie sich die Mobilität von Menschen ändert, aber auch wie Plätze angenommen werden. Somit können diese Daten (politische) Argumente liefern, mehr Platz für Menschen zu schaffen, z. B. durch die Sperrung von Straßen. Auch Geschäftsmodelle werden sich mithilfe dieser Daten ändern können, z. B. neue Angebote im Nahverkehr, dass beispielsweise der Einsatz von Bussen und Bahnen unter Berücksichtigung der wartenden Personen an den Haltestellen passiert.</p><p><a href="https://media.graphassets.com/oATZ8gTQat6Et8SRTuhg"><img loading="lazy" src="https://media.graphassets.com/oATZ8gTQat6Et8SRTuhg" alt="bie city hackathon" width="434" height="245" /></a> </p><h2>Die Orga des BIE City Hackathon</h2><p>Es war ein hundertprozentiger Remote-Hackathon, wobei neben dem Organisatoren-Team aber auch weitere Teilnehmer im Pioneers Club gehackt haben, dem Coworking Space, in dem auch das codecentric-Team Bielefeld sitzt. Dort saßen wir auf Distanz in den unterschiedlichen Konferenzräumen verteilt und haben gemeinsam mit weiteren remote arbeitenden Teammitgliedern an unseren Lösungen gearbeitet. Die Kooperation mittels Slack, Miro-Board und Zoom-Sessions hat sehr gut geklappt. Auf die zu erwartende hohe No-Show-Rate einer Remote-Veranstaltung hat das Orga-Team schnell und gut reagiert und hat die Teams passend zusammengestellt.</p><p>Es wäre schön, wenn diese Lösung über den Hackathon hinaus weiterverfolgt würde und die Hackathon-Organisatoren Open Innovation City Bielefeld und das Digitalisierungsbüro der Stadt Bielefeld dafür Sorge tragen würden, dass nächste Schritte in Richtung Umsetzung gemacht werden. Vielen Dank an die Organisatoren für den Hackathon und an mein Team Kim Simon Kreutz, Jürgen Große-Ophoff und Lill Bretz für die tolle Zusammenarbeit!</p>

BIE Spotty – unsere Lösung beim BIE City Hackathon

Die Bedeutung von künstlicher Intelligenz wächst in der heutigen Welt. Doch wie funktioniert KI? Es hat zumindest nichts mit Magie zu tun – auch wenn KI gerne damit assoziiert wird. 

Normalerweise beantworte ich diese Frage ausführlich bei uns im IT Consulting unseren Kunden und helfe ihnen dabei, die Potenziale der künstlichen Intelligenz zu erschließen. Doch aufgrund der wachsenden Relevanz von KI sowohl in der Arbeitswelt als auch der Gesellschaft bin ich der Ansicht, dass KI und Datenkenntnisse mittlerweile zu den grundlegenden Fähigkeiten gehören, die jeder Mensch in der heutigen Welt beherrschen sollte. Insbesondere junge Menschen leben in einem Technologie-geprägten Alltag (nur ein kleiner Auszug):

- Ihre Welt in den sozialen Medien ist gesteuert durch Empfehlungsalgorithmen 
- Texte formulieren sie mithilfe von ChatGPT
- Für den schnellsten Weg von A nach B wird ein online Routing-Planer befragt, um zu entscheiden, ob das Ziel zu Fuß, mit dem Rad oder mit ÖPNV optimal zu erreichen ist.

Im Januar 2024 habe ich daher einmal eine andere Rolle eingenommen und war nicht als IT Consultant unterwegs, sondern stand vor einer 12. Klasse des beruflichen Gymnasiums mit Schwerpunkt Betriebsinformatik am [Berufskolleg Werther Brücke](https://bkwb.de) in Wuppertal. In einem zweistündigen Workshop habe ich ein Grundverständnis für künstliche Intelligenz vermittelt. Schülerinnen und Schülern sollten verstehen, in welchen Bereichen KI Mehrwerte stiften kann, aber auch Risiken verstehen. Die Klasse kannte bereits Algorithmen und hatte den Begriff Machine Learning kennengelernt, doch es fehlte ihr der Zusammenhang und auch die Unterscheidung zwischen den drei Begriffen Algorithmus, Machine Learning und künstliche Intelligenz. 

**Was ist eine künstliche Intelligenz?**

Es war spannend, diese Frage durch Schülerinnen und Schüler beantworten zu lassen und zu sammeln. Anschließend hatten wir eine gemeinsame Definition erarbeitet und Methoden dazu sortiert. 

**Wie trifft eine KI selbständig Entscheidungen?**

Eine häufige Aufgabe von KI ist es, Dinge zu klassifizieren: Ist ein Werkstück kaputt, ja oder nein? Ist die E-Mail Spam, ja oder nein? Versucht jemand beim Online-Shopping zu betrügen, ja oder nein? Um zu erklären, wie eine KI Dinge klassifiziert, habe ich das Beispiel „Monkey Cards“ von <a href="https://www.aiunplugged.org/" target="_blank" rel="noopener noreferrer">aiunplugged.org</a> eingesetzt, die Beschreibung und Affendarstellungen findet ihr <a href="https://www.aiunplugged.org/german.pdf" target="_blank" rel="noopener noreferrer">hier</a>. Es handelt sich dabei um vereinfachte Comic-Abbildungen von verschiedenen Affengesichtern. Ein Teil davon waren freundliche, nicht beißende Affen. Der andere Teil gehörte zu beißenden Affen. 

Die dargestellten Affen wurden unterteilt in Trainings- und Testdaten. Gemeinsam mit der Klasse wurde überlegt, welche Merkmale innerhalb der Trainingsdaten zur Klassifizierung „beißender Affe“ und „nicht beißender Affe“ verwendet werden können. Das wurde in einen Entscheidungsbaum überführt. Anhand der Testdaten wurde gezeigt, dass unser Modell funktioniert und in der Mehrheit richtige Entscheidungen getroffen hatte, aber auch nicht perfekt ist.

**Was sind die Grenzen von KI?**

Um uns den Grenzen der KI anzunähern, habe ich dann ein Bild eines Affen gezeigt, dessen Merkmale deutlich von den Merkmalen der Trainingsdaten abgewichen ist. Es wurde schnell klar, dass eine KI bei unbekannten Merkmalen anfängt zu raten, um eine Entscheidung zu treffen. 

![IMG_7324.jpg](https://media.graphassets.com/2H3s9BKbSaGVhrvQ30mt)

Abschließend wurden Anwendungsfälle aus meiner beruflichen Praxis vorgestellt und in einem Gespräch über Begegnungen der Schülerinnen und Schüler mit KI in ihrem Alltag gesprochen. Mir war dabei wichtig, nicht nur theoretisches Wissen zu vermitteln, sondern auch die praktische Anwendbarkeit von KI-Kenntnissen. Die Schülerinnen und Schüler wurden von mir ermutigt, selber kreativ zu werden und innovative Lösungen für reale Probleme mithilfe von KI zu entwickeln. Sie hatten auch direkt die Möglichkeit dazu: Im Anschluss haben die Schülerinnen und Schüler mit der Bearbeitung ihrer praktischen Lernaufgabe begonnen, ein Lager-Assistenzsystems im Rahmen der Konzeption smarter Logistik-Prozesse zu programmieren. Ich bin gespannt auf die Ergebnisse, die hier entstehen werden!


Eine Einführung in das Thema künstliche Intelligenz für Schülerinnen und Schüler 

Standortleitung Bielefeld

IT Consultant

<p>Die Corona-Krise ist weiterhin in aller Munde und wird uns mit hoher Wahrscheinlichkeit noch etwas länger begleiten. Wie man aus unterschiedlichen Statistiken erfährt, schwanken die Fallzahlen weiter und sorgen für zusätzliche Restriktionen. Diese werden eingesetzt, um die Verbreitung des Virus weitestgehend zu stoppen. Ein wichtiger Aspekt stellt dabei die Einhaltung eines Mindestabstands zu anderen Personen dar. Die empfohlene Distanz liegt bei ungefähr 1,5 Metern, um so bestmöglich den direkten Kontakt zu anderen Personen zu vermeiden. Besonders in Zeiten, in denen die Zahlen an Corona-Infizierten erneut ansteigen, ist es umso wichtiger, dass ein solcher Abstand eingehalten wird. Immer öfter wird dieser Mindestabstand jedoch vergessen.</p><p>Aus diesem Grund wurde mittels eines <a href="https://blog.codecentric.de/tag/machine-learning-2/">Machine-Learning</a> -Ansatzes die Anwendung „Smart DistancR“ entwickelt. Der Smart DistancR ermöglicht eine perspektivisch korrekte Distanzmessung zwischen allen sichtbaren Personen auf einem Kamerabild und kann eine Mitteilung herausgeben, falls der Mindestabstand zwischen einer bestimmten Paarung nicht eingehalten werden sollte. Die Verarbeitung verläuft dabei vollständig lokal und somit ohne jegliche Cloud-Anbindung und ohne Speicherung von Bildmaterialien.</p><p>Das folgende Video zeigt das Ergebnis des Distanzmessers, das mithilfe von <a href="https://blog.codecentric.de/2017/06/einfuehrung-in-computer-vision-mit-opencv-und-python/">OpenCV</a>  generiert wurde. Die erkannten Personen wurden aus Datenschutzgründen durch Avatare ersetzt.<br /></p>
<video controls>
  <source src="https://media.graphassets.com/n4p7UKzMSKJIYCc6eX65"> 
  Your browser does not support the video tag.
</video>
<p>Um zunächst einen Überblick über das allgemeine Vorgehen zu schaffen, sind hier die einzelnen Schritte, die innerhalb des Prozesses durchgeführt werden, kurz und bündig dargestellt:</p><ul><li>Das Video oder der Videostream wird über eine Schnittstelle (z. B. als Real-Time Streaming Protocol) bereitgestellt.</li><li>Mittels eines trainierten Machine-Learning-Modells werden alle Personen erkannt und die dazugehörigen Bild-Koordinaten berechnet.</li><li>Durch den Kamerawinkel sind die Koordinaten nicht ohne Weiteres für die Distanzmessung nutzbar. Der Fehler, der durch den Betrachtungswinkel entsteht, wird mithilfe perspektivischer Transformation herausgerechnet.</li><li>Alle korrigierten Koordinaten werden in ein zweidimensionales Feld überführt.</li><li>Die Distanzen werden mithilfe von Abständen zwischen bestehenden Referenzpunkten perspektivisch korrekt berechnet und über eine Schnittstelle bereitgestellt.</li></ul><div><a href="https://media.graphassets.com/WF5eHnfkTqe4NFtrn3Xt"><img loading="lazy" src="https://media.graphassets.com/WF5eHnfkTqe4NFtrn3Xt" alt="Schematische Darstellung des Prozesses vom Smart DistancR" width="1024" height="290" /></a> <p>Schematische Darstellung des Prozesses vom Smart DistancR</p></div><p>Das Hauptziel des Smart DistancRs besteht darin, Distanzen zwischen Personen in einem Video perspektivisch korrekt zu berechnen. Für die Umsetzung war es jedoch auch wichtig, dass die Hardware leichtgewichtig ist und so die Einsetzbarkeit möglichst einfach gestaltet werden kann. Deswegen wurde das Projekt für die Nutzung auf einem Raspberry Pi 4 und dem Coral Device von Google, das als Edge TPU für die Inferenz genutzt wird, optimiert. Für die Inferenz mit dem Coral Device wurde das trainierte Machine-Learning-Modell von einem TensorFlow-Modell in ein TensorFlow-Lite-Modell überführt.</p><div><a href="https://media.graphassets.com/j9f4TPFFSXthjkrJPUQZ"><img loading="lazy" src="https://media.graphassets.com/j9f4TPFFSXthjkrJPUQZ" alt="Verwendete Hardware für den Smart DistancR" width="1024" height="290" /></a> <p>Verwendete Hardware für den Smart DistancR</p></div><h2>Umsetzung des Smart DistancRs im Detail</h2><p>Für ein tieferes Verständnis wird im Folgenden jeder einzelne Prozessschritt im Detail erläutert. Da es bereits umfangreiche Artikel zu Object-Detection-Modellen gibt, wird hierbei lediglich der eigentliche Prozess erklärt.</p><h3>Personenerkennung</h3><p>Für die Erkennung von Personen bietet ein Object-Detection-Ansatz die optimale Lösung. In einer perfekten Welt mit unbegrenzter Rechenpower könnte man dafür sehr genaue Ansätze, wie Faster R-CNN, verwenden. Im Fall des vorliegenden Projekts bestehen aber gewisse Hardware-Einschränkungen. Zum einen soll die Lauffähigkeit der Anwendung auf einem Raspberry Pi 4 gewährleistet sein, zum anderen soll die Inferenz zur Erkennung von Objekten auf einem Google Coral Device durchgeführt werden. Da bereits viele vortrainierte Object-Detection-Modelle für das Coral Device optimiert sind <a href="https://coral.ai/models/object-detection/" target="_blank">[1]</a> , wurde ein auf MS COCO (Microsoft Common Objects in Context) trainiertes SSD-MobileNet-V2-Modell verwendet. Da der MS-COCO-Datensatz die Klasse „Person“ enthält und die Inferenzzeit bei 7,6 ms liegt, war dies die beste Option für ein Proof of Concept.</p><h3>Perspektivische Korrektur</h3><p>Den Kern der Anwendung stellt die perspektivische Korrektur dar. Mittlerweile wurden verschiedene Lösungen eines Distanzmessers umgesetzt. Darunter sind zum einen Anwendungen, die auf unterschiedlichen Sensoren basieren, zum anderen sind es Anwendungen, die ebenfalls Kamerabilder zur Distanzmessung verwenden. Viele dieser Alternativen gehen dabei ähnlich wie der Smart DistancR vor und beginnen mit der Erkennung von Personen. Danach wird häufig einfach die Distanz (euklidische Distanz) zwischen den erkannten Köpfen oder Füßen berechnet und der Wert als Ergebnis für die Distanz bereitgestellt. Bei diesem Verfahren wird jedoch nicht der perspektivische Fehler, der bei der Aufnahme entsteht, berücksichtigt.</p><p>Die meisten Kameras führen die Aufnahme nicht aus der Vogelperspektive, sondern von vorne oder von der Seite durch. Distanzen, die mit den Koordinaten aus diesem Kamerabild berechnet werden, sind perspektivisch inkorrekt. Durch den Kamerawinkel sind Personen, die nebeneinander stehen, im berechneten Wert weiter voneinander entfernt als Personen mit der gleichen Distanz hintereinander. Es geht sogar so weit, dass das Ergebnis mit einem flacheren Kamerawinkel immer schlechter wird. Der dabei entstehende Fehler ist in der dargestellten Animation zu erkennen.</p>
<p><img loading="lazy" src="https://media.graphassets.com/GMJ1IyGtS0vypvm6maq6" alt="Je steiler der Kamerawinkel, desto größer wird der perspektivische Fehler" width="1024" height="290" /></p>

<div><a href="https://media.graphassets.com/GMJ1IyGtS0vypvm6maq6"><img loading="lazy" src="https://media.graphassets.com/GMJ1IyGtS0vypvm6maq6" alt="Je steiler der Kamerawinkel, desto größer wird der perspektivische Fehler" width="1024" height="290" /></a>
<p><img width="778" height="592" src="https://media.graphassets.com/GMJ1IyGtS0vypvm6maq6" alt="Je flacher der Kamerawinkel, desto größer wird der perspektivische Fehler" /></p>
<p>Je flacher der Kamerawinkel, desto größer wird der perspektivische Fehler</p></div>
<p><img width="778" height="592" src="https://media.graphassets.com/GMJ1IyGtS0vypvm6maq6" alt="Hotwire: Showing smooth navigation with Turbo Driv" /></p>
<p>Um eine korrekte Distanz berechnen zu können, muss die Kamera entweder aus der Vogelperspektive die Aufnahmen erzeugen oder der Kamerawinkel muss herausgerechnet und somit die Perspektive korrigiert werden.</p><p>Die Korrektur wird mithilfe einer projektiven Transformation realisiert. Diese ermöglicht es, mittels der Koordinaten aus der einen Perspektive und einer sogenannten Transformationsmatrix (Homographie) Koordinaten aus einer anderen Perspektive zu berechnen. Für den vorliegenden Anwendungsfall können so Positionen aus dem Kamerabild in die Vogelperspektive überführt werden.<br /> <img loading="lazy" width="732" height="642" src="https://media.graphassets.com/oatBs06zQKeWbXGYWf9A" alt="Smart DistancR projektive Transformation" /></p><p>Die Korrektur der Koordinaten berechnet sich mithilfe folgender Gleichung:</p><p>\(\begin{bmatrix} x‘ \\ y‘ \\ z‘ \end{bmatrix} = \begin{bmatrix} h_{11} & h_{12} & h_{13} \\ h_{21} & h_{22} & h_{23} \\ h_{31} & h_{32} & h_{33} \end{bmatrix}. \begin{bmatrix} x \\ y \\ z \end{bmatrix}\)</p>
<p>Hierbei stehen x, y und z für eine Koordinate in der ursprünglichen Perspektive und x’, y’ und z’ für eine Koordinate der Ziel-Perspektive. Die Matrix H repräsentiert die Homographie. Mit ihr ist es mit der dargestellten Multiplikation möglich, jeden Punkt aus der einen Ebene in die andere Ebene zu überführen. Um die Homographie zu berechnen, werden vier übereinstimmende Koordinaten aus beiden Perspektiven benötigt. Mithilfe dieser Koordinaten kann die Homographie H mit folgender Gleichung berechnet werden:</p><p>\(PH =\\ \begin{bmatrix} -x_1 & -y_1 & -1 & 0 & 0 & 0 & x_1x_1′ & y_1x_1′ & x_1′ \\ 0 & 0 & 0 & -x_1 & -y_1 & -1 & x_1y_1′ & y_1y_1′ & y_1′ \\ -x_2 & -y_2 & -1 & 0 & 0 & 0 & x_2x_2′ & y_2x_2′ & x_2′ \\ 0 & 0 & 0 & -x_2 & -y_2 & -1 & x_2y_2′ & y_2y_2′ & y_2′ \\ -x_3 & -y_3 & -1 & 0 & 0 & 0 & x_3x_3′ & y_3x_3′ & x_3′ \\ 0 & 0 & 0 & -x_3 & -y_3 & -1 & x_3y_3′ & y_3y_3′ & y_3′ \\ -x_4 & -y_4 & -1 & 0 & 0 & 0 & x_4x_4′ & y_4x_4′ & x_4′ \\ 0 & 0 & 0 & -x_4 & -y_4 & -1 & x_4y_4′ & y_4y_4′ & y_4′ \\ 0 & 0 & 0 & 0 & 0 & 0 & 0 & 0 & 1\\ \end{bmatrix} \begin{bmatrix}h1 \\ h2 \\ h3 \\ h4 \\ h5 \\ h6 \\ h7 \\ h8 \\h9 \end{bmatrix} = \begin{bmatrix}0 \\ 0 \\ 0 \\ 0 \\ 0 \\ 0 \\ 0 \\ 0 \\1 \end{bmatrix}\)</p><p>Alternativ kann man die Funktion <em><a href="https://docs.opencv.org/4.x/d9/d0c/group__calib3d.html#ga4abc2ece9fab9398f2e560d53c8c9780" target="_blank">findHomography</a> </em>, die OpenCV bereitstellt, ganz einfach nutzen.</p><p>Die vier übereinstimmenden Koordinaten sollten möglichst exakt sein und im besten Fall nicht zu nah beieinander liegen. Hat man diese Koordinaten gewählt und die Homographie berechnet, kann jeder Punkt aus der einen Perspektive in die andere übertragen werden. Wie in der nachfolgenden Abbildung zu sehen, kann demnach auch die Position einer erkannten Person übertragen werden.</p><div><a href="https://media.graphassets.com/m9wjJCMJQkWi47SNVSVx"><img loading="lazy" src="https://media.graphassets.com/m9wjJCMJQkWi47SNVSVx" alt="Mapping anhand von vier unterschiedlichen Referenzpunkten" width="1024" height="290" /></a> <p>Mapping anhand von vier unterschiedlichen Referenzpunkten</p></div><h3>Zusammenführung zur Anwendung</h3><p>Nachdem alle Bausteine für die Distanzmessung entwickelt sind, gilt es, alles korrekt zusammenzuführen. Wie bereits zu Anfang erwähnt, werden zunächst Personen erkannt, wobei die Füße als Anker für die Distanz verwendet werden. Die daraus entstehenden Koordinaten werden mithilfe der Homographie in eine 2D-Ebene umgerechnet. Die euklidische Distanz (d) der beiden Koordinaten (P,Q) in der 2D-Ebene stellt die berechnete Distanz in Pixeln dar. Diese berechnet sich wie folgt:</p><p>\(d(P,Q) = \sqrt{(q_1 – p_1)^2 + (q_2 – p_2)^2}\)</p><p>Um diesen Wert in Zentimeter umzurechnen, wird das Maß für Zentimeter pro Pixel benötigt (cm/p). Für die Berechnung dieses Wertes kann eine bekannte Distanz, wie etwa der Abstand zwischen zwei Referenzpunkten, verwendet werden. Da die Distanz in Pixeln in der 2D-Ebene bekannt ist, kann somit der Wert für cm/Pixel berechnet werden.<br /> Um Warnhinweise für eine Unterschreitung der einzuhaltenden Distanz zwischen zwei Personen herausgeben zu können, wurde ein Threshold von 150 cm eingebaut. Wird dieser Abstand nicht eingehalten, kann ein gewünschtes Event getriggert werden. In diesem Fall wird die Linie zwischen den Personen rot dargestellt (siehe Video).</p><h3>Weiteres Vorgehen beim Smart DistancR</h3><p>Die eigentlich Distanzberechnung ist somit abgeschlossen. Weiterführend kann die Anwendung aber um zusätzliche Aspekte und Funktionalitäten erweitert werden. In unserem Fall wurde eine Schnittstelle entwickelt, die die Daten direkt an einen MQTT Broker und somit an eine IoT Cloud weitergeben kann.</p><h2>Referenzen</h2><p>[1] <a href="https://coral.ai/models/object-detection/">Coral: Object detecion – Trained models</a> </p><p></p>

Smart DistancR – Perspektivisch korrekte Distanzmessung zwischen Personen

Knowledge und Task Management in Notion

Die Welt der Frontend-Entwicklung hat sich erneut verändert und diesmal ist React 19 der Vorreiter. Mit dieser Version bringt React eine Vielzahl neuer Funktionen und Verbesserungen. Aber die wohl aufregendste Neuerung ist der brandneue Compiler, welcher React 19 bereits voraussetzt. In diesem Artikel werfen wir einen detaillierten Blick auf die wichtigsten Änderungen und tauchen in die Funktionen und Vorteile dieses neuen Compilers ein. Zudem wird es einen kurzen Überblick über die anderen Neuerungen geben. Bevor wir jedoch zu tief einsteigen, sei erwähnt, dass die neue Version noch als Release Candidate gekennzeichnet ist. Die neuen Features sind also alle noch mit Vorsicht zu genießen.

# Was genau ist neu in React 19?

## Einführung eines neuen Compilers
Ein Kernelement der neuen Version ist der neue Compiler, der neben React 19 erscheint. Er wurde entwickelt, um den kompilierten Code effizienter zu machen und so die Leistung zu optimieren. Dadurch sollen sich Entwickler zukünftig weniger Gedanken um Performance-Optimierungen machen.
Der React Compiler ist das Herzstück der neuen Version und bringt viele Eigenschaften mit sich. Zum einen ist er als Open-Source-Projekt verfügbar, zum anderen arbeitet er als Build-Time-Only-Tool und benötigt daher keine Laufzeitunterstützung. Außerdem wird derzeit auch an einer Rust Version gearbeitet, welche mit Blick auf die Performance nochmal besser werden soll [1]. Um die Arbeit mit dem Compiler zu erleichtern, gibt es auch ein dazugehöriges ESLint Plugin. [2]

Der initiale Release des React Compilers konzentriert sich hauptsächlich auf die Verbesserung der Update-Performance (Re-Rendering bestehender Komponenten und Memoization von Hooks), was besonders bei komplexen Anwendungen von Vorteil ist. Bisher wurde jegliche Art von Memoizations durch Hooks, wie useMemo, useCallback und React.memo, realisiert. Mit Hilfe des Compilers werden solche Stellen im Code jetzt vollautomatisiert. Heißt konkret: Das, was nicht neu berechnet werden muss, wird auch nicht neu berechnet. [2]

React 18 ohne Compiler
```
const Component = () => {
  const [count, setCount] = useState(0);
  const calculation = useMemo(() => expensiveCalculation(count), [count]);

  return (
    <div>
 Calculation: {calculation}
      …
    </div>
  );
};
```

React 19 mit Compiler
```
const Component = () => {
  const [count, setCount] = useState(0);
  // memoization without useMemo
  const calculation = expensiveCalculation(count)

  return (
    <div>
 Calculation: {calculation}
      …
    </div>
  );
};
```

Gleiches gilt für das Re-Rendering von Komponenten. Folgendes Beispiel zeigt eine Komponente zur Anzeige von ToDos und eine Komponente, um weitere Todos hinzuzufügen. Wenn keinerlei Memoization hinzugefügt ist, wird die Komponente und all ihre Kinder-Komponenten vollständig neu gerendert, sobald sich die Liste von ToDos ändert. Mit Hilfe des React Compilers und der dazugehörigen Memoization wird automatisch erkannt, dass die Komponente zum Hinzufügen von ToDos (AddNewTodoComponent) unabhängig von den angezeigten ToDos ist und dementsprechend nicht neu gerendert werden muss.

```
const TodoList = () => {
  const todos = useTodos();
  return (
    <div>
      <span>{todos.length} todos</span>
      {todos.map((todo) => (
        <TodoEntry key={todo.id} todo={todo} />
      ))}
      <AddNewTodoComponent />
    </div>
  );
}
```

Fazit: Der neue React Compiler eliminiert die Notwendigkeit von useMemo und useCallback, was zu einer effizienteren und schlankeren Codebasis führt.

## Server Components
Bisher wurden React-Komponenten lediglich clientseitig gerendert. Mit Next.js gibt es seit einiger Zeit die Möglichkeit, Anwendungen mit Server Components zu bauen. Hierbei handelt es sich um Komponenten, die lediglich auf dem Server gerendert werden. Mit React 19 werden diese nun auch voll integriert. Bei der Verwendung gilt es zwischen Server Components mit und ohne Server zu unterscheiden. Ohne Server bedeutet dabei, dass das Server Side Rendering zur Build-Time durchgeführt wird und so statische Inhalte (z.B. aus unterschiedlichen Dateien) eingelesen werden können. Im Gegensatz dazu werden die Server Components unter der Nutzung eines Web Servers bei jeder Anfrage neu gerendert. [4] Da die Ausführung auf dem Server stattfindet, können Server Actions genutzt werden und die Komponenten müssen keine zusätzliche API ansprechen. Dadurch können etwa Datenbankabfragen direkt durchgeführt werden. [3]

```
import db from './database';
export Todo = async ({id}) => {
  const todo = await db.todos.get(id);
  return (
    <div>
      <Author id={todo.authorId} />
      <p>{todo}</p>
    </div>
  );
}
```

**Vorteile von Server Components:**
- SEO: Bessere Sichtbarkeit in Suchmaschinen, da der Inhalt serverseitig gerendert wird.
- Performance: Schnellerer initialer Pageload und insgesamt bessere Performance durch serverseitige Ausführung.
- Server Side Execution: Bessere Handhabung von API-Calls und anderen serverseitigen Aufgaben.
- Build-Time Rendering: Komponenten können zur Build-Time gerendert und dann als statischer Content ausgeliefert werden.

## Server Actions
Neben Server Components werden mit React 19 auch Server Actions eingeführt. Hierbei wird es möglich, asynchrone Funktionen auf dem Server auszuführen. Hier genügt eine Annotation mit ‘use server’, um eine Action als serverseitige Action zu definieren. Wenn eine solche Funktion aufgerufen wird, schickt React eine Anfrage an den Server, auf dem dann die Funktion aufgerufen wird. [5] Eine Server Action kann etwa wie folgt aussehen:

```
"use server";

export createTodoAction = async () => {
  await db.todos.create();
}
```

Diese Server Action kann dann sowohl bei Server Components, als auch bei Client Components (mit “use client” annotiert) eingebunden werden. So kann selbst bei einer Komponente, in welcher die Action auf dem Client getriggert werden soll, diese trotzdem server-seitig durchgeführt werden. [5]

Beispiel:
```
“use client”
import {createTodoAction} from './actions';

const Overview = () => {
  …
  <button onClick={createTodoAction} />
  …
}
```

## Neue Hooks und weitere Features
React 19 bringt eine Vielzahl neuer Hooks und Features, welche die Entwicklung vereinfachen und optimieren.

### Actions
Eine häufige Aufgabe in React-Apps ist die Durchführung von Datenmutationen und die anschließende Aktualisierung des Zustands. Funktionen die solche asynchronen Transitionen benutzen, werden als "Actions" bezeichnet. Bisher mussten Entwickler manuell mit Pending-Zuständen, Fehlern und optimistischen Updates umgehen. Dies konnte etwa durch useState realisiert werden. Mit React 19 wird dies durch die Einführung von Actions vereinfacht. Dies kann mit Hilfe von useTransition etwa wie folgt aussehen: [3]

```
const [name, setName] = useState("");
 const [error, setError] = useState(null);
 const [isPending, startTransition] = useTransition();


 const handleSubmit = () => {
   startTransition(async () => {
     const error = await updateName(name);
     if (error) {
       setError(error);
       return;
     }
     redirect("/path");
   })
 };
```

### use( ) - Die neue API für Promises und Contexts

Der use Hook stellt eine neue Schnittstelle dar und ermöglicht es, auf Ressourcen während des Renderns zuzugreifen, was weniger Bedarf an useEffect und useState bedeutet. Ressourcen können in diesem Fall etwa Promises oder Contexts sein. [3]

```
import { use } from 'react';

const NewsComponent = ({ newsPromise }) => {
  const news = use(newsPromise);
  const theme = use(ThemeContext);
  // ...
```

### Weitere Features und Hooks

**Ref als Prop**

Zukünftig wird es nicht mehr nötigsein forwardRef zu benutzen um ein ref durchzureichen. Ref wird dementsprechend ein standard prop für Komponenten. [3]

**useOptimistic**

Der useOptimistic Hook ermöglicht temporäre Updates mit optimistischen Werten. Dies ist besonders nützlich, wenn man dem Benutzer sofortiges Feedback geben möchte, während die tatsächlichen Daten noch verarbeitet werden. [3]

**useFormStatus**

Der useFormStatus Hook kann den State des Formulars lesen und ermöglicht so eine bessere Handhabung von Formularzuständen und Validierungen in untergeordneten Komponenten. [3]

Neben den hier genannten Features gibt es noch weitere kleine Neuerungen, die für den ein oder anderen sicherlich auch interessant sind. Dafür möchte ich an dieser Stelle aber direkt auf die Release Notes(https://react.dev/blog/2024/04/25/react-19) von React 19 hinweisen.

# Fazit
React 19 markiert einen bedeutenden Fortschritt in der Frontend-Entwicklung. Der neue Compiler bringt nicht nur eine drastisch verbesserte Performance, sondern auch eine Vielzahl von neuen Möglichkeiten und Optimierungen, die Entwicklern das Leben erleichtern. Mit den neuen Tools und Verbesserungen wird die Entwicklung von React-Anwendungen weitaus effizienter und leistungsfähiger als zuvor.

# Quellen

[1] [React Compiler Development Guide](https://github.com/facebook/react/blob/main/compiler/docs/DEVELOPMENT_GUIDE.md) (Abrufdatum: 12.07.2024)

[2] [React Compiler](https://react.dev/learn/react-compiler) (Abrufdatum: 28.06.2024)

[3] [React 19 RC](https://react.dev/blog/2024/04/25/react-19) (Abrufdatum: 28.06.2024)

[4] [React Server Components](https://react.dev/reference/rsc/server-components) (Abrufdatum: 12.07.2024)

[5] [Server Actions](https://react.dev/reference/rsc/server-actions) (Abrufdatum: 28.06.2024)

React ist tot, lang lebe React - React 19 ist da

The world of frontend development has changed once again, and this time React 19 is leading the way. This version brings a variety of new features and improvements, but the most exciting innovation is the brand new compiler, which already requires React 19. In this article, we shall take a detailed look at the changes and delve into the features and benefits of this new compiler. Additionally, there will be a brief overview of the other new additions. However, before we dive in too deep, it should be noted that the new version is still labeled as a Release Candidate. Therefore, all new features should be used with caution.

# What exactly is new in React 19?

## Introduction of a New Compiler

A key element of the new version is the new compiler that comes with React 19. It has been developed to make the compiled code more efficient, thus optimizing performance. This means that developers will need to worry less about performance optimizations in the future. The React Compiler is the core of the new version and brings many features with it. Firstly, it is available as an open-source project. Secondly, it works as a build-time-only tool and does not require runtime support. Additionally, a Rust version is currently in development, which is expected to further improve performance [1]. To facilitate working with the compiler, there is also an associated ESLint plugin available[2].

The initial release of the React Compiler focuses mainly on improving update performance (re-rendering existing components and memoization of hooks), which is especially beneficial for complex applications. Previously, all types of memoizations were achieved through the use of hooks like useMemo, useCallback, and React.memo. With the help of the compiler, these parts of the code are now fully automated. In concrete terms, whatever does not need to be recalculated, won’t be. [2]

React 18 without a compiler
```
const Component = () => {
  const [count, setCount] = useState(0);
  const calculation = useMemo(() => expensiveCalculation(count), [count]);

  return (
    <div>
 Calculation: {calculation}
      …
    </div>
  );
};
```

React 19 with a compiler
```
const Component = () => {
  const [count, setCount] = useState(0);
  // memoization without useMemo
  const calculation = expensiveCalculation(count)

  return (
    <div>
 Calculation: {calculation}
      …
    </div>
  );
};
```

The same applies to re-rendering components. The following example shows a component for displaying ToDos and a component for adding more ToDos. Without any memoization, the component and all its child components will be re-rendered whenever the list of ToDos changes. With the help of the React Compiler and its associated memoization, it is automatically recognized that the component for adding ToDos (AddNewTodoComponent) is independent of the displayed ToDos and therefore does not need to be re-rendered.

```
const TodoList = () => {
  const todos = useTodos();
  return (
    <div>
      <span>{todos.length} todos</span>
      {todos.map((todo) => (
        <TodoEntry key={todo.id} todo={todo} />
      ))}
      <AddNewTodoComponent />
    </div>
  );
}
```

Conclusion: The new React Compiler eliminates the need for useMemo and useCallback, leading to a more efficient and streamlined codebase.

## Server Components
Previously, React components were only rendered on the client side. With Next.js, it has been possible to build applications with Server Components for some time. These are components that are rendered only on the server. With React 19, these are now fully integrated. When using them, it is important to distinguish between Server Components with and without a server. Without a server means that Server Side Rendering is done at build time, allowing static content (e.g., from various files) to be loaded. In contrast, Server Components using a web server are re-rendered with each request [4]. Since the execution takes place on the server, Server Actions can be utilized, and the components do not need to call an additional API. This allows, for example, direct database queries to be performed [3].

```
import db from './database';
export Todo = async ({id}) => {
  const todo = await db.todos.get(id);
  return (
    <div>
      <Author id={todo.authorId} />
      <p>{todo}</p>
    </div>
  );
}
```

**Benefits of Server Components**
- SEO: Better visibility in search engines since the content is rendered server-side.
- Performance: Faster initial page load and overall better performance due to server-side execution.
- Server Side Execution: Better handling of API calls and other server-side tasks.
- Build-Time Rendering: Components can be rendered at build time and then delivered as static content.

## Server Actions
Alongside Server Components, React 19 also introduces Server Actions. This allows asynchronous functions to be executed by the server. By simply annotating a function with ‘use server’, it can be defined as a server-side action. When such a function is called, React sends a request to the server where the function is then executed [5]. A Server Action might look like this:

```
"use server";

export createTodoAction = async () => {
  await db.todos.create();
}
```

This Server Action can be used in both Server Components and Client Components (annotated with “use client”). This means that even if an action is triggered on the client side, it can still be executed server-side [5].

Example:
```
“use client”
import {createTodoAction} from './actions';

const Overview = () => {
  …
  <button onClick={createTodoAction} />
  …
}
```

## New Hooks and Other Features
React 19 brings a variety of new hooks and features that simplify and optimize development.

### Actions
A common task in React apps is performing data mutations and subsequently updating the state. Functions that use such asynchronous transitions are called "Actions". Previously, developers had to manually handle pending states, errors, and optimistic updates, often using useState. With React 19, this is simplified through the introduction of Actions. This can be achieved using useTransition as shown below: [3]

```
const [name, setName] = useState("");
 const [error, setError] = useState(null);
 const [isPending, startTransition] = useTransition();


 const handleSubmit = () => {
   startTransition(async () => {
     const error = await updateName(name);
     if (error) {
       setError(error);
       return;
     }
     redirect("/path");
   })
 };
```

### use( ) - The New API for Promises and Contexts
The use hook provides a new interface, allowing access to resources during rendering, which reduces the need for useEffect and useState. Resources in this context can refer to Promises or Contexts. [1]

```
import { use } from 'react';

const NewsComponent = ({ newsPromise }) => {
  const news = use(newsPromise);
  const theme = use(ThemeContext);
  // ...
```

### Additional Features and Hooks

**Ref as Prop**

In the future, there will be no need to use forwardRef to pass a ref. Ref will become a default prop for components [3].

**useOptimistic**

The useOptimistic hook allows for temporary updates with optimistic values. This is particularly useful for providing immediate feedback to users while the actual data is still being processed [3].

**useFormStatus**

The useFormStatus hook can read the state of a form, enabling better handling of form states and validations in child components [3].

Besides the features mentioned here, there are other small enhancements that might be interesting for some. For more details, I would directly refer to the Release Notes of React 19.

# Conclusion
React 19 marks a significant advancement in frontend development. The new compiler not only brings with it a dramatically improved performance but also offers a variety of new possibilities and optimizations that make developers' lives easier. With the new tools and improvements, developing React applications will become much more efficient and powerful than before.

# Sources

[1] [React Compiler Development Guide](https://github.com/facebook/react/blob/main/compiler/docs/DEVELOPMENT_GUIDE.md) (Accessed on: 12.07.2024)

[2] [React Compiler](https://react.dev/learn/react-compiler) (Accessed on: 28.06.2024)

[3] [React 19 RC](https://react.dev/blog/2024/04/25/react-19) (Accessed on: 28.06.2024)

[4] [React Server Components](https://react.dev/reference/rsc/server-components) (Accessed on: 12.07.2024)

[5] [Server Actions](https://react.dev/reference/rsc/server-actions) (Accessed on: 28.06.2024)

React is dead, long live React - React 19 is here

Profilbild von Dominik Fladung im Hemd und mit Brille

Wir Softwareentwickler leben in einem ständigen Dilemma. Jede Funktionalität der Software sollte durch *Unit-Tests* und *Integrationstest* abgesichert werden. Es sollten dabei so viel Tests wie nötig, aber nur so wenige wie möglich geschrieben werden. 

Schreiben wir zu wenige Tests, dann sind nicht alle Funktionalitäten unserer Software ausreichend abgesichert. Zu viele Tests bedeuten teure Entwicklungszeit, die wir in unnötige Tests investieren.
Da sich die Software im Laufe der Zeit stetig verändert, müssen wir die Tests auch immer wieder anpassen. Mit der puren Anzahl der Tests steigt natürlich auch der Aufwand für die Pflege unserer Testbasis.

Ein recht aufwendiger Teil der Tests ist die Bereitstellung der Testdaten. Daher werden ziemlich schnell standarisierte Testdaten bzw. *Test Fixtures* in den Projekten genutzt. Ein Vorteil dieser *Test Fixtures* ist der reduzierte Aufwand bei den Anpassungen. Statt hunderte von Tests zu ändern, müssen nur einige wenige Bereitstellungsmethoden aktualisiert werden.

Für diese Bereitstellungsmethoden werden in den eigenen *JUnit 5*-Tests diverse Ansätze herangezogen, der *Extension-Mechanismus* des Frameworks aber häufig außer Acht gelassen. Wie dieser genutzt werden kann, werde ich im Folgenden an einem einfachen Test vorstellen.  

## Der JUnit 5 Extension-Mechanismus

Der _Extension-Mechanismus_ modifiziert das Verhalten von Testklassen oder -methoden. Vor _Junit 5_ verwendete _JUnit_ nur die Erweiterungspunkte `TestRunner` und `Rule`. _JUnit 5_ ersetzt diese durch eine vollständige _Extension-API_. Die API gestattet es an fünf Extension-Points in den Lifecycle eines Tests  einzugreifen. In diesem Beitrag nutzen wir den  Extension-Point _Parameter Resolution_, aber dazu kommen wir später.

## Der Bibliotheksbenutzer, seine Ausleihe und die Gebühren aka die Domäne

Ein Problem und seine Lösung erklärt man am einfachsten an einem prägnanten Beispiel. Dieses Beispiel bedient sich an meinen IT-Erfahrungen aus der Studentenzeit. Ein Bibliotheksnutzer hat diverse Ausleihen von Büchern und ggf. stehen Gebühren für die Nutzung oder überfällige Medien an.

## Ein erster Test

In unserem Beispiel werden die aktuellen Gebühren für einen Nutzeraccount berechnet. Dazu wird ein Account für einen Bibliotheksnutzer erstellt und zwei Ausleihen hinzugefügt.
Da eine der  beiden Ausleihen überfällig ist, steht eine Mahngebühr von 3 Euro an.

```java
class LibraryTest {
  @Test
  void currentFees() {
    Patron patron = Patron.id("id-001").name("Jens Kaiser").fees(LibraryFees.ADULT).build();
    Book book9 = Book.title("Gevatter Tod").author("Terry Pratchett").build();
    Book book14 = Book.title("Lachs im Zweifel").author("Douglas Adams").build();
    Booking booking9 = Booking.media(book9).till(LocalDate.now().minusDays(2)).build(),
    Booking booking14 = Boocking.media(book14).till(LocalDate.now().plusDays(2)).build()

    Account account = Account.by(patron).with(List.of(booking9, boocking14)).build();

    assertEquals(3, account.getCurrentFees());
  }
}
```

Für den ersten Test eine Menge Code für die Erstellung der Testdaten. Alle weiteren Tests mit ähnlichen Voraussetzungen benötigen ähnliche Codefragmente. Daher sollten wir versuchen diese Fragmente bestmöglich wiederzuverwenden.

## Weniger Boilerplate-Code

Für weitere Tests in der Klasse `LibraryTest` zentralisieren wir das Erstellen der Testdaten.
Die bekannteste Möglichkeit dafür ist eine mit `@BeforeEach` annotierte Methode.

```java
class LibraryTest {
  private Patron patron;
  private Booking booking9;
  private Booking booking14;

  @BeforeEach
  void setUp() {
    Patron patron = Patron.id("id-001").name("Jens Kaiser").fees(LibraryFees.ADULT).build();
    Book book9 = Book.title("Gevatter Tod").author("Terry Prattchet").build();
    Book book14 = Book.title("Lachs im Zweifel").author("Douglas Adams").build();
    Booking booking9 = Booking.media(book9).till(LocalDate.now().minusDays(2)).build(),
    Booking booking14 = Boocking.media(book14).till(LocalDate.now().plusDays(2)).build()
  }

  @Test
  void currentFees() {
    Account account = Account.by(patron).with(List.of(booking9, boocking14)).build();

    assertEquals(3, account.getCurrentFees());
  }
}
```

Nun können sich alle Testmethoden die *Text Fixture* teilen. Da die `setUp`-Methode vor jedem Test aufgerufen wird, werden diese Daten leider auch für Tests erstellt, die sie gar nicht benötigen.

## Parameter Resolver in JUnit 5

*JUnit 5* erlaubt es, Parameter an Test und Lifecycle-Methoden zu übergeben. Dafür können eigene `ParameterResolver` implementiert werden.

```java
public class PatronParameterResolver implements ParameterResolver {

  @Override
  public boolean supportsParameter(ParameterContext parameter, ExtensionContext extension) {
      return parameter.getParameter().getType() == Patron.class;
  }

  @Override
  public Patron resolveParameter(ParameterContext parameter, ExtensionContext extension) {
    return Patron.id("id-001").name("Jens Kaiser").fees(LibraryFees.ADULT).build();
  }
}
```

Der `PatronParameterResolver` ersetzt alle Methodenparameter vom Typ `Patron` mit der Instanz, die von der Methode `resolveParameter` erzeugt wird. Wir dürfen nicht die `@ExtendWith` Annotation vergessen, sonst weiß _JUnit 5_ nicht, woher der `Patron`kommen soll.

Die Test-Klasse verkürzt sich nun um den vom `PatronParameterResolver` generierten Kunden.

```java
@ExtendWith(PatronParameterResolver.class)
class LibraryTest {
  private  Booking booking9;
  private  Booking booking14;

  @BeforeEach
  void setUp() {
    Book book9 = Book.title("Gevatter Tod").author("Terry Pratchett").build();
    Book book14 = Book.title("Lachs im Zweifel").author("Douglas Adams").build();
    Booking booking9 = Booking.media(book9).till(LocalDate.now().minusDays(2)).build(),
    Booking booking14 = Boocking.media(book14).till(LocalDate.now().plusDays(2)).build()
  }

  @Test
  void currentFees(Patron patron) {
    Account account = Account.by(patron).with(List.of(booking9, boocking14)).build();

    assertEquals(3, account.getCurrentFees());
  }
}
```

Der Bibliotheksnutzer wird nun nur noch für die Testmethoden erzeugt, die diesen auch tatsächlich benötigen. Nur schade, dass es immer derselbe Nutzer ist. Kann man das nicht ändern?

## Variationen mit Annotationen

Eine Annotation am Parameter kann durch den Parameter Resolver ausgewertet werden und zur Modifizierung der Werte genutzt werden. Mit der Annotation `@Fixture` sind dann die folgenden Tests möglich.

```java
@ExtendWith(PatronParameterResolver.class)
class LibraryTest {
  private Booking booking9;
  private Booking booking14;

  @BeforeEach
  void setUp() {
    Book book9 = Book.title("Gevatter Tod").author("Terry Pratchett").build();
    Book book14 = Book.title("Lachs im Zweifel").author("Douglas Adams").build();
    Booking booking9 = Booking.media(book9).till(LocalDate.now().minusDays(2)).build(),
    Booking booking14 = Boocking.media(book14).till(LocalDate.now().plusDays(2)).build()
  }

  @Test
  void currentFeesAdult(@Fixture("Jens") Patron patron) {
    Account account = Account.by(patron).with(List.of(booking9, boocking14)).build();
    assertEquals(3, account.getCurrentFees());
  }

  @Test
  void currentFeesChild(@Fixture("Christopher") Patron patron) {
    Account account = Account.by(patron).with(List.of(booking9, boocking14)).build();
    assertEquals(2, account.getCurrentFees());
  }
}
```

Der `PatronParameterResolver` entscheidet mit Hilfe der `@Fixture` Angabe, welcher Bibliotheksnutzer erstellt werden soll. Der zweite Bibliotheksnutzer bekommt geringere Mahngebühren, weil er noch ein Kind ist. 

Wir verwenden an dieser Stelle _Personas_, um unseren Tests, im wahrsten Sinne des Wortes, ein Gesicht zu geben. Die Persona _Jens Kaiser_ ist ein älterer Herr, der gelegentlich die Bibliothek besucht und _Christopher Robin_ ist ein kleiner Junge mit einem Teddybär.

## Das geht auch generisch

Häufig hat man es nicht nur mit einer Domänenklasse zu tun, sondern mit sehr vielen. Daher kann ein Großteil der Implementierung in einer generische Basisklasse verschoben werden.

```java
public class PatronFixtureParameterResolver 
      extends AbstractFixtureParameterResolver<Customer, Long> { 
  public PatronFixtureParameterResolver() {
    super(Patron.class, x -> (long) x);
  }

  @Override
  protected Patron createInstance(Long identifier, String persona) {
    String id = "id-%03d".formatted(identifier);
    return switch (persona) {
       case "Christopher" -> Patron.id(id).name("Christopher Robin").fees(CHILD).build();
       case "Jens", "default" -> Patron.id(id).name("Jens Kaiser").fees(ADULT).build();
       default -> throw new ParameterResolutionException("unknown patron: " + persona);   
     }
  }
}
```

Der `PatronFixtureParameterResolver` erbt von dem `AbstractFixtureParameterResolver`.
Dieser erzeugt nicht nur eine Instanz der gewünschten Klasse, sondern beherrscht auch Collections und Arrays dieser Klasse und wertet die `@Fixture` Annotation aus. Der `PatronFixtureParameterResolver` kümmert sich nur noch um die Erzeugung der Varianten. 

```java
public abstract class AbstractFixtureParameterResolver<T, I> implements ParameterResolver {
    private final Class<T> type;
    private final Function<Integer, I> identifierMapper;

    protected AbstractFixtureParameterResolver(Class<T> type, Function<Integer, I> mapper) {
        this.type = type;
        this.identifierMapper= mapper;
    }

    private boolean isCollection(Parameter parameter) {
        ParameterizedType type = (ParameterizedType) parameter.getParameterizedType();
        return type.getActualTypeArguments()[0] == type;
    }

    private boolean isArray(Class<?> parameterType) {
        return parameterType.isArray() && parameterType.getComponentType() == type;
    }

    @Override
    public boolean supportsParameter(ParameterContext context, ExtensionContext extension) {
        Parameter parameter = context.getParameter();
        Class<?> parameterType = parameter.getType();
        return parameterType == type || isArray(parameterType) || isCollection(parameter);
    }

    protected abstract T createInstance(I identifier, String variation);

    @Override
    @SuppressWarnings("unchecked")
    public Object resolveParameter(ParameterContext context, ExtensionContext extension) {
        Optional<Fixture> fixture = context.findAnnotation(Fixture.class);
        List<String> variations = fixture.map(Fixture::value).filter(l -> l.length > 0)
            .map(Arrays::asList).orElseGet(() -> List.of("default"));
        Class<?> parameterType = context.getParameter().getType();
        if (parameterType == type) {
            return createInstance(identifierSupplier.apply(0), variations.getFirst());
        }
        int size = fixture.map(Fixture::size).orElse(3);
        int offset = fixture.map(Fixture::offset).orElse(10);
        if (parameterType.isArray()) {
            List<T> list = createStream(offset, size, variations).toList();
            return list.toArray((T[]) Array.newInstance(type, list.size()));
        }
        if (parameterType == List.class) {
            return createStream(offset, size, variations).toList();
        }
        if (parameterType == Set.class) {
            return createStream(offset, size, variations).collect(Collectors.toSet());
        }
        throw new ParameterResolutionException("something went wrong: " + parameterType);
    }

    private Stream<T> createStream(int offset, int size, List<String> variations) {
        return IntStream.range(offset, offset + size)
            .mapToObj(x -> createInstance(identifierMapper.apply(x), 
                variations.get(x % variations.size())));
    }
}
```

## Mehrere Parameter-Resolver

Es geht natürlich auch mit mehreren `ParameterResolvern`. Neben dem `PatronFixtureParameterResolver` wird im folgenden Test auch ein `BookingFixtureParameterResolver` verwendet. Dieser erzeugt die Ausleihen für den Benutzeraccount.

```java 
@ExtendWith(PatronFixtureParameterResolver.class)
@ExtendWith(BookingFixtureParameterResolver.class)
class LibraryTest {
  @Test
  void currentFees(@Fixture("Jens) Patron patron, 
      @Fixture(variations={"Pratchett-2", "Adams+2"}, size=2) List<Booking> bookings) {
    Account account = Account.by(patron).with(bookings)).build();

    assertEquals(3, account.getCurrentFees());
  }
}
```

Der `BookingFixtureParameterResolver` generiert diverse Varianten von `Booking`-Instanzen. In der Testklasse werden keine *Test Fixture* mehr erzeugt. Alle *Test Fixtures* kommen nun aus Parameter Resolvern.

## Fazit

Mit dem _Parameter Resolver_ Extension Point bietet _JUnit 5_ einen mächtigen Mechanismus, um Test-Methoden mit _Test Fixtures_ zu versehen. Wir konnten sehen, dass eigene Parameter-Resolver ohne besonderen Aufwand erstellt und eingebunden werden können.  

Die Testdatenerzeugung mit Parameter-Resolvern bringt einige Vorteile. Der Mechanismus ist integraler Bestandteil des _JUnit 5_ Frameworks. Er ist etabliert, dokumentiert und bietet eine uniforme Lösung für die eigene Datenbereitstellung. Die Testdaten werden nur punktuell erzeugt und verwendet. Nur dort, wo sie als Parameter einer Testmethode angegeben sind, werden sie auch tatsächlich instanziiert. Außerdem können Variationen in den Testdaten über Annotationen direkt an den Parametern der Testmethoden konfiguriert werden.

Für alle, die neugierig geworden sind: einfach mal testen!

Test Fixtures mit JUnit 5

Senior IT Consultant

Werkstudent

IT-Consultant

Bielefeld | Team

Vielen Dank für deine Anfrage. Ich melde mich bei dir.

Vielen Dank für deine Anmeldung. Eine E-Mail zur Bestätigung ist zu dir unterwegs.

Diese Seite ist eine Vorschau. \nKlicken Sie hier\n, um den Vorschaumodus zu verlassen.

Zu deiner Suche haben wir leider keine passenden Blogartikel gefunden. 

Du hast noch Fragen zu diesem Thema? Dann sprich mich einfach an.

Du hast Fragen oder möchtest dich mit mir austauschen? Gern - trag einfach deine Kontaktdaten ein.

Die \nDatenschutzerklärung\n der codecentric AG habe ich zur Kenntnis genommen und bestätige das mit der Absendung des Formulars.*

Entdecke spannende weiterführende Themen und lass dich von der codecentric Welt inspirieren.

Ich möchte eure Inhalte abonnieren. Diese Einwilligung kann ich jederzeit widerrufen bzw. den Blog Newsletter abbestellen. Die Datenschutzerklärung habe ich gelesen. Ich bin damit einverstanden, dass die codecentric AG, Hochstr. 11, 42697 Solingen, mich über eigene Dienstleistungen, branchenrelevante Events, Webinare und Publikationen der codecentric AG über die von mir angegebene E-Mail-Adresse informiert. Meine Einwilligung ist freiwillig. Ich kann meine Einwilligung jederzeit mit Wirkung für die Zukunft widerrufen (z.B. über den hierfür vorgesehenen Abmeldelink in unserem Newsletter, per E-Mail an datenschutz@codecentric.de oder per Post an die oben genannte Adresse der codecentric AG) erklären. Weitere Hinweise zur Verarbeitung meiner personenbezogenen Daten und zu meinen Rechten als betroffene Person finde ich hier: \nhttps://www.codecentric.de/datenschutzerklaerung\n

Bitte wähle deine/n gewünschte/n Standort/e aus.

Wir möchten dich als Mensch kennenlernen. Erzähle uns, wer du bist, worauf du Wert legst, wie du gerne arbeitest und was du von uns als Arbeitgeber erwartest.

Bitte füge deine Bewerbungsunterlagen ​(mind. Lebenslauf, gerne auch mehr)​​ ​als eine ​PDF-​Datei ​hinzu.

Es gilt die Datenschutzerklärung der codecentric AG, abrufbar unter \nDatenschutzbestimmungen\n. Mit dem Absenden des Formulars bestätige ich, dass ich diese zur Kenntnis genommen habe.

Job application form field placeholder 10

Keine passende Rolle gefunden? Bewirb dich bitte trotzdem initiativ! Jenseits von starren Schubladen zählen für uns vielmehr Motivation, Kompetenz und der Cultural Fit.

Job application form field placeholder 11

Dies ist ein Pflichtfeld, bitte fülle es aus.

Willkommen im Team Bielefeld

Gemeinsam bessere Projekte umsetzen.

Wir helfen deinem Unternehmen.

Unsere Leistungen

Hilf uns, noch besser zu werden.

Zu den Jobangeboten