Pernah ingin membuat aplikasi cuaca sendiri tapi bingung mulai dari mana? Kebanyakan tutorial mungkin langsung membuat Anda pusing dengan setup yang rumit atau tampilan yang seadanya.
Di tutorial singkat ini, kita tidak akan membuat aplikasi cuaca biasa. Kita akan membuat aplikasi yang terasa premium: punya halaman pembuka (splash screen), loading yang mulus, dan antarmuka modern (tema hitam-putih) yang interaktif.
Semua ini kita bangun menggunakan Vite (untuk setup kilat), Vanilla JavaScript (tanpa framework), dan Open-Meteo API (gratis!).
Aplikasi jadinya seperti apa? Kamu bisa cek demonya di sini: https://appcuaca-frida-tynz.vercel.app/
Yuk, kita bedah langkah-langkah utamanya!
Langkah 1: Setup Proyek Super Cepat dengan Vite
Daripada membuat file index.html, style.css, dan script.js secara manual, kita pakai Vite.
Buka terminal dan jalankan:
npm create vite@latest
Saat ditanya, cukup pilih:
-
Framework:
Vanilla -
Variant:
JavaScript
Setelah itu, masuk ke folder proyek, jalankan npm install dan npm run dev. Selesai! Kamu sudah punya server lokal yang akan auto-refresh setiap kali kamu menyimpan kode.
Langkah 2: Arsitektur HTML "3 Layar"
Untuk mendapatkan efek "Halaman Depan -> Loading -> Aplikasi Utama", kita tidak pindah halaman. Kita hanya bermain sembunyi-tampilkan (display: none;) tiga buah <div> utama di dalam index.html:
-
<div id="landing-page">: Berisi judul dan tombol "Lihat Cuaca". (Default-nya terlihat). -
<div id="loading-screen">: Berisi animasi spinner. (Awalnya disembunyikan). -
<div id="main-app">: Berisi semua kartu cuaca kita. (Awalnya disembunyikan).
Logika JavaScript-nya sederhana: Tombol di Landing diklik -> sembunyikan Landing -> tampilkan Loading -> panggil API.
Langkah 3: Mengambil Data "Kaya" dari API
Kita tidak hanya mengambil suhu saat ini. Kita modifikasi URL Open-Meteo untuk meminta 3 paket data sekaligus dalam satu panggilan fetch:
-
current: Untuk kartu cuaca besar (saat ini). -
hourly: Untuk daftar cuaca per jam (12 jam ke depan). -
daily: Untuk daftar cuaca per hari (7 hari ke depan).
Kita gunakan async/await di main.js untuk mengambil data ini. Setelah await selesai, kita sembunyikan Loading dan tampilkan Aplikasi Utama.
Langkah 4: Tampilan Elegan & Interaktif (CSS + JS)
Ini dia bagian "sihir"-nya yang membuat aplikasi terasa mahal:
-
Tema Hitam-Putih: Wadah aplikasi kita buat putih bersih, namun semua kartu data (kartu utama, per jam, dan harian) kita beri warna hitam solid. Ini memberikan kontras yang kuat dan tampilan yang sangat elegan.
-
Drag-to-Scroll (Geser Pakai Mouse): Daftar cuaca per jam bisa di-scroll ke samping (
overflow-x: auto). Tapi agar bisa digeser pakai mouse di PC, kita tambahkan fungsi JavaScript yang melacakmousedown,mousemove, danmouseupuntuk menyimulasikan drag. -
Modal Popup (Klik untuk Detail): Setiap kartu (harian atau per jam) diberi event listener
click. Saat diklik, sebuah popup (modal) akan muncul di tengah layar, menampilkan detail cuaca untuk jam atau hari tersebut.
Penutup
Gampang, kan? Dengan alur kerja modern (Vite + Vercel) dan sedikit trik JavaScript untuk UX, kita bisa mengubah tugas sederhana "ambil data API" menjadi sebuah portofolio aplikasi web yang interaktif dan terlihat profesional.
Mau Lihat Kodenya?
Merasa tutorial ini terlalu cepat dan ingin langsung "bedah" keseluruhan isi proyeknya?
Tenang, kamu tidak perlu pusing koding dari nol. Kamu bisa melihat, fork, atau download keseluruhan folder proyek lengkapnya langsung dari repositori GitHub saya di bawah ini:
➡️ Ambil Kode Lengkapnya di GitHub: https://clips.my.id/LCyB4
Silakan dipakai untuk belajar atau dikembangkan lebih lanjut. Selamat mencoba!
