1. Startseite
2. JavaScript
3. API (Application Programming Interface)

API - application programming interface

Seit HTML5 steht eine ganze Reihe an API´s zur Verfügung, mit denen man einiges anstellen kann.

Wir haben viele Möglichkeiten, vom Abspielen von Video und Audiodateien im Browser bis hin zum Auslesen des Akkustandes oder der geografischen Lage des Endgerätes. Der tatsächliche Umfang im Umgang mit Web API´s ist einfach so groß, dass ich zurzeit nicht in der Lage bin, dieses Gebiet in Zahlen zu fassen. Die Tatsache, dass die Entwicklung immer weiter voranschreitet, was ja auch gut ist, macht es noch schwieriger, alles im Überblick zu behalten.

Kommunikation über JavaScript

Als Erstes betrachten wir die unidirektionale Kommunikation zwischen Client und Server.

Unidirektionale Kommunikation bedeutet, dass die Kommunikation zwischen Server und Client nur einseitig funktioniert. Egal ob wir eine klassische Webseite oder eine moderne Webanwendung haben, die Kommunikation funktioniert nur in eine Richtung. Also der Client stellt via http eine Anfrage an den Server und bekommt die entsprechende Antwort. Der Browser verarbeitet die Daten und die Seite ist fertig geladen. Wenn jetzt neue Daten auf dem Server bereit liegen, wird der Client nichts davon erfahren, solange er nicht eine neue Anfrage an den Server schickt.

Selbstverständlich gibt es hier schon Lösungen in Form von "Ajax" (Asynchronous JavaScript and XML)-Anfragen und Ähnliches.

Web Socket API

Mit der Web Socket API ist es möglich, eine bidirektionale Kommunikation aufrecht zu erhalten, das bedeutet, dass der Client und der Server auf Ereignisse der Gegenseite reagieren. Während bei einer reinen HTTP-Verbindung jede Aktion des Servers eine vorhergehende Anfrage des Clients erfordert, reicht es beim "WebSocket-Protokoll", wenn der Client die Verbindung öffnet. Der Server kann dann diese offene Verbindung aktiv verwenden und neue Informationen an den Client ausliefern, ohne auf eine neue Verbindung des Clients zu warten.

Nutzer wiedererkennen

In einigen Anwendungen ist es sicherlich vom Vorteil, wenn man Daten vom User wieder abrufen kann. Eine schon lange bestehende Möglichkeit, um Daten auf Clientseite bis zum Abruf abzuspeichern, sind die sogenannten Cookies.

Cookies verwenden

Das Protokoll HTTP ist ein zustandsloses Protokoll, das bedeutet, dass jede Anfrage unabhängig von anderen Anfragen ist. Das bedeutet aber auch, dass ein Server nicht erkennt, ob dieser Nutzer bereits vorher eine Anfrage gestellt hat. Stellen wir uns vor, es ist Sonntag Abend man liegt auf der Couch, der Kühlschrank ist leer und der Magen inzwischen auch. Nun wollen wir uns ein paar Sachen bei Lieferdienst bestellen und nutzen die Internetseite vom Food-Handler unseres Vertrauens. Wir legen die erste Pizza in den Warenkorb und wollen noch bei den Snacks nachschauen, was es da gibt. Nun wissen wir bereits, damit bei einem Klick auf einen Button eine neue Anfrage an den Server gesendet wird. Wir wissen auch, dass unsere Anfragen über HTTP zustandslos sind, der Server also gar nicht weiß, ob wir bereits vorher eine Anfrage gestellt haben. Das würde ja auch bedeuten, dass unsere Pizza aus dem Warenkorb wieder verschwunden ist. Nun tatsächlich wäre das auch so, wenn wir die Daten nicht irgendwo speichern könnten. Genau hier kommen die Cookies ins Spiel. Über Cookies haben wir die Möglichkeit, kleine Datenmengen auf der Clientseite zu speichern und wieder abzurufen. Cookies sind sozusagen kleine Textdateien, die auf dem Rechner des Clients gespeichert werden, solange er es zulässt und keine entsprechenden Änderungen im Browser vorgenommen hat. Diese Informationen werden bei jeder Anfrage an den Server mit übergeben. Dadurch weiß der Server auch, dass wir bereits eine Pizza in den Warenkorb gelegt haben. Die Cookies bestehen aus folgenden Bestandteilen.

Name und Wert

Bei den Namen spielt die Groß- und Kleinschreibung keine Rolle und sie sind die einzigen Angaben, die zwangsweise erforderlich sind. Als Wert sind nur Zeichenketten erlaubt, keine Zahlen. Name und Wert sind Pflichtangaben.

