معرفی PyScript، پایتون را در مرورگر وب خود اجرا کنید

تکنولوژی PyScript برای کدنویسی پایتون در وب مورد استفاده قرار می گیرد، در این مطلب قصد داریم کمی بیشتر درباره تکنولوژی PyScript و ویژگی های آن صحبت کنیم.

تکنولوژی PyScript که توسط Anaconda ساخته شده است یک تکنولوژی آزمایشی جدید و امیدوارکننده است که ران تایم زبان برنامه نویسی runtime را به عنوان یک زبان برنامه نویسی در مرورگرهای وبی که دارای WebAssembly در دسترس شما قرار می دهد. هر مرورگر مدرن و پرکاربرد در حال حاضر از WebAssembly استفاده می کند چرا که دارای یک استاندارد ران تایم با سرعت بسیار بالا است که از زبان هایی مانند سی، سی پلاس پلاس و Rust پشتیبانی کرده و آنها را کامپایل می کند. پیاده سازی reference پایتون در آن به زبان سی نوشته شده است و یکی از پروژه های قبلی آن یعنی Pyodide یک WebAssembly port از ران تایم پایتون را برای شما فراهم می کند.

آشنایی با تکنولوژی PyScript

یکی از نکات بسیار مهمی که باید درباره تکنولوژی PyScript بدانید این است که تکنولوژی PyScript قصد دارد یک محیط داخلی مرورگر کامل را برای اجرای کدهای پایتون به عنوان یک زبان برنامه نویسی تحت وب فراهم کند. این تکنولوژی بر روی Pyodide نوشته شده است اما ویژگی هایی مانند توانایی وارد کردن ماژول ها از کتابخانه های استاندارد، استفاده از import های شخص ثالث، پیکربندی تعاملات دوطرفه با Document Object Model و بسیاری از موارد دیگر را برای شما فراهم می کند. در واقع شما با استفاده از این تکنولوژی وارد دنیای مشترک زبان های برنامه نویسی پایتون و جاوا اسکریپت خواهید شد. در حال حاضر تکنولوژی PyScript به عنوان یک پروژه نمونه و آزمایشی شناخته می شود و Anaconda استفاده از آن را در محصولات نرم افزاری توصیه نمی کند. با این حال کاربران کنجکاو هستند تا نمونه های مختلف را در سایت PyScript مورد آزمایش قرار دهند و با اجزای موجود برای ساخت برنامه های آزمایشی Python-plus-JavaScript استفاده کنند.

در ادامه قصد داریم نگاهی به اصول استفاده از تکنولوژی PyScript در پایتون بیندازیم.

برنامه نویسی با تکنولوژی PyScript

تکنولوژی PyScript در هسته خود شامل کدهای جاوا اسکریپت است که می توانید آن را به صفحات وب خود اضافه کنید. این مسئله شامل بارگذاری ران تایم پایه ای PyScript و اضافه کردن پشتیبانی خودکار برای تگ های سفارشی که در تکنولوژی PyScript استفاده می شوند نیز خواهد بود. در این جا شما می توانید یک مثال ساده از پروژه hello, world که در PyScript آمده است را مشاهده کنید:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
        <script defer src="https://pyscript.net/unstable/pyscript.js"></script>
    </head>
    <body>

<py-script output="out">
print("Hello world")
</py-script>

<div id="out"></div>

    </body>

</html>

تگ اسکریپت در head داکیومنت عملکرد اصلی تکنولوژی PyScript را برای شما بارگذاری می کند. فایل pyscript.css به صورت اختیاری است ولی استفاده از آن می تواند مزایای زیادی را برای شما داشته باشد. در میان سایر مواردی که وجود دارند اطلاعیه هایی را درباره کارهایی که کاربر می تواند در صفحه انجام دهد برای او نمایش خواهد داد که از جمله این موارد می توان به بارگذاری ران تایم زبان برنامه نویسی پایتون، مقداردهی اولیه و راه اندازی اولیه آن و ... اشاره کرد.

عملکرد این تکنولوژی

هر کد پایتون زمانی که بارگذاری کامپوننت های تکنولوژی PyScript به پایان می رسد ارزیابی خواهد شد. در صورتی که اسکریپت موجود در تگ ها عبارت stdout را بنویسد می توانید با ارائه یک ویژگی خروجی مشخص کنید که کاربر دقیقا به کجای صفحه منتقل شود تا خروجی به درستی برای او نشان داده شود. دقت داشته باشید که در این مثال stdout برای اسکریپت با شناسه out به ID منتقل می شود.

