Vibe coding aloittelijoille: näin aloitat askel askeleelta

Vibe coding aloittelijoille tiivistyy viiteen vaiheeseen: valitse työkalu, joka ajaa sovelluksen puolestasi, kuvaa yksi pieni sovellus selkeillä sanoilla, kokeile sitä kuten käyttäjä, pyydä yksi korjaus kerrallaan ja julkaise, kun se toimii. Sinun ei tarvitse osata koodata. Tämä opas käy jokaisen vaiheen läpi todellisen ensimmäisen projektin avulla, kirjoitettavat kehotteet mukaan lukien, sekä virheet, joita lähes jokainen aloittelija tekee ensimmäisellä viikolla.

Jos haluat ensin taustan, mistä termi tuli ja miksi siitä kiistellään, lue mitä vibe coding on. Tämä sivu on käytännön puoli.

Mitä tarvitset ennen aloittamista

Vähemmän kuin luulet:

• Selain ja tili vibe coding -työkalulla. Aloittelijan kannattaa valita tekoälysovellusrakentaja, joka kirjoittaa koodin, ajaa sen ja isännöi sen, eikä koodausavustaja, joka odottaa sinun hallitsevan tiedostoja ja palvelimia itse.
• Yksi pieni idea. Ei startup-yrityksesi. Työkalu yhdelle henkilölle (sinulle) yhdellä tai kahdella näkymällä.
• Tunti tai pari ilman keskeytyksiä. Ensimmäinen istunto opettaa rytmin.

Siinä kaikki. Ei asennuksia, ei ohjelmointikurssia, ei komentoriviä.

Mikä työkalu valita aloittelijana

Työkalu on vähemmän tärkeä kuin tavat, mutta sen pitää tehdä kolme asiaa: näyttää elävä esikatselu rakentaessaan, antaa kumota huono muutos ja julkaista linkin, jonka voit jakaa. Parhaiden vibe coding -työkalujen vertailu käy päävaihtoehdot läpi rehellisesti. Mythex on yksi niistä: kuvaat sovelluksen chatissa, se rakentaa oikean täyspinosovelluksen elävällä esikatselulla, lisää tietokannan, kun sovelluksen pitää muistaa asioita, ja julkaisee yhdellä napsautuksella. Ilmaisessa paketissa ei tarvita korttia.

Vaihe 1: valitse ensimmäinen projekti, jonka saat valmiiksi

Aloittelijat epäonnistuvat yleensä tähtäämällä liian isoon. Hyvä ensimmäinen projekti:

• on hyödyllinen sinulle henkilökohtaisesti, jotta testaat sen kunnolla.
• mahtuu yhdelle tai kahdelle näkymälle.
• tallentaa pienen määrän omaa dataasi.
• ei sisällä maksuja, tiimejä tai arkaluonteisia henkilötietoja.

Hyviä ensimmäisiä projekteja:

Käytämme lukulistaa tämän oppaan loppuosassa.

Vaihe 2: kirjoita ensimmäinen kehote

Ensimmäinen viestisi määrää kaiken muun muodon. Kerro, kenelle se on, mitä se tekee ja miltä sen pitäisi näyttää. Pidä se lyhyenä kappaleena.

Heikko ensimmäinen kehote:

Tee minulle kirjasovellus.

Hyvä ensimmäinen kehote:

Rakenna minulle lukulistasovellus. Voin lisätä kirjan otsikolla, kirjailijalla ja tilalla (haluan lukea, luen, luettu). Näytä kirjat korteilla ryhmiteltynä tilan mukaan, uusin ensin. Voin vaihtaa kirjan tilan tai poistaa sen. Pidä se siistinä ja yksinkertaisena: valkoinen tausta, yksi korostusväri, toimii puhelimella. Tallenna kirjat niin, että ne ovat yhä tallessa päivityksen jälkeen.

Huomaa, mitä toinen tekee. Se listaa kentät, toiminnot, asettelun ja yhden säännön, jonka aloittelijat aina unohtavat: tallenna data niin, että se säilyy päivityksen jälkeen. Ilman tätä riviä monet työkalut rakentavat sivun, joka näyttää valmiilta mutta unohtaa kaiken, kun lataat sivun uudelleen.

Lisää lähtökohtia löydät vibe coding -kehotteiden taulukosta.

Pyydä suunnitelma, kun et ole varma

Jos et ole varma, miten jotain kuvataan, pyydä tekoälyä suunnittelemaan ennen rakentamista:

Ennen kuin rakennat mitään, kerro selkokielellä, mitkä näkymät teet, mitä dataa tallennat ja mistä tarvitset minun päättävän.

Mythexissä tähän on Suunnitelma-tila: agentti esittää lähestymistavan, ja hyväksyt sen ennen kuin tiedostot muuttuvat.

Vaihe 3: testaa kuten käyttäjä, et kuten sen rakentaja

Kun esikatselu ilmestyy, älä vain ihaile sitä. Käytä sitä:

1. Lisää kolme kirjaa, joista yhdellä on hyvin pitkä otsikko.
2. Vaihda tila. Siirtyykö kortti oikeaan ryhmään?
3. Lataa sivu uudelleen. Ovatko kirjat yhä tallessa?
4. Yritä lisätä kirja tyhjällä otsikolla. Mitä tapahtuu?
5. Avaa esikatselu puhelimellasi tai kapenna selainikkunaa.

Kirjoita, mikä on pielessä, selkeillä sanoilla. "Pitkä otsikko rikkoo kortin asettelun" on täydellinen virheraportti. "Se on rikki" ei ole.

Vaihe 4: korjaa yksi asia viestiä kohden

Tämä tapa erottaa ne, jotka saavat valmiiksi, niistä, jotka luovuttavat. Lähetä yksi muutos, tarkista se ja lähetä sitten seuraava.

