Einführung in Web-APIs

Application Programming Interfaces (APIs) sind Konstrukte, die in Programmiersprachen verfügbar gemacht werden, um Entwicklern die Erstellung komplexer Funktionalitäten zu erleichtern. Sie abstrahieren komplexeren Code von Ihnen und bieten eine einfachere Syntax als Ersatz.

Ein Beispiel aus der realen Welt ist die Stromversorgung in Ihrem Haus, Ihrer Wohnung oder einem anderen Wohnort. 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 beispielsweise einige 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 in einer niedrigstufigen Sprache (z. B. C oder C++), die die GPU oder andere Grafikfunktionen des Computers direkt steuert.

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

• Browser-APIs sind in Ihrem Webbrowser integriert und können Daten aus dem Browser und der Umgebung des Computers abrufen und damit nützliche, komplexe Aufgaben ausführen. Zum Beispiel bietet die Web Audio API JavaScript-Konstrukte zur Manipulation von Audio im Browser — zum Beispiel einer Audiospur, Änderung ihrer Lautstärke, Anwendung von Effekten usw. Im Hintergrund verwendet der Browser tatsächlich einige komplexe, niedrigstufige Codes (z. B. C++ oder Rust), um die eigentliche Audiobearbeitung auszuführen. Aber auch diese Komplexität wird von Ihnen über die API abstrahiert.
• Drittanbieter-APIs sind standardmäßig nicht im Browser eingebaut und Sie müssen deren Code und Informationen in der Regel irgendwo 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. Sie bietet ein spezielles Set von Konstrukten, die Sie verwenden können, um den Google Maps-Dienst abzufragen und spezifische Informationen zurückzugeben.

Wie bereits oben erwähnt, haben wir über Client-seitige JavaScript-APIs und ihre Beziehung zur JavaScript-Sprache gesprochen. Lassen Sie uns dies noch einmal wiederholen, um es klarer zu machen, und auch erwähnen, wo andere JavaScript-Tools hineinpassen:

• JavaScript — Eine hochstufige Skriptsprache, die in Browser integriert ist und es ermöglicht, Funktionalität in 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 integriert sind und auf der JavaScript-Sprache aufbauen, um die Implementierung von Funktionalitäten zu erleichtern.
• Drittanbieter-APIs — Konstrukte, die in Drittanbieter-Plattformen (z. B. Disqus, Facebook) integriert sind und es Ihnen ermöglichen, einige der Funktionen dieser Plattformen in Ihre eigenen Webseiten zu verwenden (z. B. das Anzeigen Ihrer Disqus-Kommentare auf einer Webseite).
• 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äufiger 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) sind in der Regel Pakete aus HTML, CSS, JavaScript und anderen Technologien, die Sie installieren und dann verwenden, um eine vollständige Webanwendung von Grund auf zu schreiben. Der Hauptunterschied zwischen einer Bibliothek und einem Framework ist die "Inversion of Control". Bei einem Methodenaufruf aus einer Bibliothek hat der Entwickler die Kontrolle. Bei einem Framework sind die Kontrolle "umgedreht": das Framework ruft den Code des Entwicklers auf.

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

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

