PYTHON

Belajar Dan Mengenal Pyscript Dasar Beserta Contohnya

Apakah Python JavaScript baru sekarang? Yah, tidak, tapi Anda masih bisa melakukan hal-hal keren.

CEO Anaconda Peter Wang mengungkapkan sesuatu yang cukup menarik selama PyCon US 2022. Ini adalah PyScript - kerangka kerja JavaScript yang memungkinkan Anda membuat aplikasi Python di browser. Itu benar, Anda sekarang dapat menyematkan kode Python langsung di file HTML, seperti yang akan dilakukan oleh pengembang JavaScript mana pun. Ide di balik PyScript sederhana - ilmuwan data dapat membuat situs web seputar model mereka dalam bahasa favorit mereka, asalkan mereka memiliki pengetahuan dasar HTML. HTML seperti SQL di satu area - semua orang tahu itu. Anda bisa mempelajari artikel apa itu pyscript pada python dan tentu saja anda setelah membaca artikel ini jika anda berminat anda bisa lanjut membaca artikel bagaimana cara menjalankan pyscript sebagai kode python dalam kode HTML anda bisa membaca nya jika berminat untuk menambah pengetahuan anda tentang pyscript.

Pyscript ini memang teknologi baru pada artikel ini di buat pada tanggal 11 hari rabu bulan mei tahun 2022 sebagai info yang lebih segar mengenai teknologi ini dan ini sangat menguntungkan bagi para developer atau programmer python untuk bisa lebih lanjut belajar beberapa hal keren mengenai python. Sebelumnya saya telah membuat artikel tentang pyscript dasar anda bisa cek di sini namun pada artikel ini saya akan buat agak lebih lengkap sebagai hal dasar mengenai pyscript.

Akankah PyScript memenuhi hype-nya? Hanya waktu yang akan memberitahu. Hari ini, saya akan menunjukkan dua contoh dasar yang akan membantu Anda memulai dengan PyScript dalam hitungan menit. Beri tahu saya jika Anda ingin membahas topik lebih lanjut, seperti pembelajaran mesin dan menangani input pengguna.

Tidak ingin membaca? Anda bisa tonton video mengenai pyscript jika anda berminat sebagai gantinya:


Apa itu PyScript dan Mengapa Anda Harus Peduli?

PyScript adalah sistem untuk menyisipkan Python dalam HTML (seperti PHP), menurut Anaconda Cloud . Ini berarti Anda dapat menulis dan menjalankan kode Python dalam HTML, memanggil pustaka JavaScript, dan menangani hampir semua hal yang terkait dengan pengembangan web. Untuk ilmuwan data, ini berarti Anda sekarang dapat membuat aplikasi web di sekitar produk data Anda. Setiap orang memiliki akses ke browser web, yang menjadikan web sebagai platform yang lebih mudah untuk diakses daripada, katakanlah, seluler.

Selain itu, Anda tidak perlu khawatir tentang penerapan, karena semuanya terjadi di browser. Anda dapat membagikan model dan dasbor Anda sebagai file HTML, yang akan menjalankan kode setiap kali seseorang membukanya di browser web. Rapi! PyScript dibangun di atas Pyodide , yang merupakan port CPython ke WebAssembly/Emscripten:

Jika Anda bertanya-tanya, WebAssembly adalah teknologi yang memungkinkan untuk menulis situs web dengan Python. Ini adalah bahasa tingkat rendah seperti perakitan dengan format biner kompak yang berjalan dengan kinerja hampir asli dan menyediakan bahasa dengan target kompilasi sehingga mereka dapat berjalan di web, menurut Mozilla . Tetapi bagaimana Anda bisa benar-benar menggunakan PyScript? Mari kita jawab selanjutnya.

Cara Menggunakan PyScript

Anda dapat mengunduh rilis alfa PyScript di pyscript.net . Kami tidak akan mengunduh apa pun hari ini. Sebagai gantinya, kami akan menyematkan satu lembar gaya dan satu skrip di file HTML kami. Sebagai referensi, semua file HTML yang menggunakan PyScript harus memiliki tautan ke ini:

<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>

PyScript memungkinkan Anda untuk menulis Python dalam HTML menggunakan komponen berikut:

  • py-env- Mendefinisikan paket Python yang dibutuhkan untuk menjalankan kode Python Anda.
  • py-script- Bagian dari file HTML tempat Anda menulis kode Python.
  • py-repl- Membuat komponen REPL yang mengevaluasi kode yang dimasukkan pengguna dan menampilkan hasilnya.

