Einführung in Web-APIs

Application Programming Interfaces (APIs) sind Konstruktionen, die in Programmiersprachen verfügbar gemacht werden, um es Entwicklern zu ermöglichen, komplexe Funktionalitäten leichter zu erstellen. Sie abstrahieren komplexeren Code von Ihnen und bieten dafür einfachere Syntax an.

Stellen Sie sich als Beispiel aus der realen Welt die Stromversorgung in Ihrem Haus oder Ihrer Wohnung vor. 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.

In gleicher Weise, wenn Sie z.B. 3D-Grafiken programmieren möchten, ist es viel einfacher, dies mit einer API zu tun, die in einer höherstufigen Sprache wie JavaScript oder Python geschrieben ist, anstatt direkt Low-Level-Code (z.B. C oder C++) zu schreiben, der die GPU oder andere Grafikfunktionen des Computers direkt steuert.

Clientseitiges JavaScript hat besonders viele APIs zur Verfügung — diese sind nicht Teil der JavaScript-Sprache selbst, sondern sie bauen auf der Kern-JavaScript-Sprache auf und bieten Ihnen zusätzliche Superfunktionen, die Sie in Ihrem JavaScript-Code verwenden können. Sie fallen im Allgemeinen in zwei Kategorien:

• Browser-APIs sind in Ihrem Webbrowser integriert und können Daten vom Browser und der umliegenden Computerumgebung bereitstellen und damit komplexe, nützliche Dinge tun. Zum Beispiel bietet die Web Audio API JavaScript-Konstrukte zur Manipulation von Audio im Browser — nehmen Sie einen Audiotrack, ändern Sie seine Lautstärke, wenden Sie Effekte darauf an, etc. Im Hintergrund verwendet der Browser tatsächlich einige komplexe niedrigstufige Codes (z.B. C++ oder Rust), um die eigentliche Audiobearbeitung durchzuführen. Aber auch hier wird Ihnen diese Komplexität durch die API verborgen.
• Drittanbieter-APIs sind standardmäßig nicht im Browser integriert, und Sie müssen ihren Code und Informationen in der Regel irgendwo im Web abrufen. Zum Beispiel ermöglicht die Google Maps API, eine interaktive Karte zu Ihrem Büro auf Ihrer Website anzuzeigen. Sie bietet einen speziellen Satz von Konstrukten, die Sie verwenden können, um den Google Maps-Dienst abzufragen und spezifische Informationen zurückzugeben.

Oben haben wir besprochen, was clientseitige JavaScript-APIs sind und wie sie zur JavaScript-Sprache in Beziehung stehen. Lassen Sie uns dies noch einmal zusammenfassen, um es klarer zu machen, und auch erwähnen, wo andere JavaScript-Tools passen:

• JavaScript — Eine hochstufige Skriptsprache, die in Browsern integriert ist und es Ihnen ermöglicht, Funktionalität auf Webseiten oder in Apps zu implementieren. Beachten Sie, dass JavaScript auch in anderen Programmierumgebungen verfügbar ist, wie z.B. Node.
• Browser-APIs — Konstrukte, die in den Browser integriert sind und auf der JavaScript-Sprache aufbauen, um Funktionalität einfacher zu implementieren.
• Drittanbieter-APIs — Konstrukte, die in Drittanbieter-Plattformen (z.B. Disqus, Facebook) integriert sind und es ermöglichen, bestimmte Funktionen dieser Plattformen auf eigenen Webseiten zu nutzen (zum Beispiel Disqus-Kommentare auf einer Webseite anzuzeigen).
• JavaScript-Bibliotheken — In der Regel eine oder mehrere JavaScript-Dateien, die benutzerdefinierte Funktionen enthalten, die Sie an Ihre Webseite anhängen können, um das Schreiben häufig vorkommender Funktionalitäten zu beschleunigen oder zu ermöglichen. Beispiele sind jQuery, Mootools und React.
• JavaScript-Frameworks — Der nächste Schritt über Bibliotheken hinaus, JavaScript-Frameworks (z.B. Angular und Ember) tendieren dazu, Pakete von HTML, CSS, JavaScript und anderen Technologien zu sein, die Sie installieren und dann verwenden, um eine vollständige Webanwendung von Grund auf neu zu schreiben. Der Hauptunterschied zwischen einer Bibliothek und einem Framework ist die „Inversion of Control“. Wenn Sie eine Methode aus einer Bibliothek aufrufen, haben Sie die Kontrolle. Bei einem Framework wird die Kontrolle umgekehrt: das Framework ruft Ihren Code auf.

