Einführung in Web-APIs

Application Programming Interfaces (APIs) sind Konstrukte, die in Programmiersprachen zur Verfügung gestellt werden, um es Entwicklern zu erleichtern, komplexe Funktionalitäten zu erstellen. Sie abstrahieren komplexeren Code weg und bieten stattdessen eine einfachere Syntax.

Ein Beispiel aus der realen Welt ist die Stromversorgung in Ihrem Haus, Ihrer Wohnung oder anderen Wohnräumen. 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 mit der Stromversorgung zu verbinden — das wäre sehr ineffizient und, wenn Sie kein Elektriker sind, schwierig und gefährlich.

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

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

Client-seitigem JavaScript stehen viele APIs zur Verfügung — diese sind nicht Teil der JavaScript-Sprache selbst, sondern sie basieren auf der Kern-JavaScript-Sprache und bieten Ihnen zusätzliche Superkräfte zur Nutzung in Ihrem JavaScript-Code. Sie fallen im Allgemeinen in zwei Kategorien:

• Browser-APIs sind in Ihren Webbrowser integriert und sind in der Lage, Daten aus dem Browser und der umgebenden Computerumgebung zu nutzen und hilfreiche komplexe Dinge damit zu tun. Zum Beispiel bietet die Web Audio API JavaScript-Konstrukte zur Manipulation von Audio im Browser — einen Audiotrack aufnehmen, seine Lautstärke ändern, Effekte darauf anwenden usw. Im Hintergrund verwendet der Browser tatsächlich einige komplexe niedrigere Codeebenen (z.B. C++ oder Rust), um die eigentliche Audiobearbeitung durchzuführen. Aber auch hier wird diese Komplexität durch die API von Ihnen entfernt.
• Drittanbieter-APIs sind standardmäßig nicht in den Browser integriert, und Sie müssen in der Regel ihren Code und Informationen von irgendwo aus dem Web abrufen. Zum Beispiel ermöglicht Ihnen die Google Maps API Dinge wie das Anzeigen einer interaktiven Karte zu Ihrem Büro auf Ihrer Website. Es bietet ein spezielles Set von Konstruktionen, mit denen Sie den Google Maps-Dienst abfragen und bestimmte Informationen zurückgeben können.

Oben haben wir darüber gesprochen, was client-seitige JavaScript-APIs sind und wie sie zur JavaScript-Sprache stehen. Lassen Sie uns dies zusammenfassen, um es klarer zu machen, und auch erwähnen, wo andere JavaScript-Tools passen:

• JavaScript — Eine hochniveaulige Skriptsprache, die in Browser integriert ist und Ihnen ermöglicht, Funktionalitäten auf Webseiten/Apps zu implementieren. Beachten Sie, dass JavaScript auch in anderen Programmierumgebungen verfügbar ist, wie Node.
• Browser-APIs — Konstrukte, die im Browser eingebaut sind und auf der JavaScript-Sprache aufbauen und die Ihnen ermöglichen, Funktionalitäten einfacher zu implementieren.
• Drittanbieter-APIs — Konstrukte, die in Drittanbieterplattformen eingebaut sind (z.B. Disqus, Facebook), und es Ihnen ermöglichen, einige der Plattformfunktionalitäten auf Ihren eigenen Webseiten zu nutzen (zum Beispiel Ihre Disqus-Kommentare auf einer Webseite anzeigen).
• JavaScript-Bibliotheken — In der Regel eine oder mehrere JavaScript-Dateien, die benutzerdefinierte Funktionen enthalten, die Sie an Ihre Webseite anhängen können, um gebräuchliche Funktionalitäten zu beschleunigen oder zu ermöglichen. Beispiele sind jQuery, Mootools und React.
• JavaScript-Frameworks — Der nächste Schritt über Bibliotheken, JavaScript-Frameworks (z.B. Angular und Ember) neigen dazu, Pakete von HTML, CSS, JavaScript und anderen Technologien zu sein, die Sie installieren und dann verwenden, um eine komplette Webanwendung von Grund auf neu zu schreiben. Der wesentliche Unterschied zwischen einer Bibliothek und einem Framework ist die "Inversion of Control". Wenn ein Entwickler eine Methode aus einer Bibliothek aufruft, hat der Entwickler die Kontrolle. Bei einem Framework ist die Kontrolle umgekehrt: das Framework ruft den Code des Entwicklers auf.

