Einführung in Web-APIs

Anwendungsprogrammierschnittstellen (APIs) sind Konstrukte, die in Programmiersprachen zur Verfügung gestellt werden, um Entwicklern die Erstellung komplexer Funktionalität zu erleichtern. Sie abstrahieren komplexeren Code und bieten eine einfachere Syntax als Ersatz.

Ein reales Beispiel ist die Stromversorgung in Ihrem Haus, Ihrer Wohnung oder einer anderen Wohnung. Wenn Sie ein Gerät in Ihrem Haus verwenden möchten, stecken Sie es in eine Steckdose und es funktioniert. Sie versuchen nicht, es direkt an die Stromversorgung anzuschließen — das wäre wirklich ineffizient und, wenn Sie kein Elektriker sind, schwierig und gefährlich.

Bildquelle: Überladene Steckdose von The Clear Communication People, auf Flickr.

Auf die gleiche Weise ist es viel einfacher, ein API zu verwenden, das in einer höher programmierten Sprache wie JavaScript oder Python geschrieben ist, als zu versuchen, niedrigeren Code (beispielsweise C oder C++) zu schreiben, der direkt die GPU des Computers oder andere Grafikfunktionen steuert.

Client-seitiges JavaScript verfügt insbesondere über viele APIs — diese sind nicht Teil der JavaScript-Sprache selbst, sondern basieren auf der Kernsprache JavaScript und bieten Ihnen zusätzliche Superkräfte, die Sie in Ihrem JavaScript-Code verwenden können. Sie fallen im Allgemeinen in zwei Kategorien:

• Browser-APIs sind in Ihren Webbrowser eingebaut und können Daten vom Browser und der umgebenden Computerumgebung bereitstellen und nützliche komplexe Dinge damit tun. Zum Beispiel bietet die Web Audio API JavaScript-Konstrukte zur Manipulation von Audio im Browser — sie nimmt einen Audiotrack und ändert dessen Lautstärke, wendet Effekte daran an usw. Im Hintergrund verwendet der Browser tatsächlich einige komplexe niedrigere Codeeinheiten (z. B. C++ oder Rust), um die tatsächliche Audiobearbeitung durchzuführen. Aber auch hier wird diese Komplexität durch die API von Ihnen abstrahiert.
• Drittanbieter-APIs sind standardmäßig nicht im Browser eingebaut, und Sie müssen ihren Code und die Informationen im Allgemeinen von einem Ort im Web abrufen. Zum Beispiel ermöglicht die Google Maps API Ihnen Dinge wie das Anzeigen einer interaktiven Karte zu Ihrem Büro auf Ihrer Website. Es bietet einen speziellen Satz von Konstrukten, die Sie verwenden können, um den Google Maps-Dienst abzufragen und spezifische Informationen zu erhalten.

Oben haben wir besprochen, was client-seitige JavaScript-APIs sind und wie sie sich auf die JavaScript-Sprache beziehen. Lassen Sie uns dies zusammenfassen, um es klarer zu machen, und auch erwähnen, wo andere JavaScript-Tools hineinpassen:

• JavaScript — Eine in Browser eingebettete Skriptsprache auf hoher Ebene, die es Ihnen ermöglicht, Funktionen auf Webseiten/Apps zu implementieren. Beachten Sie, dass JavaScript auch in anderen Programmierumgebungen verfügbar ist, wie z.B. Node.
• Browser-APIs — Konstrukte, die im Browser eingebaut sind und auf der JavaScript-Sprache aufbauen, um Ihnen die Implementierung von Funktionen zu erleichtern.
• Drittanbieter-APIs — Konstrukte, die in Plattformen von Drittanbietern (z. B. Disqus, Facebook) eingebaut sind und es Ihnen ermöglichen, einige der Funktionen dieser Plattformen auf Ihren eigenen Webseiten zu nutzen (zum Beispiel, um Ihre Disqus-Kommentare auf einer Webseite anzuzeigen).
• JavaScript-Bibliotheken — In der Regel eines oder mehrere JavaScript-Dateien, die benutzerdefinierte Funktionen enthalten, die Sie Ihrer Webseite hinzufügen können, um das Schreiben von gängigen Funktionen zu beschleunigen oder zu erleichtern. Beispiele sind jQuery, Mootools und React.
• JavaScript-Frameworks — Der nächste Schritt nach Bibliotheken. JavaScript-Frameworks (z. B. Angular und Ember) sind in der Regel Pakete von HTML, CSS, JavaScript und anderen Technologien, die Sie installieren und dann verwenden, um eine Webanwendung von Grund auf neu zu schreiben. Der Hauptunterschied zwischen einer Bibliothek und einem Framework ist die „Umkehrung der Kontrolle“. Beim Aufruf einer Methode aus einer Bibliothek hat der Entwickler die Kontrolle. Bei einem Framework wird die Kontrolle umgekehrt: Das Framework ruft den Code des Entwicklers auf.

