Pentru acest Prompt Tuesday #9, combinăm finanțele și dezvoltarea web. În mijlocul sezonului de dividende, descoperiți cum să utilizați IA Gemini pentru a coda instantaneu un Dashboard modern în HTML, JavaScript și Tailwind CSS.
Combinarea finanțelor personale și a dezvoltării web este nucleul ADN-ului Linkeum. Pe măsură ce intrăm în celebrul „sezon al dividendelor” (aprilie, mai, iunie), mulți investitori și dezvoltatori caută să-și creeze propriile instrumente de urmărire.
În acest test, obiectivul este de a folosi Gemini (IA de la Google) pentru a genera de la zero codul Front-End al unui tablou de bord (Dashboard) pentru dividende. Îi impunem să utilizeze tehnologii simple, universale și fără o configurație greoaie: HTML pur, JavaScript nativ (Vanilla JS), biblioteca Chart.js pentru grafic și Tailwind CSS pentru design.
Promptul
Pentru ca IA să genereze un fișier direct utilizabil într-un browser, trebuie să îi atribuiți un rol specific, să impuneți utilizarea linkurilor CDN pentru biblioteci și să furnizați contextul de afaceri. Iată promptul exact utilizat:
Act as an expert Front-End Developer. Write a modern, responsive single-page HTML file for a "Dividend Tracking Dashboard" using Tailwind CSS (via CDN) and vanilla JavaScript. Include a chart using Chart.js (via CDN) to visualize monthly dividend income. The UI should have a sleek dark mode aesthetic. Include a main card showing the total yearly dividend goal with a progress bar. Below that, display a neat list or grid of recent dividend payouts using mock data for the following stocks: M6 Metropole, Pepsico, and TotalEnergies. Make the design look premium, similar to high-end fintech apps. Output the complete, functional code so I can copy-paste it directly into an index.html file.
Ce a urmărit promptul să obțină
Provocarea acestui prompt a fost de a transforma o idee financiară într-o interfață web vizuală și imediat testabilă:
- Definirea unui tech stack „Plug & Play”: Solicitând HTML, JS nativ și linkuri CDN pentru Tailwind și Chart.js, ne asigurăm că obținem un cod care funcționează imediat printr-un simplu dublu clic pe fișier, fără a fi nevoie de un mediu de dezvoltare complex.
- Integrarea vizualizării datelor (Data Visualization): Solicitarea explicită a unui grafic interactiv (Chart.js) forțează IA să scrie logica JavaScript necesară pentru a instanția și configura pânza vizuală pentru veniturile lunare.
- Impunerea unei direcții artistice: Termenii „sleek dark mode aesthetic” și „high-end fintech apps” ghidează Gemini să propună un design premium (umbre, degradeuri, culori închise) adaptat domeniului financiar.
- Integrarea logicii de afaceri: Includerea unei bare de progres către un obiectiv anual și a unor acțiuni specifice (M6, Pepsico, TotalEnergies) permite obținerea unei redări imediat relevante pentru un investitor.
De ce rezultatul este interesant
Acest rezultat demonstrează puterea Gemini ca asistent de programare. IA nu se limitează la a alinia etichete HTML; structurează corect pagina, importă în mod inteligent scripturile externe, scrie logica JavaScript pentru Chart.js și aplică clasele utilitare Tailwind CSS pentru o redare estetică și responsivă.
Pentru un dezvoltator sau un creator de proiect, aceasta este o economie masivă de timp. În loc să petreceți ore întregi citind documentația Chart.js și Tailwind pentru a structura o machetă, obțineți o bază solidă și vizuală în câteva secunde, care mai trebuie doar conectată la date reale.
