فصل ۱۵: توسعهٔ وب با پایتون

نمای کلی توسعهٔ وب با پایتون

در این فصل یک تصویر کلی از توسعهٔ وب با پایتون می‌بینید و با حداقل کدنویسی، یک وب‌سرور بسیار ساده می‌سازید. هدف این فصل این نیست که شما را به یک برنامه‌نویس حرفه‌ای وب تبدیل کند، بلکه می‌خواهیم:

• بفهمید «وب» در حد مقدماتی چگونه کار می‌کند.
• با یک فریم‌ورک بسیار ساده به نام Flask آشنا شوید.
• یک وب‌سرور کوچک بسازید که در مرورگر دیده می‌شود.
• مفهوم «مسیرها» (routes) و «قالب‌ها» (templates) را ببینید.
• ورودی کاربر از طریق فرم وب را پردازش کنید.
• ایدهٔ API را در حد بسیار ساده لمس کنید.

برای دنبال کردن مثال‌ها، کافی است پایتون نصب باشد و بتوانید اسکریپت اجرا کنید (مطالب فصل‌های قبل).

وب چگونه کار می‌کند؟ (خلاصهٔ عملی)

اینجا فقط آن‌قدری که برای کار با پایتون لازم است، به کارکرد وب اشاره می‌کنیم.

مرورگر، سرور و HTTP

وقتی در مرورگر آدرس وارد می‌کنید، مثل:

