Vaibkoodimine: ehk lihtsusta ise oma elu AI abiga tehtud digitööriistadega

Interaktiivne esitlus: vaibkoodimine.lovable.app

1. Vaibkoodimine

ehk lihtsusta ise oma elu AI abiga tehtud digitööriistadega

Anna-Liisa Reinson

Alustame

2. Mis on vaibkoodimine?

Palu Lovable'il luua sisemist tööriista, mis...

**Vaibkoodimine** (ehk vibe coding) on tarkvara loomine vestluse kaudu, mitte koodi rida-realt kirjutades. Sa **kirjeldad** soovitut lihtsas keeles, **täpsustad** dialoogi kaudu ja **testid ning kohandad** kiiresti - juhtides süsteemi tulemuse poole, mitte programmeerides iga detaili. Mõtle sellest kui **lavastamisest**, mitte kodeerimisest. **Täna teed sa ise ühe päris tööriista, millel on link, mille saad kolleegile saata.**

3. See käib väga lihtsalt. Kirjuta üks prompt ja vaata, mis juhtub.

Tee sellele slaidile Tetrise mäng. Juhtimine nooleklahvidega ja ekraaninuppudega. Lisa paus, uuesti alustamine, punktid ja järgmise klotsi eelvaade.

Klõpsa noolt

4. Proovi järele.

5. Mida sa selle tunni lõpuks teha oskad?

Vähemalt 1 pisikese tööriista (või miks mitte mängu).

6. Ruumiplaani koostaja

Tahtsin enne kolimist teada, kas mööbel üldse ära mahub.

Joonista seinad, pane mööbel paika, salvesta pildina.

Tehtud Lovable'iga

Proovi järele

7. PDF-lehtede korraldaja

PDF-i lehed olid alati vales järjekorras, kui ma need kellelegi saatsin.

Aseta lehed uuesti, loo selge järjekord.

Tehtud Lovable'iga

Proovi järele

8. Fotoblogi

Pildid seisid telefonis ja sotsiaalmeediasse ei tahtnud neid panna.

Lihtsalt endale, oma domeeniga.

Tehtud Lovable'iga

Proovi järele

9. E-kirja allkirja generaator

Igaühel oli e-kirja allkiri isemoodi ja käsitsi tehtud.

Täidad vormi, kopeerid Outlooki.

Tehtud Claude Designiga

10. Kust ma ise alustasin

Sünnipäevakutse

Esimene katse, tehtud ühe õhtuga.

Kutsed läksid vestlustes kaotsi.

Ürituse registreerimisleht

Päris inimesed panid ennast kirja.

Ei teadnud, kes tegelikult kohale tuleb.

Annetuskeskkond

Võtab vastu päris annetusi.

Annetamine oli inimeste jaoks liiga tülikas.

Esimene asi ei pea olema suur ja keeruline rakendus. See peab olema tehtav, et saada eduelamus.

11. Täna teed **väikese rakenduse** kasutades **vaibkoodimist**

ja täna kasutame Lovable'i

Kliki, et näha tööriistu →

12. ..aga enne, kui me detailidesse lähme - mõned soovitused:

13. Kasuta planeerimisrežiimi

Lovable'is kasuta planeerimisrežiimi, et kaardistada funktsioone enne ehitamist. Tulemuseks on puhtam kood ja märkimisväärne tokenite kokkuhoid.

Lülita vestlussisendis sisse planeerimisrežiim enne funktsiooni alustamist. See kaardistab kõigepealt arhitektuuri, seejärel ehitab - tulemuseks puhtam kood ja vähem kasutatud tokeneid.

14. Küsi AI-lt abi

Kui "vibe" läheb liiga segaseks ja asi ei tundu toimivat nii, nagu sa tahaksid VÕI sa pole kindel, mis veel teha on vaja, siis palun AI-lt sellega abi.

Kasuta Lovable'i planeerimisrežiimi, et paluda AI-l seletada, mis sinu koodis toimub, või siluda probleemi. See on nagu vanem arendaja valves.

15. dont1

Päris andmed ei käi siia

Paroolid, kliendiinfo ja pangad - need jäta välja. Testi alati väljamõeldud näitega.

