Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Aplicaciones interactivas diseñadas con shiny

Julio Mulero
[email protected]

Departamento de Matemáticas
Universidad de Alicante

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 1 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Outline

1 Qué es shiny

2 El diseño de la aplicación
La estructura de la interfaz
El aspecto de la interfaz

3 El contenido de la aplicación

4 La interactividad de shiny

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 2 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Outline

1 Qué es shiny

2 El diseño de la aplicación
La estructura de la interfaz
El aspecto de la interfaz

3 El contenido de la aplicación

4 La interactividad de shiny

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 3 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Qué es shiny

Shiny

Shiny es un paquete de R que permite construir aplicaciones web interactivas a

partir de los scripts de R.

Instalación

Si aún no tienes instalado Shiny:

install . packages (" shiny " )

library (" shiny ")

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 4 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Qué es shiny

Ejemplos de aplicaciones

system . file (" examples " , package =" shiny ")

runExample ( " 01 _ hello ") # un histograma

runExample ( " 02 _ text ") # tablas y dataframes
runExample ( " 03 _ reactivity ") # una expresi ón reactiva
runExample ( " 04 _ mpg ") # variables globales
runExample ( " 05 _ sliders ") # barras deslizables
runExample ( " 06 _ tabsets ") # varias pesta ñ as
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 ") # día y hora

Ver galería Rstudio

Ver galería Showmeshiny

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 5 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Qué es shiny

Interés de shiny en la docencia

La interactividad de estas aplicaciones permite manipular los datos sin

tener que manipular el código. De hecho, en la naturaleza de shiny
subyace un concepto aún más fuerte: la reactividad (habría que comentar
estas dos características).

Las aplicaciones web creadas con shiny pueden estar enfocadas a

numerosos ámbitos: investigación, profesional o, por supuesto, la docencia.
Estas aplicaciones pueden abrirse desde el propio ordenador, una tablet o
incluso el móvil.

En particular, shiny permite diseñar recursos docentes que ayuden al

profesor mostrar los contenidos de las asignaturas en clase.
Ver correlación

Estos recursos pueden facilitar a los alumnos la práctica y la ejercitación

de los problemas desde su propia casa con ejercicios de carácter diverso.
Serán más o menos complejos dependiendo de las intervenciones del sujeto
y del modo en que realice los ejercicios, haciéndole saber a este cual es su
nivel de desarrollo o aprendizaje.

Ver problemas
Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 6 / 54
Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Creando un proyecto shiny

File Create project from: Project Type:

New project . New directory . Shiny Web Application
El resultado es un directorio nuevo con el nombre que hayamos elegido en el que
aparecen dos archivos (ui.R y server.R).

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 7 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Creando un proyecto shiny

Una app de shiny consta (al menos) de dos archivos:

un script para la interfaz del usuario, (user-interface, ui.R), que recibe los inputs y
muestra los outputs, y

un script para los cálculos (server.R), que realiza los cálculos necesarios.

Inputs

$
ui.R o
/ server.R

z
Outputs

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 8 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Un primer ejemplo

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 9 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

El archivo ui.R
library ( shiny )

# UI
shinyUI ( fluidPage (

# Tí tulo de la aplicaci ón
titlePanel ( " Los histogramas " ) ,

# Columna lateral con una barra deslizable para el nú mero de

# intervalos
sidebarLayout (
sidebarPanel (
sliderInput (" bins " ,
"Nú mero de intervalos :" ,
min = 1,
max = 50 ,
value = 30)
),

# Panel principal con el gr á fico generado

mainPanel (
plotOutput ( " distPlot ")
)
)
))Mulero
Julio ([email protected]) Aplicaciones diseñadas con shiny 10 / 54
Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

El archivo server.R

library ( shiny )

