Mikä on full-stack-sovellus? Selkeä selitys

Full-stack-sovellus sisältää kaikki kerrokset, joita se tarvitsee toimiakseen: käyttöliittymän (frontend), jonka ihmiset näkevät ja klikkaavat, backendin, joka toimii palvelimella ja soveltaa sääntöjä, sekä tietokannan, joka muistaa kaiken. Tehtävälista, joka tallentaa tehtäväsi, antaa kirjautua sisään millä tahansa laitteella ja ei näytä listaasi kenellekään muulle, on full-stack. Yksi sivu, joka näyttää vain aukioloajat, ei ole.

”Stack” tarkoittaa yksinkertaisesti tekniikkakerroksia, jotka on pinottu toistensa päälle. ”Full” tarkoittaa, että kaikki ne ovat mukana.

Miksi tämä on tärkeää, kun rakennat tekoälyllä

Kun kuvailet sovelluksen tekoälyrakentajalle, käyttämäsi sanat ratkaisevat, mitkä kerrokset se rakentaa. „Tee sivu, joka näyttää ruokalistamme” tuottaa käyttöliittymän. „Anna asiakkaiden tilata ruokalistalta ja anna keittiön nähdä uudet tilaukset” tarvitsee kaikki kolme kerrosta, koska tilaukset on tallennettava, jaettava kahdentyyppisille käyttäjille ja pidettävä yksityisinä.

Kerrosten ero auttaa kolmella tavalla:

• Pyydät oikeaa asiaa. Jos haluat tietojen tallentuvan, sano se. Rakentaja, joka tekee vain käyttöliittymän, näyttää valmiilta mutta unohtaa kaiken päivityksessä.
• Tunnistat näennäisen valmiuden. Esimerkkidatalla toimiva demo voi näyttää täsmälleen samalta kuin toimiva sovellus. Kerrosten tunteminen auttaa tarkistamaan, että data oikeasti menee jonnekin.
• Ymmärrät ylläpitokustannukset. Pelkkä käyttöliittymä voidaan tarjota staattisina tiedostoina. Backend ja tietokanta ovat ohjelmia, jotka pyörivät palvelimilla, ja siitä syntyy suurin osa hostauksen kustannuksista.

Arkinen vertauskuva: ravintola

Ajattele ravintolaa.

• Ruokasali on käyttöliittymä. Ruokalistat, pöydät ja tarjoilijan muistio. Se on se, minkä vieraat näkevät, ja sen pitää olla miellyttävä ja helppokäyttöinen.
• Keittiö on backend. Vieraat eivät mene sinne. Keittiö ottaa tilaukset vastaan, tarkistaa, onko annos saatavilla, valmistaa sen ja kieltäytyy oudoista pyynnöistä. Säännöt asuvat täällä.
• Kellari ja tilauskirja ovat tietokanta. Ne pitävät kirjaa siitä, mitä on olemassa ja mitä on tilattu, joten mitään ei unohdu vuoron vaihtuessa.

Ravintola, jossa on vain ruokasali, voi näyttää hienon ruokalistan, mutta sinä et saa ruokaa. Se on pelkkä käyttöliittymä, joka esittää olevansa full-stack.

Kolme kerrosta tarkemmin

Kerrokset puhuvat keskenään kiinteässä järjestyksessä. Käyttöliittymä pyytää backendilta jotain API:n kautta, eli joukon määriteltyjä pyyntöjä, joihin backend vastaa. Backend tarkistaa pyynnön, lukee tai kirjoittaa tietokantaan ja lähettää vastauksen. Käyttöliittymä ei koskaan puhu tietokannan kanssa suoraan.

Tämä järjestys on koko pinon tärkein tietoturvaajatus. Kaikkea käyttöliittymässä voi lukea ja muuttaa vierailija, koska se toimii hänen laitteellaan. Siksi säännöt, kuten „vain omistaja näkee tämän laskun” tai „kuponki voi käyttää kerran”, täytyy pakottaa backendissä. Lisää kerrosten erosta on käyttöliittymä vs. backend.

Esimerkki: jooga-studion varaussovellus

Oletetaan, että pidät jooga-studiota ja haluat ihmisten varaavan tunteja verkossa.

Mitä kävijä tekee: avaa sivuston, näkee tämän viikon tunnit, napauttaa yhtä, kirjautuu sisään ja varaa paikan.

Mitä tapahtuu taustalla:

1. Käyttöliittymä näyttää aikataulun. Täyttääkseen sen se kysyy backendilta: „Mitkä tunnit ovat tällä viikolla ja montako paikkaa on vapaana?”
2. Backend kysyy tietokannalta tunnit ja laskee varaukset kullekin, ja vastaa sitten.
3. Kävijä napauttaa Varaa. Käyttöliittymä lähettää pyynnön ”varaa tunti 42 tälle sisäänkirjautuneelle henkilölle”.
4. Backend tarkistaa: onko henkilö todella kirjautunut sisään? Onko tunti täynnä? Onko hän jo varannut sen? Vain jos kaikki on kunnossa, se kirjoittaa uuden varausrivin tietokantaan.
5. Backend vastaa ”varattu”, ja käyttöliittymä näyttää vahvistuksen.
6. Myöhemmin studion omistaja kirjautuu sisään ja näkee tuntilistan. Backend tarkistaa, että hän on ylläpitäjä, ennen kuin näyttää kaikkien nimet.

