Einführung in Web-APIs

Was sind APIs?

Application Programming Interfaces (APIs) sind Konstrukte, die in Programmiersprachen zur Verfügung gestellt werden, um Entwicklern das Erstellen komplexer Funktionalitäten zu erleichtern. Sie abstrahieren komplexeren Code, indem sie eine einfachere Syntax zur Verfügung stellen.

Als Beispiel aus der realen Welt denken Sie an die Stromversorgung in Ihrem Haus, Ihrer Wohnung oder in einer anderen Unterkunft. 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 - dies wäre wirklich ineffizient und, wenn Sie kein Elektriker sind, schwierig und gefährlich.

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

In ähnlicher Weise, wenn Sie zum Beispiel einige 3D-Grafiken programmieren möchten, ist es viel einfacher, dies mit einer API zu tun, die in einer höheren Programmiersprache wie JavaScript oder Python geschrieben ist, anstatt direkten Low-Level-Code (wie C oder C++) zu schreiben, der die GPU des Computers oder andere Grafikfunktionen direkt steuert.

APIs in Client-seitigem JavaScript

Client-seitiges JavaScript hat insbesondere viele APIs zur Verfügung - diese sind nicht Teil der JavaScript-Sprache selbst, sondern sie werden auf der Grundlage der Kern-JavaScript-Sprache erstellt, um Ihnen zusätzliche Supermächte in Ihrem JavaScript-Code zur Verfügung zu stellen. Sie fallen im Allgemeinen in zwei Kategorien:

• Browser-APIs sind in Ihrem Web-Browser integriert und können Daten aus dem Browser und der Umgebung des Computers bereitstellen und nützliche komplexe Dinge damit tun. Zum Beispiel bietet die Web Audio API JavaScript-Konstrukte zur Manipulation von Audio im Browser - ein Audiotrack kann zum Beispiel in der Lautstärke variiert oder mit Effekten versehen werden. Im Hintergrund verwendet der Browser tatsächlich einige komplexe niedrigere Code-Ebenen (z.B. C++ oder Rust), um die eigentliche Audiobearbeitung durchzuführen. Aber wieder wird diese Komplexität durch die API vor Ihnen abstrahiert.
• Drittanbieter-APIs sind nicht standardmäßig im Browser eingebaut, und Sie müssen ihren Code und Informationen im Allgemeinen von einem Ort im Web beziehen. Zum Beispiel ermöglicht die Google Maps API 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.

Beziehung zwischen JavaScript, APIs und anderen JavaScript-Tools

Oben haben wir darüber gesprochen, was Client-seitige JavaScript-APIs sind und wie sie sich auf die JavaScript-Sprache beziehen. Lassen Sie uns das rekapitulieren, um es klarer zu machen, und auch erwähnen, wo andere JavaScript-Tools passen:

• JavaScript — Eine Hochsprache, die in Browser eingebaut ist und es Ihnen ermöglicht, Funktionalität 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 basieren, und Ihnen ermöglichen, Funktionalität einfacher zu implementieren.
• Drittanbieter-APIs — Konstrukte, die in Drittanbieterplattformen (z.B. Disqus, Facebook) eingebaut sind und Ihnen erlauben, einige der Funktionalitäten dieser Plattformen auf Ihren 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 gemeinsamer Funktionalitäten zu beschleunigen oder zu ermöglichen. Beispiele sind jQuery, Mootools und React.
• JavaScript-Frameworks — Der nächste Schritt nach den 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 können, um eine ganze Webanwendung von Grund auf neu zu schreiben. Der Hauptunterschied zwischen einer Bibliothek und einem Framework ist die „Inversion of Control“. Beim Aufrufen 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.

Was können APIs leisten?

Es gibt eine große Anzahl an APIs in modernen Browsern, die es Ihnen ermöglichen, eine Vielzahl von Dingen in Ihrem Code zu tun. Dies können Sie sehen, indem Sie sich die MDN APIs Index-Seite anschauen.

Häufige Browser-APIs