Es gibt eine riesige Anzahl von APIs, die in modernen Browsern verfügbar sind und die es Ihnen ermöglichen, eine Vielzahl von Dingen in Ihrem Code zu tun. Sie können dies sehen, indem Sie sich die MDN APIs Index-Seite ansehen.

Insbesondere sind die gängigsten Kategorien von Browser-APIs, die Sie verwenden werden (und die wir in diesem Modul ausführlicher behandeln werden),:

• 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 erstellen, entfernen und ändern, neue Stile dynamisch auf Ihre Seite anwenden usw. Jedes Mal, wenn ein Popup-Fenster auf einer Seite erscheint oder ein neuer Inhalt angezeigt wird, zum Beispiel, ist das das DOM in Aktion. Weitere Informationen zu diesen Arten von API finden Sie in der DOM-Scripting-Einführung.
• APIs, die Daten vom Server abrufen, um kleine Abschnitte einer Webseite allein zu aktualisieren, werden sehr häufig verwendet. Dieses scheinbar kleine Detail hat einen enormen Einfluss auf die Leistung und das Verhalten von Seiten gehabt — wenn Sie nur eine Aktienliste oder eine Liste neuer verfügbarer Geschichten aktualisieren müssen, dies sofort zu tun, ohne die gesamte Seite vom Server neu laden zu müssen, kann die Seite oder App viel reaktionsfreudiger und "flinker" wirken. Die Haupt-API, die dafür verwendet wird, ist die Fetch API, obwohl älterer Code möglicherweise immer noch die XMLHttpRequest API verwendet. Sie können auch auf den Begriff AJAX stoßen, der diese Technik beschreibt. Erfahren Sie mehr über solche APIs in Netzwerkanfragen mit JavaScript durchführen.
• APIs zur Zeichnung und Manipulation von Grafiken werden in Browsern weitgehend unterstützt — die beliebtesten sind Canvas und WebGL, die es Ihnen ermöglichen, die Pixeldaten, die im HTML-<canvas>-Element enthalten sind, programmgesteuert zu aktualisieren, um 2D- und 3D-Szenen zu erzeugen. Zum Beispiel könnten Sie Formen wie Rechtecke oder Kreise zeichnen, ein Bild auf die Leinwand importieren und einen Filter darauf anwenden, wie Sepia oder Graustufen, mit der Canvas-API, oder eine komplexe 3D-Szene mit Licht und Texturen mit WebGL schaffen. Solche APIs werden oft mit APIs kombiniert, die Animationsschleifen erstellen (wie window.requestAnimationFrame()) und andere, um ständig aktualisierte Szenen wie Zeichentrickfilme und Spiele zu machen.
• Audio- und Video-APIs wie HTMLMediaElement, die Web Audio API und WebRTC ermöglichen Ihnen, wirklich interessante Dinge mit Multimedia zu tun, wie zum Beispiel benutzerdefinierte UI-Steuerelemente zum Abspielen von Audio und Video zu erstellen, Textspuren, wie Untertitel und Untertitel zu Ihren Videos anzuzeigen, Video von Ihrer Webcam zu nehmen, um es über eine Leinwand (siehe oben) zu manipulieren oder auf dem Computer eines anderen in einer Webkonferenz anzuzeigen, oder Effekte auf Audiospuren hinzuzufügen (wie Gain, Verzerrung, Panning usw.).
• Device APIs ermöglichen Ihnen die Interaktion mit der Gerätehardware: Zum Beispiel das Zugreifen auf das GPS des Geräts, um die Position des Benutzers zu finden mit der Geolocation API.
• Client-seitige Speicher-APIs ermöglichen Ihnen das Speichern von Daten auf der Client-Seite, sodass Sie eine App erstellen können, die ihren Zustand zwischen Seitenaktualisierungen speichert und möglicherweise sogar funktioniert, wenn das Gerät offline ist. Es gibt mehrere Optionen zur Verfügung, z.B. einfache Name/Wert-Speicherung mit der Web Storage API und komplexere Datenbank-Speicherung mit der IndexedDB API.

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

