iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Modern Web

別再說我不會框架,網頁 Vue 起來!系列 第 10

[番外] 來個 Weather App (序)

前言

遙想(?) N 年前看著官方文件認識 Angular 時,充滿回憶的 Heros 範例! 
認識完語法要有實際的應用,才會把記憶串起來~,決定假日兩天來點小 App 實作,只需利用先前介紹過的 Vue 語法!

範例來自於這個Build a Weather App in VueJS | Vue Beginner Tutorial Tyler Potts 的實作影片,逐步跟著影片打造第一個 Vue App!


App 功能 ?

這個 Weather App 有一個文字輸入框,輸入城市名稱後,會顯示天氣資訊 & 根據自訂條件置換背景圖片(例如: 氣溫大於 16度)。

Demo

取自 Tyler Potts Source Code

流程

  • 輸入文字
  • 監聽 keypress 事件
  • 透過 OpenWeather API 取得天氣資訊
  • 將 Response 資訊顯示在畫面上

前置作業

  • 準備切版 HTML & CSS 檔案
  • 註冊 OpenWeather API 取得 API KEY (免費)

Weather API

OpenWeather 有不同的方案選擇參考方案表,提供每個月以及每分鐘 call API 次數有不同的限制。
帳號註冊 & 收 email 認證即可!

方案選擇

取自OpenWeather Pricing

這次會使用 Current Weather Data 這支 API,官方文件有提供使用範例,例如: api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}

參數

必填:

選填:

  • mode 回傳格式,預設為 JSON
    • 例如: xml html
  • units 測量單位,預設為 standard
    • 例如: Kelvin 絕對溫度 standard、攝氏 metric、華氏 imperial
  • lang 輸出成指定語言
    • 繁體中文 zh_tw

完整 URL:

https://api.openweathermap.org/data/2.5/weather?q=taipei&units=metric&APPID={API key}&lang=zh_tw

進入真正開發前,可以先使用 Postman 或是 瀏覽器測試,確認可正常取得資料外,也觀察資料格式

ex:

{
    "coord": {
        "lon": 121.5319,
        "lat": 25.0478
    },
    "weather": [
        {
            "id": 801,
            "main": "Clouds",
            "description": "few clouds",
            "icon": "02n"
        }
    ],
    "base": "stations",
    "main": {
        "temp": 26.64,
        "feels_like": 26.64,
        "temp_min": 25.58,
        "temp_max": 28.07,
        "pressure": 1011,
        "humidity": 55
    },
    "visibility": 10000,
    "wind": {
        "speed": 4.02,
        "deg": 80,
        "gust": 11.18
    },
    "clouds": {
        "all": 20
    },
    "dt": 1632579213,
    "sys": {
        "type": 2,
        "id": 266033,
        "country": "TW",
        "sunrise": 1632519808,
        "sunset": 1632563268
    },
    "timezone": 28800,
    "id": 1668341,
    "name": "Taipei",
    "cod": 200
}

主要會使用到 氣溫main.temp、城市name、國家sys.country、天氣概況weather.main

未完...待續


下篇預告

  • Weather App 實作

每日一句:
透過實作產生美好的小成就感(?!) /images/emoticon/emoticon08.gif


上一篇
[Part 3 ] Vue.js 的精隨-元件 provide/inject
下一篇
[番外] 來個 Weather App (續)
系列文
別再說我不會框架,網頁 Vue 起來!30

尚未有邦友留言

立即登入留言