Applikationsprogrammeringsgränssnitt (API) är en av de ultimata genvägarna för att bygga smarta appar. Det är en kommunikationskanal mellan två applikationer. Oavsett om det är avsiktligt eller inte, har du använt API:er vid vissa tillfällen när du surfar på internet eller använder program i ditt dagliga liv.
Även om ett API vanligtvis skickar komplexa data som ett svar, hur kan du förstå och använda denna information för att tjäna dina användare? API:er gör livet enkelt för både erfarna och nya utvecklare. Så du måste veta hur du använder dem med din app.
Här, med några användningsfall och exempel, tar vi en titt på hur du kan använda ett API för att tjäna dina program som utvecklare.
Hur fungerar API:er?
Utvecklare skapar API:er som produkter som kan tjäna andra utvecklare. Syftet är att göra komplexa webbutvecklingsprocesser enkla, effektivare och snabbare för konsumentutvecklare eller företag.
De flesta företag är nu beroende av tredje parts API:er för att lösa problem och betjäna sina kunder bättre. Men att använda API:er är inte så komplicerat som många tror. Du kan se det som en tredjepartslösning som ger dig ett specifikt svar i form av data när du gör en viss HTTP-förfrågan.
Att använda ett API är som att göra en beställning på en pizzarestaurang. Du kan inte gå in i köket och berätta för dem vad du vill. Du behöver en servitör för att ta din beställning och kommunicera den till köket innan du återvänder med din pizza.
Du kan se ett API som länken mellan dig och köket. I det här fallet är du en kund som nedlåtande restaurangen tillhandahåller en servitör (API). Servitören svarar sedan med ditt val av pizza (data). I ett riktigt API är din webbapp klienten som begär att konsumera innehållet från leverantören genom dess API genom att göra slutpunkts-HTTP-förfrågningar.
Vad är en API-ändpunkt?
Att ansluta till ett API kräver att du ansluter ditt program till en API-slutpunkt. Du kan se detta som en tvåvägsanslutning. Slutpunkten som är ansluten till ditt program skickar en förfrågan, medan den som är ansluten till API:et återkopplar dig med ett specifikt svar.
Slutpunkten är en URL som begär och ger klienten direkt tillgång till resurserna i ett API.
Förutom att få data med ett API kan du även POST-förfrågningar från en leverantör till en klient, använda PUT-metoden för att få mer information från en leverantör, samt använda DELETE-metoden för att ta bort befintlig data från ditt program. Var och en av dessa metoder är vanligtvis tillgängliga i en API:s dokumentation.
Kriterier för att ansluta till ett API
Att integrera ett API med ditt program är inte bara ett spontant beslut – det är förmediterat. Du måste veta vilken information du vill ha och hur mycket av den du vill ha. Detta minskar komplexiteten, särskilt om du har att göra med JSON-data som kommer som en flerdimensionell array. Denna praxis låter dig också få den specifika information du behöver för ditt program.
Det finns hundratals API:er där ute med olika regler för att ansluta till dem. Medan vissa API:er är det free och öppen källkod, andra är endast tillgängliga på prenumerationsbasis.
Även om vissa är sömlösa och enkla och inte kräver några förutsättningar, kan andra API:er kräva att du uppfyller villkor som att generera en API-nyckel eller registrera dig för ett utvecklarkonto innan du kan ansluta till deras slutpunkter.
En av de viktigaste aspekterna av alla API är dock dess dokumentation. Den bästa praxisen är att läsa och följa dokumentationen för alla API du tänker ansluta till för guider om hur du kodar och använder dess resurser. Det beror på att varje API har sina egna anslutningsmetoder och instruktioner.
För att ansluta till ett API måste du också känna till de programmeringsspråk som det stöder.
Hur man ansluter till ett API: Praktiska exempel
Det finns inga specifika sätt att ansluta till ett API, men några exempel kommer att exponera dig för de grundläggande koncepten för hur du kan konsumera API-data med din app. Men innan vi går vidare har vi skrivit ett par artiklar om API:er och hur du kan utnyttja dem.
Vi har till exempel en detaljerad artikel om hur du kan ansluta till Weatherstack API, som ger dig tillgång till väderdata i realtid. Vi har även skrivit om hur du kan använda Mediastack API, som är ett betal-API som du kan använda för att lägga till nyhetsrubriker på din webbplats.
Låt oss ta en titt på några korta kodexempel på hur du kan ansluta till ett API.
Hur man använder Iro.js Color Picker API
Iro.js är ett enkelt API som låter dig lägga till en free färgväljare till din webbplats. När du väljer en färgpunkt på färghjulet returnerar API:et hexadecimal- eller RGB-koden för den färgen. För att ansluta till iro.js API behöver du bara klistra in dess innehållsleveransnätverk (CDN) i huvud avsnitt av ditt DOM.
Den fullständiga dokumentationen för detta API finns på iro.js.org. Låt oss se hur du kan ansluta till detta API med exempelkodavsnittet nedan:
<!DOCTYPE html>
<html>
<head>
<title>Practice Slider</title>
<script src="https://cdn.jsdelivr.net/npm/@jaames/[email protected]"></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>
I fallet med exempel-API-en ovan behöver du ingen API-nyckel för att ansluta till den. Men för att förstå det bättre, ta en närmare titt på JavaScript. För att ansluta till detta API behöver vi bara anropa Färgväljare funktion från ir klass, då passerar vi id av färghjulsbehållaren in i klassen.
Slutpunkten för iro.js API är lätt att ansluta till eftersom dess utvecklare har gjort det extra arbetet med att koda klassen för sina användare. Bilden nedan är resultatet av exempelkoden ovan.
För att se hur färgbyteshändelsen sker kan du öppna en annan HTML-fil och klistra in följande kod i dess manus sektion:
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);
Ovanstående kod loggar hexadecimala färgvärden varje gång du ändrar färgväljarens position på hjulet.
OBS: All exempelkod är resultatet av att följa instruktionerna i API:s dokumentation.
Hur man använder NoCodeAPI Currency Exchange API
NoCodeAPI erbjuder många API:er inklusive valutaomvandlarens API. För att ansluta till dess valutaväxlingsändpunkt, gå till NoCodeAPI-marknadsplatsen och skapa ett konto.
När du väl har loggat in finns det ett sökfält längst upp på sidan. Skriv i sökfältet valutaväxling, klicka på när din fråga visas Aktivera.
Klicka på på nästa sida Gör Currency Exchange API. Skriv sedan in ett önskat namn för API:t och klicka Skapa.
När du har skapat API:t klickar du på Se dokumentation. Välj sedan ett föredraget språk för att se koden för anslutning till API:ets slutpunkt. Du kan sedan kopiera den exempelkoden och klistra in den i din ansökan för ytterligare anpassning.
Ta en titt på vår exempelkod nedan för valutaomvandling:
<!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>
Koden ovan är endast en modifierad version av den i dokumentationen. Var dock uppmärksam på konverteringsparametrarna i svarsvariabeln i JavaScript.
Så här ser den råa JSON-utgången ut:
Success:{"query":{"from":"USD","to":"EUR","amount":10},"info":{"time":1604587505388,"rate":0.844865},"result":8.44865,"text":"10 USD = 8.44865 EUR"}
Dra fördel av API:er
Genom att använda API:er för din app kan du slutföra projekt snabbare. Även om viss API-dokumentation kan vara teknisk, finns det många av dem där ute som är användbara för nykomlingar.
Men som vi nämnde tidigare, för att få ut det mesta av alla API du vill utnyttja data från, måste du studera dess dokumentation noga och följa reglerna för att ansluta till den.
Även om vi har använt JavaScript för våra exempel här, beroende på typen av API, stöder de flesta fortfarande andra programmeringsspråk också. Du kan få information om språkstöd från dokumentationen för alla API. Observera också att exemplen vi använde här bara är några av många användningsfall av API:er.
Om författaren
Idowu Omisola (124 artiklar publicerade)
Idowu brinner för allt smart teknik och produktivitet. I hans free tid, han leker med kodning och byter till schackbrädet när han har tråkigt, men han älskar också att bryta sig loss från rutinen då och då. Hans passion för att visa människor vägen runt modern teknik motiverar honom att skriva mer.
Mer från Idowu Omisola
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
