Σε αυτό το Prompt Tuesday #9, συνδυάζουμε τα οικονομικά και την ανάπτυξη ιστού. Στη μέση της περιόδου μερισμάτων, ανακαλύψτε πώς να χρησιμοποιήσετε την AI Gemini για να κωδικοποιήσετε άμεσα ένα σύγχρονο Dashboard σε HTML, JavaScript και Tailwind CSS.
Ο συνδυασμός των προσωπικών οικονομικών και της ανάπτυξης ιστού είναι ο πυρήνας του DNA του Linkeum. Καθώς μπαίνουμε στη διάσημη "περίοδο μερισμάτων" (Απρίλιος, Μάιος, Ιούνιος), πολλοί επενδυτές και προγραμματιστές αναζητούν να δημιουργήσουν τα δικά τους εργαλεία παρακολούθησης.
Σε αυτή τη δοκιμή, ο στόχος είναι να χρησιμοποιήσουμε το Gemini (την AI της Google) για να δημιουργήσουμε από το μηδέν τον Front-End κώδικα ενός dashboard (πίνακα ελέγχου) μερισμάτων. Του επιβάλλουμε τη χρήση απλών, καθολικών τεχνολογιών χωρίς βαριές ρυθμίσεις: καθαρή HTML, εγγενή JavaScript (Vanilla JS), τη βιβλιοθήκη Chart.js για το γράφημα και Tailwind CSS για τον σχεδιασμό.
Το Prompt
Για να δημιουργήσει η AI ένα αρχείο που μπορεί να χρησιμοποιηθεί απευθείας σε ένα πρόγραμμα περιήγησης, πρέπει να της δώσετε έναν συγκεκριμένο ρόλο, να επιβάλετε τη χρήση συνδέσμων CDN για τις βιβλιοθήκες και να της παρέχετε το επιχειρηματικό πλαίσιο. Εδώ είναι το ακριβές prompt που χρησιμοποιήθηκε:
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.
Τι στόχευε να πετύχει το prompt
Η πρόκληση αυτού του prompt ήταν να μετατρέψει μια οικονομική ιδέα σε μια οπτική και άμεσα δοκιμάσιμη διεπαφή ιστού:
- Καθορισμός ενός "Plug & Play" tech stack: Απαιτώντας HTML, εγγενή JS και συνδέσμους CDN για το Tailwind και το Chart.js, διασφαλίζουμε ότι θα λάβουμε κώδικα που λειτουργεί αμέσως με ένα απλό διπλό κλικ στο αρχείο, χωρίς να χρειαζόμαστε ένα πολύπλοκο περιβάλλον ανάπτυξης.
- Ενσωμάτωση Οπτικοποίησης Δεδομένων (Data Visualization): Το ρητό αίτημα για ένα διαδραστικό γράφημα (Chart.js) αναγκάζει την AI να γράψει την απαραίτητη λογική JavaScript για να δημιουργήσει και να διαμορφώσει τον οπτικό καμβά για τα μηνιαία έσοδα.
- Επιβολή καλλιτεχνικής κατεύθυνσης: Οι όροι "sleek dark mode aesthetic" και "high-end fintech apps" καθοδηγούν το Gemini να προτείνει έναν premium σχεδιασμό (σκιές, διαβαθμίσεις, σκούρα χρώματα) κατάλληλο για τα οικονομικά.
- Ενσωμάτωση επιχειρηματικής λογικής: Η συμπερίληψη μιας γραμμής προόδου προς έναν ετήσιο στόχο και συγκεκριμένων μετοχών (M6, Pepsico, TotalEnergies) επιτρέπει μια άμεσα σχετική απόδοση για έναν επενδυτή.
Γιατί το αποτέλεσμα είναι ενδιαφέρον
Αυτό το αποτέλεσμα καταδεικνύει τη δύναμη του Gemini ως βοηθού προγραμματισμού. Η AI δεν παραθέτει απλώς ετικέτες HTML· δομεί σωστά τη σελίδα, εισάγει έξυπνα εξωτερικά σενάρια, γράφει τη λογική JavaScript του Chart.js και εφαρμόζει τις βοηθητικές κλάσεις (utility classes) του Tailwind CSS για μια αισθητική και ανταποκρινόμενη (responsive) απόδοση.
Για έναν προγραμματιστή ή δημιουργό έργου, πρόκειται για τεράστια εξοικονόμηση χρόνου. Αντί να ξοδεύετε ώρες διαβάζοντας την τεκμηρίωση του Chart.js και του Tailwind για να δομήσετε ένα mockup, αποκτάτε μια σταθερή και οπτική βάση σε λίγα δευτερόλεπτα, η οποία απλώς χρειάζεται να συνδεθεί με πραγματικά δεδομένα.
