Strălucitor pentru Python și JavaScript: Cum să adăugați scripturi JS la tablourile de bord

Dezvoltatorii web iubesc JavaScript. Și cine îi poate învinovăți, este un limbaj fantastic pentru a crea site-uri web uimitoare. Dar ce zici Lucios şi Strălucitor pentru Python? După cum se dovedește, puteți adăuga scripturi JavaScript la tablourile de bord Shiny pentru Python fără prea multe probleme. Astăzi veți învăța cum să adăugați scripturi JS la Shiny pentru Python, creând o aplicație simplă. Tot ce face este să ceară utilizatorului numele după ce face clic pe un buton și apoi să redeze numele sau să afișeze un mesaj de anulare. Adevărul să fie spus, puteți codifica aceeași aplicație în Python/R, dar ne-am gândit că acesta ar fi un exemplu bun pentru utilizarea potențială a JavaScript.

Care sunt părerile despre Shiny pentru Python? Aruncă o privire la acest articol Primele impresii.

Cuprins:

Strălucitor pentru Python și JavaScript: Să codificăm o aplicație de bază

În primul rând, avem nevoie de o aplicație. Vestea bună este că va fi nevoie de mai puțin de 10 linii de cod pentru ca acesta să funcționeze. Deschideți orice editor de cod și creați un app.py fişier. Întreaga interfață va avea doar trei elemente:

1. Titlu – Este doar o h3 element, nu chiar important.
2. Buton – Se va deschide o solicitare când se dă clic, dar mai multe despre asta mai târziu.
3. Paragraf – Pentru afișarea conținutului introdus de utilizator. Este gol în mod implicit și ne pasă doar de id.

The server() Funcția va rămâne goală de data aceasta, deoarece nu vom gestiona nicio logică cu Python. Iată fragmentul complet de cod pentru aplicația noastră simplă:

from shiny import App, ui


app_ui = ui.page_fluid(
    ui.h3("Shiny for Python - JavaScript Example"),
    ui.input_action_button(id="btn", label="Click me!"),
    ui.p(id="prompt_text")
)


def server(input, output, session):
    pass


app = App(ui=app_ui, server=server)

Rulați următoarea comandă din shell pentru a rula aplicația:

shiny run --reload app.py

Va rula mai departe localhost:8000 implicit: Imaginea 1 – Aplicația noastră de bază Shiny pentru Python Nu se întâmplă nimic când faceți clic pe butonul, ceea ce este de așteptat. Înainte de a-l putea lega de o logică de programare, trebuie să discutăm despre servirea fișierelor statice în Shiny.

Cum să serviți fișiere statice

Gândește-te fișiere statice ca termen umbrelă pentru imagini, fișiere CSS și scripturi. Practic, este ceva oarecum legat de aplicația dvs. care nu este scris în fișierul principal. O practică comună este crearea unui www folder și puneți tot ce este menționat în el. Creați unul singur și faceți următoarele modificări app.py:

• Importă Path clasa de la pathlib bibliotecă.
• Creați o variabilă www_dir care va stoca o cale absolută către wwwdirector.
• Interior App()specificați un parametru suplimentar static_assets și setați-l la www_dir.

Iată întregul fragment modificat în cazul în care v-ați pierdut în acest proces:

from shiny import App, ui
from pathlib import Path


app_ui = ui.page_fluid(
    ui.h3("Shiny for Python - JavaScript Example"),
    ui.input_action_button(id="btn", label="Click me!"),
    ui.p(id="prompt_text")
)


def server(input, output, session):
    pass


www_dir = Path(__file__).parent / "www"
app = App(ui=app_ui, server=server, static_assets=www_dir)

Aplicația arată în continuare la fel, chiar dacă faceți clic pe butonul: Imaginea 2 – Aplicația noastră de bază Shiny for Python (2) Acum avem activele statice disponibile în aplicația Shiny for Python, așa că în continuare putem adăuga în sfârșit un fișier JavaScript.

Cum să adăugați scripturi JavaScript la Shiny pentru tablourile de bord Python

Să luăm o scurtă pauză de la Python și să ne concentrăm pe JavaScript. Creați o script.js dosar în interiorul www director, iar în interiorul acestuia declară a runJS() funcţie. Această funcție va fi executată când se face clic pe butonul. Logica funcției este simplă – solicită utilizatorului să introducă numele său, care este apoi afișat în paragraful de mai jos. Dacă utilizatorul anulează solicitarea, se afișează un mesaj corespunzător:

function runJS() {
    let text;
    let user = prompt("Please enter your name:", "First name");

    if (user == null || user == "") {
        text = "Prompt cancelled by the user.";
    } else {
        text = "Hello " + user + "!"; 
    }

    document.getElementById("prompt_text").innerHTML = text;
}

Dar cum poți lega acum butonul de funcție? Ei bine, este un proces în doi pași:

1. Adăuga script.js la documentul head.
2. Adăugați un onclick proprietate la butonul și setați valoarea acestuia la runJS() – Aceasta va rula funcția când se face clic pe butonul.

Dacă preferați Python decât limba engleză, iată tot ce aveți nevoie:

from shiny import App, ui
from pathlib import Path


app_ui = ui.page_fluid(
    ui.tags.head(
        ui.tags.script(src="https://www.r-bloggers.com/2024/11/shiny-for-python-and-javascript-how-to-add-js-scripts-to-your-dashboards/script.js")
    ),
    ui.h3("Shiny for Python - JavaScript Example"),
    ui.input_action_button(id="btn", label="Click me!", onclick="runJS()"),
    ui.p(id="prompt_text")
)


def server(input, output, session):
    pass


www_dir = Path(__file__).parent / "www"
app = App(ui=app_ui, server=server, static_assets=www_dir)

Reîmprospătați aplicația și faceți clic pe butonul – Veți vedea o solicitare ca cea de mai jos: Imaginea 3 – Introducerea unei valori în prompt De îndată ce apăsați butonul OK, textul paragrafului este populat: Imaginea 4 – Strălucitor pentru aplicația Python cu textul paragrafului populat Dar ce se întâmplă dacă anulați solicitarea? Faceți clic pe butonul și apăsați Anulare: Imaginea 5 – Valoarea paragrafului când solicitarea este anulată Pe scurt, așa puteți adăuga JavaScript la aplicațiile Shiny pentru Python. Să încheiem lucrurile în continuare.

Rezumatul lui Shiny pentru Python și JavaScript

Adăugarea JavaScript la aplicațiile Shiny pentru Python vine cu o condiție prealabilă importantă și anume crearea și conectarea directorului de active statice. Asta dacă fișierul JS pe care intenționați să îl utilizați este stocat local. Dacă nu, adăugați pur și simplu o adresă URL web la src parametru. Sperăm că acest articol v-a servit drept bază pentru cazuri de utilizare JavaScript mai avansate în Shiny pentru Python. Spuneți-ne în secțiunea de comentarii de mai jos ce părere aveți despre această integrare și cum intenționați să utilizați JS în aplicațiile dvs. De asemenea, nu ezitați să continuați discuția pe Twitter – @appsilon. Ne-ar plăcea să auzim de la tine.

Luați o pauză de la Python – Învățați să răzuiți site-uri web dinamice în R!

Postarea a apărut mai întâi pe appsilon.com/blog/.