使用 API 整合建立簡(jiǎn)單的天氣應(yīng)用程式

隨著我繼續(xù)學(xué)習(xí)並提高編碼技能，我決定使用 API 來建立一個(gè)基本的天氣應(yīng)用程式來獲取即時(shí)數(shù)據(jù)。這個(gè)專案幫助我了解如何與 API 互動(dòng)、處理非同步操作以及動(dòng)態(tài)更新使用者介面。在本部落格中，我將引導(dǎo)您完成用於建立應(yīng)用程式的程式碼。

專案概況

天氣應(yīng)用程式取得給定位置的天氣資料並顯示當(dāng)前天氣和 3 天的天氣預(yù)報(bào)。它使用 Wea??therAPI 收集數(shù)據(jù)，並由 JavaScript 處理該功能。

主要特點(diǎn)

1. 位置搜尋：使用者可以輸入城市名稱以取得天氣資料。

2. 目前天氣：顯示目前溫度、天氣狀況等。

3. 天氣預(yù)報(bào)：顯示未來 3 天的天氣預(yù)報(bào)。

讓我們來看看使這個(gè)應(yīng)用程式運(yùn)行的程式碼的關(guān)鍵部分。

1. 使用 API 取得天氣資料

第一步是從 WeatherAPI 取得天氣資料。以下是我如何設(shè)定函數(shù)來處理 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);
    }
}

函數(shù)使用 fetch() 向 WeatherAPI 發(fā)出非同步請(qǐng)求。它會(huì)檢索當(dāng)前天氣和 3 天的天氣預(yù)報(bào)，然後將該資料傳遞給 displayCurrent() 和 displayForecast() 函數(shù)。

1. 處理使用者輸入

應(yīng)用程式透過搜尋框監(jiān)聽使用者輸入。當(dāng)使用者輸入某個(gè)位置（例如“倫敦”）時(shí)，它會(huì)觸發(fā)天氣搜尋：

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

另外，我加入了一個(gè)按鈕，點(diǎn)擊時(shí)觸發(fā)搜尋：

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

這允許使用者在搜尋框中鍵入或點(diǎn)擊搜尋按鈕來獲取天氣資料。

1. 顯示目前天氣

取得資料後，displayCurrent() 函數(shù)負(fù)責(zé)在頁(yè)面上顯示目前天氣詳細(xì)資料。其工作原理如下：

函數(shù)displayCurrent（位置，當(dāng)前天氣）{
    如果（當(dāng)前天氣）{
        讓lastUpdatedDate = new Date(currentWeather.last_updated);
        讓cardHTML = `
            <div>



<p>此函數(shù)會(huì)產(chǎn)生一張卡片，顯示當(dāng)前溫度、天氣狀況以及風(fēng)速和濕度等其他詳細(xì)資訊。它透過將產(chǎn)生的 HTML 插入 DOM 來動(dòng)態(tài)更新頁(yè)面。 </p>


<hr>

<ol>
<li>顯示 3 天天氣預(yù)報(bào)</li>
</ol>

<p>接下來，我顯示未來三天的天氣預(yù)報(bào)。這是由 displayForecast() 函數(shù)處理的：<br>
</p>
<pre class="brush:php;toolbar:false">函數(shù)displayForecast(forecastData) {
    讓 ForecastHTML = '';
    for (令 i = 1; i 



<p>此函數(shù)循環(huán)預(yù)測(cè)資料並產(chǎn)生未來兩天的卡片，顯示最高和最低溫度、天氣狀況和圖示。 </p>


<hr>

<p>結(jié)論</p>

<p>建立這個(gè)天氣應(yīng)用程式對(duì)我來說是一次很好的練習(xí)，因?yàn)槲覍W(xué)會(huì)瞭如何與 API 互動(dòng)、處理 JSON 資料以及動(dòng)態(tài)更新網(wǎng)頁(yè)。這個(gè)專案幫助我鞏固了非同步 JavaScript、DOM 操作和事件處理的知識(shí)。 </p>

<p>如果您剛開始使用 JavaScript 和 API，這款天氣應(yīng)用程式是練習(xí)技能的簡(jiǎn)單且強(qiáng)大的方法。您可以透過添加更多功能（例如錯(cuò)誤處理、更詳細(xì)的預(yù)測(cè)，甚至 UI 的深色模式）來擴(kuò)展此項(xiàng)目。 </p>


<hr>

<p>請(qǐng)隨意嘗試程式碼並調(diào)整它以滿足您的需求。如果您有任何問題或建議請(qǐng)告訴我！ </p>