Når en afgangstavle opdaterer næste bus uden at genindlæse hele siden, skal oplysningerne komme et sted fra. Et API kan være forbindelsen mellem brugerfladen og den tjeneste, der leverer dem.
API'et beskriver en aftale mellem to dele
En webbaseret grænseflade kan beskrive, hvor der skal spørges, hvilke oplysninger forespørgslen kræver, og hvordan svaret er formet. Til en afgangstavle kan forespørgslen indeholde et stoppested. Svaret kan indeholde rutenummer, destination, tidspunkt og en besked om en eventuel forsinkelse.
Det er ikke selve brugerfladen. Den samme datakilde kan bruges i forskellige visninger, hvis adgang og vilkår tillader det. Omvendt skal frontend beslutte, hvilke oplysninger der er vigtigst for den rejsende, og hvordan ændringer bliver vist forståeligt. En teknisk forbindelse er begyndelsen på den opgave.
Browseren sender en forespørgsel og behandler svaret
JavaScripts Fetch API kan sende en HTTP-forespørgsel og give adgang til svaret. Data sendes ofte som JSON, et tekstformat til strukturerede oplysninger. Koden skal kontrollere status og derefter læse svaret i det forventede format. Et HTTP-fejlsvar kræver også håndtering, selv om der faktisk kom et svar tilbage.
Undersøg derefter de værdier, du vil bruge. En manglende afgangstid er ikke det samme som ingen forsinkelse. En tom liste er ikke nødvendigvis en fejl. Ved at skelne mellem situationerne kan brugerfladen give præcis hjælp frem for at vise den samme generelle besked til alt.
Design ventetid, tomme svar og fejl
Afgangstavlen har mindst fire relevante tilstande: Der hentes data, der er afgange, der er ingen afgange, eller oplysningerne kunne ikke hentes. En overskrift med Ingen afgange er misvisende, hvis forbindelsen blot fejlede. Bevar forskellen mellem det, systemet ved, og det, det ikke kunne undersøge.
Hvis gamle oplysninger vises imens, bør deres tidspunkt være tydeligt. Giv en forståelig mulighed for at prøve igen, hvor det er relevant. Overvej også gentagne tryk og langsomme svar: Et ældre svar bør ikke utilsigtet erstatte visningen af et stoppested, som brugeren netop har valgt.
Browseren må ikke være eneste kontrol af adgang
Kode og oplysninger, der sendes til browseren, kan undersøges af brugeren. En skjult knap eller en kontrol i frontend kan derfor ikke alene beskytte serverens data. Tjenesten, der modtager forespørgslen, skal afgøre, om handlingen og adgangen er tilladt.
Skeln mellem offentlige data og privilegerede legitimationsoplysninger. En hemmelig nøgle, der giver særlig adgang, skal ikke gemmes i downloadet frontendkode. Ved private oplysninger skal teamet planlægge godkendelse, adgangskontrol og passende databehandling som en del af systemet. Det ligger ud over at få en liste til at dukke op på skærmen.
Aftal format og ansvar før integrationen
Skriv et lille eksempel på et normalt svar, et tomt svar og en fejl. Afklar, hvilke felter der kan mangle, hvordan datoer fortolkes, og hvem der vedligeholder forbindelsen. Testvisninger med eksempeldata kan hjælpe design og frontend fremad, mens den rigtige integration bliver afklaret.
Markér tydeligt, når en demonstration bruger lokale eksempeldata. Den viser måske et godt layout, men beviser ikke, at en ekstern tjeneste er tilsluttet eller stabil. Ved aflevering bør den reelle forbindelse, de vigtigste fejlforløb og ansvaret ved ændringer være konkrete og efterprøvelige.
Tag med videre
Det vigtigste
at huske.
- Et API er en aftalt grænseflade mellem softwaredele.
- Vis forskellen på ventetid, tomme data og fejl.
- Adgangskontrol og hemmeligheder kræver en passende systemgrænse.
Lad os gøre det klart
Spørgsmål & svar
Hvad står API for?
Application Programming Interface. Det er en beskrevet grænseflade til software. I webprojekter bruges ordet ofte om endpoints, som frontend kan hente eller sende data til.
Hvad er JSON?
JSON er et tekstformat til strukturerede data, eksempelvis en liste med afgange og tilhørende tidspunkter. Det er et dataformat, ikke en database eller en færdig brugerflade.
Er et API frontend eller backend?
Et web-API leveres ofte af en backend og kaldes fra frontend. Begrebet er bredere: Browseren tilbyder også API'er til eksempelvis dokumentet og andre funktioner.
Hvorfor kan en dataforespørgsel give fejl?
Mulige årsager er netværk, forkert adresse, manglende adgang, serverfejl eller uventede data. Undersøg svarets status og indhold for at skelne mellem dem.
Er alle API-nøgler hemmelige?
Nogle tjenester har bevidst offentlige klientnøgler, mens andre nøgler giver privilegeret adgang. Følg tjenestens dokumenterede model og begrænsninger. En privilegeret hemmelighed skal ikke leveres i browserkode.
Hvad betyder CORS?
Cross-Origin Resource Sharing er en mekanisme, hvor en server med HTTP-headere angiver, hvilke andre origins browserkode må læse svar fra. En browserbesked om CORS er ikke nødvendigvis en fejl i selve layoutet.
Behøver alle hjemmesider et API?
Nej. En side med færdigt indhold kan leveres uden en separat dataforbindelse i browseren. Vælg en integration, når funktionen faktisk kræver oplysninger eller handlinger fra et andet system.
Læs selv videre
Kilder & fordybelse
Guiden bygger på disse kilder og erfaring fra egne projekter.