# SERVER
shinyServer ( function ( input , output ) {

# La expresi ón que obtiene el histograma es

# un renderPlot que quiere decir que :
#
# 1) Es " reactiva " y debe re - ejecutarse autom á ticamente
# cuando el input cambie .
# 2) El output es un gr á fico .

output $ distPlot <- renderPlot ({

x <- faithful [, 2] # Old Faithful Geyser data
bins <- seq ( min (x ) , max (x) , length . out = input $ bins + 1)

# Dibujar el histograma con dicho nú mero de intervalos

hist (x , breaks = bins , col = ' darkgray ', border = ' white ',
main = ' Histograma ')
})
})

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 11 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Lanzando la aplicación

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 12 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Lanzando la aplicación

El código de la aplicación shiny puede estar también dentro de un solo script y puede
ejecutarse de la siguiente manera:

library ( shiny )

# UI
u <- shinyUI ( TipoDePagina (

))

# SERVER
s <- shinyServer ( function ( input , output ) {

})

shinyApp ( ui = u , server = s)

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 13 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Compartiendo la aplicación

shinyapps: 440$ al año una suscripción básica / 1100$ al año una suscripción
estándar.

Shiny server!: gratuito.

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 14 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Outline

1 Qué es shiny

2 El diseño de la aplicación
La estructura de la interfaz
El aspecto de la interfaz

3 El contenido de la aplicación

4 La interactividad de shiny

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 15 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

El diseño de la interfaz

Todos los aspectos del diseño se indican en el archivo ui.R.

El diseño de la interfaz de usuario está relacionado con:
1 La estructura (barras laterales, paneles, pestañas, etc.).
2 El aspecto (colores, tipos de fuentes, etc.).

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 16 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Outline

1 Qué es shiny

2 El diseño de la aplicación
La estructura de la interfaz
El aspecto de la interfaz

3 El contenido de la aplicación

4 La interactividad de shiny

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 17 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

La estructura de la interfaz

La estructura de la interfaz de usuario puede ser de tres tipos:

pageWithSideBar (deprecated=obsoleto, fluidPage es más exible).

fluidPage.
fixedPage (igual que el anterior, pero fuerza la anchura de la página web).

En cualquier caso:

titlePanel: título de la aplicación.

sidebarLayout:
sidebarPanel: barra lateral de contenido.
mainPanel: panel principal de contenido.

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 18 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

(1) La estructura de la interfaz

La estructura básica es:

library ( shiny )

# UI
shinyUI ( fluidPage (
#Tí tulo de la aplicaci ón
titlePanel ( "Tí tulo ") ,

# Contenido de la aplicaci ón
sidebarLayout (

# Panel lateral
sidebarPanel (" Tí tulo del panel lateral " ,
Contenido
),

# Panel principal
mainPanel (
Contenido
)
)
))

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 19 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

(2) La estructura de la interfaz

Se pueden incluir las de contenido con fluidRow, column. La función wellPanel

crea un panel lateral.

shinyUI ( fluidPage (

titlePanel ( " Hello Shiny !") ,

fluidRow (

column (3 ,
wellPanel (
sliderInput (" obs1 " , " Number of observations :" ,
min = 1, max = 1000 , value = 500)
)) ,

column (8 ,
plotOutput ( " distPlot1 " )
)) ,
fluidRow (

column (2 ,
wellPanel (
sliderInput (" obs2 " , " Number of observations :" ,
min = 1, max = 1000 , value = 500)
)) ,
Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 20 / 54
Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

(3) La estructura de la interfaz

Se pueden incluir diferentes pestañas con una misma barra lateral usando las
funciones tabsetPanel y tabPanel.
mainPanel (
tabsetPanel (
tabPanel (" Plot " , plotOutput (" plot ")) ,
tabPanel (" Summary " , verbatimTextOutput (" summary ")) ,
tabPanel (" Table " , tableOutput (" table " ))
))) ))

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 21 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

(4) La estructura de la interfaz

Se pueden incluir diferentes pestañas con diferentes barras laterales usando las
funciones conditionalPanel, tabsetPanel y tabPanel.
sidebarLayout (
sidebarPanel (
conditionalPanel ( condition =" input . conditionedPanels == '
hist '" ,
...
),
conditionalPanel ( condition =" input . conditionedPanels == '
datos '" ,
...
)) ,
mainPanel (
tabsetPanel (
tabPanel (" hist " ,
...
),
tabPanel (" datos " ,
...
),
id = " conditionedPanels "
))) ))

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 22 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Outline

