Hướng dẫn electron-python github - điện tử trăn github

GUI điện tử cho Python

Một ví dụ đơn giản về cách tạo GUI điện tử cho chương trình Python và tương tác với nó.

Nó hoạt động như thế nào (đại diện đơn giản)

electron
--------> |------------|    python
          |            |-------------> |-------------------|
          |  electron  |  sub process  | python program    |
          |  --------  |               | --------------    |
          |   > html   |      std      |  takes requests   |
          |   > css    | <-----------> |  from js and      |
          |   > js     | communication |  responds it,     |
          |            |               |  in the terminal  |
          |------------|               |-------------------|

Về cơ bản, không có mạng nào được tạo ra chỉ có một thiết bị đầu cuối được sử dụng khi electron được ra mắt và so với trong JavaScript (electron) Một chương trình Python được bắt đầu như một quy trình con. Hai chương trình này hơn là giao tiếp thông qua các luồng Standart.

Cấu trúc của ví dụ

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

Hướng dẫn cài đặt

1. Để tải xuống và cài đặt electron (OS X hoặc Linux), bạn phải tải xuống từ NPM-Electron bằng cách sử dụng:

   npm install electron --save-dev
   

   (Nếu bạn chưa cài đặt NPM, hãy sử dụng liên kết này để tải xuống.)

2. Bản sao kho lưu trữ này:

   git clone https://github.com/keybraker/electron-GUI-for-python.git
   

Hướng dẫn thực thi

1. Mở cửa sổ thiết bị đầu cuối và CD cho dự án nhân bản

   cd electron-GUI-for-python
   

2. Khởi tạo aplication elcetron (lần đầu tiên)

3. Chạy ứng dụng điện tử

4. Một trang nên sinh sản trông như sau:

1. Nhấn nút khởi động_ nútLAUNCH PROGRAM_ button

   Điều này sẽ khởi chạy một ứng dụng Python với một vòng lặp bên trong, đang chờ dữ liệu được gửi từ JS

2. Nhấn Tương tác bằng nút chương trìnhINTERACT WITH PROGRAM button

   Điều này sẽ gửi một tin nhắn có tên "Xin chào" từ JS đến Python và Python sẽ đọc nó và in một tin nhắn

3. Nhấn nút Chương trình chấm dứtTERMINATE PROGRAM button

   Thông báo chấm dứt ("chấm dứt") được gửi đến chương trình biết dừng vòng lặp và thực thi

4. Nhấn cách mở nút tệpHOW TO OPEN A FILE button

   Từ

   npm install electron --save-dev
   

   9, một thông báo ipc.send được gửi đến main.js sau đó sẽ đọc và xuất ra các giá trị

   git clone https://github.com/keybraker/electron-GUI-for-python.git
   

   0 (tính năng nhanh cho cài đặt lưu trữ).

Hướng dẫn giải thích

Chức năng quan trọng có thể được tìm thấy trong các tệp

npm install electron --save-dev

git clone https://github.com/keybraker/electron-GUI-for-python.git

Tác giả

• Ioannis Tsiakkas - (Keybraker) - Keybraker - (Keybraker) - Keybraker

Electron là GUI của các ứng dụng Python (cập nhật)

tl;dr

Bài đăng này cho thấy cách sử dụng electron làm thành phần GUI của các ứng dụng Python. . Mã hoàn chỉnh là trên repo GitHub.

Thông báo quan trọng

Tuyên bố miễn trừ trách nhiệm vào tháng 12 năm 2019: Bài viết này ban đầu được viết vào năm 2017 và tôi đã không cập nhật hoặc duy trì repo này trong một thời gian dài. Ngay bây giờ (tháng 12 năm 2019), mã trong bài viết này có thể đã lỗi thời và có thể hoặc không thể hoạt động !!!

Sau đây được sao chép từ bài viết gốc của tôi. Chắc họ giống nhau. Nếu có sự không nhất quán,

git clone https://github.com/keybraker/electron-GUI-for-python.git

git clone https://github.com/keybraker/electron-GUI-for-python.git

Bài viết gốc và các cuộc tranh luận

chú ý

Bài đăng hiện tại là phiên bản cập nhật của bài viết trước một vài năm trước đó. Người đọc không cần đọc bài trước nếu không.updated version of the previous post a few years before. Readers do NOT need to read the previous post if haven't.

tranh luận

