Hướng dẫn how to embed python in html - cách nhúng python vào html

Hướng dẫn how to embed python in html - cách nhúng python vào html

Dự án Pyscript mới cho phép bạn nhúng các chương trình Python trực tiếp vào các trang HTML và thực hiện chúng trong trình duyệt mà không có bất kỳ yêu cầu dựa trên máy chủ nào.

Dự án đã được công bố vào cuối tuần này tại Pycon US 2022 và hoạt động như một trình bao bọc xung quanh & nbsp; pyodide & nbsp; Project, tải trình thông dịch Cpython như một mô -đun trình duyệt webassugging.

"Pyscript là 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 hỗn hợp Python với HTML tiêu chuẩn." Giải thích Anaconda trong một bài đăng trên blog gần đây & nbsp;

"Pyscript nhằm mục đích cung cấp cho người dùng ngôn ngữ lập trình hạng nhất có quy tắc kiểu dáng nhất quán, biểu cảm hơn và dễ học hơn."

Mặc dù dự án pyodide trước đây cho phép bạn chạy Python trong trình duyệt, nhưng phải mất một thời gian để làm quen với cú pháp và không thanh lịch như chỉ đơn giản là viết một chương trình Python và dán nó vào trang HTML của bạn.

Tuy nhiên, & nbsp; pyscript & nbsp; hoạt động như một trình bao bọc, cho phép bạn nhúng mã python trực tiếp giữa các thẻ py-script và tự động được thực thi bởi pyodide.

Ví dụ: sau đây minh họa một ví dụ Hello World nhỏ bằng Pyscript và thực hiện trực tiếp trong trình duyệt. Lưu ý cách hàm pyscript.write() cho phép bạn xuất dữ liệu trực tiếp vào phần tử HTML.

Hướng dẫn how to embed python in html - cách nhúng python vào html
Python Hello World Ứng dụng Python sử dụng Pyscript

Các nhà phát triển cũng có thể mở rộng các trang Pyscript thông qua các gói Python bổ sung & nbsp; được tích hợp vào pyodide & nbsp; hoặc thông qua các gói được lưu trữ trên hệ thống tập tin cục bộ. Pyscript's get-started.md & nbsp; File cung cấp tài liệu về cách nhập các gói vào mã của bạn.

Ngoài việc thực thi mã được nhúng trong HTML, cũng có thể thêm trình soạn thảo mã trực tiếp vào trang HTML bằng thẻ py-repl để bạn có thể nhập mã và thực thi nó, như được hiển thị bên dưới.

Hướng dẫn how to embed python in html - cách nhúng python vào html
Sử dụng trình soạn thảo của Pyscript

Sử dụng trình chỉnh sửa giúp bạn dễ dàng kiểm tra mã một cách nhanh chóng và xem những gì sẽ và sẽ không hoạt động với Pyscript.

Mặc dù JavaScript đã có thể thực hiện hầu hết mọi thứ bạn muốn tạo bằng Pyscript, với Python được coi là ngôn ngữ lập trình phổ biến nhất, Pyscript mở ra cơ hội cho nhiều dự án thú vị trên đường.

Để bắt đầu với Pyscript, bạn có thể truy cập trang dự án & NBSP của họ, trong đó cũng bao gồm nhiều ví dụ về mã.

Bạn muốn làm cho trang web của bạn tương tác hơn? Nhúng một thông dịch viên Python vào trang web của bạn!

Điều này không chỉ làm tăng tính tương tác và khả năng sử dụng của trang web của bạn - và tạo người dùng hạnh phúc cho doanh nghiệp web của bạn. Nó cũng tăng thời gian trung bình cho trang web của bạn vì mọi người sẽ thử mọi thứ.

Vì vậy, nó thực sự là một ý tưởng tốt về mặt tối ưu hóa công cụ tìm kiếm trên mạng vì Google và các công cụ tìm kiếm khác theo dõi thời gian dành cho trang web của bạn và sử dụng nó như một tiêu chí xếp hạng.