Die Domäne des Servers und der Pfad auf dem Server

Ein Cookie wird nur an einen korrekten Pfad mitgeschickt (example.com/test).

Das Ablaufdatum

Das Ablaufdatum sorgt dafür, dass das Cookie nach Ablauf dieses Datums gelöscht wird. Wenn kein Datum angegeben wird, dann wird das Cookie am Ende der Browsersitzung gelöscht. Über das Sicherheitsflag kann optional bestimmt werden, ob ein Cookie nur bei HTTPS mitgesendet wird oder auch bei HTTP-Anfragen erlaubt ist.

Cookies anlegen

Cookies werden auf 2 Arten angelegt, entweder werden sie im Header einer http-Antwort vom Server an den Client geschickt, oder sie werden mit JavaScript erzeugt. Natürlich machen wir das mit JavaScript. Die Eigenschaft "cookie" des "document"-Objekts ist der Ausgangspunkt für die Verwaltung. Um ein Cookie zu erstellen, schreiben wir.

document.cookie = 'username=User Name';

Damit haben wir das erste Cookie erstellt. Nicht gerade beeindruckend, aber ein voll gültiges Cookie. Um zu prüfen, ob unser Cookie auch wirklich erstellt wurde, lassen wir ihn uns auf der Konsole ausgeben.

console.log(document.cookie);

Wer den Chrome-Browser verwendet, der muss die Zulassung für das Verwenden von lokalen Cookies einstellen, damit eine Ausgabe in der Konsole sichtbar ist. Die Rückgabe des Cookie in der Konsole ist unter der Verwendung anderer Browser hingegen problemlos.

Um den Cookie von unserer Pizzabestellung zu rekonstruieren, müssten wir so was schreiben.

document.cookie = 'einkaufswagen=PizzaSalami,SchokoEis,Zitronenlimonade,; expires=Mon, 01 Jun  23:59:59 GMT; path=/';

Dieser Cookie hätte Gültigkeit bis zum 01.06. mit Angabe der Zeit und der Zeitzone. Einen Pfad wurde hier jetzt nicht angegeben, aber so müsste das Ganze aussehen. Für das Arbeiten mit Cookies gibt es einige Bibliotheken und nützliche Funktionen.

Den Browserspeicher nutzen

Es gibt 2 Arten von Browserspeicher

Der lokale Browserspeicher, er ist über mehrere Tabs und Fenster zugänglich. Der Sessionspeicher, er ist nur aus einem Browsertab zugänglich. Beide Speicherarten werden über das globale Objekt "window" aufgerufen und sind im Umgang mit ihren Methoden und Eigenschaften identisch. Der Unterschiede der beiden Speicher im Browser ist der Zugriff aus dem Fenster bzw. aus dem Tab.

Beginnen wir mit dem Speichern von Werten im Browserspeicher Über die Methode "setItem()" erlangen wir Zugriff auf den Browserspeicher. Der erste Parameter ist ein Schlüssel, unter dem der Wert gespeichert wird und der zweiter Parameter ist der Wert, der gespeichert wird.

localStorage.setItem('Hauptstadt', 'Berlin');

Der Wert, der gespeichert wird, darf nur eine Zeichenkette sein. Wenn Objekte gespeichert werden sollen, dann müssen diese zuvor in einen String umgewandelt werden.

Um Werte aus dem Browserspeicher zu lesen, verwenden wir die Methode "getItem()".

localStorage.setItem('Hauptstadt', 'Berlin');
let wert = localStorage.getItem('Hauptstadt');
console.log(wert);

Wenn ein Wert im Browserspeicher überschrieben werden soll, dann können wir das mit der Methode "setitem()" angehen. Wenn ein Schlüssel noch nicht existiert, wird dieser erstellt und wenn der Wert bereits vergeben ist, dann wird der Wert überschrieben.

localStorage.setItem('Hauptstadt', 'Rom');
let neuerWert = localStorage.getItem('Hauptstadt');
console.log(neuerWert);

Um einen Eintrag komplett zu löschen, verwenden wir die Methode "removeItem()". Der übergebene Parameter ist der Schlüssel vom Wert, welcher gelöscht werden soll.

let geloescht = localStorage.removeItem('Hauptstadt');
console.log(geloescht);

Wenn alle Daten des Browserspeichers gelöscht werden sollen, dann kann auch die Methode "clear()" verwendet werden.

let allesLoeschen = localStorage.clear();
console.log(allesLoeschen);

