Integració d'aplicacions ShinyLive en un lloc web de

Gerald Girard

Dissabte, 28 de desembre de 2024 a les 9:35:22

Millora de la interactivitat per a no codificadors amb ShinyLive
L'allotjament de conjunts de dades i funcions d'ajuda a les pàgines de GitHub és una manera excel·lent de fer que els recursos siguin accessibles. Per als desenvolupadors que treballen amb R, la integració de la interactivitat pot millorar encara més la implicació dels usuaris, especialment per als no codificadors que exploren les vostres dades. ShinyLive ofereix una solució pràctica per incrustar aquesta interactivitat directament en un lloc web de pkgdown.
Malgrat la disponibilitat de recursos per incorporar aplicacions Shiny als paquets R o a les pàgines de GitHub, encara hi ha una bretxa de coneixement sobre la combinació de ShinyLive amb els llocs web de pkgdown de manera eficaç. Com a algú que manté paquets R petits amb conjunts de dades i funcions d'ajuda, és probable que tingueu l'objectiu de fer que l'exploració de dades sigui intuïtiva i fàcil d'utilitzar. ShinyLive pot salvar aquesta bretxa.
La incorporació d'una aplicació Shiny a la secció "Articles" del vostre lloc web pkgdown ofereix una manera simplificada d'oferir funcions interactives sense sobrecarregar la documentació del paquet R. Aquest mètode garanteix que fins i tot els usuaris que no estiguin familiaritzats amb la codificació puguin subconfigurar i visualitzar fàcilment les dades. És un avantatge per a desenvolupadors i usuaris per igual! 🚀
Per exemple, imagineu un conjunt de dades de salut on els usuaris puguin filtrar les dades de població per dades demogràfiques. Amb ShinyLive, podeu crear i desplegar aquesta aplicació a les pàgines de GitHub, fent que les dades siguin accessibles d'una manera dinàmica. En aquest article s'explora com aconseguir-ho pas a pas amb la configuració de l'aplicació existent. 🛠️

Comandament Exemple d'ús

selectInput S'utilitza a Shiny UI per crear un menú desplegable per seleccionar opcions. Exemple: selectInput("var", "Selecciona la variable:", choices = names(mtcars)). Això permet l'entrada dinàmica de l'usuari per a la selecció de variables.

sliderInput Crea un widget d'entrada lliscant a Shiny per permetre als usuaris seleccionar un rang de valors. Exemple: sliderInput("interval", "Interval del filtre:", min = 0, màx = 100, valor = c(25, 75)). Imprescindible per al filtratge interactiu.

renderPlot S'utilitza a la lògica del servidor Shiny per generar trames dinàmicament basades en l'entrada de l'usuari. Exemple: sortida$trama

