Einbinden von Webservices in todo4teams (JSON-Daten in ein Formular)

In diesem Tutorial wird die Möglichkeit besprochen, Webservices mithilfe einer JSON-Datei, die von einer Website übertragen wird, in todo4teams einzubinden.
Die JavaScriptObjektNotation, kurz JSON, wird zum Übertragen und Speichern strukturierter Daten verwendet. Es dient als Datenformat für die Datenübertragung.
Insbesondere für Webanwendungen und mobile Apps wird es häufig in Verbindung mit JavaScript, Ajax oder WebSockets verwendet, um Daten zwischen dem Client und dem Server zu übertragen.

In unserem Beispiel verwenden wir die Wetterdaten, die von der Website openweathermap.org bereitgestellt werden. Die Daten werden mit einer JSON-Datei mit folgender Struktur übertragen:
{
"coord":{"lon":7.35,"lat":51.44},
"weather":
[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}],
"base":"stations",
"main":{"temp":285.63,"pressure":997,"humidity":81,"temp_min":284.15,"temp_max":287.59},
"visibility":10000,
"wind":{"speed":4.6,"deg":170},
"clouds":{"all":0},
"dt":1557389049,
"sys":{"type":1,"id":1306,"message":0.0069,"country":"DE","sunrise":1557373747,"sunset":1557428701},
"id":2807363,
"name":"Witten",
"cod":200
}

Um diese Daten nutzen zu können, müssen wir zunächst die Struktur und den Inhalt verstehen. In unserem Fall haben wir es mit einfachen Strings/Numbers, Objects und Arrays zu tun. Zum Beispiel:
String/Number
"dt":1557389049
Object
"sys":{"type":1,"id":1306,"message":0.0069,"country":"DE","sunrise":1557373747,"sunset":1557428701}
Array
"weather":
[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}]

Eine umfassende Übersicht über die verschiedenen JSON-Datentypen in englischer Sprache finden Sie hier.

Zur Anzeige der empfangenen Wetterdaten verwenden wir wie gewohnt ein Formular. Basierend auf der Datenstruktur könnte dies folgendermaßen aussehen:

Nun müssen wir die empfangenen Daten in unser Formular übernehmen, dazu erstellen wir eine Schaltfläche namens "update weather data" und implementieren die Logik zur Übernahme der Daten innerhalb der Callback-Aktion dieses Buttons:

Der erste Schritt der Callback-Aktion besteht darin, eine Verknüpfung zum Webservice herzustellen. Dies erfolgt über den folgenden Skript-Schnipsel:

try{
    results= com.proxemo.xutl.XUTLUrlReader.getStringFromUrl("https://api.openweathermap.org/data/2.5/weather?lat=51.4438926&lon=7.353197&APPID=0225682570559e15e110581aadc29046", 2000, 2000);
    }
  catch(e){
        println("Fehler: "+e);
    helper.errorMessage("Die gewünschten Wetterdaten konnten leider nicht angezeigt werden-\nBitte überprüfen Sie die Parameter.");
     }

Nachdem wir nun die JSON-Datei mit todo4teams verbunden haben, können wir die Daten in unser Formular einlesen. Im ersten Schritt müssen wir die JSON-Objekte und -Arrays als Variablen deklarieren und im zweiten Schritt den Inhalt dieser Variablen mittels der Methode "helper.setFormValue" in die Felder unseres Formulars übergeben:

{
var results=null;
var jso = eval('('+results+')');
var coord = jso.coord;
var weather = jso.weather[0];
var base = jso.base;
var main = jso.main;
var visibility = jso.visibility;
var wind = jso.wind;
var clouds = jso.clouds;
var dt = jso.dt;
var sys = jso.sys;
var id = jso.id;
var name = jso.name;
var cod = jso.cod;

helper.setFormValue(form.getMetaName(),"Lon",""+coord.lon);
helper.setFormValue(form.getMetaName(),"Lat",""+coord.lat);
helper.setFormValue(form.getMetaName(),"Wetter_Gruppe",""+weather.main);
helper.setFormValue(form.getMetaName(),"Wetter_einzeln",""+weather.description);
helper.setFormValue(form.getMetaName(),"Datum",""+todate(dt));
helper.setFormValue(form.getMetaName(),"Temperatur",""+round(main.temp-273.15));
helper.setFormValue(form.getMetaName(),"Luftdruck",""+main.pressure);
helper.setFormValue(form.getMetaName(),"Luftfeuchtigkeit",""+main.humidity);
helper.setFormValue(form.getMetaName(),"Temperatur_min",""+round(main.temp_min-273.15));
helper.setFormValue(form.getMetaName(),"Temperatur_max",""+round(main.temp_max-273.15));
helper.setFormValue(form.getMetaName(),"Sicht",""+visibility);
helper.setFormValue(form.getMetaName(),"Wind_Geschw",""+wind.speed);
helper.setFormValue(form.getMetaName(),"Wind_Richt",""+wind.deg);
helper.setFormValue(form.getMetaName(),"Bewoelkung",""+clouds.all);
helper.setFormValue(form.getMetaName(),"Sunrise",""+todate(sys.sunrise));
helper.setFormValue(form.getMetaName(),"Sunset",""+todate(sys.sunset));
helper.setFormValue(form.getMetaName(),"Land",""+sys.country);
helper.setFormValue(form.getMetaName(),"Ort",""+name);
}

Durch Betätigen der Schaltfläche "update weather data" im interaktiven Modus werden nun die Daten empfangen und in das Formular in todo4teams übernommen:

Das komplette Skript für die Callback-Aktion der Schaltfläche "update weather data", einige "Komfortfunktionen" wurden zusätzlich implementiert, um die empfangenen Datums- und Temperaturdaten einfach umzurechnen (direkt am Anfang des Skripts):

Die gesamte Formular unseres Tutorials ist an diese Seite im XML-Format angehängt und kann für Ihren persönlichen Gebrauch heruntergeladen und modifiziert werden.

Einbinden von Webservices in todo4teams (JSON-Daten in ein Formular)

Schnelleinstieg

Unterseiten