Es gibt eine Vielzahl von APIs in modernen Browsern, die es Ihnen ermöglichen, viele unterschiedliche Dinge in Ihrem Code zu tun. Sie können dies sehen, wenn Sie einen Blick auf die MDN APIs Index-Seite werfen.

Insbesondere die am häufigsten verwendeten Kategorien von Browser-APIs (die wir in diesem Modul ausführlicher behandeln werden) sind:

• APIs zur Manipulation von Dokumenten, die im Browser geladen sind. Das offensichtlichste Beispiel ist das DOM (Document Object Model) API, das 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 neuer Inhalt angezeigt wird, ist das zum Beispiel das DOM in Aktion. Erfahren Sie mehr über diese Art von APIs in Manipulating documents.
• 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 große Auswirkungen auf die Leistung und das Verhalten von Sites – wenn Sie nur eine Aktienliste oder eine Liste verfügbarer neuer Geschichten aktualisieren müssen, kann es das Gefühl der Seite oder App viel reaktionsschneller und „schneller“ machen, wenn dies sofort geschehen kann, ohne die gesamte Seite vom Server neu laden zu müssen. Das Haupt-API, das dafür verwendet wird, ist das Fetch API, obwohl älterer Code möglicherweise immer noch das XMLHttpRequest API verwendet. Sie könnten auch auf den Begriff AJAX stoßen, der diese Technik beschreibt. Erfahren Sie mehr über solche APIs in Fetching data from the server.
• APIs zum Zeichnen und Manipulieren von Grafiken werden in Browsern weit unterstützt – die beliebtesten sind Canvas und WebGL, die es Ihnen ermöglichen, die Pixeldaten, die in einem HTML-<canvas>-Element enthalten sind, programmatisch zu aktualisieren, um 2D- und 3D-Szenen zu erstellen. Zum Beispiel könnten Sie Formen wie Rechtecke oder Kreise zeichnen, ein Bild auf die Leinwand importieren und einen Filter wie Sepia oder Graustufen darauf anwenden, indem Sie das Canvas API verwenden oder eine komplexe 3D-Szene mit Beleuchtung und Texturen mit WebGL erstellen. Solche APIs werden oft mit APIs zur Erstellung von Animationsschleifen (wie window.requestAnimationFrame()) und anderen kombiniert, um ständig aktualisierte Szenen wie Cartoons und Spiele zu schaffen.
• Audio- und Video-APIs wie HTMLMediaElement, die Web Audio API und WebRTC ermöglichen Ihnen wirklich interessante Dinge mit Multimedia zu tun, wie z.B. benutzerdefinierte Benutzeroberflächen-Steuerelemente für die Wiedergabe von Audio und Video zu erstellen, Textspuren wie Untertitel und Untertitel zusammen mit Ihren Videos anzuzeigen, Video von Ihrer Webcam zu erfassen, um es über ein Canvas zu manipulieren (siehe oben) oder es auf einem anderen Computer in einer Webkonferenz anzuzeigen, oder Effekte auf Audiotracks hinzuzufügen (wie Verstärkung, Verzerrung, Lautstärkenverschiebung usw.).
• Geräte-APIs ermöglichen Ihnen, mit Hardware-Geräten zu interagieren: z.B. Zugriff auf das GPS des Geräts, um die Position des Benutzers mit der Geolocation API zu ermitteln.
• Client-seitige Speicher-APIs ermöglichen Ihnen, Daten auf der Client-Seite zu speichern, sodass Sie eine App erstellen können, die ihren Zustand zwischen Seitenladevorgängen speichert und vielleicht sogar funktioniert, wenn das Gerät offline ist. Es gibt mehrere verfügbare Optionen, z.B. einfache Name/Wert-Speicherung mit dem Web Storage API und komplexer Datenbankspeicherung mit dem IndexedDB API.

Drittanbieter-APIs kommen in einer großen Vielfalt; einige der populäreren, die Sie früher oder später wahrscheinlich verwenden werden, sind:

