Langkau ke kandungan
WANCODE
EN

Papan Pemuka Cuaca (dengan Data Contoh)

1.5 jamPertengahanJavaScriptfetchasync/awaitJSONError handling

Hasil

Papan pemuka di mana anda cari “Kuching” dan dapat keadaan semasa serta ramalan 3 hari — dengan mesej loading, “bandar tidak dijumpai” yang mesra, dan pemulihan yang baik daripada ralat rangkaian.

Objektif pembelajaran

  • Minta fail JSON dengan fetch dan baca dengan await response.json()
  • Cari data bersarang dengan find dan render-kannya ke dalam DOM
  • Reka tiga keadaan yang ada pada setiap request: loading, berjaya dan gagal
  • Kendalikan ralat HTTP (response.ok) dan ralat rangkaian (try/catch) tanpa aplikasi tergendala

Prasyarat

Tingkah laku yang dijangka

  • Mencari “kuching” (huruf besar atau kecil, ruang tambahan pun OK) memaparkan suhu, keadaan cuaca dan butiran Kuching.
  • Di bawahnya, tiga kad ramalan memaparkan suhu tinggi/rendah dan peluang hujan setiap hari.
  • Semasa data dimuatkan, mesej status memberitahunya; mesej itu hilang bila cuaca dipaparkan.
  • Bandar yang tidak dikenali memaparkan mesej “tidak dijumpai” yang mesra; bila “Simulate a network error” ditanda, mesej ralat yang mesra dipaparkan dan bukannya aplikasi tergendala.

Projek ini menggunakan data contoh

Ramalan dalam data.json ialah data contoh rekaan untuk pembelajaran — bukan cuaca sebenar. Pratonton tiada akses internet, jadi fetch("data.json") dijawab daripada fail projek (dengan sedikit kelewatan supaya ia terasa seperti request sebenar). URL lain akan gagal, dan itulah cara kita berlatih pengendalian ralat.

Aplikasi cuaca sebenar berfungsi dengan cara yang sama: pelayar menghantar request, menunggu, dan mendapat JSON — atau ralat. Kod anda tidak tahu berapa lama ia akan ambil, sebab itulah fetch memulangkan Promise dan kita guna async/await.

Request keluar, response kembali. Kadang-kadang tidak — rancang untuk kedua-duanya.
JavaScript
async function loadWeather(url) {
  const response = await fetch(url);      // wait for the server
  if (!response.ok) throw new Error("HTTP " + response.status);
  return response.json();                 // wait for the body, parse JSON
}

Teras projek ini. Setiap baris penting — anda akan membinanya dalam Milestone 1 dan 5.

Tentang API cuaca sebenar (dan API key)

  • API cuaca sebenar memerlukan akses rangkaian, dan banyak yang memerlukan API key — string rahsia yang mengenal pasti (dan selalunya mengenakan caj pada) akaun anda.
  • Jangan sekali-kali letak API key dalam kod front-end. Apa sahaja dalam HTML atau JavaScript anda boleh dibaca oleh sesiapa melalui View Source atau DevTools. Simpan key di server (atau serverless function) yang memanggil API bagi pihak anda.
  • Bila anda jalankan projek ini di komputer sendiri, anda boleh menyesuaikannya dengan API awam percuma. Contohnya, Open-Meteo buat masa ini menawarkan API ramalan percuma untuk kegunaan bukan komersial tanpa key — semak syaratnya dahulu. Bentuk JSON-nya berbeza, jadi tulis function kecil yang menukarnya kepada struktur yang sama seperti data.json.

Peringkat

Buka data.json dan lihat bentuknya: array cities, setiap satu ada current dan forecast.

Kemudian lengkapkan loadWeather(url) dalam script.js:

1. await fetch(url) untuk mendapatkan response. 2. return response.json() — data yang telah di-parse.

Ujian pantas: tambah loadWeather().then((data) => console.log(data.cities.length)); di bahagian bawah script.js — console sepatutnya mencetak 4. Buang baris itu selepas itu.

Semakan

  • loadWeather() memulangkan Promise
  • Ia menghasilkan JSON yang di-parse dengan 4 bandar
Senarai semak penyiapan

Tandakan item ini apabila ia benar untuk projek anda. Projek selesai apabila setiap peringkat lulus dan setiap item ditanda.

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.

Langkah 1 daripada 5