في هذا Prompt Tuesday #9، نجمع بين التمويل وتطوير الويب. في خضم موسم الأرباح (توزيعات الأرباح)، اكتشف كيف تستخدم الذكاء الاصطناعي Gemini لبرمجة لوحة معلومات (Dashboard) حديثة فوراً باستخدام HTML و JavaScript و Tailwind CSS.
الجمع بين التمويل الشخصي وتطوير الويب هو صميم هوية Linkeum. مع دخولنا "موسم الأرباح" الشهير (أبريل، مايو، يونيو)، يتطلع العديد من المستثمرين والمطورين إلى إنشاء أدوات التتبع الخاصة بهم.
في هذا الاختبار، الهدف هو استخدام Gemini (الذكاء الاصطناعي من Google) لإنشاء الكود الأمامي (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 هو تحويل فكرة مالية إلى واجهة ويب مرئية قابلة للاختبار على الفور:
- تحديد حزمة تقنية "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 للرسم البياني، وتطبيق فئات Tailwind CSS للحصول على عرض جمالي ومتجاوب (responsive).
بالنسبة لمطور أو صاحب مشروع، هذا يوفر وقتًا هائلاً. بدلاً من قضاء ساعات في قراءة وثائق Chart.js و Tailwind لهيكلة نموذج، تحصل على أساس مرئي وصلب في ثوانٍ، وما يتبقى سوى ربطه ببيانات حقيقية.
