JaH!

Esimene rakendus

Praktika

Sinu esimene rakendus

Teooriast aitab. Teeme midagi päriselt valmis. Selles peatükis ehitame lihtsa To-Do (tööde nimekirja) rakenduse, kirjutamata ise ühtegi rida koodi.

  1. 01

    Vali platvorm

    Selle juhendi jaoks soovitame kasutada Replitit, kuna see seadistab keskkonna sinu eest automaatselt ära. Lovable sobib hästi siis, kui tahad ka publitseerida rakenduse ühe klõpsuga.

    • Logi sisse Replitisse (või Lovable'isse)
    • Klõpsa 'Create Repl' (Replitis)
    • Vali templiidiks 'React TypeScript'
    Vihje:Lovable sobib siis, kui tahad rakenduse ka avalikustada ja teistele saata.
  2. 02

    Esimene prompt

    Nüüd, kus sul on tühi projekt, ava AI assistent (Replit AI, Cursor või Lovable vestlus) ja kleebi järgmine tekst — see kirjeldab kogu esimese versiooni ühe hooga.

    • Ava AI assistent (Replit AI / Cursor / Lovable)
    • Kleebi prompt ja vajuta saada
    • Oota kuni AI lõpetab — ära katkesta
    Kopeeri see AI-le
    Ehitame lihtsa To-Do rakenduse.
Palun loo mulle React komponent (App.tsx), millel on:
1. Tekstisisestusväli uue ülesande lisamiseks
2. Nupp "Lisa"
3. Nimekiri ülesannetest
4. Iga ülesande juures nupp "Kustuta"
5. Stiili kogu asi kasutades Tailwind CSS-i. Tee disain minimalistlik ja kaasaegne.
    Vihje:Esimene versioon PEAB olema lihtne ja inetu. Funktsioon on tähtsam kui vorm.
  3. 03

    Itereeri (Vibe Check)

    AI genereerib koodi ja rakendus peaks ilmuma ekraanile. Nüüd on aeg 'vibe'ida' — mida tahaksid muuta? Kirjuta järgmine prompt ühe asjana korraga.

    • Vaata, mis töötab ja mis mitte
    • Kirjuta üks selge muudatusepalve korraga
    • Kui midagi puruneb, kopeeri veateade tagasi AI-le
    Järgmine prompt
    See näeb hea välja, aga teeme paar muudatust:
1. Lisa igale ülesandele checkbox (tehtuks märkimiseks)
2. Kui ülesanne on tehtud, tõmba tekstile kriips peale ja muuda tekst halliks
3. Salvesta ülesanded lokaalsesse mällu (localStorage), et need säiliksid lehe värskendamisel.
    Vihje:Ära küsi 5 asja korraga. Üks muudatus → vaata tulemust → järgmine muudatus.
  4. 04

    Palju õnne!

    Sa just programmeerisid rakenduse ilma koodi kirjutamata. See ongi vibe coding'u olemus — sa suhtled programmiga, nagu sa suhtleksid teise inimesega. Sõnasta soov, vaata tulemust, täpsusta.

    • Vajuta Publish / Deploy ja saada link sõbrale
    • Lisa veel üks väike funktsioon (nt prioriteet või kuupäev)
    • Hakka mõtlema, mis on sinu järgmine päris idee
    Vihje:Esimene rakendus ei pea olema kasulik. Ta peab eksisteerima.
Järgmine: Levinud vead →