Tôi không mong đợi rằng bài viết trước đã thu hút rất nhiều khách truy cập. Một số người khác thậm chí còn đăng nó trên Hacker News và Reddit. Bài viết trước cũng thu hút một số lời chỉ trích. Ở đây tôi muốn chia sẻ câu trả lời của tôi cho một số cuộc tranh luận.

Bạn có biết

git clone https://github.com/keybraker/electron-GUI-for-python.git

5,

git clone https://github.com/keybraker/electron-GUI-for-python.git

6,

git clone https://github.com/keybraker/electron-GUI-for-python.git

7 (

git clone https://github.com/keybraker/electron-GUI-for-python.git

8 và

git clone https://github.com/keybraker/electron-GUI-for-python.git

9),

cd electron-GUI-for-python

0,

cd electron-GUI-for-python

1,

cd electron-GUI-for-python

2, ...?

Vâng, tôi biết ít nhất là sự tồn tại của họ và thử một vài trong số họ. Tôi vẫn nghĩ

git clone https://github.com/keybraker/electron-GUI-for-python.git

cd electron-GUI-for-python

... và

cd electron-GUI-for-python

5.

Nó ít nhiều ở mức "cấp thấp hơn" so với nơi electron. Ví dụ,

git clone https://github.com/keybraker/electron-GUI-for-python.git

Tôi có thể trực tiếp viết những thứ trong JavaScript!

Chính xác. Trừ khi một số thư viện như

cd electron-GUI-for-python

Tôi có thể sử dụng

cd electron-GUI-for-python

8.

Hãy tiếp tục và thử nó. Nhưng vì bạn đang sử dụng "Web Engine", tại sao cũng không thử Electron?

Bạn có hai Runtimes!

Đúng. Một cho JavaScript và một cho Python. Thật không may, Python và JavaScript là các ngôn ngữ động, thường cần hỗ trợ thời gian chạy.

các kiến ​​trúc và sự lựa chọn

Trong bài trước, tôi đã cho thấy một kiến ​​trúc ví dụ: Python để xây dựng một máy chủ

cd electron-GUI-for-python

start
 |
 V
+------------+
|            | start
|            +-------------> +-------------------+
|  electron  | sub process   |                   |
|            |               | python web server |
| (basically |     http      |                   |
|  browser)  | <-----------> | (business logic)  |
|            | communication |                   |
|            |               | (all html/css/js) |
|            |               |                   |
+------------+               +-------------------+

Đó chỉ là một giải pháp không hiệu quả.just one not-so-efficient solution.

Hãy xem xét lại các nhu cầu cốt lõi ở đây: Chúng tôi có một ứng dụng Python và ứng dụng Node.js (electron). Làm thế nào để kết hợp chúng và giao tiếp với nhau?

Chúng tôi thực sự cần một cơ chế giao tiếp giữa các quá trình (IPC). Nó là không thể tránh khỏi trừ khi Python và JavaScript có trực tiếp

start
 |
 V
+------------+
|            | start
|            +-------------> +-------------------+
|  electron  | sub process   |                   |
|            |               | python web server |
| (basically |     http      |                   |
|  browser)  | <-----------> | (business logic)  |
|            | communication |                   |
|            |               | (all html/css/js) |
|            |               |                   |
+------------+               +-------------------+

start
 |
 V
+------------+
|            | start
|            +-------------> +-------------------+
|  electron  | sub process   |                   |
|            |               | python web server |
| (basically |     http      |                   |
|  browser)  | <-----------> | (business logic)  |
|            | communication |                   |
|            |               | (all html/css/js) |
|            |               |                   |
+------------+               +-------------------+

HTTP chỉ là một trong những cách phổ biến để thực hiện IPC và đó chỉ là điều đầu tiên xuất hiện trong tâm trí tôi khi tôi viết bài trước.

Chúng tôi có nhiều lựa chọn hơn.

Chúng ta có thể (và nên) sử dụng

start
 |
 V
+------------+
|            | start
|            +-------------> +-------------------+
|  electron  | sub process   |                   |
|            |               | python web server |
| (basically |     http      |                   |
|  browser)  | <-----------> | (business logic)  |
|            | communication |                   |
|            |               | (all html/css/js) |
|            |               |                   |
+------------+               +-------------------+

start
 |
 V
+------------+
|            | start
|            +-------------> +-------------------+
|  electron  | sub process   |                   |
|            |               | python web server |
| (basically |     http      |                   |
|  browser)  | <-----------> | (business logic)  |
|            | communication |                   |
|            |               | (all html/css/js) |
|            |               |                   |
+------------+               +-------------------+

