Uso de Shiny con Quarto para la interactividad

Introducción

Ahora se pueden integrar aplicaciones Shiny interactivas directamente en sus documentos Quarto, lo que le permite combinar texto narrativo con aplicaciones reactivas en vivo que se ejecutan íntegramente en el navegador. Con la extensión Quarto Shinylive y los componentes estándar de Shiny, puede crear, mostrar e interactuar con aplicaciones Shiny sin necesidad de un servidor dedicado. Este tutorial proporciona una guía detallada sobre cómo incrustar una aplicación Shiny, personalizar su apariencia y resolver problemas comunes.

1. Requisitos previos

Antes de empezar, asegúrese de que dispone de lo siguiente:

• Quarto instalado: Descarga e instala Quarto desde quarto.org.

• Shinylive Extensión Quarto: Añada la extensión Shinylive a su proyecto ejecutando:

  quarto add quarto-ext/shinylive

• Configurar filtros: En el YAML de tu documento (o en tu _quarto.yml), incluye el filtro Shinylive:

  filters:
    - shinylive

• Shiny y bslib: Asegúrate de que los paquetes shiny y bslib están instalados en R.

2. Creación de una aplicación Shiny básica incrustada

A continuación se muestra un ejemplo de una aplicación Shiny sencilla incrustada directamente en un documento Quarto utilizando un bloque de código {shinylive-r}. Esta aplicación muestra un histograma del conjunto de datos mtcars con un control deslizante interactivo para ajustar el número de bins.

Guía paso a paso

1. Definir la interfaz de usuario:
   Utilice page_sidebar() para crear un diseño con una barra lateral para las entradas y un panel principal para las salidas.

2. Crear entradas:
   Incluya un sliderInput() en la barra lateral para seleccionar el número de bins para el histograma.

3. Mostrar salida:
   Utilice plotOutput() en el panel principal para mostrar el histograma.

4. Definir la lógica del servidor:
   En la función del servidor, utilice renderPlot() para calcular el histograma basándose en la entrada del control deslizante.

5. Ejecutar la aplicación:
   Envuelva las definiciones de la interfaz de usuario y del servidor en una llamada a shinyApp().

Ejemplo básico de aplicación Shiny de R incrustada

Código fuente

```{shinylive-r}
#| standalone: true
#| viewerHeight: 650

library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "Hello Shiny in Quarto",
  sidebar = sidebar(
    sliderInput("bins", "Number of bins:", min = 5, max = 30, value = 10)
  ),
  plotOutput("distPlot")
)

server <- function(input, output) {
  output$distPlot <- renderPlot({
    x <- mtcars$mpg
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    hist(x, breaks = bins, col = "skyblue", border = "white",
         main = "Histogram of MPG", xlab = "Miles Per Gallon")
  })
}

shinyApp(ui = ui, server = server)
```

Nota

• standalone: true: Esta opción indica que este bloque de código representa una aplicación Shiny completa.
• viewerHeight: 650: Esta opción establece la altura del visor de la aplicación.

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| viewerHeight: 650

library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "Hello Shiny in Quarto",
  sidebar = sidebar(
    sliderInput("bins", "Number of bins:", min = 5, max = 30, value = 10)
  ),
  plotOutput("distPlot")
)

server <- function(input, output) {
  output$distPlot <- renderPlot({
    x <- mtcars$mpg
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    hist(x, breaks = bins, col = "skyblue", border = "white",
         main = "Histogram of MPG", xlab = "Miles Per Gallon")
  })
}

shinyApp(ui = ui, server = server)

Personalización de la experiencia Shiny integrada

Si desea mostrar el editor de código junto con la aplicación Shiny en ejecución (lo que permite a los usuarios modificar y volver a ejecutar la aplicación), puede incluir componentes adicionales:

Código fuente

```{shinylive-r}
#| standalone: true
#| components: [editor, viewer]
#| viewerHeight: 650

library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "Editable Shiny App in Quarto",
  sidebar = sidebar(
    sliderInput("bins", "Number of bins:", min = 5, max = 30, value = 10)
  ),
  plotOutput("distPlot")
)

server <- function(input, output) {
  output$distPlot <- renderPlot({
    x <- mtcars$mpg
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    hist(x, breaks = bins, col = "skyblue", border = "white",
         main = "Histogram of MPG", xlab = "Miles Per Gallon")
  })
}

shinyApp(ui = ui, server = server)
```

