Etwas neues erfinden? Beispiel: Neues WordPress-Plugin

Wie kommt man darauf, etwas Neues zu Erfinden und in die Welt zu setzen? Anhand meiner neuesten Erfindung kann ich das beispielhaft schildern.

Problem finden
Zum Start sollte immer ein Problem stehen:
Man kann systematisch auf die Suche gehen, z. B. per Design Thinking. Oder Jemand kommt auf Dich zu und schildert das Problem. Oder, das ist der beste Fall, man hat das Problem selbst. Dann ist der Bezug viel intensiver.
Dieser Ansatz unterscheidet sich fundamental davon, zunächst ein Produkt oder Lösung zu finden und dann zu sehen ob es ein Problem dazu gibt. Dies tun überraschend viele…
Das kann auch erfolgreich sein, aber aus meiner Sicht ist die Wahrscheinlichkeit dafür deutlich geringer.
Hier im konkreten Fall war es so: Ein Nutzer meines “JSON Content Importer”-Plugins kam auf mich zu und wollte auf seiner Website Daten anzeigen, dafür aber nicht immer die gesamte Seite neu laden.

Grundsätzliche Lösbarkeit beurteilen
Wenn man das Problem identifiziert hat, ist die Frage: Wie kann ich es lösen? Gibt es schon eine Lösung?
Es ist immer wieder überraschend, dass es für viele Probleme noch keine Lösung gibt. Oder ungeeignete Lösungen – oder Lösungen die zusätzlich 1000 andere Probleme lösen und für das identifizierte Problem überdimensioniert sind.
Wobei es ein gutes Zeichen ist, wenn es etwas ähnliches schon gibt und erfolgreich ist: Das zeigt, dass eine grundsätzliche Nachfrage da ist.
Konkreter Fall: Es gibt hier noch keine Lösung. Was etwas komisch ist, da die Problemstellung eigentlich weit verbreitet sein müsste (das ist eine Annahme…).

Also: Sich eine Nische suchen und ein klar definiertes Problem festlegen.
Konkreter Fall: Bau eines WordPress-Plugins, in dem man eine Datenquelle, einen Zielort und eine Zeit für die Aktualisierung der Daten definieren kann.

Dann geht es darum, zu prüfen ob die Sache wirklich technisch lösbar ist und den Aufwand dafür abzuschätzen:  Um das zu tun sind genaue Kenntnisse der Umgebung nötig.
Konkreter Fall: Man sollte wissen, wie WordPress-Plugins entwickelt werden, wie WordPress, Browser und http funktionieren. Mit dem WordPress-Plugin JSON Content Importer haben ich davor viel Erfahrung gesammelt.
Dieser Schritt könnte auf den ersten Blick eine große Hürde sein – wenn man keine Ahnung von den Zusammenhängen hat.

An dieser Stelle hat man die Wahl: Man gibt auf oder begibt sich auf die Reise.
Konkreter Fall: Das Wissen entsteht auf der Reise. Man pickt sich zunächst das Benötigte heraus und fängt an. Dazu sind nur die Begeisterung für das Problem und echte Hartnäckigkeit erforderlich. Ausgangswissen oder Spezial-Knowhow helfen natürlich, ist aber keine Voraussetzung.

Machen: Prototyp
Bau eine Umgebung in der Du experimentieren kannst. In der Du zig Versuche machst die nicht klappen. In der Du zweifelst, dass es eine Lösung geben wird. In der Du pragmatische Wege abseits üblicher gehst. In der Du plötzlich Erfolgserlebnisse hast.
Das Wichtige dabei ist: Du musst den Weg praktisch gehen. Theorie hilft, aber wichtig ist die Praxis.
Der Lohn stellt sich ein, wenn man das Gefühl hat: Jetzt funktioniert es, das Grundkonzept steht. Das ist dann schon etwas mehr als das MinimalViableProduct (MVP), manchmal tut es auch etwas weniger. Alles was jetzt noch kommt ist Feinschliff (ok, das Gefühl trügt oft, da manche technische Hürde ggf. noch lauert).
Konkreter Fall: Das Grundkonzept des Plugins “Auto Refresh API Ajax” ist schnell klar. JSON von einer API holen, einen Datensatz davon festlegen, per Ajax-Javascript im HTML-DOM-Baum den Datensatz einfügen und regelmäßig aktualisieren.
Das sind mehrere modulare Schritte: Mal im PHP-Plugin-Backend, mal im Javascript-Browser-Frontend. Den Prototyp kann man dann Schritt für Schritt bauen. Dabei trifft man auf Probleme wie “same origin policy” wofür man sich dann eine Lösung ausdenken muss (das Plugin nutzt die WordPress-Rest-API um mittels einen eigenen Endpoints als Proxy zu fungieren).

