פיתוח אפליקציות Web בפייתון

Frameworks בפיתוח תוכנה

Framework (מסגרת עבודה) היא אוסף כלים, ספריות ותבניות שמספקות תשתית לפיתוח אפליקציות בצורה מהירה ויעילה יותר.
במקום לכתוב כל קוד מאפס, ה-Framework מספק רכיבים מוכנים מראש שמאפשרים למפתח להתמקד בלוגיקה העסקית של האפליקציה.

על מנת לעבוד עם השלבים בעמוד הזה יש צורך בהיכרות עם HTML/CSS.

דוגמה לפתרונות שמספק Framework:

  • ניהול בקשות HTTP.
  • טיפול בהרשאות ואימות משתמשים.
  • חיבור לבסיסי נתונים.
  • תבניות לעיצוב דפי HTML.

מה זה Flask?

Flask הוא Framework קליל ונוח לפיתוח אפליקציות Web בפייתון.
הוא מספק כלים בסיסיים אך גמישים מאוד לפיתוח אפליקציות, מה שהופך אותו לבחירה מצוינת עבור פרויקטים קטנים עד בינוניים.

תכונות עיקריות:

  • מינימליסטי: אין בו יותר מדי כלים מובנים מראש, מה שמאפשר גמישות.
  • מודולרי: ניתן להרחיב אותו עם תוספים (Plugins) לפי הצורך.
  • קל ללמידה: הקוד פשוט וברור, אידיאלי למתחילים.
  • מתאים ל-API: מאפשר פיתוח RESTful APIs בקלות.

ארכיטקטורת הקבצים של Flask

Flask אינו כופה מבנה קבצים מסוים, אך מבנה מומלץ לפרויקט Flask כולל:

my_flask_app/
├── app/
│   ├── static/         # קבצי CSS, JavaScript ותמונות
│   ├── templates/      # תבניות HTML
│   ├── __init__.py     # מאתחל את האפליקציה
│   ├── routes.py       # מכיל את הנתיבים (Routes)
│   ├── models.py       # מודלים לבסיסי נתונים (אופציונלי)
├── run.py              # קובץ ההרצה הראשי של האפליקציה
├── requirements.txt    # ספריות ותוספים הדרושים לפרויקט

הסבר על התיקיות והקבצים:

  • static/: מכילה קבצי סטטיים כמו CSS, JavaScript, ותמונות.
  • templates/: מכילה קבצי HTML שמשתמשים ב-Jinja2, מנוע התבניות של Flask.
  • __init__.py: מאתחל את האפליקציה ומגדיר הגדרות בסיסיות.
  • routes.py: קובץ שבו מוגדרים הנתיבים (Routes) שמטפלים בבקשות HTTP.
  • run.py: הקובץ שמריץ את האפליקציה.

איך Flask עובד?