In modernen Browsern gibt es eine große Anzahl von APIs, die Ihnen ermöglichen, eine Vielzahl von Dingen in Ihrem Code zu tun. Sie können dies sehen, indem Sie sich die MDN APIs-Indexseite ansehen.

Besonders wichtig sind die häufigsten Kategorien von Browser-APIs, die Sie verwenden werden (und die wir in diesem Modul genauer behandeln werden):

• APIs zur Manipulation von Dokumenten, die im Browser geladen sind. Das offensichtlichste Beispiel ist die DOM (Document Object Model) API, die es Ihnen ermöglicht, HTML und CSS zu manipulieren — HTML zu erstellen, zu entfernen und zu ändern, neue Stile dynamisch auf Ihre Seite anzuwenden usw. Jedes Mal, wenn Sie ein Popup-Fenster auf einer Seite sehen oder ein neuer Inhalt angezeigt wird, ist das beispielsweise das DOM in Aktion. Mehr über diese Arten von APIs erfahren Sie in der Einführung in DOM-Scripting.

• APIs, die Daten vom Server abrufen, um kleine Abschnitte einer Webseite eigenständig zu aktualisieren, werden sehr häufig verwendet. Dieses scheinbar kleine Detail hat enorme Auswirkungen auf die Leistung und das Verhalten von Websites gehabt — wenn Sie nur eine Aktienliste oder eine Liste verfügbarer neuer Geschichten aktualisieren müssen, indem Sie dies sofort tun können, ohne die gesamte Seite erneut vom Server laden zu müssen, kann die Website oder App viel reaktionsschneller und „schneller“ wirken. Die wichtigste API für diesen Zweck ist die Fetch API, obwohl älterer Code möglicherweise immer noch die XMLHttpRequest API verwendet. Sie könnten auch auf den Begriff AJAX stoßen, der diese Technik beschreibt. Mehr über solche APIs erfahren Sie im Abschnitt Netzwerkanfragen mit JavaScript.

• APIs, um Grafiken zu zeichnen und zu manipulieren sind in Browsern weit unterstützt — die beliebtesten sind Canvas und WebGL, die es Ihnen ermöglichen, die Pixeldaten in einem HTML-<canvas>-Element programmatisch zu aktualisieren, um 2D- und 3D-Szenen zu erstellen. Sie könnten z.B. Formen wie Rechtecke oder Kreise zeichnen, ein Bild auf die Leinwand importieren und einen Filter darauf anwenden, wie Sepia oder Graustufen, indem Sie die Canvas-API verwenden, oder eine komplexe 3D-Szene mit Beleuchtung und Texturen mit WebGL erstellen. Solche APIs werden oft mit APIs kombiniert, die Animationsschleifen erstellen (wie window.requestAnimationFrame()) und andere, um ständig aktualisierte Szenen wie Cartoons und Spiele zu machen.

• Audio- und Video-APIs wie HTMLMediaElement, die Web Audio API und WebRTC erlauben Ihnen, wirklich interessante Dinge mit Multimedia zu machen, wie die Erstellung benutzerdefinierter UI-Steuerelemente zum Abspielen von Audio und Video, das Anzeigen von Textspuren wie Untertitel zusammen mit Ihren Videos, das Erfassen von Videos von Ihrer Webcam zur Manipulation über eine Leinwand (siehe oben) oder das Anzeigen auf dem Computer einer anderen Person in einer Webkonferenz oder das Hinzufügen von Effekten zu Audiotracks (wie Verstärkung, Verzerrung, Schwenken usw.).

