آموزش پایتون: ساخت و انتشار وب سایت با Flask — به زبان ساده

هراز چند گاهی یک زبان برنامه‌نویسی جدید عرضه می‌شود که به همراه خود جامعه بزرگی دارد که از آن پشتیبانی می‌کنند. پایتون مدتی است که عرضه شده است و اینک به جرئت می‌توان گفت که دیگر یک زبان نیست، بلکه به یک سنت تبدیل شده است. اگر می‌خواهید عبارت «hello World» را نمایش دهید، اگر می‌خواهید اپلیکیشن‌های پایگاه داده بسازید، اگر می‌خواهید اپلیکیشن‌های مبتنی بر رابط گرافیکی کاربر بسازید، اگر می‌خواهید به بصری‌سازی داده‌ها بپردازید و یا الگوریتم‌های یادگیری ماشین را اجرا کنید، همه آن‌ها با پایتون قابل اجرا هستند.

در واقع هر چیزی که تصور کنید بتوان برنامه‌نویسی کرد با پایتون امکان‌پذیر است. با این وجود یک حوزه وجود دارد که در زمینه پایتون دست‌کم گرفته شده است و آن برنامه‌نویسی بک‌اند وب است. اما این وضعیت نیز به زودی تغییر خواهد یافت. در این نوشته نخستین گام را در این زمینه با معرفی Flask برمی‌داریم.

فیلم آموزش میکروفریم ورک فلسک در پایتون – طراحی وب اپلیکیشن با Flask در فرادرس

کلیک کنید

همه وب‌سایت‌ها با استفاده از HTML و CSS ساخته می‌شوند؛ اما ما در این نوشته قصد دارید یک وب‌سایت را با استفاده از پایتون و Flask بسازیم. زمانی که وب‌سایت خودمان را ساختیم آن را روی وب‌سرورهای Heroku منتشر می‌کنیم تا همه افراد از طریق اینترنت بتوانند به آن دسترسی داشته باشند.

قسمت قبلی این مجموعه مطلب را می‌توانید از طریق کلیک روی لینک زیر مطالعه کنید:

• آموزش پایتون: ساخت اپلیکیشن مسدود کننده وب‌ سایت در 3 مرحله — به زبان ساده

گام اول: درک Flask

Flask (+) یکی از فریم‌ ورک‌های پایتون یا درواقع از نوع میکروفریمورک‌ها برای توسعه وب است. منظور از میکرو در ابتدای کلمه میکروفریمورک این است که ماهیت آن کاملاً مقدماتی است. هیچ ابزار یا کتابخانه خارجی به صورت پیش‌فرض به همراه آن نصب نمی‌شود.

فیلم آموزش میکروفریم ورک فلسک در پایتون – طراحی وب اپلیکیشن با Flask در فرادرس

کلیک کنید

Flask به طور عمده به همراه پایگاه داده MongoDB (+) استفاده می‌شود که کنترل بیشتری روی پایگاه داده و سابقه کارها ایجاد می‌کند. معرفی تا این حد کافی است و در ادامه به توضیح طرز کار عملی آن می‌پردازیم. اما پیش از انجام این کار باید یک مفهوم بنیادی را در مورد فریمورک Flask روشن سازیم و آن چیزی نیست جز Route-ها.

• مقاله‌های مرتبط:
  • معرفی کتاب آموزش طراحی سایت با پایتون — بهترین منابع یادگیری
  • طراحی سایت با پایتون — از صفر تا صد و پروژه محور

همان‌طور که از نام آن مشخص است Route به معنی یک مسیر خاص است. تصور کنید از وب‌سایت faradars.org بازدید می‌کنید و می‌خواهید به بخش blog در آدرس blog.faradars.org بروید. سرورهای فرادرس از کجا می‌دانند که باید صفحه‌ای خاص را که به مجله فرادرس مربوط می‌شود برای شما نمایش دهند. این کار به این صورت انجام می‌پذیرد که وب اپلیکیشنی روی سرور در حال اجرا است که می‌داند وقتی کسی می‌خواهد به بخش blog برود، باید آن درخواست را مدیریت کرده و صفحه مورد نظر را که در اغلب موارد صفحه index در پوشه مربوطه است به کاربر بازگشت دهد.

گام دوم: ایجاد یک وب‌سایت ساده

