ch2 非同期お天気webアプリを作る!

ch2 – 1 できあがるもの

• ローカルでの動作を確認
• 複数の都市の今の天気がわかる
  

ch2 – 2 利用するapiについて

Сurrent weather and forecast- OpenWeatherMap

会員登録

• Sing Up

• Members

  home.openweathermap.org

  

• API Keys のタブよりKeyを取得する
  
• APIのページからCurrent weather data
• http://openweathermap.org/api
• Subscribeをクリック
  
• Get API key and Startをクリック
  

How to use API key in API call

• http://openweathermap.org/appid
• Get形式でリクエストするとJSON形式でレスポンスが返ってくる
• &units=metric
  • 温度を摂氏に変える
• http://api.openweathermap.org/data/2.5/weather?q=場所名&APPID=取得したキー&units=metric
• http://api.openweathermap.org/data/2.5/weather?q=Tokyo&APPID=5d1b6e1530e2e749acaaf699b3aa721e&units=metric

    {
        "main": {
            "temp": 2.92, 
            "temp_max": 5, 
            "temp_min": 0
        }, 
        "name": "Tokyo", 
        "weather": [
            {
                "description": "clear sky", 
                "id": 800
            }
        ]
    }

ch2 – 3 Git clone

• リポジトリURL
• https://github.com/meganedotin/js-from-zero-ch2
• コンソールから該当リポジトリをクローンする
• (わからない人はダウンロード)

    $ git clone https://github.com/meganedotin/js-from-zero-ch2.git

ch2 – 4 パッケージをインストールする ( $ npm i )

• クローンしたリポジトリ内でパッケージをインストールする
  $ npm intall #npmで関連モジュールをインストール
• node_modules のフォルダが出来上がり、必要なモジュールがDLされる

ch2 – 5 APIキーを設定

src/app.tag を開き、下記のxxxxxx... の箇所を、先ほど調べたAPIキーで置き換えます。

    this.apikey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'

ch2 – 6 npmでローカルにサーバを起動する

• 以下のコマンドでサーバをスタートさせる

    $ npm start #npmを利用して起動させる

• 自動的にブラウザで http://localhost:3000 にが開かれ、天気が表示されている

ch2 – 7 自分の地域に変更

• 地域名の入力のあるファイルを編集する

地域の調べ方

• http://openweathermap.org/current
• 地域名を日本の任意の箇所にしたい場合
• http://bulk.openweathermap.org/sample/

上記より日本の地域を抜粋したものは以下からダウンロードいただけます。
https://www.dropbox.com/s/dms4ois8k5gzyal/city_jp.list.json?dl=0

    {"_id":2130741,"name":"Abashiri","country":"JP",...}
    {"_id":2113164,"name":"Abiko","country":"JP",...}
    {"_id":2130732,"name":"Abira","country":"JP",...}
    {"_id":1865721,"name":"Ageki","country":"JP",...}

地域を変更する箇所

• 編集ファイル src/app.tag
• 次のタグをコピーして、「Tokyo」の代わりに地域の名称を入力します。

    <weather city="Tokyo" apikey={apikey} />
    <weather city="Abashiri" apikey={apikey} />