Integración de aplicaciones ShinyLive en un sitio web pkgdown en páginas de GitHub

Mejora de la interactividad para no programadores con ShinyLive

Alojar conjuntos de datos y funciones auxiliares en páginas de GitHub es una excelente manera de hacer que los recursos sean accesibles. Para los desarrolladores que trabajan con R, la integración de la interactividad puede mejorar aún más la participación del usuario, especialmente para los no codificadores que exploran sus datos. ShinyLive ofrece una solución práctica para incorporar dicha interactividad directamente en un sitio web pkgdown.

A pesar de la disponibilidad de recursos para incorporar aplicaciones Shiny en paquetes R o páginas GitHub, sigue habiendo una brecha de conocimiento sobre cómo combinar ShinyLive con sitios web pkgdown de manera efectiva. Como alguien que mantiene pequeños paquetes de R con conjuntos de datos y funciones auxiliares, probablemente su objetivo sea hacer que la exploración de datos sea intuitiva y fácil de usar. ShinyLive puede cerrar esta brecha.

La incorporación de una aplicación Shiny en la sección "Artículos" de su sitio web pkgdown ofrece una forma simplificada de ofrecer funciones interactivas sin sobrecargar la documentación del paquete R. Este método garantiza que incluso los usuarios que no estén familiarizados con la codificación puedan subconjuntos y visualizar datos fácilmente. ¡Es beneficioso tanto para los desarrolladores como para los usuarios! 🚀

Por ejemplo, imagine un conjunto de datos de salud donde los usuarios puedan filtrar datos de población por datos demográficos. Con ShinyLive, puede crear e implementar esta aplicación en páginas de GitHub, haciendo que los datos sean accesibles de forma dinámica. Este artículo explora cómo lograr esto paso a paso con la configuración de su aplicación existente. 🛠️

Creación de herramientas interactivas de exploración de datos con Shinylive

El primer script, creado con R y Shiny, se centra en crear una interfaz dinámica que permita a los usuarios explorar conjuntos de datos de forma interactiva. El seleccioneEntrada El comando es esencial para permitir a los usuarios elegir variables de un menú desplegable de forma dinámica, adaptando la aplicación a sus necesidades. Emparejado con control deslizanteEntrada, los usuarios pueden refinar aún más su exploración seleccionando un rango específico de valores para filtrar datos. Por ejemplo, en un conjunto de datos como mtcars, los usuarios pueden seleccionar "mpg" como variable y usar el control deslizante para aislar automóviles con un kilometraje entre 20 y 30. Esta combinación garantiza una interfaz intuitiva y fácil de usar. 🚀

La lógica del lado del servidor complementa la interfaz de usuario generando resultados reactivos basados ​​en las entradas del usuario. Aquí, el renderizarTrama Esta función es crucial: procesa el conjunto de datos filtrado y genera visualizaciones dinámicas sobre la marcha. La integración de dplyr filtrar La función permite un subconjunto perfecto del conjunto de datos, mientras que ggplot2 geom_histograma garantiza tramas visualmente atractivas e informativas. Imagine un conjunto de datos de salud donde un usuario podría filtrar rangos de edad y ver instantáneamente la distribución de métricas de salud; este script hace posible dicha interactividad con un esfuerzo mínimo para los desarrolladores.

El segundo script se centra en automatizar la implementación mediante GitHub Actions. Esto es particularmente importante para mantener y actualizar los sitios web de pkgdown de manera eficiente. Al utilizar un implementar-aplicación.yaml archivo, puede automatizar el proceso de envío de actualizaciones e implementación de la aplicación ShinyLive. Comandos clave como acciones/pago@v3 asegúrese de que se utilice el código más reciente del repositorio, mientras que la configuración específica de Shinylive se integra perfectamente en el flujo de trabajo. Por ejemplo, imagine actualizar su aplicación con nuevos filtros o funciones: esta automatización garantiza que los cambios se reflejen en línea de inmediato, lo que ahorra tiempo y reduce los errores manuales. ⚙️

La tercera solución consiste en empaquetar la aplicación Shiny en un archivo HTML estático. Al usar shinylive.js, los desarrolladores pueden insertar la aplicación directamente en su sitio web pkgdown, evitando la necesidad de un servidor R activo. Este método hace que la aplicación sea accesible para usuarios sin R instalado, lo que mejora la accesibilidad. Por ejemplo, un profesor podría compartir una aplicación interactiva sobre datos de población con los estudiantes, quienes pueden explorarla directamente desde sus navegadores. Esta solución es particularmente valiosa para quienes no codifican, ya que transforma conjuntos de datos complejos en una experiencia atractiva y educativa. 🌐

# 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)

# 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: ./

< !-- index.html -->
<!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>

Mejora de la accesibilidad y el rendimiento de los sitios web pkgdown con ShinyLive

Una poderosa ventaja de usar Brillante en vivo es su capacidad para permitir la interactividad independiente sin depender de un servidor R activo. Esto lo hace perfecto para alojar aplicaciones en plataformas estáticas como GitHub Pages. A diferencia de las aplicaciones Shiny tradicionales que necesitan soporte continuo del servidor, ShinyLive convierte su aplicación en un paquete de JavaScript autónomo. Este paquete se puede integrar directamente en su sitio web pkgdown, lo que permite a los usuarios explorar sus conjuntos de datos sin problemas desde cualquier navegador. Por ejemplo, si su paquete R incluye un conjunto de datos de métricas de calidad del aire, los usuarios podrían filtrar y visualizar los datos dinámicamente sin necesidad de instalar ningún software adicional. 🌍

Otro beneficio radica en su adaptabilidad para no codificadores. Al incorporar funciones como menús desplegables y controles deslizantes, crea un entorno en el que cualquiera puede interactuar con sus datos. Por ejemplo, un profesional de la salud podría examinar datos de población seleccionando grupos de edad o regiones sin necesidad de escribir una sola línea de código. La combinación de ShinyLive y GitHub Pages garantiza que estas funciones interactivas sean fácilmente accesibles e intuitivas, lo que hace que su proyecto tenga un gran impacto para una audiencia más amplia. 🧩

Además, ShinyLive mejora el rendimiento de su sitio web pkgdown al optimizar los recursos necesarios para ejecutar la aplicación. Dado que toda la lógica está compilada en JavaScript, las aplicaciones se cargan más rápido y ofrecen una interactividad más fluida. Esto es particularmente útil para mostrar grandes conjuntos de datos, donde la representación de gráficos o la aplicación de filtros podrían generar retrasos. El resultado es una experiencia de usuario de nivel profesional que se alinea con los estándares web modernos y las expectativas de accesibilidad. 🚀