در صورتی که شما این مورد را در یک فایل ذخیره کنید و آن را در یک صفحه مرورگر اجرا کنید شما ابتدا می توانید عبارت loading را مشاهده کنید که به محض این که مرورگر ران تایم تکنولوژی PyScript را بارگذاری کرده و آن را تنظیم می کند متوقف می شود. دقت داشته باشید که ران تایم باید برای دفعات بعدی در حافظه کش قرار گیرد ولی هنوز هم چند لحظه طول می کشد تا فعال شود. در ادامه شما می توانید عبارت Hello world را مشاهده کنید که در صفحه ظاهر می شود.

importهای مربوط به کتابخانه استاندارد در تکنولوژی PyScript

اسکریپت هایی که به تنهایی از builtinهای پایتون استفاده می کنند تا حدود زیادی می توانند مفید واقع شوند. کتابخانه استاندارد زبان برنامه نویسی پایتون در تکنولوژی PyScript نیز دقیقا به همان روشی که در پایتون استفاده می شود مورد استفاده قرار می گیرد. کافی است که به سادگی آن را import کرده و شروع به کار کردن با آن کنید. دقت داشته باشید که importهای کتابخانه استاندارد باید به خوبی در PyScript کار کنند.

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

import datetime
print ("Current date and time:",
    datetime.datetime.now().strftime("%Y/%m/%d %H:%M:%S"))

استفاده از کتابخانه ها از طریق PyPI

چه می شود اگر قصد داشته باشیم پکیجی را از طریق PyPI نصب کرده و اقدام به استفاده از آن کنیم؟ تکنولوژی PyScript دارای تگ دیگری است که py-env نامیده می شود و می تواند پکیج های شخص ثالث که شما نیازمند نصب کردن و استفاده از آنها هستید را در اختیار شما قرار دهد. اجازه دهید تا بلاک py-script در اسکریپت اصلی را با قطعه کد زیر تعویض کنیم:

<py-env>
- humanize
</py-env>

<py-script output="out">
from datetime import datetime
import humanize
now_int = int(datetime.timestamp(datetime.now()))
now_fmt = humanize.intcomma(now_int)
print("It has been", now_fmt, "seconds since the epoch.")
</py-script>

py-env به ما اجازه می دهد تا بتوانیم پکیج هایی را برای اضافه کردن فهرست کنیم که این کار از طریق همان روشی که در فایل requirements.txt برای فهرست کردن پکیج ها در پایتون انجام می دادیم صورت می گیرد. در ادامه می توانیم آنها را به صورت پکیج های پایتون import کرده و شروع به استفاده از آنها کنیم. در این مثال ما از یک پکیج شخص ثالث به نام humanize استفاده می کنیم تا بتوانیم خروجی عددی را راحت تر بخوانیم.

دقت داشته باشید که همه پکیج های PyPI طبق انتظار شما نصب و اجرا نمی شوند. به عنوان مثال درخواست های شما نیازمند دسترسی به اجزای شبکه هستند که هنوز از آنها پشتیبانی نمی شود( البته شما می توانید برای حل این مشکل از pyodide.http.pyfetch استفاده کنید). با این حال پکیج های اصلی پایتون مانند پکیج humanize باید به خوبی اجرا شوند.

import کردن محلی در تکنولوژی PyScript

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

به طور معمول پایتون می تواند از وجود فایل های .py دیگر file system به عنوان آن چیزی که می تواند Import کند سود ببرد. با این حال باید دقت داشته باشید که تکنولوژی PyScript نمی تواند به این شکل کار کند و به همین علت نیز شما باید مشخص کنید که کدام فایل ها را می خواهید به عنوان ماژول های قابل Import کردن در دسترس قرار دهید.

نکاتی درباره import کردن محلی در این تکنولوژی

برای این کار فرض کنید که شما یک صفحه وب به نام index.html دارید که در یک پوشه معین در سرور وب شما قرار گرفته است و در ادامه می خواهید یک فایل main.py را در کنار آن قرار دهید. به این ترتیب اسکریپت درون صفحه شما می تواند فقط import main باشد و شما می توانید اکثر منطق کدهای پایتون خود را به فایل های .py واقعی محدود کنید.

