Untuk Prompt Tuesday #9 ini, kami menggabungkan kewangan dan pembangunan web. Di pertengahan musim dividen, ketahui cara menggunakan AI Gemini untuk mengekod Papan Pemuka moden serta-merta dalam HTML, JavaScript dan Tailwind CSS.
Menggabungkan kewangan peribadi dan pembangunan web merupakan teras DNA Linkeum. Semasa kita memasuki "musim dividen" yang terkenal (April, Mei, Jun), ramai pelabur dan pembangun sedang mencari untuk mencipta alat penjejakan mereka sendiri.
Dalam ujian ini, matlamatnya adalah untuk menggunakan Gemini (AI Google) bagi menjana kod Front-End lengkap dari mula untuk papan pemuka (Dashboard) dividen. Kami memerlukannya untuk menggunakan teknologi mudah, universal dan tanpa konfigurasi yang berat: HTML tulen, JavaScript asli (Vanilla JS), pustaka Chart.js untuk graf dan Tailwind CSS untuk reka bentuk.
Prompt
Untuk memastikan AI menjana fail yang boleh digunakan secara langsung dalam pelayar, anda mesti memberikannya peranan yang spesifik, menguatkuasakan penggunaan pautan CDN untuk pustaka, dan menyediakan konteks perniagaan. Berikut ialah prompt tepat yang digunakan:
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.
Apa yang cuba dicapai oleh prompt
Cabaran prompt ini adalah untuk mengubah idea kewangan menjadi antara muka web visual yang boleh diuji serta-merta:
- Tentukan susunan teknologi "Plug & Play": Dengan mewajibkan HTML, JS asli dan pautan CDN untuk Tailwind serta Chart.js, kami memastikan kod yang dihasilkan berfungsi serta-merta dengan hanya dwiklik pada fail, tanpa memerlukan persekitaran pembangunan yang kompleks.
- Integrasi Visualisasi Data: Permintaan yang jelas untuk carta interaktif (Chart.js) memaksa AI untuk menulis logik JavaScript yang diperlukan untuk mewujudkan dan mengkonfigurasi kanvas visual bagi pendapatan bulanan.
- Kenakan arahan seni: Terma "sleek dark mode aesthetic" dan "high-end fintech apps" membimbing Gemini untuk mencadangkan reka bentuk premium (bayang-bayang, kecerunan, warna gelap) yang sesuai untuk kewangan.
- Integrasi logik perniagaan: Menyertakan bar kemajuan ke arah matlamat tahunan dan saham tertentu (M6, Pepsico, TotalEnergies) memberikan paparan yang relevan serta-merta untuk pelabur.
Mengapa hasilnya menarik
Hasil ini menunjukkan kuasa Gemini sebagai pembantu pengekodan. AI tidak sekadar menyusun tag HTML; ia menstrukturkan halaman dengan betul, mengimport skrip luaran dengan pintar, menulis logik JavaScript Chart.js dan menggunakan kelas utiliti Tailwind CSS untuk paparan yang estetik dan responsif.
Untuk pembangun atau pencipta projek, ini sangat menjimatkan masa. Daripada menghabiskan berjam-jam membaca dokumentasi Chart.js dan Tailwind untuk menstrukturkan model, anda mendapat asas yang kukuh dan visual dalam beberapa saat, yang hanya perlu dihubungkan kepada data sebenar.
