Shiny es un paquete de R que permite construir aplicaciones web interactivas directamente desde R. La información que se presentará a continuación es basada en los tutoriales de shiny disponibles en RStudio.
Estructura de una aplicación
Las aplicaciones Shiny se escriben en un script simple con nombre App.R. Este script tiene dos componentes:
- Un objeto de interfaz de usuario:
ui() - Una función del servidor:
server()
El objeto ui() controla la apariencia de la aplicación, mientras que la función server() contiene las instrucciones para construir la aplicación.
library(shiny) # Estructura de una aplicación ui <- ... server <- ... shinyApp(ui = ui, server = server)
Primer ejemplo
El primer y más sencillo de los ejemplos es Ejemplo_1, el cual grafica un histograma del conjunto de datos de R con un número de intervalos dinámico. El usuario puede cambiar el número de intervalos con un deslizador y la aplicación inmediatamente responderá a la entrada.
Para ejecutar el ejemplo original “Hello Shiny”, escriba:
library(shiny)
runExample("01_hello")
¿Cómo se ejecuta una aplicación?
Se puede ejecutar una aplicación Shiny usando el nombre de la carpeta como parámetro de la función runApp. Para nuestro primer ejemplo, tengo una carpeta llamada Ejemplo_1, entonces ejecutamos:
library(shiny)
runApp("Ejemplo_1")
Otra manera de ejecutarla, es abrir el script App.R en el editor de RStudio. RStudio reconocerá el script Shiny y proporcionará un botón Run App (en la parte superior derecha del editor).
Ejercicio 1
Cree una nueva carpeta llamada “App_1” en el directorio de trabajo. Luego, copie y pegue el código de Hello Shiny y guardalo como App.R dentro de la carpeta creada.
Luego, haga algunos cambios en su aplicación:
Cambie el título de “Hello Shiny!”.
Cambie el valor mínimo y máximo del deslizador.
Cambie el color del borde y barras del histograma.
Por defecto, las aplicaciones Shiny se muestran en modo “normal”, es decir, sin el script. Para que se muestre junto a la aplicación el script, se debe establecer en modo “showcase”, para ello se agrega lo siguiente:
runApp("App_1", display.mode = "showcase")
Ejemplos predeterminados en Shiny
El paquete Shiny tiene once ejemplos incorporados que muestran a grandes razgos como funciona.
library(shiny)
runExample ("01_hello") # histograma
runExample ("02_text") # resumen y tabla
runExample ("03_reactivity") # desplegables reactivos
runExample ("04_mpg") # boxplot reactivos
runExample ("05_sliders") # deslizadores reactivos
runExample ("06_tabsets") # varias pestanas
runExample ("07_widgets") # textos de ayuda y botones
runExample ("08_html") # Shiny desde HTML
runExample ("09_upload") # carga de archivos
runExample ("10_download") # descarga de archivos
runExample ("11_timer") # dia y hora
Interfaz ui
Shiny usa la función fluidPage() para crear una pantalla que se ajusta automáticamente a las dimensiones de la ventana del navegador. El diseño de la interfaz de usuario consiste en colocar elementos en esta función.
Los dos elementos más populares que se adicionan a fluidPage() son titlePanel() y sidebarLayout(), está última tiene dos argumentos :
La función
sidebarPanel().La función
mainPanel().
ui <- fluidPage(
titlePanel("Título"),
sidebarLayout(position = "left",
sidebarPanel("panel lateral"),
mainPanel("panel principal") ) )
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
El panel de la barra lateral aparecerá por defecto en el lado izquierdo de la aplicación. Se puede mover hacia el lado derecho dando el argumento opcional position = "right".
titlePanel() y sidebarLayout crean un diseño básico para la aplicación Shiny, pero también se pueden crear diseños más avanzados.
Se puede usar navbarPage() para proporcionarle a la aplicación una interfaz de usuario de varias páginas que incluya una barra de navegación. También se puede usar fluidRow() para crear un diseño desde un sistema de cuadrícula.
La guía completa la pueden encontrar en Guía de diseño
Contenido Shiny en HTML
| Función Shiny | Resultado |
|---|---|
| p | párrafo de texto |
| h1, h2, … h6 | encabezados por niveles |
| br | cambiar de renglón |
| div | divición de texto |
| span | línea con estilo |
| img | imagen |
| strong | texto en negrita |
| em | texto en cursiva |
| HTML | código HTML |
Encabezados
Seleccionar una función de encabezado (h1, h2, … h6) y asignar el texto que desea ver en el encabezado. Se pueden colocar varios elementos en el mismo panel si los separa con una coma.
library(shiny)
ui <- fluidPage(
titlePanel(h1("Encabezados")),
sidebarPanel(
h1("First level title"),
h2("Second level title"),
h3("Third level title"),
h4("Fourth level title"),
h5("Fifth level title"),
h6("Sixth level title")))
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
En general, se puee usar cualquier atributo de etiqueta HTML como argumento en una función de etiqueta Shiny. Para más detalles conculta: w3schools.
library(shiny)
ui <- fluidPage(
titlePanel(h1("Star Wars App")),
sidebarPanel(
h6("Shiny:", align = "center"),
h5("una nueva esperanza", align = "center"),
h4("es un periodo de cambios"),
h3("conoceras cosas impactantes"),
h2("es muy importante aprenderlas"),
h1("para ser el mejor")))
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
Formato de texto
library(shiny)
ui <- fluidPage(
titlePanel("My Shiny App"),
mainPanel(
p("p crea un parrafo de texto."),
p("Un nuevo p() inicia un nuevo párrafo. Puede cambiarse su
estilo.", style = "font-family: 'times'; font-si16pt"),
strong("strong() texto en negrita."), br(),
em("em() texto en cursiva."), br(),
code("code() texto subrallado similar al de la computadora"),
div("div() segmentos de texto con estilo similar y se puede
cambiar de color con: 'style = color:blue' ",
style = "color:blue"), br(),
p("span() es igual a div(), pero trabaja en",
span("grupos de palabras", style = "color:orange"),
"que pueden estar dentro de u párrafo.")) )
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
Imágenes
Shiny usa la función img() para colocar archivos de imagen en su aplicación.
Para insertar una imagen, debes colocar tres argumentos:
img(src = "mi_imagen.png", height = 72, width = 72)
La función img() busca el archivo de imagen en una carpeta de nombre www, el cual debe estar en el mismo directorio que el archivo App.R.Para observar un ejemplo, descargue la carpeta: Ejemplo_imagen
Para obtener mayor información sobre las funciones etiquetas adicionales consulta: Personalice ui con HTML y Glosario de etiquetas HTML de Shiny.
Widgets de control
Los Widget() son elementos web con los que el usuario puede interactuar, proporcionando una forma de intercambiar valores u opciones.
Los widgets estándar se Shiny son:
| Función Shiny | Widget |
|---|---|
actionButton() |
botón de acción |
checkInput() |
casilla de verificación |
checkboxGroupInput() |
grupo de casillas de verificación |
dateInput() |
calendario para selección de una fecha |
dateRangeInput() |
dos calendarios para seleccionar un rango de fechas |
| Función Shiny | Widget |
|---|---|
fileInput() |
carga de archivos |
helpText() |
texto de ayuda |
numericInput() |
campo para ingresar números |
radioButtons() |
conjunto de botones de selección múltiple de única respuesta |
selectInput() |
cuadro con opciones para seleccionar |
sliderInput() |
deslizador |
submitButton() |
botón de enviar |
textInput() |
ingresar texto |
Agregar un widget
Para agregar un widget() a la aplicación, se puede agregar en sidebarPanel() o en mainPanel() dentro del objeto ui.
Los primeros dos argumentos para cada widget son:
- Nombre para el widget: el usuario no verá este nombre, pero es necesario en el código, para poder acedera él.
- Etiqueta: será el nombre que el usuario podrá ver en la aplicación
Los argumentos restantes varían de un widget a otro. Éstos pueden ser valores iniciales, rangos o incrementos.
La aplicación Ejemplo_widgets muestra los diferentes widgets disponibles.
Para más información, pueden ver la Galería de Widgets.
Salida reactiva
En una salida reactiva se puede agregar cualquier salida de R, la cual responde automáticamente cuando un usuario cambia el valor de un widget.
Se pueden crear resultados reactivos en un proceso de dos pasos:
- Agregar un objeto R a la
ui(). - Indicar a Shiny cómo construir el objeto en la función server. El objeto será reactivo al enlazarlo con un widget.
Paso 1: Objetos de R en el ui()
| Función Output | Crea |
|---|---|
dataTableOutput() |
tabla de datos |
imageOutput() |
imagen |
plotOutput() |
gráfico |
tableOutput() |
tabla |
textOutput() |
texto |
verbatimTextOutput() |
texto latex |
Paso 2: Construcción del objeto en el server()
Esto se debe hacer en la función server(), la cual crea un objeto de nombre output que contiene todo el código necesario para actualizar los objetos R de la aplicación.
Cada objeto R necesita tener su propia entrada, cuyo nombre debe coincidir con el elemento reactivo que se creó en la ui().
Un aplicación con el ui() y el server() se muestra en: Ejemplo_salida_reactiva.
Cada entrada en el objeto output debe ser el resultado de una función render de Shiny, la cual captura y procesa una expresión R. Se debe usar la función render que corresponde al tipo de objeto reactivo que se está creando.
| Función render | Crea |
|---|---|
renderDataTable() |
tabla de datos |
renderImage() |
imagen |
renderPlot() |
gráfico |
renderPrint() |
cualquier salida impresa |
renderTable() |
tabla |
renderText() |
texto |
Ejercicio 2
Crea una segunda aplicación personalizada, donde puedas incluir una salida reactiva. Puedes partir del ejemplo presentado.