• Geräte-APIs ermöglichen Ihnen die Interaktion mit der Hardware des Geräts: z. B. die Zugriffs auf das GPS des Geräts, um die Position des Benutzers mit der Geolocation API zu bestimmen.

• Client-seitige Speicher-APIs ermöglichen es Ihnen, Daten auf Client-Seite zu speichern, sodass Sie eine App erstellen können, die ihren Zustand zwischen Seitenladungen speichert und möglicherweise sogar funktioniert, wenn das Gerät offline ist. Es gibt mehrere verfügbare Optionen, z. B. einfache Name/Wert-Speicherung mit der Web Storage API und komplexere Datenbankspeicherung mit der IndexedDB API.

Drittanbieter-APIs kommen in großer Vielfalt; einige der beliebteren, die Sie früher oder später wahrscheinlich nutzen werden, sind:

• Karten-APIs, wie Mapquest und die Google Maps API, die Ihnen ermöglichen, alle möglichen Dinge mit Karten auf Ihren Webseiten zu machen.
• Die Facebook-API-Suite, die es Ihnen ermöglicht, verschiedene Teile des Facebook-Ökosystems zu nutzen, um Ihrer App Vorteile zu verschaffen, z.B. durch Bereitstellung des Logins über Facebook-Login, Annahme von In-App-Zahlungen, und Ausrollen gezielter Werbekampagnen usw.
• Die Telegram-APIs, die Ihnen ermöglichen, Inhalte von Telegram-Kanälen in Ihre Website einzubetten, zusätzlich zur Bereitstellung von Unterstützung für Bots.
• Die YouTube API, die das Einbetten von YouTube-Videos auf Ihrer Website, das Durchsuchen von YouTube, das Erstellen von Playlists und mehr erlaubt.
• Die Pinterest API, die Tools bereitstellt, um Pinterest-Boards und Pins zu verwalten, um sie in Ihre Website zu integrieren.
• Die Twilio API, die ein Framework für den Aufbau von Sprach- und Videofunktionalität in Ihre App, das Senden von SMS/MMS von Ihren Apps und mehr bietet.
• Die Disqus API, die eine Kommentierungsplattform bietet, die in Ihre Website integriert werden kann.
• Die Mastodon API, die es Ihnen ermöglicht, Funktionen des sozialen Netzwerks Mastodon programmatisch zu manipulieren.
• Die IFTTT API, die es ermöglicht, über eine Plattform mehrere APIs zu integrieren.

Verschiedene JavaScript-APIs funktionieren auf leicht unterschiedliche Weise, aber im Allgemeinen haben sie gemeinsame Merkmale und Ähnlichkeiten wie sie funktionieren.

Ihr Code interagiert mit APIs mithilfe eines oder mehrerer JavaScript-Objekte, die als Behälter für die Daten dienen, die die API verwendet (in Objekteigenschaften enthalten), und die Funktionalität, die die API bietet (in Objektmethoden enthalten).

Zurück zum Beispiel der Web Audio API — dies ist eine ziemlich komplexe API, die aus einer Reihe von Objekten besteht. Die offensichtlichsten sind:

• AudioContext, das einen Audio-Graphen repräsentiert, der zur Manipulation von Audio verwendet werden kann, das im Browser abgespielt wird, und eine Reihe von Methoden und Eigenschaften bietet, um dieses Audio zu manipulieren.
• MediaElementAudioSourceNode, das ein <audio>-Element repräsentiert, das Klang enthält, den Sie innerhalb des Audiokontextes abspielen und manipulieren möchten.
• AudioDestinationNode, das das Ziel des Audios repräsentiert, also das Gerät auf Ihrem Computer, das es tatsächlich ausgeben wird — normalerweise Ihre Lautsprecher oder Kopfhörer.

Also, wie interagieren diese Objekte miteinander? Wenn Sie sich unser einfaches Web-Audio-Beispiel ansehen (sehen Sie es auch live), sehen Sie zunächst das folgende HTML:

<audio src="outfoxing.mp3"></audio>

<button class="paused">Play</button>
<br />
<input type="range" min="0" max="1" step="0.01" value="1" class="volume" />

