TWRestMindmap mit React, Patternfly, RESTEasy, Swagger-UI, Quarkus, Panache, ORM, JPA, Hibernate, Docker und PostgreSQL

TWRestMindmap mit React, Patternfly, RESTEasy, Swagger-UI, Quarkus, Panache, ORM, JPA, Hibernate, Docker und PostgreSQL DB verwenden. Um nicht JUnit 5 zu vergessen.

Wir bauen nun mit Quarkus eine React Anwendung die Titel und das Datum von Mindmaps anzeigt und per REST bedient werden kann. Die GUI im Browser sieht dann so aus:

Aufteilung in einem Projekt nach Frontend und Backend. Das Backend läuft ua. in einem Docker mit einer PostreSQL Datenbank. Das Backend wird mit Maven und Java zusammengebaut und das Frontend verwendet NPM und Node.js bzw. JavaScript.

Das ganze Projekt kann von GitLab heruntergeladen werden. Hier beschreibe ich einige wichtige Dinge zu den verwendeten Technologien angefangen beim Backend bis zum Frontend.

Automatischer JUnit-Test

Fangen wir an mit JUnit Test, also TDD. Das geht mit Quarkus ganz gut, es werden automatisch beim speichern alle JUnit-Tests ausgeführt und im Browser das Ergebnis mit Log anzgezeigt. Das alles läuft, wenn das Projekt im mvn quakus:dev Modus läuft, hier z.B. die Ansicht der GUI, die im Browser über diese URL aufgerufen werden kann:

http://localhost:8080/q/dev/io.quarkus.quarkus-vertx-http/tests

Folgende Einträge sind in der pom.xml für das Testen mind. nötig:

Ok, alles GRÜN.

Datenbank in Docker Container

Dann ein paar Worte zur verwendeten Datenbank. In diesem Beispiel verwenden wir in einem Docker Container eine PostgreSQL DB. Wir brauchen dazu nur diese beiden Einträge in der /src/main/resources/application.properties Datei:

In einer /src/main/resources/import.sql Datei, wird die Erstladung der DB eingetragen, wir nehmen mal vier Mindmaps:

Und da wir auch Hibernate mit Panache verwenden brauchen wir für jedes BE eine @Entity Annotation und die Klasse muss von PanacheEntity erben. Die Mindmap.java Klasse:

In der pom.xml muss noch

ergänzt werden. Das ist schon alles, um eine DB in einem Docker-Container laufen zu lassen.

REST und Swagger

Da wir auch einen REST-Service anbieten wollen, auf den das Frontend zugreifft, erstellen wir eine MindmapResource.java Klasse mit @Path(„/mindmaps“) und
@ApplicationScoped Annotationen:

Der REST-Service ist dann über eine Swagger-UI mit dieser URL http://localhost:8080/q/swagger-ui/ aufrufbar:

Und hier mal ein Service ausgeführt, es werden die vier Mindmaps sortiert nach Namen mit Mindmap.listAll(Sort.by(„name“)); als Json geliefert:

Auch gibt es einige Infos über RESTEasy über die URL http://localhost:8080/q/dev/io.quarkus.quarkus-resteasy-reactive/scores z.B.

OpenApi

Die OpenApi kann auch über die Swagger-UI abgefragt werden:

Start Backend

Nachdem der Docker Desktop gestartet wurde kann die pom.xml aus dem TWRestMindmap Verzeichnis mit mvn quarkus:dev gestartet werden. Dann kann das Backend schon über die Swagger-Ui oder auch über ein einfaches curl abgefragt werden. Z.B. curl ‚http://localhost:8080/mindmaps‘ | jq liefert:

Oder auch nur den Namen der 1.Mindmap mit
curl ‚http://localhost:8080/mindmaps‘ | jq ‚.[1].name

Struktur Frontend und Backend

Das Frontend ist in dem Verzeichnis src/main/webapp in dem TWRestMindmap Projekt zu finden:

React Frontend

Die React Componente ist in der mindmaps.js Datei zu finden:

und die ganze Application in der App.js Datei:

Starten des React Frontend

In einer neue Konsole in dem /TWRestMindmap/src/main/webapp Verzeichnis die React Gui starten mit: npm start und schon öffnet sich im Browser die http://localhost:3000/ wo die Gui läuft und alle Mindmaps wie ganz oben angezeigt wird.
Evl. ist ein einmaliges installieren der React und Patternfly Abhängigkeiten nötig:

Am schnellsten einfach das ganze Projekt mit einem

git clone https://gitlab.com/IT-Berater/twrestmindmap.git

holen und die oben genannten Schritte nachverfolgen. Fehlt was? … Gern Merge Repuest https://gitlab.com/IT-Berater/twrestmindmap/-/merge_requests oder EMail …