git clone https://github.com/keybraker/electron-GUI-for-python.git

.

Do đó, trong bài đăng này, tôi sẽ hiển thị một ví dụ khác bằng cách sử dụng

git clone https://github.com/keybraker/electron-GUI-for-python.git

start
 |
 V
+--------------------+
|                    | start
|  electron          +-------------> +------------------+
|                    | sub process   |                  |
| (browser)          |               | python server    |
|                    |               |                  |
| (all html/css/js)  |               | (business logic) |
|                    |   zerorpc     |                  |
| (node.js runtime,  | <-----------> | (zeromq server)  |
|  zeromq client)    | communication |                  |
|                    |               |                  |
+--------------------+               +------------------+

sự chuẩn bị

Chú ý: Ví dụ có thể được chạy thành công trên máy Windows 10 của tôi với Python 3.6, Electron 1.7, Node.js v6.

Chúng tôi cần ứng dụng Python,

start
 |
 V
+------------+
|            | start
|            +-------------> +-------------------+
|  electron  | sub process   |                   |
|            |               | python web server |
| (basically |     http      |                   |
|  browser)  | <-----------> | (business logic)  |
|            | communication |                   |
|            |               | (all html/css/js) |
|            |               |                   |
+------------+               +-------------------+

start
 |
 V
+------------+
|            | start
|            +-------------> +-------------------+
|  electron  | sub process   |                   |
|            |               | python web server |
| (basically |     http      |                   |
|  browser)  | <-----------> | (business logic)  |
|            | communication |                   |
|            |               | (all html/css/js) |
|            |               |                   |
+------------+               +-------------------+

start
 |
 V
+------------+
|            | start
|            +-------------> +-------------------+
|  electron  | sub process   |                   |
|            |               | python web server |
| (basically |     http      |                   |
|  browser)  | <-----------> | (business logic)  |
|            | communication |                   |
|            |               | (all html/css/js) |
|            |               |                   |
+------------+               +-------------------+

start
 |
 V
+--------------------+
|                    | start
|  electron          +-------------> +------------------+
|                    | sub process   |                  |
| (browser)          |               | python server    |
|                    |               |                  |
| (all html/css/js)  |               | (business logic) |
|                    |   zerorpc     |                  |
| (node.js runtime,  | <-----------> | (zeromq server)  |
|  zeromq client)    | communication |                  |
|                    |               |                  |
+--------------------+               +------------------+

git clone https://github.com/keybraker/electron-GUI-for-python.git

start
 |
 V
+--------------------+
|                    | start
|  electron          +-------------> +------------------+
|                    | sub process   |                  |
| (browser)          |               | python server    |
|                    |               |                  |
| (all html/css/js)  |               | (business logic) |
|                    |   zerorpc     |                  |
| (node.js runtime,  | <-----------> | (zeromq server)  |
|  zeromq client)    | communication |                  |
|                    |               |                  |
+--------------------+               +------------------+

start
 |
 V
+--------------------+
|                    | start
|  electron          +-------------> +------------------+
|                    | sub process   |                  |
| (browser)          |               | python server    |
|                    |               |                  |
| (all html/css/js)  |               | (business logic) |
|                    |   zerorpc     |                  |
| (node.js runtime,  | <-----------> | (zeromq server)  |
|  zeromq client)    | communication |                  |
|                    |               |                  |
+--------------------+               +------------------+

Cấu trúc của dự án này là

.
|-- index.html
|-- main.js
|-- package.json
|-- renderer.js
|
|-- pycalc
|   |-- api.py
|   |-- calc.py
|   `-- requirements.txt
|
|-- LICENSE
`-- README.md

Như được hiển thị ở trên, ứng dụng Python được bọc trong một thư mục con. Trong ví dụ này, ứng dụng Python

start
 |
 V
+--------------------+
|                    | start
|  electron          +-------------> +------------------+
|                    | sub process   |                  |
| (browser)          |               | python server    |
|                    |               |                  |
| (all html/css/js)  |               | (business logic) |
|                    |   zerorpc     |                  |
| (node.js runtime,  | <-----------> | (zeromq server)  |
|  zeromq client)    | communication |                  |
|                    |               |                  |
+--------------------+               +------------------+

start
 |
 V