Pitkä otsikko "The Hitchhiker's Guide to the Galaxy: The Complete Trilogy" ylittää kortin. Rivitä pitkät otsikot kahdelle riville ja katkaise loppu merkillä "…".

Sitten:

Jos lähetän lomakkeen tyhjällä otsikolla, mitään ei tapahdu eikä viestiä näy. Näytä kentän alla "Lisää otsikko" äläkä tallenna kirjaa.

Miksi yksi kerrallaan? Kun pyydät viittä muutosta yhdessä viestissä, tekoäly saattaa tehdä neljä hyvin ja rikkoa jotain muuta hiljaa, etkä tiedä, mikä muutos aiheutti sen. Pienet askeleet tekevät myös kumoamisesta hyödyllisen: jos yksi muutos menee pieleen, palaa versioon juuri ennen sitä ja kokeile selkeämpää pyyntöä.

Kun jokin hajoaa

Näin käy. Jokainen rakentaja kohtaa virheitä. Kopioi virheen tarkka teksti tai kuvaa tarkasti, mitä klikkasit ja mitä näit, ja liitä se takaisin:

Kun klikkaan kortista Poista, näen viestin "Jotain meni pieleen" ja kirja jää paikalleen. Selvitä, miksi, ja korjaa se. Kerro, mikä syy oli.

Syyn pyytäminen on tärkeää. Se opettaa, miten sovellukset toimivat, ja estää tekoälyä arvailemasta. Oppaamme tekoälyllä rakennetun sovelluksen virheiden etsimisestä menee syvemmälle.

Vaihe 5: tee siitä omasi

Kun se toimii, paranna sitä samoilla pienillä askelilla:

• "Lisää 1–5 tähden arvostelu, joka näkyy luetuissa kirjoissa."
• "Lisää hakukenttä korttien yläpuolelle, joka suodattaa otsikon tai kirjailijan mukaan."
• "Käytä lämmintä luonnonvalkoista taustaa ja tummanvihreää korostusväriä."
• "Lisää yläreunaan laskuri: tänä vuonna luetut kirjat."

Jokainen on yksi, testattavissa oleva muutos.

Vaihe 6: julkaise ja jaa

Kun se tekee sen, mitä tarvitset, julkaise se. Mythexissä se on yksi napsautus, ja saat julkisen URL-osoitteen, jonka voi avata millä tahansa laitteella tai lähettää ystävälle. Jos haluat myöhemmin oman verkkotunnuksen, se on Pro-ominaisuus, ja oppaamme oman verkkotunnuksen yhdistämisestä selittää sen.

Ennen kuin jaat mitään muutamaa ystävää laajemmin, lue onko vibe coding turvallista?. Henkilökohtaiselle lukulistalle riski on pieni. Sovellukseen, johon vieraat rekisteröityvät ja tallentavat dataa, on tehtävä tarkistuksia ensin.

Aloittelijan yleiset virheet

• Kaiken pyytäminen kerralla. "Rakenna minulle Goodreads" tuottaa jotain, joka näyttää vaikuttavalta mutta toimii huonosti. Aloita pienimmällä hyödyllisellä versiolla.
• Päivityksen testaamatta jättäminen. Data, joka katoaa sivun uudelleenlatauksessa, on ylivoimaisesti yleisin aloittelijan yllätys.
• Pyynnön kirjoittaminen uudelleen alusta joka kerta. Kerro, mitä muutetaan ja mitä säilytetään: "Säilytä asettelu, muuta vain värit."
• "Se on korjattu"-väitteen uskominen. Tekoäly sanoo usein, että virhe on korjattu. Tarkista se itse joka kerta.
• Salasanojen tai API-avainten liittäminen chattiin. Jos sovellus tarvitsee avaimen ulkopuoliseen palveluun, laita se työkalun salaisuusasetuksiin, ei viestiin eikä koodiin. Katso miten pidät API-avaimet turvassa.
• Luovuttaminen ensimmäisen virheen jälkeen. Virheet ovat normaaleja. Liitä ne takaisin ja pyydä syy.

Mitä oppia matkan varrella

Kurssia et tarvitse, mutta muutama idea terävöittää jokaista pyyntöä. Pyydä tekoälyä selittämään ne oman sovelluksesi yhteydessä:

• Frontend ja backend: mikä toimii vierailijan selaimessa ja mikä palvelimella. (Frontend vs backend)
• Tietokanta: missä sovelluksesi säilyttää datansa. (Mikä on tietokanta?)
• Todennus: miten sovellus tietää, kuka joku on.
• Salaisuudet: yksityiset avaimet, joita sovellus käyttää ja joita vierailijoiden ei koskaan pidä nähdä.

Hyvä kehote tähän: "Selitä, miten lukulistani tallentaa kirjan, alkaen Lisää-painikkeen klikkauksesta siihen asti, kun data on tallessa. Käytä selkeitä sanoja ja viittaa todellisiin tiedostoihin."

Toinen ja kolmas projekti

Ensimmäisen sovelluksen jälkeen valitse jotain askeleen vaikeampaa. Tapaseuranta viikkokaaviolla. Varauslomake, joka lähettää sinulle sähköpostia. Pieni kojelauta, joka lukee Google Sheetiä. Vibe coding -esimerkit näyttävät oikeita sovellustyyppejä kehotteineen ja virheineen, ja miten rakennetaan sovellus vibe codingilla vie suuremman projektin ideasta julkaistuun sovellukseen käyttäjineen.

Kun olet valmis aloittamaan, avaa tekoälysovellusrakentaja, liitä yllä oleva lukulistakehote ja vaihda se omaan ideaasi.

Kysymykset