1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam...

1. ENTWICKLER-WORKSHOP ZUM MASTER-PORTAL IN HAMBURG

14.02.2017

2 ENTWICKLERWORKSHOP 14.02.2016

Tagesordnung

Mittwoch: 1. Allgemeine Einführung in die Technik

1.1. Eingesetzte Bibliotheken 1.2. Codestruktur 1.3. Konfigurationsdateien

2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt-für-Schritt zum neuen Modul 3. Offene Fragen & Probleme: 3.1. Integration und Konfiguration des Druckdienstes 3.2. Integration und Konfiguration von Suchdiensten 3.3. Proxy etc.

Nennung von Bild-/Text-/Datenquellen

3 ENTWICKLERWORKSHOP 14.02.2016

Tagesordnung

Donnerstag: 1. Arbeitsweise: Vorstellung der Arbeitsweise im Projekt beim lgv 1.1. Bitbucket 1.2. Conventions 2. Arbeitsweise: Zusammenarbeit LGV & externe Nutzer 2.1. Erwartungen und Ziele der Zusammenarbeit; mögliche künftige Konstrukte 2.2. Kommunikation 2.3. Issues und Feature-Requests 3. Abstimmung weiteres Vorgehen: 3.1. welche Tools sind gewünscht und stehen an? 3.2. weitere Schritte bei den Partnern 3.3. Abstimmung & Arbeitsverteilung zusätzliche Features

Nennung von Bild-/Text-/Datenquellen

4 ENTWICKLER WORKSHOP MASTERPORTAL

Bibliotheken

▶ Dynamsiche und webbasierte Kartenanwendungen

▶ Raster- und Vektordaten

▶ Controls

▶ Interactions

▶ Parser

Openlayers

5 ENTWICKLER WORKSHOP MASTERPORTAL

Bibliotheken

▶ Führende Bibliothek für Scripting im Browser

▶ Benutzereingaben verarbeiten

▶ Das Dokument verändern

▶ Daten empfangen und senden

▶ Animationen und Effekte

jQuery

6 ENTWICKLER WORKSHOP MASTERPORTAL

Bibliotheken

▶ CSS und HTML basierte Gestaltungsvorlagen: ▶ Formulare ▶ Tabellen ▶ Navigation ▶ …

▶ Unterstützt responsive Design

▶ JavaScript Pulgins ▶ Popovers ▶ Alerts ▶ …

Bootstrap

7 ENTWICKLER WORKSHOP MASTERPORTAL

Bibltiotheken

▶ Hilft JavaScrpit zu strukturieren

▶ Model: Daten empfangen, validieren, verarbeiten und senden

▶ View: Daten mittels Templates rendern, Model beobachten und verändern (Binding)

▶ Collection: Liste von Models

Backbone.js

8 ENTWICKLER WORKSHOP MASTERPORTAL

Bibliotheken

▶ Großer Werkzeugkasten mit mehr als 100 Funktionen

▶ Operationen auf Objekten und Arrays

▶ JavaScript templating

Underscore.js

9 ENTWICKLER WORKSHOP MASTERPORTAL

Bibliotheken

▶ Require.js

▶ jQuery UI

▶ Moment.js

▶ Backbone.Radio

▶ Bootstrap Plugins (Colorpicker, Bootstrap-Select)

Der Rest

10 ENTWICKLER WORKSHOP MASTERPORTAL

Bibliotheken

▶ http://openlayers.org/ ▶ http://jquery.com/ ▶ http://getbootstrap.com/ ▶ http://backbonejs.org/ ▶ http://underscorejs.org/ ▶ http://requirejs.org/ ▶ https://jqueryui.com/ ▶ http://momentjs.com/ ▶ https://github.com/marionettejs/backbone.radio ▶ https://itsjavi.com/bootstrap-colorpicker/ ▶ https://silviomoreto.github.io/bootstrap-select/

Linksammlung

11 ENTWICKLER WORKSHOP MASTERPORTAL

Architektur

index.html config.js

config.json

services.json

Master Portal index.html

config.js config.json

index.html config.js

config.json

rest-services.json

12 ENTWICKLER WORKSHOP MASTERPORTAL

Architektur

▶ Enthält die gesamte Konfiguration der Portal-Oberfläche. In ihr wird geregelt

welche Elemente wo in der Menüleiste sind, worauf die Karte zentriert werden soll und welche Layer geladen werden sollen.

▶ Beispiel: https://bitbucket.org/lgv-g12/lgv/src/stable/portal/master/config.json?fileviewer=file-view-default

▶ Dokumentation: https://bitbucket.org/lgv-g12/lgv/wiki/config.json

Konfiguration config.json

13 ENTWICKLER WORKSHOP MASTERPORTAL

Architektur

▶ Enthält die Konfigurationsoptionen für das Masterportal, die sich nicht auf die

Portal-Oberfläche oder die dargestellten Layer beziehen, z.B. Pfade zu weiteren Konfigurationsdateien.

▶ Beispiel: https://bitbucket.org/lgv-g12/lgv/src/stable/portal/master/config.js?fileviewer=file-view-default

▶ Dokumentation: https://bitbucket.org/lgv-g12/lgv/wiki/config.js

Konfiguration config.js

14 ENTWICKLER WORKSHOP MASTERPORTAL

Architektur

main.js / app.js

https://bitbucket.org/lgv-g12/lgv/src/ec0e6d9fb169241971e75d976ef00ed74d6fb34b?at=dev

15 ENTWICKLER WORKSHOP MASTERPORTAL

Architektur