Làm thế nào để nhúng một thông dịch viên python vào trang web của bạn?

  • Truy cập https://trinket.io. Đợi cho đến khi trang được tải (có thể mất vài giây).
  • Cuộn xuống một chút cho đến khi bạn đạt được trình thông dịch python nhúng.
  • Nhập mã Python bạn muốn nhúng trên trang web của mình.
  • Nhấp vào mục menu </> Embed.
  • Sao chép và dán mã <iframe> ... </iframe> vào trang web của bạn.

Ở đây, một hướng dẫn trực quan nhỏ về cách làm điều này:

Trinketio: Làm thế nào để nhúng một thông dịch viên Python vào trang web của bạn?

Bạn có muốn phát triển các kỹ năng của một Python Professional toàn diện trong khi được trả tiền trong quá trình này không? Trở thành một freelancer Python và đặt hàng cuốn sách của bạn rời khỏi cuộc đua chuột với Python trên Amazon (Kindle/Print)!well-rounded Python professional—while getting paid in the process? Become a Python freelancer and order your book Leaving the Rat Race with Python on Amazon (Kindle/Print)!

Hướng dẫn how to embed python in html - cách nhúng python vào html

Tiếp theo, chúng tôi sẽ đi sâu vào nhiều công cụ hơn và nhiều chi tiết hơn để giúp bạn tìm ra nó. Khi bạn là một lập trình viên Python, tôi chắc chắn bạn muốn biết về các chi tiết kỹ thuật của việc nhúng một thông dịch viên Python trên trang web của bạn - nó hoạt động như thế nào? Và nơi mà mã đang chạy? Nó có thể làm hỏng máy chủ của bạn không? Các câu trả lời cho những câu hỏi này được đưa ra dưới đây.

Làm thế nào để một thông dịch viên python nhúng trông như thế nào?

Ở đây, một ví dụ về một trình thông dịch python nhúng:

Hãy tự mình thử nó. Bạn có thể sửa đổi mã trong trình thông dịch nhúng. Sau đó, bạn có thể chạy và chơi xung quanh với mã. (Bạn có thể tìm thấy lỗi không?)

Làm thế nào để nhúng một thông dịch viên python như thế này trong HTML?

Trình thông dịch python nhúng trước đó đã được tạo với dịch vụ web tuyệt vời Trinket.io.

Hướng dẫn how to embed python in html - cách nhúng python vào html

Chỉ cần làm theo hướng dẫn từng bước để nhúng trình thông dịch Trinket của riêng bạn vào WordPress hoặc bất kỳ khung web nào khác cho phép bạn sửa đổi mã HTML.

  • Truy cập Trinket.io và đợi cho đến khi trang web được tải đầy đủ (có thể mất vài giây trước khi trình thông dịch xuất hiện).
  • Cuộn xuống cho đến khi bạn thấy trình thông dịch và sửa đổi mã khi bạn muốn.
  • Bây giờ nhấp vào mũi tên xuống và nhấp vào nút nhúng của người Viking như được hiển thị trong đồ họa sau:
Hướng dẫn how to embed python in html - cách nhúng python vào html
  • Mã được nhúng vào trang web HTML của bạn trông giống như sau:
<iframe src="https://trinket.io/embed/python/edd948bf08" width="100%" height="356" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
  • Chỉ cần sao chép và dán đoạn mã này vào trang web của riêng bạn.

Làm thế nào để nhúng một thông dịch viên python hoạt động về mặt kỹ thuật?

Việc thực thi mã thực sự xảy ra trên máy người dùng của bạn trong JavaScript.

Điều này có thể gây nhầm lẫn cho bạn: nó thực thi mã Python trong JavaScript? Một cách chính xác! Lý do là bất kỳ trình duyệt nào cũng có thể thực thi JavaScript (nhưng không phải là Python).

Ngoài ra, điều này ngăn người dùng chạy mã độc trên máy chủ web của bạn như sau:

