ב-Prompt Tuesday #9 זה, אנו משלבים פיננסים ופיתוח אתרים. בעיצומה של עונת הדיבידנדים, גלה כיצד להשתמש בבינה המלאכותית Gemini כדי לקודד באופן מיידי Dashboard מודרני ב-HTML, JavaScript ו-Tailwind CSS.
שילוב של פיננסים אישיים ופיתוח אתרים הוא לב ה-DNA של Linkeum. כשאנו נכנסים ל"עונת הדיבידנדים" המפורסמת (אפריל, מאי, יוני), משקיעים ומפתחים רבים מחפשים ליצור כלי מעקב משלהם.
בבדיקה זו, המטרה היא להשתמש ב-Gemini (הבינה המלאכותית של גוגל) כדי ליצור מאפס את קוד ה-Front-End של לוח מחוונים (Dashboard) לדיבידנדים. אנו דורשים ממנו להשתמש בטכנולוגיות פשוטות, אוניברסליות וללא הגדרות כבדות: HTML טהור, JavaScript מקורי (Vanilla JS), ספריית Chart.js עבור הגרף ו-Tailwind CSS לעיצוב.
ה-Prompt
כדי שהבינה המלאכותית תיצור קובץ שניתן להשתמש בו ישירות בדפדפן, עליך לתת לה תפקיד ספציפי, לכפות שימוש בקישורי 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 זה היה להפוך רעיון פיננסי לממשק אינטרנט חזותי שניתן לבדוק באופן מיידי:
- הגדרת מחסנית טכנולוגית (Tech Stack) של "Plug & Play": על ידי דרישה ל-HTML, JS מקורי וקישורי CDN עבור Tailwind ו-Chart.js, אנו מבטיחים לקבל קוד שעובד מיד בלחיצה כפולה פשוטה על הקובץ, ללא צורך בסביבת פיתוח מורכבת.
- שילוב הדמיית נתונים (Data Visualization): הבקשה המפורשת לגרף אינטראקטיבי (Chart.js) מאלצת את הבינה המלאכותית לכתוב את לוגיקת ה-JavaScript הדרושה כדי ליצור מופע ולהגדיר את קנבס התצוגה של ההכנסות החודשיות.
- כפיית כיוון אמנותי: המונחים "sleek dark mode aesthetic" ו-"high-end fintech apps" מנחים את Gemini להציע עיצוב פרימיום (צלליות, מעברי צבע, צבעים כהים) המותאם לפיננסים.
- שילוב לוגיקה עסקית: הכללת סרגל התקדמות לקראת יעד שנתי ומניות ספציפיות (M6, Pepsico, TotalEnergies) מאפשרת לקבל תצוגה רלוונטית באופן מיידי למשקיע.
למה התוצאה מעניינת
תוצאה זו מדגימה את העוצמה של Gemini כעוזר קידוד. הבינה המלאכותית לא רק מסדרת תגיות HTML; היא מבנה את הדף בצורה נכונה, מייבאת בצורה חכמה סקריפטים חיצוניים, כותבת את לוגיקת ה-JavaScript של Chart.js, ומחילה את מחלקות העזר (utility classes) של Tailwind CSS לקבלת תצוגה אסתטית ורספונסיבית.
עבור מפתח או יוצר פרויקט, זהו חיסכון עצום בזמן. במקום לבלות שעות בקריאת התיעוד של Chart.js ו-Tailwind כדי לבנות סקיצה, אתה מקבל בסיס מוצק וחזותי בתוך שניות, שרק צריך להיות מחובר לנתונים אמיתיים.