Mit dem Eventlistener können wir auf Änderungen im Speicher reagieren. Dabei wird jedes Mal, wenn ein Wert im Browserspeicher hinzugefügt, entfernt oder verändert wird, ein Event vom Typ StorageEvent ausgelöst.

Browserdatenbank nutzen

Die Indexed Database API implementiert eine Browserdatenbank.

Diese clientseitige Datenbank funktioniert in etwa wie eine serverseitige Datenbank. Das Erstellen auslesen Aktualisieren und Löschen wird auch als "CRUD" bezeichnet. CRUD steht für create, read, update und delete. In der Indexed DB werden JavaScript Objekte unter bestimmten Schlüsseln abgespeichert. Über die Eigenschaft "onsuccess" lässt sich ein Eventhandler definieren, der aufgerufen wird, wenn die Datenbank fertig geladen ist.

let idb = window.indexedDB;
let erstellen = idb.open('ersteDatenbank', 1);
erstellen.onsuccess = function (event) {
 let db = event.target.result;
 console.log(db.name);
 console.log(db.version);
};

Die Variable "erstellen" öffnet die Datenbank mit dem Namen "ersteDatenbank" und optional zum Testen die Version "1". Das Erstellen einer Datenbank funktioniert wie das Beispiel von localStorage. Eine Datenbank, die aufgerufen wird und noch nicht existiert, wird genau in dem Moment erstellt, wo sie aufgerufen wird.

Im weiteren Verlauf könnten wir das Hinzufügen und Updaten von Objekten im Objektspeicher behandeln. Sowie das Auslesen und gegebenenfalls Löschen der Objekte aus dem Speicher.

Auf das Dateisystem zugreifen

Um auf das Dateisystem des Nutzers zugreifen zu können, verwenden wir die File API.

Das Interface File repräsentiert eine einzelne Datei und beinhaltet Informationen wie das letzte Änderungsdatum oder den Namen der Datei. Das Interface FileList hingegen repräsentiert eine Liste von einzelnen Dateien oder File Objekten. Im Umgang mit binären Dateien verwenden wir das Interface Blob. Um Dateien vom Typ File oder Blob zu lesen, verwenden wir Methoden vom Interface FileReader. Um Dateien auswählen zu können, verwenden wir entweder einen Dialog, in dem der Nutzer die Dateien auswählt oder wir stellen auf unserer Webseite einen Bereich zur Verfügung, in dem der Nutzer via Drag an Drop Dateien zur Verfügung stellten kann.

Auswahl der Dateien per Dateidialog

Um den Nutzer zu schützen, können wir mit JavaScript nicht einfach auf alle Dateien zugreifen, sondern nur auf die Dateien, die der Nutzer selber auswählt. Eine Möglichkeit, um den Nutzer Dateien zur Verarbeitung auswählen zu lassen, ist das <input> Element mit dem Attribut file.

<input type="file" id="dateien" name="dateien[]" type="file" multiple/>
<li id="list"></li>

Wenn der Nutzer seine Dateien ausgewählt hat, wird im Hintergrund das "change-Event" ausgelöst. Das bedeutet, dass wir auf eine Dateiauswahl mit einem Eventhandler reagieren können.

function dateiAuswahl(event) {
 let dateien = event.target.files;
 let ausgabe = '';
 for (let i = 0; i<dateien.length; i++) {
  let datei = dateien[i];
  ausgabe += '<li>' + '<strong>' + datei.name + '</strong>' + ' (' + (datei.type || "n/a") + ') - ' + datei.size + 'Bytes' + ' geändert am: ' + datei.lastModifiedDate.toLocaleDateString() + '</li>';
 }
 document.getElementById('list').innerHTML = '<ul>' + ausgabe + '</ul>';
} 
document.getElementById('dateien').addEventListener('change', dateiAuswahl, false);

Nun können wir mehrere Dateien Selektieren und uns auf dem Monitor die einzelnen Informationen dazu ausgeben lassen. "datei.name" enthält dabei den Dateinamen, "datei.type" liefert Informationen zum Dateityp, "datei.size", hat Informationen zur Dateigröße in Bytes und über "datei.lastModifiedDate.toLocaleString()" wird uns das Datum der letzten Änderung in lokaler Formatierung angezeigt.

Weiteres

Auch das auswählen von Dateien, die per Drag and Drop markiert werden sollen, ist in JavaScript relativ einfach umzusetzen. Nachdem wir Dateien auswählen konnten, werden wir auch deren Inhalt lesen. Bei dem Laden großer Dateien ist es hilfreich eine Fortschrittsanzeige zur Verfügung zu stellen.