1 Qué es shiny

2 El diseño de la aplicación
La estructura de la interfaz
El aspecto de la interfaz

3 El contenido de la aplicación

4 La interactividad de shiny

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 23 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

El aspecto de la interfaz

El paquete shinythemes dispone de diferentes temas que cambian colores y tipos de

fuentes:

default.
cerulean.
cosmo.
flatly.
journal.
readable.
spacelab.
united.
Ver los temas

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 24 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

El aspecto de la interfaz

Para cambiar el tema de la interfaz, se debe instalar el paquete

install . packages (" shinythemes ")

y escribir en el archivo ui.R:

library ( shiny )
library ( shinythemes )

# UI
shinyUI ( fluidPage ( theme = shinytheme ( " cerulean ") ,
...
))

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 25 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Outline

1 Qué es shiny

2 El diseño de la aplicación
La estructura de la interfaz
El aspecto de la interfaz

3 El contenido de la aplicación

4 La interactividad de shiny

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 26 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Incluyendo contenido de tipo HTML

shiny function creates

p(...) A paragraph of text

h1(...) A rst level header
h2(...) A second level header
h3(...) A third level header
h4(...) A fourth level header
h5(...) A fth level header
h6(...) A sixth level header
a(...) A hyper link
br(...) A line break (e.g. a blank line)
div(...) A division of text with a uniform style
span(...) An in-line division of text with a uniform style
pre(...) Text `as is' in a xed width font
code(...) A formatted block of code
img(...) An image
strong(...) <Bold text
em(...) Italicized text
HTML(...) Directly passes a character string as HTML code

½Siempre separado por comas!

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 27 / 54
Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Incluyendo contenido de tipo HTML

# Panel lateral
sidebarPanel ( h5 (" En esta aplicaci ón podr á s practicar gran
parte de los contenidos vistos en clase .") ,
h4 (" Las variables cuantitativas discretas son variables cuyo
conjunto de posibles valores es finito o infinito numerable
. Para organizar estos datos se utilizan las " , span (" tablas
de frecuencia ." , style = " color : red ") ) ,
br () ,
p( actionButton (" renovar " , " Nuevos datos ") , align =" right ") ,
br () ,
p( img ( src =" ua . png " , height = 45 , width = 200) , align =" center ") ,
p(" Aplicaci ón realizada por " , a(" Julio Mulero " , href =" mailto :
julio . mulero@ua . es ") ," .")
)
# Panel principal
mainPanel (

))) )

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 28 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Outline

1 Qué es shiny

2 El diseño de la aplicación
La estructura de la interfaz
El aspecto de la interfaz

3 El contenido de la aplicación

4 La interactividad de shiny

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 29 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

La interactividad

Como hemos indicado anteriormente, la principal característica de las aplicaciones

creadas con shiny es su interactividad (permiten manipular los datos sin manejar el
código). Esto tiene que ver con la programación reactiva en la que cada modicación
por parte del usuario renueva todo el proceso.

En shiny, hay tres tipos de objetos relacionados con la programación reactiva:

1 reactive sources (fuentes reactivas): los inputs que se introducen en ui.R y se

envían a server.R.
2 reactive conductors (conductores reactivos): una transformación de los inputs que
se usa en server.R.
3 reactive endpoints (puntos nales reactivos): los outputs obtenidos en server.R y
que se envían a ui.R.

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 30 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Esquema simple

El esquema más simple toma como entrada una fuente reactiva y, a partir de ella, da
como resultado un punto nal reactivo:

Supongamos que queremos mostrar histogramas de conjuntos de datos generados por

una distribución normal. Pedimos al usuario que indique un tamaño muestral
input$obs y se obtendrá el histograma output$distPlot:

Hello Shiny!

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 31 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

(5) Esquema simple: ui.R

library ( shiny )

shinyUI ( fluidPage (

titlePanel ( " Hello Shiny !") ,

sidebarLayout (
sidebarPanel (
sliderInput (" obs " ,
" Number of observations :" ,
min = 1,
max = 1000 ,
value = 500)
),

mainPanel (
plotOutput ( " distPlot ")
))) )

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 32 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

(5) Esquema simple: server.R

library ( shiny )

shinyServer ( function ( input , output ) {

output $ distPlot <- renderPlot ({

dist <- rnorm ( input $ obs )
hist ( dist )
})

})

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 33 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Esquema simple II

Los inputs pueden usarse tantas veces como queramos y pueden generar tantos
outputs como queramos.
Supongamos que deseamos construir/analizar el histograma de cierto conjunto de
datos jado faithful$eruptions. Pedimos al usuario que indique:

un número de intervalos: un parámetro numérico input$nBreaks.

si desea ver las observaciones individuales mediante una marca en el histograma y la
tabla de datos: un parámetro lógico input$individualObs.
Se mostrará entonces output$plotOut (y dependiendo de haber marcado la opción,
más cosas).
El esquema sería:

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 34 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

(6) Esquema simple II: ui.R

library ( " shiny ")

shinyUI ( fluidPage (

titlePanel ( " Esquema simple II ") ,

sidebarLayout (
sidebarPanel (
selectInput ( inputId = " nBreaks " ,
label = " Number of bins in histogram (
approximate ):" ,
choices = c (10 , 20 , 35 , 50) ,
selected = 20) ,

checkboxInput ( inputId = " individualObs " ,

label = strong ( " Show individual observations
") ,
value = FALSE )
),

mainPanel (
plotOutput ( outputId = " plotOut " , height = " 300 px ") ,
textOutput ( outputId = " textOut " )
))) )
Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 35 / 54
Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

(6) Esquema simple II: server.R

shinyServer ( function ( input , output ) {

output $ plotOut <- renderPlot ({
hist ( faithful $ eruptions , breaks = as . numeric ( input $ nBreaks ))
if ( input $ individualObs ) rug ( faithful $ eruptions )
})

output $ textOut <- renderText ({

if ( input $ individualObs ) faithful $ eruptions
else NULL
})
})

Algo parecido, aunque no igual, puede consultarse en:

Ver enlace

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 36 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Los inputs

Como se ha observado en los ejemplos anteriores, los inputs pueden ser números y
parámetros lógicos. Más generalmente, shiny dispone de los siguientes inputs que se
incorporan mediante lo que se denominan widgets (sus nombres acaban generalmente
con Input):
Tipo de input Uso

actionButton Action Button

checkboxGroupInput A group of check boxes
checkboxInput A single check box
dateInput A calendar to aid date selection
dateRangeInput A pair of calendars for selecting a date range
fileInput A le upload control wizard
helpText Help text that can be added to an input form
numericInput A eld to enter numbers
radioButtons A set of radio buttons
selectInput A box with choices to select from
sliderInput A slider bar
submitButton A submit button
textInput A eld to enter text

Shiny: Widget gallery Ver enlace

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 37 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

(7) Los inputs: ui.R

library ( shiny )

# UI
shinyUI ( fluidPage (

# Tí tulo de la aplicaci ón
titlePanel ( " Los histogramas " ) ,

# Columna lateral con una barra deslizable para el nú mero de

# intervalos
sidebarLayout (
sidebarPanel (
sliderInput (" bins " ,
"Nú mero de intervalos :" ,
min = 1,
max = 50 ,
value = 30)
),

# Panel principal con el gr á fico generado

mainPanel (
plotOutput ( " distPlot ")
)
)
))Mulero
Julio ([email protected]) Aplicaciones diseñadas con shiny 38 / 54
Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

(7) Los inputs: server.R

library ( shiny )

# SERVER
shinyServer ( function ( input , output ) {

# La expresi ón que obtiene el histograma es

# un renderPlot que quiere decir que :
#
# 1) Es " reactiva " y debe re - ejecutarse autom á ticamente
# cuando el input cambie .
# 2) El output es un gr á fico .

output $ distPlot <- renderPlot ({

x <- faithful [, 2] # Old Faithful Geyser data
bins <- seq ( min (x ) , max (x) , length . out = input $ bins + 1)

# Dibujar el histograma con dicho nú mero de intervalos

hist (x , breaks = bins , col = ' darkgray ', border = ' white ',
main = ' Histograma ')
})
})

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 39 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Los inputs

Una vez que se ha incluido un widget en ui.R (en cuya sintaxis hay que indicar el
nombre que se le da a la variable que representa), se utilizará como

input$nombre
dentro de server.R.

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 40 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

De input a output: server.R

Los inputs anteriores que se introducen en ui.R se envían a server.R y se utilizan para
obtener los outputs. Las operaciones que se realizan en server.R con los inputs y que
dan como resultado los outputs, son de tipo reactivo (sus nombres empiezan por
render y acaban dependiendo del tipo de objeto que devuelven):

Tipo de objeto que se obtiene Uso

renderImage images (saved as a link to a source le)

renderPlot plots
renderPrint any printed output
renderTable data frame, matrix, other table like structures
renderText character strings
renderUI a Shiny tag object or HTML

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 41 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

De input a output: server.R

En las funciones render, aparecerán como argumentos los input$nombre que

hayamos introducido en ui.R.
Las funciones render se asignan a objetos del tipo

output$nombre

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 42 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

De input a output: server.R

library ( shiny )

# SERVER
shinyServer ( function ( input , output ) {

# La expresi ón que obtiene el histograma es

# un renderPlot que quiere decir que :
#
# 1) Es " reactiva " y debe re - ejecutarse autom á ticamente
# cuando el input cambie .
# 2) El output es un gr á fico .

output $ distPlot <- renderPlot ({

x <- faithful [, 2] # Old Faithful Geyser data
bins <- seq ( min (x ) , max (x) , length . out = input $ bins + 1)

# Dibujar el histograma con dicho nú mero de intervalos

hist (x , breaks = bins , col = ' darkgray ', border = ' white ')
})
})

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 43 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Los outputs: ui.R

Los resultados que se han obtenido con el proceso anterior se devuelven a ui.R que
deberá mostrarlos (o no). Según el tipo de output, debe indicarse en ui.R utilizando
las siguientes opciones:

Tipo de output Signicado

htmlOutput raw HTML

imageOutput image
plotOutput plot
tableOutput table
textOutput text
uiOutput raw HTML
verbatimTextOutput text

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 44 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Los outputs: ui.R

Las funciones Output necesitan como argumento el "nombre" del output$nombre.

plotOutput("nombre")

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 45 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Los outputs: ui.R

library ( shiny )

# UI
shinyUI ( fluidPage (

# Tí tulo de la aplicaci ón
titlePanel ( " Los histogramas " ) ,

# Columna lateral con una barra deslizable para el nú mero de

# intervalos
sidebarLayout (
sidebarPanel (
sliderInput (" bins " ,
" Number of bins :" ,
min = 1,
max = 50 ,
value = 30)
),

# Panel principal con el gr á fico generado

mainPanel (
plotOutput ( " distPlot ")
))) )

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 46 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Los outputs

En server.R En ui.R Tipo de objeto

renderImage imageOutput Imagen

renderPlot plotOutput Gráco
renderTable tableOutput Tabla
renderText textOutput Texto
renderText htmlOutput HTML
renderText verbatimTextOutput Texto

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 47 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Los conductores reactivos: server.R

Hasta ahora, los inputs (fuentes reactivas) permiten obtener los outputs (puntos
nales reactivos) de manera directa. Sin embargo, a veces es necesario transformar
los inputs para hacerlos más tratables en el server.R de forma que limpiamos el
código. Esta modicación pasa por convertirlos en conductores reactivos de manera
que puedan ser dependientes y, a la vez, tener objetos dependientes.
Supongamos que queremos obtener un término de la sucesión de Fibonacci y su
inverso. Pedimos al usuario que indique una posición input$n y obtendremos
output$nthValue y output$nthValueInv. El esquema sería:

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 48 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

(8) Conductores reactivos: ui.R

library ( shiny )

shinyUI ( fluidPage (

titlePanel ( " La sucesi ó n de Fibonacci ") ,

sidebarLayout (
sidebarPanel (
numericInput (" n" , "n:" , 10 ,
min = 1, max = 100)
),

mainPanel (
h3 (" El n -é simo té rmino es :") ,
textOutput ( " nthValue ") ,
h3 (" El n -é simo té rmino es :") ,
textOutput ( " nthValueInv ")
))) )

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 49 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

(8) Conductores reactivos: server.R

fib <- function (n) ifelse (n <3 , 1, fib (n -1) + fib (n -2) )

shinyServer ( function ( input , output ) {

output $ nthValue <- renderText ({ fib ( as . numeric ( input $n) ) })
output $ nthValueInv <- renderText ({ 1 / fib ( as . numeric ( input $n)
) })
})

Observemos que antes de shinyServer podemos cargar todas las funciones

necesarias. En este caso, está denida la función fib que devuelve el n-ésimo término
de la sucesión de Fibonacci. Esta función se utiliza dos veces dentro de shinyServer.

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 50 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

(8) Conductores reactivos II: server.R

Si queremos mejorar la eciencia de nuestra aplicacion, podemos calcular en primer

lugar el término correspondiente de la sucesión y utilizarlo después en la generación
de los outputs. El archivo server.R mejorado sería:

fib <- function (n) ifelse (n <3 , 1, fib (n -1) + fib (n -2) )

shinyServer ( function ( input , output ) {

currentFib <- reactive ({ fib ( as . numeric ( input $n) ) })

output $ nthValue <- renderText ({ currentFib () })

output $ nthValueInv <- renderText ({ 1 / currentFib () })
})

Observemos que:

currentFib depende del valor input$n

output$nthValue y output$nthValueInv dependen de currentFib.
y, a su vez, d

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 51 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

(9) Conductores reactivos II: ui.R

Otra situación interesante que pueden resolver los conductores reactivos es:
supongamos, por ejemplo, que queremos que el usuario proporcione un conjunto de
datos de forma escrita. Desgraciadamente, no existe un widget que permita
introducir un vector de datos tal y como los trata R: c(...).
library ( shiny )

shinyUI ( fluidPage (

titlePanel ( " Introduciendo datos ") ,

sidebarLayout (
sidebarPanel (

textInput ( ' vect ', ' Introduce los datos ( separados por
comas ) ' , " 0 ,1 ,2 " )
),

mainPanel (
h4 ( ' Tus datos son : ') ,
verbatimTextOutput (" data ") ,
h4 ( 'La media es : ') ,
verbatimTextOutput (" mean ")
))) )
Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 52 / 54
Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

(9) Conductores reactivos II: server.R

library ( shiny )

numextractall <- function ( string ){

unlist ( regmatches ( string , gregexpr (" [[: digit :]]+\\. * [[: digit :]]
*" , string )) , use . names = FALSE )
}

shinyServer ( function ( input , output ) {

vector <- reactive ({

as . numeric ( numextractall ( input $ vect ))
})

output $ data <- renderPrint ({

vector ()
})

output $ mean <- renderPrint ({

mean ( vector () )
})

})

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 53 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Recomendaciones

½Mucho cuidado con las llaves, las comas y los paréntesis!

½Mucho cuidado con los nombres de los inputs y outputs!

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 54 / 54

Qué es shiny El diseño de la aplicación El contenido de la aplicación La interactividad de shiny

Aplicaciones interactivas diseñadas con shiny

Julio Mulero
[email protected]

Departamento de Matemáticas
Universidad de Alicante

Julio Mulero ([email protected]) Aplicaciones diseñadas con shiny 55 / 54