1. entwickler-workshop - hamburg.de · 2. hands-on: wie entwickelt man ein eigenes modul? gemeinsam...
TRANSCRIPT
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