• Karten-APIs, wie Mapquest und die Google Maps API, die es Ihnen erlauben, alle möglichen Dinge mit Karten auf Ihren Webseiten zu tun.
• Die Facebook-Suite von APIs, die es Ihnen ermöglicht, verschiedene Teile des Facebook-Ökosystems zu nutzen, um Ihre App zu verbessern, z.B. durch die Bereitstellung von App-Logins über Facebook-Logins, die Annahme von In-App-Zahlungen, die Durchführung gezielter Werbekampagnen usw.
• Die Telegram-APIs, die es Ihnen ermöglichen, Inhalte aus Telegram-Kanälen auf Ihrer Website einzubetten, zusätzlich zur Unterstützung von Bots.
• Die YouTube-API, die es Ihnen ermöglicht, YouTube-Videos auf Ihrer Seite einzubetten, YouTube zu durchsuchen, Playlisten zu erstellen und mehr.
• Die Pinterest-API, die Tools zum Verwalten von Pinterest-Boards und Pins bereitstellt, um sie auf Ihrer Website einzuschließen.
• Die Twilio-API, die einen Rahmen für den Aufbau von Sprach- und Videoanruffunktionen in Ihrer App, das Senden von SMS/MMS von Ihren Apps und mehr bietet.
• Die Disqus-API, die eine Kommentierungsplattform bereitstellt, die in Ihre Seite integriert werden kann.
• Die Mastodon-API, die es Ihnen ermöglicht, Funktionen des Mastodon-Social-Networks programmatisch zu manipulieren.
• Die IFTTT-API, die es ermöglicht, mehrere APIs über eine Plattform zu integrieren.

Verschiedene JavaScript-APIs funktionieren auf leicht unterschiedliche Weise, aber im Allgemeinen haben sie gemeinsame Funktionen und ähnliche Themen, wie sie funktionieren.

Ihr Code interagiert mit APIs unter Verwendung eines oder mehrerer JavaScript-Objekte, die als Container für die vom API verwendeten Daten (enthalten in Objekteigenschaften) und die vom API bereitgestellte Funktionalität (enthalten in Objektmethoden) dienen.

Kommen wir 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 ein Audio-Graph darstellt, der verwendet werden kann, um Audio zu manipulieren, das innerhalb des Browsers abgespielt wird, und eine Reihe von Methoden und Eigenschaften bietet, um dieses Audio zu manipulieren.
• MediaElementAudioSourceNode, das ein <audio>-Element darstellt, das den Ton enthält, den Sie innerhalb des Audio-Kontextes abspielen und manipulieren möchten.
• AudioDestinationNode, das das Ziel des Audios darstellt, d.h. das Gerät auf Ihrem Computer, das es tatsächlich ausgeben wird – normalerweise Ihre Lautsprecher oder Kopfhörer.

Wie interagieren diese Objekte? Wenn Sie sich unser einfaches Webaudio-Beispiel ansehen (sehen Sie es auch live an), sehen Sie zuerst folgendes 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 zunächst ein <audio>-Element ein, mit dem wir ein MP3 auf der Seite einbetten. Wir fügen keine Standard-Browser-Steuerelemente ein. Als nächstes 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 werden, um die Lautstärke des Tracks während der Wiedergabe anzupassen.

Schauen wir uns als nächstes das JavaScript für dieses Beispiel an.

Wir beginnen mit der Erstellung einer AudioContext-Instanz, innerhalb derer wir unseren Track manipulieren:

const audioCtx = new AudioContext();

Als nächstes erstellen wir Konstanten, die Referenzen auf unsere <audio>, <button> und <input>-Elemente speichern, und verwenden die Methode AudioContext.createMediaElementSource(), um ein MediaElementAudioSourceNode zu erstellen, das die Quelle unseres Audios darstellt – das <audio>-Element, von dem abgespielt wird:

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

const audioSource = audioCtx.createMediaElementSource(audioElement);

Als Nächstes fügen wir ein paar Ereignishandler ein, die dazu dienen, zwischen Abspielen und Pausieren zu wechseln, wenn der Knopf gedrückt wird, und die Anzeige zurückzusetzen, wenn das Lied zu Ende gespielt wurde:

