Schritt für Schritt Anleitung zu Exercise 1 und 2

[ahocevar]

@tuwien-geoweb-2015/students Nachdem am Donnerstag nicht genug Zeit blieb, um die Aufgabenstellung genauer zu erklären, gebe ich euch hier eine Anleitung, die euch Schritt für Schritt durch die Exercise 1 und 2 führen sollte.

Use spatialite-gui to add a "geom" Point column to the feedback table

Damit ist gemeint, dass ihr eure Datenbank aus Block 2, welche eine Tabelle namens feedback enthalten sollte, zu einer SpatiaLite Tabelle macht, und in der feedback-Tabelle eine Geometrie-Spalte hinzufügt. Ihr braucht dazu übrigens nicht spatialite-gui zu verwenden, denn dankenswerter Weise hat der Systemadministrator des IFIP jetzt die SpatiaLite-Erweiterung für PHP installiert. Ihr könnt also phpliteadmin direkt aus eurem Browser verwenden. Konkret müsst ihr zwei SQL-Befehle eingeben:

SELECT InitSpatialMetadata();
SELECT AddGeometryColumn('feedback', 'geom', 4326, 'POINT', 'XY');

Configure the feedback table as layer in GeoServer

Hier geht es darum, wie in der Vorlesung gezeigt einen SQLite-Datenspeicher mit der oben erwähnten Datenbank in GeoServer anzulegen, und aus diesem dann die feedback Tabelle zu publizieren. Beim Publizieren bitte darauf achten, dass ihr für die "Native Bounding Box" in der Layer Konfiguration manuell folgende Werte eingebt:

Wenn alles geklappt hat, sollte die Liste der Felder am Ende der Layer-Konfiguration in etwa so aussehen:

Wichtig ist, dass bei der geom-Spalte als Typ Point steht. Wenn das nicht der Fall ist, hat irgend etwas beim Erstellen der Geometrie-Spalte in der Datenbank nicht funktioniert.

Bitte nicht wundern, wenn ihr nach erfolgreicher Konfiguration nichts in der Layer-Vorschau seht. Wir haben ja noch keine Koordinaten in der Tabelle gespeichert.

Copy your feedback form html from Block 2 to a new project.

Ihr solltet von Block 2 noch eine Datei mit Namen feedback_demo.htm o.ä. haben, welche in etwa folgende Ausgabe produziert:

Diese Datei könnt ihr als index.html in eurem gXX_block4 Projekt, das ihr mit GitHub verknüpft habt, abspeichern, und die bestehende index.html damit ersetzen. Oberhalb der <form> solltet ihr noch einen Container für die Karte vorsehen:

<div id="map"></div>

Der <form> selbst müsst ihr noch eine id geben: <form id="feedback" ....

Die fertige index.html könnte dann so aussehen wie in meinem Beispiel-Projekt.

Use WFS-T and GeoServer instead of PHP to save the form

Das ist wahrscheinlich der schwierigste Teil. Hier geht es darum, die Aktion, die beim Speichern des Formulars ausgeführt wird, zu ändern. Ziel ist, dass GeoServer das Speichern von Feedback übernimmt, und zwar über das WFS-T Protokoll. Zu diesem Zweck editiert ihr die src/index.js Datei in eurem gXX_block4 Projekt. Was der Code genau tut, besprechen wir am Donnerstag, vorerst bitte einfach folgendes am Ende der Datei hinzufügen:

var url = 'http://student.ifip.tuwien.ac.at/geoserver/wfs';
var layer = 'feedback';
var prefix = 'ifip_2015'; // Ersetzen durch euren Arbeitsbereich-Namen
var featureNS = 'http://ifip/2015'; // Ersetzen durch eure Namensraum-URI
var form = document.getElementById('feedback');

var feature = new ol.Feature();
feature.setGeometryName('geom');
feature.setGeometry(new ol.geom.Point(map.getView().getCenter()));

var send = require('./feedback_send');
send(form, feature, url, {
  featureType: layer,
  featurePrefix: prefix,
  featureNS: featureNS,
  srsName: map.getView().getProjection().getCode()
});

Wie ihr seht, gibt es da auch noch eine Zeile var send = require('./feedback_send');. Wir benötigen also eine weitere Datei, die das eigentliche Senden des Formulars übernimmt. Diese Datei src/feedback_send.js könnt ihr aus meinem Beispiel-Projekt kopieren.