Wir fügen zuerst ein <audio>-Element ein, mit dem wir eine MP3-Datei auf der Seite einbetten. Wir fügen keine Standard-Browser-Steuerelemente ein. Danach fügen wir einen <button> ein, den wir verwenden werden, um die Musik abzuspielen und zu stoppen, und ein <input>-Element vom Typ range, das wir verwenden, um die Lautstärke des Tracks während der Wiedergabe anzupassen.

Nun werfen wir einen Blick auf das JavaScript für dieses Beispiel.

Wir beginnen mit der Erstellung einer AudioContext-Instanz, in der wir unseren Track manipulieren können:

const audioCtx = new AudioContext();

Als nächstes erstellen wir Konstanten, die Referenzen zu unseren <audio>, <button> und <input> Elementen speichern und verwenden die AudioContext.createMediaElementSource()-Methode, um ein MediaElementAudioSourceNode zu erstellen, das die Quelle unseres Audios — das <audio>-Element, von dem abgespielt wird — repräsentiert:

const audioElement = document.querySelector("audio");
const playBtn = document.querySelector("button");
const volumeSlider = document.querySelector(".volume");

const audioSource = audioCtx.createMediaElementSource(audioElement);

Im nächsten Schritt fügen wir ein paar Ereignishandler ein, die beim Drücken der Taste zwischen Abspielen und Anhalten wechseln und das Display zurück zum Anfang setzen, wenn das Lied zu Ende ist:

// play/pause audio
playBtn.addEventListener("click", () => {
  // check if context is in suspended state (autoplay policy)
  if (audioCtx.state === "suspended") {
    audioCtx.resume();
  }

  // if track is stopped, play it
  if (playBtn.getAttribute("class") === "paused") {
    audioElement.play();
    playBtn.setAttribute("class", "playing");
    playBtn.textContent = "Pause";
    // if track is playing, stop it
  } else if (playBtn.getAttribute("class") === "playing") {
    audioElement.pause();
    playBtn.setAttribute("class", "paused");
    playBtn.textContent = "Play";
  }
});

// if track ends
audioElement.addEventListener("ended", () => {
  playBtn.setAttribute("class", "paused");
  playBtn.textContent = "Play";
});

Als Nächstes erstellen wir ein GainNode-Objekt mithilfe der AudioContext.createGain()-Methode, das zur Anpassung der Lautstärke des durchgeleiteten Audios verwendet werden kann, und erstellen einen weiteren Ereignishandler, der den Wert der Verstärkung des Audiographen (Lautstärke) ändert, wann immer der Schiebereglerwert geändert wird:

// volume
const gainNode = audioCtx.createGain();

volumeSlider.addEventListener("input", () => {
  gainNode.gain.value = volumeSlider.value;
});

Das letzte, was getan werden muss, damit dies funktioniert, ist, die verschiedenen Knoten im Audiograph miteinander zu verbinden. Dies geschieht durch die Verwendung der AudioNode.connect()-Methode, die auf jeden Knotentyp verfügbar ist:

audioSource.connect(gainNode).connect(audioCtx.destination);

Das Audio startet in der Quelle, die dann mit dem Verstärkerknoten verbunden wird, damit die Lautstärke des Audios angepasst werden kann. Der Verstärkerknoten wird dann mit dem Zielknoten verbunden, damit der Klang auf Ihrem Computer abgespielt werden kann (die AudioContext.destination-Eigenschaft repräsentiert, was auch immer das Standard-AudioDestinationNode auf der Hardware Ihres Computers ist, z. B. Ihre Lautsprecher).

Wenn Sie eine API verwenden, sollten Sie sicherstellen, dass Sie wissen, wo der Einstiegspunkt der API ist. Bei der Web Audio API ist dies ziemlich einfach — es ist das AudioContext-Objekt, das verwendet werden muss, um jegliche Audiomanipulation durchzuführen.

Das Document Object Model (DOM) API hat ebenfalls einen einfachen Einstiegspunkt — seine Funktionen sind in der Regel am Document-Objekt zu finden oder in einer Instanz eines HTML-Elements, das Sie in irgendeiner Weise beeinflussen möchten, zum Beispiel:

const em = document.createElement("em"); // create a new em element
const para = document.querySelector("p"); // reference an existing p element
em.textContent = "Hello there!"; // give em some text content
para.appendChild(em); // embed em inside para

