Prima aplicație, un magazin de cărți cu bază de date

Ce veți ști la sfârșitul lecției

• din ce părți este făcută o aplicație web cu bază de date
• cum formulați instrucțiunea prin care Claude Code construiește aplicația
• cum porniți aplicația pe calculatorul dumneavoastră
• cum o testați în browser, din partea clienților și din panoul de administrare
• cum o faceți să ruleze și cu HTTPS, pentru testare locală

Ce construim și de ce un magazin de cărți

Prima versiune a proiectului nostru a fost un magazin online de cărți, pentru că la început planul era să vândă cărți. Planul s-a schimbat mai târziu, iar aplicația a fost adaptată. Este totuși un exemplu bun, pentru că un magazin conține tot ce are nevoie orice aplicație cu date, adică o listă de produse, o bază de date, formulare și o zonă de administrare protejată cu parolă.

Cele patru părți ale aplicației

• Serverul primește cererile din browser și trimite răspunsul. Este scris în Node.js, cu biblioteca Express, care se ocupă de pagini și de adrese.
• Baza de date păstrează informațiile, adică cărțile, comenzile și conturile. Folosim SQLite, prin modulul nativ node:sqlite din Node.js, o bază de date care stă într-un singur fișier și se mută ușor pe găzduire mai târziu.
• Interfața este ce vede vizitatorul, adică pagini HTML cu aspect făcut în CSS.
• Panoul de administrare este zona protejată cu parolă, în care doar dumneavoastră adăugați, modificați și ștergeți cărți și vedeți comenzile.

Pasul 1. Instrucțiunea pentru Claude Code

Dacă ați urmat lecția 1, aveți Claude Code, Node.js și un folder gol pentru proiect. Deschideți terminalul în acel folder, porniți Claude Code cu comanda claude și scrieți instrucțiunea de mai jos.

Construiește o aplicație web de magazin de cărți, cu Node.js și Express pe server, bază de date SQLite și interfață simplă HTML și CSS. Aplicația trebuie să aibă un catalog de cărți afișat public, cu titlu, autor, descriere, preț, stoc și copertă. Trebuie să aibă un coș de cumpărături și un formular de comandă simplu, fără plată cu cardul. Trebuie să aibă un panou de administrare protejat cu parolă, în care pot adăuga, edita și șterge cărți și pot vedea comenzile primite. Populează baza de date cu 4 cărți generice, Carte1 până la Carte4, cu date de test. Structurează proiectul clar, cu foldere separate pentru server, baza de date și interfață.

Ce conține o instrucțiune bună

• ce construiți, într-o propoziție, aici un magazin de cărți
• tehnologiile, dacă le cunoașteți, sau lăsați asistentul să le recomande
• funcțiile dorite, enumerate clar, aici catalog, coș, comandă și administrare
• ce lăsați pe mai târziu, aici plata cu cardul, ca să începeți simplu
• date de test, ca să vedeți imediat aplicația plină, nu goală
• structura proiectului, ca fișierele să fie ordonate

Pasul 2. Ce creează Claude Code

Claude Code vă cere acordul înainte să creeze fișiere. Citiți fiecare cerere și aprobați-o. La final, în folderul proiectului apar fișiere noi. Structura poate diferi puțin de la o rulare la alta, dar ideea rămâne aceeași.

• un folder pentru server, cu fișierul principal al aplicației, în proiectul nostru server/app.js
• un folder pentru baza de date, unde stă fișierul SQLite
• un folder pentru interfață, cu paginile HTML și fișierele CSS
• fișierul package.json, care conține lista bibliotecilor necesare și comanda de pornire a aplicației

Cereți-i lui Claude Code să vă explice structura, dacă nu o înțelegeți. Nu este nevoie să memorați fișierele, dar este bine să știți unde se află fiecare parte.

Pasul 3. Pornirea aplicației

Aplicația are nevoie de bibliotecile din package.json, iar comanda npm install le descarcă în folderul node_modules. Apoi comanda npm start pornește serverul. Puteți cere lui Claude Code să facă ambele.

Rulează npm install, apoi npm start, ca să pot testa aplicația în browser.

Când serverul este pornit, Claude Code vă spune la ce adresă îl găsiți. Pentru a opri un server pornit direct în terminal, apăsați Ctrl și C în acea fereastră.

Pasul 4. Testarea în browser

