Ideentool wird zu Wryte

2014 veröffentlichte ich die erste Version meines Ideentools. Dabei handelte es sich um ein Werkzeug für Autoren welches unterschiedlichste Generatoren für Namen, Charaktere und ähnliches anbot. Im Laufe der Jahre kamen viele Generatoren hinzu, allerdings wirkte die Technik hinter dem Ideentool mittlerweile etwas angestaubt.

Das alte Ideentool

Im Zuge einiger Überlegungen entstand schlussendlich ein neues Projekt mit dem Namen Wryte. Der Fokus von Wryte ist ein wenig anders als der des Ideentools. So sollte Wryte internationalisierbar sein, also für unterschiedlichste Sprachen zur Verfügung stehen. Daneben sollte das Thema Schreiben etwas weiter gefasst werden, so soll es einmal um das Schreiben im Sinne eines Autoren und Schreiben im Sinne einer Entwicklers gehen.

Hintergrund hierfür war, das ich neben dem Schreiben auch entwickle und jeweils bestimmte Tools für beides immer wieder benötige. Deshalb sind die Werkzeuge in Wryte in zwei Personas unterteilt, einmal für Autoren und einmal für Entwickler.

Ein weiteres Ziel von Wryte war die Unterstützung und Integration in mobile Systeme. So kann die App unter iOS und Android auf den Homescreen gelegt werden und fühlt sich so wie eine native App an.

Wryte ersetzt das Ideentool

Technisch wurde die Architektur sinnvoller gestaltet. Während das Ideentool eine wilde Ansammlung von JavaScript– und PHP-Schnipseln war, wurde Wryte architektonisch in eine REST-API und die eigentliche Frontend-Applikation zerlegt. Die API soll in den nächsten Monaten öffentlich dokumentiert werden, sodass diese auch von anderen genutzt werden kann. Für die API wurde eine Swagger-Datei geschrieben und mittels dieser ein Server-Stub für das Slim Framework erzeugt. Die Frontendanwendung ist eine HTML5-App und kann im Gegensatz zum Ideentool auch auf mobilen Systemen sehr gut genutzt werden. Technisch basiert sie auf dem Framework 7-Framework.

Unter iOS kann die App auf den Homescreen gelegt werden

Zu finden ist Wryte unter wryte.net. Im Gegensatz zum Ideentool, fehlen noch einige Generatoren wie der Charakter- und Geheimnisgenerator, einige Fantasienamengeneratoren und die Generatoren für Titel und Verwandtschaftsverhältnisse. Die meisten dieser Generatoren sollen in den nächsten Wochen und Monaten hinzugefügt werden.

Slim Framework

Für wahrscheinlich jede Programmiersprache existieren mehr oder weniger viele Frameworks, welche dem Entwickler bestimmte Aufgaben abnehmen und somit die Entwicklung beschleunigen. Neben den größeren Framework existieren auch eine Reihe von Frameworks mit einem minimalistischeren Ansatz. Eines dieses sogenannten Microframeworks ist Slim. Entwickelt wird und wurde Slim für PHP.

slimframework.com

Slim eignet sich sehr gut für die Umsetzung für REST-APIs bzw. RESTful Webservices. Um ein Projekt zu erstellen, kann der Paket- bzw. Dependency-Manager Composer genutzt werden:

composer create-project slim/slim-skeleton exampleapp

Damit wird ein Grundprojekt angelegt mit welchem gearbeitet werden kann. Auch von seitens des Swagger-Toolings wird Slim unterstützt. So kann eine API über den Swagger-Editor definiert werden und anschließend für das Slim-Framework exportiert werden. Der Quelltext des Frameworks ist auf GitHub zu finden. Es ist unter MIT-Lizenz lizenziert und damit freie Software. Die offizielle Seite des Projektes ist unter slimframework.com zu finden.

REST-APIs unter Apache und Nginx betreiben

Eine der wesentlichen Eigenschaften von REST-APIs bzw. RESTful-Webservices ist ihre Adressierbarkeit von Ressourcen. Wenn ich z.B. über eine API verfüge, welche mir Namen generiert, so kann es in dieser API unterschiedliche Ressourcen geben:

GET https://api.example.com/name/german/
GET https://api.example.com/name/polish/