services.json

DB

HMDK CSW

FME

WMS / WFS Capabilities

Web-Oberfläche u.a. Zuordnung Layer

zu Datensätzen

services.json

16 ENTWICKLER WORKSHOP MASTERPORTAL

Architektur

▶ URLs zu verschiedenen Diensten

▶ Druckdienst, Metadatenquellen, Gazetteer, …

rest-services.json

17 ENTWICKLER WORKSHOP MASTERPORTAL

Backbone Radio

▶ Kommunikation und Austausch von Informationen zwischen nicht in Beziehung stehenden Modulen

Global Message Bus System

Modul

Modul Modul

Message Bus

Modul

18 ENTWICKLER WORKSHOP MASTERPORTAL

Backbone Radio

▶ Events – Werden verwendet um andere Module zu alarmieren, dass etwas

passiert

▶ Requests – Bietet die Möglichkeit Informationen von anderen nicht verwandten Modulen anzufordern.

▶ Channel – Ein Namespace-Mechanismus der beide Eigenschaften umfasst

Eigenschaften

19 ENTWICKLER WORKSHOP MASTERPORTAL

Backbone Radio

Radio.Events

Quelle: https://github.com/marionettejs/backbone.radio

20 ENTWICKLER WORKSHOP MASTERPORTAL

Backbone Radio

Radio.Requests

Quelle: https://github.com/marionettejs/backbone.radio

21 ENTWICKLER WORKSHOP MASTERPORTAL

Backbone Radio

▶ Bietet einen sauberen Punkt für die Aufteilung globaler Ereignisse

▶ Es können beliebig viele Channel angelegt werden

Backbone.Radio.Channel

var userChannel = Backbone.Radio.channel('User'); var mapChannel = Backbone.Radio.channel('Map'); var printChannel = Backbone.Radio.channel('Print');

22 ENTWICKLER WORKSHOP MASTERPORTAL

Backbone Radio

Backbone.Radio.Channel

▶ Ist überall in Ihrer Anwendung zugänglich.

userChannel.on('some:event', function() { console.log('An event has happened!'); }); userChannel.reply('some:request', 'food is good');

userChannel.trigger('some:event'); userChannel.request('some:request');

Backbone.Radio.trigger('User', 'some:event'); Backbone.Radio.request('User', 'some:event');

▶ Ein Objekt, das Events und Requests vereint

23 ENTWICKLER WORKSHOP MASTERPORTAL

Konventionen

▶ Jeder schreibt Code anders

▶ Erhöhte Wartbarkeit

▶ Schnelleres und einfacheres Verständnis vom Code Anderer

▶ Verbesserte Lesbarkeit

Unsere Konventionen

Warum Konventionen?

24 ENTWICKLER WORKSHOP MASTERPORTAL

Konventionen

▶ Hilft konsistente Codierungsstile zwischen verschiedenen Editoren zu definieren und zu pflegen

editorconfig

25 ENTWICKLER WORKSHOP MASTERPORTAL

Konventionen

▶ Erkennt Fehler und mögliche Probleme im Code

▶ Prüft den Code Style

JSHint / JSCS

26 ENTWICKLERWORKSHOP 14.02.2016

- Build-Config: Konfiguration für die lokale Entwicklungsumgebung

- Proxies - Tasks zum build-Prozess, css-Prozessing, Changelog-Erstellung, Aufsetzen des

lokalen dev-servers etc. Wird nur lokal zum Entwickeln benutzt

- LGV-Config: Zentrale Konfigurationen und Inhalte, die von allen Portalen genutzt werden

- Layer: WMS, WFS, - Rest-Services: Druckdienst, Adressdienst etc. - WFS-Styles & Symbole (png, etc.), Icons - Fonts und Glyphs Wird lokal zum Entwickeln benutzt, aber auch täglich zwischen allen produktiven Servern und Bitbucket synchronisiert.

Bitbucket

Nennung von Bild-/Text-/Datenquellen

27 ENTWICKLERWORKSHOP 14.02.2016

Zusammenarbeit

▶ Das Masterportal als OpenSource Projekt • Nachnutzung fördern / ermöglichen • Rückfluss von Entwicklungen / BugFixes ins Projekt

▶ Aufbauphase • Erfahrungen sammeln • Evaluation Ende des Jahres

Erwartungen und Ziele der Zusammenarbeit

28 ENTWICKLERWORKSHOP 14.02.2016

Zusammenarbeit

▶ Öffentliches Trello-Board • User-Forum • Dev-Forum • Bugs • Feature-Requests • Koordination der Arbeiten

Kommunikation im Projekt

29 ENTWICKLERWORKSHOP 14.02.2016

Zusammenarbeit

▶ Forks • über Bitbucket anlegen • entwickeln • Regelmäßig mit lgv-g12/lgv/dev synchronisieren

▶ Pull-Requests stellen • nach lgv-g12/lgv/dev • Voraussetzungen:

− Code OK: linter laufen durch, conventions eingehalten − Tests/Testanleitung erweitert − Dokumentation erweitert − in gebauter Version getestet (cross-browser: Chrome, FF, IE, mobil im

Browser emuliert)

Git & Bitbucket

30 ENTWICKLERWORKSHOP 14.02.2016

Zusammenarbeit

▶ LGV bietet Support (Mail/Telefon) und Entwicklung für das OpenSource Projekt an

▶ Kontingent

▶ Abrechnung nach tatsächlichem Aufwand

Support und Entwicklung

VIELEN DANK FÜR IHRE AUFMERKSAMKEIT