Vibe-koodaus · Oppitunti

Frontend ja backend yhdessä

Yhdistäkää näyttö palvelimeen.

Oppitunti 2/413 vaihetta

Frontend ja backend yhdessä on ilmainen Vibe-koodaus-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vibe-koodaus-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vibe-koodaus-kurssilla on yhteensä 4 oppituntia.

Yhden sovelluksen kaksi puoliskoa

Suunnitelmanne on valmis — nyt yhdistetään full-stack-sovelluksen kaksi puoliskoa. Frontend on kaikki, minkä käyttäjä näkee ja mitä hän napsauttaa selaimessa. Backend on palvelimella suoritettavaa koodia, joka hoitaa raskaan työn: tallentaa tietoja, suorittaa logiikkaa ja keskustelee tietokannan kanssa.

Ne viestivät lähettämällä viestejä internetin yli. Tällä oppitunnilla annatte tekoälyn rakentaa molemmat puolet ja yhdistää ne niin, että näytöllä painettu painike saavuttaa oikeasti palvelimen.

Miten ne keskustelevat: pyynnöt ja vastaukset

Frontend ja backend keskustelevat HTTP-pyyntöjen kautta. Frontend lähettää pyynnön ("anna aikamerkinnät"); backend lähettää takaisin vastauksen (datan, yleensä JSON-muodossa).

Teidän ei tarvitse opetella yksityiskohtia ulkoa — tämän mielikuvan tunteminen auttaa lukemaan tekoälyn koodia ja esittämään parempia kysymyksiä, kun jokin ei yhdisty.

Explain in plain language how a frontend and a backend talk to each other over HTTP.

Use my freelancer hours app as the example: what happens, step by step, when a user clicks 'Add 2 hours for Acme'?

Keep it beginner-friendly and mention the words request, response, and JSON.

Mikä on API-päätepiste?

API-päätepiste on backendin tietty URL-osoite, joka hoitaa yhden tehtävän — esimerkiksi /api/entries aikamerkintöjen listaamiseen tai lisäämiseen. Frontend kutsuu päätepisteitä, ja backend vastaa.

Selkeiden päätepisteiden suunnittelu etukäteen pitää sovelluksen järjestyksessä. Pyytäkää tekoälyä ehdottamaan MVP:n tarvitsemat päätepisteet ominaisuuksienne perusteella.

For the freelancer hours app, list the API endpoints the MVP needs.

For each endpoint give:
- the method (GET, POST, etc.)
- the path (e.g. /api/entries)
- what it does in one line
- what it returns

Keep it minimal — only endpoints the MVP screens actually call.

Luokaa backend-päätepiste

Nyt rakennetaan. Pyytäkää tekoälyä luomaan yksi päätepiste kerrallaan. Pienestä aloittaminen tarkoittaa, että voitte suorittaa ja testata jokaisen osan sen sijaan, että etsisitte virheitä valtavasta koodimassasta.

Huomatkaa, miten kehote määrittää tarkasti frameworkin ja datan rakenteen. Mitä täsmällisempi olette, sitä paremmin luotu koodi sopii sovelluksenne muuhun osaan.

Using Next.js (App Router) API routes, create a POST endpoint at /api/entries that:
- accepts JSON with { client, hours, date }
- for now, stores entries in an in-memory array (no database yet)
- returns the saved entry as JSON

Also create a GET /api/entries that returns all entries. Add basic input validation and explain the code briefly.

Luokaa sitä kutsuva frontend

Nyt toinen puolisko: lomakkeen sisältävä näkymä. Kun käyttäjä lähettää lomakkeen, frontend lähettää datan /api/entries-päätepisteeseenne ja näyttää tuloksen.

Kertokaa tekoälylle täsmälleen, mitä päätepistettä kutsutaan ja mitä näytetään. Näin molemmat puoliskot pysyvät synkronoituina.

Build a React component (Next.js page) for adding time entries.

It should:
- show a form with fields: client, hours, date
- on submit, POST the data to /api/entries
- after success, fetch GET /api/entries and list all entries below the form
- show a simple loading and error state

Keep the styling minimal and clean. Explain how the fetch calls connect to my backend.

fetch: niitä yhdistävä liima

Selaimessa frontend käyttää fetch-funktiota backendin kutsumiseen. Tässä on perusmalli, jonka tekoäly tuottaa — funktio lähettää uuden merkinnän ja lukee vastauksen. Suorittakaa se nähdäksenne, miltä pyyntökuorma ja jäsennetty vastaus näyttävät.

async function addEntry(entry) {
  // In a real app this URL hits your backend; here we just simulate it
  const fakeServer = (data) => ({ id: 1, ...data, saved: true });

  const payload = JSON.stringify(entry);
  console.log("Sending to /api/entries:", payload);

  const response = fakeServer(JSON.parse(payload));
  console.log("Server responded:", response);
  return response;
}

addEntry({ client: "Acme", hours: 2, date: "2026-06-10" });

Testatkaa yhteys päästä päähän

