Python đã trở nên vô cùng phổ biến trong những năm gần đây. Nó có nhiều ứng dụng, từ ứng dụng phổ biến nhất trong Trí tuệ nhân tạo, đến Khoa học dữ liệu, Người máy và Viết kịch bản.
Trong lĩnh vực phát triển web, Python được sử dụng chủ yếu trên phần phụ trợ với các khung như Django và Flask.
Trước đây, Python không có nhiều hỗ trợ ở mặt trước như các ngôn ngữ khác như JavaScript. Nhưng may mắn thay, các nhà phát triển Python đã xây dựng một số thư viện (chẳng hạn như Brython) để hỗ trợ ngôn ngữ yêu thích của họ trên web.
Và năm nay, trong hội nghị PyCon 2022, Anaconda đã công bố một khung có tên PyScript cho phép bạn sử dụng Python trên web bằng HTML tiêu chuẩn.
Bạn có thể xem tweet này về việc ra mắt:
📢 Bạn đã nghe tin từ PyCon chưa!? Chúng tôi rất vui mừng được giới thiệu PyScript, một khung cho phép người dùng tạo các ứng dụng Python phong phú TRONG TRÌNH DUYỆT bằng cách sử dụng kết hợp Python với HTML tiêu chuẩn! Truy cập https://t.co/n4OoeBD46z để biết thêm thông tin. 🧠 💥
– Anaconda (@anacondainc) 30 Tháng Tư, 2022
điều kiện tiên quyết
Bạn sẽ cần các công cụ và kiến thức sau để viết mã cùng với bài viết này:
- Trình soạn thảo văn bản hoặc IDE do bạn chọn.
- Kiến thức về Python.
- Kiến thức về HTML.
- Trình duyệt (Google Chrome là trình duyệt được đề xuất cho PyScript).
PyScript là gì?
PyScript là một khung giao diện người dùng Python cho phép người dùng xây dựng các chương trình Python bằng giao diện HTML trong trình duyệt.
Nó được phát triển bằng cách sử dụng sức mạnh của Emscripten, Pyodide, WASM và các công nghệ web hiện đại khác để cung cấp các khả năng sau phù hợp với mục tiêu của nó:
- Để cung cấp một API đơn giản và rõ ràng.
- Để cung cấp một hệ thống các thành phần có thể cắm và mở rộng.
- Để hỗ trợ và mở rộng HTML tiêu chuẩn để đọc các thành phần tùy chỉnh đáng tin cậy và được đánh giá cao nhằm đạt được sứ mệnh “Lập trình cho 99%”.
Trong vài thập kỷ qua, Python và các ngôn ngữ giao diện người dùng nâng cao như HTML, CSS và JavaScript hiện đại đã không hoạt động cùng nhau. Python thiếu một cơ chế đơn giản để tạo giao diện người dùng hấp dẫn để đóng gói và triển khai ứng dụng một cách đơn giản, trong khi HTML, CSS và JavaScript hiện tại có thể có đường cong học tập dốc.
Việc cho phép Python sử dụng các quy ước HTML, CSS và JavaScript không chỉ giải quyết hai vấn đề đó mà còn giải quyết những vấn đề liên quan đến phát triển, đóng gói, phân phối và triển khai ứng dụng web.
Tuy nhiên, PyScript không có nghĩa là đảm nhận vai trò của JavaScript trong trình duyệt – thay vào đó, nó có nghĩa là cung cấp cho các nhà phát triển Python, đặc biệt là các nhà khoa học dữ liệu, tính linh hoạt và sức mạnh hơn.
Tại sao lại là PyScript?
PyScript cung cấp cho bạn một ngôn ngữ lập trình với các quy ước kiểu dáng nhất quán, biểu cảm hơn và dễ học bằng cách cung cấp những điều sau:
- Hỗ trợ trên trình duyệt: PyScript cho phép hỗ trợ Python và lưu trữ mà không cần máy chủ hoặc cấu hình.
- Khả năng tương tác: Các chương trình có thể giao tiếp hai chiều giữa các đối tượng và không gian tên Python và JavaScript.
- Hỗ trợ hệ sinh thái: PyScript cho phép sử dụng các gói Python phổ biến như Pandas, NumPy, v.v.
- Tính linh hoạt của khung: PyScript là một khung linh hoạt mà các nhà phát triển có thể xây dựng trên đó để tạo các thành phần có thể mở rộng trực tiếp trong Python một cách dễ dàng.
- Quản lý môi trường: PyScript cho phép các nhà phát triển xác định các tệp và gói sẽ đưa vào mã trang của họ để chạy.
- Phát triển giao diện người dùng: Với PyScript, các nhà phát triển có thể dễ dàng xây dựng với các thành phần giao diện người dùng có sẵn như nút và vùng chứa, v.v.
Cách bắt đầu với PyScript
PyScript khá dễ học và dễ học. Để bắt đầu, bạn có thể làm theo hướng dẫn trên trang web hoặc tải xuống tệp .zip.
Trong bài viết này, chúng ta sẽ sử dụng và học cách sử dụng PyScript thông qua trang web. Bạn có thể làm điều này bằng cách liên kết các thành phần trong tệp HTML của mình. Hãy in “Xin chào thế giới” đầu tiên của chúng tôi bằng PyScript.
Tạo một tệp HTML
Để bắt đầu, bạn cần tạo một tệp HTML để hiển thị văn bản trên trình duyệt của mình bằng trình soạn thảo văn bản/IDE mà bạn chọn.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title: PyScript</title>
</head>
<body>
</body>
</html>
Liên kết PyScript
Sau khi tạo tệp HTML, chúng tôi cần liên kết PyScript trong tệp HTML của bạn để có quyền truy cập vào giao diện PyScript. Điều này sẽ được đặt trong <head> nhãn.
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
In ra trình duyệt
Bây giờ bạn đã liên kết PyScript với tệp HTML, bạn có thể in “Xin chào thế giới” của mình.
Bạn có thể làm điều này với <py-script> nhãn. Các <py-script> thẻ cho phép bạn chạy các chương trình Python nhiều dòng và in chúng trên trang trình duyệt. Đặt thẻ ở giữa <body> thẻ.
<body> <py-script> print("Hello, World!") </py-script> </body>
Mã đầy đủ cho tệp HTML bên dưới:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title: PyScript</title>
</head>
<body>
<py-script> print("Hello, World!") </py-script>
</body>
</html>
Trên trình duyệt của bạn, bạn sẽ thấy điều này:
Mẹo: Nếu đang sử dụng trình chỉnh sửa VSCode, bạn có thể sử dụng tiện ích bổ sung Máy chủ Trực tiếp trong VSCode để tải lại trang khi bạn cập nhật tệp HTML.
Nhiều thao tác hơn với PyScript
Bạn có thể thực hiện nhiều thao tác hơn với khung công tác PyScript. Bây giờ chúng ta hãy nhìn vào một số trong số họ.
Gắn nhãn cho các phần tử được gắn nhãn
Trong khi sử dụng PyScript, bạn có thể muốn chuyển các biến từ mã Python sang HTML. Bạn có thể làm điều này với write phương pháp từ pyscript mô-đun trong <pyscript> nhãn. Sử dụng id thuộc tính , bạn có thể chuyển các chuỗi được hiển thị dưới dạng văn bản thông thường.
Phương thức ghi chấp nhận hai biến: biến id giá trị và biến sẽ được cung cấp.
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<b><p>Today is <u><label id='today'></label></u></p></b>
<py-script>
import datetime as dt
pyscript.write('today', dt.date.today().strftime('%A %B %d, %Y'))
</py-script>
</body>
</html>
Và đầu ra trở thành:
Chạy REPL trong trình duyệt
PyScript cung cấp giao diện để chạy mã Python trong trình duyệt.
Để có thể làm điều này, PyScript sử dụng <py-repl> nhãn. Các <py-repl> thẻ thêm một thành phần REPL vào trang, hoạt động như một trình chỉnh sửa mã và cho phép bạn viết mã thực thi nội tuyến.
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<py-repl id="my-repl" auto-generate=true> </py-repl>
</html>
Dùng thử trong trình duyệt (tốt nhất là Chrome), bạn sẽ nhận được điều này:
Nhập tệp, mô-đun và thư viện
Một trong những chức năng mà PyScript cung cấp là tính linh hoạt. Trong PyScript, bạn có thể nhập tệp cục bộ, mô-đun sẵn có hoặc thư viện của bên thứ ba. Quá trình này sử dụng các <py-env> nhãn. Thẻ này dùng để khai báo các phụ thuộc cần thiết.
Đối với các tệp Python cục bộ trên hệ thống của bạn, bạn có thể đặt mã vào một .py tệp và đường dẫn đến các mô-đun cục bộ được cung cấp trong đường dẫn: nhập vào <py-env> nhãn.
Hãy tạo một tệp Python example.py để chứa một số chức năng:
from random import randint
def add_two_numbers(x, y):
return x + y
def generate_random_number():
x = randint(0, 10)
return x
Sau đó, tệp Python sẽ được nhập vào HTML với <py-env> nhãn. Bạn nên đặt thẻ này trong <head> thẻ, phía trên <body> nhãn.
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- paths:
- /example.py
</py-env>
</head>
<body>
<h1>Let's print random numbers</h1>
<b>Doe's lucky number is <label id="lucky"></label></b>
<py-script>
from example import generate_random_number
pyscript.write('lucky', generate_random_number())
</py-script>
</body>
</html>
Điều này sẽ trở lại:
Đối với các thư viện của bên thứ ba không phải là một phần của thư viện chuẩn, PyScript hỗ trợ chúng.
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
- numpy
- requests
</py-env>
</head>
<body>
<py-script>
import numpy as np
import requests
</py-script>
</body>
</html>
Định cấu hình siêu dữ liệu
Bạn có thể đặt và định cấu hình siêu dữ liệu chung về ứng dụng PyScript của mình ở định dạng YAML bằng cách sử dụng <py config> nhãn. Bạn có thể sử dụng thẻ này ở định dạng sau:
<py-config>
- autoclose_loader: false
- runtimes:
-
src: "https://cdn.jsdelivr.net/pyodide/v0.20.0/full/pyodide.js"
name: pyodide-0.20
lang: python
</py-config>
Đây là những giá trị tùy chọn mà <py-config> thẻ cung cấp. Chúng bao gồm:
- autoclose_loader (boolean): Nếu điều này được đặt thành false, PyScript sẽ không đóng màn hình khởi động đang tải.
- tên (chuỗi): Tên của ứng dụng người dùng.
- phiên bản (chuỗi): Phiên bản của ứng dụng người dùng.
- thời gian chạy (Danh sách thời gian chạy): Danh sách các cấu hình thời gian chạy sẽ có các trường sau: src, tên và lang.
Phần kết luận
Trong bài viết này, bạn đã tìm hiểu PyScript là gì và cách sử dụng nó trong tệp HTML để chạy mã Python trên trình duyệt. Bạn cũng đã học về các thao tác/chức năng khác nhau mà bạn có thể thực hiện với PyScript.
Với PyScript, việc chạy và thực hiện các thao tác Python trên web trở nên dễ dàng hơn, vì điều này trước đây không hề dễ dàng. Đây là một công cụ tuyệt vời cho bất kỳ ai mong muốn sử dụng Python trên web.
PyScript vẫn đang trong giai đoạn đầu và đang được phát triển mạnh mẽ. Nó vẫn đang ở giai đoạn alpha và phải đối mặt với các sự cố đã biết như thời gian tải có thể ảnh hưởng đến khả năng sử dụng (một số thao tác khác không thể hiển thị tại thời điểm viết bài này do các vấn đề về hiệu suất). Vì vậy, bạn chưa nên sử dụng nó trong sản xuất vì có thể sẽ có nhiều thay đổi đột phá.
