Tässä Prompt Tuesday #9:ssä yhdistämme henkilökohtaisen talouden ja verkkokehityksen. Keskellä osinkokautta, opi käyttämään Gemini AI:ta koodataksesi välittömästi modernin Dashboardin HTML:llä, JavaScriptillä ja Tailwind CSS:llä.
Henkilökohtaisen talouden ja verkkokehityksen yhdistäminen on Linkeumin DNA:n ydin. Kun siirrymme kuuluisaan "osinkokauteen" (huhti-, touko- ja kesäkuu), monet sijoittajat ja kehittäjät haluavat luoda omia seurantatyökalujaan.
Tässä testissä tavoitteena on käyttää Geminiä (Googlen tekoälyä) luomaan osinkodashboardin Front-End-koodi alusta alkaen. Vaadimme sitä käyttämään yksinkertaisia, universaaleja teknologioita ilman raskasta konfigurointia: puhdasta HTML:ää, natiivia JavaScriptiä (Vanilla JS), Chart.js-kirjastoa kaaviota varten ja Tailwind CSS:ää suunnitteluun.
Kehote (The Prompt)
Jotta tekoäly voisi luoda suoraan selaimessa käytettävän tiedoston, sille on annettava tietty rooli, pakotettava kirjastojen CDN-linkkien käyttö ja annettava liiketoimintakonteksti. Tässä on tarkka käytetty kehote:
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.
Mitä kehotteella pyrittiin saavuttamaan
Tämän kehotteen haasteena oli muuttaa taloudellinen idea visuaaliseksi ja välittömästi testattavaksi verkkokäyttöliittymäksi:
- "Plug & Play" -teknologiapinon määrittäminen: Vaatimalla HTML:ää, natiivia JS:ää sekä Tailwindin ja Chart.js:n CDN-linkkejä varmistamme, että saamme koodia, joka toimii heti tiedoston yksinkertaisella kaksoisnapsautuksella ilman monimutkaista kehitysympäristöä.
- Tiedon visualisoinnin integrointi (Data Visualization): Nimenomainen pyyntö interaktiivisesta kaaviosta (Chart.js) pakottaa tekoälyn kirjoittamaan tarvittavan JavaScript-logiikan kuukausittaisten tulojen visuaalisen kankaan ilmentämiseksi ja määrittämiseksi.
- Taiteellisen suunnan pakottaminen: Termit "sleek dark mode aesthetic" ja "high-end fintech apps" ohjaavat Geminiä ehdottamaan rahoitusalalle sopivaa premium-muotoilua (varjoja, liukuvärejä, tummia värejä).
- Liiketoimintalogiikan integrointi: Vuosittaista tavoitetta kohti olevan edistymispalkin ja tiettyjen osakkeiden (M6, Pepsico, TotalEnergies) sisällyttäminen tarjoaa sijoittajalle välittömästi merkityksellisen näkymän.
Miksi tulos on mielenkiintoinen
Tämä tulos osoittaa Geminin voiman ohjelmointiavustajana. Tekoäly ei vain asettele HTML-tunnisteita peräkkäin; se rakentaa sivun oikein, tuo fiksusti ulkoiset komentosarjat, kirjoittaa Chart.js:n JavaScript-logiikan ja soveltaa Tailwind CSS -apuohjelmaluokkia esteettisen ja responsiivisen tuloksen saavuttamiseksi.
Kehittäjälle tai projektin luojalle tämä on valtava ajansäästö. Sen sijaan, että viettäisit tunteja Chart.js:n ja Tailwindin dokumentaation lukemiseen mallin rakentamiseksi, saat sekunneissa vankan ja visuaalisen perustan, joka tarvitsee enää liittää todellisiin tietoihin.