Um das ganze zu testen, gebt ihr in der Git Shell (bzw. GitPortable.exe Konsole) folgendes ein:

npm install
npm start

Dann geht ihr im Browser auf http://localhost:3000/. Dort füllt ihr einmal testweise das Formular aus und drückt "Abschicken".

Wenn alles funktioniert hat, solltet ihr jetzt in der GeoServer Layer-Vorschau für euren feedback-Layer einen Punkt sehen, und eure feedback-Tabelle in der Datenbank sollte eine zusätzliche Zeile haben.

Add a point (e.g. Geolocation) to the WFS request

geht gleich in einem mit

Create a map with the feedback coordinates layer as WMS layer on top of OSM

Eine Karte mit OSM haben wir schon, weil die schon mit dem openlayers-app Template in euer Projekt kam.

Jetzt kommt der WMS-Layer von GeoServer dazu. Einfach folgendes am Ende von src/index.js hinzufügen:

map.addLayer(new ol.layer.Tile({
  source: new ol.source.TileWMS({
    url: url,
    params: {LAYERS: prefix + ':' + layer}
  })
}));

Einen Punkt mit Koordinaten haben wir auch schon, weil wir ja den Kartenmittelpunkt als Geometrie für unser WFS Feature angegeben haben. Aber jetzt wollen wir die Position der Benutzerin als Geometrie verwenden. Als Zuckerl geben wir ihr auch noch die Möglichkeit, den vorgeschlagenen Punkt in der Karte durch Drag & Drop an eine andere Stelle zu verschieben. Dazu bitte folgenden Code am Ende von src/index.html hinzufügen:

var feedbackPoints = new ol.source.Vector({
  features: new ol.Collection(),
});
map.addLayer(new ol.layer.Vector({ source: feedbackPoints }));
feedbackPoints.addFeature(feature);
var modify = new ol.interaction.Modify({
  features: feedbackPoints.getFeaturesCollection()
});
map.addInteraction(modify);

var modify = new ol.interaction.Modify({
  features: feedbackPoints.getFeaturesCollection()
});
map.addInteraction(modify);

var geolocation = new ol.Geolocation({
  projection: map.getView().getProjection(),
  tracking: true
});
geolocation.once('change:position', function(evt) {
  feature.getGeometry().setCoordinates(geolocation.getPosition());
  map.getView().setCenter(geolocation.getPosition());
});

Das war's auch schon fast! Die fertige src/index.js Datei sieht bei mir dann so aus. Jetzt ist Exercise 1 komplett und Exercise 2 großteils erledigt. Fehlt nur noch ein Teilaspekt von

Using a 2-column Bootstrap layout, update the page to show both a map and the form

Derzeit ist die Karte ja oberhalb des Formulars, und jetzt könnt ihr euch mit Bootstrap oder einem HTML-Editor eurer Wahl spielen, dass das ganze ein nettes Layout bekommt.

Zum Abschluss muss die Applikation noch kompiliert und auf euren Studenten-Webspace geladen werden. Dazu geht ihr in die Git-Shell bzw. GitPortable.exe Konsole:

npm run dist

Im dist/ Verzeichnis sollten nun 2 Dateien sein, dist/index.html und dist/index.js. Diese beiden Dateien kopiert ihr mit WinSCP o.ä. über SFTP in einen passenden Ordner auf eurem Studenten-Webspace. Ich habe die fertige Applikation in einen block4 Unterordner kopiert, und das ganze sieht dann ohne verschönertes Layout so aus.

Zum Abschluss wär's natürlich noch fein, wenn ihr das ganze auf GitHub speichert. Und noch besser ist es, wenn auf GitHub ein wenig Projektmanagement erkennbar ist (Tickets, Milestones, Releases). Letzteres geht auch ohne Kommandozeile :smile:.

Ich hoffe, dass ihr mit diesen Infos die Exercises ohne zu viel Kopfzerbrechen erfolgreich abschließen könnt. Fragen bitte hier im Ticket als Kommentare.

[LisaRei]

Hallo. Wir (g04) können leider den bisherigen Fortschritt nicht testen, weder im GitShell noch im GitPortable, da die Befehle npm install oder npm start zu einem Error führen. Auch beim Testen über Localhost wird die Seite nicht dargestellt. Wir hoffen, Sie können uns weiterhelfen. Danke und liebe Grüße.