Besonders häufige Kategorien von Browser-APIs, die Sie verwenden werden (und die wir in diesem Modul ausführlicher 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 - HTML zu erstellen, zu entfernen und zu ändern, dynamisch neue Stile auf Ihre Seite anzuwenden, usw. Jedes Mal, wenn Sie ein Popup-Fenster auf einer Seite oder neuen Inhalt anzeigen sehen, ist das zum Beispiel das DOM in Aktion. Erfahren Sie mehr über diese Arten von API in DOM-Scripting-Einführung.
• APIs, die Daten vom Server abrufen, um nur kleine Abschnitte einer Webseite an sich zu aktualisieren, werden sehr häufig verwendet. Dieses scheinbar kleine Detail hat einen großen Einfluss auf die Leistung und das Verhalten von Websites gehabt - Wenn Sie nur eine Aktienliste oder eine Liste verfügbarer neuer Geschichten aktualisieren müssen, kann es durch die sofortige Aktualisierung ohne das komplette Neuladen der gesamten Seite vom Server aus die Website oder App viel reaktionsschneller und „flinker“ erscheinen lassen. Die wichtigste API, die hierfür verwendet wird, ist die Fetch API, obwohl älterer Code möglicherweise noch die XMLHttpRequest API verwendet. Sie werden auch auf den Begriff AJAX stoßen, der diese Technik beschreibt. Erfahren Sie mehr über solche APIs in Netzwerkanfragen mit JavaScript.
• APIs zur Zeichnung und Manipulation von Grafiken sind weit verbreitet in Browsern - die beliebtesten davon 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. Zum Beispiel können 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 Beleuchtung und Texturen mit WebGL erstellen. Solche APIs werden häufig mit APIs zur Erstellung von Animationsschleifen kombiniert (wie window.requestAnimationFrame()) und anderen, 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 Ihnen wirklich interessante Dinge mit Multimedia zu tun, wie benutzerdefinierte UI-Steuerelemente für das Abspielen von Audio und Video zu erstellen, Textspuren wie Untertitel und Bildunterschriften zusammen mit Ihren Videos anzuzeigen, Video von Ihrer Webcam zu erhalten, das über eine Leinwand bearbeitet werden kann (siehe oben) oder auf dem Computer einer anderen Person in einer Webkonferenz angezeigt wird, oder Effekte auf Audiotracks hinzuzufügen (wie Gain, Verzerrung, Panning, usw.).
• Geräte-APIs erlauben es Ihnen, mit Hardware des Geräts 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 erlauben es Ihnen, Daten auf der Client-Seite zu speichern, so dass Sie eine App erstellen können, die ihren Zustand zwischen den Seitenladungen speichert und vielleicht sogar funktioniert, wenn das Gerät offline ist. Es gibt mehrere Optionen, z.B. einfache Name/Werte-Speicherung mit der Web Storage API und komplexere Datenbankspeicherung mit der IndexedDB API.

Häufige Drittanbieter-APIs

Drittanbieter-APIs gibt es in großer Vielfalt; einige der bekannteren, die Sie früher oder später wahrscheinlich nutzen 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 API-Suite, die es Ihnen ermöglicht, verschiedene Teile des Facebook-Ökosystems zu Ihrem Vorteil in Ihrem App zu nutzen, zum Beispiel, indem Sie die Anmeldung der App mit Facebook-Login bereitstellen, In-App-Zahlungen akzeptieren, gezielte Werbekampagnen ausrollen, usw.
• Die Telegram APIs, die es Ihnen betreffen, Inhalte aus Telegram-Kanälen auf Ihrer Webseite einzubetten, zusätzlich zur Bereitstellung von Unterstützung für Bots.
• Die YouTube API, die es Ihnen erlaubt, YouTube-Videos auf Ihrer Seite einzubetten, YouTube zu durchsuchen, Playlists zu erstellen und mehr.
• Die Pinterest API, die Werkzeuge zur Verwaltung von Pinterest-Boards und Pins bereitstellt, um sie in Ihre Webseite einzubinden.
• Die Twilio API, die eine Rahmen gibt für den Aufbau von Sprach- und Videofunktionalität in Ihre App, das Senden von SMS/MMS aus Ihren Apps, und mehr.
• 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 das Integrieren von mehreren APIs über eine Plattform ermöglicht.

Wie funktionieren APIs?

Verschiedene JavaScript-APIs arbeiten auf leicht unterschiedliche Weise, aber im Allgemeinen haben sie gemeinsame Merkmale und ähnliche Themen zu ihrer Funktionsweise.

Sie basieren auf Objekten

Ihr Code interagiert mit APIs unter Verwendung eines oder mehrerer JavaScript-Objekte, die als Container für die Daten dienen, die die APIs verwenden (enthalten in den Objekt-Eigenschaften), und die Funktionen, die die APIs verfügbar machen (enthalten in den Objekt-Methoden).

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

• AudioContext, der ein Audio-Graphen repräsentiert, der verwendet werden kann, um Audio im Browser zu manipulieren und hat eine Anzahl von Methoden und Eigenschaften zur Verfügung, um dieses Audio zu manipulieren.
• MediaElementAudioSourceNode, der ein <audio>-Element darstellt, das einen Klang enthält, den Sie abspielen und im Audiokontext manipulieren möchten.
• AudioDestinationNode, der das Ziel des Audios repräsentiert, 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 Web-Audio-Beispiel ansehen (sehen Sie es auch live), werden Sie zuerst das folgende HTML sehen:

<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 eine MP3 in die Seite einbetten. Wir fügen keine Standard-Browser-Steuerelemente hinzu. Als nächstes fügen wir einen <button> hinzu, den wir verwenden werden, um die Musik abzuspielen und zu stoppen, und ein <input>-Element vom Typ "range", mit dem wir die Lautstärke des Tracks anpassen werden, 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 können:

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 repräsentiert — das <audio>-Element, das abgespielt werden soll:

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 hinzu, die dazu dienen, zwischen Wiedergabe und Pause zu wechseln, wenn die Schaltfläche gedrückt wird, und das Display zurück zum Anfang zu setzen, wenn der Song fertig 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 mit der Methode AudioContext.createGain(), das verwendet werden kann, um die Lautstärke von Audio zu justieren, das durch es durchgeht, und fügen einen weiteren Ereignishandler hinzu, der den Wert des Audiographen-Gaines (Lautstärke) ä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, ist das Verbinden der verschiedenen Knoten im Audiographen, was mit der Methode AudioNode.connect() möglich ist, 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, damit der Ton auf Ihrem Computer abgespielt werden kann (die Eigenschaft AudioContext.destination repräsentiert, was auch immer der Standard-AudioDestinationNode auf der Hardware Ihres Computers ist, z.B. Ihre Lautsprecher).

Sie haben erkennbare Einstiegspunkte

Wenn Sie eine API verwenden, sollten Sie sicherstellen, dass Sie wissen, wo der Einstiegspunkt für die API ist. Bei der Web Audio API ist das ziemlich einfach — es ist das AudioContext-Objekt, das verwendet werden muss, um jegliche Audiobearbeitung zu machen.

Die Document Object Model (DOM) API hat ebenfalls einen einfachen Einstiegspunkt — ihre Funktionen neigen dazu, am Document-Objekt zu hängen oder auf einer Instanz eines HTML-Elements, das Sie auf irgendeine Weise beeinflussen möchten, wie 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

Auch die Canvas API ist darauf angewiesen, ein Kontextobjekt zu verwenden, das in diesem Fall jedoch ein grafischer Kontext und nicht ein Audionkontxt ist. Ihr Kontextobjekt wird erstellt, indem man eine Referenz auf das <canvas>-Element erhält, auf dem man zeichnen möchte, und dann die Methode HTMLCanvasElement.getContext() aufruft:

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

Alles, was wir auf dem Canvas machen wollen, 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();
};