$$
\text{https://example.com/hello}
$$

چند اتفاق می‌افتد:

1. مرورگر (Client) یک درخواست (Request) می‌سازد.
2. این درخواست با «پروتکل HTTP/HTTPS» به سرور ارسال می‌شود.
3. سرور کدی اجرا می‌کند (مثلاً کد پایتون شما) و یک پاسخ (Response) برمی‌گرداند.
4. مرورگر این پاسخ را نمایش می‌دهد (مثلاً به صورت یک صفحهٔ HTML).

پس رابطهٔ اصلی این است:

$$
\text{Client} \xrightarrow{\text{Request}} \text{Server} \xrightarrow{\text{Response}} \text{Client}
$$

آدرس‌ها و مسیرها (URL و Route)

در یک سایت، آدرس‌ها (URL) بخش‌های مختلفی دارند. برای مثال:

• / صفحهٔ اصلی
• /about صفحهٔ دربارهٔ ما
• /contact صفحهٔ تماس

در فریم‌ورکی مثل Flask، شما برای هر آدرس یک «مسیر» (route) تعریف می‌کنید و می‌گویید اگر کاربر به این آدرس آمد، چه کدی اجرا شود.

آشنایی با Flask

Flask یک فریم‌ورک سبک و ساده برای توسعهٔ وب با پایتون است؛ یعنی یک کتابخانه که کار ساخت وب‌سرور و مدیریت درخواست‌ها و پاسخ‌ها را برای شما آسان می‌کند.

ویژگی‌های مهم Flask برای مبتدی‌ها:

• نصب و راه‌اندازی بسیار ساده
• مناسب برای پروژه‌های کوچک و آموزشی
• کدهای مختصر و قابل فهم

نصب Flask

در یک ترمینال (یا CMD در ویندوز) بنویسید:

pip install flask

اگر از python -m pip استفاده می‌کنید:

python -m pip install flask

بعد از نصب، می‌توانید در پایتون بنویسید:

import flask

و اگر خطایی نداشت، یعنی نصب موفق بوده است.

ساخت یک وب‌سرور ساده با Flask

اینجا یک مثال «حداقلی» از یک برنامهٔ وب با Flask می‌سازیم.

قدم ۱: ساخت فایل پروژه

یک پوشهٔ جدید بسازید، مثلاً:

• در دسکتاپ پوشه‌ای به نام my_first_webapp

داخل آن یک فایل پایتون بسازید، مثلاً: app.py

قدم ۲: نوشتن یک برنامهٔ وب ساده

محتوای app.py را این‌طور بنویسید:

from flask import Flask
app = Flask(__name__)
@app.route("/")
def home():
    return "سلام، این اولین وب‌سایت پایتونی من است!"
if __name__ == "__main__":
    app.run(debug=True)

توضیح کوتاه بخش‌های مهم:

• Flask(__name__) یک «برنامهٔ وب» می‌سازد.
• @app.route("/") می‌گوید: وقتی کاربر به آدرس / (صفحهٔ اصلی) رفت، تابع زیر را اجرا کن.
• تابع home یک متن برمی‌گرداند که در مرورگر نمایش داده می‌شود.
• app.run(debug=True) وب‌سرور را روی کامپیوتر شما اجرا می‌کند (معمولاً روی آدرس http://127.0.0.1:5000).

قدم ۳: اجرای سرور

در ترمینال، وارد پوشهٔ پروژه شوید و اجرا کنید:

python app.py

اگر همه‌چیز درست باشد، پیامی شبیه این می‌بینید:

 * Running on http://127.0.0.1:5000

حالا در مرورگر این آدرس را بزنید:

http://127.0.0.1:5000

باید متن:

سلام، این اولین وب‌سایت پایتونی من است!

را ببینید.

تا وقتی این ترمینال باز و برنامه در حال اجراست، سرور شما فعال است. با زدن Ctrl + C در ترمینال، سرور متوقف می‌شود.

مسیرها (Routes) و چند صفحه‌ای کردن سایت

در وب‌سایت‌ها معمولاً بیش از یک صفحه وجود دارد. در Flask می‌توانید برای آدرس‌های مختلف، توابع جدا تعریف کنید.

مثال: افزودن یک صفحهٔ «درباره ما» و یک صفحهٔ «سلام به کاربر»

from flask import Flask
app = Flask(__name__)
@app.route("/")
def home():
    return "صفحهٔ اصلی سایت"
@app.route("/about")
def about():
    return "این یک وب‌سایت آزمایشی با پایتون و Flask است."
@app.route("/hello")
def hello():
    return "سلام از طرف Flask!"
if __name__ == "__main__":
    app.run(debug=True)

حالا می‌توانید در مرورگر این آدرس‌ها را ببینید:

• http://127.0.0.1:5000/ → صفحهٔ اصلی
• http://127.0.0.1:5000/about → صفحهٔ درباره سایت
• http://127.0.0.1:5000/hello → یک پیام دیگر

متغیر در مسیر (Route Parameters)

گاهی آدرس شامل یک قسمت متغیر است، مثلاً:

• /user/ali
• /user/sara

می‌توانیم نام کاربر را از آدرس بگیریم:

from flask import Flask
app = Flask(__name__)
@app.route("/user/<name>")
def greet_user(name):
    return f"سلام {name}، خوش آمدی!"
if __name__ == "__main__":
    app.run(debug=True)

با رفتن به:

• http://127.0.0.1:5000/user/ali
• http://127.0.0.1:5000/user/sara

پیام‌های متفاوت می‌بینید که بر اساس name ساخته شده‌اند.

قالب‌ها (Templates) و HTML

تا اینجا فقط متن ساده برمی‌گرداندیم. اما صفحات واقعی وب معمولاً با HTML ساخته می‌شوند. در Flask می‌توانیم از قالب‌ها (templates) استفاده کنیم.

Flask از موتور قالبی به نام Jinja2 استفاده می‌کند که اجازه می‌دهد در فایل‌های HTML از متغیرها و حلقه‌ها (در سطح ساده) استفاده کنید.

ساخت پوشهٔ templates

در کنار app.py یک پوشه به نام templates بسازید. ساختار پروژه:

my_first_webapp/
    app.py
    templates/

حالا داخل پوشهٔ templates یک فایل به نام home.html بسازید.

نمونهٔ یک قالب HTML ساده

محتوای home.html:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>صفحهٔ اصلی</title>
</head>
<body>
    <h1>سلام {{ name }}!</h1>
    <p>این صفحه با استفاده از یک قالب HTML ساخته شده است.</p>
</body>
</html>

عبارت {{ name }} یعنی یک متغیر که مقدارش را از پایتون می‌گیریم.

استفاده از قالب در Flask

حالا app.py را این‌طور تغییر دهید:

from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
    return render_template("home.html", name="کاربر عزیز")
if __name__ == "__main__":
    app.run(debug=True)

• render_template("home.html", name="کاربر عزیز") یعنی:
• فایل home.html را از پوشهٔ templates پیدا کن،
• متغیر name را برابر "کاربر عزیز" قرار بده،
• نتیجه را به‌عنوان پاسخ به مرورگر بفرست.

می‌توانید مقدار name را برای کاربرهای مختلف تغییر دهید، یا در آینده از ورودی کاربر بگیرید.

پردازش ورودی کاربر (فرم‌ها)

یکی از مهم‌ترین کارهای یک برنامهٔ وب، گرفتن ورودی از کاربر است؛ مثل فرم ورود، فرم جست‌وجو، فرم ثبت‌نام و غیره.

در وب، برای این کار از فرم‌های HTML و روش‌های ارسال داده مثل GET و POST استفاده می‌شود.

یک فرم سادهٔ HTML

یک فایل قالب جدید در templates بسازید: form.html

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>فرم سلام</title>
</head>
<body>
    <h1>فرم سلام</h1>
    <form method="post">
        <label>نام شما:</label>
        <input type="text" name="username">
        <button type="submit">ارسال</button>
    </form>
    {% if message %}
        <p>{{ message }}</p>
    {% endif %}
</body>
</html>

چند نکته:

• method="post" یعنی این فرم با روش POST ارسال می‌شود.
• name="username" نام فیلدی است که در Flask به آن دسترسی خواهیم داشت.
• بخش {% if message %} و {% endif %} یک شرط در قالب Jinja2 است: اگر متغیر message مقدار داشته باشد، آن را نشان بده.

گرفتن دادهٔ فرم در Flask

فایل app.py را به این صورت گسترش می‌دهیم:

from flask import Flask, render_template, request
app = Flask(__name__)
@app.route("/", methods=["GET", "POST"])
def form_page():
    message = ""
    if request.method == "POST":
        username = request.form.get("username", "")
        if username:
            message = f"سلام {username}!"
        else:
            message = "لطفاً نام خود را وارد کنید."
    return render_template("form.html", message=message)
if __name__ == "__main__":
    app.run(debug=True)

توابع جدید:

• request برای دسترسی به اطلاعات درخواست (مثلاً داده‌های فرم).
• request.method نوع درخواست (GET یا POST) را مشخص می‌کند.
• request.form.get("username") مقدار فیلدی به نام username را می‌دهد.

رفتار:

• اگر صفحه را اولین‌بار باز کنید، GET است، فرم را بدون پیام خاص می‌بینید.
• وقتی فرم را پر و ارسال می‌کنید، درخواست POST می‌شود، نام خوانده می‌شود و پیام «سلام فلانی!» نمایش داده می‌شود.

---

API های بسیار ساده

API (رابط برنامه‌نویسی کاربردی) یعنی روشی برای این‌که برنامه‌ها با هم صحبت کنند. در وب، معمولاً APIها داده را به صورت JSON رد و بدل می‌کنند، نه HTML.

در یک API ساده، به‌جای برگرداندن یک صفحهٔ وب، دادهٔ خام برمی‌گردانیم که برای انسان شاید چندان زیبا نباشد، اما برای برنامه‌ها قابل استفاده است.

یک API کوچک با Flask

مثلاً می‌خواهیم یک آدرس داشته باشیم که اطلاعات یک کاربر را در قالب JSON برگرداند.

from flask import Flask, jsonify
app = Flask(__name__)
@app.route("/api/user/<name>")
def api_user(name):
    data = {
        "name": name,
        "message": f"سلام {name}",
        "length_of_name": len(name)
    }
    return jsonify(data)
if __name__ == "__main__":
    app.run(debug=True)

وقتی به آدرسی مثل:

http://127.0.0.1:5000/api/user/ali

بروید، خروجی‌ای شبیه این می‌بینید:

{
  "length_of_name": 3,
  "message": "سلام ali",
  "name": "ali"
}

این دیگر HTML نیست، بلکه JSON است که برنامه‌های دیگر (مثلاً یک اپ موبایل) می‌توانند از آن استفاده کنند.

جمع‌بندی فصل

در این فصل:

• دیدید در سطح مقدماتی، وب از مدل «درخواست/پاسخ» استفاده می‌کند.
• با Flask آشنا شدید و یک وب‌سرور محلی ساختید.
• یاد گرفتید برای آدرس‌های مختلف، route تعریف کنید و متغیر در مسیر داشته باشید.
• دیدید چگونه با قالب‌های HTML (templates) ظاهر صفحه را از منطق برنامه جدا کنیم.
• دیدید فرم HTML چیست و چطور دادهٔ آن را با Flask (و request) بخوانیم.
• یک نمونهٔ کوچک از API بر پایهٔ JSON ساختید.

در فصل‌های پروژه و گام‌های بعدی، می‌توانید یکی از پروژه‌ها را به شکل «وبی» بسازید و از همین مبانی Flask استفاده کنید؛ مثلاً:

• نسخهٔ وبی «فهرست کارها» (To-Do List)؛
• یا یک «فرم آزمون (Quiz)» ساده که نتیجه را در مرورگر نشان می‌دهد.