Deschideți browserul și încercați trei adrese. Portul 3000 este cel folosit de aplicația noastră, iar la dumneavoastră Claude Code vă spune exact adresa.

• Catalogul public, la adresa localhost:3000. Trebuie să vedeți cele patru cărți de test, cu titlu, autor, preț și stoc.
• Coșul de cumpărături, la pagina de coș. Adăugați o carte și completați formularul de livrare cu nume, email, telefon și adresă.
• Panoul de administrare, la pagina de autentificare pentru admin. Parola de test o comunică Claude Code. În exemplul nostru era una simplă, potrivită doar pentru testare locală, iar pe un site public nu se folosește niciodată o asemenea parolă. O schimbăm în lecțiile despre securitate.

În panou trebuie să vedeți tabelul cu cărți, cu butoane de editare și ștergere, formularul pentru adăugarea unei cărți noi și lista comenzilor.

Testul complet

1. Adăugați o carte în coș și trimiteți o comandă de probă.
2. Intrați în panoul de administrare și verificați că apare comanda.
3. Adăugați o carte nouă, cu titlu, autor, descriere, preț și stoc.
4. Reveniți în catalog și verificați că apare cartea nouă.

Dacă aceste patru lucruri merg, aveți o aplicație cu bază de date funcțională. Datele rămân salvate chiar dacă opriți serverul și îl porniți din nou, iar asta arată că vin din baza de date, nu din memorie.

Pasul 5. HTTPS local

Un site public folosește HTTPS, adică o conexiune criptată. Unele funcții, de exemplu plățile, cer o conexiune securizată. De aceea merită să testați aplicația și cu HTTPS, pe calculatorul dumneavoastră.

Configurează aplicația să ruleze și cu HTTPS local, pe lângă HTTP. Generează un certificat auto-semnat pentru localhost și pornește serverul pe un port HTTPS separat, de exemplu 3444, păstrând și HTTP pe 3000. Spune-mi la final ce adresă exactă să folosesc pentru HTTPS.

Un certificat auto-semnat este emis chiar de dumneavoastră, nu de o autoritate recunoscută. Browserul nu îl cunoaște, deci va afișa un avertisment că site-ul nu este sigur. Pe calculatorul dumneavoastră este complet normal. Apăsați pe Advanced, apoi pe linia care spune că mergeți la localhost, iar pagina se deschide.

Greșeli frecvente și cum se repară

Claude Code se oprește la npm install

Node.js lipsește sau terminalul a fost deschis înainte de instalare. Verificați cu node --version, redeschideți terminalul dacă este nevoie, porniți din nou claude în același folder și dați-i din nou instrucțiunea de pornire.

Apare semnul > și comenzile nu mai merg

Ați scris doar node, fără altceva, iar programul a deschis consola internă Node.js. Ieșiți din ea scriind .exit și apăsând Enter. Veți reveni la terminalul obișnuit.

Mesaje de avertizare la instalare

Cuvântul warning apare des la instalări și nu înseamnă o eroare. Dacă instalarea se termină cu succes, puteți merge mai departe. Trimiteți-l asistentului AI doar dacă aplicația nu pornește după aceea.

Portul este ocupat

Dacă vedeți o eroare cu EADDRINUSE sau Claude Code vă spune că portul 3000 este deja folosit de alt proces, înseamnă că o altă aplicație a dumneavoastră rulează deja pe acel port, de exemplu site-ul pus deja online. Nu opriți acel proces fără să știți ce este. Claude Code vă întreabă de obicei cum să procedeze. Cel mai simplu răspuns este să-i cereți să pornească aplicația de test pe alt port, de exemplu 3001.

Avertismentul de certificat nu dispare

Este normal pentru certificatele auto-semnate. Browserul îl afișează la fiecare sesiune nouă, iar avertismentul dispare abia pe un site public cu certificat real.

Recapitulare

• ați dat o instrucțiune clară și Claude Code a construit aplicația
• aplicația pornește cu npm start și se vede în browser
• ați testat catalogul, coșul și panoul de administrare
• ați configurat HTTPS local și ați înțeles avertismentul
• știți ce conține o instrucțiune bună pentru Claude Code

Temă

Cereți-i lui Claude Code să adauge un câmp nou la cărți, de exemplu anul apariției. Verificați că apare în panoul de administrare, în formularul de adăugare și în catalog. Așa vedeți cum se schimbă o aplicație existentă fără să o luați de la capăt.