0(ゼロ)から始めるJavaScriptによるWebアプリ開発入門 ch2 非同期お天気webアプリを作る!

ch2では、いよいよアプリケーションの開発に進みます! これまでに作ってきた環境をもとに、Github上にあるファイル群をクローンし、npm install した後に npm start します。
くわしくはどうかおよびテキストにて御覧ください!

テキスト資料はこちら

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

ch2 – 1 できあがるもの

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

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

Сurrent weather and forecast- OpenWeatherMap

a

会員登録

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

How to use API key in API call


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

ch2 – 3 Git clone

    $ 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 自分の地域に変更

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

地域の調べ方


上記より日本の地域を抜粋したものは以下からダウンロードいただけます。
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} />

JSを利用したアプリケーションを開発出来るようになる! ということで、お届けします。
毎週水曜更新予定!

一覧はこちら