• APIs zur Manipulation von Dokumenten, die in den Browser geladen werden. Das offensichtlichste Beispiel ist die DOM (Document Object Model) API, die es Ihnen ermöglicht, HTML und CSS zu manipulieren — Erstellen, Entfernen und Ändern von HTML, dynamisches Anwenden neuer Styles auf Ihre Seite usw. Jedes Mal, wenn Sie ein Popup-Fenster auf einer Seite sehen, das angezeigt wird oder neuer Inhalt angezeigt wird, ist das zum Beispiel das DOM in Aktion. Erfahren Sie mehr über diese Art von API in der Einführung in DOM-Scripting.
• APIs, die Daten vom Server abrufen, um kleine Abschnitte einer Webseite selbst zu aktualisieren, werden sehr häufig verwendet. Dieses scheinbar kleine Detail hat einen großen Einfluss auf die Leistung und das Verhalten von Seiten — wenn Sie nur ein Aktienlisting oder eine Liste verfügbarer neuer Geschichten aktualisieren müssen, kann das sofortige Aktualisieren, ohne die gesamte Seite vom Server neu zu laden, die Seite oder App reaktionsschneller und "schnell" wirken lassen. Die Haupt-API, die dafür verwendet wird, ist die Fetch API, obwohl älterer Code möglicherweise noch die XMLHttpRequest-API verwendet. Dabei können Sie auch auf den Begriff AJAX stoßen, der diese Technik beschreibt. Erfahren Sie mehr über solche APIs in Netzwerkanfragen mit JavaScript erstellen.
• APIs zum Zeichnen und Manipulieren von Grafiken werden in Browsern weithin unterstützt — die beliebtesten sind Canvas und WebGL, die es Ihnen ermöglichen, die Pixel-Daten, die ein HTML-<canvas>-Element enthalten kann, zu programmatisch zu aktualisieren, um 2D- und 3D-Szenen zu erstellen. Beispielsweise können Sie Formen wie Rechtecke oder Kreise zeichnen, ein Bild auf die Leinwand importieren und einen Filter wie Sepia oder Graustufen mit der Canvas-API anwenden oder mit WebGL eine komplexe 3D-Szene mit Beleuchtung und Texturen 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 erstellen.
• Audio- und Video-APIs wie HTMLMediaElement, die Web Audio API und WebRTC ermöglichen es Ihnen, wirklich interessante Dinge mit Multimedia zu tun, wie benutzerdefinierte Bedienungselemente zum Abspielen von Audio und Video zu erstellen, Textspuren wie Untertitel und Untertitel mit Ihren Videos anzuzeigen, Video von Ihrer Webcam zu erfassen, das über eine Leinwand manipuliert oder auf dem Computer eines anderen im Rahmen einer Webkonferenz angezeigt werden kann, oder Effekte auf Audiotracks hinzuzufügen (wie Gain, Verzerrung, Panorama usw.).
• Geräte-APIs ermöglichen es Ihnen, mit der Gerätehardware zu interagieren: Zum Beispiel auf das GPS des Geräts zuzugreifen, um die Position des Benutzers mit der Geolocation-API zu finden.
• Client-seitige Speicher-APIs ermöglichen Ihnen die Speicherung von Daten auf der Client-Seite, sodass Sie eine App erstellen können, die ihren Zustand zwischen Seitenladevorgängen speichert und vielleicht sogar arbeitet, wenn das Gerät offline ist. Es gibt mehrere verfügbare Optionen, zum Beispiel die einfache Name/Wert-Speicherung mit der Web Storage API und die komplexere Datenbankspeicherung mit der 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 Ihnen ermöglichen, allerlei Dinge mit Karten auf Ihren Webseiten zu machen.
• Die Facebook-Suite von APIs, die Ihnen ermöglicht, verschiedene Teile des Facebook-Ökosystems zu nutzen, um Ihre App zu bereichern, z. B. durch Anbieten einer App-Anmeldung mit Facebook-Login, das Akzeptieren von In-App-Zahlungen, das Ausrollen zielgerichteter Werbekampagnen usw.
• Die Telegram-APIs, die Ihnen ermöglichen, Inhalte aus Telegram-Kanälen in Ihre Website einzubinden und zudem Unterstützung für Bots bieten.
• Die YouTube API, die Ihnen ermöglicht, YouTube-Videos auf Ihrer Seite einzubetten, YouTube zu durchsuchen, Playlists zu erstellen und vieles mehr.
• Die Pinterest API, die Werkzeuge bereitstellt, um Pinterest-Boards und -Pins zu verwalten, um sie in Ihrer Website zu integrieren.
• Die Twilio API, die ein Framework für den Aufbau von Sprach- und Videoanruffunktionalitäten in Ihre App bietet, das Senden von SMS/MMS von Ihren Apps ermöglicht und mehr.
• Die Disqus API, die eine Kommentierung Plattform bietet, 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 die Integration mehrerer APIs über eine Plattform ermöglicht.

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

Ihr Code interagiert mit APIs durch die Verwendung eines oder mehrerer JavaScript-Objekte, die als Container für die Daten dienen, die die API verwendet (enthalten in Objekt-Eigenschaften), und die Funktionalität, die die API bereitstellt (enthalten in Objekt-Methoden).

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

• AudioContext, welches ein Audiograph darstellt, das verwendet werden kann, um Audio, das im Browser abgespielt wird, zu manipulieren. Es gibt eine Reihe von Methoden und Eigenschaften, um dieses Audio zu manipulieren.
• MediaElementAudioSourceNode, das ein <audio>-Element darstellt, das den Ton enthält, den Sie im Audio-Kontext abspielen und manipulieren möchten.
• AudioDestinationNode, das das Ziel des Audios darstellt, d. h. das Gerät auf Ihrem Computer, das es tatsächlich ausgibt — in der Regel Ihre Lautsprecher oder Kopfhörer.

