کاوش فلاسک و ادغام API خارجی - برنامه هواشناسی Flask

کاوش فلاسک و ادغام API خارجی - برنامه هواشناسی Flask

Flask: توسعه وب، یک قطره در یک زمان.

(منبع)

در این راهنما، ما چارچوب وب محبوب Python Flask و ادغام یک API شخص ثالث را بررسی خواهیم کرد. اگر در دنیای توسعه وب تازه وارد هستید و می خواهید یک برنامه کاربردی ساده با تنظیمات کمی ایجاد کنید، چارچوب Flask مکان خوبی برای شروع است.

الزامات و راه اندازی

انجام پروژه در فریلنس پروژه

    پایتون 3.7+

    هر IDE سازگار با پایتون (کد ویژوال استودیو، PyCharm و غیره)

    یک کلید OpenWeatherMap API دریافت کنید

اگر ترجیح می دهید با استفاده از کد منبع پروژه را دنبال کنید، می توانید آن را در GitHub اینجا پیدا کنید: https://github.com/gabriellemwhite/flask-weather-app

مرحله 1: نصب فلاسک

سفارش ساخت سایت در فریلنس پروژه

برای شروع، یک پوشه پروژه و یک venvfolder در داخل ایجاد کنید:

mkdir myproject
cd myproject
py -3 -m venv venv

سپس باید محیط مجازی خود را با موارد زیر فعال کنید:

venv\Scripts\activate

در محیط فعال شده، از دستور زیر برای نصب Flask استفاده کنید:

Pip install Flask

مرحله 2: ایجاد برنامه

اکنون که برنامه خود را ایجاد کرده اید و Flask را نصب کرده اید، ما فایلی را در پوشه پروژه با کد boilerplate زیر ایجاد و ذخیره می کنیم. برای این مثال، نام آن را app.py می گذاریم:

# app.py
# importing Flask class from flask module
from flask import Flask# creating an instance of Flask class
app = Flask(__name__)# use the route decorator to tell Flask what URL should trigger our function
@app.route('/')# function returns the message "Hello World!" on user's browser
def hello_world():
    return 'Hello World!'# runs the flask application using the app.run method
if __name__ == '__main__':

    app.run()

سپس باید بتوانید با اجرای دستور زیر در خط فرمان خود، این را به صورت محلی بر روی رایانه خود اجرا کنید:

$ python app.py

طراحان لوگو در فریلنس پروژه

سپس یک وب سرور محلی را در رایانه شما راه اندازی می کند و می توانید با باز کردن http://127.0.0.1:5000/ یا http://localhost:/5000 به آن دسترسی پیدا کنید. شما باید چیزی مشابه در زیر ببینید:

پیش نمایش مرورگر با نمایش "Hello World!"

پیش نمایش مرورگر با نمایش "Hello World!"

مرحله 3: مسیریابی نماها

اکنون که اصول ایجاد یک اپلیکیشن مینیمال در Flask را فهمیدیم، به مسیریابی و برگرداندن فایل های HTML خواهیم پرداخت.

به دایرکتوری پروژه خود بروید و یک پوشه /templates و /static ایجاد کنید. پوشه templates فایل‌های HTML شما را نگه می‌دارد در حالی که پوشه استاتیک شما فایل‌های یک ظاهر طراحی شده مانند CSS و تصاویر شما را نگه می‌دارد.

در پوشه templates خود یک فایل HTML به نام index.html و weather.html ایجاد کنید. در پوشه استاتیک خود، یک شیوه نامه CSS به نام styles.css ایجاد کنید. برای آموزش، من هیچ استایلی را به HTML اضافه نمی کنم. شما می توانید استایلی را که من در کد منبع خود استفاده کردم در GitHub پیدا کنید.

انجام پروژه متلب در فریلنس پروژه

اکنون app.pyfile را برای مسیریابی به این فایل‌های HTML جدید اضافه می‌کنیم:

# import Flask
from flask import Flask, request, render_templateimport os, requests# python-dotenv reads key-value pairs from a .env file and sets them as environment variables
from dotenv import load_dotenv
load_dotenv()app = Flask(__name__)# route decorator to bind the index function
@app.route('/', methods = ["GET", "POST"])
def index():
    
    # pulls information from the server
    if(request.method == 'GET'):
        
        # return index.html to the server
        return render_template("index.html")# sends the form data inputted by the user to the server 
    elif(request.method == 'POST'):
        
        # get user inputted values for zip code and country code
        user_zipcode = request.form.get("zip")
        user_country_code = request.form.get("country_code")
        
        # send request to openweathermap API
        openweather = requests.get("https://api.openweathermap.org/data/2.5/weather?zip={},{}&appid={}&units=imperial".format(user_zipcode, user_country_code, os.environ.get("API_KEY")))
        
        # return weather.html to the server
        return render_template('weather.html', weather=openweather.json())# pass the zipcode and country code as keyword arguments
