أنشئ تطبيقك الأول في فلاسك Flask
في مقال اليوم سأقدم لك نظرة عامة حول إطار العمل Flask وهو هو إطار عمل لتطوير تطبيقات الويب باستخدام لغة Python. يتميز فلاسك Flask بالبساطة والمرونة، مما يجعله مثاليًا لبناء تطبيقات صغيرة إلى متوسطة الحجم.
ما هو إطار العمل فلاسك Flask؟
يُعرف فلاسك Flask بأنه إطار عمل مصغر لتطوير تطبيقات الويب . ويسمى مصغر لأنه يوفر الوظائف الأساسية التي تمكنك كطور من بناء مواقع ويب بسيطة ولا يناسب تطوير مواقع معقدة فهو لا يكون محملًا بجميع الميزات والميزات اللازمة للتطوير كما في أطر عمل الويب الأخرى مثل جانغو Django أو لارافيل Laravel.
خطوات تثبيت فلاسك Flask
إن تركيب فلاسك Flask بسيط وسهل فكل ما هو مطلوب لتثبيته هو تشغيل الطرفية أو نافذة موجه الأوامر الخاصة بك وكتابة الأمر التالي:
pip: pip install flask
خطوات تطوير موقع ويب باستخدام Flask
سنقوم بإنشاء موقع ويب بسيط في فلاسك Flask بخطوات سهلة ومباشرة، بداية أنشئ ملف باسم app.py أو بأي اسم تريده وضعه في المجلد الخاص به وافتحه بمحرر الأكواد الذي تفضله (أنا أستخدم VSCode).
عليك أن تبدأ مشروع فلاسك Flask بتحديد بملف التطبيق App، وفيه يمكنك تعريف الصفحات ومسارات التوجيه Routes والوظائف الأخرى.
كل ما يتعين علينا فعله هو تحديد وظيفة تمثل كل صفحة وتعيين عنوان URL/ الخاص بها. ستقوم هذه الوظائف بتنفيذ بعض العمليات وإرجاع بعض أكواد HTML التي يجب عرضها.
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
@app.route('/submit', methods=['POST'])
def submit_form():
if request.method == 'POST':
data = request.form['data']
return f'تم استلام البيانات: {data}'
if __name__ == '__main__':
app.run(debug=True)
دعني أشرح الكود خطوة بخطوة:
قمنا في البداية باستيراد الحزم والوحدات الضرورية وهي الوحدة Flask اللازمة لإنشاء تطبيق والوحدة render_template لعرض أو تصيير صفحات HTML، والوحدة request للتفاعل مع الطلبات الواردة.
في السطر التالي app = Flask(__name__) أنشأنا تطبيق فلاسك باستخدام الاسم الحالي للملف (`__name__`). هذا الكائن سيكون محور التطبيق وسيدير جميع العمليات.
بعدها استخدمنا الديكوريتر @app.route('/') من أجل تحديد المسار الرئيسي للتطبيق فعند زيارة الصفحة الرئيسية ترجع الدالة home() تقوم بإرجاع صفحة HTML مستخدمة render_template.`
ثم استخدمنا الديكوريتر @app.route('/submit', methods=['POST'])، لتحديد المسار الذي سيتم استخدامه للتعامل مع طلبات النماذج الذي تم إرسالها باستخدام الطريقة POST. فالدالة submit_form() تتحقق هنا من أن الطلب هو طلب POST، ثم تستخرج البيانات من النموذج باستخدام request.form وتعيد رسالة تؤكد استلام البيانات.
وأخيرًا نشغل التطبيق من خلال كتابة الكود التالي
if __name__ == '__main__':
app.run(debug=True)
الذي يتحقق من أن يتم تشغيل التطبيق مباشرة و ليس من خلال الاستيراد، ثم يشغل التطبيق على الخادم المحلي باستخدام `app.run()`، وخاصية `debug=True` تساعد على تتبع الأخطاء بشكل أفضل.
في النهاية، سيقدم هذا الكود تطبيق Flask بسيط يحتوي على صفحة رئيسية تظهر عند زيارة الرابط الرئيسي وصفحة استمارة تستجيب لإرسال البيانات عبر الطريقة POST.
الخطوة التالية هي إنشاء مجلد template وأنشئ بداخله ملف index.html ونضع فيه كود HTML الذي سيُستخدم كقالب لصفحة الويب في تطبيق Flask.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>تطبيق Flask البسيط</title>
</head>
<body>
<h1>مرحبًا بك في تطبيق فلاسك البسيط</h1>
<form action="/submit" method="post">
<label for="data">أدخل بيانات:</label>
<input type="text" name="data" required />
<button type="submit">إرسال</button>
</form>
</body>
</html>
لقد انتهيت الآن من إنشاء أول صفحة ويب لك باستخدام فلاسك وحان الوقت لاختبارها، عد للملف app.py وقم بتشغيل الكود لاختباره على خادم محلي (في دروس لاحقة سأعملك كيف تنشر الموقع على خادم فعلي)
سيظهر لك الرابط http://127.0.0.1:5000 الذي يمثل عنوان تطبيق فلاسك على السيرفر المحلي كل ما عليك هو الانتقال إلى هذا العنوان من متصفح الويب لترى صفحتك الأولى باستخدام فلاسك كما في الصورة التالية.
ملاحظة1:
بما أن هذا التطبيق يعمل محليًا، فلن يتمكن سوى الجهاز الذي يقوم بتشغيل برنامج python النصي من الوصول إلى موقع الويب. قد تلاحظ بعض التحذيرات عند بدء تشغيل البرنامج النصي الخاص بك. تجاهلها في الوقت الحالي.
ملاحظة2:
يستفيد فلاسك من سيرفرتطوير مدمج يسمى Werkzeug، وهو أداة تطوير Python تقدم خوادم وأدوات تطوير إضافية. هذا السيرفر يكون مدمجًا مع Flask ويسمح لك بتشغيل التطبيق على الخادم المحلي بسهولة دون الحاجة لإعداد خادم محلي على جهازك ليتيح لك البدء بتطوير تطبيقاتك بسرعة دون الحاجة إلى إعداد السيرفر.
مهمتك كمطور هي تثبيت Flask عبر pip، ومن ثم كتابة التطبيق الخاص بك. Flask يقوم بباقي العمل بما في ذلك إعداد وتشغيل الخادم المحلي أثناء التطوير. يمكنك ببساطة الوصول إلى تطبيقك عبر المتصفح عند استخدام `http://127.0.0.1:5000` ورؤية تأثير التغييرات التي تقوم بها في الوقت الفعلي.
تنسيق ملف القالب
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>تطبيق Flask البسيط</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
text-align: center;
padding: 20px;
}
h1 {
color: #333;
}
form {
max-width: 400px;
margin: 20px auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
box-sizing: border-box;
}
button {
background-color: #007bff;
color: #fff;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>
<h1>مرحبًا بك في تطبيق فلاسك البسيط</h1>
<form action="/submit" method="post">
<label for="data">أدخل بيانات:</label>
<input type="text" name="data" required />
<button type="submit">إرسال</button>
</form>
</body>
</html>
كتابة عناوين URL ديناميكية
