Kobling mot API i Perspective

Det kan være en rekke applikasjoner det kan være aktuelt å integrere i Ignition. Å hente data via et API er meget enkelt i Perspective. Vi skal se på et lite eksempel hvor vi kobler oss mot OpenWeatherMap for å hente værdata.

Vi navigerer først til siden https://openweathermap.org/.

 

 

Vi må nå opprette en konto (gratis) og genere en s.k. API key:

Menyvalget API viser alle de ulike API-ene vi kan koble oss mot. I dette eksempelet skal vi koble oss mot "Current Weather Data":

 

Ved å trykke på API doc får vi informasjon om hvordan API-kallene bygges opp:

Vi skal gjøre det enkelt og velger det øverste kallet hvor vi kun trenger to parametere: Navnet på en by og API key-en vi genererte.

 

I Ignition Designer lager vi en ny View. I Viewet oppretter vi en Custom Property som et objekt. La oss kalle den Weather. 

 

Vi lager nå en tekstboks i viewet slik at vi kan skrive inn navnet på den byen vi vil sjekke været for:

Det er teksten vi vil benytte. Den kan hentes som følgende egenskap:  {/root/TextField.props.text}

Vi har nå det vi trenger for å gjøre kallet vårt. Vi går tilbake til Weather (under Custom properties) og trykker på binding ikonet.

 

 

Som Binding Type velger vi HTTP. Som Method velger vi GET.

API-kallet vi skal bruke er: api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}

 

I URL feltet blir kallet seende slik ut, når vi benytter tekstefeltet som city name og vår egen API-key:

"https://api.openweathermap.org/data/2.5/weather?q="+{/root/TextField.props.text}+"&appid=ad3bde3efad11c93d336e72bbacd728e"

 

{/root/TextField.props.text} er en streng. Vi må derfor benytte + tegnene før og etter denne delen.  

Pass på at "" benyttes rundt delene før og etter +{/root/TextField.props.text}+

 

Vi kan nå skrive inn en by i tekstfeltet og se de returnerte dataene i Weather:

 

Vi kan nå benytte de ulike objektelementene i f.eks. indikatorer e.l. i viewer vårt. Benytt Expression binding. Temperaturene er i absolutt temperatur, så vi må trekke fra 273.15 for å få dem i grader celsius.

 

 

Vi kan nå teste API-kallet ved å sette Designeren i preview mode og skrive inn en by i tekstfeltet.