+--------------------+
|                    | start
|  electron          +-------------> +------------------+
|                    | sub process   |                  |
| (browser)          |               | python server    |
|                    |               |                  |
| (all html/css/js)  |               | (business logic) |
|                    |   zerorpc     |                  |
| (node.js runtime,  | <-----------> | (zeromq server)  |
|  zeromq client)    | communication |                  |
|                    |               |                  |
+--------------------+               +------------------+

start
 |
 V
+--------------------+
|                    | start
|  electron          +-------------> +------------------+
|                    | sub process   |                  |
| (browser)          |               | python server    |
|                    |               |                  |
| (all html/css/js)  |               | (business logic) |
|                    |   zerorpc     |                  |
| (node.js runtime,  | <-----------> | (zeromq server)  |
|  zeromq client)    | communication |                  |
|                    |               |                  |
+--------------------+               +------------------+

start
 |
 V
+--------------------+
|                    | start
|  electron          +-------------> +------------------+
|                    | sub process   |                  |
| (browser)          |               | python server    |
|                    |               |                  |
| (all html/css/js)  |               | (business logic) |
|                    |   zerorpc     |                  |
| (node.js runtime,  | <-----------> | (zeromq server)  |
|  zeromq client)    | communication |                  |
|                    |               |                  |
+--------------------+               +------------------+

start
 |
 V
+--------------------+
|                    | start
|  electron          +-------------> +------------------+
|                    | sub process   |                  |
| (browser)          |               | python server    |
|                    |               |                  |
| (all html/css/js)  |               | (business logic) |
|                    |   zerorpc     |                  |
| (node.js runtime,  | <-----------> | (zeromq server)  |
|  zeromq client)    | communication |                  |
|                    |               |                  |
+--------------------+               +------------------+

start
 |
 V
+--------------------+
|                    | start
|  electron          +-------------> +------------------+
|                    | sub process   |                  |
| (browser)          |               | python server    |
|                    |               |                  |
| (all html/css/js)  |               | (business logic) |
|                    |   zerorpc     |                  |
| (node.js runtime,  | <-----------> | (zeromq server)  |
|  zeromq client)    | communication |                  |
|                    |               |                  |
+--------------------+               +------------------+

Và

.
|-- index.html
|-- main.js
|-- package.json
|-- renderer.js
|
|-- pycalc
|   |-- api.py
|   |-- calc.py
|   `-- requirements.txt
|
|-- LICENSE
`-- README.md

.
|-- index.html
|-- main.js
|-- package.json
|-- renderer.js
|
|-- pycalc
|   |-- api.py
|   |-- calc.py
|   `-- requirements.txt
|
|-- LICENSE
`-- README.md

.
|-- index.html
|-- main.js
|-- package.json
|-- renderer.js
|
|-- pycalc
|   |-- api.py
|   |-- calc.py
|   `-- requirements.txt
|
|-- LICENSE
`-- README.md

.
|-- index.html
|-- main.js
|-- package.json
|-- renderer.js
|
|-- pycalc
|   |-- api.py
|   |-- calc.py
|   `-- requirements.txt
|
|-- LICENSE
`-- README.md

.
|-- index.html
|-- main.js
|-- package.json
|-- renderer.js
|
|-- pycalc
|   |-- api.py
|   |-- calc.py
|   `-- requirements.txt
|
|-- LICENSE
`-- README.md

Phần Python

Trước hết, vì chúng tôi đã chạy ứng dụng Python, môi trường Python sẽ ổn. Tôi thực sự khuyên bạn nên phát triển các ứng dụng Python trong

.
|-- index.html
|-- main.js
|-- package.json
|-- renderer.js
|
|-- pycalc
|   |-- api.py
|   |-- calc.py
|   `-- requirements.txt
|
|-- LICENSE
`-- README.md

Hãy thử cài đặt

git clone https://github.com/keybraker/electron-GUI-for-python.git

.
|-- index.html
|-- main.js
|-- package.json
|-- renderer.js
|
|-- pycalc
|   |-- api.py
|   |-- calc.py
|   `-- requirements.txt
|
|-- LICENSE
`-- README.md

.
|-- index.html
|-- main.js
|-- package.json
|-- renderer.js
|
|-- pycalc
|   |-- api.py
|   |-- calc.py
|   `-- requirements.txt
|
|-- LICENSE
`-- README.md

.
|-- index.html
|-- main.js
|-- package.json
|-- renderer.js
|
|-- pycalc
|   |-- api.py
|   |-- calc.py
|   `-- requirements.txt
|
|-- LICENSE
`-- README.md

