Trình duyệt Python
PyScript là một framework hoàn toàn mới đã gây ra rất nhiều hứng thú khi Peter Wang, CEO và đồng sáng lập của Anaconda, Inc. , đã tiết lộ nó trong bài phát biểu quan trọng của mình tại PyCon US 2022. Mặc dù dự án này chỉ là một thử nghiệm trong giai đoạn phát triển ban đầu, nhưng mọi người trên mạng xã hội dường như đã yêu thích nó. Hướng dẫn này sẽ giúp bạn tăng tốc với PyScript, trong khi tài liệu chính thức vẫn đang được tạo Show
Trong hướng dẫn này, bạn sẽ học cách
Để tận dụng tối đa hướng dẫn này, lý tưởng nhất là bạn nên có một số kinh nghiệm về JavaScript và lập trình front-end nói chung. Đồng thời, bạn sẽ có thể làm theo tốt ngay cả khi bạn chưa từng thực hiện bất kỳ công việc phát triển web nào trước đây. Rốt cuộc, đó là toàn bộ ý tưởng đằng sau PyScript Tải xuống miễn phí. Nhận một chương mẫu từ CPython Internals. Hướng dẫn về Trình thông dịch Python 3 chỉ cho bạn cách mở khóa hoạt động bên trong của ngôn ngữ Python, biên dịch trình thông dịch Python từ mã nguồn và tham gia phát triển CPython từ chối trách nhiệm. PyScript là một dự án thử nghiệmHướng dẫn này sẽ đến với bạn chỉ vài tuần sau khi có thông báo chính thức về PyScript. Tại thời điểm viết bài, bạn có thể thấy cảnh báo sau được hiển thị nổi bật trên trang chủ của khung
Điều này không thể được nhấn mạnh đủ. Trước khi bạn bắt đầu, hãy chuẩn bị cho những thứ không hoạt động như được trình bày trong hướng dẫn này. Một số thứ có thể không hoạt động vào thời điểm bạn đọc nó, trong khi một số vấn đề có thể đã được giải quyết bằng cách này hay cách khác Điều đó không có gì đáng ngạc nhiên, do lịch sử tương đối ngắn của PyScript. Vì là phần mềm mã nguồn mở nên bạn có thể xem qua lịch sử cam kết Git của nó trên GitHub. Khi thực hiện, bạn sẽ thấy rằng Fabio Pliger từ Anaconda, người sáng tạo và lãnh đạo kỹ thuật của PyScript, đã thực hiện cam kết ban đầu vào ngày 21 tháng 2 năm 2022. Đó là chỉ hơn hai tháng trước khi nó được công bố rộng rãi với thế giới vào ngày 30 tháng Tư Đó là nơi mọi thứ tồn tại với PyScript. Nếu bạn đã sẵn sàng chấp nhận rủi ro và muốn dùng thử khuôn khổ này, thì hãy tiếp tục đọc Loại bỏ các quảng cáoBắt đầu với PyScriptĐến cuối phần này, bạn sẽ có cái nhìn toàn cảnh về framework và các khối xây dựng của nó, bao gồm cả cách chúng hoạt động cùng nhau để đưa Python vào trình duyệt của bạn. Bạn sẽ biết cách chọn các tệp cần thiết và lưu trữ PyScript cục bộ mà không phụ thuộc vào kết nối Internet Quấn đầu quanh PyScriptBạn có thể tự hỏi chính xác PyScript là gì. Cái tên này có lẽ là một nỗ lực thông minh nhằm tiếp thị nó như một sự thay thế cho JavaScript trong trình duyệt, nhưng cách giải thích như vậy sẽ không cung cấp cho bạn bức tranh hoàn chỉnh. Đây là cách PyScript hiện đang được quảng cáo trên hồ sơ Twitter của nó
Một trong những mục tiêu của PyScript là biến Web thành một nơi thân thiện cho bất kỳ ai muốn học viết mã, kể cả trẻ em. Khung đạt được mục tiêu đó bằng cách không yêu cầu bất kỳ quy trình cài đặt hoặc cấu hình nào ngoài trình soạn thảo văn bản và trình duyệt hiện có của bạn. Một tác dụng phụ là PyScript đơn giản hóa việc chia sẻ công việc của bạn với người khác Khi bạn xem tệp README của PyScript, bạn sẽ thấy phần tóm tắt sau đây và phần mô tả dài hơn
Scratch là một ngôn ngữ lập trình trực quan tương đối đơn giản mà trẻ em học ở trường để xây dựng các trò chơi đơn giản và hoạt hình vui nhộn. JSFiddle là trình soạn thảo trực tuyến của JavaScript thường được sử dụng để chứng minh giải pháp cho một vấn đề nhất định trên các diễn đàn như StackOverflow Hơn nữa, trang chủ của PyScript chứa khẩu hiệu này
Nói cách khác, PyScript cho phép bạn sử dụng Python, có hoặc không có JavaScript, để xây dựng các trang web tương tác mà không nhất thiết phải giao tiếp với máy chủ. Lợi ích chính ở đây là bạn có thể tận dụng kiến thức Python hiện có của mình để bước vào thế giới phát triển front-end, hạ thấp rào cản gia nhập và làm cho nó dễ tiếp cận hơn. Nhưng có nhiều lợi ích khác khi sử dụng PyScript mà bạn sẽ tìm hiểu sau Ở cấp độ kỹ thuật hơn một chút, PyScript là một ứng dụng một trang (SPA) được viết bằng TypeScript sử dụng khung Svelte, được tạo kiểu bằng Tailwind CSS và đi kèm với tổng số. js. Theo một trong những nhận xét trong cam kết Git ban đầu, dự án dựa trên một mẫu được đề cập trong một bài đăng trên blog của Sascha Aeppli, kết hợp các công cụ đó PyScript sẽ không thể thực hiện được nếu không xây dựng dựa trên phiên bản gần đây của Pyodide—một trình thông dịch CPython được biên dịch bằng emscripten cho WebAssembly, cho phép Python chạy trong trình duyệt. PyScript cung cấp một lớp trừu tượng mỏng trên Pyodide bằng cách đóng gói mã soạn sẵn cần thiết, nếu không thì bạn phải tự nhập bằng JavaScript Nếu bạn chưa quen với Pyodide và WebAssembly, hãy nhấp để mở rộng phần có thể thu gọn bên dưới Pyodide và WebAssembly là gì?Hiển thị/Ẩn Đã có nhiều nỗ lực chạy mã Python trong trình duyệt với các mức độ thành công khác nhau. Thách thức chính là, cho đến gần đây, JavaScript là ngôn ngữ lập trình duy nhất mà các trình duyệt web có thể hiểu được Có một vài vòng bổ sung để nhảy qua để chạy mã Python trong trình duyệt. Ví dụ: Transcrypt chuyển một đoạn mã Python thành một đoạn mã JavaScript tương tự, trong khi Brython là trình thông dịch Python được sắp xếp hợp lý được triển khai trong JavaScript. Những công cụ này và các công cụ tương tự kém lý tưởng hơn vì chúng dựa trên thứ gì đó giả vờ là thời gian chạy Python chính hãng Pyodide thì khác vì nó tận dụng WebAssugging, một tiêu chuẩn khá mới được hỗ trợ bởi các trình duyệt web hiện đại và có nghĩa là cho phép tốc độ thực thi mã gần như gốc. Bạn có thể coi WebAssembly là "ngôn ngữ lập trình" thứ hai mà các trình duyệt hiểu được WebAssugging là một máy ảo chính thức có khả năng chạy mã byte di động mà bạn có thể nhắm mục tiêu bằng cách biên dịch mã nguồn của hầu hết mọi ngôn ngữ lập trình. Tuy nhiên, khi bạn nhìn vào danh sách các ngôn ngữ tương thích với WebAssembly, thì bạn sẽ không tìm thấy Python ở đó. Bạn có đoán được tại sao không? Python là một ngôn ngữ được giải thích, không đi kèm với trình biên dịch tiêu chuẩn có thể nhắm mục tiêu WebAssugging. Thay vào đó, những gì Pyodide đã làm là biên dịch toàn bộ trình thông dịch CPython thành WebAssugging, để nó nằm trong trình duyệt và diễn giải mã Python giống như nó là trình thông dịch Python thông thường của bạn Khi bạn quên đi những hạn chế nhất định của hộp cát của trình duyệt và các chính sách bảo mật của nó, sẽ không có sự khác biệt về chức năng giữa việc chạy mã thông qua CPython hoặc Pyodide và chỉ có một sự khác biệt nhỏ về hiệu suất. Pyodide và WebAssembly làm cho trình duyệt web trở thành một nơi tuyệt vời để phân phối các chương trình Python của bạn Để làm cho việc tích hợp giữa Python và trình duyệt web trở nên đơn giản hơn, PyScript định nghĩa một số Thành phần Web và các thành phần tùy chỉnh, chẳng hạn như 1 và 2, mà bạn có thể nhúng trực tiếp vào HTML của mình. Nếu bạn cảm thấy phiền vì dấu gạch nối trong các tên thẻ tùy chỉnh này, thì đừng đổ lỗi cho PyScript. Đặc tả HTML thực thi nó để tránh xung đột tên giữa các Thành phần Web và các phần tử HTML trong tương laiCòn chần chừ gì nữa, đã đến lúc viết 3 đầu tiên của bạn bằng PyScriptViết “Xin chào, thế giới” đầu tiên của bạn. ” trong PyScriptCách nhanh nhất để bắt đầu với PyScript là tạo một tài liệu HTML5 tối thiểu, lưu nó vào một tệp cục bộ chẳng hạn như 4 và tận dụng hai tệp bắt buộc được lưu trữ trên trang chủ của PyScript
Tệp đầu tiên, 5, cung cấp kiểu dáng mặc định cho các thành phần trực quan của PyScript mà bạn sẽ khám phá sau, cũng như màn hình giật gân của trình tải. Tệp thứ hai, 6, chứa JavaScript khởi động thời gian chạy Python và thêm các phần tử tùy chỉnh như 1, có thể chứa các hướng dẫn Python, chẳng hạn như lệnh gọi hàm 8Với thiết lập này, bạn không cần khởi động máy chủ web để truy cập nội dung HTML của mình. Xem cho chính mình. Hãy tiếp tục, lưu tài liệu HTML đó vào tệp cục bộ và mở trực tiếp trong trình duyệt web yêu thích của bạn Xin chúc mừng. Bạn vừa tạo ứng dụng PyScript đầu tiên của mình, ứng dụng này sẽ hoạt động trên mọi trình duyệt web hiện đại, ngay cả trên Chromebook đời đầu mà không cần cài đặt trình thông dịch Python. Theo đúng nghĩa đen, bạn có thể sao chép tệp HTML của mình vào ổ USB và chuyển nó cho bạn bè và họ sẽ có thể chạy mã của bạn ngay cả khi họ không cài đặt Python trên máy của họ Ghi chú. PyScript chỉ được thử nghiệm trên Google Chrome. Thật không may, điều này có nghĩa là có thể có những khác biệt nhỏ trong hành vi mã của bạn trên các trình duyệt web khác nhau, điều chưa từng có trong quá trình phát triển Python truyền thống Tiếp theo, bạn sẽ biết điều gì vừa xảy ra khi bạn mở tệp đó trong trình duyệt web Loại bỏ các quảng cáoTìm nạp thời gian chạy Python từ InternetKhi bạn mở tệp HTML của mình trong trình duyệt web, sẽ mất vài giây để tải trước khi hiển thị Hello, World. trong cửa sổ. PyScript phải tìm nạp hàng chục tài nguyên bổ sung từ jsDelivr CDN, Mạng phân phối nội dung miễn phí của JavaScript dành cho các dự án nguồn mở. Những tài nguyên đó bao gồm thời gian chạy Pyodide, nặng tổng cộng hơn 20 megabyte khi không nén May mắn thay, trình duyệt của bạn sẽ lưu trữ hầu hết các tài nguyên đó trong bộ nhớ hoặc trên đĩa để trong tương lai, thời gian tải sẽ nhanh hơn đáng kể. Bạn cũng có thể làm việc ngoại tuyến mà không phụ thuộc vào kết nối Internet của mình miễn là bạn đã mở tệp HTML của mình ít nhất một lần Việc dựa vào CDN để phân phối các phụ thuộc của bạn chắc chắn là thuận tiện, nhưng đôi khi nó có thể dễ vỡ. Trước đây đã có trường hợp CDN ngừng hoạt động, gây ra sự ngừng hoạt động của các doanh nghiệp trực tuyến lớn. Vì PyScript đang trên đà phát triển, CDN luôn phục vụ bản dựng alpha mới nhất, điều này đôi khi có thể mang lại thay đổi lớn. Ngược lại, CDN đôi khi có thể cần thời gian để theo kịp GitHub, do đó, nó có thể đang phục vụ mã lỗi thời Sẽ không tốt hơn nếu luôn yêu cầu một phiên bản cụ thể của PyScript phải không? Tải xuống PyScript để phát triển ngoại tuyếnNếu bạn không muốn dựa vào dịch vụ lưu trữ của PyScript, thì bạn sẽ cần tải xuống tất cả các tệp cần thiết để chạy Python trong trình duyệt và tự lưu trữ chúng. Đối với mục đích phát triển, bạn có thể khởi động máy chủ HTTP cục bộ được tích hợp ngay trong Python bằng cách đưa ra lệnh sau trong thư mục chứa các tệp của bạn để lưu trữ
0Theo mặc định, nó sẽ khởi động một máy chủ lắng nghe các yêu cầu HTTP trên tất cả các giao diện mạng, bao gồm cả máy chủ cục bộ và số cổng 8000. Bạn có thể điều chỉnh cả địa chỉ và số cổng bằng các đối số tùy chọn nếu cần. Điều này sẽ cho phép bạn truy cập ứng dụng PyScript của mình tại 9 chẳng hạnTuy nhiên, trước khi bạn có thể làm điều đó, bạn cần tải xuống 5, 6 và 42 vào một thư mục chứa tài liệu HTML của bạn. Để làm như vậy, bạn có thể sử dụng công cụ dòng lệnh Wget, tương đương với nó trong PowerShell trên Windows hoặc tải xuống các tệp theo cách thủ công
5 6Điều này sẽ tải xuống cả ba tệp trong một lần. Mô-đun Python của trình trợ giúp chứa mã keo cần thiết cho PyScript và Pyodide. Bạn cần tải xuống 42 vì tập lệnh bootstrap sẽ cố tìm nạp nó từ địa chỉ miền của chính nó, đây sẽ là địa chỉ máy chủ cục bộ của bạnGhi chú. Ngoài ra, bạn có thể lấy phiên bản rút gọn của tập lệnh bootstrap bằng bản đồ nguồn tùy chọn để giảm kích thước tải xuống hơn nữa. Bản đồ nguồn có thể cho phép bạn khôi phục mã nguồn từ dạng rút gọn của nó, điều này rất hữu ích trong quá trình gỡ lỗi Đừng quên cập nhật các đường dẫn CSS và JavaScript trong HTML của bạn để chúng trỏ đến các tệp cục bộ thay vì các tệp được lưu trữ trực tuyến 8Tại đây, bạn giả định vị trí của các tệp tài nguyên đó bên cạnh tệp HTML của mình, nhưng bạn cũng có thể tạo một hoặc nhiều thư mục con cho các nội dung đó để sắp xếp mọi thứ Bạn đã gần tới. Tuy nhiên, nếu bạn điều hướng trình duyệt của mình đến máy chủ cục bộ ngay bây giờ, thì trình duyệt vẫn sẽ cố gắng tìm nạp một số tài nguyên từ CDN chứ không phải máy chủ HTTP cục bộ của bạn. Bạn sẽ khắc phục điều đó trong phần tiếp theo Tải xuống bản phát hành Pyodide cụ thểBây giờ bạn đã làm cho PyScript hoạt động ngoại tuyến, đã đến lúc thực hiện theo các bước tương tự cho Pyodide. Trong những ngày đầu tiên của PyScript, URL có Pyodide được mã hóa cứng, nhưng các nhà phát triển gần đây đã giới thiệu một yếu tố tùy chỉnh khác có tên là 44, cho phép bạn chỉ định một URL có phiên bản Pyodide mong muốn 0Nội dung bên trong thẻ tùy chọn này là một phần của cấu hình YAML. Bạn có thể sử dụng thuộc tính 45 để cung cấp URL có phiên bản Pyodide cụ thể được lưu trữ trực tuyến hoặc tệp cục bộ mà bạn sẽ tải xuống sau giây lát. Trong khối mã ở trên, 46 chỉ ra một đường dẫn liên quan đến địa chỉ gốc của máy chủ HTTP cục bộ của bạn, ví dụ: địa chỉ này sẽ mở rộng thành 47Để có danh sách cập nhật các tệp còn lại mà trình duyệt của bạn sẽ tải xuống từ CDN hoặc tải từ bộ đệm của nó, bạn có thể truy cập các công cụ phát triển web và chuyển sang tab Mạng trước khi làm mới trang. Tuy nhiên, rất có thể là cuối cùng bạn sẽ cần thêm một số tệp hoặc tên của chúng có thể thay đổi trong tương lai, vì vậy việc kiểm tra lưu lượng mạng sẽ nhanh chóng trở nên phiền toái. Vì mục đích phát triển, có thể thuận tiện hơn khi tải xuống tất cả các tệp của bản phát hành Pyodide và sau đó quyết định xem ứng dụng của bạn thực sự cần những tệp nào trong số đó. Vì vậy, nếu bạn không ngại tải xuống vài trăm megabyte, thì hãy lấy bản phát hành tarball từ GitHub và giải nén nó vào thư mục của ứng dụng 3 của bạn
4Đừng lo lắng nếu các lệnh trên không hoạt động trên hệ điều hành của bạn. Bạn có thể tải xuống kho lưu trữ và trích xuất nội dung của thư mục con 49 theo cách thủ côngGhi chú. Bản phát hành tarball của Pyodide quá lớn vì nó bao gồm nhiều thư viện phổ biến của bên thứ ba, đặc biệt hữu ích trong khoa học dữ liệu, được biên dịch trước cho WebAssugging Miễn là mọi thứ suôn sẻ, bạn nên có ít nhất mười bốn tệp này trong thư mục ứng dụng của mình 8Như bạn có thể thấy, PyScript là sự kết hợp của Python, JavaScript, WebAssembly, CSS và HTML. Trên thực tế, bạn sẽ thực hiện phần lớn lập trình PyScript của mình bằng Python Cách tiếp cận mà bạn đã thực hiện trong phần này cho phép bạn kiểm soát chi tiết hơn nhiều đối với các phiên bản của Pyodide và trình thông dịch Python cơ bản. Để kiểm tra phiên bản Python nào có sẵn thông qua Pyodide, bạn có thể xem nhật ký thay đổi. Ví dụ, Pyodide 0. 20. 0, được sử dụng trong hướng dẫn này, được xây dựng trên CPython 3. 10. 2 Khi nghi ngờ, bạn luôn có thể tự xác minh phiên bản Python đang chạy trong trình duyệt của mình, khi bạn tìm hiểu tiếp theo Loại bỏ các quảng cáoXác minh phiên bản Python và Python của bạnĐể kiểm tra phiên bản Pyodide của bạn, tất cả những gì bạn cần là một dòng mã. Quay lại trình chỉnh sửa mã của bạn và thay thế mã 3 bằng đoạn mã sau 0Nó dựa trên mô-đun 81, được tự động đưa vào PyScript. Bạn có thể sử dụng nó để truy cập API JavaScript của Pyodide trực tiếp từ Python trong trường hợp PyScript không cung cấp lớp trừu tượng của riêng nó cho một tính năng nhất địnhKiểm tra phiên bản Python của bạn trong PyScript trông giống như trong trình thông dịch CPython tiêu chuẩn 1Bạn nhập mô-đun 82 từ thư viện chuẩn để kiểm tra hằng số 83 rồi in ra bằng chuỗi f. Khi bạn làm mới trang trong trình duyệt web và để nó tải lại, thì nó sẽ tạo ra một chuỗi bắt đầu bằng thứ gì đó như thế này
Đó là những gì bạn thường thấy khi chạy trình thông dịch Python tương tác trong dòng lệnh. Trong trường hợp này, Pyodide không thua xa bản phát hành CPython mới nhất, đó là 3. 10. 4 tại thời điểm viết hướng dẫn này Nhân tiện, bạn có để ý dấu chấm phẩy ( 84) trong các ví dụ trên không? Việc sử dụng dấu chấm phẩy trong mã Python là rất hiếm và thường bị các Pythonistas dày dạn kinh nghiệm phản đối. Tuy nhiên, biểu tượng không phổ biến này giúp khắc phục sự cố với khoảng trắng quan trọng của Python, điều này đôi khi có thể trở nên lộn xộn trong PyScript. Trong phần tiếp theo, bạn sẽ tìm hiểu cách xử lý thụt lề khối và định dạng mã Python được nhúng trong HTML Xử lý định dạng mã PythonKhi bạn nhúng một đoạn CSS, JavaScript hoặc thậm chí là hình ảnh SVG vào tài liệu HTML, sẽ không có nguy cơ trình duyệt web hiểu sai mã được liên kết của chúng, bởi vì chúng đều là ví dụ về ngôn ngữ dạng tự do, bỏ qua khoảng trắng thừa. Bạn có thể định dạng mã của mình theo bất kỳ cách nào bạn muốn bằng các ngôn ngữ đó—ví dụ: bằng cách xóa dấu ngắt dòng—mà không làm mất bất kỳ thông tin nào. Đó là điều làm cho việc rút gọn JavaScript trở nên khả thi Thật không may, điều này không đúng với Python, nó tuân theo quy tắc bên lề cho cú pháp của nó, trong đó mọi ký tự khoảng trắng đều được tính. Vì PyScript là một công nghệ mới lạ nên hầu hết các trình định dạng mã tự động ngày nay có thể sẽ đưa ra các giả định sai và phá hủy mã Python của bạn có trong thẻ 1 bằng cách thu gọn khoảng trắng quan trọng. Nếu điều đó xảy ra, bạn có thể gặp lỗi tương tự như lỗi này 2Trong trường hợp này, Pyodide không thể phân tích cú pháp đoạn mã Python của bạn, được nhúng trong HTML, do một vết thụt đầu dòng bị hỏng. Bạn sẽ thấy ngoại lệ này và truy nguyên được liên kết trong phần nội dung của tài liệu cũng như trong bảng điều khiển dành cho nhà phát triển web Nhưng đó không phải là tất cả. Nếu bạn khai báo một chuỗi ký tự trong mã Python trông giống như một thẻ HTML, thì trình duyệt sẽ nhận ra nó là một 87 và loại bỏ nó, chỉ để lại văn bản bên trong. Xem xét phân tích cú pháp XML làm ví dụ 3Đoạn mã trên sử dụng API ElementTree từ thư viện chuẩn của Python để phân tích cú pháp một chuỗi chứa bản ghi dữ liệu có định dạng XML về một người. Tuy nhiên, tham số thực sự được truyền vào hàm sẽ chỉ là 88 mà không có các thẻ xung quanhLưu ý rằng từ quan điểm của trình duyệt web, 89 trông giống như một thẻ HTML khác được lồng dưới phần tử cha 1. Để tránh sự mơ hồ như vậy, bạn có thể thay thế các dấu ngoặc nhọn ( 01 và 02) bằng các đối tượng được mã hóa của chúng được gọi là các thực thể HTML 4Thực thể 03 là viết tắt của ký tự “nhỏ hơn” ( 01), trong khi đó, 05 thay thế cho ký tự “lớn hơn” ( 02). Các thực thể ký tự cho phép trình duyệt hiển thị văn bản theo nghĩa đen, nếu không nó sẽ được hiểu là các phần tử HTML. Điều này hoạt động trong PyScript, nhưng nó không giải quyết được vấn đề thụt lềGhi chú. Trong các tài liệu XML, bạn có thể bọc nội dung của mình trong một cặp dấu dữ liệu ký tự (CDATA) thay thế cho việc sử dụng các thực thể HTML. Thật không may, hầu hết các trình phân tích cú pháp HTML đều bỏ qua CDATA Trừ khi bạn chỉ chơi đùa với PyScript, nếu không thì tốt hơn hết là bạn nên trích xuất mã Python của mình thành một tệp riêng biệt thay vì trộn nó với HTML. Bạn có thể làm như vậy bằng cách chỉ định thuộc tính tùy chọn 45 trên phần tử 1, thuộc tính này trông tương tự như thẻ 09 tiêu chuẩn dành cho JavaScript 5Điều này sẽ tải và ngay lập tức chạy tập lệnh Python của bạn ngay khi trang sẵn sàng. Nếu bạn chỉ muốn tải một mô-đun tùy chỉnh vào thời gian chạy PyScript để sẵn sàng nhập mô-đun đó, thì hãy xem phần quản lý phụ thuộc với 10 trong phần tiếp theoGhi chú. Do chính sách chia sẻ tài nguyên nguồn gốc chéo (CORS) được thực thi bởi trình duyệt web, bạn sẽ không thể tải tập lệnh Python từ tệp bên ngoài khi bạn mở trang dưới dạng tệp cục bộ. Bạn sẽ cần lưu trữ HTML với các tài nguyên được liên kết thông qua máy chủ web, chẳng hạn như 11 tích hợp sẵn của Python đã đề cập trước đóBạn có thể có nhiều thẻ 1 trên trang của mình miễn là chúng xuất hiện trong 13 hoặc 14 của trang. PyScript sẽ đặt chúng vào hàng đợi và chạy chúng theo trình tựBây giờ bạn đã biết cách chạy mã Python của mình trong trình duyệt bằng PyScript. Tuy nhiên, hầu hết các ứng dụng thực tế yêu cầu một hoặc nhiều phụ thuộc. Trong phần tiếp theo, bạn sẽ tìm hiểu cách tận dụng "pin" hiện có của Python, các thư viện bên thứ ba được xuất bản trên PyPI hoặc nơi khác và các mô-đun Python của riêng bạn Loại bỏ các quảng cáoQuản lý phụ thuộc Python trong PyScriptCho đến giờ, bạn đã thấy các thẻ tùy chỉnh 1 và 44 do khung cung cấp. Một yếu tố khác mà bạn thường muốn sử dụng là 10, giúp quản lý các phụ thuộc dự án của bạn, tương tự như công cụ 18 của PythonCác mô-đun bị thiếu trong Thư viện chuẩn PythonPython đi kèm với pin, điều đó có nghĩa là nhiều mô-đun thư viện tiêu chuẩn của nó đã giải quyết các vấn đề phổ biến mà bạn có thể gặp phải trong quá trình phát triển phần mềm. Bạn sẽ thấy rằng hầu hết các mô-đun này đều có sẵn trong Pyodide và PyScript, cho phép bạn nhập và sử dụng chúng ngay lập tức. Chẳng hạn, bạn đã thấy một đoạn mã tận dụng gói 19 để phân tích một tài liệu XMLTuy nhiên, có một số trường hợp ngoại lệ đáng chú ý do hạn chế của trình duyệt web và nỗ lực giảm kích thước tải xuống. Mọi thứ không liên quan đến môi trường trình duyệt đã bị xóa khỏi bản phát hành Pyodide hiện tại. Cụ thể, chúng bao gồm nhưng không giới hạn ở các mô-đun và gói sau
Bạn có thể kiểm tra danh sách đầy đủ các gói đã bị xóa trên trang tài liệu của Pyodide Ngoài ra, một số gói được giữ dưới dạng trình giữ chỗ, cuối cùng có thể nhận được hỗ trợ thích hợp khi WebAssugging phát triển trong tương lai. Ngày nay, bạn có thể nhập chúng, cũng như các mô-đun như 23 phụ thuộc vào chúng, nhưng chúng sẽ không hoạt động
Nói chung, bạn không thể bắt đầu các quy trình, luồng mới hoặc mở các kết nối mạng cấp thấp. Điều đó đang được nói, bạn sẽ tìm hiểu về một số giảm thiểu sau trong hướng dẫn này Còn việc sử dụng các thư viện bên ngoài trong PyScript mà bạn thường cài đặt bằng pip vào môi trường ảo của mình thì sao? Thư viện của bên thứ ba đi kèm với PyodidePyodide là một dự án phụ của dự án mẹ Iodide hiện đã ngừng hoạt động do Mozilla khởi xướng. Mục tiêu của nó là cung cấp các công cụ để thực hiện tính toán khoa học trong trình duyệt web theo cách tương tự như Máy tính xách tay Jupyter nhưng không cần giao tiếp với máy chủ để chạy mã Python. Kết quả là, các nhà nghiên cứu sẽ có thể chia sẻ và sử dụng lại công việc của họ dễ dàng hơn với mức giá của sức mạnh tính toán hạn chế Vì PyScript là một trình bao bọc xung quanh Pyodide, nên bạn có thể truy cập một số thư viện phổ biến của bên thứ ba đã được biên dịch cho WebAssugging bằng Pyodide, ngay cả những thư viện có các phần được viết bằng C và Fortran. Chẳng hạn, bạn sẽ tìm thấy các gói sau ở đó
Danh sách thực tế dài hơn nhiều và không giới hạn ở các thư viện được thiết kế nghiêm ngặt cho khoa học dữ liệu. Có gần một trăm thư viện đi kèm với Pyodide tại thời điểm viết hướng dẫn này. Bạn có thể kiểm tra tài liệu chính thức của Pyodide để biết danh sách đầy đủ hoặc truy cập thư mục packages/trong kho lưu trữ GitHub tương ứng để xem trạng thái mới nhất Mặc dù các thư viện bên ngoài này là một phần của bản phát hành Pyodide, nhưng chúng không tự động được tải vào thời gian chạy Python của bạn. Hãy nhớ rằng mỗi mô-đun Python riêng lẻ phải được tìm nạp qua mạng vào trình duyệt web của bạn, việc này sẽ tốn thời gian và tài nguyên quý giá. Khi PyScript bắt đầu, môi trường của bạn chỉ có mức tối thiểu cần thiết để diễn giải mã Python Để nhập các mô-đun không có trong thư viện chuẩn Python, bạn phải yêu cầu chúng một cách rõ ràng bằng cách khai báo tên của chúng trong phần tử 10 6Phần tử 10 chứa danh sách YAML với tên của các thư viện để tìm nạp theo yêu cầu. Khi bạn nhìn vào tab Mạng trong các công cụ phát triển web của mình, bạn sẽ nhận thấy rằng trình duyệt tải xuống NumPy và Matplotlib từ máy chủ CDN hoặc máy chủ HTTP cục bộ của bạn lưu trữ Pyodide. Nó cũng kéo một số phụ thuộc bắc cầu theo yêu cầu của Matplotlib, có kích thước lên tới hơn 12 megabyteGhi chú. Bạn có thể đặt phần tử 10 trong phần đầu hoặc phần thân của tài liệu. Mặc dù một số ví dụ có trong PyScript đặt phần tử tùy chỉnh này giữa phần đầu và phần thân, nhưng nó có vẻ không chính xác và có thể không hoạt động trong tất cả các trình duyệt webNgoài ra, bạn có thể cài đặt các phụ thuộc theo chương trình trong Python, vì PyScript hiển thị công cụ micropip của Pyodide, đây là phiên bản được sắp xếp hợp lý của 18 7Mô-đun 31 và biến 32 ẩn, đại diện cho vòng lặp sự kiện không đồng bộ mặc định, có sẵn trong không gian tên chung trong PyScript mà không cần nhập chúngLưu ý rằng bạn phải gọi phương thức 33 của mô-đun một cách không đồng bộ thông qua gói asyncio của Python để móc vào API Tìm nạp của trình duyệt web được sử dụng bởi micropip. Ngoài ra, mặc dù hướng dẫn về kiểu nhập khuyên bạn nên đặt các câu lệnh 34 ở đầu tệp, nhưng chúng phải đặt sau câu lệnh 35 ở đây để đảm bảo rằng các thư viện cần thiết đã được micropip tìm nạp và cài đặt trướcGhi chú. Nếu từ 36 xuất hiện ở bất kỳ đâu trong mã của bạn, kể cả trong nhận xét, thì PyScript sẽ chạy Python không đồng bộ bằng cách sử dụng phương thức 37 của Pyodide. Nếu không, nó sẽ gọi đối tác đồng bộ ________ 938, không cho phép bạn sử dụng từ khóa ________ 935Nếu Pyodide không tìm thấy thư viện cần thiết trong các gói đi kèm của nó, thì nó sẽ cố tải xuống từ Chỉ mục gói Python (PyPI). Tuy nhiên, không phải tất cả các thư viện đều hoạt động theo cách đó do một số hạn chế về thời gian chạy nhất định Loại bỏ các quảng cáoBánh xe Python thuần túy được tải xuống từ PyPIGiả sử bạn muốn tạo một ứng dụng PyScript phân tích cú pháp XML bằng cách sử dụng thư viện gỡ rối, thư viện này không đi kèm với Pyodide cũng như không được phân phối cùng với thư viện chuẩn. Bạn thêm phần khai báo sau vào phần tử 10 và tải lại trang của bạn trong trình duyệt 8Pyodide liên hệ với PyPI để tìm nạp siêu dữ liệu JSON được liên kết và kết luận rằng thư viện không được xây dựng và tải lên với định dạng bánh xe Python dự kiến. Nó chỉ có sẵn dưới dạng phân phối nguồn (sdist), có thể yêu cầu một bước biên dịch bổ sung. Không thành vấn đề nếu thư viện chỉ chứa mã Python thuần túy. Trong trường hợp này, Pyodide mong đợi một kho lưu trữ bánh xe mà nó có thể trích xuất và bắt đầu sử dụng ngay lập tức Hơi thất vọng, bạn thử vận may với một thư viện phân tích cú pháp XML khác có tên là xmltodict, thư viện này chuyển đổi tài liệu thành từ điển Python chứ không phải đối tượng 9Lần này, siêu dữ liệu của thư viện chỉ ra rằng có một kho lưu trữ bánh xe Python thuần túy, vì vậy Pyodide tiếp tục và tìm nạp nó. Nếu thư viện có các phần phụ thuộc riêng, thì Pyodide cũng sẽ cố gắng tìm nạp chúng. Tuy nhiên, cơ chế giải quyết phụ thuộc được thực hiện trong micropip là vô cùng thô sơ. Từ giờ trở đi, thư viện 41 có thể nhập được trong ứng dụng PyScript của bạnTuy nhiên, nếu bạn đã thử tìm nạp một thư viện không thuần Python, chẳng hạn như trình điều khiển nhị phân cho cơ sở dữ liệu PostgreSQL, thì Pyodide sẽ từ chối tải nó vào thời gian chạy của bạn. Ngay cả khi nó được xây dựng dưới dạng bánh xe Python cho nhiều nền tảng khác nhau, thì không có cái nào trong số chúng phù hợp với WebAssugging. Bạn có thể xem các bánh xe được tải lên PyPI cho bất kỳ thư viện cụ thể nào bằng cách nhấp vào Tải xuống tệp trên trang tương ứng Ghi chú. Bạn có thể tùy chọn yêu cầu các gói từ các máy chủ từ xa không phải PyPI bằng cách cung cấp URL của chúng trong phần tử 10 miễn là chúng là bánh xe Python thuần túy 00Máy chủ lưu trữ các bánh xe như vậy phải được định cấu hình để trả về các tiêu đề CORS, chẳng hạn như 43. Nếu không, trình duyệt sẽ từ chối tìm nạp dữ liệu từ một nguồn gốc khác (giao thức, tên miền, số cổng) và chặn kết nối do chính sách bảo mật của nóNgoài ra, cơ chế giải quyết phụ thuộc sẽ không hoạt động đối với các URL tùy chỉnh như ở trên Tóm lại, thư viện của bên thứ ba được liệt kê trong 10 phải là thư viện thuần Python và được phân phối bằng định dạng bánh xe để được chọn, trừ khi thư viện đó đã được tạo cho WebAssembly và đi kèm với Pyodide. Đưa một thư viện Python không thuần túy tùy chỉnh vào PyScript rất khóCác mô-đun mở rộng C được biên dịch cho WebAssemblyNhiều thư viện Python chứa các đoạn mã được viết bằng C hoặc các ngôn ngữ khác để tăng hiệu suất và tận dụng các lệnh gọi hệ thống cụ thể không có sẵn trong Python thuần túy. Có một số cách để giao tiếp với mã như vậy, nhưng thực tế phổ biến là bọc nó trong mô-đun mở rộng Python C có thể được biên dịch thành mã gốc của nền tảng của bạn và được tải động khi chạy Sử dụng trình biên dịch emscripten cho phép bạn nhắm mục tiêu WebAssembly thay vì kiến trúc máy tính và hệ điều hành cụ thể. Tuy nhiên, làm được điều đó không phải là điều dễ dàng. Ngay cả khi bạn biết cách xây dựng một bánh xe Python cho thời gian chạy Pyodide và bạn không bị đe dọa bởi quy trình này, thẻ 10 của PyScript luôn mong đợi một bánh xe Python thuần túy hoặc một gói đi kèm với PyodideĐể cài đặt một bánh xe chứa mã WebAssugging, bạn có thể gọi hàm 46 của Pyodide bằng giao diện Python của nó, 81, đã đề cập trước đó. Bạn cũng có thể sử dụng trực tiếp API của Pyodide trong JavaScript, nhưng nó sẽ bắt đầu một thời gian chạy độc lập thay vì kết nối với một thời gian đã được tạo bởi PyScript. Do đó, mô-đun tùy chỉnh của bạn với mã WebAssugging sẽ không hiển thị trong PyScriptTải các mô-đun mở rộng C tùy chỉnh cuối cùng có thể trở nên đơn giản hơn. Cho đến lúc đó, đặt cược tốt nhất của bạn dường như là kiên nhẫn chờ đợi Pyodide gửi thư viện mong muốn. Ngoài ra, bạn có thể xây dựng thời gian chạy Pyodide của riêng mình từ mã nguồn với các thư viện được biên dịch chéo bổ sung. Có một công cụ dòng lệnh tên là 48, tự động hóa một số bước liên quanHiện tại, bạn có thể muốn gắn bó với các mô-đun Python tùy chỉnh được viết bằng tay Tệp dữ liệu và mô-đun Python tùy chỉnhBạn có thể sử dụng 10 hoặc micropip để làm cho các mô-đun tùy chỉnh của mình có thể nhập được trong các ứng dụng PyScript. Giả sử bạn đã tạo một mô-đun trợ giúp có tên là 50, nằm trong thư mục con 51 01Tên mô-đun của bạn sử dụng dạng số nhiều để tránh xung đột với mô-đun 52 trong thư viện chuẩn, được sử dụng để đọc và ghi Định dạng tệp âm thanh dạng sóng (WAV). Mô-đun của bạn định nghĩa một hàm gọi là 53, hàm này trả về một bao đóng. Hàm bên trong 54, dựa trên việc đóng cửa, sử dụng NumPy để tạo ra sóng hình sin thuần túy với tần số, biên độ và pha đã choTrước khi bạn có thể nhập mô-đun của mình trong thẻ 1, từ tập lệnh nội tuyến hoặc tập lệnh có nguồn gốc, bạn cần tìm nạp mô-đun đó vào trình duyệt web của mình bằng 10 bằng cách chỉ định thuộc tính 57 đặc biệt trong YAML 02Đường dẫn tệp có liên quan đến trang HTML của bạn. Như trước đây, bạn phải lưu trữ các tệp của mình thông qua máy chủ web do chính sách CORS không cho phép nhận các tệp bổ sung thông qua giao thức 58Ghi chú. Bạn không thể tải các gói Python bằng 57, chỉ các mô-đun. Nếu bạn có gói Python thuần túy, thì hãy xây dựng bản phân phối bánh xe và lưu trữ gói đó cùng với các tệp khác của bạn hoặc tải nó lên PyPIMặt khác, điều đáng chú ý là mặc dù bạn không thể tải một thư mục vào PyScript, nhưng bạn có thể lạm dụng thuộc tính 57 để tải hầu như bất kỳ tệp nào vào đó. Điều đó bao gồm các tệp dữ liệu như tệp CSV văn bản hoặc cơ sở dữ liệu SQLite nhị phân 03Lưu ý rằng khi bạn tìm nạp các tệp của mình bằng 10, thì bạn sẽ mất thông tin về cấu trúc thư mục ban đầu của chúng, vì tất cả các tệp đều nằm trong một thư mục đích duy nhất. Khi bạn mở một tệp, bạn chỉ chỉ định tên của nó mà không có đường dẫn, điều đó có nghĩa là các tệp của bạn phải được đặt tên duy nhất. Bạn sẽ học cách giảm thiểu vấn đề đó sau bằng cách ghi vào hệ thống tệp ảo trong Pyodideđược rồi. Bây giờ bạn đã biết cách lấy mã Python của mình hoặc của người khác vào PyScript, bạn nên học cách làm việc với khung hiệu quả hơn Loại bỏ các quảng cáoGiả lập Python REPL và Jupyter NotebookMột cách nhanh chóng và thú vị để học Python hoặc bất kỳ thư viện cơ bản nào của nó là dùng thử chúng trong phiên phiên dịch trực tiếp, còn được gọi là Vòng lặp Đọc-Eval-Print-Loop (REPL). Bằng cách tương tác với mã, bạn có thể khám phá những hàm và lớp nào có sẵn cũng như cách bạn phải sử dụng chúng. Nó không khác gì với PyScript Vì môi trường của PyScript mất một lúc để tải, nên việc làm mới trang mỗi khi bạn chỉnh sửa mã của mình sẽ không ảnh hưởng đến nó. May mắn thay, khung đi kèm với một yếu tố tùy chỉnh khác có tên là 62, cho phép bạn thực thi các đoạn mã nhỏ mà không cần tải lại trang. Bạn có thể có bao nhiêu trong số đó tùy thích trong HTML của mình, để trống hoặc điền trước chúng bằng một số mã Python ban đầu 04Không giống như các phần tử mà bạn đã khám phá, 62 có phần trình bày trực quan dựa trên trình chỉnh sửa CodeMirror, hỗ trợ đánh dấu cú pháp theo chủ đề, tự động hoàn thành, gấp mã, v.v. Miễn là bạn đã bao gồm biểu định kiểu CSS mặc định do PyScript cung cấp, phần tử mới này sẽ trông giống như thế này khi được hiển thị trong trình duyệtMỗi phiên bản của 62 giống như một ô trong Jupyter Notebook. Bạn có thể nhập nhiều dòng mã Python vào một ô và nhấp vào nút phát màu xanh lá cây ở góc dưới cùng bên phải để mã của bạn được thực thi. Bạn cũng có thể sử dụng tổ hợp phím Shift + Enter để đạt được kết quả tương tự. hiệu ứng. Dưới đây là một vài phím tắt bổ sung do CodeMirror cung cấp. ActionmacOSTìm kiếm trên Windows và Linux Cmd + FCtrl + F Chọn phạm vi Cmd + ICtrl + I Chọn dòng Ctrl + LAlt + L Xóa dòng Cmd + Shift + KCtrl + Shift + K Chèn dòng bên dưới Cmd + EnterCtrl + Enter Di chuyển lựa chọn lên Alt + LênAlt + Lên Di chuyển lựa chọn xuống Alt + XuốngAlt + Xuống Chuyển đến đối sánh ngoặc Cmd + Shift + \ Ctrl + Shift +\IndentCmd+]Ctrl+]DedentCmd+[Ctrl+[ Bảng trên minh họa sơ đồ bàn phím mặc định, có thể được điều chỉnh để bắt chước Emacs, Vim hoặc Sublime Text Nếu dòng cuối cùng trong ô của bạn chứa một biểu thức Python hợp lệ, thì PyScript sẽ nối biểu diễn của nó ngay bên dưới ô. Ví dụ: nó có thể hiển thị biểu đồ được vẽ bằng Matplotlib. Khi bạn xem một trang web như vậy trong trình duyệt, nó bắt đầu trông giống như một Jupyter Notebook Tuy nhiên, không giống như trong Jupyter Notebook, việc thực thi 62 sẽ không chèn ô mới theo mặc định. Nếu bạn muốn kích hoạt hành vi như vậy, hãy đặt thuộc tính 66 của phần tử thành true 05Bây giờ, khi bạn chạy mã trong một ô như vậy lần đầu tiên, nó sẽ chèn một mã khác vào cuối trang. Tuy nhiên, các lần chạy tiếp theo sẽ không. Ô mới này sẽ có thuộc tính 66Một hành vi mặc định khác của phần tử 62 là nối thêm các bộ chứa 69 mới cho đầu ra Python và truy nguyên. Bạn có thể tùy ý chuyển hướng đầu ra tiêu chuẩn và các luồng lỗi tiêu chuẩn thành các phần tử tùy chỉnh, riêng biệt trên trang, cho phép bạn thiết kế một môi trường giống như IDE trong trình duyệtĐây là mã của trang web được mô tả trong ảnh chụp màn hình ở trên 06Sử dụng các thuộc tính 70 và 71 để chỉ định ID phần tử đích tương ứng. Nếu bạn muốn kết hợp cả hai luồng và kết xuất chúng thành một phần tử duy nhất thì bạn có thể sử dụng thuộc tính 72 để thay thế. Các thuộc tính tương tự áp dụng cho phần tử 1 mà bạn đã thấy trước đóCác yếu tố còn lại hiện do PyScript cung cấp là các thành phần trực quan, còn được gọi là các widget, giúp đơn giản hóa việc làm việc với HTML và Python. Bạn sẽ khám phá chúng ngay bây giờ Khám phá các thành phần trực quan của PyScriptCác thành phần trực quan mà PyScript cung cấp là các hàm bao thuận tiện cho các phần tử HTML, điều này có thể hữu ích cho những người mới bắt đầu không có nhiều kinh nghiệm về phát triển web, đặc biệt là về phía máy khách. Tuy nhiên, những tiện ích đó mang tính thử nghiệm cao, có chức năng hạn chế và có thể bị xóa trong tương lai. Đôi khi, chúng tải quá nhanh, trước khi Pyodide được khởi chạy đầy đủ, gây ra lỗi. Sử dụng chúng có nguy cơ của riêng bạn Loại bỏ các quảng cáoPyTiêu đềVới phần tử PyTitle, bạn có thể nhanh chóng thêm tiêu đề văn bản vào trang web của mình, tiêu đề này sẽ xuất hiện bằng chữ in hoa và được căn giữa theo chiều ngang, miễn là bạn đã liên kết biểu định kiểu CSS mặc định đi kèm với PyScript. Đây là cách bạn có thể sử dụng tiện ích này trong mã HTML của mình 07Đó là một thành phần trực quan thuần túy không có thuộc tính hoặc hành vi bổ sung nào và nó sẽ chỉ chấp nhận nội dung văn bản thuần túy giữa các thẻ mở và thẻ đóng của nó PyBoxPyBox là một phần tử vùng chứa có thể sắp xếp các phần tử con của nó bằng cách sử dụng mô hình bố cục CSS Flexbox theo hướng nằm ngang. Nó hiện đang sử dụng các lớp độ rộng CSS của Tailwind, chẳng hạn như 74, 75 hoặc 76, để xác định độ rộng của cộtGhi chú. Vào thời điểm bạn đọc phần này, rất có thể Tailwind đã được thay thế bằng CSS thuần túy trong PyScript, vì vậy mã bên dưới có thể không hoạt động hoặc có thể cần một số chỉnh sửa. Động lực chính cho bước này là giảm kích thước tải xuống của các tài nguyên khác nhau Bạn có thể chỉ định độ rộng riêng của các phần tử con của mình thông qua thuộc tính 77 tùy chọn của phần tử cha 78 08Lưu ý rằng bạn chỉ cung cấp một phần của tên lớp CSS xuất hiện sau tiền tố 79 và bạn phân định độ rộng bằng dấu chấm phẩy ( 84). Trong ví dụ trên, 69 đầu tiên sẽ chiếm 2/3 không gian có sẵn trong hàng (⅔), trong khi hai phần tử còn lại cộng lại sẽ chiếm 1/3 (⅙ + ⅙ = ⅓). Nếu bạn bỏ qua thuộc tính 77 thì tất cả các phần tử con sẽ được kéo dài như nhau để có cùng kích thướcPyButtonPyButton là tiện ích tương tác đầu tiên trong PyScript cho phép bạn gọi hàm Python để phản hồi hành động của người dùng, chẳng hạn như nhấp vào nút chuột. Để xử lý sự kiện nhấp chuột của JavaScript, hãy xác định hàm nội tuyến có tên 83 bên trong phần tử 2 của bạn 09Hàm này là một cuộc gọi lại nhận một đối tượng PointerEvent và không trả về gì cả. Mặc dù không thể đính kèm một cuộc gọi lại được xác định ở nơi khác, nhưng bạn luôn có thể ủy quyền cho một số chức năng của trình trợ giúp. Nếu bạn không thích giao diện mặc định của PyButton, thì bạn có thể ghi đè lên nó bằng một hoặc nhiều lớp CSS thông qua thuộc tính 85Một sự kiện khác mà PyButton hỗ trợ là sự kiện tiêu điểm, bạn có thể nghe sự kiện này bằng cách xác định hàm 86. Nó sẽ nhận đối tượng FocusEvent làm đối sốĐáng buồn thay, do tốc độ phát triển nhanh chóng của PyScript và Pyodide, phần sau đã đưa ra một thay đổi đột phá trong phiên bản 0. 19 bằng cách khắc phục sự cố rò rỉ bộ nhớ khiến PyButton ngừng hoạt động một cách bất ngờ. Vấn đề tương tự cũng xảy ra với PyInputBox mà bạn sẽ tìm hiểu trong phần tiếp theo. Hy vọng rằng cả hai vật dụng sẽ được sửa chữa vào thời điểm bạn đọc bài viết này PyInputBoxPyInputBox là tiện ích cuối cùng hiện có trong PyScript và nó bao bọc phần tử đầu vào của HTML và cho phép bạn nghe sự kiện nhấn phím trên đó 50Lưu ý rằng sự kiện nhấn phím không được dùng để thay thế cho sự kiện nhấn phím mà PyInputBox chưa hỗ trợ. Do đó, bạn có thể thấy ít rườm rà hơn khi truy cập và thao tác các phần tử HTML tiêu chuẩn trực tiếp từ PyScript mà không có các lớp trừu tượng bổ sung có thể bị hỏng Loại bỏ các quảng cáoSử dụng PyScript để tìm và thao tác các phần tử HTMLWebAssugging hiện không cho phép tương tác trực tiếp với Mô hình đối tượng tài liệu (DOM), mô hình này thường cung cấp cho bạn quyền truy cập vào các thành phần cơ bản của HTML. Thay vào đó, bạn phải sử dụng JavaScript để truy vấn và duyệt qua cây DOM. Có thể truy cập các đối tượng JavaScript trong Python nhờ các đối tượng proxy của Pyodide, tạo điều kiện thuận lợi cho việc dịch giữa cả hai ngôn ngữ. Có hai cách để sử dụng chúng cho thao tác DOM trong PyScript Bộ điều hợp của PyScript cho Proxy JavaScriptĐối với các trường hợp sử dụng tầm thường, khi bạn đang vội và không bận tâm đến việc thiếu chuông và còi bổ sung, bạn có thể dùng thử lớp 87 của PyScript. Nó đã có trong không gian tên chung của bạn, nghĩa là bạn không cần phải nhập nó. Lớp cho phép bạn tìm các phần tử HTML chỉ bằng ID và sửa đổi nội dung của chúng ở một mức độ hạn chếXem xét tài liệu HTML mẫu sau 51Đó là một danh sách mua sắm với một số mặt hàng bị gạch bỏ và một ô nhập liệu ở dưới cùng để thêm các mặt hàng mới cần mua. Phần tử 62 sẽ cho phép bạn kiểm tra và thử nghiệm với API PyScript một cách tương tác khi bạn mở trang này trong trình duyệt web của mìnhGiả sử bạn muốn xác định mặt hàng mua sắm mới nào mà người dùng đã nhập vào hộp nhập liệu đó, sau đó bạn muốn xóa mặt hàng đó. Đây là một đoạn mã Python thực hiện điều đó khi được đặt trong thẻ 1 hoặc 62 52Đầu tiên, bạn lấy một tham chiếu đến phần tử 91 bằng cách gọi phương thức khởi tạo của lớp 92 với thuộc tính 93 của HTML là 94 làm đối số. Sau đó, bạn in thuộc tính phần tử ________ 995 và gọi _______ 996 để đặt lại giá trị của nó. Bạn sẽ cần nhập nội dung nào đó vào hộp nhập liệu trước khi xem bất kỳ kết quả nàoLớp 87 có các thuộc tính có giá trị khác, thuộc tính chỉ đọc và một số phương thức mà bạn có thể gọi để thay đổi kiểu hoặc trạng thái của phần tửMô tả thành viên 98Một đối tượng proxy cho phần tử HTML của JavaScript 99Giá trị chuỗi của thuộc tính 93 của phần tử HTML nếu nó tồn tại 95Giá trị chuỗi của thuộc tính 95 của phần tử HTML nếu nó tồn tại 003Thêm một hoặc nhiều lớp CSS 004Xóa một hoặc nhiều lớp CSS 005Cập nhật thuộc tính 006 hoặc thêm một phần tử 69 hoàn toàn mới 96Xóa Thuộc tính 95 hoặc 006_______1011Sao chép phần tử và chèn bản sao sâu của nó vào cây DOM 012Tìm phần tử con ____ ____1011 bằng cách sử dụng bộ chọn CSSBất cứ lúc nào, bạn có thể đi sâu vào proxy 014 thực tế được bao bọc bởi PyScript thông qua thuộc tính 98. Phương thức 012 là một phương thức thú vị vì nó cho phép bạn tìm thấy một phần tử hậu duệ được lồng trong phần tử bộ chứa của bạn bằng cách sử dụng bất kỳ bộ chọn CSS nào chứ không chỉ một ID thuần túy. Ví dụ: bạn có thể tìm mục danh sách bị gạch chéo đầu tiên và xóa lớp CSS 017 khỏi mục đó trong khi thêm mục đó vào thành phần cuối cùng trong danh sách đó 53Khi bạn chạy đoạn mã này thông qua REPL PyScript của mình, thì sữa sẽ không còn bị gạch bỏ nữa, nhưng bánh mì sẽ bị. Lần sau khi bạn chạy nó, những quả trứng cũng sẽ trở nên không được cắt chéo Ghi chú. Việc học cú pháp bộ chọn CSS đôi khi có thể gây khó chịu, nhưng không nhất thiết phải như vậy. Cách tốt nhất để thành thạo nó là luyện tập và nhận phản hồi trực quan nhanh chóng. Có rất nhiều trò chơi thú vị và tương tác sẽ đưa bạn qua quy trình theo từng bước nhỏ. Một yêu thích là CSS Diner, theo chủ đề ẩm thực Đó là tất cả những gì bạn có thể làm với lớp 87 của PyScript. Để có quyền kiểm soát cuối cùng đối với cây DOM và thiết bị của bạn, bạn sẽ muốn tiếp cận chính đối tượng proxyProxy JavaScript PyodideBắt đầu bằng cách nhập mô-đun 019 do Pyodide cung cấp vào mã PyScript của bạn 54Mô-đun này mở không gian tên chung của JavaScript lên, hiển thị các hàm và biến của bạn, cũng như các đối tượng được trình duyệt web cung cấp ngầm. Chúng bao gồm các đối tượng 020 và 021, cũng như kiểu dữ liệu 014 mà bạn sẽ quan tâm nhất khi thao tác với DOMLưu ý rằng PyScript đã nhập một vài thứ từ mô-đun 019 vào không gian tên chung trong Python để thuận tiện cho bạn. Đặc biệt, các đối tượng 024 và 021 đã có 55Bạn không cần phải tự nhập chúng hoặc thêm tiền tố vào tên của chúng bằng mô-đun 019 nữa, điều này làm cho Python trông rất giống JavaScript khi bạn nheo mắtĐược rồi, còn việc thêm các mặt hàng mới vào danh sách mua sắm từ phần trước, dựa trên giá trị của hộp đầu vào thì sao? 56Điều này sẽ trông quen thuộc với bất kỳ ai đã xây dựng giao diện người dùng web bằng JavaScript thuần túy trước đây. Bạn truy vấn toàn bộ tài liệu HTML cho phần tử 91 bằng bộ chọn CSS. Nếu người dùng đã nhập một số giá trị vào hộp nhập đó, thì bạn tạo một phần tử mục danh sách mới ( 028) và điền nó bằng thuộc tính 029. Tiếp theo, bạn tìm phần tử cha 030 và nối thêm phần tử con. Cuối cùng, bạn xóa ô nhập liệuGhi chú. Mọi người thường gọi JavaScript thuần túy là JavaScript vanilla. Thuật ngữ này được đặt ra bởi Eric Wastl, người tạo ra Advent of Code, người đã bắt đầu trang web Vanilla JS như một trò đùa để nhấn mạnh rằng bạn không cần một framework như React để tạo các ứng dụng front-end Bạn có thể điên hơn nữa khi sử dụng đối tượng 021 trong PyScript. Chẳng hạn, có thể viết mã trông giống như sự kết hợp giữa Python và JavaScript bằng cách kết hợp các API của cả hai 57Trong trường hợp này, bạn nhập một vài hàm từ thư viện chuẩn Python để tạo các giá trị ngẫu nhiên và bạn cũng tận dụng cú pháp Python, chẳng hạn, để lặp qua một mảng JavaScript được bao bọc trong một đối tượng proxy. Vòng lặp đi qua các mục trong danh sách mua sắm, chỉ định một cách có điều kiện một mức giá ngẫu nhiên cho từng mục, chuyển đổi lớp CSS của chúng và chọn một màu nền ngẫu nhiên API DOM được trình duyệt web hiển thị quá phong phú để phù hợp với hướng dẫn này, nhưng vui lòng mở rộng phần có thể thu gọn bên dưới để tham khảo nhanh các thuộc tính và phương thức quan trọng nhất của lớp 014Tham khảo nhanh HTMLElementHiển thị/Ẩn Mỗi phần tử HTML có các thuộc tính sau trong JavaScript AttributeDescription 033Một đối tượng dạng danh sách có tên lớp CSS của phần tử 034Một chuỗi có giá trị thuộc tính 035 của phần tử 036Một đối tượng giống từ điển với các cặp khóa-giá trị tùy chỉnh 006Một chuỗi có nội dung HTML nằm giữa thẻ mở và thẻ đóng 029Một chuỗi có nội dung văn bản nằm giữa thẻ mở và thẻ đóng 039Một đối tượng chứa các khai báo kiểu CSS 040 Tên viết hoa của thẻ phần tử HTMLHầu hết các thuộc tính này hỗ trợ đọc và viết. Ngoài chúng, bạn cũng sẽ tìm thấy các thuộc tính liên quan đến quá trình duyệt cây DOM so với phần tử hiện tại Thuộc tínhMô tả 041Cha mẹ của phần tử này 042Một đối tượng dạng danh sách của các phần tử con ngay lập tức 043Phần tử con đầu tiên 044Phần tử con cuối cùng 045Phần tử tiếp theo trên cùng cấp độ cây 046Phần tử trước đó trên cùng cấp độ câyĐể thao tác các thuộc tính chung không được liệt kê ở đây, bạn có thể gọi các phương thức sau trên một phần tử MethodDescription 047Kiểm tra xem phần tử có một thuộc tính đã cho 048Trả về giá trị của một thuộc tính đã cho 049Gán hoặc ghi đè giá trị của một thuộc tính 050Xóa một thuộc tính khỏi phần tửSau khi bạn có một đối tượng tham chiếu đến một phần tử, bạn có thể muốn thu hẹp không gian tìm kiếm bằng cách tra cứu phần tử con của nó bằng bộ chọn CSS trong khi bỏ qua phần còn lại của các nhánh trong tài liệu Phương thứcMô tả 051Trả về phần tử lồng nhau khớp với bộ chọn CSS đã cho 052Trả về đối tượng dạng danh sách gồm các phần tử lồng nhau khớp với bộ chọn CSS đã choHai phương thức này hoạt động giống như các đối tác của chúng trong đối tượng 021. Ngoài ra, bạn sẽ có thể sửa đổi cấu trúc cây DOM của mình bằng các phương thức hữu ích sauPhương thứcMô tả 054Tạo một bản sao nông hoặc sâu của phần tử 055Thêm phần tử mới làm phần tử con cuối cùng 056Chèn phần tử mới trước phần tử con đã chỉ định 057Xóa phần tử con đã cho 058Thay thế phần tử con đã cho bằng phần tử khácCuối cùng, bạn sẽ muốn thêm các hành vi vào phần tử của mình bằng cách làm cho phần tử phản hồi các sự kiện DOM, thường do hành động của người dùng gây ra MethodDescription 059Đăng ký gọi lại cho một loại sự kiện nhất định 060Hủy đăng ký gọi lại cho một loại sự kiện nhất địnhĐể sử dụng chúng, bạn sẽ cần biết về cách tạo các hàm gọi lại trong PyScript, bạn sẽ tìm hiểu điều này trong phần tiếp theo Để làm cho danh sách mua sắm có thể sử dụng được, nó cần phải tương tác. Nhưng làm cách nào để bạn xử lý các sự kiện DOM, chẳng hạn như nhấp chuột, trong PyScript? Loại bỏ các quảng cáoProxy gọi lại sự kiện PythonBạn đã viết mã để tạo mục danh sách mới dựa trên giá trị từ hộp nhập liệu. Tuy nhiên, nó không bị ràng buộc với bất kỳ thành phần trực quan nào trên trang, vì bạn phải chạy nó theo cách thủ công thông qua phần tử 62. Sẽ thật tuyệt nếu nhấp vào nút Thêm sẽ kích hoạt mã đó cho bạnTrước tiên, bạn sẽ cần đóng gói mã hiện có của mình trong một hàm lấy sự kiện DOM làm đối số. Trong JavaScript, bạn có thể bỏ qua các đối số mà bạn không cần, nhưng vì bạn đang viết một hàm Python nên chữ ký của nó phải rõ ràng hơn 58Đối số 062 sẽ không được sử dụng và bỏ qua, nhưng không sao. Giả sử bạn đã có chức năng của mình, đã đến lúc cho trình duyệt biết khi nào nên gọi nó. Bạn làm điều đó bằng cách thêm một trình lắng nghe sự kiện vào một phần tử sẽ kích hoạt một hành động. Trong trường hợp này, phần tử đó là nút mà bạn có thể tìm thấy bằng bộ chọn CSS thích hợp và tên sự kiện là 063 59Dòng thứ hai trong khối mã ở trên thêm trình nghe, dường như sẽ hoạt động mà không phát ra bất kỳ lỗi nào. Tuy nhiên, ngay khi bạn thử nhấp vào nút của mình trong trình duyệt, sẽ không có gì xảy ra Ghi chú. Bất cứ khi nào trình duyệt không hoạt động như mong đợi, rất có thể bạn sẽ tìm thấy lỗi với nhiều chi tiết hơn trong bảng điều khiển công cụ dành cho nhà phát triển, vì vậy, bạn nên giữ trình duyệt mở trong khi đang phát triển Trình duyệt web mong đợi một cuộc gọi lại JavaScript, nhưng bạn cung cấp cho nó một chức năng Python. Để khắc phục điều này, bạn có thể tạo một đối tượng proxy từ Python có thể gọi được của mình bằng cách sử dụng một hàm có liên quan từ mô-đun 064 60Đó là nó. Giờ đây, bạn có thể thay thế thẻ 62 của mình bằng thẻ 1 có mã Python hoàn chỉnh và bạn có thể bắt đầu tận hưởng ứng dụng PyScript tương tác đầu tiên của mình. Đây là cấu trúc tài liệu HTML kết quả 61Mã JavaScript tương đương sẽ chiếm cùng một dung lượng do gọi cùng một API. Một mặt, việc sử dụng các đối tượng proxy sẽ thêm nhiều ký tự hơn, nhưng mặt khác, Python không cần dấu ngoặc nhọn như JavaScript để phân định mọi khối mã Ghi chú. Theo nguyên tắc thông thường, bạn nên tìm nguồn mã Python từ một tệp riêng biệt được lưu trữ trên máy chủ web để tránh các sự cố thụt lề. Nếu không, hãy nhớ thụt lề chính xác mã nội tuyến của bạn bên trong thẻ 1. Miễn là bạn giữ mã như vậy thẳng hàng với phần đầu của dòng và không chạy bất kỳ công cụ định dạng mã nào, thì PyScript sẽ không gặp khó khăn khi phân tích cú pháp mã đóNgoài việc tìm và thao tác các phần tử HTML bằng API DOM, bạn có thể làm nhiều thứ thú vị hơn liên quan đến trình duyệt web trong PyScript. Trong phần tiếp theo, bạn sẽ xem xét kỹ hơn một số yếu tố còn lại của lập trình giao diện người dùng mà bạn thường phải viết mã bằng JavaScript Giao diện với trình duyệt web từ PythonTrong quá trình phát triển giao diện người dùng truyền thống, bạn dựa vào công cụ JavaScript nhiều như bộ API được cung cấp bởi môi trường thực thi của bạn, đây là hai phần riêng biệt của phương trình. Mặc dù cốt lõi của JavaScript tương đối nhỏ và hoạt động khá nhất quán giữa các nhà cung cấp khác nhau, nhưng bối cảnh của các API có thể rất khác nhau tùy thuộc vào nền tảng mục tiêu Bạn có thể sử dụng JavaScript cho mã phía máy chủ đang chạy trong Node. js, mã phía máy khách được thực thi trong trình duyệt web hoặc thậm chí mã cung cấp năng lượng cho các ứng dụng dành cho thiết bị di động. Nhân tiện, về mặt kỹ thuật, có thể chạy PyScript trong Node. js trên back-end, tận dụng một số API đặc biệt của nó. Tuy nhiên, trong phần này, bạn sẽ tập trung vào các API của trình duyệt Bánh quyLàm việc với các cookie HTTP trong vanilla JavaScript mà không có sự trợ giúp của bất kỳ thư viện bên ngoài nào có thể trở nên rắc rối vì nó buộc bạn phải phân tích một chuỗi dài chứa thông tin đầy đủ của tất cả các cookie cho một miền nhất định. Ngược lại, việc xác định cookie mới trong JavaScript yêu cầu nối một chuỗi với các thuộc tính mong muốn theo cách thủ công. May mắn thay, PyScript cho phép bạn sử dụng Python, đi kèm với pin đi kèm Một trong những loại pin trong tầm tay của bạn là mô-đun 068, có thể thực hiện phân tích cú pháp và mã hóa chuỗi cookie cho bạn. Để phân tích cú pháp thuộc tính 069 của JavaScript, hãy sử dụng lớp 070 có sẵn trong Python 62Lớp trình trợ giúp Python có khả năng phân tích cú pháp toàn bộ chuỗi bằng các thuộc tính cookie mà máy chủ thường gửi tới trình duyệt. Tuy nhiên, trong JavaScript, bạn chỉ thấy tên và giá trị tương ứng của các cookie không phải HTTPOnly mà không có thuộc tính của chúng Sử dụng đoạn mã bên dưới để chỉ định cookie mới sẽ hết hạn sau một năm cho miền hiện tại. Là một công dân tốt, bạn cũng nên đặt thuộc tính SameSite một cách rõ ràng để tránh dựa vào hành vi mặc định, thay đổi tùy theo trình duyệt và phiên bản của chúng 63Phải thừa nhận rằng giao diện của mô-đun này trông khá lỗi thời và không phù hợp với phong cách Pythonic, nhưng nó đã hoàn thành công việc. Khi bạn chạy mã này và kiểm tra cookie trình duyệt của mình, bạn sẽ thấy cookie 071 mới được đặt thành true. Bạn có thể sử dụng số giây để xem trình duyệt của mình có xóa cookie sau một thời gian nhất định hay khôngBạn có thể tùy chọn tạo chuỗi tiêu đề 072 với các thuộc tính bổ sung, một số thuộc tính không được phép trong JavaScript 64Đoạn mã trên sẽ tạo ra dòng văn bản dài sau biểu thị tiêu đề HTTP, tiêu đề này đã được chia để vừa với màn hình của bạn và tránh cuộn ngang 65Bạn không thể tự đặt một cookie như vậy vì nó chỉ định một số thuộc tính không được phép trong JavaScript, nhưng có thể nhận một cookie từ máy chủ web khi tìm nạp một số dữ liệu Loại bỏ các quảng cáoTìm nạp APIKhi thực hiện các yêu cầu HTTP từ trình duyệt web bằng JavaScript, bạn bị ràng buộc bởi một số chính sách bảo mật, chính sách này không mang lại cho bạn nhiều tự do như bạn có thể quen thuộc với tư cách là nhà phát triển back-end. Hơn nữa, mô hình không đồng bộ vốn có của JavaScript không hoạt động tốt với các chức năng đồng bộ của Python để tạo kết nối mạng. Do đó, các mô-đun như 23 hoặc 26 không được sử dụng trong PyScriptPyodide khuyên bạn nên viết ứng dụng khách HTTP dưới dạng API web, chẳng hạn như API tìm nạp dựa trên lời hứa. Để gọi API đó từ Python đơn giản hơn, Pyodide cung cấp hàm bao bọc 075, hoạt động trong ngữ cảnh không đồng bộVí dụ: nếu bạn đang muốn thực hiện một yêu cầu API REST để xác thực bản thân bằng tên người dùng và mật khẩu, thì bạn có thể gọi hàm 075, hàm này có chữ ký tương tự như hàm 077 của JavaScript 66Từ 36, xuất hiện trong nhận xét ở đầu đoạn mã ở trên, yêu cầu PyScript chạy mã này không đồng bộ để bạn có thể chờ vòng lặp sự kiện ở phía dưới. Hãy nhớ rằng bạn có thể đặt từ ma thuật này ở bất kỳ đâu trong mã của mình để kích hoạt cùng một hành động, hiện tại giống như sử dụng một câu thần chú. Có lẽ cuối cùng sẽ có một cách rõ ràng hơn để chuyển đổi hành vi này—ví dụ: thông qua một thuộc tính trên thẻ 1Khi bạn gọi quy trình đăng ký 080 bằng địa chỉ email và mật khẩu, bạn thực hiện một yêu cầu HTTP POST tới một API giả mạo được lưu trữ trực tuyến. Lưu ý rằng bạn tuần tự hóa tải trọng thành JSON trong Python bằng cách sử dụng mô-đun 081 thay vì đối tượng 082 của JavaScriptBạn cũng có thể sử dụng 075 để tải xuống các tệp và sau đó lưu chúng vào hệ thống tệp ảo do emscripten cung cấp trong Pyodide. Lưu ý rằng các tệp này sẽ chỉ hiển thị trong phiên trình duyệt hiện tại của bạn thông qua giao diện I/O, nhưng bạn sẽ không tìm thấy chúng trong thư mục 084 trên ổ đĩa của mình 67Trừ khi bạn muốn lưu tệp dưới một tên khác, bạn sử dụng mô-đun 085 để trích xuất tên tệp từ một URL mà hàm của bạn sẽ trả về. Đối tượng phản hồi được trả về bởi 075 có một phương thức 087 đang chờ, mà bạn sử dụng để lưu nội dung nhị phân vào một tệp mớiGhi chú. Máy chủ mà bạn đang cố tải các tệp xuống từ đó phải được định cấu hình để trả về các tiêu đề CORS thích hợp, nếu không, trình duyệt sẽ chặn yêu cầu tìm nạp của bạn Sau đó, bạn có thể đọc tệp đã tải xuống từ hệ thống tệp ảo và hiển thị tệp đó trên phần tử 088 trong HTML 68Bạn sẽ cần chuyển đổi byte thô thành văn bản bằng cách sử dụng mã hóa Base64, sau đó định dạng chuỗi kết quả dưới dạng URL dữ liệu trước khi gán nó cho thuộc tính 45 của thành phần hình ảnhThay vào đó, bạn có thể sử dụng một hàm hoàn toàn đồng bộ trong PyScript để tìm nạp dữ liệu qua mạng. Vấn đề duy nhất là 090 không thể đọc dữ liệu nhị phân 69Cuộc gọi đầu tiên tới 090 này tìm nạp văn bản gốc của tài liệu PEP 8 mà bạn lưu trữ trong một biến. Cuộc gọi thứ hai giao tiếp với một điểm cuối API REST trả về một đối tượng người dùng ở định dạng JSON, sau đó bạn giải tuần tự hóa thành một từ điển Python. Cuộc gọi thứ ba tải xuống logo SVG chính thức mà bạn có thể hiển thị trong trình duyệt của mình vì SVG là định dạng dựa trên văn bảnKhi bạn tìm nạp dữ liệu từ Internet, bạn thường muốn lưu trữ dữ liệu đó để truy cập sau. Các trình duyệt cung cấp một vài vùng lưu trữ web để lựa chọn, tùy thuộc vào phạm vi và thời gian tồn tại mong muốn của thông tin của bạn. Bộ nhớ cục bộ là lựa chọn tốt nhất của bạn nếu bạn muốn lưu trữ dữ liệu liên tục Lưu trữ cục bộTrong đoạn mã sau, bạn chào người dùng bằng thông báo chào mừng được hiển thị trong hộp cảnh báo, giải quyết họ bằng tên đã được lưu trước đó trong bộ nhớ cục bộ của trình duyệt. Nếu người dùng truy cập trang của bạn lần đầu tiên, thì bạn sẽ hiển thị hộp thoại nhắc hỏi tên người dùng 80Để nắm giữ bộ nhớ cục bộ, bạn nhập tham chiếu 092 từ JavaScript và sử dụng các phương thức 093 và 094 của nó để duy trì các cặp khóa-giá trị. Bạn cũng tận dụng toán tử Walrus ( 095), được giới thiệu trong Python 3. 8, để làm cho mã ngắn gọn hơn và bạn hiển thị địa chỉ URL của cửa sổ trình duyệtĐược rồi, làm thế nào về một cái gì đó thú vị hơn? API cảm biếnCác trình duyệt web chạy trên thiết bị di động như máy tính bảng hoặc điện thoại thông minh hiển thị API cảm biến, cho phép các lập trình viên JavaScript truy cập vào gia tốc kế, cảm biến ánh sáng xung quanh, con quay hồi chuyển hoặc từ kế của thiết bị nếu thiết bị được trang bị. Ngoài ra, một số cảm biến có thể được mô phỏng trong phần mềm bằng cách kết hợp tín hiệu từ nhiều cảm biến vật lý, giảm nhiễu. Cảm biến trọng lực là một ví dụ điển hình Bạn có thể xem bản trình diễn trực tiếp minh họa việc sử dụng cảm biến trọng lực trong PyScript. Đảm bảo mở liên kết trên thiết bị di động. Ngay khi bạn thay đổi hướng của điện thoại hoặc máy tính bảng, bạn sẽ thấy một trong những thông báo này hiển thị trên màn hình
Trong trường hợp thiết bị của bạn không đi kèm với cảm biến trọng lực hoặc bạn đang truy cập trang web qua kết nối không được mã hóa, bạn sẽ nhận được thông báo về điều đó thông qua cửa sổ bật lên. Ngoài ra, bạn có thể chỉ thấy một màn hình trống Ghi chú. Đảm bảo lưu trữ tệp HTML của bạn thông qua giao thức HTTPS an toàn để sử dụng API cảm biến. Các trình duyệt web sẽ chặn API JavaScript này đối với nội dung được cung cấp qua HTTP đơn giản. Bạn có thể xem cách xuất bản ứng dụng PyScript của mình để biết thêm chi tiết về điều đó Để kết nối với một cảm biến trên thiết bị của bạn, bạn sẽ cần phải viết một chút mã keo JavaScript vì PyScript hiện không xuất phiên bản Pyodide mà nó tạo vào không gian tên chung của JavaScript. Nếu đúng như vậy, thì bạn có thể lấy một cái và truy cập các đối tượng proxy Python trong JavaScript với ít rắc rối hơn một chút. Hiện tại, bạn sẽ đi theo cách khác bằng cách gọi một hàm JavaScript từ Python Tạo một tệp 096 mới và tiếp tục thêm nội dung vào đó. Trước tiên, hãy xác định thẻ 09 trong trang web HTML của bạn và điền vào đó mã JavaScript sau 81Hàm nhận một cuộc gọi lại, đây sẽ là proxy JavaScript cho hàm Python của bạn. Sau đó, nó sẽ kiểm tra xem trình duyệt của bạn có hỗ trợ giao diện 098 hay không và tạo một phiên bản cảm biến mới với tần suất lấy mẫu là 60 lần mỗi giây. Một lần đọc cảm biến duy nhất là một vectơ ba chiều biểu thị hướng và độ lớn của lực hấp dẫnTiếp theo, triển khai và đăng ký lệnh gọi lại Python trong trình duyệt bằng PyScript 82Giả sử có một phần tử 099 ở đâu đó trên trang của bạn, bạn tìm tham chiếu của nó bằng bộ chọn CSS và sau đó viết một chuỗi được định dạng có ba thành phần của vectơ trọng lực vào đó sau khi đọc cảm biến. Lưu ý rằng cần phải gói cuộc gọi lại Python của bạn trong proxy JavaScript trước khi đăng ký nó làm người ngheGhi chú. Kiểm tra một trang web trên thiết bị di động trở nên khó khăn vì bạn không có quyền truy cập vào các công cụ phát triển web thông thường và bảng điều khiển. Để tự giúp mình, bạn có thể bật gỡ lỗi USB trên thiết bị Android của mình và tận dụng tính năng gỡ lỗi từ xa trong Google Chrome. Tính năng này không được hỗ trợ cho các thiết bị iOS Việc biết hướng của vectơ trọng lực sẽ cho bạn biết điều gì đó về hướng của điện thoại, điều này có thể hữu ích khi bạn muốn chụp ảnh cân bằng hoặc để phát hiện thời điểm bạn nhấc thiết bị lên khỏi bàn chẳng hạn. Độ lớn của vectơ trọng lực là gia tốc của Trái đất mà bạn có thể sử dụng làm ước tính sơ bộ về độ cao Để làm cho ví dụ này thú vị hơn, hãy tiếp tục và sử dụng NumPy để phát hiện các hướng khác nhau của thiết bị 83Bạn thêm khai báo 10 để tìm nạp NumPy vào môi trường PyScript của mình. Sau đó, bạn nhập thư viện ở đầu thẻ 1 hiện có của mình và thực hiện cuộc gọi lại ủy quyền xử lý cho một hàm trợ giúp. Hàm 502 mới chuẩn hóa và làm tròn vectơ trọng lực của bạn để so sánh nó với một vài vectơ đơn vị dọc theo các trục trong hệ tọa độ thiết bịNếu thiết bị của bạn không hỗ trợ cảm biến trọng lực, hãy thử xác định các cảm biến khác hoạt động, sau đó nghĩ ra ý tưởng cho một ứng dụng khác và điều chỉnh mã được hiển thị trong ví dụ này cho phù hợp. Bạn có thể chia sẻ ý tưởng tuyệt vời của mình trong phần bình luận bên dưới Chức năng hẹn giờJavaScript thường sử dụng cái gọi là hàm hẹn giờ để lên lịch gọi lại để chạy một lần trong tương lai hoặc định kỳ sau mỗi số mili giây được chỉ định. Cái sau có thể hữu ích để tạo hoạt ảnh cho nội dung trên trang hoặc thăm dò ý kiến máy chủ để có ảnh chụp nhanh mới nhất về dữ liệu thay đổi nhanh chóng Nếu bạn định trì hoãn việc thực hiện chức năng một lần—ví dụ: để hiển thị thông báo lời nhắc hoặc cửa sổ bật lên sau một thời gian cụ thể—thì hãy cân nhắc sử dụng 503 để tạo đối tượng proxy. Pyodide sẽ tự động loại bỏ nó khi hoàn thành 84Bạn sử dụng hàm 504 từ JavaScript, hàm này mong đợi một đối tượng có thể gọi được, chẳng hạn như hàm lambda của Python được bao bọc trong một proxy và số mili giây cần chờ trước khi chạy có thể gọi được của bạn. Tại đây, bạn hiển thị một hộp cảnh báo với lời nhắc sau ba giâyBạn sẽ nhận thấy rằng PyScript in một giá trị số vào tài liệu HTML sau khi chạy đoạn mã trên. Đó là giá trị trả về của hàm 504, cung cấp một mã định danh duy nhất của thời gian chờ, bạn có thể tùy ý hủy bỏ giá trị này bằng hàm 506 tương ứng 85Trong trường hợp này, bạn hủy thời gian chờ bằng mã định danh duy nhất của nó ngay sau khi lên lịch gọi lại, vì vậy nó sẽ không bao giờ chạy Có một cặp hàm JavaScript tương tự có tên là 507 và 508 hoạt động gần như giống nhau. Tuy nhiên, các cuộc gọi đến cuộc gọi lại của bạn sẽ được thực hiện lặp đi lặp lại trong khoảng thời gian — ví dụ: cứ sau ba giây trừ đi thời gian thực hiện chức năng của bạn. Nếu hàm của bạn mất nhiều thời gian hơn để thực thi, thì hàm đó sẽ chạy ngay khi có thể vào lần tiếp theo, không chậm trễĐể sử dụng 507 trong PyScript, bạn cần nhớ bọc chức năng gọi lại của mình bằng một lệnh gọi tới 510 thay vì 503 để ngăn Pyodide xử lý nó sau lần chạy đầu tiên 86Một vài điều đang xảy ra ở đây. Bạn đăng ký gọi lại để chạy mỗi giây, đặt nền của tài liệu thành màu ngẫu nhiên. Sau đó, sau mười giây, bạn dừng nó bằng cách xóa khoảng thời gian tương ứng. Cuối cùng, để ngăn không cho PyScript hiển thị mã định danh của thời gian chờ, bạn chỉ định giá trị trả về là 504 cho biến giữ chỗ được biểu thị bằng dấu gạch dưới ( 513), đây là quy ước chuẩn trong Pythonđược rồi. Đây là những phần thiết yếu của giao diện trình duyệt web mà bạn có thể sử dụng trong JavaScript, hiện đã có sẵn cho bạn trong Python, nhờ PyScript. Tiếp theo, bạn sẽ có cơ hội sử dụng một số khả năng của trình duyệt web để nâng cao dự án PyScript thực hành của mình Kết hợp sức mạnh của thư viện Python và JavaScriptMột trong những điểm mạnh của PyScript là khả năng kết hợp các thư viện hiện có được viết bằng Python và JavaScript. Python có nhiều thư viện khoa học dữ liệu tuyệt vời nhưng không có nhiều JavaScript tương đương. Mặt khác, JavaScript luôn có khả năng xây dựng giao diện người dùng hấp dẫn trong trình duyệt một cách tự nhiên. Trong phần này, bạn sẽ xây dựng một ứng dụng PyScript liên kết các thư viện Python và JavaScript với nhau để tạo giao diện người dùng tương tác trong trình duyệt. Cụ thể hơn, bạn sẽ mô phỏng giao thoa sóng hình sin có hai tần số hơi khác nhau, được gọi là nhịp trong âm học. Cuối cùng, bạn sẽ có ứng dụng phía máy khách sau Giao thoa sóng hình sinCó hai thanh trượt cho phép bạn tinh chỉnh các tần số và một phần tử 514 mô tả đồ thị của dạng sóng, là kết quả của việc đặt chồng hai tín hiệu. Di chuyển các thanh trượt khiến cốt truyện cập nhật theo thời gian thựcBạn sẽ thực hiện các phép tính trong thư viện NumPy của Python và bạn sẽ rút ra kết quả bằng Biểu đồ mã nguồn mở của JavaScript. thư viện js. Điều đáng chú ý là Biểu đồ. js không nhanh bằng một số đối thủ trả phí của nó, nhưng nó miễn phí và khá dễ sử dụng, vì vậy bạn sẽ gắn bó với nó ngay bây giờ HTML và CSSBước đầu tiên, bạn sẽ cần dàn dựng cấu trúc tài liệu HTML của mình, tạo kiểu cho nó bằng CSS và bao gồm một số mã soạn sẵn cần thiết. Vì ví dụ này liên quan nhiều hơn một chút so với những ví dụ mà bạn đã xem trước đó trong hướng dẫn này, nên bạn nên giữ mã Python, JavaScript và CSS trong các tệp riêng biệt và liên kết chúng trong HTML. Lưu đoạn mã sau vào một tệp mới có tên 096 87Bạn bao gồm các tệp PyScript thông thường trong tiêu đề HTML của mình, Biểu đồ. js được cung cấp từ jsDelivr CDN và biểu định kiểu CSS tùy chỉnh mà bạn sẽ lưu trữ cục bộ. Bạn cũng liệt kê NumPy và mô-đun trình trợ giúp tùy chỉnh mà bạn đã tạo trước đây làm phần phụ thuộc của mình trong thẻ 10. Ở cuối tài liệu, bạn tìm nguồn mô-đun Python cốt lõi và mã vẽ đồ thị trong JavaScriptBiểu định kiểu CSS tùy chỉnh của bạn đảm bảo một chút đệm xung quanh nội dung của tài liệu và cung cấp cho khung vẽ một kích thước cố định 88Hãy nhớ đặt các quy tắc kiểu tùy chỉnh của bạn sau biểu định kiểu PyScript trong HTML để có hiệu lực. Bởi vì trình duyệt đọc tài liệu từ trên xuống dưới, bất cứ điều gì xảy ra tiếp theo có thể ghi đè lên các quy tắc trước đó Với lớp trình bày không còn nữa, đã đến lúc chuyển sự chú ý của bạn sang mã âm mưu trong một giây Mã JavaScriptĐể sử dụng Biểu đồ. js, bạn cần tạo một phiên bản 517 và chuyển dữ liệu của bạn tới phiên bản đó vào một thời điểm nào đó. Mặc dù bạn chỉ cần tạo biểu đồ một lần, nhưng bạn sẽ cập nhật dữ liệu của mình nhiều lần, vì vậy bạn có thể xác định hàm gọi lại để sử dụng lại logic đó 89Hàm tạo của biểu đồ mong đợi thuộc tính 93 của phần tử 514 nơi biểu đồ của bạn sẽ xuất hiện và một đối tượng cấu hình mô tả giao diện của biểu đồ. Hàm gọi lại của bạn cũng nhận hai đối số—tức là giá trị x và y của chuỗi dữ liệu để vẽ biểu đồ. Những điểm dữ liệu này đến từ mã Python của bạn, bạn sẽ kiểm tra ngay bây giờMã PythonCó hai tệp có mã nguồn Python trong ứng dụng này. Một là mô-đun tiện ích có chức năng trợ giúp có thể tạo ra các hàm sóng có tần số, biên độ và pha mong muốn. Đồng thời, tệp Python khác là lớp điều khiển của ứng dụng của bạn, lớp này sẽ nhập các biểu mẫu Đây là mô-đun tiện ích được mô tả lại để thuận tiện cho bạn 01Mặc dù bạn đã sử dụng chức năng này trước đây, nhưng mô-đun bộ điều khiển có thể cần giải thích một vài từ vì nó chứa một lượng mã khá lớn 01Đây là bảng phân tích về chức năng của mã này theo từng dòng
Ngoài ra, nếu bạn muốn sử dụng Matplotlib để vẽ sơ đồ loại bỏ JavaScript khỏi mã của mình, thì bạn có thể tạo một hình và sử dụng phương thức 523 của PyScript như thế này 02Hàm khởi tạo của lớp 92 nhận thuộc tính 93 của một phần tử HTML, thường là một phần tử 69Vui lòng nâng cao dự án này—ví dụ: bằng cách biến sóng âm thanh được tạo thành luồng âm thanh và phát nó trong trình duyệt của bạn. Nó có một âm thanh đặc biệt. Mặt khác, nếu bạn hài lòng với dự án ở dạng hiện tại, thì bạn sẽ học cách chia sẻ nó miễn phí với bất kỳ ai trên thế giới, ngay cả khi họ không cài đặt trình thông dịch Python trên máy tính của họ Xuất bản ứng dụng PyScript của bạn trên các trang GitHubVì PyScript cho phép bạn chạy mã hoàn toàn trong trình duyệt web của khách hàng, nên bạn không cần máy chủ phụ trợ để mã đó được thực thi cho bạn. Do đó, việc phân phối các ứng dụng PyScript có nghĩa là lưu trữ một loạt các tệp tĩnh để trình duyệt sử dụng. Trang GitHub là một cách nhanh chóng và đơn giản để biến bất kỳ kho Git nào của bạn thành một trang web miễn phí Bạn sẽ sử dụng lại mã của mình từ phần trước, vì vậy trước khi tiếp tục, hãy đảm bảo rằng bạn có sẵn cấu trúc thư mục sau 03Để bắt đầu sử dụng Trang GitHub, hãy đăng nhập vào tài khoản GitHub của bạn và tạo một kho lưu trữ công khai mới có tên là 527, để lại tất cả các tùy chọn mặc định. Bạn không muốn GitHub tạo bất kỳ tệp nào cho bạn ở giai đoạn này, vì chúng sẽ xung đột với mã bạn đã có trên máy tính của mình. Ghi lại URL kho lưu trữ duy nhất của bạn sau đó. Nó sẽ trông giống như thế này 04Bây giờ, hãy mở terminal và thay đổi thư mục làm việc của bạn thành thư mục gốc của dự án. Sau đó, khởi tạo kho lưu trữ Git cục bộ mới, thực hiện cam kết đầu tiên của bạn và đẩy các tệp vào kho lưu trữ từ xa trên GitHub bằng URL duy nhất của bạn 05Giờ đây, bạn có thể đi tới cài đặt kho lưu trữ GitHub của mình và bật Trang GitHub bằng cách chọn nhánh và thư mục để lưu trữ. Vì bạn chỉ có nhánh 528 nên bạn muốn chọn nó từ menu thả xuống. Bạn cũng nên chọn thư mục gốc 529 và nhấp vào nút Lưu để xác nhận. Khi bạn làm như vậy, GitHub sẽ cần vài phút cho đến khi bạn có thể xem trang web trực tiếp của mìnhĐịa chỉ URL công khai của kho lưu trữ của bạn sẽ tương tự như thế này 06Xin chúc mừng. Giờ đây, bạn có thể chia sẻ URL này với bất kỳ ai có trình duyệt web hiện đại và họ sẽ có thể chơi trực tuyến với ứng dụng PyScript của bạn. Bước tiếp theo dành cho bạn sau khi đạt đến điểm này là đưa các tài nguyên đã rút gọn vào kho lưu trữ của bạn và cập nhật các đường dẫn tương đối trong tài liệu HTML để làm cho thời gian tải nhanh hơn một chút Đóng góp cho PyScriptTham gia vào một dự án nguồn mở có thể đáng sợ. Tuy nhiên, vì PyScript là một framework non trẻ nên việc khai thác mã nguồn của nó và loay hoay với nó thực sự không khó lắm. Tất cả những gì bạn cần là một ứng dụng khách Git, phiên bản mới nhất của Node. js và trình quản lý gói 530Ghi chú. Bạn có thể cài đặt Nút. js thông qua Trình quản lý phiên bản nút, tương tự như pyenv trong Python Khi bạn đã định cấu hình ba công cụ đó, hãy bắt đầu bằng cách sao chép kho lưu trữ PyScript từ GitHub và cài đặt các phụ thuộc cần thiết vào thư mục 531 cục bộ 07Bạn sẽ chỉ chạy các lệnh này một lần vì bạn sẽ không thêm bất kỳ phụ thuộc mới nào vào dự án. Tiếp theo, tìm tệp có tên 532 trong thư mục con 51, mở nó trong trình chỉnh sửa mã yêu thích của bạn và đổi tên thẻ HTML tùy chỉnh 1 được liên kết với lớp 535 thành, ví dụ: 536 08Hãy nhớ rằng tên thẻ tùy chỉnh phải chứa dấu gạch nối để phân biệt chúng với tên thông thường. Sau đó, trong thiết bị đầu cuối của bạn, hãy thay đổi thư mục làm việc hiện tại thành thư mục con 537 trong dự án nhân bản và chạy lệnh build 09Điều này sẽ tạo ra một tệp 6 mới, trong số một số tệp khác, mà bạn có thể lưu trữ cục bộ thay vì liên kết với bản dựng chính thức trên CDN. Khi bạn làm như vậy, bạn sẽ có thể nhúng mã Python vào thẻ sáng bóng mới của mình 0Đáng kinh ngạc. Bây giờ, bạn có thể rẽ nhánh này trên GitHub và mở yêu cầu kéo. Đùa thôi. Đó là một ví dụ về đồ chơi, nhưng nó đã thể hiện một cách độc đáo một số bước cơ bản để làm việc với PyScript ở cấp độ thấp hơn một chút. Ngay cả khi bạn không có ý định đóng góp gì cho PyScript, việc duyệt qua mã nguồn của nó có thể giúp bạn hiểu rõ hơn về hoạt động bên trong của nó Sự kết luậnBây giờ bạn đã có một ý tưởng khá hay về PyScript là gì, nó hoạt động như thế nào và nó cung cấp những gì. Bạn có thể giảm thiểu một số thiếu sót hiện tại của nó và thậm chí tùy chỉnh nó theo ý thích của bạn. Ngoài ra, bạn đã thấy một số ví dụ thực tế thể hiện các tính năng và ứng dụng thực tế của khung Trong hướng dẫn này, bạn đã học cách
PyScript chắc chắn là một công nghệ mới thú vị cho phép bạn chạy mã Python trong trình duyệt web nhờ Pyodide và WebAssembly. Mặc dù đã có những nỗ lực trước đó về vấn đề này, nhưng PyScript là khung đầu tiên chạy trình thông dịch CPython chính hãng trong trình duyệt, cho phép sử dụng lại các chương trình Python hiện có mà không cần sửa đổi hoặc sửa đổi ít Tải xuống miễn phí. Nhận một chương mẫu từ CPython Internals. Hướng dẫn về Trình thông dịch Python 3 chỉ cho bạn cách mở khóa hoạt động bên trong của ngôn ngữ Python, biên dịch trình thông dịch Python từ mã nguồn và tham gia phát triển CPython Bạn nghĩ gì về PyScript? Đánh dấu là đã hoàn thành 🐍 Thủ thuật Python 💌 Nhận một Thủ thuật Python ngắn và hấp dẫn được gửi đến hộp thư đến của bạn vài ngày một lần. Không có thư rác bao giờ. Hủy đăng ký bất cứ lúc nào. Được quản lý bởi nhóm Real Python Gửi cho tôi thủ thuật Python » Giới thiệu về Bartosz Zaczyński Bartosz là người hướng dẫn bootcamp, tác giả và lập trình viên đa ngôn ngữ yêu thích Python. Anh ấy giúp sinh viên của mình tiếp cận công nghệ phần mềm bằng cách chia sẻ kinh nghiệm thương mại hơn một thập kỷ trong ngành CNTT » Thông tin thêm về BartoszMỗi hướng dẫn tại Real Python được tạo bởi một nhóm các nhà phát triển để nó đáp ứng các tiêu chuẩn chất lượng cao của chúng tôi. Các thành viên trong nhóm đã làm việc trong hướng dẫn này là Tuổi tác Geir Arne kate Bậc thầy Kỹ năng Python trong thế giới thực Với quyền truy cập không giới hạn vào Python thực Tham gia với chúng tôi và có quyền truy cập vào hàng ngàn hướng dẫn, khóa học video thực hành và cộng đồng Pythonistas chuyên gia Nâng cao kỹ năng Python của bạn » Bậc thầy Kỹ năng Python trong thế giới thực Tham gia với chúng tôi và có quyền truy cập vào hàng ngàn hướng dẫn, khóa học video thực hành và cộng đồng Pythonistas chuyên gia Nâng cao kỹ năng Python của bạn » Bạn nghĩ sao? Đánh giá bài viết này Tweet Chia sẻ Chia sẻ EmailBài học số 1 hoặc điều yêu thích mà bạn đã học được là gì? Mẹo bình luận. Những nhận xét hữu ích nhất là những nhận xét được viết với mục đích học hỏi hoặc giúp đỡ các sinh viên khác. Nhận các mẹo để đặt câu hỏi hay và nhận câu trả lời cho các câu hỏi phổ biến trong cổng thông tin hỗ trợ của chúng tôi Trình duyệt Web python là gì?Trong Python, mô-đun trình duyệt web là bộ điều khiển trình duyệt web tiện lợi . Nó cung cấp một giao diện cấp cao cho phép hiển thị các tài liệu trên nền Web cho người dùng. trình duyệt web cũng có thể được sử dụng như một công cụ CLI.
Tôi có thể xây dựng trình duyệt bằng python không?Các bước triển khai GUI. . Tạo một cửa sổ chính Tạo một đối tượng QWebEngineView và thêm nó làm tiện ích trung tâm vào cửa sổ chính Thêm thanh trạng thái vào cửa sổ chính Tạo thanh công cụ và thêm nút điều hướng và chỉnh sửa dòng để hiện url, bên dưới đang hot thanh công cụ sẽ như thế nào Trình duyệt nào được viết bằng python?Grail là một trình duyệt web được viết bằng Python và có thể được viết bằng Python. Nó chậm nhưng không quá nhiều |