pengantar
Topik antarmuka yang indah selalu dan akan selalu relevan, seseorang menggunakan C # untuk membuat aplikasi grafis, seseorang menggunakan Java, seseorang memasuki hutan C ++, dan seseorang menyimpang dengan Python menggunakan tkinter atau PyQT. Ada berbagai teknologi yang memungkinkan Anda menggabungkan keindahan desain grafis yang dibuat dalam HTML, CSS, dan JS dengan fleksibilitas dalam mengimplementasikan logika aplikasi yang dapat disediakan oleh bahasa lain. Jadi, bagi mereka yang menulis dalam bahasa pemrograman terbaik Python, ada kesempatan untuk menulis antarmuka yang indah dalam HTML, CSS dan JS dan melampirkan logika padanya dengan Python.
Pada artikel ini saya ingin menunjukkan dengan contoh kecil bagaimana membuat aplikasi desktop yang sederhana dan indah dalam HTML, CSS, JS dan Python. Kami akan menggunakan EEL sebagai perpustakaan untuk menghubungkan semua komponen.
Instalasi
Saya akan membuat reservasi bahwa saya sedang mengerjakan windows 10 x64.
Untuk memulainya, kita akan menginstal perpustakaan itu sendiri dengan menjalankan perintah sederhana: Setelah menginstal hanya satu perpustakaan, kita dapat memulai perjalanan kita.
pip install eel
Aplikasi kita akan terlihat seperti ini:
Logika aplikasinya sangat sederhana: ketika tombol "hitung" ditekan, nilai di bidang untuk memasukkan rubel dibaca, data yang diterima dikirim ke Python, di mana nilai tukar dihitung. Python mengembalikan data kepada kami dan kami mengeluarkannya melalui JS
Kami menyebar ke dalam folder
. “front” , . “back” python. middle, , JS ( ). main.py, .
Python
(-, , , ). python CurrencyConverter:
pip install currencyconverter
python. , , , . “convert.py” “back” :
from currency_converter import CurrencyConverter
converter = CurrencyConverter()
def convert_value(value: float, from_cur: str, to_cur: str):
return converter.convert(value, from_cur, to_cur)
“middle” “mid_convert.py” :
from back.convert import convert_value
import eel
@eel.expose
def convert_value_py(value:float, from_cur:str, to_cur:str)->float:
return convert_value(value, from_cur, to_cur)
? “mid_convert.py” JS Python. @eel.expose , , , JS. , , JS, @eel.expose. , , , “convert_value” “convert.py”. .
Python JS
Python JS. , HTML, CSS ( vue.js, react.js , ). eel JS:
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="/eel.js"></script>
</head>
“”. , .
async function create_cur_for_rub (){
//
let value_rub = parseFloat(document.getElementById("rub-input").value);
// input',
let list_curs = document.getElementById("list-cur").children;
for (let div_cur of list_curs) {
//
let name_cur = div_cur.getElementsByTagName("span")[0].textContent;
// Python
let value_cur = await eel.convert_value_py(value_rub, "RUB", name_cur)();
//
div_cur.getElementsByTagName("input")[0].value = value_cur;
}
}
document.getElementById("btn-sum").onclick = create_cur_for_rub;
“let value_cur = await eel.convert_value_py(value_rub, "RUB", name_cur)();”. , , , Python . eel (), .
, .
, .
“main.py”. eel , “min_convert.py” , , eel.expose:
import eel
from middle.mid_convert import *
eel , front-end . eel.init(args). eel.start(args):
if __name__ == '__main__':
eel.init('front')
eel.start('index.html', mode="chrome", size=(760, 760))
eel.start ( . eel). “mode”. , , . , “default”, . google chrome, “mode=chrome” .
Anda juga bisa menggunakan kromium. Untuk melakukan ini, unduh dari situs web resmi . Unzip ke beberapa folder dan tulis kode berikut di “main.py” kami:
eel.browsers.set_path("chrome", "C:/Users/admin/Documents/chrome-win/chrome.exe")
eel.start('index.html', mode="chrome", size=(760, 760))
Keluaran
Seperti yang bisa kita lihat, tidak terlalu sulit untuk membuat aplikasi desktop yang indah menggunakan Python sebagai bahasa untuk mengimplementasikan logika utama. Anda dapat menginstal pustaka apa pun yang Anda inginkan, menerapkan kode yang diperlukan menggunakan Python, dan menulis antarmuka yang indah dalam HTML, CSS, dan JS.
PS ini adalah artikel pertama saya di Habr, tulis keinginan, komentar, dan umpan balik Anda, saya akan senang melihat komentar apa pun.