.
|-- index.html
|-- main.js
|-- package.json
|-- renderer.js
|
|-- pycalc
|   |-- api.py
|   |-- calc.py
|   `-- requirements.txt
|
|-- LICENSE
`-- README.md

pip install zerorpc
pip install pyinstaller

# for windows only
pip install pypiwin32 # for pyinstaller

Nếu được cấu hình đúng, các lệnh trên sẽ không có vấn đề gì. Nếu không, xin vui lòng kiểm tra các hướng dẫn trực tuyến.

Node.js / phần điện tử

Thứ hai, cố gắng định cấu hình Node.js và môi trường electron. Tôi giả sử rằng

start
 |
 V
+------------+
|            | start
|            +-------------> +-------------------+
|  electron  | sub process   |                   |
|            |               | python web server |
| (basically |     http      |                   |
|  browser)  | <-----------> | (business logic)  |
|            | communication |                   |
|            |               | (all html/css/js) |
|            |               |                   |
+------------+               +-------------------+

start
 |
 V
+--------------------+
|                    | start
|  electron          +-------------> +------------------+
|                    | sub process   |                  |
| (browser)          |               | python server    |
|                    |               |                  |
| (all html/css/js)  |               | (business logic) |
|                    |   zerorpc     |                  |
| (node.js runtime,  | <-----------> | (zeromq server)  |
|  zeromq client)    | communication |                  |
|                    |               |                  |
+--------------------+               +------------------+

Chúng ta cần cấu hình

.
|-- index.html
|-- main.js
|-- package.json
|-- renderer.js
|
|-- pycalc
|   |-- api.py
|   |-- calc.py
|   `-- requirements.txt
|
|-- LICENSE
`-- README.md

pip install zerorpc
pip install pyinstaller

# for windows only
pip install pypiwin32 # for pyinstaller

{
  "name": "pretty-calculator",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git"
  },
  "devDependencies": {
    "electron": "^1.7.6",
    "electron-packager": "^9.0.1"
  }
}

Làm sạch bộ nhớ cache:

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

Sau đó chạy

start
 |
 V
+--------------------+
|                    | start
|  electron          +-------------> +------------------+
|                    | sub process   |                  |
| (browser)          |               | python server    |
|                    |               |                  |
| (all html/css/js)  |               | (business logic) |
|                    |   zerorpc     |                  |
| (node.js runtime,  | <-----------> | (zeromq server)  |
|  zeromq client)    | communication |                  |
|                    |               |                  |
+--------------------+               +------------------+

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

pip install zerorpc
pip install pyinstaller

# for windows only
pip install pypiwin32 # for pyinstaller

pip install zerorpc
pip install pyinstaller

# for windows only
pip install pypiwin32 # for pyinstaller

pip install zerorpc
pip install pyinstaller

# for windows only
pip install pypiwin32 # for pyinstaller

(Xem xét thêm

pip install zerorpc
pip install pyinstaller

# for windows only
pip install pypiwin32 # for pyinstaller

Tất cả các thư viện sẽ ổn bây giờ.

Tùy chọn: Xây dựng từ các nguồn

Nếu cài đặt ở trên gây ra bất kỳ lỗi nào ngay cả khi đặt phiên bản electron một cách chính xác, chúng ta có thể phải xây dựng các gói từ các nguồn.even while setting the electron version correctly, we may have to build the packages from sources.

Trớ trêu thay, để biên dịch các mã gốc của Node.js C/C ++, chúng ta cần phải cấu hình

pip install zerorpc
pip install pyinstaller

# for windows only
pip install pypiwin32 # for pyinstaller

Đặc biệt, nếu làm việc trên Windows, Open PowerShell làm quản trị viên và chạy

{
  "name": "pretty-calculator",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git"
  },
  "devDependencies": {
    "electron": "^1.7.6",
    "electron-packager": "^9.0.1"
  }
}

{
  "name": "pretty-calculator",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git"
  },
  "devDependencies": {
    "electron": "^1.7.6",
    "electron-packager": "^9.0.1"
  }
}

{
  "name": "pretty-calculator",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git"
  },
  "devDependencies": {
    "electron": "^1.7.6",
    "electron-packager": "^9.0.1"
  }
}

{
  "name": "pretty-calculator",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git"
  },
  "devDependencies": {
    "electron": "^1.7.6",
    "electron-packager": "^9.0.1"
  }
}