Rufe ich nun eine der beiden Ressourcen mit dem HTTP-Verb GET auf so erhalte ich entweder einen deutschen oder einen polnischen Namen von dieser Beispiel-API. Für den Webserver ergibt sich allerdings das Problem, das der Ordner name und die entsprechenden Unterordner nicht existieren. Das einzige was in diesem Beispiel existiert ist eine index.php-Datei, welche unter der URL:

https://api.example.com/index.php

zu finden ist. Damit die REST-API ordnungsgemäß funktioniert, müssen die entsprechenden Aufrufe zur index.php-Datei umgebogen werden. Bei dem Webserver Apache kann dies über eine .htaccess-Datei mit folgendem Inhalt erledigt werden:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)$ index.php?_url=/$1 [QSA,L]
</IfModule>

Diese Datei sollte dabei im gleichen Verzeichnis wie die Datei index.php liegen. Bei Nginx muss stattdessen die Konfiguration der Domain bzw. der Seite angepasst werden. Diese Konfigurationen sind unter /etc/nginx/sites-available/ zu finden. Dort muss folgende Konfiguration hinzugefügt werden:

try_files $uri $uri/ @rewrite;

location @rewrite {
	   rewrite ^/(.*)$ /index.php?_url=/$1;
}

Hinterlegt werden muss die Konfiguration in einem server-Block derselben. In diesem Fall würde die URL bzw. der Aufruf:

GET https://api.example.com/name/german/

intern in die URL:

https://api.example.com/index.php?_url=name/german/

umgeschrieben und vom Webserver geladen. Dadurch landen die Aufrufe wieder bei der Datei index.php und können verarbeitet werden.

Geocoding in Verbindung mit einer Leaflet-App

Gestern schrieb ich in einem Artikel, wie Adressen aus Koordinaten mittels des Dienstes Nominatim, unter Zuhilfenahme von OpenStreetMap-Daten, ermittelt werden können. Mithilfe der freien Bibliothek Leafleat, kann dies nun in eine kleine Webapplikation gegossen werden.

Anhand der Geo-Koordinate wird die Adresse ermittelt und dargestellt.

Ziel ist es eine Applikation zu bauen, welche eine Karte darstellt und bei einem Klick auf diese Karte den Geocoding-Dienst anfragt. Sobald die Antwort vom Dienst eingetroffen ist, soll in einem Pop-up die Adresse dargestellt werden. Nachdem ein Grundgerüst in Form einer HTML-Datei erstellt wurde, werden dort die benötigten Bibliotheken (Leaflet und jQuery) eingebunden. Anschließend kann die Karte erzeugt werden. Damit diese im Vollbild dargestellt wird, findet sich eine entsprechende CSS-Definition in der Datei:

<style type="text/css">
	body {
		padding: 0;
		margin: 0;
	}

	html, body, #map {
		height: 100%;
	}
</style>

Anschließend kann der TileLayer angelegt werden und der Map zugewiesen werden:

// Options
var centerLatitude=53.49577;
var centerLongitude=13.30873;
var zoomLevel=15;

// Define layer
var openStreetMapLayer = new L.TileLayer(
		'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
		{attribution: '<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors</a>'});

// Define map
var map = L.map('map', {
	center: new L.LatLng(centerLatitude, centerLongitude),
	zoom: zoomLevel,
	layers: [openStreetMapLayer]
});

Für die Karte muss im nächsten Schritt ein Click-Event definiert werden, welches den AJAX-Request gegen den Geocoding-Dienst auslöst und den Marker erstellt. Der jeweilige Marker wird in eine separate Ebene gepackt und beim nächsten Klick wieder gelöscht und anschließend ein neuer Marker erstellt:

// Marker managment
var markerLayer;
map.on('click', function(e){

	// Console debug
	var coord = e.latlng;
	var lat = coord.lat;
	var lng = coord.lng;
	console.log("You clicked the map at latitude: " + lat + " and longitude: " + lng);

	// Marker managment		
	if(markerLayer != undefined) {
		map.removeLayer(markerLayer);
	}
	
	markerLayer = new L.Marker(e.latlng);
	map.addLayer(markerLayer);

	// Call geocode api
	var request =	$.ajax({
		method: "GET",
		url: "https://nominatim.openstreetmap.org/reverse?lat=" + lat + "&lon=" + lng + "&format=json"
	});

	request.done(function( json ) {
		console.log(json);
		markerLayer.bindPopup(json.display_name).openPopup();
	});
});

