ابوالفضل رمضانی
ابوالفضل رمضانی
خواندن ۸ دقیقه·۲ سال پیش

کتابخانه EEL - پایتون تنی به آب میزند!!

سلام به همگی!

امروز اومدیم با یه آموزش باحال و پایتونی...

اول بریم سراغ معرفی این کتابخونه و بعدش هم بریم با یه پروژه باحال(اما ساده) اونو یاد بگیریم!!

معرفی نامه:

اگه فرانت کار باشین حتما در جاوا اسکریپت به الکترون برخوردید!!(شاید به نوترون و پروتون هم بربُخورید?)

البته اگه سراغ ساخت اپ دسکتاپ رفته باشین!!

خب الکترون چیه؟؟(ذره ای کوچک که در اطراف هسته اتم که در مدارهای خاصی می چرخد?)

الکترون (جی اس) یه فریمورکه که میشه باهاش به کمک خانواده hcj(html , css , js) برنامه های دسکتاپ ساخت!!

حالا یه عده بنده ی خدا اومدن شبیه این فریمورکو برای پایتون ساختند!!(با نام eel)

به قول خودشون :

A little Python library for making simple Electron-like HTML/JS GUI apps, with full access to Python capabilities and libraries

این کتابخونه میاد فایل های hcj شما رو در لوکال هاست اجرا می کنه...

خب پس فرقش با سایت چیه؟

  1. میتونید بعد از پایان پروژه اون رو به صورت یک فایل اجرایی در بیارید
  2. به صورت لوکاله دیگه و نیاز به دسترسی به اینترنت نداره!!
  3. میتونید از پایتون در جاوا اسکریپت و از جاوا اسکریپت در پایتون استفاده کنید

مقدمه یا بهتره گفت دفاعیات سازنده از کتابخونه اش هم اینجا بخونید.

خب توضیحات بسه بریم سراغ پروژه!!

پروژه مون از این قراره که میخوایم از کاربر دو عدد بگیریم و بعد یه چنتا از اعمال ریاضی رو روشون انجام بدیم و روی صفحه نشون بدیم!!

البته این اعمال ریاضی رو میشه داخل جاوا اسکریپت هم انجام داد اما ما میخوایم با پایتون انجام بدیم(در یه تابع) و ازش در جاوا اسکریپت استفاده کنیم!

مرحله اول(نصب کتابخانه):

آیا شما هم به آنچه می اندیشید که من می اندیشم؟؟

pip install eel

آما اگه میخواین از Jinja2 استفاده کنین باید کد زیر رو بزنین:

pip install eel[jinja2]

جناب Jinja2 یه کتابخونه است که میشه در HTML از پایتون استفاده کرد(اگه جنگو کار کرده باشین متوجه میشین چی میگم!!)

مرحله دوم(ساخت فایل های لازم):

خب ما به یه فایل پایتون احتیاج داریم و یه پوشه که داخل پوشه فایل های hcj قرار میگیره!!

یعنی به این طور:

نام ها اختیاری است
نام ها اختیاری است

مرحله سوم(نوشتن الزامات):

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

الزامات پایتونی:

توی پایتون باید کتابخونه رو بیاریم توی فایل و :

import eel
eel.init(&quotweb&quot) # folder name
eel.start(&quothome.html&quot) # HTML file name

خب خط دوم اومدیم و نام پوشه ای که فایل هامون اونجاست رو دادیم بهش!!

خط بعدی هم فایل اصلی(HTML)رو بهش میدیم!

در اینجا میتونید اپشن هایی رو اضافه کنید که اینجا میتونید بخونید(چیزهایی مثل هاست و پورت و اندازه و ...)

الزامات اچ تی ام الی:

خب اینجا هم که تگ های پایه رو باید بنویسیم و دو سه فایلو وصل کنیم بهش:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>My app</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' href='main.css'>
    <script type=&quottext/javascript&quot src=&quot/eel.js&quot>
</head>
<body>
    
</body>
<script >
</html>

خب اصل کاریا توی خطوط 7 و 8 و 13 هست:

خط 7 که فایل css مون رو وصل کردیم

خط 8 و 13 هم دو تا فایل js | خط 13 که فایل خودمونه اما خط 8 به قول خودشون:

In addition to the files in the frontend folder, a Javascript library will be served at /eel.js.You should include this in any pages