Sau đó, Clean

{
  "name": "pretty-calculator",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git"
  },
  "devDependencies": {
    "electron": "^1.7.6",
    "electron-packager": "^9.0.1"
  }
}

{
  "name": "pretty-calculator",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git"
  },
  "devDependencies": {
    "electron": "^1.7.6",
    "electron-packager": "^9.0.1"
  }
}

{
  "name": "pretty-calculator",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git"
  },
  "devDependencies": {
    "electron": "^1.7.6",
    "electron-packager": "^9.0.1"
  }
}

{
  "name": "pretty-calculator",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git"
  },
  "devDependencies": {
    "electron": "^1.7.6",
    "electron-packager": "^9.0.1"
  }
}

Đặt

start
 |
 V
+--------------------+
|                    | start
|  electron          +-------------> +------------------+
|                    | sub process   |                  |
| (browser)          |               | python server    |
|                    |               |                  |
| (all html/css/js)  |               | (business logic) |
|                    |   zerorpc     |                  |
| (node.js runtime,  | <-----------> | (zeromq server)  |
|  zeromq client)    | communication |                  |
|                    |               |                  |
+--------------------+               +------------------+

Đặt các biến môi trường cho Linux (Ubuntu) / OS X / Windows:

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

Sau đó cài đặt mọi thứ:

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

(Xem xét thêm

pip install zerorpc
pip install pyinstaller

# for windows only
pip install pypiwin32 # for pyinstaller

Tất cả các thư viện sẽ ổn bây giờ.

Tùy chọn: Xây dựng từ các nguồn

Nếu cài đặt ở trên gây ra bất kỳ lỗi nào ngay cả khi đặt phiên bản electron một cách chính xác, chúng ta có thể phải xây dựng các gói từ các nguồn.

Trớ trêu thay, để biên dịch các mã gốc của Node.js C/C ++, chúng ta cần phải cấu hình

pip install zerorpc
pip install pyinstaller

# for windows only
pip install pypiwin32 # for pyinstaller

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

Đặc biệt, nếu làm việc trên Windows, Open PowerShell làm quản trị viên và chạy

{
  "name": "pretty-calculator",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git"
  },
  "devDependencies": {
    "electron": "^1.7.6",
    "electron-packager": "^9.0.1"
  }
}

{
  "name": "pretty-calculator",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git"
  },
  "devDependencies": {
    "electron": "^1.7.6",
    "electron-packager": "^9.0.1"
  }
}

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

Sau đó, Clean

{
  "name": "pretty-calculator",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git"
  },
  "devDependencies": {
    "electron": "^1.7.6",
    "electron-packager": "^9.0.1"
  }
}

{
  "name": "pretty-calculator",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git"
  },
  "devDependencies": {
    "electron": "^1.7.6",
    "electron-packager": "^9.0.1"
  }
}

Đặt

start
 |
 V
+--------------------+
|                    | start
|  electron          +-------------> +------------------+
|                    | sub process   |                  |
| (browser)          |               | python server    |
|                    |               |                  |
| (all html/css/js)  |               | (business logic) |
|                    |   zerorpc     |                  |
| (node.js runtime,  | <-----------> | (zeromq server)  |
|  zeromq client)    | communication |                  |
|                    |               |                  |
+--------------------+               +------------------+

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

Node.js / phần điện tử

Đặt các biến môi trường cho Linux (Ubuntu) / OS X / Windows:

Sau đó cài đặt mọi thứ:

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

các chức năng cốt lõi

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

Phần Python

npm install electron --save-dev

Chúng tôi muốn xây dựng một máy chủ Zeromq ở Python End.client, and the code for watching the changes in the input. Once the user types some formula into the text area, the JS send the text to Python backend and retrieve the computed result.

npm install electron --save-dev

Đặt { "name": "pretty-calculator", "main": "main.js", "scripts": { "start": "electron ." }, "dependencies": { "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git" }, "devDependencies": { "electron": "^1.7.6", "electron-packager": "^9.0.1" } }6 vào thư mục { "name": "pretty-calculator", "main": "main.js", "scripts": { "start": "electron ." }, "dependencies": { "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git" }, "devDependencies": { "electron": "^1.7.6", "electron-packager": "^9.0.1" } }7. Sau đó tạo một tệp khác start | V +--------------------+ | | start | electron +-------------> +------------------+ | | sub process | | | (browser) | | python server | | | | | | (all html/css/js) | | (business logic) | | | zerorpc | | | (node.js runtime, | <-----------> | (zeromq server) | | zeromq client) | communication | | | | | | +--------------------+ +------------------+ 9. Kiểm tra { "name": "pretty-calculator", "main": "main.js", "scripts": { "start": "electron ." }, "dependencies": { "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git" }, "devDependencies": { "electron": "^1.7.6", "electron-packager": "^9.0.1" } }9 để tham khảo.

