PyScript với JavaScript

PyScript là một tập lệnh python có thể chạy trong trình duyệt bằng cách sử dụng kết hợp Python và HTML tiêu chuẩn. Đây có thể là một công cụ mạnh để tạo các ứng dụng web

Nó hoạt động như thế nào?
PyScript phụ thuộc vào Pyodide. Vì vậy, nó là một bản phân phối Python (cổng CPython) cho trình duyệt và Node. js dựa trên WebAssugging.

WebAssembly là một loại mã mới có thể chạy trong các trình duyệt web hiện đại — đó là ngôn ngữ giống như hợp ngữ bậc thấp với định dạng nhị phân nhỏ gọn chạy với hiệu năng gần như nguyên gốc và cung cấp các ngôn ngữ như C/C++, C# và Rust

Bạn có thể kiểm tra thêm về WebAssugging tại đây

Những điều quan trọng cần biết về PyScript là

• Python trong trình duyệt. Kích hoạt nội dung thả vào, lưu trữ tệp bên ngoài (được thực hiện bởi dự án Pyodide, cảm ơn bạn. ) và lưu trữ ứng dụng mà không phụ thuộc vào cấu hình phía máy chủ
• hệ sinh thái Python. Chạy nhiều gói phổ biến của Python và ngăn xếp khoa học (chẳng hạn như numpy, pandas, scikit-learning, v.v.)
• Python với JavaScript. Giao tiếp hai chiều giữa các đối tượng và không gian tên Python và Javascript
• quản lý môi trường. Cho phép người dùng xác định những gói và tệp sẽ bao gồm để mã trang chạy
• Phát triển ứng dụng trực quan. Sử dụng các thành phần giao diện người dùng được sắp xếp có sẵn, chẳng hạn như nút, vùng chứa, hộp văn bản, v.v.
• khung linh hoạt. Một khung linh hoạt có thể được tận dụng để tạo và chia sẻ các thành phần có thể cắm và mở rộng mới trực tiếp trong Python

PyScript hiện đang ở giai đoạn alpha. Nó chưa sẵn sàng để sử dụng. Bạn có thể tìm mã nguồn trên GitHub

---

Hãy bắt đầu với những ví dụ đơn giản

Trước tiên, bạn phải thêm phụ thuộc py-script vào tệp HTML

   rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
  

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bây giờ bạn có thể sử dụng PyScript trong tệp HTML của mình. PyScript hiện triển khai các yếu tố sau

3 Phần tử PyScript chính. Tại đây, bạn có thể thêm mã python có thể thực thi được trong trang web. Bản thân phần tử không được hiển thị trên trang.
______34 Đây là một REPL có thể được sử dụng để chạy mã python một cách tương tác.

Ví dụ Xin chào Python

  
     rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    
  
  
     print('Hello, Friends!') 
     print( 1 + 1 ) 
  

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Ví dụ thay thế Python

  
     rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    
  
  
     id="my-repl" auto-generate="true"> 
  

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Ví dụ trực tiếp. đây

---

Cảm ơn bạn đã đọc 😊

Có bất kỳ câu hỏi hoặc bổ sung?

---

Phải Đọc Nếu bạn chưa

Các phương pháp và mẫu phản ứng tốt nhất để giảm mã3 bước tạo thư viện quản lý trạng thái tùy chỉnh với React và API ngữ cảnhCách hủy yêu cầu API Javascript bằng AbortController13 TypeScript Utility. Bảng cheat dành cho nhà phát triển

---

Thêm nội dung tại Dev. đến. Theo dõi tôi trên YouTube, Github, Twitter, LinkedIn, Medium, Stackblitz, Hashnode, HackerNoon và Blogspot

Python đã trở nên phổ biến vô cùng 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 backend với các framework 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. ? . Đi tới https. //t. co/n4OoeBD46z để biết thêm thông tin. 🧠 💥

– Anaconda (@anacondainc) ngày 30 tháng 4 năm 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ì?

Nguồn. Trang web chính thức của PyScript

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 được đánh giá cao và đáng tin cậy nhằm đạt được sứ mệnh “Lập trình cho 99%. ”

Nguồn. Blog Anaconda

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 các 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.
• linh hoạt 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 để đư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ễ dàng 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 tin 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 với 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

Liên kết PyScript

Sau khi tạo tệp HTML, chúng tôi sẽ 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 thẻ

0

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 thẻ

1. Thẻ

1 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ẻ vào giữa các thẻ

3

  print("Hello, World!")  

Mã đầy đủ cho tệp HTML bên dưới

  
     rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    
  
  
     print('Hello, Friends!') 
     print( 1 + 1 ) 
  

0

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 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

Có nhiều thao tác hơn bạn có thể thực hiện với khung 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 phương pháp

4 từ mô-đun

5 trong thẻ

6. Sử dụng thuộc tính

7, 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. giá trị

7 và biến sẽ được cung cấp

  
     rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    
  
  
     print('Hello, Friends!') 
     print( 1 + 1 ) 
  

6

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 được điều này, PyScript sử dụng thẻ

9. Thẻ

9 thêm thành phần REPL vào trang, đóng vai trò là trình chỉnh sửa mã và cho phép bạn viết mã thực thi nội tuyến

  
     rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    
  
  
     print('Hello, Friends!') 
     print( 1 + 1 ) 
  

9

Dùng thử trên trình duyệt (tốt nhất là Chrome), bạn sẽ nhận được cái 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 thẻ

  print("Hello, World!")  

1. 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 tệp

  print("Hello, World!")  

2 và đường dẫn đến các mô-đun cục bộ được cung cấp trong đường dẫn. nhập vào thẻ

  print("Hello, World!")  

1

Hãy tạo một tệp Python

  print("Hello, World!")  

4 để chứa một số chức năng

  
     rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    
  
  
     id="my-repl" auto-generate="true"> 
  

4

Sau đó, tệp Python sẽ được nhập vào HTML bằng thẻ

  print("Hello, World!")  

1. Bạn nên đặt thẻ này trong thẻ

0, phía trên thẻ

3

  
     rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    
  
  
     id="my-repl" auto-generate="true"> 
  

8

Đ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 tiêu chuẩn, PyScript hỗ trợ chúng

  
     rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    
  
  
     id="my-repl" auto-generate="true"> 
  

9

Đị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 thẻ

  print("Hello, World!")  

8. Bạn có thể sử dụng thẻ này ở định dạng này

1

Đây là các giá trị tùy chọn mà thẻ

  print("Hello, World!")  

9 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 ứ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à ngôn ngữ

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 đã tìm hiểu 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 những 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 vấn đề đã biết như thời gian tải có thể ảnh hưởng đến khả năng sử dụng (một số hoạt động khác không thể được 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á

Người giới thiệu

• Trang web chính thức của PyScript
• trang cá sấu
• Mã nguồn PyScript
• Hướng dẫn bắt đầu với PyScript

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Ifihanagbara Olusheye

Kỹ sư phần mềm. Nhà văn kỹ thuật

---

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

PyScript có sử dụng JavaScript không?

PyScript sẽ tiếp quản JavaScript?

PyScript có giống với JavaScript không?

JavaScript hay PyScript nào tốt hơn?