{"id":17738,"date":"2021-11-12T17:36:53","date_gmt":"2021-11-12T16:36:53","guid":{"rendered":"http:\/\/blog.wenzlaff.de\/?p=17738"},"modified":"2023-08-20T14:55:19","modified_gmt":"2023-08-20T12:55:19","slug":"twrestmindmap-mit-react-patternfly-resteasy-swagger-ui-quarkus-panache-orm-jpa-hibernate-docker-und-postgresql","status":"publish","type":"post","link":"http:\/\/blog.wenzlaff.de\/?p=17738","title":{"rendered":"TWRestMindmap mit React, Patternfly, RESTEasy, Swagger-UI, Quarkus, Panache, ORM, JPA, Hibernate, Docker und PostgreSQL"},"content":{"rendered":"

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

\"\"<\/p>\n

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: <\/p>\n

\"\"<\/p>\n

Aufteilung in einem Projekt nach Frontend und Backend. Das Backend l\u00e4uft 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.<\/p>\n

Das ganze Projekt kann von GitLab<\/a> heruntergeladen werden. Hier beschreibe ich einige wichtige Dinge zu den verwendeten Technologien angefangen beim Backend bis zum Frontend. <\/p>\n\n

Automatischer JUnit-Test<\/h1>\n

Fangen wir an mit JUnit<\/strong> Test, also TDD. Das geht mit Quarkus ganz gut, es werden automatisch beim speichern alle JUnit-Tests ausgef\u00fchrt und im Browser das Ergebnis mit Log anzgezeigt. Das alles l\u00e4uft, wenn das Projekt im mvn quakus:dev<\/strong> Modus l\u00e4uft, hier z.B. die Ansicht der GUI, die im Browser \u00fcber diese URL aufgerufen werden kann: <\/p>\n

http:\/\/localhost:8080\/q\/dev\/io.quarkus.quarkus-vertx-http\/tests<\/a><\/p>\n

\"\"<\/p>\n

Folgende Eintr\u00e4ge sind in der pom.xml f\u00fcr das Testen mind. n\u00f6tig:<\/p>\n

 <dependency>\r\n      <groupId>io.quarkus<\/groupId>\r\n      <artifactId>quarkus-junit5<\/artifactId>\r\n      <scope>test<\/scope>\r\n    <\/dependency>\r\n    <dependency>\r\n      <groupId>io.rest-assured<\/groupId>\r\n      <artifactId>rest-assured<\/artifactId>\r\n      <scope>test<\/scope>\r\n    <\/dependency><\/pre>\n
Ok, alles GR\u00dcN. <\/p>\n
Datenbank in Docker Container<\/h1>\n
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\u00e4ge in der \/src\/main\/resources\/application.properties<\/strong> Datei:<\/p>\n
quarkus.datasource.db-kind=postgresql\r\nquarkus.hibernate-orm.database.generation=drop-and-create<\/pre>\n
In einer  \/src\/main\/resources\/import.sql<\/strong> Datei, wird die Erstladung der DB eingetragen, wir nehmen mal vier Mindmaps:<\/p>\n
INSERT INTO mindmap(id, name, erstellung) VALUES (nextval('hibernate_sequence'), 'Reverse Proxy',                          '2021-11-08T20:48:09.999796');\r\nINSERT INTO mindmap(id, name, erstellung) VALUES (nextval('hibernate_sequence'), '2. Mindmap',                             '2021-10-08T20:48:09.999796');\r\nINSERT INTO mindmap(id, name, erstellung) VALUES (nextval('hibernate_sequence'), '6 Best Point to Protecting your Crypto', '2021-01-08T20:48:09.999796');\r\nINSERT INTO mindmap(id, name, erstellung) VALUES (nextval('hibernate_sequence'), 'Letzte 4. Mindmap Beschreibung Titel',   '2020-08-08T<\/pre>\n
Und da wir auch Hibernate mit Panache verwenden brauchen wir f\u00fcr jedes BE eine @Entity<\/strong> Annotation und die Klasse muss von PanacheEntity<\/strong> erben. Die Mindmap.java Klasse:<\/p>\n
package de.wenzlaff.mindmap.be;\r\n\r\nimport java.time.LocalDateTime;\r\n\r\nimport javax.persistence.Cacheable;\r\nimport javax.persistence.Column;\r\nimport javax.persistence.Entity;\r\n\r\nimport io.quarkus.hibernate.reactive.panache.PanacheEntity;\r\n\r\n\/**\r\n * BE einer Mindmap\r\n * \r\n * @author Thomas Wenzlaff\r\n *\/\r\n@Entity\r\n@Cacheable\r\npublic class Mindmap extends PanacheEntity {\r\n\r\n\t@Column(length = 120, unique = true)\r\n\tpublic String name;\r\n\r\n\t\/**\r\n\t * Zeitpunkt der Erstellung der Mindmap.\r\n\t *\/\r\n\t@Column()\r\n\tpublic LocalDateTime erstellung;\r\n}<\/pre>\n
In der pom.xml muss noch<\/p>\n
 <dependency>\r\n      <groupId>io.quarkus<\/groupId>\r\n      <artifactId>quarkus-hibernate-reactive-panache<\/artifactId>\r\n    <\/dependency><\/pre>\n
erg\u00e4nzt werden. Das ist schon alles, um eine DB in einem Docker-Container laufen zu lassen.<\/p>\n
REST und Swagger<\/h1>\n
Da wir auch einen REST-Service anbieten wollen, auf den das Frontend zugreifft, erstellen wir eine MindmapResource.java<\/strong> Klasse mit @Path(„\/mindmaps“)<\/strong> und
\n@ApplicationScoped<\/strong> Annotationen:<\/p>\n
package de.wenzlaff.mindmap;\r\n\r\nimport java.net.URI;\r\nimport java.time.LocalDateTime;\r\nimport java.util.List;\r\n\r\nimport javax.enterprise.context.ApplicationScoped;\r\nimport javax.ws.rs.GET;\r\nimport javax.ws.rs.POST;\r\nimport javax.ws.rs.Path;\r\nimport javax.ws.rs.core.Response;\r\n\r\nimport org.jboss.logging.Logger;\r\n\r\nimport de.wenzlaff.mindmap.be.Mindmap;\r\nimport io.quarkus.hibernate.reactive.panache.Panache;\r\nimport io.quarkus.panache.common.Sort;\r\nimport io.smallrye.mutiny.Uni;\r\n\r\n\/**\r\n * http:\/\/localhost:8080\/q\/swagger-ui\/\r\n * \r\n * @author Thomas Wenzlaff\r\n *\/\r\n@Path(\"\/mindmaps\")\r\n@ApplicationScoped\r\npublic class MindmapResource {\r\n\r\n\tprivate static final Logger LOG = Logger.getLogger(MindmapResource.class);\r\n\r\n\t@GET\r\n\tpublic Uni<List<Mindmap>> get() {\r\n\t\treturn Mindmap.listAll(Sort.by(\"name\"));\r\n\t}\r\n\r\n\t\/**\r\n\t * Liefert die Anzahl der Mindmaps.\r\n\t * \r\n\t * @return Anzahl der Mindmaps.\r\n\t *\/\r\n\t@Path(\"\/anzahl\")\r\n\t@GET\r\n\tpublic Uni<Long> count() {\r\n\t\treturn Mindmap.count();\r\n\t}\r\n\r\n\t@GET\r\n\t@Path(\"\/{id}\")\r\n\tpublic Uni<Mindmap> getSingle(Long id) {\r\n\t\treturn Mindmap.findById(id);\r\n\t}\r\n\r\n\t@POST\r\n\tpublic Uni<Response> create(Mindmap mindmap) {\r\n\t\tLOG.info(\"Erzeuge Mindmap\");\r\n\t\tmindmap.erstellung = LocalDateTime.now();\r\n\t\treturn Panache.<Mindmap>withTransaction(mindmap::persist).onItem().transform(inserted -> Response.created(URI.create(\"\/mindmaps\/\" + inserted.id)).build());\r\n\t}\r\n}<\/pre>\n
Der REST-Service ist dann \u00fcber eine Swagger-UI<\/strong> mit dieser URL http:\/\/localhost:8080\/q\/swagger-ui\/<\/a> aufrufbar:<\/p>\n
\"\"<\/p>\n
Und hier mal ein Service ausgef\u00fchrt, es werden die vier Mindmaps sortiert nach Namen mit Mindmap.listAll(Sort.by(„name“))<\/strong>; als Json geliefert:<\/p>\n
\"\"<\/p>\n
Auch gibt es einige Infos \u00fcber RESTEasy \u00fcber die URL http:\/\/localhost:8080\/q\/dev\/io.quarkus.quarkus-resteasy-reactive\/scores<\/a> z.B.<\/p>\n
\"\"<\/p>\n
OpenApi<\/h1>\n
Die OpenApi kann auch \u00fcber die Swagger-UI abgefragt werden:<\/p>\n
---\r\nopenapi: 3.0.3\r\ninfo:\r\n  title: de.wenzlaff.twrestmindmap API\r\n  version: 1.0.0-SNAPSHOT\r\npaths:\r\n  \/info:\r\n    get:\r\n      tags:\r\n      - Version Resource\r\n      responses:\r\n        \"200\":\r\n          description: OK\r\n          content:\r\n            text\/plain:\r\n              schema:\r\n                type: string\r\n  \/mindmaps:\r\n    get:\r\n      tags:\r\n      - Mindmap Resource\r\n      responses:\r\n        \"200\":\r\n          description: OK\r\n          content:\r\n            application\/json:\r\n              schema:\r\n                type: array\r\n                items:\r\n                  $ref: '#\/components\/schemas\/Mindmap'\r\n    post:\r\n      tags:\r\n      - Mindmap Resource\r\n      requestBody:\r\n        content:\r\n          application\/json:\r\n            schema:\r\n              $ref: '#\/components\/schemas\/Mindmap'\r\n      responses:\r\n        \"200\":\r\n          description: OK\r\n          content:\r\n            application\/json: {}\r\n  \/mindmaps\/anzahl:\r\n    get:\r\n      tags:\r\n      - Mindmap Resource\r\n      responses:\r\n        \"200\":\r\n          description: OK\r\n          content:\r\n            application\/json:\r\n              schema:\r\n                format: int64\r\n                type: integer\r\n  \/mindmaps\/{id}:\r\n    get:\r\n      tags:\r\n      - Mindmap Resource\r\n      parameters:\r\n      - name: id\r\n        in: path\r\n        required: true\r\n        schema:\r\n          format: int64\r\n          type: integer\r\n      responses:\r\n        \"200\":\r\n          description: OK\r\n          content:\r\n            application\/json:\r\n              schema:\r\n                $ref: '#\/components\/schemas\/Mindmap'\r\ncomponents:\r\n  schemas:\r\n    Mindmap:\r\n      type: object\r\n      properties:\r\n        id:\r\n          format: int64\r\n          type: integer\r\n        name:\r\n          type: string\r\n        erstellung:\r\n          format: date-time\r\n          type: string\r\n<\/pre>\n
Start Backend<\/h1>\n
Nachdem der Docker Desktop gestartet wurde kann die pom.xml<\/strong> aus dem TWRestMindmap Verzeichnis mit mvn quarkus:dev<\/strong> gestartet werden. Dann kann das Backend schon \u00fcber die Swagger-Ui oder auch \u00fcber ein einfaches curl abgefragt werden. Z.B.  curl ‚http:\/\/localhost:8080\/mindmaps‘ | jq<\/strong> liefert:<\/p>\n
\"\"<\/p>\n
Oder auch nur den Namen der 1.Mindmap mit
\ncurl ‚http:\/\/localhost:8080\/mindmaps‘ | jq ‚.[1].name<\/strong><\/p>\n
Struktur Frontend und Backend<\/h1>\n
Das Frontend ist in dem Verzeichnis src\/main\/webapp<\/strong> in dem TWRestMindmap Projekt zu finden:<\/p>\n
\"\"<\/p>\n
React Frontend<\/h1>\n
Die React<\/a> Componente ist in der mindmaps.js<\/strong> Datei zu finden:<\/p>\n
import React from 'react'\r\n\r\nconst Mindmaps = ({ mindmaps }) => {\r\n\treturn (\r\n\t\t<div>\r\n\t\t\t<center><h1>Mindmaps<\/h1><\/center>\r\n\t\t\t<table class=\"pf-c-table pf-m-grid-md\" role=\"grid\" id=\"table-basic\">\r\n\t\t\t\t<caption>{mindmaps.length} von kleinhirn.eu<\/caption>\r\n\t\t\t\t<thead>\r\n\t\t\t\t\t<tr role=\"row\">\r\n\t\t\t\t\t\t<th role=\"columnheader\" scope=\"col\">Erstellung<\/th>\r\n\t\t\t\t\t\t<th role=\"columnheader\" scope=\"col\">Titel<\/th>\r\n\t\t\t\t\t<\/tr>\r\n\t\t\t\t<\/thead>\r\n\t\t\t\t{mindmaps.map((mindmap) => (\r\n\t\t\t\t\t<tbody role=\"rowgroup\">\r\n\t\t\t\t\t\t<tr role=\"row\">\r\n\t\t\t\t\t\t\t<td role=\"cell\" data-label=\"\">{mindmap.erstellung}<\/td>\r\n\t\t\t\t\t\t\t<td role=\"cell\" data-label=\"\">{mindmap.name}<\/td>\r\n\t\t\t\t\t\t<\/tr>\r\n\t\t\t\t\t<\/tbody>\r\n\t\t\t\t))}\r\n\t\t\t<\/table>\r\n\t\t<\/div>\r\n\t)\r\n};\r\n\r\nexport default Mindmaps<\/pre>\n
 und die ganze Application in der App.js<\/strong> Datei:<\/p>\n
\r\n\r\nimport React, {Component} from 'react';\r\nimport Mindmaps from '.\/components\/mindmaps'\r\n\r\nclass App extends Component {\r\n  state = {\r\n    mindmaps: []\r\n  }\r\n\r\n  componentDidMount() {\r\n    fetch('\/mindmaps')\r\n    .then(res => res.json())\r\n    .then((data) => {\r\n      this.setState({ mindmaps: data })\r\n    })\r\n    .catch(console.log)\r\n  }\r\n\r\n  render () {\r\n    return (\r\n      <Mindmaps mindmaps={this.state.mindmaps} \/>\r\n    );\r\n  }\r\n}\r\n\r\nexport default App;<\/pre>\n
Starten des React Frontend<\/h1>\n
In einer neue Konsole in dem \/TWRestMindmap\/src\/main\/webapp<\/strong> Verzeichnis die React Gui<\/a> starten mit: npm start<\/strong> und schon \u00f6ffnet sich im Browser die http:\/\/localhost:3000\/<\/a> wo die Gui l\u00e4uft und alle Mindmaps wie ganz oben angezeigt wird.
\nEvl. ist ein einmaliges installieren der React und Patternfly Abh\u00e4ngigkeiten n\u00f6tig:<\/p>\n
\r\n# im \/TWRestMindmap\/src\/main\/webapp einmal die beiden Befehler ausf\u00fchren:\r\nnpx create-react-app . \r\nnpm install @patternfly\/patternfly --save<\/pre>\n
Am schnellsten einfach das ganze Projekt mit einem <\/p>\n
git clone https:\/\/gitlab.com\/IT-Berater\/twrestmindmap.git <\/strong><\/p>\n
holen und die oben genannten Schritte nachverfolgen. Fehlt was? … Gern Merge Repuest https:\/\/gitlab.com\/IT-Berater\/twrestmindmap\/-\/merge_requests oder EMail …<\/p>\n","protected":false},"excerpt":{"rendered":"
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:<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[220,4,5,3897,3137,3163,79,3769,4960],"tags":[5091,2150,2060,4110,5090,5089,4943,3764,5088,3767,3768,5087],"class_list":["post-17738","post","type-post","status-publish","format-standard","hentry","category-anleitung","category-eclipse","category-java","category-java-programmierung","category-javascript","category-maven","category-programmierung","category-quarkus-framework","category-react","tag-docker-und-postgresql","tag-hibernate","tag-jpa","tag-openapi","tag-orm","tag-panache","tag-patternfly","tag-quarkus","tag-resteasy","tag-swagger","tag-swagger-ui","tag-twrestmindmap-mit-react"],"_links":{"self":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/17738","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17738"}],"version-history":[{"count":0,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/17738\/revisions"}],"wp:attachment":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17738"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=17738"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=17738"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}