Mikä on palvelin ja mihin Node.js on tarkoitettu

Missä verkkosivu oikeasti asuu, mikä API on, ja miksi tason 2 lomakkeella ei ollut minne lähettää viestejään.

Muistatko sen lomakkeen ilman vastaanottajaa?

Tasolla 2 rakensit lomakkeen joka tarkisti viestin, kiitti… ja sitten heitti viestin pois. Ei ollut minne tallentaa sitä. Verkkosivusi tähän asti voi vain jakaa valmiita tiedostoja – se ei voi vastaanottaa ja muistaa mitään. Siihen tarvitset palvelimen. Ja juuri sellaista olet oppimassa rakentamaan.

Frontend ja backend

Jokaisella isolla sovelluksella (Instagram, verkkokoulu, verkkokauppa) on kaksi puoliskoa:

Frontend – mikä tahansa joka pyörii vierailijan selaimessa. HTML, CSS, JavaScript, React. Tiedät jo kaiken tämän!
Backend – ohjelma joka pyörii palvelimella. Se vastaanottaa pyyntöjä, tallentaa dataa, valvoo sääntöjä. Ja koska Node.js on olemassa, se voidaan kirjoittaa kielellä jonka jo osaat: JavaScript.

Miten kaksi puoliskoa puhuu keskenään? API:n (Application Programming Interface) kautta – sovittuja osoitteita joihin backend vastaa. Tässä esimerkkikeskustelu:

Frontend:  GET /api/messages         ("Lähetä minulle kaikki viestit.")
Backend:   [{ "name": "Grandma", "text": "Lovely website!" }]

Frontend:  POST /api/messages        ("Tässä dataa, tallenna se: ...")
Backend:   { "saved": true }

GET = “anna minulle dataa” (selaimesi tekee tämän joka kerta kun avaat sivun).
POST = “tässä dataa, tallenna se” (juuri sitä lomakkeesi tekee).

Data lähetetään JSON-muodossa – se näyttää melkein täsmälleen samalta kuin JavaScript-objektit jotka tunnet tietovisasta. Onnekas sattuma? Ei – JSON tarkoittaa JavaScript Object Notation. Se on puolellasi.

Missä tällainen backend pyörii?

Kehityksen aikana omalla tietokoneellasi (localhost – tunnet sen Vitestä). Tuotannossa tietokoneella joka on aina päällä ja yhteydessä – joko vuokrattu “siivu” palvelimesta (VPS), tai palvelu joka hoitaa kaiken puolestasi (Render, Railway…). Pääsemme julkaisuun viimeisessä oppitunnissa.

💡

Mihin GitHub Pages sitten oli tarkoitettu? Se on hosting vain frontendille – se jakaa tiedostoja, ei muuta. Täydellinen tasolle 1–2 verkkosivulle (ja myös turvallisin: missä mikään ei pyöri, sinne ei voi murtautua). Tarvitset backendin hetkellä kun verkkosivusi pitää vastaanottaa ja muistaa jotain – viestejä, ilmoittautumisia, käyttäjiä.

Nyt sinun vuorosi 💪 (pieni tehtävä uteliaisuudesta)

Avaa suosikkiverkkosivusi, paina F12 ja vaihda Network-välilehdelle. Lataa sivu uudelleen ja katso pyyntöjen vesiputousta – jokainen rivi on yksi keskustelu selaimen ja palvelimen välillä.
Löydä listasta GET-pyyntö, ja yksi joka palauttaa JSONia (Type-sarake: json tai fetch). Klikkaa sitä ja katso vastaus – näet datan josta sivu on rakennettu.
Kirjoita tämä konsoliin ja katso frontendin pyytävän dataa itse:

fetch("https://api.chucknorris.io/jokes/random")
  .then((response) => response.json())
  .then((data) => console.log(data.value));

fetch(...) on JavaScript-komento “kutsu API:a.” Oppitunnilla 9 käytät juuri tätä komentoa yhdistääksesi lomakkeen omaan palvelimeesi.

✅

Tarkista itse: Voit selittää omin sanoin eron frontendin ja backendin välillä, tiedät mitä GET, POST ja JSON ovat, ja olet nähnyt Network-paneelissa miten verkkosivut puhuvat keskenään. Seuraavassa oppitunnissa rakennat tällaisen palvelimen itse.

Mitä opit tästä oppitunnista

Frontend pyörii vierailijan laitteella, backend pyörii palvelimella; ne puhuvat API:n kautta GET (anna) ja POST (tallenna) -viesteillä.
Data kulkee JSON-muodossa – se näyttää JavaScript-objekteilta.
fetch() on miten frontend pyytää dataa palvelimelta.