Apl Cuaca pertama saya

Membina Apl Cuaca Mudah dengan Penyepaduan API

Sambil saya terus belajar dan meningkatkan kemahiran pengekodan saya, saya memutuskan untuk membina apl cuaca asas menggunakan API untuk mendapatkan data masa nyata. Projek ini membantu saya memahami cara berinteraksi dengan API, mengendalikan operasi tak segerak dan mengemas kini antara muka pengguna secara dinamik. Dalam blog ini, saya akan membimbing anda melalui kod yang saya gunakan untuk mencipta apl.

---

Gambaran Keseluruhan Projek

Apl cuaca mengambil data cuaca untuk lokasi tertentu dan memaparkan cuaca semasa dan ramalan 3 hari. Ia menggunakan WeatherAPI untuk mengumpulkan data dan JavaScript mengendalikan kefungsian.

---

Ciri Utama

1. Carian Lokasi: Pengguna boleh memasukkan nama bandar untuk mendapatkan data cuaca.

2. Cuaca Semasa: Paparkan suhu semasa, keadaan cuaca dan banyak lagi.

3. Ramalan: Tunjukkan ramalan cuaca untuk 3 hari seterusnya.

Mari kita lihat bahagian utama kod yang menjadikan apl ini berfungsi.

---

1. Mengambil Data Cuaca Menggunakan API

Langkah pertama ialah mengambil data cuaca daripada WeatherAPI. Begini cara saya menyediakan fungsi untuk mengendalikan panggilan API:

async function searchWeather(term) {
    var response = await fetch(`https://api.weatherapi.com/v1/forecast.json?key=7d77b96c972b4d119a3151101212704&q=${term}&days=3`);
    if (response.ok && response.status !== 400) {
        let weatherData = await response.json();
        displayCurrent(weatherData.location, weatherData.current);
        displayForecast(weatherData.forecast.forecastday);
    }
}

Fungsi ini menggunakan fetch() untuk membuat permintaan tak segerak kepada WeatherAPI. Ia mendapatkan semula cuaca semasa dan ramalan 3 hari, dan kemudian menghantar data tersebut ke fungsi displayCurrent() dan displayForecast().

---

1. Mengendalikan Input Pengguna

Apl mendengar input pengguna melalui kotak carian. Apabila pengguna menaip di lokasi (cth., "London"), ia mencetuskan carian cuaca:

document.getElementById('search').addEventListener('keyup', function (event) {
    searchWeather(event.target.value);
});

Selain itu, saya menambah butang untuk mencetuskan carian apabila diklik:

document.getElementById('searchBtn').addEventListener('click', function() {
    let searchTerm = document.getElementById('search').value;
    searchWeather(searchTerm);
});

Ini membolehkan pengguna sama ada menaip dalam kotak carian atau mengklik butang carian untuk mengambil data cuaca.

---

1. Memaparkan Cuaca Semasa

Setelah data diambil, fungsi displayCurrent() bertanggungjawab untuk menunjukkan butiran cuaca semasa pada halaman. Begini caranya:

paparan fungsi Semasa(lokasi, Cuaca semasa) {
    jika (Cuaca semasa) {
        biarkan lastUpdatedDate = new Date(currentWeather.last_updated);
        biarkan cardHTML = `
            <div>



<p>Fungsi ini menjana kad yang memaparkan suhu semasa, keadaan cuaca dan butiran tambahan seperti kelajuan angin dan kelembapan. Ia mengemas kini halaman secara dinamik dengan memasukkan HTML yang dijana ke dalam DOM.</p>


<hr>

<ol>
<li>Memaparkan Ramalan 3 Hari</li>
</ol>

<p>Seterusnya, saya memaparkan ramalan cuaca untuk tiga hari akan datang. Ini dikendalikan oleh fungsi displayForecast():<br>
</p>
<pre class="brush:php;toolbar:false">fungsi paparanRamalan(Data ramalan) {
    biarkan forecastHTML = '';
    untuk (biar i = 1; i 



<p>Fungsi ini melingkari data ramalan dan menjana kad untuk setiap dua hari seterusnya, menunjukkan suhu maksimum dan min, keadaan cuaca dan ikon.</p>


<hr>

<p>Kesimpulan</p>

<p>Membina apl cuaca ini merupakan latihan yang bagus untuk saya kerana saya belajar cara berinteraksi dengan API, memproses data JSON dan mengemas kini halaman web secara dinamik. Projek ini membantu saya mengukuhkan pengetahuan saya tentang JavaScript tak segerak, manipulasi DOM dan pengendalian acara.</p>

<p>Jika anda baru bermula dengan JavaScript dan API, apl cuaca ini ialah cara yang mudah tetapi berkesan untuk melatih kemahiran anda. Anda boleh melanjutkan projek ini dengan menambahkan lebih banyak ciri seperti pengendalian ralat, ramalan yang lebih terperinci atau juga mod gelap untuk UI.</p>


<hr>

<p>Jangan ragu untuk mencuba kod dan ubah suai untuk memenuhi keperluan anda. Beritahu saya jika anda mempunyai sebarang soalan atau cadangan!</p>