Trong Prompt Tuesday #9 này, chúng tôi kết hợp tài chính và phát triển web. Giữa mùa cổ tức, hãy khám phá cách sử dụng AI Gemini để lập trình ngay lập tức một Dashboard hiện đại bằng HTML, JavaScript và Tailwind CSS.
Kết hợp tài chính cá nhân và phát triển web là cốt lõi trong DNA của Linkeum. Khi chúng ta bước vào "mùa cổ tức" nổi tiếng (tháng 4, tháng 5, tháng 6), nhiều nhà đầu tư và nhà phát triển đang tìm cách tạo các công cụ theo dõi của riêng họ.
Trong bài kiểm tra này, mục tiêu là sử dụng Gemini (AI của Google) để tạo toàn bộ mã Front-End của bảng điều khiển (Dashboard) cổ tức từ đầu. Chúng tôi yêu cầu nó sử dụng các công nghệ đơn giản, phổ biến và không cần cấu hình nặng nề: HTML thuần túy, JavaScript gốc (Vanilla JS), thư viện Chart.js cho biểu đồ và Tailwind CSS cho thiết kế.
Prompt
Để AI tạo ra một tệp có thể sử dụng trực tiếp trong trình duyệt, bạn phải cung cấp cho nó một vai trò cụ thể, buộc sử dụng các liên kết CDN cho các thư viện và cung cấp bối cảnh kinh doanh. Đây là prompt chính xác được sử dụng:
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.
Mục tiêu của prompt
Thách thức của prompt này là biến một ý tưởng tài chính thành một giao diện web trực quan và có thể kiểm tra ngay lập tức:
- Xác định một tech stack "Plug & Play": Bằng cách yêu cầu HTML, JS gốc và các liên kết CDN cho Tailwind và Chart.js, chúng tôi đảm bảo sẽ có được mã hoạt động ngay lập tức chỉ bằng một cú nhấp đúp đơn giản vào tệp mà không cần môi trường phát triển phức tạp.
- Tích hợp Trực quan hóa dữ liệu (Data Visualization): Yêu cầu rõ ràng về một biểu đồ tương tác (Chart.js) buộc AI phải viết logic JavaScript cần thiết để khởi tạo và định cấu hình khung trực quan cho thu nhập hàng tháng.
- Áp đặt định hướng nghệ thuật: Các thuật ngữ "sleek dark mode aesthetic" và "high-end fintech apps" hướng dẫn Gemini đề xuất một thiết kế cao cấp (bóng đổ, chuyển màu, màu tối) phù hợp với tài chính.
- Tích hợp logic nghiệp vụ: Việc bao gồm thanh tiến trình hướng tới mục tiêu hàng năm và các cổ phiếu cụ thể (M6, Pepsico, TotalEnergies) cho phép có được kết xuất hiển thị phù hợp ngay lập tức đối với một nhà đầu tư.
Tại sao kết quả lại thú vị
Kết quả này chứng minh sức mạnh của Gemini như một trợ lý lập trình. AI không chỉ sắp xếp các thẻ HTML; nó cấu trúc trang một cách chính xác, nhập các tập lệnh bên ngoài một cách thông minh, viết logic JavaScript của Chart.js và áp dụng các lớp tiện ích của Tailwind CSS để mang lại một kết xuất thẩm mỹ và đáp ứng (responsive).
Đối với một nhà phát triển hoặc người tạo dự án, đây là một sự tiết kiệm thời gian khổng lồ. Thay vì dành hàng giờ đọc tài liệu Chart.js và Tailwind để cấu trúc một bản mô phỏng, bạn có được một nền tảng vững chắc và trực quan trong vài giây, và chỉ cần kết nối nó với dữ liệu thực.
