Membuat globe interaktif bursa saham dunia dengan AI

Untuk Prompt Tuesday #11 ini, kami meminta AI untuk menghasilkan visualisasi HTML/JavaScript yang mengesankan: globe 3D berputar di mana bursa saham utama dunia menyala berdasarkan status buka/tutupnya.

Di sela-sela pengembangan Linkeum, terkadang muncul ide yang seketika membuat Anda ingin menguji sejauh mana AI bisa melangkah. Untuk Prompt Tuesday #11 ini, tujuannya ambisius: meminta Qwen untuk menghasilkan halaman HTML/JavaScript yang mampu menampilkan globe 3D yang berputar, dengan bursa saham terbesar di dunia diwakili oleh titik bercahaya yang berubah status tergantung pada apakah pasar sedang buka atau tutup.

Idenya sederhana di atas kertas, tetapi sangat visual dalam pelaksanaannya. Setiap pusat keuangan harus muncul sebagai titik hijau yang berdenyut saat bursa buka, atau merah saat tutup, dengan kemampuan untuk mengkliknya guna menampilkan jendela kecil yang berisi informasi utamanya.

Prompt yang digunakan di Qwen

Seperti yang sering terjadi pada jenis pembuatan kode ini, prompt ditulis dalam bahasa Inggris. Model pembuatan kode umumnya lebih memahami instruksi teknis terperinci dalam bahasa ini, terutama ketika menggabungkan struktur HTML, logika JavaScript, rendering visual, dan interaksi pengguna.

Act as an expert Front-End Developer and Data Visualization specialist. Write a modern, responsive single-page HTML file that renders an interactive 3D globe using the globe.gl library (and three.js) via CDN, along with Tailwind CSS for styling.

Here are the exact requirements:

1. The Globe: Render a beautiful, dark-themed, highly detailed 3D globe. It should auto-rotate slowly.
2. The Data: Plot the top 10 major world stock exchanges (e.g., NYSE, LSE, Tokyo, Shanghai, Euronext Paris, etc.) using their real latitude and longitude.
3. Market Status Logic: Write JavaScript logic that uses the current UTC time to determine if each market is currently OPEN or CLOSED based on their real-world trading hours.
4. Visual Markers: Represent each exchange on the globe as a glowing, pulsating point. Make the point Green and pulsating if the market is OPEN, and Red and pulsating if the market is CLOSED.
5. Interactivity: When the user clicks on a point:
   • Stop the globe's auto-rotation.
   • Open a sleek, dark-themed HTML pop-up/tooltip floating above the globe displaying the Exchange Name, City, Local Time, and Status (Open/Closed in green/red text).
   • Clicking elsewhere on the globe should close the pop-up and resume rotation.
6. UI/Aesthetics: Give the page a premium, high-end fintech aesthetic (dark mode, glassmorphism for the pop-up, sleek typography).

Output the complete, fully functional HTML, CSS, and JS code in a single file so I can copy-paste it into an index.html file and run it immediately in my browser.

Mengapa prompt ini menarik

Yang saya sukai dari prompt ini adalah ia tidak hanya meminta "globe 3D". Ia secara bersamaan memaksakan rendering visual, logika bisnis, data geografis, dan perilaku interaktif, yang benar-benar mendorong AI untuk menghasilkan sesuatu yang mendekati produk mini daripada sekadar contoh kode sederhana.

Dengan kata lain, kami tidak hanya menguji kemampuan Qwen dalam menulis JavaScript. Kami juga menguji kemampuannya untuk memahami niat desain yang berorientasi pada keuangan, dengan antarmuka yang sudah menyerupai dasbor premium.

Beberapa penyesuaian dengan Gemini

Hasil pertama yang diperoleh dengan Qwen sudah sangat menjanjikan. Kami bisa melihat titik, animasi, interaksi klik, dan kami segera merasa sangat dekat dengan hasil yang spektakuler.

Namun, beberapa penyesuaian harus dilakukan untuk menstabilkan tampilan dan meningkatkan pementasan visual. Dengan bantuan Gemini, kami menyesuaikan beberapa detail teknis dan presentasi, khususnya pada rendering globe, pembingkaian awal, keterbacaan benua, dan perilaku kamera saat memuat.

Hasil yang memukau

Hasil akhirnya benar-benar memukau. Kami mendapatkan globe 3D yang elegan, hidup, dan interaktif, dengan titik bercahaya yang langsung memberikan kesan lantai perdagangan global.

Ini adalah jenis pengalaman yang menarik perhatian pada beberapa detik pertama. Dan di atas segalanya, ini bukan sekadar gadget visual: di balik animasi ini, Anda sudah dapat membayangkan kasus penggunaan produk nyata untuk melacak pasar keuangan utama secara intuitif.

Apa selanjutnya?

Ini mungkin bagian yang paling menarik dari Prompt Tuesday #11 ini. Rendering-nya cukup meyakinkan untuk membuat saya ingin melangkah lebih jauh dari sekadar artikel blog sederhana.

Saya akan mencoba mengintegrasikan ide ini nanti ke dalam Linkeum, di bagian Keuangan. Dengan lapisan data nyata dan beberapa penyempurnaan tambahan, globe interaktif ini bisa menjadi elemen "efek wow" yang sangat baik bagi pengguna.