[ahocevar]

Nix schlimmes. Ihr habt nur vergessen, vor 'npm install' ins richtige Verzeichnis zu wechseln:

cd g04_block4

[ghost]

Ich poste unser Problem (diesmal g01) auch mal hier.

Wir haben alle Schritte von Exercise 1 durch und eigentlich auch schon alles doppelt kontrolliert, jedoch wird die Karte garnicht angezeigt im Formular. Der aktuelle Stand ist auf unserer Repository hochgeladen, wäre super, wenn Sie sich unser Problem anschauen könnten.

[LisaRei]

wir probieren es auch nochmals (funktioniert bis jetzt noch nicht):

[ahocevar]

@Buglkrax Bei euch war das Problem, dass ihr es nicht geschafft habt, meinen Code richtig in euer Projekt zu kopieren. Das betraf sowohl src/feedback_send.js als auch config/ol.json. Nächstes Mal den JavaScript Code (von mir aus die "Raw" Ansicht) kopieren, nicht die HTML Seite aus GitHub!

[ahocevar]

@LisaRei Damit npm start funktioniert, müsst ihr vorher noch einmal npm install versuchen. Falls wieder ein Fehler kommt, dann stattdessen npm install openlayers.

[ahocevar]

@LisaRei Sieht so aus, als ob ihr wieder einmal Opfer der seltsamen Konfiguration auf den Archlab-Rechnern seid. Der Hinweis, den ich jetzt gebe, könnte auch für andere Gruppen nützlich sein: Gebt in GitNodeSDK einmal folgendes ein:

npm config set cache ~/../npm-cache --global

[ahocevar]

@LisaRei Ein weiterer Hinweis noch. Und das solltet ihr vor dem oben genannten erledigen: Schaut, dass ihr im Pfad zu GitNodeSDK keine Leer- oder Sonderzeichen habt. Also H:\Git Node umbenennen in H:\GitNode. Vorher das GitNodeSDK Fenster, den Atom Editor und das git gui schließen, sonst funktioniert das Umbenennen nicht.

[MatthaeusMarte]

habs jetzt noch mal zuhause auf meinem pc versucht, bekomme auch diese fehler... es ist jedoch in der systemsteuerung, umgebungsvariable kein pfad angegeben.. ist diese pfadangabe immer noch erforderlich auch bei dem neueren download vom tuwel "JavaScript Entwicklungsumgebung"?

[ahocevar]

@MatthaeusMarte Umgebungsvariablen brauchst du da keine setzen. Wahrscheinlich ist das ein Fehler von einem früheren npm install. Versuch auch einmal npm install openlayers. Außerdem fällt mir auf, dass du mitten in einem Rebase mit Konflikten bist. Mach auch mal git rebase --abort und dann git pull --rebase origin master. Und schau genau, ob da nicht irgend welche Warnungen kommen, und befolge gegebenenfalls die Anweisungen.

[MatthaeusMarte]

npm install openlayers scheint funktioniert zu haben welchen Anweisungen soll ich nun genau befolgen? git rebase --continue, --skip, --abort? das hängt ja davon ab ob ich nun das problem lösen kann?!

[ahocevar]

Schau dir die 3 Dateien an. Da werden Zeilen mit <<<< und >>>> drin sein, die dir die Änderungen zwischen der Version auf github und deiner Version zeigen. Editiere die Dateien so, dass sie für dich passen. Es sollten dann keine doppelten Blöcke und keine <<<< und >>>> Zeilen mehr drin sein. Wenn alles passt, sagst du git rebase --continue.

[MatthaeusMarte]

Meinen sie das in den dateien scr/index.js, index.html, README.md wir können in den datein kein "und" finden oder meinen sie <<< und >>> zeichen? bzw. wo kann man diese änderungen einsehen? lg g04

[ahocevar]

Ich meine sowas in der Art:

the number of planets are
<<<<<<< HEAD
nine
=======
eight
>>>>>>> branch-a

Hier gibt es einen guten Hilfe-Artikel zum Auflösen solcher Konflikte: https://help.github.com/articles/resolving-a-merge-conflict-from-the-command-line/.