Nota

• El uso de components: [editor, viewer] muestra tanto el código fuente de la aplicación como la aplicación en ejecución.
• También puedes ajustar el diseño utilizando #| layout: vertical si prefieres que el editor se apile sobre el visor.

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| components: [editor, viewer]
#| viewerHeight: 650

library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "Editable Shiny App in Quarto",
  sidebar = sidebar(
    sliderInput("bins", "Number of bins:", min = 5, max = 30, value = 10)
  ),
  plotOutput("distPlot")
)

server <- function(input, output) {
  output$distPlot <- renderPlot({
    x <- mtcars$mpg
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    hist(x, breaks = bins, col = "skyblue", border = "white",
         main = "Histogram of MPG", xlab = "Miles Per Gallon")
  })
}

shinyApp(ui = ui, server = server)

Nota

Este ejemplo muestra el editor de código fuente sobre la aplicación en ejecución, lo que permite modificar el código en tiempo real.

Ejercicio interactivo

Prueba un ejercicio para mejorar la aplicación integrada. Por ejemplo, modifica el color del histograma o añade un nuevo control de entrada. Experimente editando el código anterior.

5. Solución de problemas y consejos de personalización

Consejos para la resolución de problemas

• Problemas de carga de activos:
  Si su aplicación no se carga, compruebe que la extensión Shinylive está añadida correctamente y que su documento YAML incluye:

  filters:
    - shinylive

• Tamaño del visor:
  Si la aplicación parece demasiado pequeña, ajuste la opción viewerHeight.

• Errores en la aplicación:
  Comprueba la consola del navegador en busca de errores y asegúrate de que todos los paquetes necesarios estén instalados.

Consejos de personalización

• Uso de bslib para el estilo:
  Aproveche el paquete bslib para personalizar el tema y la apariencia de su aplicación.

• Ajustes de diseño:
  Utilice contenedores de diseño Quarto (por ejemplo, column-page-inset) para mejorar la visualización de las aplicaciones incrustadas, especialmente cuando el editor y el visor se muestran uno al lado del otro.

• Visibilidad del editor:
  Utilice la opción components para activar o desactivar el editor de código, dependiendo de si desea permitir modificaciones por parte del usuario.

6. Consideraciones sobre el rendimiento

• Eficiencia reactiva:
  Optimice las expresiones reactivas dentro de su aplicación Shiny para garantizar un rendimiento fluido.

• Compatibilidad con navegadores:
  Asegúrate de que tu aplicación se ejecuta en navegadores modernos que admitan las API necesarias, como OffscreenCanvas.

• Almacenamiento en caché de activos:
  La extensión Shinylive gestiona el almacenamiento en caché de los activos automáticamente. Si experimenta retrasos, compruebe que los recursos se han almacenado correctamente en la caché.

Lecturas adicionales

• Explicación de los bloques de código interactivo
  Aprenda a crear y personalizar bloques de código interactivos en Quarto Live.
• Carga y uso de paquetes
  Descubra técnicas para instalar y cargar paquetes R adicionales.
• Shinylive para R
  Profundice en el ecosistema Shinylive para ejecutar aplicaciones Shiny en el navegador.
• Referencia de opciones de celda
  Explore las opciones de configuración avanzadas disponibles para bloques de código interactivos.

Conclusión

La integración de aplicaciones Shiny en documentos Quarto mediante la extensión Shinylive transforma sus páginas estáticas en experiencias interactivas, lo que le permite compartir contenido reactivo en directo sin necesidad de un servidor dedicado. Experimenta con los ejemplos proporcionados y personaliza tu aplicación para adaptarla a las necesidades de tu proyecto.

Disfrute codificando e integrando aplicaciones Shiny interactivas en sus documentos Quarto!

Explorar más artículos

Nota

Aquí hay más artículos de la misma categoría para ayudarte a profundizar en el tema.