ایجاد یک وب‌سایت ساده با استفاده از پایتون و Flask به اندازه پیاده‌روی در پارک آسان است. به این منظور کافی است 5 خط کد بنویسید تا این کار عملی شود.

فیلم آموزش میکروفریم ورک فلسک در پایتون – طراحی وب اپلیکیشن با Flask در فرادرس

کلیک کنید

1. در ابتدا در فریمورک Flask، کلاس Flask را ایمپورت می‌کنیم.
2. یک متغیر ایجاد می‌کنیم که وهله‌ای از شیء Flask یا به بیان دیگر اپلیکیشن Flask خود را در آن ذخیره می‌کنیم. پارامتر __name__ یک نام به اپلیکیشن می‌دهد که به صورت پیش‌فرض به صورت __main__ است.
3. Route چنان که گفتیم یک مسیر یا URL است که برای بازدید از وب‌سایت شما مورد استفاده قرار می‌گیرد. در این مورد این مسیر، به صورت ریشه دایرکتوری وب‌سایت است.
4. در ادامه یک تابع می‌نویسیم که این تابع به تعریف کارهایی می‌پردازد که صفحه وب‌سایت ما انجام خواهد داد. در حال حاضر، ما صرفاً عبارت Hello World را روی صفحه نمایش می‌دهیم.
5. اسکریپت را اجرا می‌کنیم. اگر نام اپلیکیشن __main__ باشد، در این صورت اسکریپت به سادگی اجرا خواهد شد؛ اما اگر اسکریپت را از بخش دیگری از کد فراخوانی کنید، پارامتر __name__ در بخش دوم این دستورالعمل، نام فایل را به عنوان نام اسکریپت انتساب می‌دهد که در این مورد script1 است و از این رو اسکریپت اجرا نخواهد شد.

1#Import dependencies
2from flask import Flask
3
4#Create instance of Flask App
5app = Flask(__name__)
6
7#Define Route
8@app.route("/")
9
10#Content
11def home():
12    return("Home Page")
13
14#Running and Controlling the script
15if (__name__ =="__main__"):
16    app.run(debug=True)

اگر همچنان در مورد مفهوم route دچار شک و تردید هستید به قطعه کد زیر توجه کنید تا تصور روشن‌تری از آن بیابید.

فیلم آموزش میکروفریم ورک فلسک در پایتون – طراحی وب اپلیکیشن با Flask در فرادرس

کلیک کنید

همه وب‌سایت‌ها یک صفحه About me دارند. ما نیز چنین چیزی را به وب‌سایت خود اضافه می‌کنیم. ما دو مسیر متفاوت داریم که دو صفحه مختلف را ارائه می‌دهند.

1#Import dependencies
2from flask import Flask
3
4#Create instance of Flask App
5app = Flask(__name__)
6
7#Define Route and Contant of that page
8@app.route("/")
9def home():
10    return("Home Page")
11
12#Define 2nd Route and Content
13@app.route("/about")
14def about():
15    return("About Me")
16
17#Running and Controlling the script
18if (__name__ =="__main__"):
19    app.run(debug=True)

گام سوم: HTML و CSS

وب‌سایتی که در بخش قبلی ساختیم، چیزی نیست که از تماشای آن لذت زیادی برد. بنابراین در این بخش تلاش می‌کنیم ظاهر آن را بهبود ببخشیم. در این مسیر قطعاً باید از HTML و CSS استفاده کنیم، چون بهترین گزینه برای اجرای این کار هستند.

فیلم آموزش میکروفریم ورک فلسک در پایتون – طراحی وب اپلیکیشن با Flask در فرادرس

کلیک کنید

اگر اندکی با توسعه وب آشنا باشید، می‌توانید در این مرحله یک فایل html. جدید را از صفر بسازید؛ اما اگر روش انجام این کار را نمی‌دانید؛ قالب‌های زیادی روی اینترنت وجود دارند که می‌توانید نوع مناسب را یافته و مورد استفاده قرار دهید.

