Powerpoint - implementierung Flashcards
implementierung - Einleitung/Architektur
https://ibb.co/JnwfNjc
REpresentational State Transfer - django REST framework
- Zustandslose Kommunikation
- Mögliches Caching von Informationen
- Standardisierte, nicht anwendungsspezifische Schnittstelle
REST-API – Mögliche Abfragen
- Anfrage an spezifische URL (enthält alle notwendigen Parameter) (+ Headers)
- Rückgabe einer JSON-Datei mit Daten gemäß Schnittstellendefinition
- Statuscode
GET-Request
- Keine Daten, nur Abfrage an URL
- Sinnvoll für das Softwareprojekt
POST/PATCH/DELETE-Requests
- Daten hochladen als Payload zur Anlage neueroder Veränderung bestehender Datensätze
- Daten löschen
https://ibb.co/SQd7GPc
GUI-Mockup
- Grobe Skizze der zu entwickelnden Seite
- Anordnung der verschiedenen Elemente
- > Design steht zunächst im Hintergrund
- Planung für Interaktionsmöglichkeiten und Funktionen der Website
- > Wo soll welcher Button sein?
- > Wie kann die Website benutzerfreundlich gestaltet werden?
- Soll das Grundkonzept der Seite früh vermitteln und vorstellbar machen.
- Verschiedene Mockup-Tools: Balsamiq Mockups, Moqups, Mockingbird, (Paint), …
- https://app.moqups.com/nsIPxHQJ8S/view
https: //ibb.co/5jtZrpT
https: //ibb.co/NnJzCD0
https: //ibb.co/F4BcsMt
ES Projekt-Template
- Projektvorlage mit Ordnern und Dateien
- Ermöglicht Versionskontrolle mit Git
- Paketmanagementsystem zum installieren von Tools und weiteren Bibliotheken
- Lokal ausführbaren Entwicklungsserver
- Automatisierte Prüfung des Quellcodes (Linter)
- Minimal vorkonfigurierte Continous-Integration Umgebung
- Buildsystem
- > Modularer Quellcode optimierter Quellcode für Endanwender
ES Projekt-Template Befehle
Assets/
-Statische Inhalte, welche beim Erzeugen der Anwendung nicht weiterverarbeitet werden müssen
Src/
-Enthält eigentlichen Quellcodes des Projektes
Programmbestandteile in JavaScript Module gegliedert
.browserlistrc
-Defintion der Zielplattform, für welche Anwendung optimiert werden soll
.editorsconfig
-Konfigurationsdatei im INI Format
Einhaltung von gemeinsamen Programmierstil (Einrücken, Zeichensatz etc.)
.eslintignore
-Programmteile, welche für den Linter ausgenommen werden
.eslintrc.json
-Konfigutationsdatei als Json für Linter Tool (ESlint)
.gitignore
-Programmteile welche für Git ausgenommen werden
.gitlab-ci.yml
-Definiert Laufzeitumgebung und die durchzuführenden Schritte für Continous Integration
CONTRIBUTERS.md
-Listet an der Entwicklung beteiligten Personen
GUIDE.md
-Guide für Inhalte des Templates
Package.json
-Konfigurationsdatei für die Abhängigkeit von Node.js zu anderen Bibliotheken
ES Projekt-Template
Webpackage.config.js
- „Statischen Module Bundler“
- Tool zum sammeln von Daten, sowie verarbeiten ausgeben in gebündelter Form
- Konfiguration dynamisch mit JavaScript
- Schritte:
- Temporärer Ordner dist/
- Kopieren statischer Assets
- Sammeln aller importierten JavaScript Module
- Übersetzen des ES6-Code auf Version des Zielbrowsers (transpilieren)
- Verpacken des Quellcodes in bundle.js
- Start des Entwicklungsservers
- Bundle durch index.html referenziert
Node.js
- Bereitstellung von Tools zur Implementierung von Webservern
- Erlaubt die Anwendung von JavaScript auf der Client- und Serverseite
- Verwendung von fertigen JavaScript Modulen
- Erhöht Performance, verringert Nutzung des Arbeitsspeichers
- Ausführen der Tools über den Node Package Manager (Kommando: npm …)
Beispiel-Module:
*http-Module mit Klassen für ClientRequest, ServerResponse, …
*ECMA-Script Module
*Template nutzt z.B. Webpack (sammelt, verarbeitet Daten und gibt sie gebündelt aus)
Installation:
*Im Labor GI bereits installiert
*auf eigenem Rechner Installation noch notwendig
*Version 8.12 oder höher
OpenLayers
- freie, Open Source JavaScript-Bibliothek
- einfache Einbettung von dynamischen Karten aus einer Vielzahl von Quellen in jede beliebige Website
- Projekt von OSGeo (Open Source Geospatial Foundation)
- 2-Klausel-BSD Lizenz (FreeBSD)
- kann vom Nutzer genutzt und verändert werden, solange Urheberrechtsvermerk enthalten ist
Karten-Ebenen:
- Raster: WMS/WMTS, OpenStreetMap, Bing, statische Bilder, usw.
- Vektor: WFS, KML, GeoJSON, GPX, GML, …
- Heatmaps
Bedienelemente:
-Übersichtskarte, Schieberegler zum Zoomen, Zoom +/- Buttons, Maßstabsleiste, Rotation usw.
Interaktionen:
-Verschieben, Zoom und Rotation, Objektauswahl, Editieren usw.
Karten-Ebenen:
- Raster: WMS/WMTS, OpenStreetMap, Bing, statische Bilder, usw.
- Vektor: WFS, KML, GeoJSON, GPX, GML, …
- Heatmaps
Bedienelemente:
-Übersichtskarte, Schieberegler zum Zoomen, Zoom +/- Buttons, Maßstabsleiste, Rotation usw.
Interaktionen:
-Verschieben, Zoom und Rotation, Objektauswahl, Editieren usw.
Styling und Anpassungen:
- Leistungsstarkes Styling von Objekten: → Punkte, Linien, Polygone sowie Icons
- Anpassung Bedienelemente via CSS3
Weiteres:
- Einfache Anpassung und Erweiterung von Bedienelementen, Interaktionen, Funktionen usw.
- Unterstützung Mobile Browser
- Anpassung Raster (Projektion, Farbton/Farbsättigung, …)
- Schlanke Bibliothek → enthält nur Komponenten, die gebraucht werden
https://ibb.co/jTFmMPj
Bootstrap
- Freies Frontend-CSS-Framework
- Dient der Darstellung von grundlegenden Elementen
- Lizenzen
- MIT
- CC BY 3.0
- Vorteile:
- Plattformunabhängig
- Einfach zu bedienen
- Mobile First Ansatz
- Browserkompatibilität
- Komponenten
- Glyphicons
- Buttons
- Navigationsleisten
- Seitennummerierung
- Tabellen
- Typographie
- Formulare
- Gridsysteme
https://ibb.co/k25JRR7
Git - Allgemeines
- Versionsverwaltungssystem
- Ermöglicht gemeinsames Arbeiten mehrerer Personen an einem Projekt
- Änderungen können gespeichert und protokolliert werden
- > Zugreifen auf ältere Projektstände zu einem späteren Zeitpunkt
Git – Aufbau und wichtige Kommandos
https://ibb.co/8MJ31Mz
GitLab
- Webanwendung auf Basis von Git
- Kostenloses Hosting von privaten und öffentlichen Repositories
- Alternative zu ähnlichen Angeboten wie GitHub etc.
- https://kis5.geoinformation.htw-dresden.de/gitlab/users/sign_in