// 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 Methode AudioContext.createGain(), das verwendet werden kann, um die Lautstärke von Audio, das durch sie geführt wird, anzupassen, und erstellen einen weiteren Ereignishandler, der den Wert der Lautstärke (Gain) des Audio-Graphs ändert, wann immer sich der Wert des Schiebereglers ändert:

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

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

Das letzte, was zu tun ist, damit das funktioniert, ist, die verschiedenen Knoten im Audio-Graphen zu verbinden, was mit der Methode AudioNode.connect() gemacht wird, die auf jedem Knotentyp verfügbar ist:

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

Das Audio beginnt in der Quelle, die dann mit dem Gain-Knoten verbunden wird, damit die Lautstärke des Audios angepasst werden kann. Der Gain-Knoten wird dann mit dem Zielknoten verbunden, sodass der Ton auf Ihrem Computer abgespielt werden kann (die AudioContext.destination-Eigenschaft stellt das dar, was auch immer der standardmäßige AudioDestinationNode auf der Hardware Ihres Computers verfügbar ist, z.B. Ihre Lautsprecher).

Bei der Verwendung einer API sollten Sie sichergehen, dass Sie wissen, wo der Einstiegspunkt für die 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 auch einen einfachen Einstiegspunkt — seine Funktionen tendieren dazu, sich am Document-Objekt oder einer Instanz eines HTML-Elements zu befinden, das Sie auf irgendeine 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

Das Canvas API erfordert auch, ein Kontextobjekt zu erhalten, um Dinge zu manipulieren, obwohl in diesem Fall ein grafischer Kontext gemeint ist, nicht ein Audio-Kontext. Sein Kontextobjekt wird durch das Abrufen einer Referenz zum <canvas>-Element, das Sie zeichnen möchten, und dann durch den Aufruf seiner Methode HTMLCanvasElement.getContext() erstellt:

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

Alles, was wir auf dem Canvas tun möchten, wird dann durch den Aufruf von Eigenschaften und Methoden des Kontextobjekts (das eine Instanz von CanvasRenderingContext2D ist) erreicht, 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 bereits zuvor in diesem Kurs Ereignisse behandelt in unserem Einführung zu Ereignissen-Artikel, der im Detail betrachtet, was client-seitige Webereignisse sind und wie sie in Ihrem Code verwendet werden. Wenn Sie mit der Funktionsweise von client-seitigen Web-API-Ereignissen noch nicht vertraut sind, sollten Sie diesen Artikel zuerst lesen, bevor Sie fortfahren.

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

Wir haben bereits eine Reihe von Ereignishandlern in unserem Web Audio API-Beispiel oben 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";
});

WebAPI-Funktionen unterliegen den gleichen Sicherheitsüberlegungen wie JavaScript und andere Webtechnologien (zum Beispiel Same-Origin-Policy), jedoch haben sie manchmal zusätzliche Sicherheitsmechanismen. Beispielsweise funktionieren einige der moderneren WebAPIs nur auf Seiten, die über HTTPS bereitgestellt werden, da sie potenziell sensible Daten übertragen (Beispiele schließen Service Worker und Push ein).

Zusätzlich fragen einige WebAPIs die Benutzerlaubnis, um aktiviert zu werden, sobald Aufrufe an sie in Ihrem Code gemacht werden. Ein Beispiel ist die Notifications API, die um Erlaubnis über ein Popup-Dialogfeld bittet:

Die Web Audio und HTMLMediaElement APIs unterliegen einem Sicherheitsmechanismus namens Autoplay-Policy — das bedeutet im Wesentlichen, dass Sie Audio nicht automatisch abspielen können, wenn eine Seite geladen wird — Sie müssen Ihren Benutzern ermöglichen, die Audiowiedergabe über eine Steuerung wie einen Knopf zu initiieren. Dies wird getan, weil das automatische Abspielen von Audio normalerweise wirklich störend ist und wir unsere Benutzer dem nicht aussetzen sollten.

An diesem Punkt sollten Sie eine gute Vorstellung davon haben, was APIs sind, wie sie funktionieren und was Sie mit ihnen in Ihrem JavaScript-Code tun können. Sie sind wahrscheinlich darauf gespannt, tatsächlich einige lustige Dinge mit spezifischen APIs zu machen, also los geht's! Als nächstes werden wir uns mit der Manipulation von Dokumenten mit dem Document Object Model (DOM) befassen.

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