مقدمه PyScript: پایتون را در مرورگر وب خود اجرا کنید

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

برنامه نویسی با PyScript
واردات استاندارد کتابخانه
استفاده از کتابخانه‌های PyPI
وارد کردن به صورت محلی
ترمینال درون مرورگر
تعامل با DOM و جاوا اسکریپت

PyScript که توسط Anaconda ایجاد شد و در آوریل ۲۰۲۲ راه اندازی شد، یک فناوری آزمایشی اما امیدوارکننده است که زمان اجرای Python را به عنوان یک زبان برنامه نویسی در مرورگرهای دارای WebAssembly در دسترس قرار می دهد.

هر مرورگر معمولی اکنون از WebAssembly پشتیبانی می کند، استاندارد زمان اجرا با سرعت بالا که زبان هایی مانند C، C++، و Rust است. می تواند به کامپایل شود. پیاده سازی مرجع پایتون به زبان C نوشته شده است، و یک پروژه قبلی، Pyodide، یک پورت WebAssembly از پایتون را ارائه کرد. زمان اجرا.

با این حال،

PyScript هدف آن ارائه یک محیط کامل درون مرورگر برای اجرای پایتون به عنوان یک زبان برنامه نویسی وب است. بر روی Pyodide ساخته می‌شود اما ویژگی‌هایی مانند توانایی وارد کردن ماژول‌ها از کتابخانه استاندارد، استفاده از واردات شخص ثالث، پیکربندی تعاملات دو طرفه با Document Object Model (DOM) و انجام بسیاری از کارهای مفید دیگر در هر دو را اضافه یا افزایش می‌دهد. دنیای Python و JavaScript.

در حال حاضر، PyScript هنوز یک پروژه نمونه اولیه و آزمایشی است. Anaconda استفاده از آن را در تولید توصیه نمی کند. اما کاربران کنجکاو می توانند نمونه هایی را در سایت PyScript امتحان کنند و از اجزای موجود برای ساخت برنامه های آزمایشی Python-plus-JavaScript در مرورگر استفاده کنند.

در این مقاله، توری از PyScript خواهیم داشت و خواهیم دید که چگونه تعامل پایتون و جاوا اسکریپت را در برنامه‌های وب شما تسهیل می‌کند.

برنامه نویسی با PyScript

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

در اینجا یک مثال ساده از پروژه “Hello, world” در PyScript آمده است:


<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet"
    href="https://pyscript.net/releases/2023.11.2/core.css" />
    <script type="module"
    src="https://pyscript.net/releases/2023.11.2/core.js">
    </script>
</head>
<body>
    <script type="py" terminal>
        from pyscript import display
        display("Hello World!")
        print("Hello terminal!")
    </script>
</body>
</html>

برچسب script در head سند، عملکرد هسته PyScript را بارگیری می‌کند. شیوه نامه .css اختیاری است، اما مفید است. از جمله موارد دیگر، در زمان بارگذاری صفحه، اطلاعیه هایی را در مورد کارهایی که صفحه انجام می دهد به کاربر درج می کند – بارگذاری زمان اجرا پایتون، مقداردهی اولیه، و غیره.

پیچیدگی بد: مصاحبه با کارسون گراس خالق HTMX

کد پایتون در تگ script با ویژگی type="py" محصور شده است. توجه داشته باشید که کد باید مطابق با قراردادهای پایتون برای تورفتگی قالب بندی شود، در غیر این صورت به درستی اجرا نمی شود. اگر از ویرایشگری استفاده می کنید که HTML را به صورت خودکار قالب بندی می کند، از این موضوع آگاه باشید. ممکن است محتویات بلوک script را مخدوش کرده و آن را غیرقابل اجرا کند. همچنین می‌توانید به‌جای گنجاندن اسکریپت درون خطی، به فایل .py مراجعه کنید، که ممکن است آسان‌تر باشد.

هر کد پایتون پس از اتمام بارگیری اجزای PyScript ارزیابی می شود. می توانید انتخاب کنید که خروجی به DOM ارسال شود (از pyscript.display استفاده کنید)، یا به یک ترمینال جاسازی شده. اگر از ترمینال استفاده می کنید، باید terminal را به عنوان یک ویژگی در تگ script وارد کنید. (اطلاعات بیشتر در مورد این در زیر.)

اگر اسکریپت موجود در برچسب‌ها به stdout می‌نویسد (مانند عبارت print)، می‌توانید با ارائه یک علامت print را به جایی که می‌خواهید خروجی در صفحه نمایش داده شود هدایت کنید. ویژگی code>output. در این مثال، stdout برای اسکریپت به div با شناسه "out" هدایت می‌شود.

اگر این فایل را در یک فایل ذخیره کرده و در یک مرورگر وب باز کنید، ابتدا یک نشانگر “بارگیری” و یک مکث خواهید دید، زیرا مرورگر زمان اجرا PyScript را دریافت کرده و آن را تنظیم می کند. زمان اجرا باید در بارهای آینده در حافظه پنهان باقی بماند، اما هنوز چند لحظه طول می کشد تا فعال شود. پس از آن، Hello world باید دو بار در صفحه ظاهر شود – یک بار در بالا در HTML، و یک بار در یک پنجره سیاه که ترمینال جاسازی شده است.

واردهای استاندارد کتابخانه

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

اتحاد هوش مصنوعی به رهبری IBM و Meta برای ارتقای استانداردهای باز و مقابله با AWS، مایکروسافت و Nvidia