Die Änderung könnt ihr mit eurem Texteditor (z.B. Atom) in den jeweiligen Dateien (also src/index.js, index.html und README.md einsehen. Und dort müsst ihr auch den Konflikt bereinigen und danach weider speichern.

[LisaRei]

hey, wir sind soweit fertig (g04) und wollen nur mehr die dist/index.html und dist/index.js über github in unser Verzeichnis hochladen. leider funkt dies über git push und über sync nicht. wie können wir dies machen? lg und danke

[ahocevar]

@LisaRei Siehe http://ahocevar.net/tuwien-geoweb/block3.html#/19. dist/-Verzeichnisse enthalten kompilierten unlesbaren Code (nicht Quellcode), und sollen daher nicht versioniert werden. Anstatt der Anleitung auf der verlinkten Folie zu folgen, könnt ihr die beiden Dateien auch über sftp auf euren Studenten-Webspace kopieren.

[cniessner]

npm install openlayers hat bei uns - scheinbar - gut funktioniert. allerdings kommt es zu einer vielzahl von problemen, wenn wir daraufhin npm start ausführen.

[ahocevar]

@cniessner Sieht so aus, als ob bei euch beim ersten npm install etwas schiefgegangen ist. Der konkrete Fehler jetzt müßte zu beheben sein, indem du noch einmal explizit npm install browserify sagst.

[guntherbuffet]

@ahocevar npm install und npm start funktionieren, allerdings können wir am geoserver keinen neuen layer erzeugen. der neu angelegte datenspeicher enthält 'geom', allerdings kommt beim erstellen eines neuen layers immer folgende fehlermeldung:

es wird mir angezeigt, dass der layer in meinem arbeitsbereich publiziert wurde, allerdings ist er dort nicht.

[ahocevar]

@guntherbuffet Da hatte wohl GeoServer etwas Schluckauf. Ich hab den Katalog neu geladen, und konnte euren Layer dann ganz normal publizieren. Falls sonst jemand dieses Problem hat, so lädt man den Katalog neu:

[Hoebi]

Leider können wir auch die NPM INSTALL nicht starten [image: Inline-Bild 2] Sin leider ratlos

Liebe Grüße Gruppe 4

Am 10. November 2015 um 20:14 schrieb Andreas Hocevar < notifications@github.com>:

@cniessner https://github.com/cniessner Sieht so aus, als ob bei euch beim ersten npm install etwas schiefgegangen ist. Der konkrete Fehler jetzt müßte zu beheben sein, wenn du noch einmal explizit npm install browserify sagst.

— Reply to this email directly or view it on GitHub https://github.com/tuwien-geoweb-2015/ifip_block4/issues/1#issuecomment-155535501 .

[Hoebi]

Sorry wir meinten Gruppe 8 es war Block 4

Am 11. November 2015 um 16:49 schrieb Andreas Höbausz <hoebi.handy@gmail.com

:

Leider können wir auch die NPM INSTALL nicht starten [image: Inline-Bild 2] Sin leider ratlos

Liebe Grüße Gruppe 4

Am 10. November 2015 um 20:14 schrieb Andreas Hocevar < notifications@github.com>:

@cniessner https://github.com/cniessner Sieht so aus, als ob bei euch beim ersten npm install etwas schiefgegangen ist. Der konkrete Fehler jetzt müßte zu beheben sein, wenn du noch einmal explizit npm install browserify sagst.

— Reply to this email directly or view it on GitHub https://github.com/tuwien-geoweb-2015/ifip_block4/issues/1#issuecomment-155535501 .

[ahocevar]

@Hoebi Das Bild ist leider nicht angekommen.

[ahocevar]

@Hoebi Wieder Fehlanzeige. Tipp: Nicht per e-mail schreiben, sondern direkt im Ticket auf GitHub, und das Bild einfach mit Drag & Drop einfügen.

[vanperste]

3ter Versuch

[ahocevar]

Bei euch ist ganz einfach node nicht installiert oder nicht im Pfad, Wenn's Probleme gibt, nehmt einfach das GitNodeSDK von der TUWEL-Seite, dort ist alles konfiguriert..

[ahocevar]

@vanperste Wenn du node von http://nodejs.org richtig installiert hast, sollte es gehen. Zumindest nachdem du den Rechner neu gestartet hast.