Die Canvas-API erfordert ebenfalls das Abrufen eines Kontextobjekts zur Verwendung für Manipulationen, obwohl es sich in diesem Fall um einen grafischen Kontext anstelle eines Audiokontextes handelt. Sein Kontextobjekt wird erstellt, indem Sie eine Referenz auf das <canvas>-Element abrufen, auf dem Sie zeichnen möchten, und dann die Methode HTMLCanvasElement.getContext() aufrufen:

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

Alles, was wir auf der Leinwand tun möchten, wird dann durch Aufrufen von Eigenschaften und Methoden des Kontextobjekts erreicht (das eine Instanz von CanvasRenderingContext2D ist), zum Beispiel:

Ball.prototype.draw = function () {
  ctx.beginPath();
  ctx.fillStyle = this.color;
  ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
  ctx.fill();
};

Wir haben Ereignisse bereits früher im Kurs im Artikel Einführung in Ereignisse besprochen, der detailliert darlegt, was client-seitige Webereignisse sind und wie sie in Ihrem Code verwendet werden. Wenn Sie noch nicht mit der Funktionsweise client-seitiger Web-API-Ereignisse vertraut sind, sollten Sie diesen Artikel zuerst lesen, bevor Sie fortfahren.

Einige Web-APIs enthalten keine Ereignisse, aber die meisten enthalten zumindest einige. Die Handler-Eigenschaften, die es uns ermöglichen, Funktionen auszuführen, wenn Ereignisse ausgelöst werden, sind in unseren Referenzmaterialien in separaten „Ereignishandler“-Abschnitten aufgeführt.

Wir haben bereits im obigen Beispiel der Web Audio API eine Reihe von Ereignishandlern in Aktion gesehen:

// play/pause audio
playBtn.addEventListener("click", () => {
  // check if context is in suspended state (autoplay policy)
  if (audioCtx.state === "suspended") {
    audioCtx.resume();
  }

  // if track is stopped, play it
  if (playBtn.getAttribute("class") === "paused") {
    audioElement.play();
    playBtn.setAttribute("class", "playing");
    playBtn.textContent = "Pause";
    // if track is playing, stop it
  } else if (playBtn.getAttribute("class") === "playing") {
    audioElement.pause();
    playBtn.setAttribute("class", "paused");
    playBtn.textContent = "Play";
  }
});

// if track ends
audioElement.addEventListener("ended", () => {
  playBtn.setAttribute("class", "paused");
  playBtn.textContent = "Play";
});

Web-API-Funktionen unterliegen denselben Sicherheitsüberlegungen wie JavaScript und andere Web-Technologien (zum Beispiel Same-Origin-Policy), jedoch haben sie manchmal zusätzliche Sicherheitsmechanismen integriert. Zum Beispiel funktionieren einige der moderneren Web-APIs nur auf Seiten, die über HTTPS bereitgestellt werden, da sie potenziell sensible Daten übertragen (Beispiele sind Service Workers und Push).

Darüber hinaus verlangen einige Web-APIs die Zustimmung des Nutzers, bevor sie aktiviert werden. Ein Beispiel ist die Notifications API, die über ein Pop-up-Dialogfenster die Erlaubnis einholt:

Die Web Audio und HTMLMediaElement APIs unterliegen einem Sicherheitsmechanismus, der als autoplay policy bezeichnet wird — dies bedeutet im Grunde, dass Sie nicht automatisch Audio abspielen können, wenn eine Seite geladen wird — Sie müssen es Ihren Benutzern ermöglichen, die Audiowiedergabe durch ein Steuerelement wie eine Schaltfläche zu initiieren. Dies wird getan, weil automatisch abgespieltes Audio in der Regel sehr störend ist und wir unseren Nutzern wirklich nicht zumuten sollten, es zu ertragen.

An diesem Punkt sollten Sie eine gute Vorstellung davon haben, was APIs sind, wie sie funktionieren und was Sie damit in Ihrem JavaScript-Code machen können. Sie sind wahrscheinlich gespannt darauf, tatsächlich unterhaltsame Dinge mit spezifischen APIs zu tun, also los geht's! Als Nächstes schauen wir uns Video- und Audio-APIs an.

• Übersicht: Client-seitige Web-APIs
• Weiter