Flask פועל במודל בקשה-תגובה:

  1. בקשה (Request): המשתמש שולח בקשה לשרת (לדוגמה, http://example.com/quiz).
  2. נתיב (Route): Flask מתאימה את הבקשה לנתיב מוגדר (לדוגמה, /quiz).
  3. טיפול בבקשה: Flask מבצע קוד Python שמוגדר בנתיב.
  4. תגובה (Response): Flask מחזיר תשובה למשתמש, לרוב כקובץ HTML או JSON.

דוגמה לקוד פשוט:

from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
    return "Welcome to Flask!"

@app.route("/hello/<name>")
def hello(name):
    return f"Hello, {name}!"

if __name__ == "__main__":
    app.run(debug=True)

מה קורה כאן:

  1. @app.route("/"): מסמן את הנתיב הראשי (/) וקושר אותו לפונקציה home.
  2. @app.route("/hello/<name>"): מסמן נתיב דינמי שבו <name> הוא פרמטר.
  3. app.run(debug=True): מריץ את האפליקציה במצב "debug" שמאפשר לזהות שגיאות בקלות.

Jinja2 – מנוע התבניות של Flask

Flask משתמש במנוע התבניות Jinja2 ליצירת HTML דינמי.
זה מאפשר לשלב Python בתוך HTML.

דוגמה לתבנית HTML עם Jinja2:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Trivia Game</title>
</head>
<body>
    <h1>Welcome {{ name }}!</h1>
    <ul>
        {% for item in items %}
        <li>{{ item }}</li>
        {% endfor %}
    </ul>
</body>
</html>

איך Flask משתמש בזה:

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
    name = "Player"
    items = ["Question 1", "Question 2", "Question 3"]
    return render_template("home.html", name=name, items=items)

if __name__ == "__main__":
    app.run(debug=True)

תוצאה:
המשתנים name ו-items מוחלפים בערכים שסופקו מהפונקציה home.

למה Flask פופולרי?

  • פשטות וגמישות: מתאים לפרויקטים קטנים עד בינוניים.
  • קהילה פעילה ותוספים רבים: תוספים כמו Flask-SQLAlchemy (בסיסי נתונים) ו-Flask-RESTful (API).
  • לימוד מהיר: מאפשר למתחילים להבין במהירות את עקרונות פיתוח ה-Web.

מתי להשתמש ב-Flask?

  • פרויקטים קטנים: כמו משחק הטריוויה שלנו.
  • פיתוח API פשוט: יצירת נקודות קצה (Endpoints) לאפליקציות אחרות.
  • ממשקים בסיסיים: פורטלים פנימיים או אפליקציות Web קלות.

הפיכת משחק הטריוויה לאפליקציית Web

כדי להפוך את משחק הטריוויה לאפליקציית Web מבוססת פייתון, נשתמש ב-Flask (מסגרת עבודה קלה ל-Web). הנה שלבי ההדרכה שמכסים כל שלב בפיתוח אפליקציית Web עם Python.

שלב 1: התחלת עבודה עם Flask

הדרכה:

  1. התקנת Flask עם pip install flask.
  2. יצירת שרת בסיסי שמחזיר "Hello, World!" בדפדפן.
from flask import Flask

app = Flask(__name__)

@app.route("/")
def home():
    return "Hello, World!"

if __name__ == "__main__":
    app.run(debug=True)

שלב 2: בניית עמודים בסיסיים

  • מטרה: יצירת עמודי Web בסיסיים.
  • הדרכה:
    1. יצירת תבניות HTML עם Jinja2 (מנוע התבניות של Flask).
    2. הגדרת עמודים כגון עמוד בית ועמוד משחק.
from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("index.html")  # Loads the HTML template

@app.route("/quiz")
def quiz():
    return render_template("quiz.html")

if __name__ == "__main__":
    app.run(debug=True)

תבנית index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Trivia Game</title>
</head>
<body>
    <h1>Welcome to the Trivia Game!</h1>
    <a href="/quiz">Start Quiz</a>
</body>
</html>

שלב 3: העברת נתונים לתבניות

  • מטרה: להבין איך לשלוח נתונים מהשרת לתבניות.
  • הדרכה:
    1. העברת שאלות לתבנית המשחק (quiz.html).
    2. שימוש ב-Jinja2 להדפסת נתונים.
@app.route("/quiz")
def quiz():
    questions = [
        {"text": "What is 2 + 2?", "answer": "4"},
        {"text": "What is the capital of France?", "answer": "Paris"},
    ]
    return render_template("quiz.html", questions=questions)

תבנית quiz.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Trivia Game</title>
</head>
<body>
    <h1>Trivia Questions</h1>
    <ul>
        {% for question in questions %}
            <li>{{ question.text }}</li>
        {% endfor %}
    </ul>
</body>
</html>

שלב 4: עבודה עם טפסים

  • מטרה: לשלוח תשובות מהמשתמש לשרת.
  • הדרכה:
    1. יצירת טופס HTML עם שאלות.
    2. טיפול בנתונים מהטופס עם Flask.
from flask import Flask, render_template, request

app = Flask(__name__)

questions = [
    {"text": "What is 2 + 2?", "answer": "4"},
    {"text": "What is the capital of France?", "answer": "Paris"},
]

@app.route("/quiz", methods=["GET", "POST"])
def quiz():
    if request.method == "POST":
        user_answers = request.form.getlist("answers")
        correct = 0
        for i, question in enumerate(questions):
            if user_answers[i].strip().lower() == question["answer"].lower():
                correct += 1
        return f"You got {correct}/{len(questions)} correct!"
    return render_template("quiz.html", questions=questions)

if __name__ == "__main__":
    app.run(debug=True)

תבנית quiz.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Trivia Game</title>
</head>
<body>
    <h1>Answer the Questions</h1>
    <form method="POST">
        {% for question in questions %}
            <div>
                <p>{{ question.text }}</p>
                <input type="text" name="answers">
            </div>
        {% endfor %}
        <button type="submit">Submit</button>
    </form>
</body>
</html>

שלב 5: עבודה עם APIs

  • מטרה: להוסיף שאלות בצורה דינמית מ-API חיצוני.
  • הדרכה:
    1. שימוש ב-requests כדי למשוך שאלות מ-API.
    2. שילוב השאלות בתהליך המשחק.
import requests

@app.route("/quiz")
def quiz():
    url = "https://opentdb.com/api.php?amount=5&type=multiple"
    response = requests.get(url)
    data = response.json()
    questions = [
        {"text": item["question"], "answer": item["correct_answer"]}
        for item in data["results"]
    ]
    return render_template("quiz.html", questions=questions)

שלב 6: עיצוב עם CSS

  • מטרה: לשפר את המראה של האתר.
  • הדרכה:
    1. יצירת קובץ CSS ושימוש בו בתבניות.
    2. התאמה אישית לעיצוב המשחק.

תבנית HTML עם CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Trivia Game</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <h1>Trivia Game</h1>
</body>
</html>

שלב 7: פריסה לשרת (Deployment)

  • מטרה: להפוך את המשחק לזמין ברשת.
  • הדרכה:
    1. שימוש ב-Heroku או Render לפריסת האפליקציה.
    2. יצירת קובץ requirements.txt עם pip freeze > requirements.txt.
    3. יצירת קובץ Procfile לציון הרצת האפליקציה.

דוגמת Procfile:

web: python main.py

מבנה סופי של התיקייה

TriviaGame/
├── static/
│   └── styles.css
├── templates/
│   ├── index.html
│   ├── quiz.html
├── main.py
├── requirements.txt
├── Procfile

שיפור נוסף: ניהול משתמשים

  • הוספת מערכת משתמשים עם הרשאות.
  • אפשרות למנהל לערוך שאלות מהדפדפן.

ניווט במאמר

מאמרים אחרונים

Weekly Tutorial