مرحله چهارم(ساخت ویجت ها):

خب ما در صفحه مون یه h1 لازم داریم برای عنوان، دو تا input برای گرفتن ورودی و یه button و در نهایت یه p که نتیجه رو بندازیم اونجا

<h1>New EEL app for mathematical actions</h1>
<div id=&quotinputs&quot>
   First number : <input type=&quotnumber&quot id=&quotfn&quot><br>
   Second number : <input type=&quotnumber&quot id=&quotsn&quot>
</div>
<br>
<button id=&quotbd&quot>Done</button>
<br>
<p id=&quotresult&quot></p>

(وسع ما در HTML در همین حده به بزرگیتون ببخشید??)(id ها رو برای این دادیم که در پشت صحنه باهاشون کار داریم => bd = button done و fn = first number و sn = second number)

خب حالا هم یه چند تا خط css بهش اضافه می کنیم ببینیم چی میشه!!

h1 {
    color: green;
    text-align: center;
}
button {
    display: block;
    margin: 0 auto;
}
hr {
    width: 30%;
}
#inputs {
    text-align: center;
}
#result {
    text-align: center;
}

اینجا سعی مون بیشتر بر وسط چین کردن عناصر بود!!(hr رو درسته الان نداریم اما در ادامه می بینیم که داریم!!)

مرحله پنجم(ساخت تابع و استفاده از آن در جاوا اسکریپت):

خب ما اول به طور عادی تابع رو میسازیم:

