Često se susrećete s izrazom „vibe coding“, ali niste posve sigurni što to znači?
Vibe coding je unatrag godinu dana postao vrlo popularan izraz za način programiranja u kojem ne morate biti programer koji piše stručne linije koda, već s AI alatom razgovarate običnim jezikom, dok AI generira većinu koda 💡
Koliko je to korisno najbolje govori podatak da sam ja, koja nisam programer po struci, napravila osobnu web stranicu u svega nekoliko sati 🙌 💪
To znači da istu stvar možete napraviti i vi. Zato ću vam u nastavku dati generalni workflow za vibe coding, a potom i konkretan zadatak na kojem možete uvježbati svoj prvi vibe code projekt 👇
Workflow.
- 1️⃣ Kreirajte prvi prompt. U njemu objasnite aplikaciju koju želite, što ona treba raditi, kao i neke osnovne želje kao kakve boje želite koristiti i koje korisne karakteristike treba imati.
- 2️⃣ AI će potom napraviti mini aplikaciju koju možete odmah isprobati „lokalno“ na linku koji će vam AI alat dati.
- 3️⃣ Isprobajte i testirajte pa napravite popis stvari koje želite unaprijediti, npr. „Dodaj ovu karakteristiku“ ili „Ovaj gumb ne radi pa ispravi“.
- 4️⃣ Ponavljajte postupak sve dok ne budete zadovoljni.
Kada da, a kada ne.
Vibe coding mi je best friend za male osobne alate: kalkulatore, trackere, generatore, sve ono što inače ručno moram tražiti, kopirati ili pripremati.
Ne koristim ga za alate koji barataju povjerljivim podacima, ni za sustave koje netko treba održavati mjesecima. Za to vam i dalje treba osoba koja razumije kod ❗️
Vaš prvi vibe code projekt.
Za kraj ću vam dati jedan praktični primjer koji možete kopirati i dotjerati sa svojim inputima, a za koji se nadam da će vam biti koristan primjer za vježbu i koji će vas ohrabriti da upustite i sami u izradu svojih aplikacija i rješenja.
Timer za sastanke, koji vizualno pokazuje koliko je vremena ostalo po točki agende 👇
# Zadatak Napravi mi web aplikaciju: timer za vođenje sastanaka po agendi. Napravi kao „standalone html“, koji mogu pokrenuti u pregledniku kad god želim. # Kako radi * Prije sastanka unosim točke agende i koliko minuta svaka traje (npr. „status projekta - 10 min“) * Kliknem start i timer krene od prve točke * Gumbom „Sljedeća točka“ prelazim na iduću # Što mora prikazivati * Trenutačnu točku agende i veliki countdown za nju * Popis preostalih točaka sa strane * Kad ostane manje od 2 minute za točku, pozadina neka požuti; kad probijemo vrijeme, neka pocrveni i počne brojati u minus * Na kraju sažetak: koliko smo stvarno potrošili po svakoj točki u odnosu na plan # Dizajn Minimalan, krupna tipografija, bez nepotrebnih ukrasa.
Probajte, testirajte i iskoristite na prvom idućem sastanku pa mi javite dojmove ❤️