Nyt kuvittele, että tämä rakennettaisiin pelkkänä käyttöliittymänä. Aikataulu voisi näkyä ja Varaa-painike voisi näyttää kauniin rastin, mutta varaus katoaisi päivityksessä, ”paikkoja jäljellä” -luku olisi muille väärä, eikä omistaja näkisi sitä koskaan. Askel 4, eli tarkistukset, puuttuisi kokonaan. Se on käytännön ero.

Keskeiset termit

• Frontend (asiakaspuoli): osa, joka toimii selaimessa.
• Backend (palvelinpuoli): osa, joka toimii palvelimella. Sitä kutsutaan myös API-palvelimeksi.
• Tietokanta: paikka, jossa tiedot säilytetään järjestetysti. Katso mikä tietokanta on.
• API: lista pyynnöistä, joita backend hyväksyy käyttöliittymältä tai muilta ohjelmilta.
• Todennus (authentication): sen tarkistaminen, kuka henkilö on (kirjautuminen). Valtuutus (authorisation): sen tarkistaminen, mitä hän saa tehdä.
• Julkaisu (deployment): kaikkien kerrosten vieminen palvelimille, jotta yleisö voi käyttää niitä.
• Monoliitti vs. palvelut: yksi ohjelma, joka tekee kaiken, vs. useita pienempiä, kuten erillinen verkkosivu ja erillinen API. Molemmat ovat full-stack.

Yleisiä virheitä ja väärinkäsityksiä

• „Se näyttää valmiilta, joten se on valmis.” Esimerkkidata ja toimivalta näyttävä painike eivät ole sama asia kuin tallennettu data. Lataa sivu uudelleen, avaa se yksityisikkunassa ja tarkista, että tiedot ovat yhä tallessa.
• Sääntöjen laittaminen käyttöliittymään. Painikkeen piilottaminen ei ole tietoturvaa. Jos backend ei tarkista, kuka tahansa, joka tuntee pyynnön, voi lähettää sen.
• Salaisten avainten laittaminen käyttöliittymään. Maksu- tai tekoälypalvelun avain selainkoodissa on jokaisen vierailijan luettavissa. Avaimet kuuluvat backendiin, ympäristömuuttujiin. Katso ympäristömuuttujat ja salaisuudet.
• Full-stack tarkoittaa monimutkaista. Pieni full-stack-sovellus voi olla muutama näkymä, kourallinen backend-reittejä ja kolme tietokantataulua. Se kuvaa kerroksia, ei kokoa.
• Luulet, että sinun pitää valita jokainen tekniikka itse. Mikä tahansa järkevä, laajalti käytetty pino riittää ensimmäiseen versioon. Tärkeämpää on selkeä kuvaus tiedoista ja säännöistä.

Mitä pyytää tekoälyrakentajalta

Kuvaile sovellus kerrosten kautta, vaikka et nimeäisi niitä:

• Data: „Tallenna tunnit (nimi, aika, kapasiteetti) ja varaukset (tunti, henkilö, varausaika) tietokantaan.”
• Säännöt: „Tuntiin ei voi varata yli kapasiteetin. Henkilö voi varata tunnin vain kerran. Vain ylläpitäjät näkevät, kuka on varannut.”
• Näkymät: „Viikkoaikataulu, varausvahvistus, ylläpitosivu, joka listaa varaukset tunneittain.”
• Tarkistukset: „Pakota nämä säännöt palvelimella, ei vain sivulla. Pidä kaikki API-avaimet palvelimella.”

Testaa sitten kuin epäilijä: lataa uudelleen, kirjaudu sisään kahdella eri henkilöllä, yritä nähdä tietoja, joita et saisi nähdä. Opas tekoälyllä rakentamiseen käy läpi koko kierroksen.

Full-stack-sovellukset Mythexissä

Mythex rakentaa full-stack-verkkosovelluksia chatissa kuvatusta kuvauksesta. Oletuksena uusi sovellus saa React- ja TypeScript-käyttöliittymän. Kun sovellus tarvitsee tietojen tallentamista, Mythex lisää projektiin oman Postgres-tietokannan, ja voit pyytää erillisen API-palvelimen (esimerkiksi Pythonilla, Nodella, C#:lla tai Javalla) verkkosivun rinnalle. Kaikki toimii yhdessä elävässä esikatselussa ja julkaistaan julkiseen URL-osoitteeseen. Dokumentaation sivu moniplatformisista sovelluksista kertoo, miten verkkosivu ja API esikatsellaan ja julkaistaan yhdessä, ja full-stack-sovellusrakentaja -sivulla on aloituskohtia.

Kysymykset