• Karten-APIs, wie Mapquest und die Google Maps API, die es Ihnen ermöglichen, alle möglichen Dinge mit Karten auf Ihren Webseiten zu tun.
• Die Facebook API Suite, die es Ihnen ermöglichen, verschiedene Teile des Facebook-Ökosystems zu nutzen, um Ihre App zu unterstützen, wie zum Beispiel App-Login über Facebook-Login, Annahme von In-App-Zahlungen, Ausrollen 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, Wiedergabelisten zu erstellen und mehr.
• Die Pinterest API, die Tools zur Verwaltung von Pinterest-Boards und -Pins bietet, um sie in Ihre Website einzufügen.
• Die Twilio API, die ein Framework zum Aufbau von Sprach- und Videoanruffunktionalität in Ihrer App bietet, das Senden von SMS/MMS von Ihren Apps aus und mehr.
• Die Disqus API, die eine Kommentarplattform bereitstellt, die in Ihre Seite 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, mehrere APIs über eine Plattform zu integrieren.

Verschiedene JavaScript-APIs funktionieren leicht unterschiedlich, aber im Allgemeinen haben sie gemeinsame Merkmale und ähnliche Themen, wie sie funktionieren.

Ihr Code interagiert mit APIs, indem er ein oder mehrere JavaScript-Objekte verwendet, die als Container für die von der API verwendeten Daten (enthalten in den Objektvariablen) und für die von der API bereitgestellte Funktionalität (enthalten in den Objektmethoden) dienen.

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

• AudioContext, das einen Audio-Graphen darstellt, der zur Manipulation von Audio verwendet werden kann, das im Browser abgespielt wird, und der über eine Anzahl von Methoden und Eigenschaften verfügt, um dieses Audio zu manipulieren.
• MediaElementAudioSourceNode, das ein <audio>-Element darstellt, das den Klang enthält, den Sie abspielen und im Audio-Kontext 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 (Siehe es auch live) ansehen, 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 inkludieren zunächst ein <audio>-Element, mit dem wir eine MP3-Datei in die Seite einbetten. Wir inkludieren keine Standard-Browsersteuerungen. Als Nächstes fügen wir einen <button> ein, den wir verwenden werden, um die Musik zu starten 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 nun das JavaScript für dieses Beispiel an.

Wir beginnen, indem wir eine AudioContext-Instanz erstellen, in der wir unseren Track manipulieren:

const audioCtx = new AudioContext();