Để kiểm tra tính chính xác, chạy

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

npm install electron --save-dev

Awesome!

Sau khi gỡ lỗi, hãy nhớ chấm dứt chức năng Python.

npm install electron --save-dev

Trên thực tế, đây là một máy chủ khác, được truyền đạt qua │ ├── docs │ ├── README.md │ └── LICENSE | ├── img │ └── example.png | ├── gui_example.html ├── gui_example.css ├── gui_example.js ├── main.js │ ├── python_example.py | ├── config.json └── package.json 01 qua TCP, thay vì máy chủ web truyền thống qua HTTP.

Ý tưởng cơ bản: Trong quy trình chính, sinh ra quy trình con Python và tạo cửa sổ. Trong quy trình kết xuất, hãy sử dụng thư viện Rode.js Rand Time và

git clone https://github.com/keybraker/electron-GUI-for-python.git

Tùy chọn: Xây dựng từ các nguồn

Nếu cài đặt ở trên gây ra bất kỳ lỗi nào ngay cả khi đặt phiên bản electron một cách chính xác, chúng ta có thể phải xây dựng các gói từ các nguồn.

Trớ trêu thay, để biên dịch các mã gốc của Node.js C/C ++, chúng ta cần phải cấu hình

pip install zerorpc
pip install pyinstaller

# for windows only
pip install pypiwin32 # for pyinstaller

npm install electron --save-dev

Đặc biệt, nếu làm việc trên Windows, Open PowerShell làm quản trị viên và chạy

{
  "name": "pretty-calculator",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git"
  },
  "devDependencies": {
    "electron": "^1.7.6",
    "electron-packager": "^9.0.1"
  }
}

{
  "name": "pretty-calculator",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git"
  },
  "devDependencies": {
    "electron": "^1.7.6",
    "electron-packager": "^9.0.1"
  }
}

Sau đó, Clean

{
  "name": "pretty-calculator",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git"
  },
  "devDependencies": {
    "electron": "^1.7.6",
    "electron-packager": "^9.0.1"
  }
}

{
  "name": "pretty-calculator",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git"
  },
  "devDependencies": {
    "electron": "^1.7.6",
    "electron-packager": "^9.0.1"
  }
}

Node.js / phần điện tử

Đặt

start
 |
 V
+--------------------+
|                    | start
|  electron          +-------------> +------------------+
|                    | sub process   |                  |
| (browser)          |               | python server    |
|                    |               |                  |
| (all html/css/js)  |               | (business logic) |
|                    |   zerorpc     |                  |
| (node.js runtime,  | <-----------> | (zeromq server)  |
|  zeromq client)    | communication |                  |
|                    |               |                  |
+--------------------+               +------------------+

Đặt các biến môi trường cho Linux (Ubuntu) / OS X / Windows:

npm install electron --save-dev

Sau đó cài đặt mọi thứ:we should no longer

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

các chức năng cốt lõi

Phần Python

npm install electron --save-dev

Chúng tôi muốn xây dựng một máy chủ Zeromq ở Python End.

npm install electron --save-dev

Đặt

{
  "name": "pretty-calculator",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git"
  },
  "devDependencies": {
    "electron": "^1.7.6",
    "electron-packager": "^9.0.1"
  }
}

{
  "name": "pretty-calculator",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git"
  },
  "devDependencies": {
    "electron": "^1.7.6",
    "electron-packager": "^9.0.1"
  }
}

start
 |
 V
+--------------------+
|                    | start
|  electron          +-------------> +------------------+
|                    | sub process   |                  |
| (browser)          |               | python server    |
|                    |               |                  |
| (all html/css/js)  |               | (business logic) |
|                    |   zerorpc     |                  |
| (node.js runtime,  | <-----------> | (zeromq server)  |
|  zeromq client)    | communication |                  |
|                    |               |                  |
+--------------------+               +------------------+

