Construiește cu AI prima ta aplicație utilă

Pasul 1: Descrie problema cu propriile cuvinte

Aproape toată lumea face cumpărături, așa că o listă de cumpărături este un prim proiect perfect. Nu trebuie să te pricepi la programare ca să îți dai seama dacă o listă de cumpărături funcționează: scrii pâine, lapte și ouă, vezi totalul și bifezi produsele pe măsură ce le cumperi. Rezultatul îl poți folosi cu adevărat chiar săptămâna aceasta.

Înainte să deschizi orice instrument AI, completează pe hârtie sau într-o notiță aceste trei propoziții. Este cea mai importantă abilitate de programare din toată cartea: să transformi o dorință în reguli concrete.

1. Trebuie să notez… (de exemplu: fiecare produs, câte bucăți îmi trebuie și prețul unei bucăți).
2. Vreau ca programul să calculeze… (de exemplu: prețul fiecărui rând și totalul pentru toate cumpărăturile).
3. Voi ști că programul funcționează când… (de exemplu: două produse a câte 25 de lei afișează 50 de lei, iar bifarea unui produs nu schimbă totalul).

Pasul 2: Construiește prima versiune mică

Prima versiune este un singur fișier care se deschide în browserul web. Nu trebuie să instalezi niciun mediu de programare, nu ai nevoie de server și nici de autentificare. Copiază promptul de mai jos în asistentul tău AI (Claude, ChatGPT sau altul asemănător) exact așa cum este.

Ajută-mă să construiesc prima mea aplicație simplă. Sunt complet începător.

Creează o listă de cumpărături într-un singur fișier numit cumparaturi.html, pe care să îl pot deschide în browserul web. Pune toate stilurile și tot JavaScriptul în acest singur fișier, fără biblioteci externe.

Vreau să introduc numele produsului, cantitatea și prețul unei bucăți. Un buton adaugă produsul în listă. Afișează prețul fiecărui rând și, jos, totalul pentru toate cumpărăturile. Permite-mi să șterg un produs și să îl marchez ca și cumpărat. Marcarea unui produs ca și cumpărat nu trebuie să schimbe totalul.

Respinge un nume gol, numerele invalide, un preț negativ și o cantitate egală cu zero sau mai mică. Acceptă în preț atât punctul zecimal, cât și virgula zecimală.

Mai întâi explică pe scurt planul. Apoi scrie codul complet și pașii exacți pentru salvarea și deschiderea fișierului. Deocamdată nu adăuga alte funcții.

1. Copiază codul. Folosește butonul de copiere din răspunsul AI-ului, ca să ai tot codul, de la prima până la ultima linie.
2. Salvează-l ca cumparaturi.html. Deschide un editor de text simplu (Notepad pe Windows, TextEdit în modul text simplu pe Mac), lipește codul și salvează-l ca cumparaturi.html. Alege „Toate fișierele” ca tip de fișier, nu „Document text”.
3. Deschide-l în browser. Dă dublu clic pe fișier sau trage-l într-o fereastră de browser. Ar trebui să vezi lista ta de cumpărături, nu o pagină plină de cod.

Pasul 3: Verifică dacă nu e doar o imagine frumoasă

O aplicație care arată bine nu este același lucru cu o aplicație care funcționează. Parcurge acest tabel rând cu rând și compară ce vezi cu rezultatul corect. Acesta este primul tău test adevărat.

Dacă un rând nu trece, nu repara încă codul de mână. Spune-i AI-ului exact ce rând a picat, ce ai introdus și ce ai văzut în schimb, și cere-i să repare doar acea problemă.

Pasul 4: Fă singur o modificare

Acum fă prima modificare fără ca AI-ul să o scrie în locul tău. Întreabă AI-ul: „Unde este titlul aplicației în codul meu?” Îți va indica o linie care arată cam așa: <h1>Listă de cumpărături</h1>.

1. Găsește titlul. Deschide cumparaturi.html în editorul de text și găsește linia indicată de AI.
2. Schimbă textul. Înlocuiește cuvintele dintre <h1> și </h1> cu propriul titlu, de exemplu „Cumpărăturile de sâmbătă”. Nu șterge parantezele unghiulare.
3. Salvează și reîncarcă. Salvează fișierul, întoarce-te în browser și reîncarcă pagina. Ar trebui să apară noul tău titlu.

Apoi cere-i AI-ului să îți explice propriul fișier în trei părți, folosind codul tău ca exemplu. Vei vedea că orice aplicație web este construită din aceleași trei straturi:

Pasul 5: Învață aplicația ceva nou

Programele adevărate cresc în pași mici. Adaugă o singură funcție nouă, apoi testează din nou. Trimite-i AI-ului, în aceeași conversație, această continuare:

Adaugă un buget la lista mea de cumpărături. Lasă-mă să introduc suma pe care vreau să o cheltui. Arată cât a mai rămas. Dacă totalul depășește bugetul, afișează un avertisment clar cu suma cu care l-am depășit. Tot restul trebuie să funcționeze exact ca înainte. Arată-mi fișierul complet actualizat.

Tocmai ai construit, rulat, testat și modificat o aplicație reală. Asta nu înseamnă toată programarea, dar este rutina pe care o vei repeta în fiecare lecție care urmează: descrii clar, lași AI-ul să genereze, verifici față de rezultatele așteptate și schimbi un singur lucru o dată.