Als Nächstes erstellen wir Konstanten, die Referenzen zu unseren <audio>, <button>, und <input>-Elementen speichern, und verwenden die Methode AudioContext.createMediaElementSource(), um ein MediaElementAudioSourceNode zu erstellen, das die Quelle unseres Audios darstellt — das <audio>-Element, von dem aus 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 Event-Handler hinzu, die dazu dienen, zwischen Abspielen und Pause zu wechseln, wenn der Knopf gedrückt wird, und die Anzeige zurück zum Anfang zu setzen, 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 mit der Methode AudioContext.createGain(), das zur Anpassung der Lautstärke des durchgeleiteten Audios verwendet werden kann, und erstellen einen weiteren Event-Handler, der den Wert der Verstärkung des Audio-Graphen (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 zu tun ist, damit dies funktioniert, ist, die verschiedenen Knoten im Audio-Graphen zu verbinden, was mit der AudioNode.connect()-Methode für jeden Knotentyp gemacht wird:

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

Das Audio beginnt in der Quelle, die dann mit dem Verstärkungsknoten verbunden ist, damit die Lautstärke des Audios angepasst werden kann. Der Verstärkungsknoten wird dann mit dem Zielknoten verbunden, damit der Ton auf Ihrem Computer abgespielt werden kann (die AudioContext.destination-Eigenschaft stellt in der Regel das Standard- AudioDestinationNode dar, das auf der Hardware Ihres Computers verfügbar ist, z.B. Ihre Lautsprecher).

Bei der Verwendung einer API sollten Sie sicherstellen, dass Sie wissen, wo der Einstiegspunkt für die API liegt. In der Web Audio API ist dies ziemlich einfach — es ist das AudioContext-Objekt, das verwendet werden muss, um überhaupt Audio zu manipulieren.

Das Document Object Model (DOM) API hat ebenfalls einen einfachen Einstiegspunkt — seine Funktionen werden in der Regel an das Document-Objekt oder eine Instanz eines HTML-Elements angehängt, 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 hängt auch davon ab, ein Kontextobjekt zu erhalten, das verwendet wird, um Dinge zu manipulieren, obwohl in diesem Fall ein grafischer Kontext und kein audiovisueller Kontext betroffen ist. Sein Kontextobjekt wird erstellt, indem eine Referenz auf das <canvas>-Element bekommen wird, auf dem Sie zeichnen möchten, und dann die Methode HTMLCanvasElement.getContext() aufgerufen wird:

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

Alles, was wir mit der Leinwand machen möchten, wird dann durch Aufrufen 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 zu einem früheren Zeitpunkt im Kurs über Events in unserem Artikel Einführung in Events gesprochen, der im Detail untersucht, was client-seitige Web-Events sind und wie sie in Ihrem Code verwendet werden. Wenn Sie nicht bereits damit vertraut sind, wie client-seitige Web-API-Events funktionieren, sollten Sie diesen Artikel zuerst lesen, bevor Sie fortfahren.

Einige Web-APIs enthalten keine Events, aber die meisten enthalten zumindest einige. Die Eigenschaften von Event-Handlern, die es uns ermöglichen, Funktionen auszuführen, wenn Events ausgelöst werden, sind in unserem Referenzmaterial in separaten "Event-Handler"-Abschnitten aufgeführt.

Wir haben bereits eine Reihe von Event-Handlern 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";
});

Web-API-Funktionen unterliegen den gleichen Sicherheitsüberlegungen wie JavaScript und andere Web-Technologien (zum Beispiel Same-Origin-Policy), aber sie verfügen manchmal über zusätzliche Sicherheitsmechanismen. 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 fordern einige Web-APIs Erlaubnis an, um von den Benutzern aktiviert zu werden, sobald Aufrufe an sie in Ihrem Code gemacht werden. Ein Beispiel hierfür ist die Benachrichtigungs-API, die mit einem Dialogfeld um Erlaubnis bittet:

Die Web-Audio- und HTMLMediaElement-APIs unterliegen einem Sicherheitsmechanismus, der genannt autoplay policy — dies bedeutet im Wesentlichen, dass Sie nicht automatisch Audio abspielen können, wenn eine Seite geladen wird — Sie müssen Ihren Benutzern erlauben, die Wiedergabe von Audio über eine Steuerung wie einen Knopf zu starten. Dies wird getan, weil automatisch abgespieltes Audio in der Regel wirklich störend ist und wir unsere Benutzer nicht dem aussetzen sollten.

Zu diesem Zeitpunkt 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 gespannt darauf, tatsächlich einige unterhaltsame Dinge mit spezifischen APIs zu machen, also lassen Sie uns loslegen! Als Nächstes werden wir uns Video- und Audio-APIs ansehen.

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