← Kembali ke Beranda
Ilustrasi Artikel
Proyek 29 Artikel ⏱️ Estimasi Waktu Baca: 4 menit

Proyek Web: Membuat Aplikasi Cuaca Sederhana dengan API

Halo Sobat Jurnal Coding! Apakah kamu sudah mulai bosan hanya belajar teori dari buku? Apakah kamu lelah menulis kode JavaScript yang hasilnya cuma memunculkan teks "Halo Dunia" di layar yang sepi?

Jika iya, selamat! Itu tandanya insting developermu sudah mulai meronta. Kamu sudah siap naik level. Hari ini, kita akan membuat komputer kamu berhenti bicara sendiri dan mulai "berkomunikasi" dengan dunia nyata di luar sana.

Kita akan membuat Aplikasi Pengecek Cuaca Real-Time. Ya, kamu tidak salah dengar. Aplikasi yang akan kita buat hari ini persis seperti widget cuaca yang ada di layar smartphone-mu. Jika kamu mengetik "Jakarta", aplikasi ini akan langsung memberitahumu berapa suhu udara di sana detik ini juga!

Bagaimana mungkin kita bisa tahu suhu di Jakarta padahal kita sedang duduk di kamar dan tidak punya alat pengukur suhu? Jawabannya adalah Sihir API (Application Programming Interface).

### Langkah 1: Mendapatkan Kunci VIP (API Key)

Ingat artikel Jurnal Coding yang membahas analogi API sebagai "Pelayan Restoran"? Nah, hari ini kita akan mendatangi restoran raksasa bernama OpenWeatherMap. Mereka memiliki server yang menampung data cuaca dari seluruh satelit di dunia.

Namun, restoran ini tidak sembarangan melayani orang lewat. Agar pelayan mereka mau mengambilkan data cuaca untuk kita, kita butuh kartu keanggotaan khusus yang disebut API Key.

1. Buka browser-mu dan kunjungi situs openweathermap.org.
2. Buat akun secara gratis (Sign Up).
3. Setelah masuk ke dasbor profilmu, cari menu "API Keys".
4. Kamu akan melihat sederet kombinasi huruf dan angka acak yang sangat panjang (misalnya: 1a2b3c4d5e6f7g8h9i). Salin kode tersebut dan simpan baik-baik. Jangan berikan kode ini kepada siapa pun!

### Langkah 2: Merancang Wajah Aplikasi (HTML)

Sekarang, mari kita siapkan halaman HTML sederhana sebagai wajah aplikasi kita. Kita hanya butuh sebuah kotak teks (input) agar pengunjung bisa mengetikkan nama kota, sebuah tombol untuk mulai mencari, dan sebuah paragraf kosong untuk menampilkan hasilnya nanti.

Buat file baru bernama cuaca.html dan masukkan kerangka ini:



Pengecek Cuaca Jurnal Coding




Suhu akan muncul di sini...





### Langkah 3: Menghidupkan Mesin dengan JavaScript

Di sinilah letak sihirnya. Kita akan menggunakan fungsi bawaan JavaScript yang sangat canggih bernama fetch(). Fungsi ini akan bertindak layaknya kurir yang berlari sekencang kilat menyeberangi lautan internet menuju server OpenWeatherMap, lalu membawa pulang data cuacanya ke laptopmu.

Di dalam file yang sama (atau di file JS terpisah), tambahkan logika pemrograman berikut:


const tombol = document.getElementById("tombol-cari");
const inputKota = document.getElementById("input-kota");
const teksHasil = document.getElementById("hasil-cuaca");

// Masukkan API Key rahasia yang kamu dapatkan tadi di sini!
const kunciAPI = "KODE_RAHASIAMU_DI_SINI";

tombol.addEventListener("click", function() {
let kota = inputKota.value;

// Ini adalah alamat URL khusus untuk memanggil pelayan OpenWeatherMap
let alamatURL = "https://api.openweathermap.org/data/2.5/weather?q=" + kota + "&appid=" + kunciAPI + "&units=metric&lang=id";

teksHasil.innerText = "Sedang menerawang awan...";

// Menyuruh kurir JavaScript berangkat mengambil data
fetch(alamatURL)
.then(respon => {
// Mengecek apakah kota ditemukan
if (!respon.ok) {
throw new Error("Kota tidak ditemukan!");
}
return respon.json();
})
.then(data => {
// Menerima paket data dan membedahnya
let suhu = data.main.temp;
let deskripsi = data.weather[0].description;
let namaLokasi = data.name;

// Menampilkan hasil yang indah ke layar
teksHasil.innerHTML = "Suhu di " + namaLokasi + " saat ini adalah " + suhu + "°C dengan cuaca " + deskripsi + ".";
})
.catch(error => {
// Jika terjadi kesalahan (misal: internet mati atau kota salah)
teksHasil.innerText = "Waduh! " + error.message;
});
});


### Penjelasan Detil untuk Pemula

Mari kita bedah sedikit agar kamu tidak pusing:
Perhatikan bagian alamat URL yang panjang itu. Di sana kita menggunakan satuan "&units=metric" agar suhu yang dikembalikan berbentuk Celcius (jika tidak, kamu akan mendapat suhu dalam Kelvin yang bikin panik karena angkanya mencapai 300 derajat!). Kita juga menambahkan "&lang=id" agar pelayannya membalas menggunakan terjemahan bahasa Indonesia, seperti "awan cerah" atau "hujan rintik-rintik".

Lalu, bagaimana jika ada pengunjung usil yang mengetik nama kota fiktif, seperti "Wakanda" atau "Atlantis"?

Di sinilah pentingnya blok kode throw new Error dan .catch. Jika OpenWeatherMap kebingungan dan membalas dengan status 404 (Not Found), program kita tidak akan hang atau crash. Javascript akan menangkap kesalahan tersebut dengan elegan dan mencetak teks: "Waduh! Kota tidak ditemukan!".

### Apa Selanjutnya?

Ini adalah momen paling memuaskan saat kamu berhasil menyatukan potongan puzzle dari kategori Konsep Dasar dan melihatnya bekerja di dunia nyata. Sensasi ketika pertama kali menekan tombol dan melihat layar menampilkan "Suhu di Jakarta saat ini 28°C" adalah sensasi magis yang akan membuatmu ketagihan ngoding!

Sebagai tantangan tambahan, cobalah hias kotak HTML di Langkah 2 dengan kode CSS agar terlihat cantik. Tambahkan ikon awan atau matahari yang berubah-ubah. Jangan takut mencoba, internet adalah taman bermainmu sekarang!

Apa pendapatmu tentang artikel ini?

Artikel Terkait