Kami akan menangani dua yang pertama hari ini dan menyimpan yang terakhir untuk beberapa waktu lain. Mari kita lihat bagaimana Anda dapat menulis program Hello World sederhana di PyScript.

Contoh PyScript #1 - Halo Dunia

Di Visual Studio Code, Anda dapat menulis tanda seru diikuti dengan Tab untuk membuat struktur dokumen HTML dasar. Di dalam <head>tag, tambahkan dua tautan yang disebutkan di bagian sebelumnya. Contoh hello world tidak memerlukan pustaka Python eksternal, jadi kita bisa membuang <py-env>bagian itu sama sekali. Sebelum </body>tag penutup, buka <py-script>tag baru yang akan berisi logika Python. Perhatikan saja lekukannya - yang terbaik adalah menghapusnya sepenuhnya. Pemformatan tidak terlihat bagus, tetapi Anda akan mendapatkan kesalahan sebaliknya. Apa yang akan kita lakukan sederhana - cetak pesan hello world dan info datetime saat ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <title>First Python HTML app</title>
</head>
<body>
    <py-script>
from datetime import datetime 

print("Hello World!")
print(f"It's now {datetime.now()}")
    </py-script>
</body>
</html>

Buka file HTML di browser - inilah yang akan Anda lihat dalam beberapa detik:

Dan itu dia! Ini akan membawa Anda lebih banyak waktu untuk membuat kode di Flask, jadi PyScript sudah menunjukkan dirinya sebagai alternatif yang layak. Mari kita membahas contoh yang lebih kompleks berikutnya.

Contoh PyScript #2 - Bagan dengan Bokeh

Anda tidak dapat membuat dasbor di sekitar produk data Anda tanpa diagram. Sampai sekarang, PyScript tidak mendukung Plotly, jadi kita harus memilih Matplotlib atau Bokeh. Mari kita pergi dengan yang terakhir. Ini membutuhkan banyak skrip JavaScript Bokeh, jadi salin saja dari cuplikan di bawah ini. Kali ini, kami mengandalkan library Python eksternal - Bokeh - jadi pastikan untuk menentukannya di dalam <py-env>tag. Saya telah menyalin contoh bagan dari galeri Bokeh , hanya untuk memastikannya berfungsi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.2.min.js"></script>
    <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.2.min.js"></script>
    <title>Bokeh Example</title>
    <py-env>
    - bokeh
    </py-env>
</head>
<body>
    <h1>Bokeh Example in PyScript</h1>
    <div id="chart"></div>

    <py-script>
import json 
import pyodide 
from js import Bokeh, console, JSON
from bokeh.embed import json_item
from bokeh.plotting import figure
from bokeh.resources import CDN

fruits = ['Apples', 'Pears', 'Nectarines', 'Plums', 'Grapes', 'Strawberries']
counts = [5, 3, 4, 2, 4, 6]
p = figure(x_range=fruits, height=350, title="Fruit Counts", toolbar_location=None, tools="")
p.vbar(x=fruits, top=counts, width=0.9)
p.xgrid.grid_line_color = None
p.y_range.start = 0
p_json = json.dumps(json_item(p, "chart"))
Bokeh.embed.embed_item(JSON.parse(p_json))
    </py-script>
</body>
</html>

Dan maukah Anda melihat itu! Tidak perlu mengkodekan seluruh aplikasi web hanya untuk menampilkan bagan sederhana. Di situlah letak kekuatan PyScript.

Python untuk Web dengan PyScript - Ke Mana Harus Pergi dari Sini?

Singkat cerita, PyScript menyederhanakan proses penyajian produk data Anda secara visual dan interaktif. Apakah itu solusi terbaik di luar sana? Tidak, setidaknya belum. Apakah ini yang paling mudah untuk memulai? Dengan tembakan panjang. Saya senang melihat apa yang akan dibawa oleh rilis PyScript di masa mendatang. Seperti yang disebutkan, ini masih dalam versi alfa, jadi banyak yang diharapkan berubah di masa depan. Beri tahu saya jika Anda tertarik dengan penggunaan PyScript yang lebih canggih - misalnya, membuat dasbor di sekitar model pembelajaran mesin.

Apa pendapat Anda tentang PyScript? Apakah Anda berencana menggunakannya sebagai pengganti aplikasi web Python dasar? Beri tahu saya di bagian komentar di bawah.

Sumber artikel asli kamu bisa di lihat di sini.