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 Lovable'it, kuna see võimaldab rakendust koheselt näha, muuta ja avalikustada, kõik on. mugavalt ühes kohas.

    • Logi sisse Lovable'isse (või Replit)
    • Klõpsa 'New Project' (Lovable'is)
    • Kirjelda, mida tahad ehitada ja AI hakkab kohe tegutsema
    VIHJE:Lovable'is saad rakenduse koheselt näha, muuta ja avalikustada ühe klõpsuga.
  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 konteksti aken (Replit AI / Cursor / Lovable)
    • Kleebi prompt ja vajuta saada
    • Oota kuni AI lõpetab, ära uuenda brauserit ega katkesta. Lihtsalt oota!
    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 selge. Funktsionaalsus on tähtsam kui vormindus.
  3. 03

    Muuda (Vibe Check)

    AI genereerib koodi ja rakendus peaks ilmuma ekraanile. Nüüd on aeg 'vibe'ida' ja mõelda mida tahaksid muuta? Kirjuta järgmine prompt.

    • Vaata, mis töötab ja mis mitte
    • Kirjuta üks selge muudatusepalve korraga
    • Kui midagi läheb katki, 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. Vähemalt algajana on nii kõik sulle hoomatavam.
  4. 04

    Palju õnne!

    Sa just programmeerisid rakenduse ilma koodi kirjutamata. See ongi vaibkoodimise olemus, sina suhtled kirjutamise teel programmiga, nagu sa suhtleksid teise inimesega messengeris. Sõnasta soov, vaata tulemust, täpsusta.

    • Vajuta Publish / Deploy ja saada link sõbrale
    • Lisa veel üks väike funktsioon (nt hele või tume vaade)
    • Hakka mõtlema, mis on sinu järgmine idee
    VIHJE:Esimene rakendus ei pea olema täiuslik. Ta peab funkioneerima.
Järgmine: Levinud vead →