{"id":91123,"date":"2022-10-11T12:46:39","date_gmt":"2022-10-11T17:46:39","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/hur-apier-fungerar-och-hur-man-integrerar-dem-i-din-app\/"},"modified":"2022-10-11T12:46:39","modified_gmt":"2022-10-11T17:46:39","slug":"hur-apier-fungerar-och-hur-man-integrerar-dem-i-din-app","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/hur-apier-fungerar-och-hur-man-integrerar-dem-i-din-app\/","title":{"rendered":"Hur API:er fungerar och hur man integrerar dem i din app"},"content":{"rendered":"
\n

Applikationsprogrammeringsgr\u00e4nssnitt (API) \u00e4r en av de ultimata genv\u00e4garna f\u00f6r att bygga smarta appar. Det \u00e4r en kommunikationskanal mellan tv\u00e5 applikationer. Oavsett om det \u00e4r avsiktligt eller inte, har du anv\u00e4nt API:er vid vissa tillf\u00e4llen n\u00e4r du surfar p\u00e5 internet eller anv\u00e4nder program i ditt dagliga liv.<\/p>\n

\u00c4ven om ett API vanligtvis skickar komplexa data som ett svar, hur kan du f\u00f6rst\u00e5 och anv\u00e4nda denna information f\u00f6r att tj\u00e4na dina anv\u00e4ndare? API:er g\u00f6r livet enkelt f\u00f6r b\u00e5de erfarna och nya utvecklare. S\u00e5 du m\u00e5ste veta hur du anv\u00e4nder dem med din app.<\/p>\n

H\u00e4r, med n\u00e5gra anv\u00e4ndningsfall och exempel, tar vi en titt p\u00e5 hur du kan anv\u00e4nda ett API f\u00f6r att tj\u00e4na dina program som utvecklare.<\/p>\n

<\/span> Hur fungerar API:er?<\/span><\/h2>\n

Utvecklare skapar API:er som produkter som kan tj\u00e4na andra utvecklare. Syftet \u00e4r att g\u00f6ra komplexa webbutvecklingsprocesser enkla, effektivare och snabbare f\u00f6r konsumentutvecklare eller f\u00f6retag.<\/p>\n

De flesta f\u00f6retag \u00e4r nu beroende av tredje parts API:er f\u00f6r att l\u00f6sa problem och betj\u00e4na sina kunder b\u00e4ttre. Men att anv\u00e4nda API:er \u00e4r inte s\u00e5 komplicerat som m\u00e5nga tror. Du kan se det som en tredjepartsl\u00f6sning som ger dig ett specifikt svar i form av data n\u00e4r du g\u00f6r en viss HTTP-f\u00f6rfr\u00e5gan.<\/p>\n

Att anv\u00e4nda ett API \u00e4r som att g\u00f6ra en best\u00e4llning p\u00e5 en pizzarestaurang. Du kan inte g\u00e5 in i k\u00f6ket och ber\u00e4tta f\u00f6r dem vad du vill. Du beh\u00f6ver en servit\u00f6r f\u00f6r att ta din best\u00e4llning och kommunicera den till k\u00f6ket innan du \u00e5terv\u00e4nder med din pizza.<\/p>\n

Du kan se ett API som l\u00e4nken mellan dig och k\u00f6ket. I det h\u00e4r fallet \u00e4r du en kund som nedl\u00e5tande restaurangen tillhandah\u00e5ller en servit\u00f6r (API). Servit\u00f6ren svarar sedan med ditt val av pizza (data). I ett riktigt API \u00e4r din webbapp klienten som beg\u00e4r att konsumera inneh\u00e5llet fr\u00e5n leverant\u00f6ren genom dess API genom att g\u00f6ra slutpunkts-HTTP-f\u00f6rfr\u00e5gningar.<\/p>\n

<\/span> Vad \u00e4r en API-\u00e4ndpunkt?<\/span><\/h2>\n

Att ansluta till ett API kr\u00e4ver att du ansluter ditt program till en API-slutpunkt. Du kan se detta som en tv\u00e5v\u00e4gsanslutning. Slutpunkten som \u00e4r ansluten till ditt program skickar en f\u00f6rfr\u00e5gan, medan den som \u00e4r ansluten till API:et \u00e5terkopplar dig med ett specifikt svar.<\/p>\n

Slutpunkten \u00e4r en URL som beg\u00e4r och ger klienten direkt tillg\u00e5ng till resurserna i ett API.<\/p>\n

F\u00f6rutom att f\u00e5 data med ett API kan du \u00e4ven POST-f\u00f6rfr\u00e5gningar fr\u00e5n en leverant\u00f6r till en klient, anv\u00e4nda PUT-metoden f\u00f6r att f\u00e5 mer information fr\u00e5n en leverant\u00f6r, samt anv\u00e4nda DELETE-metoden f\u00f6r att ta bort befintlig data fr\u00e5n ditt program. Var och en av dessa metoder \u00e4r vanligtvis tillg\u00e4ngliga i en API:s dokumentation.<\/p>\n

<\/span> Kriterier f\u00f6r att ansluta till ett API<\/span><\/h2>\n

Att integrera ett API med ditt program \u00e4r inte bara ett spontant beslut \u2013 det \u00e4r f\u00f6rmediterat. Du m\u00e5ste veta vilken information du vill ha och hur mycket av den du vill ha. Detta minskar komplexiteten, s\u00e4rskilt om du har att g\u00f6ra med JSON-data som kommer som en flerdimensionell array. Denna praxis l\u00e5ter dig ocks\u00e5 f\u00e5 den specifika information du beh\u00f6ver f\u00f6r ditt program.<\/p>\n

Det finns hundratals API:er d\u00e4r ute med olika regler f\u00f6r att ansluta till dem. Medan vissa API:er \u00e4r det free och \u00f6ppen k\u00e4llkod, andra \u00e4r endast tillg\u00e4ngliga p\u00e5 prenumerationsbasis.<\/p>\n

\u00c4ven om vissa \u00e4r s\u00f6ml\u00f6sa och enkla och inte kr\u00e4ver n\u00e5gra f\u00f6ruts\u00e4ttningar, kan andra API:er kr\u00e4va att du uppfyller villkor som att generera en API-nyckel eller registrera dig f\u00f6r ett utvecklarkonto innan du kan ansluta till deras slutpunkter.<\/p>\n

En av de viktigaste aspekterna av alla API \u00e4r dock dess dokumentation. Den b\u00e4sta praxisen \u00e4r att l\u00e4sa och f\u00f6lja dokumentationen f\u00f6r alla API du t\u00e4nker ansluta till f\u00f6r guider om hur du kodar och anv\u00e4nder dess resurser. Det beror p\u00e5 att varje API har sina egna anslutningsmetoder och instruktioner.<\/p>\n

F\u00f6r att ansluta till ett API m\u00e5ste du ocks\u00e5 k\u00e4nna till de programmeringsspr\u00e5k som det st\u00f6der.<\/p>\n

<\/span> Hur man ansluter till ett API: Praktiska exempel<\/span><\/h2>\n

Det finns inga specifika s\u00e4tt att ansluta till ett API, men n\u00e5gra exempel kommer att exponera dig f\u00f6r de grundl\u00e4ggande koncepten f\u00f6r hur du kan konsumera API-data med din app. Men innan vi g\u00e5r vidare har vi skrivit ett par artiklar om API:er och hur du kan utnyttja dem.<\/p>\n

Vi har till exempel en detaljerad artikel om hur du kan ansluta till Weatherstack API, som ger dig tillg\u00e5ng till v\u00e4derdata i realtid. Vi har \u00e4ven skrivit om hur du kan anv\u00e4nda Mediastack API, som \u00e4r ett betal-API som du kan anv\u00e4nda f\u00f6r att l\u00e4gga till nyhetsrubriker p\u00e5 din webbplats.<\/p>\n

L\u00e5t oss ta en titt p\u00e5 n\u00e5gra korta kodexempel p\u00e5 hur du kan ansluta till ett API.<\/p>\n

<\/span>Hur man anv\u00e4nder Iro.js Color Picker API<\/span><\/h3>\n

Iro.js \u00e4r ett enkelt API som l\u00e5ter dig l\u00e4gga till en free f\u00e4rgv\u00e4ljare till din webbplats. N\u00e4r du v\u00e4ljer en f\u00e4rgpunkt p\u00e5 f\u00e4rghjulet returnerar API:et hexadecimal- eller RGB-koden f\u00f6r den f\u00e4rgen. F\u00f6r att ansluta till iro.js API beh\u00f6ver du bara klistra in dess inneh\u00e5llsleveransn\u00e4tverk (CDN) i huvud<\/strong> avsnitt av ditt DOM.<\/p>\n

Den fullst\u00e4ndiga dokumentationen f\u00f6r detta API finns p\u00e5 iro.js.org. L\u00e5t oss se hur du kan ansluta till detta API med exempelkodavsnittet nedan:<\/p>\n

<!DOCTYPE html><html><head><title>Practice Slider<\/title><script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@jaames\/[email\u00a0protected]<\/a>\"><\/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 pickerwidth: 320,\/\/ Set the initial color to pure redcolor:\"#ff0000\"});colorPicker.on(['color:change', 'color:init'], function(color) {\/\/ log the current color as a HEX stringcolors.innerHTML=color.hexString;});};<\/script><\/html><\/pre>\n
I fallet med exempel-API-en ovan beh\u00f6ver du ingen API-nyckel f\u00f6r att ansluta till den.  Men f\u00f6r att f\u00f6rst\u00e5 det b\u00e4ttre, ta en n\u00e4rmare titt p\u00e5 JavaScript.  F\u00f6r att ansluta till detta API beh\u00f6ver vi bara anropa F\u00e4rgv\u00e4ljare<\/strong> funktion fr\u00e5n ir<\/strong> klass, d\u00e5 passerar vi id<\/strong> av f\u00e4rghjulsbeh\u00e5llaren in i klassen.<\/p>\n
Slutpunkten f\u00f6r iro.js API \u00e4r l\u00e4tt att ansluta till eftersom dess utvecklare har gjort det extra arbetet med att koda klassen f\u00f6r sina anv\u00e4ndare.  Bilden nedan \u00e4r resultatet av exempelkoden ovan.<\/p>\n
\n<\/figure>\n
F\u00f6r att se hur f\u00e4rgbytesh\u00e4ndelsen sker kan du \u00f6ppna en annan HTML-fil och klistra in f\u00f6ljande kod i dess manus<\/strong> sektion:<\/p>\n
var colorPicker = new iro.ColorPicker('#color-pick', {\/\/ Set the size of the color pickerwidth: 400,\/\/ Set the initial color to pure redcolor:\"#ff0000\"});const myColor =(color)=>{console.log(color.hexString);};colorPicker.on(\"color:change\", myColor);<\/pre>\n
Ovanst\u00e5ende kod loggar hexadecimala f\u00e4rgv\u00e4rden varje g\u00e5ng du \u00e4ndrar f\u00e4rgv\u00e4ljarens position p\u00e5 hjulet.<\/p>\n
OBS:<\/strong> All exempelkod \u00e4r resultatet av att f\u00f6lja instruktionerna i API:s dokumentation.<\/p>\n
<\/span>Hur man anv\u00e4nder NoCodeAPI Currency Exchange API<\/span><\/h3>\n
NoCodeAPI erbjuder m\u00e5nga API:er inklusive valutaomvandlarens API.  F\u00f6r att ansluta till dess valutav\u00e4xlings\u00e4ndpunkt, g\u00e5 till NoCodeAPI-marknadsplatsen och skapa ett konto.<\/p>\n
N\u00e4r du v\u00e4l har loggat in finns det ett s\u00f6kf\u00e4lt l\u00e4ngst upp p\u00e5 sidan.  Skriv i s\u00f6kf\u00e4ltet valutav\u00e4xling<\/strong>, klicka p\u00e5 n\u00e4r din fr\u00e5ga visas Aktivera<\/strong>.<\/p>\n
Klicka p\u00e5 p\u00e5 n\u00e4sta sida G\u00f6r Currency Exchange API<\/strong>.  Skriv sedan in ett \u00f6nskat namn f\u00f6r API:t och klicka Skapa<\/strong>.<\/p>\n
N\u00e4r du har skapat API:t klickar du p\u00e5 Se dokumentation<\/strong>.  V\u00e4lj sedan ett f\u00f6redraget spr\u00e5k f\u00f6r att se koden f\u00f6r anslutning till API:ets slutpunkt.  Du kan sedan kopiera den exempelkoden och klistra in den i din ans\u00f6kan f\u00f6r ytterligare anpassning.<\/p>\n
Ta en titt p\u00e5 v\u00e5r exempelkod nedan f\u00f6r valutaomvandling:<\/p>\n
<!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><\/pre>\n
Koden ovan \u00e4r endast en modifierad version av den i dokumentationen.  Var dock uppm\u00e4rksam p\u00e5 konverteringsparametrarna i svarsvariabeln i JavaScript.<\/p>\n
S\u00e5 h\u00e4r ser den r\u00e5a JSON-utg\u00e5ngen ut:<\/p>\n
Success:{\"query\":{\"from\":\"USD\",\"to\":\"EUR\",\"amount\":10},\"info\":{\"time\":1604587505388,\"rate\":0.844865},\"result\":8.44865,\"text\":\"10 USD = 8.44865 EUR\"}<\/pre>\n
<\/span>  Dra f\u00f6rdel av API:er<\/span><\/h2>\n
Genom att anv\u00e4nda API:er f\u00f6r din app kan du slutf\u00f6ra projekt snabbare.  \u00c4ven om viss API-dokumentation kan vara teknisk, finns det m\u00e5nga av dem d\u00e4r ute som \u00e4r anv\u00e4ndbara f\u00f6r nykomlingar.<\/p>\n
Men som vi n\u00e4mnde tidigare, f\u00f6r att f\u00e5 ut det mesta av alla API du vill utnyttja data fr\u00e5n, m\u00e5ste du studera dess dokumentation noga och f\u00f6lja reglerna f\u00f6r att ansluta till den.<\/p>\n
\u00c4ven om vi har anv\u00e4nt JavaScript f\u00f6r v\u00e5ra exempel h\u00e4r, beroende p\u00e5 typen av API, st\u00f6der de flesta fortfarande andra programmeringsspr\u00e5k ocks\u00e5.  Du kan f\u00e5 information om spr\u00e5kst\u00f6d fr\u00e5n dokumentationen f\u00f6r alla API.  Observera ocks\u00e5 att exemplen vi anv\u00e4nde h\u00e4r bara \u00e4r n\u00e5gra av m\u00e5nga anv\u00e4ndningsfall av API:er.<\/p>\n
    Om f\u00f6rfattaren<\/strong><\/p>\n
            Idowu Omisola (124 artiklar publicerade)
<\/strong><\/p>\n
Idowu brinner f\u00f6r allt smart teknik och produktivitet.  I hans free tid, han leker med kodning och byter till schackbr\u00e4det n\u00e4r han har tr\u00e5kigt, men han \u00e4lskar ocks\u00e5 att bryta sig loss fr\u00e5n rutinen d\u00e5 och d\u00e5.  Hans passion f\u00f6r att visa m\u00e4nniskor v\u00e4gen runt modern teknik motiverar honom att skriva mer.<\/p>\n
                            Mer fr\u00e5n Idowu Omisola<\/p>\n
<\/span>Prenumerera p\u00e5 v\u00e5rt nyhetsbrev<\/span><\/h4>\n
G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner, free e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n
Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n<\/p><\/div>\n  
\n
\n
Table of Contents<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n