シンプルな天気アプリを作成するPythonとフラスコ

14091 ワード
codenewbie flask python webdev テキストリンク
あなたはPythonを学んでいますか?フラスコの練習?そして、通常のハローワールドの疲れ?
まあ!その後、このポストはあなたのためです.
このポストでは、フラスコを使用して、Pythonで天気アプリを構築します.

プロジェクト概要☁️


フラスコは、PythonとWebアプリケーションを構築するためのフレームワークです.我々は、5日間の天気予報を提供するWebアプリケーションを開発します.
フラスコは、Webアプリケーションを作成するタスクを比較的簡単になります.私たちの天気アプリは、Pythonコードの22行とHTMLの48行が必要になります.

一例☀️


アプリケーションをホストするWebサーバーが必要です.
我々のアプリが機能する方法の例
  • ユーザーはブラウザを開き、http://localhost:5000/forecast?city=London (ロンドンの天気予報を教えてください).
  • Webサーバーは、要求を受信し、天気予報を取得する当社のWebアプリを呼び出します.
  • 最後に、Webサーバーは、ユーザーに天気予報を含むHTMLページを送信します.
    • ユーザーはHTMLページを受け取り、ブラウザでロンドンの予測を表示します.
    NGinXやApache HTTPサーバーのような多くの異なるWebサーバーがあります.フラスコの内蔵サーバーを使用します.

    天気予報❄️


    あなたは不思議かもしれません:私たちの天気アプリはどこから予測データを入手しますか?
    さて、多くの異なる気象サービスが利用可能です.私たちはOpenWeatherMapサービスを使用します.別のサブスクリプションプランをサポートします.私たちは、このチュートリアルの目的のために十分である最高60の呼び出し/分と100000の呼び出し/月を支持する無料プランを使用します.

    建物の天気アプリ⚡


    必要条件


    コードを開始する前に、フラスコをインストールする必要があります.フラスコをインストールするには、端末を開き、次のコマンドを実行します.
    pip install flask
    インストールは数秒必要です.

    プロジェクト構造


    プロジェクトを次のように構成します.
    .
├── static
│   └── icons
|       ├── 01d.png
|       ├── 01n.png
|       ├── 02d.png
|       └── ...
├── templates
│   └── index.html
├── weather.py
└── README.md
    インweather.py フラスコアプリケーションを入れます.
    フォルダstatic/icons ウィルは、気象条件を表すために使用されるすべてのアイコンが含まれています.たとえば、雲のアイコン、日当たりのための別のアイコンなどがあります.templates 単一のファイルを含むフォルダですindex.html . このHTMLファイルには、空のテーブルが含まれています.

    オープンウェザーマップにサインアップ


    移動する前に、OpenWeatherMapにサインアップする必要があります.
    訪問https://openweathermap.org/api 5日間/3時間の予測セクションの下の購読ボタンをクリックしてください.

    をクリックし、登録を完了します.

    次に、あなたの資格情報とOpenWeatherMapウェブサイトにログインし、私のAPIキーをクリックします.新しいAPIキーを生成するには、インストーテーションに従ってください.

    天気アプリの実装


    インweather.py 我々は、ユーザーの要求を受信し、天気予報を提供するロジックを入れた.
    OpenWeatherMap APIから気象データを取得する関数を作成する必要があります.この関数は、ユーザーがHTTP GETリクエストをWebアプリケーションに送信するときに呼び出されますhttp://localhost:5000/forecast?city=London ) そして、天気予報を含んでいるHTMLページを返します.
    からflask パッケージは、後で使用するフラスコクラスと他の関数をインポートする必要があります.
    from flask import Flask, render_template, request, abort, Response
    次に、フラスコアプリケーションを初期化します.
    app = Flask(__name__)
    関数を作成しますget_weather() ユーザーが天気アプリにHTTP GET要求を送るとき、それは実行されます.
  • この関数は、ユーザの要求から都市名を抽出します.
  • それはOpenWeatherMapから要求都市の天気を取得します.
  • 最後に、天気を含んでいるHTMLページは、ユーザーに返されます.
    • ユーザーのブラウザは、HTMLサーバーをWebサーバーから受信表示されます.このHTMLページには、要求された都市の気象条件を示す表が含まれています.
    を作成しましょうget_weather() 段階的な機能.
    機能を定義するget_weather() これは引数をとりません:
    @app.route('/forecast', methods=['GET'])
