تمرين - إنشاء تطبيق

  • 10 دقائق

سنقوم بإنشاء تطبيقنا بشكل متكرر، مع التركيز على مفاهيم محددة في أثناء المضي قدمًا. للبدء، سنقوم بإنشاء الصفحة المقصودة لتطبيقنا، والتي ستعرض النموذج الذي سيستخدمه المستخدم.

عادة ما تكون نقطة الإدخال لتطبيقات Flask هي ملف يسمى app.py. سوف نتبع هذه الاتفاقية وننشئ جوهر تطبيقنا. سنقوم بتنفيذ الخطوات التالية:

  1. إنشاء التطبيق الأساسي
  2. إضافة المسار إلى تطبيقنا
  3. إنشاء قالب HTML لموقعنا
  4. اختبر التطبيق

إنشاء تطبيق أساسي

  1. بالعودة إلى مثيل Visual Studio Code الذي كنا نستخدمه سابقا، قم بإنشاء ملف جديد يسمى app.py بالنقر فوق New file في علامة التبويب Explorer

    Screenshot showing the Visual Studio Code New File dialog.

    هام

    إذا كان هذا التمرين هو المرة الأولى التي تستخدم فيها Visual Studio Code لإنشاء تطبيق Python، فستتلقى رسائل حول تثبيت ملحق Python و linter pylint. حدد تثبيت لتثبيت كل وظيفة إضافية من هذه الوظائف الإضافية.

  2. إضافة التعليمات البرمجية لإنشاء تطبيق Flask الخاص بك

    from flask import Flask, redirect, url_for, request, render_template, session

app = Flask(__name__)

تتضمن عبارة الاستيراد مراجع إلى Flask، وهو جوهر أي تطبيق Flask. سنستخدم render_template في بعض الوقت، عندما نريد إرجاع HTML.

app سيكون تطبيقنا الأساسي. سنستخدمه عندما نسجل مساراتنا في الخطوة التالية.

إضافة المسار

سيستخدم تطبيقنا مسارا واحدا - /. يسمى هذا المسار أحيانا إما المسار الافتراضي أو مسار الفهرس ، لأنه هو الذي سيتم استخدامه إذا لم يوفر المستخدم أي شيء يتجاوز اسم المجال أو الخادم.

أضف التعليمات البرمجية التالية إلى نهاية app.py

@app.route('/', methods=['GET'])
def index():
    return render_template('index.html')

باستخدام @app.route، نشير إلى المسار الذي نريد إنشاءه. سيكون /المسار هو ، وهو المسار الافتراضي. نشير إلى أنه سيتم استخدام هذا ل GET. إذا جاء طلب GET ل /، فسيستدعي Flask تلقائيا الدالة المعلن عنها مباشرة أسفل مصمم الديكور، index في حالتنا. في نص index، نُشير إلى أننا سنقوم بإرجاع قالب HTML يسمى index.htmL إلى المستخدم.

إنشاء قالب HTML للنموذج الخاص بنا

يركز Jinja، محرك القولبة لـ Flask، بشكل كبير على HTML. ونتيجة لذلك، يمكننا استخدام جميع المهارات والأدوات الموجودة في HTML لدينا بالفعل. سنستخدم Bootstrap لتخطيط صفحتنا، لجعلها أجمل قليلا. باستخدام Bootstrap، سنستخدم فئات CSS مختلفة على HTML. إذا لم تكن معتادًا على Bootstrap، فإنه يمكنك تجاهل الفئات والتركيز على HTML (وهو الجزء المهم حقًا).

هام

HTML (لغة ترميز النص التشعبي) هي لغة ترميز قياسية تستخدم لإنشاء صفحات ويب. يتكون HTML من سلسلة من العلامات والسمات لإنشاء العناوين والفقرات والقوائم والصور والارتباطات والعناصر الأخرى التي تشكل صفحة ويب. عندما يطلب مستخدم صفحة ويب، يقرأ متصفحه التعليمات البرمجية ل HTML ويعرضها كصفحة ويب مرئية يمكن للمستخدم التفاعل معها. لمعرفة المزيد حول HTML، راجع أساسيات HTML.

يجب إنشاء قوالب Flask في مجلد يسمى templates، وهو مناسب. لنقم بإنشاء المجلد والملف الضروري وإضافة HTML.

  1. إنشاء مجلد جديد باسم قوالب عن طريق تحديد مجلد جديد في أداة المستكشف في Visual Studio Code

  2. حدد مجلد القوالب الذي أنشأته، وحدد ملف جديد لإضافة ملف إلى المجلد

  3. قم بتسمية الملف index.html

  4. قم بإضافة HTML التالية

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <title>Translator</title>
</head>
<body>
    <div class="container">
        <h1>Translation service</h1>
        <div>Enter the text you wish to translate, choose the language, and click Translate!</div>
        <div>
            <form method="POST">
                <div class="form-group">
                    <textarea name="text" cols="20" rows="10" class="form-control"></textarea>
                </div>
                <div class="form-group">
                    <label for="language">Language:</label>
                    <select name="language" class="form-control">
                        <option value="en">English</option>
                        <option value="it">Italian</option>
                        <option value="ja">Japanese</option>
                        <option value="ru">Russian</option>
                        <option value="de">German</option>
                    </select>
                </div>
                <div>
                    <button type="submit" class="btn btn-success">Translate!</button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

المكونات الأساسية في HTML أعلاه هي textarea للنص الذي يرغب المستخدم في ترجمته، والقائمة المنسدلة (select)، والتي سيستخدمها المستخدم للإشارة إلى اللغة الهدف. إذا كنت تريد إضافة المزيد من اللغات، يمكنك الرجوع إلى قائمة اللغات المدعومة للحصول على خيارات أخرى. قم بتعيين السمة value إلى التعليمات البرمجية الخاصة باللغة، على سبيل المثال، pl للغة البولندية.

اختبر التطبيق

مع موقعنا الأولي الذي تم إنشاؤه، حان الوقت لاختباره! سنستخدم الوحدة الطرفية المدمجة داخل Visual Studio Code لجعل حياتنا أسهل قليلاً.

  1. افتح terminal المتكاملة عن طريق تحديد Ctrl-` أو Cmd-` على Mac

  2. قم بتشغيل الأمر التالي لتعيين وقت تشغيل Flask على التطوير، ما يعني أنه سيتم إعادة تحميل الخادم تلقائيًا مع كل تغيير

    # Windows
set FLASK_ENV=development

# Linux/macOS
export FLASK_ENV=development

  3. شغِّل التطبيق!

    flask run

  4. افتح التطبيق في مستعرض بالانتقال إلى http://localhost:5000

يجب أن تشاهد النموذج معروضًا! تهانينا!

‏‫اختبر معلوماتك

1.

ما هو رقم المدخل الافتراضي الذي يستخدمه Flask لخدمة طلبات HTTP؟

2.

في أي دليل فرعي يجب أن يتم تخزين ملفات قالب Jinja بشكل افتراضي؟