Funktionsweise von APIs und Integration in Ihre App
Anwendungsprogrammierschnittstellen (APIs) sind eine der ultimativen Verknüpfungen zum Erstellen intelligenter Apps. Es ist ein Kommunikationskanal zwischen zwei Anwendungen. Unabhängig davon, ob Sie absichtlich oder absichtlich APIs verwendet haben, während Sie im Internet surfen oder Programme in Ihrem täglichen Leben verwenden.
Obwohl eine API normalerweise komplexe Daten als Antwort sendet, wie können Sie diese Informationen verstehen und verwenden, um Ihren Benutzern zu dienen? APIs erleichtern sowohl erfahrenen als auch neuen Entwicklern das Leben. Sie müssen also wissen, wie Sie sie mit Ihrer App verwenden können.
Anhand einiger Anwendungsfälle und Beispiele sehen wir uns an, wie Sie eine API verwenden können, um Ihre Programme als Entwickler bereitzustellen.
Wie funktionieren APIs?
Entwickler erstellen APIs als Produkte, die anderen Entwicklern dienen können. Ziel ist es, komplexe Webentwicklungsprozesse für Verbraucherentwickler oder Unternehmen einfach, effizienter und schneller zu gestalten.
Die meisten Unternehmen sind jetzt auf APIs von Drittanbietern angewiesen, um Probleme zu lösen und ihre Kunden besser zu bedienen. Die Verwendung von APIs ist jedoch nicht so kompliziert, wie viele Leute denken. Sie können sich das als eine Lösung von Drittanbietern vorstellen, die Ihnen eine bestimmte Antwort in Form von Daten gibt, wenn Sie eine bestimmte HTTP-Anfrage stellen.
Die Verwendung einer API ist wie eine Bestellung in einem Pizzarestaurant. Sie können nicht in die Küche gehen, um ihnen zu sagen, was Sie wollen. Sie benötigen einen Kellner, der Ihre Bestellung entgegennimmt und der Küche mitteilt, bevor Sie mit Ihrer Pizza zurückkehren.
Sie können eine API als diese Verbindung zwischen Ihnen und der Küche anzeigen. In diesem Fall sind Sie ein Kunde, der das Restaurant mit einem Kellner (API) unterstützt. Der Kellner antwortet dann mit Ihrer Auswahl an Pizza (Daten). In einer echten API ist Ihre Web-App der Client, der anfordert, den Inhalt des Anbieters über seine API zu konsumieren, indem er Endpunkt-HTTP-Anforderungen stellt.
Was ist ein API-Endpunkt?
Um eine Verbindung zu einer API herzustellen, müssen Sie Ihr Programm an einen API-Endpunkt anschließen. Sie können dies als bidirektionale Verbindung anzeigen. Der mit Ihrem Programm verbundene Endpunkt sendet eine Anfrage, während der mit der API verbundene Endpunkt Sie mit einer bestimmten Antwort zurückmeldet.
Der Endpunkt ist eine URL, die den Client anfordert und ihm direkten Zugriff auf die Ressourcen einer API gewährt.
Zusätzlich zum Abrufen von Daten mit einer API können Sie auch Anforderungen von einem Anbieter an einen Client POSTEN, die PUT-Methode verwenden, um weitere Informationen von einem Anbieter abzurufen, sowie die DELETE-Methode verwenden, um vorhandene Daten aus Ihrem Programm zu entfernen. Jede dieser Methoden ist normalerweise in der Dokumentation einer API verfügbar.
Kriterien für die Verbindung zu einer API
Die Integration einer API in Ihr Programm ist nicht nur eine spontane Entscheidung, sondern wird vorab meditiert. Sie müssen wissen, welche Informationen Sie möchten und wie viel davon Sie möchten. Dies verringert die Komplexität, insbesondere wenn Sie mit JSON-Daten arbeiten, die als mehrdimensionales Array vorliegen. Mit dieser Vorgehensweise erhalten Sie auch die spezifischen Informationen, die Sie für Ihr Programm benötigen.
Es gibt Hunderte von APIs mit unterschiedlichen Regeln für die Verbindung. Während einige APIs kostenlos und Open Source sind, können andere nur auf Abonnementbasis aufgerufen werden.
Obwohl einige nahtlos und unkompliziert sind und keine Voraussetzungen erfordern, müssen Sie bei anderen APIs möglicherweise Bedingungen wie das Generieren eines API-Schlüssels oder die Anmeldung für ein Entwicklerkonto erfüllen, bevor Sie eine Verbindung zu deren Endpunkten herstellen können.
Einer der wichtigsten Aspekte einer API ist jedoch ihre Dokumentation. Am besten lesen und befolgen Sie die Dokumentation aller APIs, mit denen Sie eine Verbindung herstellen möchten, um Anleitungen zum Codieren und Verwenden der Ressourcen zu erhalten. Das liegt daran, dass jede API ihre eigenen Verbindungsmethoden und -anweisungen hat.
Um eine Verbindung mit einer API herzustellen, müssen Sie auch die von ihr unterstützten Programmiersprachen kennen.
So stellen Sie eine Verbindung zu einer API her: Praktische Beispiele
Es gibt keine spezifischen Möglichkeiten, eine Verbindung zu einer API herzustellen. In einigen Beispielen werden Sie jedoch mit den grundlegenden Konzepten vertraut gemacht, wie Sie API-Daten mit Ihrer App verwenden können. Bevor wir jedoch weiter gehen, haben wir einige Artikel über APIs geschrieben und wie Sie darauf zugreifen können.
Zum Beispiel haben wir einen ausführlichen Artikel darüber, wie Sie eine Verbindung mit der Weatherstack-API herstellen können, mit der Sie auf Echtzeit-Wetterdaten zugreifen können. Wir haben auch darüber geschrieben, wie Sie die Mediastack-API verwenden können , eine kostenpflichtige API, mit der Sie Ihrer Website Schlagzeilen hinzufügen können.
Schauen wir uns einige kurze Codebeispiele an, wie Sie eine Verbindung zu einer API herstellen können.
Verwendung der Iro.js Color Picker API
Iro.js ist eine einfache API, mit der Sie Ihrer Website einen kostenlosen Farbwähler hinzufügen können. Wenn Sie einen Farbpunkt im Farbkreis auswählen, gibt die API den Hexadezimal- oder RGB-Code dieser Farbe zurück. Um eine Verbindung zur iro.js-API herzustellen, müssen Sie lediglich den CDN-Endpunkt (Content Delivery Network) in den Kopfbereich Ihres DOM einfügen.
Die vollständige Dokumentation dieser API finden Sie unter iro.js.org . Mal sehen, wie Sie mit dem folgenden Beispielcode-Snippet eine Verbindung zu dieser API herstellen können:
<!DOCTYPE html>
<html>
<head>
<title>Practice Slider</title>
<script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
</head>
<body>
<button id="color-button" onclick="sample()">Display color picker</button>
<div id="color-circle"> </div>
<div id="color-code"> </div>
</body>
<script>
let colors= document.getElementById('color-code');
const sample= ()=>{
var colorPicker = new iro.ColorPicker('#color-circle', {
// Set the size of the color picker
width: 320,
// Set the initial color to pure red
color:"#ff0000"
});
colorPicker.on(['color:change', 'color:init'], function(color) {
// log the current color as a HEX string
colors.innerHTML=color.hexString;
});
};
</script>
</html>Im Fall der obigen Beispiel-API benötigen Sie keinen API-Schlüssel, um eine Verbindung herzustellen. Um es jedoch besser zu verstehen, schauen Sie sich das JavaScript genauer an. Um eine Verbindung mit dieser API herzustellen , müssen wir nur die ColorPicker- Funktion aus der iro- Klasse aufrufen und dann die ID des Farbradcontainers an die Klasse übergeben.
Der Endpunkt der iro.js-API ist einfach zu verbinden, da die Entwickler die zusätzliche Arbeit geleistet haben, die Klasse für ihre Benutzer zu codieren. Das Bild unten ist das Ergebnis des obigen Beispielcodes.
Um zu sehen, wie das Farbänderungsereignis abläuft, können Sie eine andere HTML-Datei öffnen und den folgenden Code in den Skriptabschnitt einfügen:
var colorPicker = new iro.ColorPicker('#color-pick', {
// Set the size of the color picker
width: 400,
// Set the initial color to pure red
color:"#ff0000"
});
const myColor =(color)=>{
console.log(color.hexString);
};
colorPicker.on("color:change", myColor);Der obige Code protokolliert jedes Mal hexadezimale Farbwerte, wenn Sie die Position des Farbwählers am Rad ändern.
NB: Der gesamte Beispielcode ist das Ergebnis der Befolgung der Anweisungen in der API-Dokumentation.
Verwendung der NoCodeAPI Currency Exchange API
NoCodeAPI bietet viele APIs, einschließlich der Währungsumrechner-API. Um eine Verbindung zum Endpunkt des Geldwechsels herzustellen, rufen Sie den NoCodeAPI-Marktplatz auf und erstellen Sie ein Konto.
Sobald Sie sich angemeldet haben, befindet sich im oberen Teil der Seite eine Suchleiste. Geben Sie in dieser Suchleiste den Geldwechsel ein . Wenn Ihre Abfrage angezeigt wird, klicken Sie auf Aktivieren .
Klicken Sie auf der nächsten Seite auf Make Currency Exchange API . Geben Sie als Nächstes einen bevorzugten Namen für die API ein und klicken Sie auf Erstellen .
Wenn Sie die API erstellt haben, klicken Sie auf Dokumentation anzeigen . Wählen Sie als Nächstes eine bevorzugte Sprache aus, um den Code für die Verbindung zum Endpunkt der API anzuzeigen. Sie können diesen Beispielcode dann kopieren und zur weiteren Anpassung in Ihre Anwendung einfügen.
Schauen Sie sich unseren Beispielcode für die Währungsumrechnung an:
<!DOCTYPE html>
<html>
<head>
<title>Currency converter</title>
</head>
<div id="currency"> </div>
</body>
<script>
let currency= document.getElementById('currency');
async function callingFn() {
try {
const response = await fetch("https://v1.nocodeapi.com/techyprem/cx/FHNXhKRkWDCvMehl/rates/convert?amount=10&from=USD&to=Eur", {
method: "get",
headers: {
"Content-Type": "application/json"
}
});
const json = await response.json();
currency.innerHTML="Success:" + JSON.stringify(json);
} catch (error) {
console.error("Error:", error);
}
}
callingFn();
<script>
</html>Der obige Code ist nur eine modifizierte Version des Codes in der Dokumentation. Achten Sie jedoch genau auf die Konvertierungsparameter in der Antwortvariablen des JavaScript.
So sieht die rohe JSON-Ausgabe aus:
Success:{"query":{"from":"USD","to":"EUR","amount":10},"info":{"time":1604587505388,"rate":0.844865},"result":8.44865,"text":"10 USD = 8.44865 EUR"}Nutzen Sie APIs
Durch die Verwendung von APIs für Ihre App können Sie Projekte schneller abschließen. Obwohl einige API-Dokumentationen technisch sein können, gibt es viele davon, die für Neulinge nützlich sind.
Wie bereits erwähnt, müssen Sie jedoch die Dokumentation genau studieren und die Regeln für die Verbindung einhalten, um die API, aus der Sie Daten abrufen möchten, optimal nutzen zu können.
Obwohl wir hier für unsere Beispiele JavaScript verwendet haben, unterstützen die meisten von ihnen je nach API-Typ auch andere Programmiersprachen. Informationen zur Sprachunterstützung finden Sie in der Dokumentation jeder API. Beachten Sie auch, dass die hier verwendeten Beispiele nur einige von vielen Anwendungsfällen von APIs sind.