Am Stück sieht die Applikation wie folgt aus:

<!DOCTYPE html>
<html>
<head>
	<title>Leaflet address encoder</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/>
	
	<style type="text/css">
		body {
			padding: 0;
			margin: 0;
		}

		html, body, #map {
			height: 100%;
		}
	</style>
	
	<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
   integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
   crossorigin=""></script>
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
	<div id="map"></div>
	
	<script>
	        // Options
		var centerLatitude=53.49577;
		var centerLongitude=13.30873;
		var zoomLevel=15;
		
		// Define layer
		var openStreetMapLayer = new L.TileLayer(
				'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
				{attribution: '<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors</a>'});
		
		// Define map
		var map = L.map('map', {
		    center: new L.LatLng(centerLatitude, centerLongitude),
		    zoom: zoomLevel,
		    layers: [openStreetMapLayer]
		});
		
		// Marker managment
		var markerLayer;
		map.on('click', function(e){

			// Console debug
			var coord = e.latlng;
			var lat = coord.lat;
			var lng = coord.lng;
			console.log("You clicked the map at latitude: " + lat + " and longitude: " + lng);

			// Marker managment		
			if(markerLayer != undefined) {
				map.removeLayer(markerLayer);
			}
			
			markerLayer = new L.Marker(e.latlng);
       		map.addLayer(markerLayer);

			// Call geocode api
			var request =	$.ajax({
				method: "GET",
				url: "https://nominatim.openstreetmap.org/reverse?lat=" + lat + "&lon=" + lng + "&format=json"
			});

			request.done(function( json ) {
				console.log(json);
				markerLayer.bindPopup(json.display_name).openPopup();
			});
  		});
	</script>
</body>
</html>

Alternativ kann der Quelltext heruntergeladen bzw. ausprobiert werden.

Adresse anhand einer Koordinate ermitteln

Im Umfeld von OpenStreetMap existieren eine Reihe von Diensten und APIs. Einer dieser Dienste ist Nominatim. Dabei handelt es sich um einen Geocoding-Dienst auf Basis der OpenStreetMap-Daten. Mithilfe der API kann anhand einer Koordinate in Form von Latitude und Longitude, eine Adresse ermittelt werden. Ein Beispielaufruf könnte wie folgt aussehen:

GET https://nominatim.openstreetmap.org/reverse?lat=53.49567958129127&lon=13.302898406982424&format=json

Gewöhnungsbedürftig an diesem Aufruf ist der Parameter format, über welchen das Format des Response definiert wird. Im Sinne einer sinnvollen REST-API, hätte dies besser über den Header-Parameter Accept gelöst werden sollen. Als Ergebnis erhält der Response die ermittelte Adresse:

{
    "place_id": 239463758,
    "licence": "Data © OpenStreetMap contributors, ODbL 1.0. https://osm.org/copyright",
    "osm_type": "way",
    "osm_id": 626862936,
    "lat": "53.4957878878448",
    "lon": "13.3026220240811",
    "display_name": "Weinbergsweg, Burg Stargard, Stargarder Land, Mecklenburgische Seenplatte, Mecklenburg-Vorpommern, 17094, Deutschland",
    "address": {
        "road": "Weinbergsweg",
        "town": "Burg Stargard",
        "county": "Stargarder Land",
        "state": "Mecklenburg-Vorpommern",
        "postcode": "17094",
        "country": "Deutschland",
        "country_code": "de"
    },
    "boundingbox": [
        "53.4949976",
        "53.4960744",
        "13.3023076",
        "13.3027343"
    ]
}

Neben der Geocoding-Funktionalität enthält der Dienst eine Reihe weiterer Funktionen, welche ihn zu einer Art Suchmaschine für OpenStreetMap-Daten machen. Die offizielle Projektseite des Dienstes ist unter nominatim.org zu finden. Der Quelltext des Dienstes ist auf GitHub zu finden. Das Projekt ist unter der GPL2 lizenziert und damit freie Software.