Wie interagieren diese Objekte? Wenn Sie sich unser einfaches Web-Audio-Beispiel ansehen (siehe es auch live), sehen Sie zuerst 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" />

Zuerst binden wir ein <audio>-Element ein, mit welchem wir eine MP3 in die Seite einbetten. Wir binden keine Standard-Browser-Steuerungen ein. Danach fügen wir ein <button> ein, das wir verwenden, um die Musik abzuspielen und zu stoppen, und ein <input>-Element vom Typ range, das wir verwenden, um die Lautstärke des Tracks anzupassen, während er abgespielt wird.

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

Wir beginnen mit der Erstellung einer AudioContext-Instanz, in der 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 einen MediaElementAudioSourceNode zu erstellen, der die Quelle unseres Audios darstellt — das <audio>-Element wird abgespielt:

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 Ereignis-Handler hinzu, die beim Drücken des Knopfes zwischen Abspielen und Pause umschalten und die Anzeige zurück an den 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";
});

Danach erstellen wir ein GainNode-Objekt mit der Methode AudioContext.createGain(), die verwendet werden kann, um die Lautstärke von Audio, das durch es geleitet wird, anzupassen. Außerdem erstellen wir einen weiteren Ereignis-Handler, der den Wert des Gain (Lautstärke) des Audiographen ändert, wann immer der Slider-Wert geändert wird:

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

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

Der letzte Schritt, um dies zum Laufen zu bringen, besteht darin, die verschiedenen Knoten im Audiographen zu verbinden, was mit der Methode AudioNode.connect() möglich ist, die für jeden Knotentyp verfügbar ist:

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

Das Audio startet in der Quelle, die dann mit dem Gain-Knoten verbunden wird, sodass 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 repräsentiert, was auch immer der standardmäßige 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 für die API liegt. Bei der Web Audio API ist dies ziemlich einfach — es ist das AudioContext-Objekt, das verwendet werden muss, um jede Audiobearbeitung auszuführen.

Die Document Object Model (DOM) API hat ebenfalls einen einfachen Einstiegspunkt — ihre Funktionen hängen in der Regel am Document-Objekt oder 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 setzt ebenfalls darauf, dass Sie ein Kontextobjekt erhalten, welches Sie verwenden können, um Dinge zu manipulieren, obwohl es in diesem Fall ein grafischer Kontext anstelle eines Audiokontextes ist. Sein Kontextobjekt wird erstellt, indem Sie eine Referenz auf das <canvas>-Element erhalten, auf welchem 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 (welches 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 früher im Kurs über Ereignisse in unserem Einführung in Ereignisse-Artikel gesprochen, der im Detail behandelt, was clientseitige Web-Ereignisse sind und wie sie in Ihrem Code verwendet werden. Wenn Sie nicht bereits mit der Funktionsweise von clientseitigen Web-API-Ereignissen vertraut sind, sollten Sie diesen Artikel zuerst lesen, bevor Sie weitermachen.

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

Wir haben bereits eine Anzahl von Ereignis-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";
});

WebAPI-Funktionen unterliegen denselben Sicherheitsüberlegungen wie JavaScript und andere Webtechnologien (zum Beispiel Same-Origin-Policy), aber manchmal haben sie zusätzliche Sicherheitsmechanismen. Einige der moderneren WebAPIs funktionieren nur auf Seiten, die über HTTPS ausgeliefert werden, da sie potenziell sensible Daten übertragen (z. B. Service Workers und Push).

Darüber hinaus fordern einige WebAPIs die Erlaubnis des Benutzers an, aktiviert zu werden, sobald Aufrufe an sie in Ihrem Code gemacht werden. Ein Beispiel hierfür ist die Notifications API, die um Erlaubnis mittels eines Pop-up-Dialogfelds bittet:

Die Web Audio und die HTMLMediaElement-APIs unterliegen einem Sicherheitsmechanismus, der als Autoplay-Policy bezeichnet wird — dies bedeutet im Wesentlichen, dass Sie Audio nicht automatisch wiedergeben können, wenn eine Seite geladen wird — Ihre Benutzer müssen das Audio über eine Steuerung wie einen Knopf initiieren. Dies wird getan, da das automatische Abspielen von Audio normalerweise wirklich ärgerlich ist und wir unsere Benutzer dem wirklich 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 begeistert, tatsächlich einige lustige Dinge mit speziellen APIs zu tun, also los geht's! Als nächstes schauen wir uns Video- und Audio-APIs an.

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