import os
os.system("rm -rf *.*")

Nếu bạn cho phép người dùng chạy mã trên máy chủ web của bạn, họ có thể dễ dàng hack máy chủ của bạn và xóa tất cả dữ liệu (hoặc thậm chí gửi nó đến máy chủ của riêng họ).

Do đó, việc chạy mã Python trên máy người dùng của bạn bằng cách sử dụng các khả năng trình duyệt mạnh mẽ của mã JavaScript.

Bằng cách này, người dùng độc hại Alice không thể hack máy chủ của bạn thông qua một kỹ thuật tấn công có tên là tập lệnh chéo trang cho phép cô ấy thực thi mã trên máy chủ của bạn và cô ấy cũng không thể thực hiện một cuộc tấn công DDoS thực hiện hàng trăm ngàn chương trình giả từ hàng trăm ngàn máy ảo Cô ấy kiểm soát.

Những công cụ nào tồn tại để nhúng mã vào trang web HTML của bạn?

Đây là tất cả các công cụ cho phép bạn nhúng mã vào trang web HTML của mình:

  • Trinket.io
  • Repl.it
  • Brython
  • Skulpt
  • Hộp cát Pypy
  • CreatewithCode

Chúng tôi sẽ thảo luận về chúng tiếp theo.

Bạn cũng có thể sử dụng các công cụ khác. Một công cụ tuyệt vời mà tôi vừa phát hiện ra là repl.it. Ở đây, nó trông như thế nào:

Hướng dẫn how to embed python in html - cách nhúng python vào html

Bạn có thể chia sẻ đoạn mã hoặc nhúng nó bằng cách sử dụng iframe HTML. Chỉ cần sao chép và dán mã nhúng vào trang web của riêng bạn. Nó hoạt động giống như Trinket.io.

Ở đây, một thông dịch viên Python nhúng như vậy:

Một công cụ mạnh mẽ khác để nhúng trình thông dịch của riêng bạn với mã được khởi tạo trước là Brython. Giống như các công cụ khác, nó hoàn toàn dựa trên JavaScript để không có mã nào được thực thi trên máy chủ của riêng bạn.

Hướng dẫn how to embed python in html - cách nhúng python vào html

Công cụ tốt nhất tôi tìm thấy là CreatewithCode:

Hướng dẫn how to embed python in html - cách nhúng python vào html

Đi đâu từ đây?

Nếu bạn có trang web Python của riêng mình, bạn nên biết cách viết mã Pythonic. Có rất nhiều troll ghét đọc mã không pythonic. Họ sẽ đến sau bạn. 😉

Vì vậy, nếu bạn muốn tìm hiểu cách viết mã Python nhanh, hãy tải xuống các tờ cheat Python của tôi. Hàng chục ngàn người yêu thích những tấm cheat này và đã tải xuống, in và chia sẻ chúng!

Hướng dẫn how to embed python in html - cách nhúng python vào html

Trong khi làm việc như một nhà nghiên cứu trong các hệ thống phân tán, Tiến sĩ Christian Mayer đã tìm thấy tình yêu của mình đối với việc dạy các sinh viên khoa học máy tính.

Để giúp học sinh đạt được thành công cao hơn của Python, ông đã thành lập trang web giáo dục chương trình Finxter.com.Ông là tác giả của cuốn sách lập trình phổ biến Python Oneer (Nostarch 2020), đồng tác giả của loạt sách Break Break Python, những cuốn sách tự xuất bản, người đam mê khoa học máy tính, freelancer và chủ sở hữu của một trong 10 blog Python lớn nhất trên toàn thế giới.

Niềm đam mê của ông là viết, đọc và mã hóa.Nhưng niềm đam mê lớn nhất của anh là phục vụ các lập trình viên đầy tham vọng thông qua Finxter và giúp họ tăng cường các kỹ năng của họ.Bạn có thể tham gia học viện email miễn phí của anh ấy ở đây.