Liittäminen ei ole valmis, ennen kuin olette nähneet tiedon kulkevan molempiin suuntiin. Käynnistäkää sovellus, lähettäkää lomake ja varmistakaa, että uusi merkintä ilmestyy luetteloon — tämä osoittaa, että frontend saavutti backendin ja sai vastauksen.

Jos mitään ei tapahdu, tekoäly osaa hyvin selvittää ongelman, kun kuvaatte tarkasti, mitä näitte.

I built the form and the /api/entries endpoints. When I submit the form, nothing appears in the list, but I see no error on screen.

Help me debug the connection between frontend and backend. Tell me:
- what to check in the browser's Network tab
- what console.logs to add
- the most common reasons a fetch silently fails

Sama projekti vai erilliset palvelimet

Tulette kuulemaan kahdesta toteutustavasta. Full-stack-kehyksessä, kuten Next.jsissä, frontend ja backend ovat yhdessä projektissa ja otetaan käyttöön yhdessä — tämä on aloittelijalle yksinkertaisin vaihtoehto. Vaihtoehtoisesti voitte käyttää erillistä backendia (omalla palvelimellaan) ja erillistä frontendia.

Vibe codingissa yhdessä projektissa pysyminen välttää palvelinten väliset ongelmat, kuten CORSin. Kysykää tekoälyltä, mikä vaihtoehto sopii tavoitteisiinne.

Compare two setups for my freelancer hours app:
1. One Next.js project containing both frontend and API routes
2. A separate backend server plus a separate frontend

For a beginner who wants to ship fast on Vercel, which do you recommend and why? Mention any extra complexity like CORS that I'd avoid with the simpler option.

Käsitelkää virheet hallitusti

Oikeat verkot eivät aina toimi. Pyyntö voi aikakatkaistua, palvelin voi palauttaa virheen tai data voi olla virheellisesti muotoiltua. Hyvä sovellus näyttää käyttäjälle ystävällisen viestin sen sijaan, että lakkaisi toimimasta äänettömästi.

Pyytäkää tekoälyä lisäämään virheenkäsittely molemmille puolille, jotta virheet ovat näkyviä ja niistä voidaan palautua.

Add robust error handling to my time-entry feature.

Frontend: if the POST fails, show a friendly inline error and let the user retry.
Backend: validate input and return a clear error message with the right status code (e.g. 400 for bad input).

Show me the updated code and explain what each error case covers.

Pidä frontend ja backend yhdenmukaisina

Rikkinäisten full-stack-sovellusten yleisin syy on se, että niiden kaksi puolta ovat eri mieltä datan rakenteesta — frontend lähettää hrs-kentän, mutta backend odottaa hours-kenttää.

Pidä datan rakenteelle yksi totuuden lähde (merkitse se tiedostoon PROJECT.md), ja kun muutat toista puolta, pyydä tekoälyä päivittämään toinen. Yhdenmukaisuus pitää liitännän toimivana.

I'm changing the time entry shape from { client, hours, date } to { clientId, minutes, date, note }.

Update BOTH the /api/entries endpoint and the frontend form/list to use the new shape consistently. Update PROJECT.md too. Show me a checklist of every place that had to change.

Rakensit toimivan silmukan

Teillä on nyt todellinen edestakainen tiedonkulku: käyttäjä täyttää lomakkeen, frontend kutsuu backendin päätepistettä fetch-funktiolla, backend käsittelee pyynnön ja vastaa siihen, ja näkymä päivittyy. Tämä silmukka on jokaisen full-stack-sovelluksen sydän.

Tällä hetkellä data on vain muistissa ja katoaa uudelleenkäynnistyksen yhteydessä. Seuraavaksi teemme siitä pysyvää oikean tietokannan avulla.

Pikatarkistus

Varmistakaa, että frontendin ja backendin välinen yhteys on selvä.

Vastaa interaktiivisessa oppitunnissa

Kertaus: puoliskojen yhdistäminen

Yhdistitte frontendin ja backendin ohjaamalla tekoälyä kehotteilla:

Ne viestivät keskenään HTTP-pyyntöjen ja -vastausten (JSON) avulla
Backend tarjoaa API-päätepisteet, joita frontend kutsuu fetch-funktiolla
Rakentakaa ja testatkaa yksi päätepiste kerrallaan
Lisätkää virheenkäsittely molemmille puolille
Pidättehän datan rakenteen yhdenmukaisena frontendin ja backendin välillä

Seuraavaksi tallennamme datan oikeasti tietokantaan, jotta se säilyy uudelleenkäynnistyksen jälkeen.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 25
Oppitunnit: 100

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Frontend ja backend yhdessä” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vibe-koodaus-oppimispolun 3 oppituntia, myös oppitunnin “Frontend ja backend yhdessä”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vibe-koodaus-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Frontend ja backend yhdessä”?

Yhdistäkää näyttö palvelimeen. Harjoittelet Vibe-koodaus-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vibe-koodaus-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vibe-koodaus-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Frontend ja backend yhdessä”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Vibe-koodaus-oppitunnilla?

Kyllä. Jokainen Vibe-koodaus-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Vibe-koodaus