اینک به جای آن که صرفاً یک متن ساده را بازگشت دهیم، صفحه‌های HTML-ی را که ایجاد کرده‌ایم در پاسخ به درخواست بازدیدکننده وب‌سایت به او بازگشت می‌دهیم. به این منظور باید کلاس دیگری را ایمپورت کنیم که render_template نام دارد. سپس در تابع محتوای خود عبارت ("render_template("file.html را بازگشت می‌دهیم تا فایل HTML خاصی که به مسیر مورد نظر مربوط است را بازگشت دهیم:

1#Import dependencies
2from flask import Flask, render_template
3
4#Create instance of Flask App
5app = Flask(__name__)
6
7#Define Route and Contant of that page
8@app.route("/")
9def home():
10    return render_template("home.html")
11
12#Define 2nd Route and Content
13@app.route("/blog")
14def about():
15    return render_template("blog.html")
16
17#Running and Controlling the script
18if (__name__ =="__main__"):
19    app.run(debug=True)

بخش HTML

همه فایل‌های html. که فراخوانی می‌شوند باید درون پوشه‌ای به نام templates در دایرکتوری کاری قرار داشته باشند.

بخش CSS

برای همه فایل‌های css. و js. باید پوشه‌ای به نام static ایجاد کنید و سپس درون آن پوشه فرعی به نام css ساخته و فایل‌های css. را درون آن قرار دهید.

اینک ما موفق شده‌ایم به هدف خود برسیم. در واقع ما وب‌سایت خود را ساخته‌ایم و به طور مناسبی روی localhost اجرا می‌شود. در ادامه می‌توانیم یک گام دیگر به جلو حرکت کنیم و کاری کنیم که وب‌سایت ما از هر کجای اینترنت قابل مشاهده باشد. به این منظور باید وب‌سایت خود را روی cloud بارگذاری کنیم. بدین منظور از سرویس ابری Heroku استفاده می‌کنیم، چون امکان توزیع اپلیکیشن‌های پایتون را در خود به صورت رایگان می‌دهد. اما پیش از انجام این کار باید یک محیط مجازی روی سیستم محلی خود ایجاد کنیم.

گام چهارم: راه‌اندازی محیط مجازی

ممکن است از خود بپرسید منظور از محیط مجازی چیست. محیط مجازی به ما کمک می‌کند که محیط توسعه و بسته‌های نصب شده خود را از بقیه بخش‌های سیستم جداسازی کنیم.

فیلم آموزش میکروفریم ورک فلسک در پایتون – طراحی وب اپلیکیشن با Flask در فرادرس

کلیک کنید

بنابراین هر آن چه که روی محیط مجازی خود نصب کنیم، در هیچ کجای سیستم نمایش داده نمی‌شود. مراحل کار برای راه‌اندازی محیط مجازی به صورت زیر است:

Virtualenv را با اجرای دستور زیر در ترمینال نصب کنید:

pip install virtualenv

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

virtualenv -p python3 virtual

اگر در مورد پوشه اصلی اپلیکیشن خود مطمئن نیستید به تصویر زیر نگاه کنید. در این مثال پوشه اصلی ما همان app4 است.

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

source virtual/bin/activate

برای غیر فعال‌سازی نیز کافی است، عبارت زیر را وارد کنید:

Deactivate

• مقاله مرتبط: طراحی سایت با پایتون — از صفر تا صد و پروژه محور

گام پنجم: توزیع وب‌سایت روی سرور

اینک مجدداً به وب‌سایت خود بازمی‌گردیم. توزیع یک وب‌سایت پایتون به سادگی کاری که با HTML و PHP می‌کنیم، یعنی کشیدن و رها کردن فایل‌ها روی کلاینت FTP نیست. از این رو باید همه کارها را به ترتیب انجام دهیم. بدین منظور مراحل زیر را با دقت و حوصله اجرا کنید.

فیلم آموزش میکروفریم ورک فلسک در پایتون – طراحی وب اپلیکیشن با Flask در فرادرس

کلیک کنید

گام 5.1: ایجاد یک حساب Heroku

با مراجعه به این صفحه (+) یک حساب در وب‌سایت Heroku ایجاد کنید.

گام 5.2: نصب ابزارهای مورد نیاز

نخستین موردی که باید نصب کرد git است. ما از git برای آپلود فایل‌ها به سرور استفاده می‌کنیم. اگر با git آشنا نیستید، پیشنهاد می‌کنیم از «آموزش تاریخچه گیت (Git) و مقدمات آن» استفاده کنید. برای نصب گیت، به خط فرمان مراجعه کرده و دستور زیر را وارد کنید:

sudo apt install git-all

اگر برای نخستین بار است که گیت را راه‌اندازی می‌کنید، احتمالاً لازم خواهد بود که آن را به وسیله یک نام و ایمیل مانند زیر پیکربندی کنید:

git config --global user.name "John Doe"
git config --global user.email johndoe@example.com

در وهله دوم باید Heroku CLI را نصب کنیم که آن را می‌توان نوعی git داخلی برای Heroku تصور کرد. بدین منظور دستور زیر را وارد کنید:

sudo snap install --classic heroku

اینک ما هر آنچه لازم است را داریم و می‌توانیم به مرحله بعد برویم.

گام 5.3: راه‌اندازی Heroku از خط فرمان

ما باید Heroku را از جایی که اپلیکیشنمان قرار دارد راه‌اندازی کنیم. بنابراین به پوشه‌ای که اسکریپت اصلی ما در آن قرار دارد مراجعه می‌کنیم و به کمک اطلاعات حساب کاربری Heroku وارد می‌شویم.

فیلم آموزش میکروفریم ورک فلسک در پایتون – طراحی وب اپلیکیشن با Flask در فرادرس

کلیک کنید

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

اینک باید اپلیکیشن خودمان را ایجاد کنیم. ابتدا مطمئن شوید که نام آن را به درستی تعیین کرده‌اید، زیرا این نام دامنه شما به همراه herokuapp.com. است یعنی برای نمونه می‌توان از hello.herokuapp.com استفاده کرد؛ اما این نام قبلاً اشغال شده است. بنابراین ما نام dhrumilp را انتخاب کرده و مراحل را ادامه می‌دهیم.

گام 5.4: ایجاد فایل‌های مورد نیاز (جمعاً 3 فایل)

دراین بخش در مورد فایل‌هایی که باید ایجاد کنیم توضیحاتی ارائه کرده‌ایم.

فیلم آموزش میکروفریم ورک فلسک در پایتون – طراحی وب اپلیکیشن با Flask در فرادرس

کلیک کنید

فایل requirements.txt

این فایل شامل آن دسته از وابستگی‌ها (کتابخانه‌ها) است که می‌خواهیم Heroku در نصب پایتون مربوط به ما داشته باشد تا بتوانیم اپلیکیشن خود را به درستی اجرا کنیم. به این منظور ابتدا به محیط مجازی که قبلاً ایجاد کردیم مراجعه می‌کنیم تا gunicorn را به کمک pip نصب کنیم.

فیلم آموزش میکروفریم ورک فلسک در پایتون – طراحی وب اپلیکیشن با Flask در فرادرس

کلیک کنید

gunicorn یک وب‌سرور پایتون است. زمانی که این کار انجام یافت، دستور pip list را اجرا می‌کنیم تا همه وابستگی‌هایی که داریم را نمایش دهد و دستور pip list > requirements.txt را برای ایجاد فایل متنی با آن لیست مورد استفاده قرار می‌دهیم. این همان چیزی که است لازم داریم. در تصویر زیر می‌توانید فایل متنی را در دایرکتوری مربوطه ببینید و آن را به محلی که فایل پایتون قرار دارد انتقال دهید:

نکته مهم: از دستور pip freeze > requirements.txt استفاده کنید تا مطمئن شوید که فایل requirements مانند تصویر زیر است، چون در غیر این صورت Heroku آن را نمی‌پذیرد و خطایی نمایش می‌دهد.

فایل Procfile

دقت کنید که این فایل هیچ پسوندی ندارد و شامل نام سرور و نام اپلیکیشن است. یک فایل ایجاد کرده، آن را Procfile نامگذاری کنید و محتوای زیر را در آن قرار دهید:

web: gunicorn mainscript:app

در این محتوا منظور از gunicorn سروری است که مورد استفاده قرا داده‌ایم. mainscript نام فایل پایتون است و app نام اپلیکیشنی است که در زمان ایجاد وهله‌ای از کلاس Flask در گام دوم این راهنما تعیین کرده‌ایم. دقت کنید که اگر شما نام متفاوتی برای اپلیکیشن تعیین کرده‌اید، محتوای فوق را باید به همین ترتیب تغییر دهید.

فایل runtime.txt

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

python-3.7.0

ما از پایتون نسخه 3 استفاده می‌کنیم و به همین دلیل محیط زمان اجرای خود را این‌گونه تعیین کردیم. اگر از پایتون 2 استفاده‌ می‌کنید، باید به جای عبارت فوق از python-2.7.15 استفاده کنید.

اینک ما هر آنچه که لازم داشتیم را در اختیار داریم و نوبت آن رسیده است که همه چیز را روی سرور آپلود کنیم.

گام 5.5: آپلود کردن همه چیز

در این بخش همه مراحل را به صوت گام به گام توضیح می‌دهیم. همه خطوط با استفاده از کامنت توضیح داده شده است و باید هر خط را به صورت منفرد اجرا کنید:

1#Make sure you are in the same folder as your main python file
2#Make sure you are logged in to heroku, if not
3heroku login
4#Initialize git to upload all the files
5git init
6#add all the files(it is a period at the end which means all)
7git add .
8#Now, commit to the server
9git commit -m "First upload"
10#Call your app that you created
11heroku git:remote --app dhrumilp
12#Push everything to master branch
13git push heroku master

اینک ما موفق شده‌ایم اپلیکیشن خود را در آدرس dhrumilp.herokuapp.com آپلود کنیم و شما می‌توانید آن را مورد بازدید قرار دهید.

• مقاله مرتبط: طراحی سایت با پایتون — از صفر تا صد و پروژه محور

گام ششم: نگهداری وب‌سایت

ما به طور معمول هر روز وب‌سایت‌های خود را به روزرسانی نمی‌کنیم؛ اما وقتی چنین کاری انجام می‌دهیم، می‌خواهیم که تغییرات ما روی وب‌سایت بازتاب یابند.

فیلم آموزش میکروفریم ورک فلسک در پایتون – طراحی وب اپلیکیشن با Flask در فرادرس

کلیک کنید

بنابراین هر زمان که چیزی را در وب‌سایت خود تغییر می‌دهید، باید آن تغییرات را در اپلیکیشن Heroku نیز آپلود کنید. به این منظور باید مراحلی که در بخش قبل دیدیم را تکرار کنیم.

1#Make sure you are in the same folder as your main python file
2#First log in to Heroku
3heroku login
4#Fetch your app
5heroku git:remote --app dhrumilp
6#Use git to upload all your changes (don't forget the period)
7git add .
8git commit -m "Changes"
9git push heroku master

و به این ترتیب وب‌سایتی را که با استفاده از پایتون و Flask و Heroku و همه اپلیکیشن‌ها، کتابخانه‌ها و وابستگی‌ها ساختیم، نگهداری می‌کنیم.

سخن پایانی

با این که مراحل مورد نیاز برای ساخت اپلیکیشن مورد نظر ما در این مطلب زیاد بود؛ اما ما آن را انجام دادیم. توسعه وب با استفاده از پایتون در حال حاضر، دست‌کم گرفته شده است اما افراد و شرکت‌هایی هستند که ارزش آن را شناخته‌اند. ضمناً از این روش نه تنها برای وب‌سایت‌ها، بلکه برای توسعه اپلیکیشن‌های پایتون نیز می‌توان استفاده کرد. اینک که فرانت‌اند خود را ساخته‌ایم، می‌توانیم پیش‌تر رفته و داده‌هایی را نیز از اپلیکیشن خود گردآوری کنیم. در بخش بعدی این سری مقالات آموزش ساخت اپلیکیشن‌های پایتون به بررسی روش تحلیل معنایی در توییتر با استفاده از پایتون خواهیم پرداخت.

برای مطالعه قسمت بعدی این مجموعه مطلب آموزشی روی لینک زیر کلیک کنید:

• آموزش پایتون: تحلیل احساسات توییتر در ۳ دقیقه --- به زبان ساده

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش های برنامه نویسی پایتون
• آموزش نحوه نصب و راه اندازی پایتون
• مجموعه آموزش‌‌های برنامه‌‌ نویسی
• گنجینه آموزش های برنامه نویسی پایتون (Python)
• طراحی سایت با پایتون — از صفر تا صد و پروژه محور
• آموزش برنامه نویسی پایتون – مقدماتی
• آموزش الگوهای طراحی (Design Patterns) در پایتون (Python)
• معرفی کتاب آموزش طراحی سایت با پایتون — بهترین منابع یادگیری

==