Sie verwenden oft Ereignisse, um Zustandsänderungen zu handhaben

Wir haben Ereignisse bereits früher im Kurs in unserem Artikel Einführung in Ereignisse besprochen, der im Detail beschreibt, was Client-seitige Web-Ereignisse sind und wie sie in Ihrem Code verwendet werden. Wenn Sie noch nicht damit vertraut sind, wie Client-seitige Web-API-Ereignisse funktionieren, sollten Sie diesen Artikel zuerst lesen, bevor Sie fortfahren.

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

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

Sie haben zusätzliche Sicherheitsmechanismen, wo es angebracht ist

WebAPI-Funktionen sind den gleichen Sicherheitsüberlegungen wie JavaScript und andere Webtechnologien unterworfen (zum Beispiel Same-Origin Policy), aber manchmal verfügen sie über zusätzliche Sicherheitsmechanismen. Einige der moderneren WebAPIs funktionieren beispielsweise nur auf Seiten, die über HTTPS bereitgestellt werden, da sie potenziell sensible Daten übertragen (Beispiele sind Service Workers und Push).

Zusätzlich können einige WebAPIs die Berechtigung des Nutzers erfordern, um aktiviert zu werden, sobald sie in Ihrem Code aufgerufen werden. Ein Beispiel ist die Benachrichtigungs-API, die über ein Pop-up-Fenster um Erlaubnis fragt:

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 erlauben, die Audiowiedergabe über ein Steuerelement wie eine Schaltfläche auszulösen. Dies geschieht, weil das automatische Starten von Audio normalerweise wirklich störend ist, und wir sollten unsere Benutzer diesem nicht aussetzen.

Zusammenfassung

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 machen können. Sie sind wahrscheinlich gespannt, tatsächlich einige unterhaltsame Dinge mit spezifischen APIs zu machen, also los geht's! Als nächstes werden wir uns Video- und Audio-APIs ansehen.

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