We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

GeoNetwork UI: Eine andere Sicht auf die (Meta-)Daten

00:00

Formal Metadata

Title
GeoNetwork UI: Eine andere Sicht auf die (Meta-)Daten
Title of Series
Number of Parts
88
Author
License
CC Attribution 4.0 International:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Identifiers
Publisher
Release Date
Language

Content Metadata

Subject Area
Genre
Abstract
GeoNetwork bildet seit vielen Jahren als Metadatenkatalog eine grundlegende Komponente in zahlreichen Geodateninfrastrukturen. Um die Weiterentwicklung einer Benutzeroberfläche mit modernen JavaScript-Features zu ermöglichen wurde 2020 das Projekt GeoNetwork UI ins Leben gerufen. Dieser Vortrag präsentiert den Ansatz und die aktuellen Entwicklungen des Projekts.
Keywords
MetadataMusical ensembleMeeting/Interview
Open sourceSpatial data infrastructureServer (computing)SoftwareInternetdienstAPIUser interfaceEditorLuceneCode refactoringPerimeterPriorityCross-site scriptingCodeComponent-based software engineeringACCESS <Programm>Scripting languageHTMLMobile appEnterprise resource planningCodeLösung <Mathematik>User interfaceKommunikationWrapper (data mining)System administratorTemplate (C++)PerimeterWEBDatenformatMetadataCode refactoringScripting languageEnde <Graphentheorie>Open sourceConfiguration spaceIntegrated development environmentSequenceRoute of administrationForm (programming)Software repositoryStress (mechanics)Attribute grammarFocus (optics)Search engine (computing)Version <Informatik>DatabaseSoftware testingComputer animation
UploadingMetadataServer (computing)Network-attached storageProvidermakeComa BerenicesDownloadAPIUser interfaceVersion <Informatik>KommunikationProxy serverCross-site scriptingComputer programInternetdienstETS <Programm>IndexRouter (computing)Trigonometric functionsCodeRAMMoment (mathematics)TOUR <Programm>HTTPFirefox <Programm>Digital object identifierMetadataServer (computing)Enterprise architectureInformationDemosceneZugriffSpoke-hub distribution paradigmSocial classParameter (computer programming)Mobile appFile formatAPIDownloadScale (map)KommunikationInstanz <Informatik>Library catalogCoordinate systemWeb pageConfiguration spaceService (economics)Communications protocolDefault (computer science)Row (database)GeodesicUniform resource locatorComputer animation
Trigonometric functionsEditorCodeSpoke-hub distribution paradigmCodeMoment (mathematics)Physical quantityComponent-based software engineeringWeb portalPoint cloudOpen sourceIntegrated development environmentComputer animationMeeting/Interview
MARKUS <Unternehmensspiel>
Transcript: German(auto-generated)
Hallo und herzlich willkommen zur Bühne 3 und der Nachmittags-Session auf der Foskis-Konferenz 2022. Vor uns liegen drei wirklich spannende Vorträge.
Zwei haben wir schon auf Band aufgenommen, die werden gleich eingespielt und einen Vortrag werden wir auch live hören. Wir beginnen mit dem Vortrag Geo Network UI, eine andere Sicht auf die Metadaten von Tobias Kohr und Olivier Güillot von Camp2Camp.
Herzlich willkommen und an die Regie Mats Abt, bitte. Hallo und herzlich willkommen zur Präsentation von Geo Network UI, eine andere Sicht auf die Metadaten. Mein Name ist Tobias Kohr, ich bin Frontend Entwickler bei Camp2Camp. Wir sitzen in der Schweiz, in Frankreich und in Deutschland seit 2018, in München.
Im Geospatial-Department beteiligen wir uns aktiv an vielen Fos4G-Projekten. Unsere GDI-Lösungen, Geoarchister und GeoMapfish setzen auf diesen Projekten auf. Gleichzeitig machen wir auch viele Entwicklungen à la carte, wenn die Anwendungsfelder spezifischer sind, dass diese Lösungen sie nicht abdecken.
Camp2Camp besteht außerdem aus einem Business Management Software-Department, das mit dem Udo Open Source Software als ERP-System arbeitet und dem Infrastructure-Department, welches sich um die IT-Infrastructure kümmert.
Heute geht es um Geo Network UI, ich werde nicht allzu viel über Geo Network sprechen, Geo Network ist hier wahrscheinlich auf vielen Leuten bereits ein Begriff als Open Source Projekt und OGC-Katalogdienst. Geo Network hat ein sehr mächtiges Backend mit seiner REST-API, dem Suchindex auf Elasticsearch basierend,
den Schematast, die es erlauben, Metadaten in jeglichen Formen zu harvesten und den Backend in der Datenbank abzuspeichern. Die Benutzeroberfläche von Geo Network ist in den letzten Jahren sehr komplex geworden,
mit der Suche und Karte auf der Benutzerseite und der Administrationsoberfläche auf der Administrationseite. Das Ganze sieht so ungefähr aus, es gibt für den Nutzer die Suchmaske und den Karten-Viewer, wahrscheinlich vielen Leuten hier auch schon bekannt,
der Metadaten-Editor, um die Metadaten zu verändern und die Administrationsoberfläche für die Administratoren. Im letzten Major-Release, Geo Network 4, wurden am Backend sehr große Änderungen vorgenommen, es wurde Lucin durch Elasticsearch als Search Engine abgelöst.
Am Frontend hingegen wurden keine so umfangreichen Änderungen vorgenommen und auch kein großes Refactoring vorgenommen. So basiert technisch das Frontend nach wie vor auf AngularJS.
Das Frontend wird im Java-Backend zusammengebundelt und befindet sich im gleichen Code-Repository. In den letzten Jahren hat sich die Entwicklung im modernen JavaScript-Bürger-System als immer schwieriger herausgestellt.
Spätestens seit letztem Sommer, als AngularJS End of Life der Support abgelaufen ist, hat sich die Frage nach einer Migration immer lauter gestellt. Migration würde in diesem Fall aber einem Rewrite gleichkommen bei so
einer großen Anwendung wie Geo Network, einem enorm zeitlichen und finanziellen Umfang. Andere Schwierigkeiten sind für Frontend-Entwickler manchmal auch das komplexe Java-Build-System und die Personalisierung und Gaming-Optionen im Frontend sind in gewisser Weise auch bekannt.
So ist vor zwei Jahren die Idee von Geo Network UI entstanden, die Neuentwicklung einer UI parallel zur existierenden Benutzeroberfläche. Das Ziel war hier nicht, den kompletten Funktionsumfang komplett zu migrieren, sondern vielmehr die bestehende UI zu ergänzen.
Der Fokus wurde hier auf den Nutzer gelegt, da hier eine erweiterte oder eine Alternative sicherlich dringender war als für die Administrateroberfläche. Ziel von Geo Network UI ist die Weiterentwicklung und Pflege zu erleichtern.
Mit der Idee, dass Neuentwicklung hauptsächlich in Geo Network UI einfließen, was die Benutzeroberfläche betrifft und die Pflege dadurch in Geo Network an der Oberfläche gemindert wird oder der Pflegeaufwand.
Weitere Möglichkeiten und Motivationen im Zuge von Geo Network UI waren sicherlich auch ein Schwerpunkt auf eine gute Performance zu legen, die Personalisierungsmöglichkeiten zu erweitern und auch die Integration in andere Apps mittels Web Components zu ermöglichen.
Die technische Basis heute von Geo Network UI ist Angular, also nicht mehr AngularJS, sondern das neue Framework, was mittlerweile in der Version 13 ist. Angular mit dem Wrapper NX als CSS-Framework wird Tailwind CSS verwendet, als kartografische
Bibliothek OpenLayers und als zur Entwicklung und visuellen Tests von Präsentationskomponenten ist auch Storybook eingebunden.
Geo Network UI schöpft mehrere Konzepte aus. Eins sind sicherlich die sogenannten Monorepositories, die Idee, dass ein Repository für verschiedene Apps fungiert und der gleiche Code als Basis dient.
Dabei wird der Code in Apps und Libraries getrennt und innerhalb der Libraries wiederum in Smart- und Präsentationskomponenten, aber dazu gleich etwas mehr. State Management und seine Macht werden mit RxJS ausgeschöpft, sodass die Code-Organisation im Prinzip so aussieht.
Die Smart-Komponenten bedienen sich an den Libraries, die sich in Libraries wiederfinden, und die Apps bedienen sich an den Libraries.
Da gibt es zum einen die Mini-Apps in Form von Web-Komponenten, aber auch ganz komplette Anwendungen. Die Smart-Komponenten sind dabei für die Datenabfrage und Aufbereitung zuständig. Sie werden von einem zentralen Store gefüttert und geben die aufbereiteten Daten an sogenannte Damm- oder Präsentationskomponenten weiter, die für die Anzeige zuständig sind.
Im Code sieht das Ganze dann so aus. Hier haben wir ein Beispiel von einem Smart-Komponent, der zum Beispiel die Download-Links eines Metadateneintrags aufbereitet.
Er filtert sie in verschiedene Kategorien, fragt im Hintergrund noch die BFSA ab, welche Datenformate sie anbieten, und gibt das Ganze dann weiter an seinen Präsentationskomponenten. Das eigentliche Präsentationstemplate von Smart-Komponenten ist sehr klein. Hier wird der Präsentationskomponent eingebunden, und dieser
sieht dann wie folgt aus. Er hat eine kleine minimale Logik selbst, so gut wie nichts. Dafür aber ein ausführlicheres Template mit mehr Styling, was die Darstellung der Daten gewährleistet.
Die Präsentationskomponenten werden in GeoNetwork UI in den UI-Libraries sich wiederfinden, die Smart-Komponenten in den Feature-Libraries. Zusätzlich gibt es noch zwei generierte Libraries für die Kommunikation mit den
Backends, mit dem GeoNetwork-Backend und dem Data-Feedbackend. Dazu gleich noch mehr. Und verschiedene Utility-Libraries für die Übersetzungen, um die Konfiguration zu laden oder auch Daten zu laden. Die Mini-Apps sind auf ganz bestimmte Anwendungsfälle ausgerichtet. Sie bedienen sich dabei in den Smart-Komponenten, sind sehr einfach einzubetten.
Das ist im Prinzip ein HTML-Element, was über seine Attribute die App konfiguriert.
Zusätzlich wird nur das gebildete Script eingebunden werden, sowie das CSS-Style-Sheet, und somit bekommt man einen Komponenten, der in jegliche Anwendung eingebunden werden kann.
Die kompletten Anwendungen von GeoNetwork UI bedienen sich an den gleichen Smart-Komponenten wie die Mini-Apps. Die bisher bestehenden Anwendungen sind der Data-Feeder und der Data-App, die ich in Folgen kurz vorstellen möchte.
Der Data-Feeder ist ein Wizard für den Geodaten-Upload mit dem Ziel einer einfachen Datenpublikation. Im Hintergrund werden dabei OGC-Dienste im Geo-Server erstellt und deren Metadaten in GeoNetwork veröffentlicht.
Das Ganze sieht so aus. Man landet auf der Startseite des Data-Feeders. Hier muss man nur einen Geodatensatz auswählen und bestätigen, dass man die Rechte hat, diesen zu publizieren.
Im nächsten Schritt wird ein Nutzer gebeten, das Koordinatensystem zu bestätigen. Das Encoding wird einem ein Extrakt aus dem Datensatz vorgezeigt, um zu entscheiden, ob das Ganze Sinn macht.
Anschließend muss man einen Titel und eine Beschreibung für den Datensatz angeben. Man kann Keywords vergeben, die von einem Thesaurus kommen, hier von einem Zwei-Thesaurus über GeoNetwork.
Es wird gefragt, von wann die Daten sind und für welchen Maßstab sie erfasst wurden. Und der Erfassungsprozess kann noch beschrieben werden. Und ein Klick weiter und diese Daten finden sich im Geo-Server und werden in GeoNetwork auffindbar gemacht.
Die zweite Anwendung, die in GeoNetwork UI entwickelt worden ist, ist der Data Hub. Ein Open-Data-Portal mit dem Ziel, eine einfache Nutzer-Oberfläche zu bieten, Vorschauer für Geo- und Nicht-Geodaten zu ermöglichen.
Der Data Hub ist ein Entwurf einer UX-Designerin, was meiner Meinung nach als Ergebnis eine moderne, scrollzentrierte Benutzer-Oberfläche ist.
Sie gliedert sich in zwei Seiten. Es gibt die zentrale Suchseite, sehr einfach gehalten, und die Seite eines Mittadateneintrags, dieser gliedert sich in allgemeine Informationen, in die Vorschau in Form von Karte und Tabelle,
in Download-Links, weitere Links, API-URLs und Warranteeinteile. Der Data Hub richtet sich ganz eindeutig an Open-Data. Hier schöpft er die Möglichkeit von GeoNetwork aus,
dass GeoNetwork diese Kataloge ernten kann und die Open-Data-Metadaten speichern kann. Der Data Hub übernimmt die einfache Darstellung dieser Metadaten und ermöglicht die Vorschau von Geodaten, aber auch von nicht raumbezogenen Daten.
Wir nutzen im Data Hub GeoNetwork als Backend. Das passiert mittels Mappings. Diese Mappings sind im Prinzip beliebig erweiterbar, sodass es ebenfalls denkbar wäre, den Data Hub an einem anderen Katalogdienst als Backend anzuschließen. Die Kommunikation mit den OGC-Diensten, die notwendig ist,
wenn wir zum Beispiel die Get-Capabilities anfragen müssen, passiert mit einer leichtgewichtigen JavaScript-Library namens OGC-Kind. deren Ziel ist es, eine robuste Kommunikation zu gewährleisten, unabhängig von den verwendeten OGC-Dienstversionen.
Die Personalisierung im Data Hub sieht heute so aus, dass es eine Konfigurationsdatei gibt. Hier wird die Katalog-API angegeben, an dem sich der Data Hub bedienen soll. Es kann eine Proxy-URL angegeben werden.
Es können CSS-Werte überschrieben werden, um Farben und Fonds anzupassen. Das Gleiche auch mit dem Text in der UI. In dem Fall wird das Übersetzungssystem überschrieben. Zum Theming vielleicht noch die Bemerkung, dass wir auf Tailwind CSS gesetzt haben.
Weil Tailwind erlaubt, seine Klassen in der Konfiguration mittels CSS-Variablen zu definieren, was wiederum ermöglicht, diese in der Konfiguration zu personalisieren. Und als letzter Punkt bezüglich der Personalisierung sicherlich auch,
oder das mächtigste Werkzeug, ist das Ziel der Architektur von GeoNetwork UI, dass vor allem eine entwicklungsbasierte Anpassung sehr einfach sein soll, in dem verschiedene Bausteine wiederverwendet werden können, man sich bei der Entwicklung einer App an den Libraries bedienen kann
und fertige Smart Components und Koordinationskombonenten zur Verfügung stehen. Herausforderungen bei der Entwicklung vom Data Hub gab es verschiedene. Eine war sicherlich, oder ist sicherlich nach wie vor,
die Erkennung und Kategorisierung der Datenformate, in welchen Protokollen Daten angeboten werden, was in der Open-Data-Welt auch nicht immer die gleichen sind wie in der OJC-Welt, oder beziehungsweise überhaupt nicht die gleichen, sondern dass man diese beiden Welten so verknüpft, dass es Sinn macht.
Und zum anderen auch die Tatsache, dass die Daten eben nicht unsere Daten sind, wie es in einem Katalog nicht ebenso ist, sondern dass sie von irgendwo kommen können und im Prinzip immer etwas schiefgehen kann, das zu handhaben.
Eine kurze Demo vom Data Hub. Hier sehen wir die Startseite von der Instanz von Eau de France, der Region in Nordfrankreich. Man landet auf einer Suchmaske. Per Default werden erstmal alle Ergebnisse in einem Infinite Scroll präsentiert.
Wenn man in diesen Ergebnissen jetzt etwas genauer suchen möchte, werden einem Vorschläge gemacht. Ein Metadateneintrag kann man direkt drauf kommen.
Ein Metadateneintrag gliedert sich in die vier Bereiche Allgemeines, Vorschau, Zugriff und Links. Im Allgemeinen ist die Beschreibung des Metadatensatzes,
die Keywords, weitere Informationen über die Metadaten, sowie die Nutzungsbedingungen und der Kontaktpunkt. Wenn wir runter zur Vorschau gehen, haben wir die Vorschau in Form einer Karte.
In diesem Fall haben wir drei Layer von einem WMS. Die gleichen Layer werden auch als WFS angeboten. Wir können die Dienste abfragen, die Feature-Info oder direkt die Informationen aus den Vector-Features bekommen.
Neben der Kartenvorschau gibt es die Kawellenvorschau. Die ist verfügbar sowohl für die Geodaten als auch für die nicht hauenbezogenen Daten.
Es gibt auch verschiedene Quellen dahinter. Unterhalb der Vorschau finden sich die Download-Links wieder. Da gibt es sowohl die statischen Dateien, die auf einem Server liegen,
als auch die Webdienste, die verschiedene Formate anbieten. Die werden im Hintergrund abgefragt, welche Formate verfügbar sind. Entsprechend kann man die Daten herunterladen. Unter den Download-Links gibt es weitere Links, wie Webseiten oder andere Links.
Die URLs zu den APIs finden sich hier wieder. Die URL wird in die Zwischenablage gelegt,
was im Sinne einer API meistens mehr Sinn macht, als eine API zu öffnen, die ohne Parameter nur eine Federmeldung gibt, sodass man das jetzt zum Beispiel in Google oder in ein anderes Programm kopieren kann. Zu guter Letzt noch die verwandten Metadateneinträge. Diese ermöglichen, weiter im Data Hub zu navigieren auf andere Metadatensätze.
Kleiner Ausblick auf 2022 für dieses Jahr. Wir haben bereits wieder begonnen, Weiterentwicklung am Data Hub zu machen,
an der UI-Suche, Navigation und Personalisierung. Parallel ist auch der Gedanke entstanden, einen Metadaten-Editor innerhalb von GeoNetworkUI zu entwickeln. Dafür laufen gerade die Vorbereitungen, um ein Crowdfunding zu organisieren.
Wenn da irgendwo Interesse besteht, sind wir natürlich immer ganz oah. Zu guter Letzt will ich euch natürlich alle herzlich einladen, bei GitHub vorbei zu gucken. Hier findet ihr den Code, die Dokumentation,
und wir freuen uns immer um jedes Feedback, jede Beteiligung. Vielen Dank somit für eure Aufmerksamkeit und natürlich auch für die Auftraggeber,
die die Weiterentwicklung am Projekt im letzten Jahr ermöglicht haben. Vielen Dank an Tobias Kohr und Olivier Guillot für den tollen Vortrag zur GeoNetworkUI. Tobias und Olivier stehen jetzt live für Fragen und Antworten zur Verfügung.
Über die Chatfunktion sind ja einige Fragen reingekommen. Wir gucken uns die mal an. Die erste Frage an euch, Tobias und Olivier, ist, wie groß ist die Entwickler-Community für GeoNetworkUI? Ja, also zu der Frage muss man im Moment noch beantworten,
dass das Projekt sicherlich noch in seinen Anfangsschuhen steckt. Also bislang arbeiten wir da jetzt zum größten Teil dran. Was allerdings schon zur zweiten Frage vielleicht überleitet, also alles ist open source und das Geschäftsmodell ist support.
Im Prinzip ist das das Geschäftsmodell, das hinter GeoNetworkUI steht.
Allerdings muss man denke ich auch mit betrachten, dass hinter GeoNetwork selbst eine recht große Community steht. Sicherlich drei Firmen, die da sich sehr stark beteiligen. Mit acht bis zehn Entwicklern.
GeoNetworkUI eigentlich schon eine Idee ist, für das Frontend von GeoNetwork langfristig zu werden. Oder ist immer mehr zu erst mal als Alternative zu ersetzen, aber ist dann vielleicht auch irgendwann ablösen zu können. Und ja, also ich denke, da besteht das Potenzial,
dass sich da die Community noch vergrößert. Ja, vielen Dank. Du hattest ja jetzt auch schon die zweite Frage beantwortet, ob das alles open source ist und wie das Geschäftsmodell dahinter aussieht. Die Frage ist denke ich mir auch beantwortet.
Vielen Dank. Es ist noch eine weitere Frage reingekommen. Ist der Data Hub eine Cloud Anwendung oder ein Open Source Projekt? Nein, also es ist ein Open Source Projekt. Es ist Teil von GeoNetworkUI. Es ist eine dieser sogenannten Apps in GeoNetworkUI. Also GeoNetworkUI stellt sich aus diversen Libraries zusammen,
wie ich eben im Vortrag kurz vorgestellt habe. Die sich aus sogenannten Smart- und Dump Commands zusammensetzen. Und dieser Data Hub ist aus diesen Komponenten zusammengebaut. Also es gibt da noch quasi eine Schicht, die oben aufsetzt, um diese Komponenten einzubinden.
Aber der Data Hub ist Teil des GeoNetworkUI Projektes. Okay, ja, vielen Dank. Ich denke mir eine Frage haben wir noch. Mit der Bitte vielleicht um eine kurze Antwort. Was sind denn so die Herausforderungen bei der Entwicklung
von einem ja sehr modular aufgebauten Projekt, was ihr jetzt mit GeoNetworkUI angegangen seid, im Vergleich mit Mini-Apps, und ihr wollt es für Web-Components entwickeln, im Vergleich zu der alten Oberfläche. Was sind so die Schlagworte, der große Unterschied in der Entwicklung?
Worauf muss man da achten? Also ich glaube, dieser Ansatz hat schon sehr viel Potenzial von der Wiederverwendbarkeit her, dass man den gleichen Code quasi in ganz einfachen Apps verwenden kann, aber auch bei sehr ausführlichen Portalen. Was man immer im Hintergrund im Kopf haben muss,
ist schon, dass der Code halt nicht nur an einer Stelle verwendet wird, sondern wenn man dann Änderungen vornimmt, muss man sich schon bewusst sein, wo diese Sachen ungefähr genutzt werden. Nicht, dass man dann etwas zu speziell auf einen Anwendungsfall versucht zu programmieren,
was aber eigentlich sehr allgemein gedacht ist und was woanders nochmal in einem anderen Kontext genutzt wird. Ja, das stelle ich mir sehr herausfordernd vor. Dann vielen Dank nochmal an Tobias Kohr und Olivier Guillot von Camp2Camp für den ganz tollen Vortrag und auch nochmal vielen Dank dafür, dass ihr die Fragen beantwortet habt.