Den Standort von Nutzern ermitteln

Über die Geolocation API können wir den Standort des Nutzers ausfindig machen.

Die Geocolation API gehört zu dem navigator Objekt. Über die Methode "getCurrentPosition()" können wir die Position ermitteln. Dieser Methode übergibt man eine Funktion als Callback-Handler, sobald die Position ermittelt wurde, wird diese Funktion aufgerufen. Innerhalb der Funktion können wir auf Längengrad, Breitengrad oder sogar Geschwindigkeit und Richtung zugreifen.

function positionErmitteln() {
 if(navigator.geolocation) {
  navigator.geolocation.getCurrentPosition((position) => {
   console.log(position.coords.latitude);
   console.log(position.coords.longitude);
   console.log(position.coords.altitude);
   console.log(position.coords.accuracy);
   console.log(position.coords.altitudeAccuracy);
   console.log(position.coords.heading);
   console.log(position.coords.speed);
  });
 };
};
positionErmitteln();

Das sind abfragen zu Breitengrad, Längengrad, Höhenlage, Genauigkeit, Genauigkeit der Höhenlage, Richtung und Geschwindigkeit. Wer am Desktop PC die geolocation ausprobiert, erhält bei den Werten, die die Richtung und Geschwindigkeit sowie die Höhenlage beschreiben, mit hoher Wahrscheinlichkeit null. Bei der Verwendung von der Geolocation API wird der Nutzer immer gefragt, ob er zustimmt. Nur bei Zustimmung kann die API verwendet werden.

Kontinuierlich auf Standort Informationen zugreifen

Wenn eine einmalige Standortabfrage nicht reicht, sondern diese Abfrage kontinuierlich stattfinden soll, dann verwenden wir die Methode "watchPosition()".

navigator.geolocation.watchPosition((position) => {

Die Funktionsweise ist wie bei "getCurrentPosition()" nur das hier bei Veränderung auf Standortdaten reagiert werden kann.

Position auf Karte anzeigen

Wenn wir unsere Standortdaten mit der Google Maps API kombinieren, dann können wir uns den Standort auf einer Karte anzeigen lassen. Mit dieser Vorlage sind wir sogar in der Lage, eine Route zwischen 2 Orte zu planen.

Den Batteriestand eines Endgeräts auslesen

Über die Battery Status API können wir Informationen der Batterie bzw. des Akkus vom Endgerät abfragen und entsprechend darauf reagieren.

Die API definiert dazu das Interface Batterymanger über der wir Informationen des Akkus einholen können. Das Batterymanger Interface stellt 4 Eigenschaften bereit.

Auf Ereignisse reagieren

Dem Batteriemanager können über die Methode "addEventlistener()" noch 4 weitere Events zugewiesen werden.

Sprache ausgeben und Sprache erkennen

Die Ausgabe von Sprache aus einer Textdatei wird über das Interface SpeechSynthesis erzeugt.

Das umgekehrte Verfahren also das Erstellen von Text aus einer Sprachaufnahme übernimmt das Interface SpeechRecognitation. Beide Interfaces stammen von der Web Speech API. Diese API wird nicht von allen Browsern unterstützt und gilt auch nicht als Standard in der Webentwicklung, zumindest zurzeit nicht. Um die Verfügbarkeit zu prüfen und entsprechend darauf regieren zu können, schreiben wir einfach:

if(window.speecheSynthesis) {
 console.log('wird unterstützt!');
} else {
 console.log('wird nicht unterstützt!');
}

Animationen erstellen

Mit der Web Animation API können wir auf einer Webseite Animationen definieren.

Diese API wird aber nicht von allen Browsern verwendet. Ob eine Verwendung möglich ist, kann auch auf der Seite https://caniuse.com/ überprüft werden. Über die Methode "animate()" lassen sich einzelne Animationen erstellen.

Des Weiteren können wir die Erstellung und den Ablauf einer Animation behandeln.

Mehrsprachige Anwendungen entwickeln

Sobald eine Webanwendung "Mehrsprachig" sein soll, ist eine Internationalisierung unumgänglich. Dabei werden Zeit und Währungsdarstellungen an den jeweiligen Gegebenheiten des Nutzers angepasst.

Weiteres

Ein kleiner Überblick über nützliche API´s

Überhaupt werden es immer mehr API´s die auch mit anderen Diensten wie Facebook, Twitter, YouTube usw. in Verbindung treten können oder eine Kommunikation über Bluetooth ermöglichen. Es scheint eine unmögliche Aufgabe zu sein, einen Gesamtüberblick der API´s zu haben.