1. entwickler-workshop - hamburg.de · 2. hands-on: wie entwickelt man ein eigenes modul? gemeinsam...
TRANSCRIPT
![Page 1: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/1.jpg)
1. ENTWICKLER-WORKSHOP ZUM MASTER-PORTAL IN HAMBURG
14.02.2017
![Page 2: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/2.jpg)
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
![Page 3: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/3.jpg)
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
![Page 4: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/4.jpg)
4 ENTWICKLER WORKSHOP MASTERPORTAL
Bibliotheken
▶ Dynamsiche und webbasierte Kartenanwendungen
▶ Raster- und Vektordaten
▶ Controls
▶ Interactions
▶ Parser
Openlayers
![Page 5: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/5.jpg)
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
![Page 6: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/6.jpg)
6 ENTWICKLER WORKSHOP MASTERPORTAL
Bibliotheken
▶ CSS und HTML basierte Gestaltungsvorlagen: ▶ Formulare ▶ Tabellen ▶ Navigation ▶ …
▶ Unterstützt responsive Design
▶ JavaScript Pulgins ▶ Popovers ▶ Alerts ▶ …
Bootstrap
![Page 7: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/7.jpg)
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
![Page 8: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/8.jpg)
8 ENTWICKLER WORKSHOP MASTERPORTAL
Bibliotheken
▶ Großer Werkzeugkasten mit mehr als 100 Funktionen
▶ Operationen auf Objekten und Arrays
▶ JavaScript templating
Underscore.js
![Page 9: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/9.jpg)
9 ENTWICKLER WORKSHOP MASTERPORTAL
Bibliotheken
▶ Require.js
▶ jQuery UI
▶ Moment.js
▶ Backbone.Radio
▶ Bootstrap Plugins (Colorpicker, Bootstrap-Select)
Der Rest
![Page 10: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/10.jpg)
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
![Page 11: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/11.jpg)
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
![Page 12: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/12.jpg)
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
![Page 13: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/13.jpg)
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
![Page 14: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/14.jpg)
14 ENTWICKLER WORKSHOP MASTERPORTAL
Architektur
main.js / app.js
https://bitbucket.org/lgv-g12/lgv/src/ec0e6d9fb169241971e75d976ef00ed74d6fb34b?at=dev
![Page 15: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/15.jpg)
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
![Page 16: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/16.jpg)
16 ENTWICKLER WORKSHOP MASTERPORTAL
Architektur
▶ URLs zu verschiedenen Diensten
▶ Druckdienst, Metadatenquellen, Gazetteer, …
rest-services.json
![Page 17: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/17.jpg)
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
![Page 18: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/18.jpg)
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
![Page 19: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/19.jpg)
19 ENTWICKLER WORKSHOP MASTERPORTAL
Backbone Radio
Radio.Events
Quelle: https://github.com/marionettejs/backbone.radio
![Page 20: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/20.jpg)
20 ENTWICKLER WORKSHOP MASTERPORTAL
Backbone Radio
Radio.Requests
Quelle: https://github.com/marionettejs/backbone.radio
![Page 21: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/21.jpg)
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');
![Page 22: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/22.jpg)
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
![Page 23: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/23.jpg)
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?
![Page 24: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/24.jpg)
24 ENTWICKLER WORKSHOP MASTERPORTAL
Konventionen
▶ Hilft konsistente Codierungsstile zwischen verschiedenen Editoren zu definieren und zu pflegen
editorconfig
![Page 25: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/25.jpg)
25 ENTWICKLER WORKSHOP MASTERPORTAL
Konventionen
▶ Erkennt Fehler und mögliche Probleme im Code
▶ Prüft den Code Style
JSHint / JSCS
![Page 26: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/26.jpg)
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
![Page 27: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/27.jpg)
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
![Page 28: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/28.jpg)
28 ENTWICKLERWORKSHOP 14.02.2016
Zusammenarbeit
▶ Öffentliches Trello-Board • User-Forum • Dev-Forum • Bugs • Feature-Requests • Koordination der Arbeiten
Kommunikation im Projekt
![Page 29: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/29.jpg)
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
![Page 30: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/30.jpg)
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
![Page 31: 1. ENTWICKLER-WORKSHOP - hamburg.de · 2. Hands-on: Wie entwickelt man ein eigenes Modul? Gemeinsam Schritt -für-Schritt zum neuen Modul](https://reader030.vdocuments.mx/reader030/viewer/2022041203/5d4f0b0188c993790d8b75d2/html5/thumbnails/31.jpg)
VIELEN DANK FÜR IHRE AUFMERKSAMKEIT