filter A function from dplyr to subset data based on conditions. Example: filter(get(input$var) >Una funció de dplyr a subconjunt de dades en funció de les condicions. Exemple: filter(get(input$var) >= input$range[1]). Útil per aplicar filtres definits per l'usuari als conjunts de dades.

aes_string S'utilitza a ggplot2 per configurar programàticament estètiques com els eixos x i y. Exemple: aes_string(x = entrada$var). Ideal per a la generació de trames dinàmiques.

geom_histogram Una capa ggplot2 per crear visualitzacions d'histogrames. Exemple: geom_histogram(bins = 10, farciment = "blau", color = "blanc"). Útil per visualitzar distribucions en una aplicació.

uses Sintaxi YAML a GitHub Actions per especificar accions reutilitzables. Exemple: utilitza: actions/checkout@v3. Assegura una integració perfecta amb fluxos de treball predefinits.

shinylive.js Una biblioteca de JavaScript per executar aplicacions brillants en un navegador. Exemple: . Permet incrustar aplicacions brillants a pàgines HTML estàtiques.

Shinylive.App Inicialitza i executa una aplicació ShinyLive en un contenidor HTML especificat. Exemple: const app = new Shinylive.App ("#shiny-app");. Proporciona funcionalitat d'aplicació basada en navegador.

sliderInput Crea una entrada lliscant per a la selecció de rang numèric. Exemple: sliderInput("interval", "Interval del filtre:", min = 0, màx = 100, valor = c(25, 75)). Afegeix un filtratge d'interval dinàmic per als usuaris.

Comandament	Exemple d'ús
selectInput	S'utilitza a Shiny UI per crear un menú desplegable per seleccionar opcions. Exemple: selectInput("var", "Selecciona la variable:", choices = names(mtcars)). Això permet l'entrada dinàmica de l'usuari per a la selecció de variables.
sliderInput	Crea un widget d'entrada lliscant a Shiny per permetre als usuaris seleccionar un rang de valors. Exemple: sliderInput("interval", "Interval del filtre:", min = 0, màx = 100, valor = c(25, 75)). Imprescindible per al filtratge interactiu.
renderPlot	S'utilitza a la lògica del servidor Shiny per generar trames dinàmicament basades en l'entrada de l'usuari. Exemple: sortida$trama
filter	A function from dplyr to subset data based on conditions. Example: filter(get(input$var) >Una funció de dplyr a subconjunt de dades en funció de les condicions. Exemple: filter(get(input$var) >= input$range[1]). Útil per aplicar filtres definits per l'usuari als conjunts de dades.
aes_string	S'utilitza a ggplot2 per configurar programàticament estètiques com els eixos x i y. Exemple: aes_string(x = entrada$var). Ideal per a la generació de trames dinàmiques.
geom_histogram	Una capa ggplot2 per crear visualitzacions d'histogrames. Exemple: geom_histogram(bins = 10, farciment = "blau", color = "blanc"). Útil per visualitzar distribucions en una aplicació.
uses	Sintaxi YAML a GitHub Actions per especificar accions reutilitzables. Exemple: utilitza: actions/checkout@v3. Assegura una integració perfecta amb fluxos de treball predefinits.
shinylive.js	Una biblioteca de JavaScript per executar aplicacions brillants en un navegador. Exemple: . Permet incrustar aplicacions brillants a pàgines HTML estàtiques.
Shinylive.App	Inicialitza i executa una aplicació ShinyLive en un contenidor HTML especificat. Exemple: const app = new Shinylive.App ("#shiny-app");. Proporciona funcionalitat d'aplicació basada en navegador.
sliderInput	Crea una entrada lliscant per a la selecció de rang numèric. Exemple: sliderInput("interval", "Interval del filtre:", min = 0, màx = 100, valor = c(25, 75)). Afegeix un filtratge d'interval dinàmic per als usuaris.

Creació d'eines interactives d'exploració de dades amb Shinylive

El primer script, creat amb R i Shiny, se centra a crear una interfície dinàmica que permeti als usuaris explorar conjunts de dades de manera interactiva. El L'ordre és essencial per permetre als usuaris triar variables d'un menú desplegable de manera dinàmica, adaptant l'aplicació a les seves necessitats. Combinat amb , els usuaris poden perfeccionar encara més la seva exploració seleccionant un interval específic de valors per filtrar les dades. Per exemple, en un conjunt de dades com , els usuaris poden seleccionar "mpg" com a variable i utilitzar el control lliscant per aïllar els cotxes amb un quilometratge entre 20 i 30. Aquesta combinació garanteix una interfície fàcil d'utilitzar i intuïtiva. 🚀

La lògica del servidor complementa la interfície d'usuari generant sortides reactives basades en les entrades de l'usuari. Aquí, el La funció és crucial: processa el conjunt de dades filtrat i genera visualitzacions dinàmiques sobre la marxa. La integració de dplyr's La funció permet un subconjunt perfecte del conjunt de dades, mentre que el de ggplot2 garanteix trames visualment atractives i informatives. Imagineu un conjunt de dades de salut on un usuari pugui filtrar els intervals d'edat i veure a l'instant la distribució de les mètriques de salut: aquest script fa possible aquesta interactivitat amb un esforç mínim per als desenvolupadors.

El segon script se centra a automatitzar el desplegament mitjançant GitHub Actions. Això és especialment important per mantenir i actualitzar els llocs web de pkgdown de manera eficient. Mitjançant l'ús d'a fitxer, podeu automatitzar el procés d'impulsar actualitzacions i desplegar l'aplicació ShinyLive. Comandaments de tecla com Assegureu-vos que s'utilitza el codi més recent del dipòsit, mentre que la configuració específica de Shinylive s'integra perfectament al flux de treball. Per exemple, imagineu-vos actualitzar la vostra aplicació amb filtres o funcions nous: aquesta automatització garanteix que els canvis es reflecteixin en línia immediatament, estalviant temps i reduint els errors manuals. ⚙️

La tercera solució consisteix a embolicar l'aplicació Shiny en un fitxer HTML estàtic. Mitjançant l'ús , els desenvolupadors poden incrustar l'aplicació directament al seu lloc web pkgdown, evitant la necessitat d'un servidor R actiu. Aquest mètode fa que l'aplicació sigui accessible per als usuaris sense instal·lar R, millorant l'accessibilitat. Per exemple, un professor podria compartir una aplicació interactiva sobre dades de població amb els estudiants, que la poden explorar directament des dels seus navegadors. Aquesta solució és especialment valuosa per als no codificadors, ja que transforma conjunts de dades complexos en una experiència atractiva i educativa. 🌐

Inserir una aplicació brillant en un lloc web de pkgdown mitjançant Shinylive

Solució 1: R amb Shinylive per a la integració de front-end i backend

# app.R
# Load necessary libraries
library(shiny)
library(dplyr)
library(ggplot2)

# UI definition
ui <- fluidPage(
  titlePanel("Interactive Data Viewer"),
  sidebarLayout(
    sidebarPanel(
      selectInput("var", "Select Variable:",
                  choices = names(mtcars)),
      sliderInput("range", "Filter Range:",
                  min = 0, max = 100, value = c(25, 75))
    ),
    mainPanel(plotOutput("plot"))
  )
)

# Server logic
server <- function(input, output) {
  output$plot <- renderPlot({
    data <- mtcars %>%
      filter(get(input$var) >= input$range[1],
             get(input$var) <= input$range[2])
    ggplot(data, aes_string(x = input$var)) +
      geom_histogram(bins = 10, fill = "blue", color = "white")
  })
}

# Run the app
shinyApp(ui, server)

Desplegant Shinylive mitjançant accions de GitHub

Solució 2: automatització del desplegament amb GitHub Actions i Shinylive

# deploy-app.yaml
# Workflow configuration
name: Deploy ShinyLive App

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repository
      uses: actions/checkout@v3

    - name: Set up R
      uses: r-lib/actions/setup-r@v2

    - name: Install dependencies
      run: |
        Rscript -e "install.packages(c('shiny', 'shinylive'))"

    - name: Deploy app
      uses: posit-dev/r-shinylive@actions-v1
      with:
        app-dir: ./

Afegeix un embolcall HTML estàtic per a l'aplicació Shiny

Solució 3: embolicar l'aplicació brillant en HTML estàtic per a la integració de pkgdown

<!DOCTYPE html>
<html>
<head>
  <title>Interactive Shiny App</title>
  <script src="shinylive.js"></script>
</head>
<body>
  <div id="shiny-app"></div>
  <script>
    const app = new Shinylive.App("#shiny-app");
    app.run();
  </script>
</body>
</html>

Millora de l'accessibilitat i el rendiment dels llocs web de pkgdown amb ShinyLive

Un poderós avantatge d'utilitzar és la seva capacitat per habilitar la interactivitat autònoma sense dependre d'un servidor R actiu. Això el fa perfecte per allotjar aplicacions en plataformes estàtiques com GitHub Pages. A diferència de les aplicacions Shiny tradicionals que necessiten suport continu del servidor, ShinyLive converteix la vostra aplicació en un paquet de JavaScript autònom. Aquest paquet es pot incrustar directament al vostre lloc web pkgdown, permetent als usuaris explorar els vostres conjunts de dades sense problemes des de qualsevol navegador. Per exemple, si el vostre paquet R inclou un conjunt de dades de mètriques de qualitat de l'aire, els usuaris podrien filtrar i visualitzar les dades de manera dinàmica sense necessitat d'instal·lar cap programari addicional. 🌍

Un altre benefici rau en la seva adaptabilitat . En incorporar funcions com ara menús desplegables i control lliscant, creeu un entorn on qualsevol persona pot interactuar amb les vostres dades. Per exemple, un professional de la salut podria examinar les dades de població seleccionant grups d'edat o regions sense necessitat d'escriure una sola línia de codi. La combinació de ShinyLive i GitHub Pages garanteix que aquestes funcions interactives siguin fàcilment accessibles i intuïtives, fent que el vostre projecte tingui un gran impacte per a un públic més ampli. 🧩

A més, ShinyLive millora el rendiment del vostre lloc web pkgdown optimitzant els recursos necessaris per executar l'aplicació. Com que tota la lògica es compila a JavaScript, les aplicacions es carreguen més ràpidament i ofereixen una interactivitat més fluida. Això és especialment útil per mostrar grans conjunts de dades, on la representació de gràfics o l'aplicació de filtres podrien introduir retards. El resultat és una experiència d'usuari de grau professional que s'alinea amb els estàndards web moderns i les expectatives d'accessibilitat. 🚀

Com puc incrustar una aplicació Shiny en un lloc web de pkgdown?
Podeu utilitzar per convertir la vostra aplicació Shiny en un paquet de JavaScript i incrustar-la al fitxer secció del vostre lloc web pkgdown.
És necessari tenir un servidor R en directe per a les aplicacions ShinyLive?
No, les aplicacions ShinyLive són autònomes i es poden executar directament en un navegador sense necessitat d'un servidor R actiu.
Puc actualitzar l'aplicació automàticament quan introdueixo canvis a GitHub?
Sí, pots utilitzar per automatitzar el desplegament. Un flux de treball com pot gestionar-ho per tu.
Quins tipus d'interaccions d'usuari puc incloure?
Podeu afegir funcions com per a desplegables i per a intervals numèrics perquè la vostra aplicació sigui molt interactiva.
ShinyLive és adequat per a no codificadors?
Absolutament! ShinyLive permet als no codificadors explorar dades mitjançant ginys interactius, cosa que la converteix en una gran eina per a l'accessibilitat.

ShinyLive ofereix una solució fàcil d'utilitzar per integrar la interactivitat als llocs web de pkgdown. En transformar les aplicacions Shiny en paquets de JavaScript preparats per al navegador, obre les portes a una visualització de dades atractiva per als usuaris de tots els nivells d'habilitat. Per exemple, un conjunt de dades sobre dades demogràfiques es pot explorar amb menús desplegables i controls lliscants senzills. 🌟

La combinació de ShinyLive amb GitHub Actions agilitza el procés de desplegament i garanteix que el vostre lloc web es mantingui actualitzat sense esforç. Tant si sou un desenvolupador com si sou un professional de les dades, aquest enfocament uneix la bretxa entre el contingut tècnic i l'experiència d'usuari intuïtiva, fent que les vostres històries de dades cobren vida en un navegador web. 📊

El contingut i els exemples es van inspirar en la documentació i els tutorials oficials de ShinyLive. Per a més detalls, visiteu el Introducció a ShinyLive .
Els fluxos de treball de desplegament s'adapten del Repositori ShinyLive GitHub , que inclou exemples de fluxos de treball de GitHub Actions i consells d'integració.
L'estratègia d'integració de pkgdown va ser guiada pel Documentació pkgdown , que ofereix informació sobre la creació i la gestió de llocs web de documentació per a paquets R.
La inspiració addicional va venir d'explorar l'exemple en directe a Pàgina de GitHub de població SC , que mostra l'aplicació del món real de ShinyLive a pkgdown.

Integració d'aplicacions ShinyLive en un lloc web de pkgdown a les pàgines de GitHub

Creació d'eines interactives d'exploració de dades amb Shinylive

Inserir una aplicació brillant en un lloc web de pkgdown mitjançant Shinylive

Desplegant Shinylive mitjançant accions de GitHub

Afegeix un embolcall HTML estàtic per a l'aplicació Shiny

Millora de l'accessibilitat i el rendiment dels llocs web de pkgdown amb ShinyLive