dont2

See, et miski pealtnäha töötab ei tähenda turvaline - sh sisselogimine

AI teeb kiiresti, aga ei kontrolli kõiki auke. Päris andmete ja klientideni jõudes küsi abi.

dont3

Mitte kõik ei tohi kõike teha

Vale sisselogimise õigus võimaldab ühel inimesel näha või kustutada teise andmeid.

dont4

Vaata, mida AI sinna lisab

AI võib lisada võõraid teenuseid ja võtmeid. Küsi enne, mis need on, ja ära pane firmasaladusi võõrale serverisse.

Riskid ja vead, mida vältida

✨ Näita kõiki

16. Ei tea, mida teha?

Sobib

Üks ekraan, üks tulemus

Midagi, mida teed praegu käsitsi ja korduvalt

Asi, mille saad ise ära proovida

Täna veel mitte

Sisselogimine ja kasutajakontod

Päris kliendiandmed

Maksed

Kogu süsteem korraga

17. Autentimine

Andmebaas

Failide üleslaadimine

Maksed

E-post

API integratsioon

Reaalajas

Otsing

Hele

Tume

Minimalistlik

Värvikirev

Korporatiivne

Näidise põhjal

Veebirakendus

Mobiiliäpp

Kontseptsioon

Määratle oma idee

Ekraanid

Kirjelda kasutajakogemust

Stiil

Vali tehnoloogia ja disain

Sinu tööriista prompti koostaja

Täida vorm. Saad valmis prompti, mille saadad AI-le.

Tööriista nimi

Pane oma tööriistale nimi

Probleem

Mis sinu töös on tüütu või aeganõudev?

Kirjelda probleemi 1 või 2 lausega.

Kes seda kasutab

Sina ise, tiim või klient?

Mida kasutaja saavutada tahab

Mis on see üks asi, mida ta teha tahab?

Mida kasutaja teeb

Põhiekraanid

Loetle tööriista peamised ekraanid (3 kuni 6).

Sammud algusest lõpuni

Kirjelda 4 kuni 5 sammu.

Kuvatav info

Tehnilised funktsioonid

Disaini stiil

Edasi

Tagasi

Kopeeri

Kopeeritud!

Lähtesta

Prompti eelvaade

Ehita töötav väike rakendus nimega

Peamine kasutaja

Kasutaja eesmärk

Kasutaja tegevused

Kuvatav informatsioon

Nõuded tööriistale

Loo töötav klikitav rakendus näidisandmetega, mis läbib kõik sammud algusest lõpuni.

Hoia see lihtne. Keskendu ühele selgele kasule.

18. Ehitame

Üks muudatus korraga

Ütle konkreetselt, mis on valesti

Kui kaks parandust ei aita, alusta uuesti

Kui midagi ei tööta, kirjuta vestlusesse

Kui midagi tööle hakkab, pane oma link vestlusesse.

19. lovable.dev

Alustasme siit.

20. Samm sammult

Loo konto või logi sisse

Mine lovable.dev. Google kontoga on kiireim.

21. Samm sammult

Kleebi oma prompt

Kirjuta või kleebi see suurde kasti ja vajuta saada.

22. Samm sammult

Oota

Paremal hakkab sinu tööriist tekkima.

23. Samm sammult

Vaata tulemust

Kliki läbi. Proovi kõik nupud järele.

24. Samm sammult

Muuda seda

Kirjuta vestlusesse üks lause korraga: "Tee nupp suuremaks."

25. Samm sammult

Tee avalikuks

Vajuta Publish. Saad lingi, mille saad kohe kellelegi saata.

Esimene versioon ei ole täiuslik. Nii peabki olema.

26. Mis edasi

Tasuta versioonist piisab alustamiseks

Avaldamiseks ja edasi tegemiseks on kuutasu

Päris kliendiandmete ja sisselogimisega asjade juurde võta arendaja

Kõige raskem osa pole ehitamine, vaid õige asja valimine

27. Räägi või näita, mis valmis sai

Mis see teeb?

Kellele?

Mis oli kõige ootamatum?

28. Aitäh! 🚀