در ادامه شما باید فایل پایتونی که می خواهید در بلوک py-env خود قابل Import کنید را مشخص کنید:

- paths:
    - ./main.py

این کار به فایل main.py اجازه می دهد تا در همان پوشه سرور وب به عنوان یک صفحه وب قابل Import شود.

نکته مهمی که باید در این خصوص به آن دقت داشته باشید شامل موارد زیر است:

- شما نمی توانید این عملیات import کردن را روی صفحات وبی که به صورت محلی در مرورگر اجرا کرده اید انجام دهید. این مسئله به علت محدودیت های مربوط به فایل سیستم است که توسط WebAssembly و خود مرورگر اعمال می شود.

- در عوض باید دقت داشته باشید که شما می توانید صفحات را روی یک وب سرور میزبانی کنید تا صفحه وب و فایل .py را از این طریق ارائه دهید.

تگ REPL در تکنولوژی PyScript

کاربران زبان برنامه نویسی پایتون می توانند از Jupyter Notebook استفاده کنند که یک محیط برنامه نویسی زنده درون مرورگرهای وب برای برنامه نویسان و توسعه دهندگان پایتون است. این ابزار معمولا برای کارهای ریاضی و آماری مورد استفاده قرار می گیرد. تکنولوژی PyScript یک بلاک building را برای چنین محیطی فراهم می کند که این کار با استفاده از تگ py-repl صورت می گیرد.

py-repl در واقع یک فیلد ورودی در صفحه وب در مرورگر ایجاد می کند که مانند یک نسخه بسیار ابتدایی از Jupyter Notebook عمل می کند. در این جا می توانید نمونه کدهای مربوط به خود Anaconda را مشاهده کنید:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>

  <body>
    <h1><b>pyscript REPL</b></h1>
    Tip: press Shift-ENTER to evaluate a cell
    <br>
    <div>
      <py-repl id="my-repl" auto-generate="true"> </py-repl>
    </div>
  </body>
</html>

نکاتی درباره قطعه کد بالا

این قطعه کد را اجرا کنید. با این کار یک فیلد ورودی در صفحه به شما نمایش داده می شود که مانند Python REPL عمل می کند.

دقت داشته باشید که در حال حاضر تگ REPL به میزان کمی امکان سفارشی سازی مستندات را برای شما فراهم می کند. به عنوان مثال اگر قصد دارید با استفاده از برنامه نویسی به محتویات یک سلول یا نتایج آن دسترسی پیدا کنید هیچ مستندات روشنی برای انجام این کار وجود ندارد که بتوانید از آن استفاده کنید.

تعامل با event listenerهای جاوا اسکریپت در تکنولوژی PyScript

از آنجایی که تکنولوژی PyScript بر پایه pyodide ساخته شده است از مکانیزم pyodide استفاده می کند تا بتواند با DOM تعامل داشته باشد. به عنوان مثال اگر ما قصد داشته باشیم مقدار وارد شده در یک فیلد ورودی در یک صفحه وب را دریافت کنیم و از آن در کدهای پایتون خود استفاده کنیم می توانیم این کار را از طریق کد زیر انجام دهیم:

<input id="txt">

<py-script>
from js import document, console
from pyodide import create_proxy

def _eventlog(e):
    console.log(f"Input value: {e.target.value}")

eventlog = create_proxy(_eventlog)

document.getElementById("txt").addEventListener("input", eventlog)
</py-script>

نکات پایانی درباره این تکنولوژی

دقت داشته باشید که کتابخانه js یک رابط پایتون را برای بسیاری از موجودیت های رایج جاوا اسکریپت مانند انواع کنسول فراهم می کند. آنها تقریبا به همان روشی که در جاوا اسکریپت مورد استفاده قرار می گرفتند استفاده می شوند و شما در تکنولوژی PyScript می توانید از آنها استفاده کنید. تابع create_proxy که در pyodide ارائه می شود به شما اجازه می دهد تا یک شی فانکشن پایتون را دریافت کرده و یک رابط یا اینترفیس جاوا اسکریپت را برای آن تولید کنید که این موضوع می تواند مزایای زیادی را برای توسعه دهندگان و برنامه نویسان پایتون داشته باشد.

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان