سلام مجدد خدمت شما، در قسمت قبلی به بررسی کتابخانه پایتون eel و کاربرد هاش پرداختیم، با هم ساختار استاندارد یک پروژه eel رو دیدیم و در آخر این کتابخونه رو روی سیستم خودمون نصب کردیم.
در این جلسه قراره دست به کد بشیم و یک نرم افزار کاملا ساده با این کتابخونه اجرا کنیم.البته ما در ابتدای آموزش همگام با داکیومنت اصلی پروژه که لینکش رو در جلسه قبل براتون قرار دادم پیش میریم تا چند مثال حل کنیم. بعدش میریم سراغ ساخت یک ماشین حساب ساده به وسیله eel.
با فایل main.py شروع میکنیم و تکه کد ساده زیر رو درون اون قرار میدیم.
import eel
eel.init('web')
eel.start('index.html')
بیاین خط به خط بررسی کنیم. در خط اول ما کتابخونه رو ایمپورت کردیم و به فایل خودمون اضافش کردیم. خط بعدی برای اینه که کتابخونه، شروع کنه و پروژه رو راه اندازی کنه، فایل های مورد نیاز رو تشخیص یا تشکیل بده و کلا همه چی رو برای اجرا آماده کنه. میبینین که در خط دوم ما ‘web’ رو به عنوان یک آرگومان به تابع راه انداز خودمون دادیم. این web در واقع اسم پوشه ای هست که ما قرار شد فایل های مربوط به فرانت اند خودمون رو در اون قرار بدیم، اینجا اون پوشه رو به برنامه نشون میدیم.
و خط سوم همونطور که از اسمش مشخصه برای اجرای نهایی برناممون هست. دوباره اینجا میبینین که ‘index.html’ رو به تابع خودمون دادیم و اگه از جلسه قبل یادتون باشه، این اسم فایلی بود که گفتیم به عنوان صفحه اصلی و شروع برنامه رندر میشه. البته این تابع آرگومان های دیگه ای رو هم میگیره که برای تنظیمات برنامه ما ضروریه ولی در این جلسه بهش نمیپردازیم (اگه کنجاو هستین و کمی عجله دارین حتما به صفحه گیت هاب این پروژه سر بزنین و داکیومنت اون رو بیشتر مطالعه کنین)
خب همه چی برای یه اجرای ساده آمادس، برای اینکه امتحان کنیم ببینیم پروژه کار میکنه یا نه، اون رو اجرا میکنیم، باید بعد از اجرا یک صفحه کروم به شکل زیر به شما نشون داده بشه:
اگه این صفحه رو دیدین یعنی پروژه براتون با موفقیت اجرا شده، حالا بیاین تا یکم وارد بخش فرانت اند کار بشیم، لازم نیست این صفحه رو ببندین و یا دوباره فایل رو از اول ران کنین چون بعد از هر تغییر با یه رفرش با استفاده از منوی راست کلیک کروم و یا Ctrl + R میتونین تغییرات جدید رو ببینین ( البته فقط وقتایی که توی فرانت اند تغییرات میدین و این شامل کد های پایتون نمیشه)
نکته : فایل های جاوا اسکریپت و سی اس اس ممکنه توی مرورگر کش بشن و بعضی وقتا تغییرات اعمال نشه، سعی کنین کش مرورگر رو از قسمت Inspect Element موقتا غیر فعال کنین یا حداقل هر بار دیدین تغییری اعمال نشد، کش رو پاک کنین. در مورد بخش Inspect مرورگر ها به زودی یک آموزش قرار میدم.
فایل index.html رو باز میکنیم و یک تکه کد ساده اچ تی ام در درون اون قرار میدیم و ذخیره میکنیم:
<!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>اولین پروژه من</title>
</head>
<body>
<h3>سلام، این اولین پروژه من با پایتون است!</h3>
</body>
</html>
دیگه نیازی به توضیح فایل های HTML نیست چون قرار نیست داخل این دوره آموزشی، بهشون بپردازیم، حالا یه بار دیگه صفحه کرومی که در مرحله قبل باز شده بود رو ریفرش میکنیم، باید به شکل زیر در اومده باشه:
همونطور که دیدین، ما موفق شدیم کانفیگ اولیه پروژه رو انجام بدیم، حالا دو بخش فرانت اند و بک اند داریم که با هم دیگه ارتباط دارن و میتونیم به توسعه جداگانه هر کدوم بپردازیم.
در جلسه بعدی کد هامون رو گسترده تر میکنیم و به انجام چند تست در مورد ارتباط جاوا اسکریپت و پایتون با هم دیگه میپردازیم. از جلسه سوم به بعد هم کار روی پروژه ماشین حساب رو شروع میکنیم . موفق و پیروز باشید!