def action(fn, sn):
    fn, sn = int(fn), int(sn)
    result = f&quot&quot&quot
    <h4>Result :</h4>
    {fn} + {sn} = {fn+sn} <br>
    {fn} - {sn} = {fn-sn} <br>
    {sn} - {fn} = {sn-fn} <br>
    {fn} × {sn} = {fn*sn} <br>
    <hr>
    {fn} ÷ {sn} = {fn/sn} <br>
    Quotient of {fn} ÷ {sn} = {fn//sn} <br>
    Remainder of {fn} ÷ {sn} = {fn%sn} <br>
    <hr>
    {sn} ÷ {fn} = {sn/fn} <br>
    Quotient of {sn} ÷ {fn} = {sn//fn} <br>
    Remainder of {sn} ÷ {fn} = {sn%fn} <br>
    <hr>
    {fn}<sup>{sn}</sup> = {fn**sn} <br>
    {sn}<sup>{fn}</sup> = {sn**fn} <br>
    &quot&quot&quot
    return result

اینجا خط دوم که اومدیم محض احتیاط ورودی ها رو int کردیم.

بعد یه متغییر result تعریف کردیم که متنمون داخلش نوشته شده(چون میخوایم اینو بندازیم توی صفحه نیازه که به صورت HTML نوشته بشه البته اگه میخواین چیزی بهش اضافه کنین مثل : h4 یا br یا hr یا sup که sup بالانویس می کنه متن رو مثل توان)

در نهایت هم اونو return کردیم!!

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

@eel.expose

این یه تابعه که همونطور که از اسمش معلومه همه چیزو افشا می کنه!! برای کی؟؟ جاوا اسکریپت!!

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

eel.action(first value, second value)

خب حالا ما باید بگیم هر گاه روی دکمه کلیک شد مقادیر دو تا ورودی رو بگیره و بده به این تابع و خروجی اش رو در صفحه نشون بدیم(همون تگ p)

document.getElementById(&quotbd&quot). = function(){
    var fn = document.getElementById(&quotfn&quot).value;
    var sn = document.getElementById(&quotsn&quot).value;
    eel.action(fn, sn)(function(r){
        document.getElementById(&quotresult&quot) = r;
    })
}

خب اینجا اومدیم خط اول برای دکمه یه رویداد در نظر گرفتیم که هر گاه کلیک شد مقدار روبه اش اجرا بشه!!

در ادامه هم یه تابع تعریف کردیم که میاد مقدار ورودی اول و ورودی دوم رو میگیره!!

حالا میرسیم به اصل کار!!

اول اومدیم تابعی که در پایتون ساختیم رو اجرا صدا زدیم و بهش مقدار دادیم!! با این کار تابع اجرا میشه!!

آمـــا وقتی که تابع خروجی داشته باشه(مثل تابع ما) چطور اونو بگیریم؟

همونطور که می بینید بعد از صدا زدن تابع، یه تابع دیگه تعریف کردیم!

این تابع کار گرفتن خروجی رو بر عهده داره و باز ورودی این تابع خروجی تابع پایتونی مون هست همون r بعدش هم innerHTML اون تگ p رو برابر با r گذاشتیم که اگه برنامه رو اجرا کنید:

مرحله ششم(گذاشتن آیکون):

خب برای گذاشتن آیکون برای برنامه فقط کافیه فایلی با نام favicon.ico در پوشه web بذارید!!

با اجرا کردن فایل پایتون می بینید که عکس شما به عنوان آیکون قرار گرفته!

مرحله هفتم(گرفتن خروجی exe):

خب برای گرفتن فایل exe برای کتابخونه eel هم کم و بیش مثل tkinter هست

ابتدا:

pip install pyinstaller

و سپس به مکان فایل پایتون مراجعه کرده و کد زیر رو بزنید:

python -m eel [file name] [folder name] --onefile --noconsole -i [icon]

در قسمت [file name] نام فایل پایتون، در قسمت [folder name] نام پوشه ای که فایل های وب در آن قرار دارد و در قسمت [icon] هم آدرس آیکون را بدهید.

اگر برنامه شما به کنسول نیاز ندارد noconsole-- را بزنید تا از شر کنسول راحت شوید...

مثلا:

python -m eel main.py web --onefile --noconsole -i c:\Users\username\Desktop\eel\web\favicon.ico

پس از انجام کار ها توسط خود کتابخانه، فایل اجرایی صحیح و سالم در پوشه ای با نام dist قرار می گیرد!!

کدهای پایتون:

import eel

eel.init(&quotweb&quot)

@eel.expose
def action(fn, sn):
    fn, sn = int(fn), int(sn)
    result = f&quot&quot&quot
    <h4>Result :</h4>
    {fn} + {sn} = {fn+sn} <br>
    {fn} - {sn} = {fn-sn} <br>
    {sn} - {fn} = {sn-fn} <br>
    {fn} × {sn} = {fn*sn} <br>
    <hr>
    {fn} ÷ {sn} = {fn/sn} <br>
    Quotient of {fn} ÷ {sn} = {fn//sn} <br>
    Remainder of {fn} ÷ {sn} = {fn%sn} <br>
    <hr>
    {sn} ÷ {fn} = {sn/fn} <br>
    Quotient of {sn} ÷ {fn} = {sn//fn} <br>
    Remainder of {sn} ÷ {fn} = {sn%fn} <br>
    <hr>
    {fn}<sup>{sn}</sup> = {fn**sn} <br>
    {sn}<sup>{fn}</sup> = {sn**fn} <br>
    &quot&quot&quot
    return result

eel.start(&quothome.html&quot)

کد های HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>My app</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <script type=&quottext/javascript&quot src=&quot/eel.js&quot>
</head>
<body>
    <h1>New EEL app for mathematical actions</h1>
    <div id=&quotinputs&quot>
        First number : <input type=&quotnumber&quot id=&quotfn&quot><br>
        Second number : <input type=&quotnumber&quot id=&quotsn&quot>
    </div>
    <br>
    <button id=&quotbd&quot>Done</button>
    <br>
    <p id=&quotresult&quot></p>
</body>
<script src=&quotmain.js&quot>
</html>

کد های CSS:

h1 {
    color: green;
    text-align: center;
}
button {
    display: block;
    margin: 0 auto;
}
hr{
    width: 30%;
}
#inputs {
    text-align: center;
}
#result {
    text-align: center;
}

کد های JS:

document.getElementById(&quotbd&quot). = function(){
    var fn = document.getElementById(&quotfn&quot).value;
    var sn = document.getElementById(&quotsn&quot).value;
    eel.action(fn, sn)(function(r){
        document.getElementById(&quotresult&quot) = r;
    })
}

[منبع]

(واژه hcj یه سرواژه نویسی از HTML و CSS و JS بود!!)

امیدوارم که این آموزش براتون مفید بوده باشه...

لایک و کامنت یادتون نره!!

تا کُدی دیگر خدانگهدار :)

برنامه نویسیpythonguieelجاوا اسکریپت
ابوالفضل رمضانی
ابوالفضل رمضانی
فعلا دانش آموز!!!? و همینطور برنامه نویس :)?
شاید از این پست‌ها خوشتان بیاید