Mikä API on · Koodaa Martinin kanssa

Selvitä miten verkkosivut juttelevat keskenään – ja miten verkkosivusi voi kysyä säätä, karttoja tai tekoälyä.

Tarjoilija kahden keittiön välillä

Kuvittele ravintola. Sinä (verkkosivusi) haluat tilata ruokaa, mutta et saa mennä keittiöön (vieras palvelu – sää, kartat, tekoäly). Siihen on tarjoilija – se ottaa tilauksesi, vie sen keittiöön ja tuo valmiin annoksen takaisin.

Tuota tarjoilijaa kutsutaan API:ksi (Application Programming Interface). Se on sovittu tapa, jolla ohjelmat pyytävät toisiltaan dataa:

Verkkosivusi lähettää pyynnön (“Millainen sää huomenna Brnossa on?”).
API välittää sen palvelulle, joka tietää vastauksen.
Palvelu palauttaa vastauksen sovitussa muodossa.

Näytän sinulle: JSON – yhteinen kieli

Ohjelmat vastaavat toisilleen JSON-muodossa. Se näyttää melkein JavaScript-objektilta, jonka jo tunnet Taikurilta:

{
  "mesto": "Brno",
  "teplota": 21,
  "slunecno": true,
  "dny": ["Saturday", "Sunday"]
}

Teksti on lainausmerkeissä, numerot eivät.
true/false tunnet jo ehdoista.
Hakasulkeet = lista, aaltosulkeet = objekti.

Kokeile heti – avaa tämä osoite selaimessasi (oikea sää-API, ilmainen, ei rekisteröitymistä):

https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&current_weather=true

Näet JSON:in Brnon nykyisestä säästä. Ei grafiikkaa – vain puhdasta dataa. Grafiikat rakennat sen ympärille!

💡

API:t ovat kaikkialla. Kun mobiilisovellus näyttää ennusteen, bussiaikataulun tai kartan, sillä ei ole usein dataa itse – se kysyy API:n kautta. Nyt opit tekemään saman.

Nyt sinun vuorosi 💪

Avaa yllä oleva osoite selaimessasi ja etsi vastauksesta nykyinen lämpötila ja tuulen nopeus.
Kokeile vaihtaa osoitteessa latitude ja longitude oman kaupunkisi koordinaateiksi (etsi ne karttapalvelusta – oikea klikkaus → “What’s here?”).
Kirjoita 2–3 ideaa projektiisi siitä, mikä ulkopuolinen data olisi hyödyllistä verkkosivullasi:

🏫 Koulun verkkosivu – ideat

Sää kouluretkelle, kartta koulun sijainnilla, lounaslista ruokalan API:sta (jos sellainen on), lomat ja koulun vapaapäivät.

🙋 Henkilökohtainen verkkosivu – ideat

Sää kaupungissasi, kartta paikoista joissa olet käynyt, tekoäly-chatbot joka vastaa vierailijoiden kysymyksiin sinusta.

🌍 Matkakirja – ideat

Kartta matkojesi napeilla, sää seuraavassa kohteessa, valuuttamuunnos matkabudjetille.

⚽ Seuran verkkosivu – ideat

Sää viikonlopun otteluun, kartta kentälle vierasjoukkueille, tekoäly-apuri joka selittää jalkapallon säännöt.

✅

Tarkista: Voit selittää mikä API on (tarjoilija ohjelmien välillä) ja tunnistaa JSON:in. Olet nähnyt oikean API-vastauksen selaimessasi.

Mitä opit tästä oppitunnista

API = sovittu tapa ohjelmien pyytää toisiltaan dataa.
Vastaukset tulevat JSON:ina – objekteja ja listoja kuten JavaScriptissä.
Seuraavassa oppitunnissa haet dataa API:sta suoraan verkkosivullesi fetch:llä.