{
  "name": "pretty-calculator",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git"
  },
  "devDependencies": {
    "electron": "^1.7.6",
    "electron-packager": "^9.0.1"
  }
}

Cuối cùng, chạy

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

{
  "name": "pretty-calculator",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "zerorpc": "git+https://github.com/0rpc/zerorpc-node.git"
  },
  "devDependencies": {
    "electron": "^1.7.6",
    "electron-packager": "^9.0.1"
  }
}

.
|-- index.html
|-- main.js
|-- package.json
|-- renderer.js
|
|-- pycalc
|   |-- api.py
|   |-- calc.py
|   `-- requirements.txt
|
|-- LICENSE
`-- README.md

.
|-- index.html
|-- main.js
|-- package.json
|-- renderer.js
|
|-- pycalc
|   |-- api.py
|   |-- calc.py
|   `-- requirements.txt
|
|-- LICENSE
`-- README.md

npm install electron --save-dev

Tôi không kiểm tra tính khả dụng của định dạng

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

Sau đó, chúng tôi có electron đóng gói được tạo ra trong thư mục hiện tại! Đối với tôi, kết quả là

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

Sao chép / Di chuyển (các) thư mục đến bất cứ đâu hoặc máy khác để kiểm tra kết quả! :-)

Câu hỏi thường gặp hơn nữa

Mã đầy đủ?

Xem GitHub

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

giải pháp cho lỗi

Vấn đề #6:

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

Vấn đề #7:

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

Gỡ cài đặt tất cả mọi thứ, thiết lập các biến môi trường NPM một cách chính xác, đặc biệt là cho phiên bản electron, hãy nhớ

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

.
|-- index.html
|-- main.js
|-- package.json
|-- renderer.js
|
|-- pycalc
|   |-- api.py
|   |-- calc.py
|   `-- requirements.txt
|
|-- LICENSE
`-- README.md

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

.
|-- index.html
|-- main.js
|-- package.json
|-- renderer.js
|
|-- pycalc
|   |-- api.py
|   |-- calc.py
|   `-- requirements.txt
|
|-- LICENSE
`-- README.md

Tối ưu hóa hơn nữa?

Cắt một số tệp không cần thiết trong Python có thể thực thi bằng cách định cấu hình

.
|-- index.html
|-- main.js
|-- package.json
|-- renderer.js
|
|-- pycalc
|   |-- api.py
|   |-- calc.py
|   `-- requirements.txt
|
|-- LICENSE
`-- README.md

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

Hơn nữa, sử dụng qt (huh ??), viết lại các mã cần thiết trong node.js / go / c / c ++ (huh ??). Bạn đặt tên cho nó.

Tôi có thể sử dụng các ngôn ngữ lập trình khác ngoài Python không?

Chắc chắn rồi. Giải pháp được mô tả ở đây cũng có thể được áp dụng cho bất kỳ ngôn ngữ lập trình nào khác ngoài Python. Ngoại trừ, nếu bạn muốn sử dụng electron làm GUI của các ứng dụng C/C ++, tôi thực sự khuyên bạn nên sử dụng cơ chế giao tiếp C/C ++ gốc của Node.js thay vì sử dụng IPC. Hơn nữa, nếu bạn có ứng dụng Java, C#, sử dụng

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

│ 
├── docs
│   ├── README.md
│   └── LICENSE
|
├── img
│   └── example.png
|
├── gui_example.html
├── gui_example.css
├── gui_example.js
├── main.js
│ 
├── python_example.py
| 
├── config.json
└── package.json

Nhưng, thật không may, Electron không dành cho các ứng dụng di động và nó không có ý nghĩa gì ngay cả khi có thể. Vui lòng sử dụng GUI gốc trên các nền tảng đó.

Kết luận và suy nghĩ thêm

Đó vẫn là một giải pháp đầy hứa hẹn. Để vẽ giao diện, chúng tôi muốn sử dụng một số ngôn ngữ đánh dấu cho UI khai báo. HTML tình cờ là một trong những lựa chọn tốt nhất và những người bạn đồng hành của nó JS và CSS có một trong những trình kết xuất được tối ưu hóa nhất: trình duyệt web. Đó là lý do tại sao tôi (vì vậy) quan tâm đến việc sử dụng các công nghệ web cho GUI khi có thể. Một vài năm trước khi các trình duyệt web không đủ mạnh, nhưng câu chuyện bây giờ là loại khác.

Tôi hy vọng bài viết này là hữu ích cho bạn.