Der ArcGIS Web AppBuilder geht in den Ruhestand. Viele Anforderungen lassen sich in der ArcGIS Produktwelt rein konfigurativ erledigen. Wenn es allerdings doch so individuell wird, dass eine Erweiterung durch Eigenentwicklung unerlässlich ist, bietet der ArcGIS Experience Builder eine wunderbare Umgebung zur Erschaffung moderner WebGIS-Anwendungen. In diesem Beitrag erhalten Sie nützliche Informationen über die Widget-Entwicklung für den ArcGIS Experience Builder.
Benutzerdefinierte Widgets per React
Als What-You-See-Is-What-You-Get-Editor (WYSIWYG) richtet sich der ArcGIS Experience Builder (ExB) zunächst an GIS-Experten, die per Konfiguration unter Einbindung von Geodaten aus ArcGIS Online (im Store erhältlich) oder Enterprise Applikationen mit spezifischem Fokus erstellen wollen. Über seine Programmierschnittstelle (API) bietet er jedoch auch eine Möglichkeit tiefgreifende Individualisierungen. In diesem Artikel werden wir einen tieferen Einblick in das ExB Widget Pattern geben, das auf der typsicheren JavaScript-Variante TypeScript, dem bekannten Frontend Framework React basiert sowie dem ExB-eigenen Jimu Framework.
Das Ergebnis der Eigenentwicklung sind Custom Widgets, die über die Konfigurations-Oberfläche des ExB in die App eingebunden werden. Es ist also eine Trennung zwischen entwickelnden und konfigurierenden Personen möglich.
Durch die Implementierung von Widgets als React-Komponenten können Entwickler eine modulare und wartbare Codebasis schaffen. Eine Komponente definiert Benutzeroberfläche und Logik und wird in den DOM-Baum der Webseite eingehängt.
Zentral für die Datenhaltung in React ist der State:
Ändern sich Daten im State, die auf der Oberfläche der Komponente verwendet werden, wird diese automatisch neu gezeichnet. Außerdem lassen sich programmatische Aktionen an solche Datenänderungen anschließen.
Der Widget-Code ist in verschiedene Dateien und Ordner strukturiert: Die Datei manifest.json enthält unveränderliche Metadaten. In der config.json werden Einstellungen angelegt, die später per Konfiguration angepasst werden können. Der Quellcode befindet sich im Ordner src: Jedes Widget hat ein Frontend und viele auch ein Backend, über das die Konfiguration beeinflusst wird.
Mehr Varianten zur Interaktion mit GIS-Daten
Eine der Schlüsselanforderungen für viele Widgets in einer WebGIS-Anwendung ist die Interaktion mit der Karte. Hier liegt auch der zentrale Unterschied zum Web AppBuilder: Während seine Applikationen auf einer einzigen WebMap beruhten, ist im ExB die Einbindung einer oder mehrerer WebMaps sowie Layer oder Tabellen aus GIS-Diensten möglich. Aufgrund dieses dezentralen Aufbaus muss die Verbindung zur Datenquelle aus einem Custom Widget zunächst einmal hergestellt werden:
Verbindung mit Datenquelle im Backend
Für das Widget-Backend stehen eigene React-Komponenten aus dem Jimu Framework bereit, um eine Referenz zur Kartensicht oder Datenquelle zu erhalten, z. B. MapWidgetSelector oder DataSourceSelector. Die Verbindung wird in der Widget-Konfiguration gespeichert.
Interaktion mit Daten im Frontend
Die Referenz auf die Datenquelle wird über den zentralen Datastore des ExB ins Widget-Frontend übergeben. Durch die Verwendung des ArcGIS Maps SDK for JavaScript (JSSDK) können Entwickler dort mit den Daten interagieren, z. B. Grafikebenen zur Karte hinzufügen oder Symbologien anpassen.
Lebenszyklus eines Widgets
Wir unterscheiden klassenbasierte von funktionsbasierten Widgets. Erstere verwenden Lifecycle-Methoden, z. B. um direkt nach der Initialisierung Event Handler einzurichten oder vor Entfernung der Komponente Ressourcen freizugeben. Die zentralste Lifecycle-Methode ist jedoch render(): Sie zeichnet die Benutzeroberfläche des Widgets. Verwendet sie Daten aus dem lokalen State, wird sie nach Datenänderungen automatisch erneut ausgeführt.
In funktionalen Widgets zeichnet eine return-Anweisung die Benutzeroberfläche. Hier tritt auch der zentrale Unterschied zwischen den beiden Typen zutage: Hier gibt es keine render()-Methode, sondern die funktionale Komponente wird bei Datenänderungen komplett neu ausgeführt.
Um Codeteile davon abzukapseln und den Lebenszyklus des Widgets zu steuern, wird ein Standard-Mechanismus von React verwendet: Hooks. Sie zeichnen sich durch den Prefix “use” im Namen aus. Ein Standard-Hook ist “useEffect”, der aus einer Funktionsdefinition und einem Array gebildet wird. Dieses Array enthält eine Liste von Variablen aus dem lokalen State, nach deren Datenänderung der Hook ausgeführt wird. Zum Ausführen von Code direkt nach der Initialisierung eignet sich ein useEffect-Hook mit leerer Abhängigkeitsliste.
Untereinander kommunizieren Widgets über eine Vielzahl von Wegen, die wir in einer weiteren Folge dieses Blogs beleuchten werden.
Technologie-Upgrade und Entwicklungs-Tools
Benutzerdefinierte Widgets im ArcGIS Experience Builder ermöglichen die Erstellung maßgeschneiderter Lösungen, die auch sehr speziellen Anforderungen gerecht werden.
Die Developer Edition des ExB läuft lokal auf der Entwicklungsmaschine basierend auf node.js und bietet damit die komfortable Möglichkeit zur Einbindung von Dritt-Bibliotheken per npm. Als Test-Framework wird Jest mitgeliefert. Markiert man sein Projekt-Repository über eine Angabe in der manifest.json als sogenanntes Web Extension Repo, erhält man trotz paralleler Arbeit an mehreren Projekten eine saubere Code-Trennung.
Mit dem Umstieg vom Web AppBuilder auf den Experience Builder werden veraltete Technologien wie das Dojo Toolkit und die abgekündigte ArcGIS API for JavaScript 3.x verlassen. Dafür bieten zeitgemäße Technologien wie TypeScript und React die ideale Grundlage zur Entwicklung einer robusten Codebasis.
