Jalankan Visualisasi Python di Web Menggunakan PyScript

Python banyak digunakan untuk analisis data, pembelajaran mesin, pengikisan web, dan banyak lagi. Tetapi 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 repositori GitHub dan gratis untuk Anda gunakan di bawah lisensi MIT. Jika Anda ingin melihat versi langsung dari proyek ini, Anda dapat melihat demo lineplot dan barplot.

Siapkan Boilerplate HTML

Sebelum menggunakan PyScript, Anda perlu mengatur semuanya. Buat file HTML baru dan atur boilerplate HTML. Kebanyakan 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>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

</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="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

See also  Cara Mengambil Data Dari Instagram Menggunakan Python

Hanya itu yang perlu Anda lakukan untuk menyiapkan PyScript.

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

<body>
<py-script>print("Hello, World!")</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.

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

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

<py-script output="matplotlib-lineplot">
</py-script>

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

    <body>
<div id="matplotlib-lineplot"></div>
<py-script output="matplotlib-lineplot">


import matplotlib.pyplot as plt
fig, ax = plt.subplots()
x = ["Python", "C++", "JavaScript", "Golang"]
y = [10, 5, 9, 7]
plt.plot(x, y, marker='o', linestyle='-', color='b')
plt.xlabel('Language')
plt.ylabel('Score')
plt.title('Language vs Score')
fig
</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:

<body>
<div id="matplotlib-bar"></div>
<py-script output="matplotlib-bar">


import matplotlib.pyplot as plt
fig, ax = plt.subplots()
x = ["Python", "C++", "JavaScript", "Golang"]
y = [10, 5, 9, 7]
plt.bar(x, y)
plt.xlabel('Language')
plt.ylabel('Score')
plt.title('Language vs Score')
fig
</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.

See also  Cara Menggunakan Antarmuka Linux Chromebook Baru

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.