Bu Prompt Tuesday #9'da finans ve web geliştirmeyi birleştiriyoruz. Temettü sezonunun tam ortasında, HTML, JavaScript ve Tailwind CSS ile anında modern bir Dashboard kodlamak için Gemini yapay zekasını nasıl kullanacağınızı keşfedin.
Kişisel finans ile web geliştirmeyi birleştirmek Linkeum'un DNA'sının merkezinde yer alır. Ünlü "temettü sezonuna" (Nisan, Mayıs, Haziran) girerken, birçok yatırımcı ve geliştirici kendi takip araçlarını yaratmak istiyor.
Bu testte amaç, bir temettü gösterge tablosunun (Dashboard) Front-End kodunu sıfırdan oluşturmak için Gemini'yi (Google'ın yapay zekası) kullanmaktır. Ondan basit, evrensel ve ağır kurulumlar gerektirmeyen teknolojiler kullanmasını istiyoruz: saf HTML, yerel JavaScript (Vanilla JS), grafik için Chart.js kütüphanesi ve tasarım için Tailwind CSS.
Prompt (The Prompt)
Yapay zekanın doğrudan bir tarayıcıda kullanılabilecek bir dosya oluşturması için, ona belirli bir rol vermek, kütüphaneler için CDN bağlantılarının kullanımını zorunlu kılmak ve iş bağlamını sağlamak gerekir. İşte kullanılan tam 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'un başarmayı amaçladığı şey
Bu prompt'un zorluğu, finansal bir fikri anında test edilebilir görsel bir web arayüzüne dönüştürmekti:
- Bir "Tak ve Çalıştır" teknoloji yığını tanımlamak: HTML, yerel JS ve Tailwind ile Chart.js için CDN bağlantılarını zorunlu kılarak, karmaşık bir geliştirme ortamı gerektirmeden, sadece dosyaya çift tıklayarak anında çalışan bir kod elde etmeyi garanti ediyoruz.
- Veri Görselleştirmeyi Entegre Etmek: Etkileşimli bir grafik (Chart.js) için açık talep, yapay zekayı aylık gelirin görsel tuvalini somutlaştırmak ve yapılandırmak için gerekli JavaScript mantığını yazmaya zorlar.
- Sanatsal bir yön dayatmak: "sleek dark mode aesthetic" ve "high-end fintech apps" gibi terimler, Gemini'yi finansa uygun premium bir tasarım (gölgeler, geçişler, koyu renkler) önermesi için yönlendirir.
- İş mantığını entegre etmek: Yıllık bir hedefe doğru bir ilerleme çubuğu ve belirli hisse senetlerini (M6, Pepsico, TotalEnergies) dahil etmek, bir yatırımcı için anında alakalı bir görünüm sağlar.
Sonuç neden ilginç
Bu sonuç, bir kodlama asistanı olarak Gemini'nin gücünü gösteriyor. Yapay zeka sadece HTML etiketlerini hizalamakla kalmıyor; sayfayı doğru şekilde yapılandırıyor, harici komut dosyalarını akıllıca içe aktarıyor, Chart.js'in JavaScript mantığını yazıyor ve estetik ve duyarlı bir görünüm için Tailwind CSS yardımcı sınıflarını uyguluyor.
Bir geliştirici veya proje yaratıcısı için bu büyük bir zaman tasarrufudur. Bir maketi yapılandırmak için Chart.js ve Tailwind belgelerini okuyarak saatler harcamak yerine, saniyeler içinde sağlam ve görsel bir temel elde edersiniz; geriye sadece bunu gerçek verilere bağlamak kalır.
