Python đã trở nên rất phổ biến trong những năm gần đây, với nhiều ứng dụng từ trí tuệ nhân tạo, khoa học dữ liệu, người máy và viết kịch bản. Trong lĩnh vực ứng dụng web, Python trước đây thường được sử dụng thông qua các framework như Django và Flask. Nhưng nay đã có một công cụ mới xuất hiện, đó là Pyscript.
Python trước đây hơi kém hỗ trợ trên phía trước so với 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 như Brython để hỗ trợ việc sử dụng ngôn ngữ yêu thích của họ trên web.
Bạn đang xem: Học cách chạy mã Python trực tiếp trên trình duyệt với Pyscript
Và năm nay, tại Hội nghị PyCon 2022, Anaconda đã công bố một framework mới có tên gọi là PyScript, cho phép bạn sử dụng Python trực tiếp trên web bằng HTML tiêu chuẩn.
Contents
Điều kiện cần
Trước khi bắt đầu với Pyscript, bạn sẽ cần chuẩn bị các công cụ và kiến thức sau:
- Một trình soạn thảo văn bản hoặc môi trường phát triển tích hợp để viết mã Python.
- Kiến thức về Python.
- Kiến thức về HTML.
- Một trình duyệt (Google Chrome được đề xuất cho việc sử dụng Pyscript).
Bắt đầu với PyScript
PyScript rất dễ học và hiểu. Để bắt đầu, bạn có thể theo hướng dẫn trên trang web hoặc tải xuống file.zip.
Trong bài viết này, chúng ta sẽ học cách sử dụng PyScript thông qua việc tạo trang web. Bạn có thể làm điều này bằng cách kết nối các thành phần trong tệp HTML của mình và in ra dòng “Hello, world!” đầu tiên bằng PyScript.
Tạo một tệp HTML
Để bắt đầu với PyScript, 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 hoặc môi trường phát triển tích hợp bạn đã chọn.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title: PyScript</title>
</head>
<body>
</body>
</html>
Liên kết PyScript
Sau khi tạo tệp HTML, chúng ta cần liên kết PyScript trong tệp HTML để có thể truy cập vào giao diện PyScript. Điều này sẽ được đặt trong thẻ head
.
<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 ra “Hello, world!” của bạn.
Bạn có thể làm điều này bằng thẻ py-script
. Thẻ này cho phép bạn chạy các đoạn mã Python nhiều dòng và in ra chúng trên trang web. Đặt thẻ này giữa thẻ body
.
<body>
<py-script>
print("Xin chào, thế giới!")
</py-script>
</body>
Mã hoàn chỉnh cho tệp HTML như sau:
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title: PyScript</title>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<py-script>
print("Xin chào, thế giới!")
</py-script>
</body>
</html>
Xem thêm : Top 12 cuốn sách Python cơ bản cho người mới bắt đầu
Kết quả sẽ hiển thị trên trình duyệt: Xin chào, thế giới!
Mẹo: Nếu bạn đang sử dụng trình soạn thảo VSCode, bạn có thể sử dụng tiện ích Live Server trong VSCode để tự động tải lại trang khi bạn cập nhật tệp HTML.
Viết mã Python phức tạp hơn với PyScript
Bạn có thể thực hiện nhiều đoạn mã tương tự khác với PyScript.
Gắn nhãn cho các phần tử cần hiển thị thông tin
Trong quá trình sử dụng PyScript, bạn có thể muốn truyền các biến từ mã Python vào mã HTML. Bạn có thể làm điều này bằng cách sử dụng phương thức write
từ mô-đun pyscript trong thẻ pyscript
. Bằng cách sử dụng thuộc tính id
, bạn có thể truyền các chuỗi cần hiển thị dưới dạng văn bản thông thường.
Phương thức write
nhận hai biến: giá trị id
và biến sẽ được truyền vào.
<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>Hôm nay là <u><label id='homnay'></label></u></p>
</b>
<py-script>
import datetime as dt
pyscript.write('homnay', dt.date.today().strftime('%A %B %d, %Y'))
</py-script>
</body>
</html>
Kết quả: Hôm nay là Thứ Ba Tháng Năm 24, 2022
Chạy REPL trên trình duyệt
PyScript cung cấp một giao diện để chạy mã Python trực tiếp trên trình duyệt.
Để làm điều này, PyScript sử dụng thẻ py-repl
. Thẻ py-repl
thêm một phần tử REPL vào trang web, hoạt động như một trình chỉnh sửa mã và cho phép bạn viết và thực thi mã trực tiếp.
<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>
Chạy thử trên trình duyệt (tốt nhất là Chrome) sẽ hiển thị như sau:
Nhập tệp, mô-đun và thư viện
Một trong những tính năng mà PyScript cung cấp là tính linh hoạt. Trong PyScript, bạn có thể nhập tệp địa phương, mô-đun có sẵn hoặc thư viện từ bên thứ ba. Quá trình này sử dụng thẻ py-env
. Thẻ này được sử dụng để khai báo các phụ thuộc cần thiết.
Xem thêm : Tự Học Lập Trình Pascal: Những Bước Để Thi HSG Tin Hay Tin Học Trẻ
Đối với các tệp Python địa phương trên hệ thống của bạn, bạn có thể đặt mã vào một file .py và đường dẫn đến các mô-đun địa phương được cung cấp trong khối đường dẫn trong thẻ py-env
.
Hãy tạo một tệp Python example.py để chứa một số hàm:
from random import randint
def cong_hai_so(x, y):
return x + y
def sinh_so_ngau_nhien():
x = randint(0, 10)
return x
Sau đó, bạn có thể nhập tệp Python này vào HTML bằng cách sử dụng thẻ py-env
. Bạn nên đặt thẻ này trong thẻ head
, phía trên thẻ body
.
<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>Hãy in ra các số ngẫu nhiên</h1>
<b>Số may mắn của bạn là: <label id="mayman"></label></b>
<py-script>
from example import sinh_so_ngau_nhien
pyscript.write('mayman', sinh_so_ngau_nhien())
</py-script>
</body>
</html>
Kết quả:
Cấu hình metadata
Bạn có thể đặt và định cấu hình metadata cho ứng dụng PyScript của mình ở định dạng YAML bằng cách sử dụng thẻ py-config
. Bạn có thể sử dụng thẻ này với đị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à các giá trị tùy chọn mà thẻ py-config
cung cấp. Chúng bao gồm:
autoclose_loader
(boolean): true/ false, PyScript sẽ không đóng màn hình giới thiệu khi tải nếu là false.name
(string): Tên của ứng dụng của bạn.version
(string): Phiên bản của ứng dụng của bạn.runtimes
(Danh sách các Runtime): Danh sách các cấu hình runtime có các trườngsrc
,name
vàlang
.
Kết luận
Trong bài viết này, chúng ta đã tìm hiểu về PyScript là gì và cách sử dụng nó trong tệp HTML để chạy mã Python trên trình duyệt. Chúng ta 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 thi mã Python trên web trở nên dễ dàng hơn, thay vì không thể như trước đây. Đây là một công cụ tuyệt vời cho bất kỳ ai muốn sử dụng Python trên web.
Tuy nhiên, PyScript vẫn đang trong giai đoạn phát triển sớm và có thể gặp một số vấn đề đã biết như thời gian tải có thể ảnh hưởng đến trải nghiệm sử dụng (một số vấn đề về hiệu suất). Vì vậy, bạn nên không sử dụng nó trong việc phát triển ứng dụng thực tế, vì trong tương lai có thể sẽ có nhiều thay đổi đột phá xảy ra.
(Theo Olusheye)
Xem thêm bài viết: Pyscript giúp chạy code Python trực tiếp trên web
Nguồn: https://laptrinhc.edu.vn
Danh mục: Ngôn ngữ lập trình