def get_weather():
    @app.route('/forecast', methods=['GET']) デコレータです.これは、HTTP GETリクエストのルートを指示するディレクティブですhttp://localhost/forecast へのURLget_weather() 関数.このようにして、ユーザがhttp://localhost/forecast 当社のフラスコウェブサーバはget_weather() 関数.
    ユーザーがHTTP GETリクエストの引数として指定します.したがって、HTTPリクエストにCityという引数が含まれていることを期待します.HTTPリクエストから次のようにして都市を抽出できます.
        city = request.args.get('city')
    HTTPリクエストから抽出されたパラメータを検証することが重要です.私たちの場合、都市は義務的な議論です.我々は、ユーザーが都市を提供することを確認する必要があります.リクエストが都市を含まないならば、(すなわち).city is None ), 私たちはステータスコード「400」(悪い要求)を返します、そして、我々は都市議論が行方不明であるとユーザーに話す説明を提供します:
        if city is None:
        abort(400, 'Missing argument city')
    都市がHTTPリクエストで提供されている場合、我々は天気予報を得るためにOpenWeatherMapの要求を準備します.リクエストには次の3つのパラメータがあります.q , appid and units .q 私たちが予測を望む都市の名前です.appid あなたのOpenWeatherMap APIキーです.
        data = {}
    data['q'] = request.args.get('city')
    data['appid'] = 'XXXXXXXXX'
    data['units'] = 'metric'
    OpenVarimapから予測を取得するために、urllib - pythonライブラリを使用します.
        url_values = urllib.parse.urlencode(data)
    url = 'http://api.openweathermap.org/data/2.5/forecast'
    full_url = url + '?' + url_values
    data = urllib.request.urlopen(full_url)
    最後に、私たちはrender_template 結果を含むHTMLページを生成するにはBasically render_template テンプレートHTMLファイルを受け取り、OpenWeatherMapから受信した天気データを塗りつぶし、生成されたHTMLページをユーザーに返します.最後に、ユーザーは天気結果をブラウザで表示します.
        resp = Response(data)
    resp.status_code = 200
    return render_template('index.html', title='Weather App', data=json.loads(data.read().decode('utf8')))

    HTMLテンプレートファイル


    HTMLテンプレートファイルは次のようになります.
    <html>
    <head>
        <title>{{ title }}</title>
        <style>
            table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
            }

            td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
            }

            tr:nth-child(even) {
            background-color: #dddddd;
            }

            #weather {
                display: flex;
                flex-direction: row;
                align-items: center;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Time</th>
                <th>Temperature</th>
                <th>Humidity</th>
                <th>Weather</th>
                <th>Wind</th>
            </tr>
            {% for item in data["list"] %}
                <tr>
                    <td>{{ item["dt_txt"] }}</td>
                    <td>{{ item["main"]["temp"] }}°C</td>
                    <td>{{ item["main"]["humidity"] }}%</td>
                    <td><div id="weather"><img src="/static/icons/{{ item["weather"][0]["icon"] }}.png"></img> {{ item["weather"][0]["main"] }}</div></td>
                    <td>{{ '%.2f' % (item["wind"]["speed"]*3.6) }} km/h ({{ item["wind"]["deg"] }} deg)</td>
                </tr>
            {% endfor %}
        </table>
    </body>
</html>
    最終結果はこちら

    結論


    このブログの記事では、シンプルな天気アプリをPythonとフラスコを使用して開発した.これは、Pythonとフラスコ初心者のための素晴らしい運動です.
    あなたがこのポストが好きであるならば、Twitterの上で私について考えてください.
    画像のクレジット
    Weather icons created by iconixar - Flaticon
    Python-I/O、条件文、繰り返し文、関数
    js変数バー(feat:昇格)