@app.route('/<zip>/<code>', methods = ["GET", "POST"])
def openweather_api():# send request to openweathermap API
    openweather = requests.get("https://api.openweathermap.org/data/2.5/weather?zip={},{}&appid={}".format(user_zipcode, user_country_code, os.environ.get("API_KEY")))
    
    # test openweather API
    print(openweather.json())# run the application
if __name__ == '__main__':
    
    # debug set to true for testing
    app.run(debug=True)

معمولاً بهترین روش ذخیره کلیدهای API در یک فایل .env و تنظیم آنها به عنوان متغیرهای محیطی برای اهداف امنیتی است. من این کار را در بالا با استفاده از ماژول پایتون python-dotenv انجام می دهم.

مرحله 4: ایجاد نماها

ما اکنون آماده شروع کار بر روی صفحات HTML خود هستیم که از app.py هدایت می شوند.

در فایل index.html کد زیر را اضافه کنید:

<!DOCTYPE html>
<html lang="en"><head>
<title>Flask Weather App</title></head>
<body><form action="/" method="POST">
<h4>Flask Weather App</h4><label for="zipcode">Zipcode:</label>
<input type="text" id="zip" name="zip" placeholder="Enter zipcode" />
<label for="country_code">Country Code (Ex. US, UK):</label>
<input type="text" id="country_code"name="country_code" placeholder="Enter country code" />
<button type="submit" id="openweather_api">Enter</button>
</form></body>
</html>

این صفحه HTML خانه فرمی است که به کاربران امکان می دهد کد پستی و کد کشور و POSTit خود را به سرور وب وارد کنند. این همان چیزی است که برای بازیابی اطلاعات آب و هوای محلی شما به درخواست OpenWeatherMap API ارسال می شود.

در مرحله بعد، صفحه داده های آب و هوای بازیابی شده از درخواست API را نمایش می دهد. اجازه دهید ابتدا ببینیم وقتی که OpenWeatherMap API را درخواست می کنیم چه اتفاقی می افتد:
نمونه پاسخ JSON از OpenWeatherMap API

درخواست API با استفاده از درخواست‌های ماژول پایتون انجام می‌شود و با JSON بازگردانده می‌شود، که می‌تواند پاسخ را در فایل app.py بخواند.

بعداً روی فایل weather.html کار خواهیم کرد. از آنجایی که ما از ماژول render_template Flask استفاده می کنیم، از یک جداکننده خاص برای دسترسی به متغیرهای ذخیره شده در پاسخ JSON استفاده خواهیم کرد. برای مثال، شی ای که کد کشور را در شیء تو در تو sys ذخیره می کند، به شکل زیر است:

{{weather.sys.country}}

در فایل weather.html کد زیر را اضافه کنید:

# weather.html<!DOCTYPE html>
<html lang="en">
<head>
<title>Flask Weather App</title>
</head><body>
<img src="http://openweathermap.org/img/wn/{{weather.weather[0].icon}}@2x.png" width="150px"><h5> Weather in {{weather.name}}, {{weather.sys.country}}</h5><p> Description: {{ weather.weather[0].description.title() }}</p>
<p> Current Temperature: {{weather.main.temp}}&#176</p>
<p> Feels Like: {{weather.main.feels_like}}&#176</p>
<p> Wind: {{weather.wind.speed}}mph</p>
<p> Humidity: {{weather.main.humidity}}&#37;</p>
<p> Pressure: {{weather.main.pressure}}mB</p>
<p> Latitude: {{ weather.coord.lat }}&#176;</p>
<p> Longtitude: {{ weather.coord.lon }}&#176;</p><button type="submit" class="btn btn-primary btn-block" onclick="history.back()">Back</button></body>
</html>

برای آموزش، من هر سبکی را در HTML حذف کردم، اما می‌توانید آنچه را که من از کد منبع خود برای پروژه استفاده کردم را در اینجا بیابید.

پس از یک استایل ساده، برنامه وب Flask شما باید چیزی شبیه به این را انجام دهد!
پیش نمایش مرورگر برای index.html
پیش نمایش مرورگر برای weather.html

از اینکه در این سفر از طریق ایجاد یک برنامه وب مینیمال Flask به من ملحق شدید متشکرم! به راحتی می توانید سوالات خود را در زیر بپرسید یا مشکلی را در اینجا به پروژه GitHub ارسال کنید.

انجام پروژه پایتون