Produktentwicklung
Ok, der Prototyp funktioniert. Man kann sein eigenes Problem damit lösen. Wunderbar.
Wenn man vermutet, dass auch für Andere diese Software nützlich sein könnte: Man macht ein Produkt daraus, das sicher ist, aber nur die grundlegendsten Features hat. Dieses Produkt testet man: Ist wirklich Nachfrage da?
Konkreter Fall: Aus dem Prototypen entstand das nun offizielle WordPress-Plugin “Auto Refresh API Ajax” inkl. simplem Logo. Die Software ist voll funktionsfähig, man könnte sich aber noch viele Features vorstellen.
Diese baue ich nur ein, wenn Nutzer dies benötigen. Das ist ein Grundprinzip meiner Plugin-Entwicklung: Das spart unnötige Entwicklung, was das Produkt komplizierter macht und weniger verständlich für Nutzer.
Sollte die Software viele Nutzer bekommen, sorgen diese schon für die Ideen der Weiterentwicklung.
Eben diese Testphase des Produktes läuft nun auf wordpress.org.

Technik hinter dem Plugin
Das Plugin ist sehr schlank. Kern ist der jQuery-Javascriptcode, in dem mittels vom Plugin übergebener Parameter das Ajax konfiguriert wird. Also den API-Aufruf, dessen Zeitwiederholung und das Einfügen des Datensatzes in den DOM-Baum:

var $araaapi = jQuery.noConflict();
$araaapi(document).ready( function() {
(function araaupdate() {
$araaapi.ajax({
dataType: 'json',
url: autorefreshapiajaxparam.araaurl,
success: function( data ) {
function resolve(path, obj) {
return path.split('.').reduce(function(prev, curr) {
return prev ? prev[curr] : null
}, obj || self)
}
var araaresolvedjsonvalue = resolve(autorefreshapiajaxparam.araajsonvalue, data);
$araaapi( autorefreshapiajaxparam.araapageselektor ).text(araaresolvedjsonvalue);
}
}).then(function() {
setTimeout(araaupdate, autorefreshapiajaxparam.araarefresh);
});
})();
})

Der PHP-Teil des Plugins hat zwei Teile: Einmal eine Seite für das Backend zur Eingabe der Parameter (URL zur API, Zeitintervall, DOM-Baum-Selektor, geheimer Schlüssel).

Diese Parameter verwendet PHP-Teil 2, welcher die eigentliche Plugin-Funktionalität enthält:
Einmal wird der obige Javascript-Code registriert und die PHP-Parameter an Javascript übergeben:
add_action( 'wp_enqueue_scripts', 'auto_refresh_api_ajax_enqueue_scripts' );

Und: Aus Sicherheitsgründen kann Ajax normalerweise nur URLs nutzen, die auf dem gleichen Server wie Ajax selbst laufen. Das ist die “same origin policy” und extrem sicherheitswichtig.
Damit das hier trotzdem geht, hat das Plugin eine Art Proxy: Die “Wordpress Rest API” erlaubt es, eigene Endpoints zu erzeugen. Das klingt komplizierter als es ist:
Auf https://www.json-content-importer.com/auto-refresh-api-ajax/ holt das Plugin von
https://www.json-content-importer.com/wp-json/araa/v1/geturl?u=http%3A%2F%2Fapi.json-content-importer.com%2Fextra%2Fauto-refresh-api-ajax%2F1.php&k=5c77ad8cc3acecb204c35568d39bc201
die Daten von http://api.json-content-importer.com/extra/auto-refresh-api-ajax/1.php
Dieser Zwischenschritt ist nötig, da Ajax auf https://www.json-content-importer.com keine Daten von https://api.json-content-importer.com holen kann.
Aus Sicherheitsgründen gibt es den zusätzlichen Parameter “k”: Das ist ein Hash-Wert der dafür sorgt, dass nur diese URL im Parameter “u” verarbeitet wird.

WordPress REST-API Endpoint dazufügen:
add_action( 'rest_api_init', function () {
register_rest_route( 'araa/v1', '/geturl/', array(
'methods' => 'GET',
'callback' => 'auto_refreh_ajax_api_geturl',
) );
} );