Python banyak digunakan untuk analisis data, pembelajaran mesin, pengikisan web, dan banyak lagi. Tapi tahukah Anda bahwa Anda juga dapat menjalankan kode Python dalam HTML untuk membangun aplikasi web?

PyScript memungkinkan, memungkinkan Anda untuk menjalankan kode Python di browser. Pelajari cara menambahkan visualisasi matplotlib ke halaman web dengan bantuan beberapa contoh PyScript-HTML.

Apa itu PyScript?

PyScript adalah kerangka kerja web sumber terbuka yang memungkinkan Anda menjalankan Python di browser web. Ini mengintegrasikan antarmuka HTML dan kekuatan Pyodide, WASM, dan teknologi web modern. PyScript saat ini dalam tahap pengembangan tetapi sudah memiliki beberapa fitur menarik. Secara potensial, ini bisa menjadi alat untuk membuat aplikasi web yang kuat.

Kode yang digunakan dalam proyek ini tersedia di a Repositori GitHub dan gratis untuk Anda gunakan di bawah lisensi MIT. Jika Anda ingin melihat versi langsung dari proyek ini, Anda dapat melihat alur garis dan barplot demo.

Siapkan Boilerplate HTML

instagram viewer

Sebelum menggunakan PyScript, Anda perlu mengatur semuanya. Buat file HTML baru dan atur boilerplate HTML. Paling IDE modern menyediakan fungsionalitas untuk membuat boilerplate secara otomatis. Anda hanya perlu mengetik dokter atau html dan tekan enter. Anda juga dapat menggunakan template berikut untuk memulai:

<!DOCTYPE html>
<html>
<kepala>
<rangkaian meta ="utf-8">
<meta http-equiv="Kompatibel dengan X-UA" konten="IE = tepi">
<judul></title>
<nama meta ="keterangan" konten="">
<nama meta ="area pandang" konten="lebar = lebar perangkat, skala awal = 1">
</head>
<tubuh>

</body>
</html>

Tambahkan PyScript ke HTML: "Halo, Dunia!" Menggunakan PyScript

Anda dapat menggunakan PyScript di file HTML Anda dengan mengunduhnya atau menautkan CDN-nya di kepala HTML Anda. Tambahkan yang berikut ini di bagian dari file HTML Anda:

<link rel="lembar gaya" href="https://pyscript.net/alpha/pyscript.css" />
<skrip penangguhan src="https://pyscript.net/alpha/pyscript.js"></script>

Hanya itu yang perlu Anda lakukan untuk menyiapkan PyScript.

Untuk memverifikasi apakah PyScript berhasil diintegrasikan, tambahkan baris kode berikut di bagian:

<tubuh>
<py-script>mencetak("Halo Dunia!")</py-script>
</body>

Buka file HTML di browser web apa pun dan Anda akan melihat Halo Dunia! dicetak di sana.

Muat Perpustakaan Matplotlib

Anda perlu menggunakan tag untuk mengimpor modul Python. Muat matplotlib modul di bagian dari file HTML Anda menggunakan cuplikan berikut:

<py-env>
- matplotlib
</py-env>

Menampilkan Plot Garis di Browser Menggunakan PyScript

Membuat dengan sebuah Indo. Anda akan membutuhkan Indo menggunakannya dengan keluaran atribut dari menandai.

<id div ="matplotlib-lineplot"></div>

Anda perlu menulis kode Python di menandai. Tetapkan di atas Indo ke keluaran atribut dari menandai.

<keluaran skrip py="matplotlib-lineplot">
# Kode Python
</py-script>

Anda sekarang siap untuk menulis kode Python untuk membuat plot garis:

<tubuh>
<id div ="matplotlib-lineplot"></div>
<keluaran skrip py="matplotlib-lineplot">
# Kode Python

# mengimpor perpustakaan matplotlib
impor matplotlib.pyplot sebagai plt
ara, kapak = plt.subplots()
# sumbu x
x = ["Python", "C++", "JavaScript", "Golang"]
# sumbu y
y = [10, 5, 9, 7]
plt.plot (x, y, penanda='Hai', gaya garis='-', warna ='b')
# Memberi nama label-x
plt.xlabel('Bahasa')
# Memberi nama label-y
plt.ylabel('Skor')
# Menyebutkan judul plot
plt.judul('Bahasa vs Skor')
ara
</py-script>
</body>

Anda akan mendapatkan gambar berikut yang ditampilkan saat Anda membuka file HTML di browser web:

Menampilkan Plot Bar di Browser Menggunakan PyScript

Anda dapat membuat plot batang di browser menggunakan cuplikan Python berikut:

<tubuh>
<id div ="matplotlib-bar"></div>
<keluaran skrip py="matplotlib-bar">
# Kode Python

# mengimpor perpustakaan matplotlib
impor matplotlib.pyplot sebagai plt
ara, kapak = plt.subplots()
# sumbu x
x = ["Python", "C++", "JavaScript", "Golang"]
# sumbu y
y = [10, 5, 9, 7]
plt.batang(x, kamu)
# Memberi nama label-x
plt.xlabel('Bahasa')
# Memberi nama label-y
plt.ylabel('Skor')
# Menyebutkan judul plot
plt.judul('Bahasa vs Skor')
ara
</py-script>
</body>

Kode ini menghasilkan output berikut:

Masa Depan Apa yang Ditahan PyScript?

Anda dapat membuat dasbor dan bagan yang kuat dalam HTML menggunakan pustaka PyScript dan Python seperti Matplotlib, Bokeh, Seaborn, dan sebagainya. Namun, Anda mungkin harus menunda menggunakannya dalam produksi karena sedang dalam pengembangan yang berat. Perangkat lunak saat ini memiliki banyak masalah termasuk waktu pemuatan dan kegunaan. Di masa mendatang, PyScript dapat membuka gerbang untuk menjalankan dan melakukan operasi Python di web dengan lebih lancar.

Salah satu alasan utama untuk mengembangkan PyScript adalah untuk membantu ilmuwan data memvisualisasikan data di web. Jika Anda seorang ilmuwan data, Anda dapat memanfaatkan kekuatan PyScript dengan menggabungkannya dengan perpustakaan ilmu data seperti Pandas, dan NumPy.