اگر می‌خواهید بلوک اسکریپت بالا را برای نمایش زمان فعلی تغییر دهید، نیازی نیست این کار را متفاوت از پایتون معمولی انجام دهید:


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

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

اگر بخواهید بسته ای را از PyPI نصب کنید و از آن استفاده کنید چه؟ PyScript به شما امکان می‌دهد پیکربندی‌های پروژه، از جمله بسته‌های شخص ثالث را که باید از PyPI نصب شوند، از طریق یک فایل با فرمت .toml یا .json در فهرست پروژه خود مشخص کنید. بیایید ببینیم با استفاده از .toml چگونه کار می کند.

برای استفاده از فایل پیکربندی پروژه، باید دستورالعمل config را در تگ script خود وارد کنید:


<script type="py" src="main.py" config="pyscript.toml">

فایل pyscript.toml بسته‌های مورد نیاز را فهرست می‌کند:


packages = ["package","another-package"]

توجه داشته باشید که همه بسته‌های PyPI طبق انتظار نصب و اجرا نمی‌شوند. اکثر بسته‌های Python «خالص»، مانند humanize، باید به خوبی اجرا شوند. و بسته های استفاده شده در نمونه های ارائه شده توسط Anaconda، مانند numpy، pandas، bokeh، یا matplotlib نیز خواهند بود. کار کردن اما بسته هایی که نیاز به دسترسی به شبکه دارند یا با عناصر بومی پلتفرم مانند رابط کاربری گرافیکی کار می کنند، احتمالاً کار نمی کنند.

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

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

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

برای انجام این کار، URL هایی را که می خواهید برای PyScript در دسترس قرار دهید را در فایل پیکربندی برنامه خود در یک بلوک [files] فهرست می کنید، همراه با نحوه نگاشت آنها به سیستم فایل شبیه سازی شده PyScript. به عنوان مثال:


[files]
"/module.py" = "./libs/module.py"
"https://mydata.com/data.csv" = "./data.csv"

هر فایلی که از URL سمت چپ قابل دسترسی است، از طریق مسیر سمت راست در اختیار سیستم فایل شبیه سازی شده مفسر پایتون قرار می گیرد. در این حالت، فایلی که در صورت مرور در /module.py (به عنوان مثال، http://localhost:8000/module.py) مشاهده می‌کنید در دسترس است پایتون به عنوان libs.module. به همین ترتیب، فایل در URL https://mydata.com/data.csv در فهرست کاری فعلی شبیه‌سازی‌شده به‌عنوان data.csv موجود است.

Quarkus: با جاوا بومی Kubernetes شروع کنید

ترمینال درون مرورگر

کاربران پایتون باید با REPL، رابط کنسول برای زمان اجرا پایتون آشنا باشند. در PyScript، می توانید یک ترمینال زنده که REPL را اجرا می کند، یا فقط خروجی کنسول برنامه پایتون خود را در مرورگر جاسازی کنید.

برای جاسازی ترمینال، از یک تگ script استفاده کنید که دارای ترمینال به عنوان یکی از ویژگی های آن است:


<script type="py" terminal>print("hello world")</script>

این یک ترمینال را باز می کند و hello world را چاپ می کند، اما هیچ گونه تعاملی را اجازه نمی دهد. برای تعامل، باید از ویژگی worker استفاده کنید:


<script type="py" terminal worker>
name = input("What is your name? ")
print(f"Hello, {name}")
</script>

worker برنامه شما را در یک وب کار اجرا می کند که اساساً یک فرآیند فرعی است. توجه داشته باشید که نمی‌توانید از وب‌کارگرها در یک فایل HTML که به صورت محلی بارگذاری شده است استفاده کنید. شما باید آن را از یک سرور وب که هدرهای خاصی را ارائه می دهد بارگیری کنید. اسناد PyScript نحوه کارکرد این کار را با جزئیات توضیح می دهد.

بیشتر مواردی که در یک کنسول معمولی ممکن است، مانند رنگ‌آمیزی و یونیکد، باید در ترمینال PyScript نیز پشتیبانی شوند.

تعامل با DOM و جاوا اسکریپت

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


from pyscript import window, document
inputbox = document.querySelector("#my-input")
print("Value of input:", inputbox.value)

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


from pyweb import pydom
new_div = pydom.create("div")
new_div.content = "Hello World"

این یک عنصر div جدید در صفحه ایجاد می‌کند و آن را با متن پر می‌کند. بسیاری از انواع دیگر دستکاری هایی که می توانید با DOM در جاوا اسکریپت انجام دهید – مانند افزودن عناصر و تغییر ویژگی ها – را می توان از طریق کتابخانه pydom انجام داد.

برنامه نویسی با PyScript

واردهای استاندارد کتابخانه

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

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

ترمینال درون مرورگر

تعامل با DOM و جاوا اسکریپت

پست های مرتبط

مقدمه PyScript: پایتون را در مرورگر وب خود اجرا کنید

مقدمه PyScript: پایتون را در مرورگر وب خود اجرا کنید

مقدمه PyScript: پایتون را در مرورگر وب خود اجرا کنید

شاید به این مطالب علاقمند باشید

مقدمه PyScript: پایتون را در مرورگر وب خود اجرا کنید

مقدمه PyScript: پایتون را در مرورگر وب خود اجرا کنید

مقدمه PyScript: پایتون را در مرورگر وب خود اجرا کنید

مقدمه PyScript: پایتون را در مرورگر وب خود اجرا کنید