Filip Tammergård
Filip Tammergård
kontakta mig

Vad är ett API?

Jag börjar med ett enkelt exempel på hur ett API kan användas:

Det är för tillfället grader vid Exsitecs kontor i Linköping

Man kan tro att jag bara har chansat på en temperatur i mitt påstående, men temperaturen hämtas faktiskt från SMHI med hjälp av ett API. Jag ska förklara hur det fungerar rent praktiskt, men först ska jag förklara lite kring vad ett API är.

Vad är ett API?

API är en av de många trebokstavs-akronymer som man stöter på tidigt som utvecklare, men som många som inte sysslar med programmering också kommer i kontakt med. API står Application Programming Interface, på svenska ungefär applikationsprogrammeringsgränssnitt, vilket dock inte avslöjar så mycket om vad API faktiskt är.

Enkelt förklarat kan man säga att ett API utgör ett regelverk för hur olika program kan kommunicera med varandra. Man kan likna det vid en meny i en restaurang, som är en specifikation över vad som går att beställa av restaurangen. När du har sagt vad du vill ha fixar restaurangen tillagning och kommer tillbaka med din beställning när maten är klar. På samma sätt kan ett API utgöra en beskrivning över vilken data som går att fråga efter och hur man gör det.

Det familjära konceptet att kunna skriva in en webbadress i webbläsaren och komma till rätt hemsida möjliggörs av ett API. När man skriver in exempelvis https://www.exsitec.se/ i sin webbläsare och klickar på Enter skickas en så kallad HTTP-förfrågan, varpå svar kommer i form av Exsitecs hemsida.

Ett annat vardagsnära exempel som belyser hur API:er gör livet enklare för både utvecklare och användare är Mobilt BankID. Låt säga att en förening utvecklar en app och vill att Mobilt BankID ska kunna användas för säker inloggning. För att integrera Mobilt BankID används ett API, som utgör ett regelverk för hur föreningsappen kommunicerar med Mobilt BankID. Kommunikationen omformad till en vardaglig konversation skulle kunna se ut ungefär så här:

Föreningsappen: “Hej Mobilt BankID, nu har vi en användare i vår app här som skulle vilja logga in med Mobilt BankID. Personen har personnumret ååååmmdd-nnnn. Kan ni hjälpa till med det?”

Mobilt BankID. “Tjena! Det löser vi. Säg till användaren att öppna sin Mobilt BankID-app så kan hen legitimera sig.”

[Användaren legitimerar sig och API:et verifierar att det är rätt person]

Mobilt BankID: “Så där, nu har användaren legitimerat sig och allt är grönt!”

Föreningsappen: “Lysande, då skickar jag vidare användaren till den inloggade vyn. Tack för hjälpen!”

På Exsitec används API:er i stor utsträckning när det kommer till integrationer mellan system. När information som finns i ett företags affärssystem ska användas i ett annat system i företagets IT-stöd används ett API för att skicka förfrågningar mellan systemen.

Praktiskt exempel med SMHI

I början av den här texten använde jag ett öppet API som möjliggör att hämta data från SMHI:s väderprognoser. Begreppet API kan låta komplicerat, men i det här fallet handlar det bara om några få rader kod. Allt som krävs för att kunna åstadkomma detta själv är grundläggande kunskaper inom HTML och JavaScript och lite googling kring hur SMHI:s API fungerar.

Vad gäller HTML räcker det med en paragraf med en span-tagg där temperaturen kan infogas:

<p>
    Vid Exsitecs Linköpingskontor är det för tillfället
    <span id="temperatureSpan"></span> grader.
</p>

Jag har satt ett id på span-taggen för att kunna komma åt den smidigt i JavaScript-koden. Hur just detta API fungerar går inte att veta på förhand, utan man får helt enkelt hitta information om det. Med en enkel googling på “SMHI API” kommer man till denna sida. Längst ner på den sidan står det: “Information om tjänsterna för utvecklare återfinns på opendata.smhi.se/apidocs/metfcst/index.html” På den sidan kan man exempelvis klicka på “Get Forecast” för information om just hur man hämtar väderprognosdata. I en framträdande ruta med rubriken “Syntax” står det precis hur anropet ska utformas, nämligen så här:

/api/category/{category}/version/{version}/geotype/point/lon/{longitude}/lat/{latitude}/data.json

Orden inom måsvingar ska ersättas med annan text beroende på vilken data man är ute efter. Enligt instruktionerna på SMHI:s hemsida ska {category} ersättas med pmp3g och {version} med vilken version av API:et man vill använda (exempelvis 2). {longitude} och {latitude} ska ersättas med koordinaterna för den punkt man vill ha en väderprognos för. Före hela harangen ska https://opendata-download-metfcst.smhi.se skrivas. Exsitecs kontor i Linköping har koordinaterna 15.629488, 58.409064. Detta ger ett API-anrop enligt:

https://opendata-download-metfcst.smhi.se/api/category/pmp3g/version/2/geotype/point/lon/15.629488/lat/58.409064/data.json

Om man skriver in den adressen i en webbläsare får man upp en massa data i ett format som kallas för JSON. Informationen är relaterad till vädret vid de angivna koordinaterna de kommande timmarna. I JavaScript används funktionen “fetch” med precis samma webbadress för att hämta informationen. Nästa fråga blir hur man ska göra för att få fram information om temperaturen just nu. Den nuvarande temperaturen hittas i JSON-strukturen genom att lägga på “.timeSeries[2].parameters[11].values[0]”. Beroende på vilken siffra man skriver i hakparentesen efter timeSeries får man en prognos för en given timme, siffran vid parameters bestämmer vilket värde man vill hämta (finns allt från lufttryck till nederbörd) och vid values skriver man 0 för att det bara finns ett värde för temperatur. Slutligen lokaliseras span-taggen där vi vill infoga temperaturen och den nuvarande temperaturen infogas i span-taggen. Den fullständiga JavaScript-koden ser ut så här:

fetch("https://opendata-download-metfcst.smhi.se/api/category/pmp3g/version/2/geotype/point/lon/15.629488/lat/58.409064/data.json")

 

    .then(response => response.json())
   .then(data => {
       const temperatureSpan = document.querySelector("#temperatureSpan");
       temperatureSpan.innerHTML = data.timeSeries[2].parameters[11].values[0];
});

Så enkelt var det!

Här är ett exempel på en lite utökad funktionalitet där man kan välja vilken stad med Exsitec-kontor man vill se temperaturen för och även vilket stad där det är varmast respektive kallast just nu.

Välj kontor:

Vid kontoret i är det för tillfället: grader

Det är varmast vid kontoret i och kallast vid kontoret i .

Hör av dig till oss om ditt företag vill ha hjälp med att utveckla ett API. Vi hjälper gärna till!

 

Mer om integrationer

Kontakta skribenten
Filip Tammergård
Filip Tammergård