1.
Q u 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
julio.mulero@ua.es
Departamento de Matem ticas
Universidad de Alicante
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 1 / 54

2.
Q u 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
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 2 / 54

3.
Q u 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
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 3 / 54

4.
Q u 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:
i n stall . p a c k a g e s ( " s h in y " )
l i brary ( " s h in y " )
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 4 / 54

5.
Q u 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
s y ste m . f i l e ( " e x a m p l e s " , p ackage = " s h in y " )
r u nE x a m pl e ( " 01 _ h e ll o " ) # un h i s togr am a
r u nE x a m pl e ( " 02 _ t e x t " ) # t a bla s y d a t a fra me s
r u nE x a m pl e ( " 03 _ r e a c tiv it y " ) # u n a e xpres i n r e a c t i va
r u nE x a m pl e ( " 04 _ m p g " ) # v a r i abl e s g l o b a l e s
r u nE x a m pl e ( " 05 _ s l iders " ) # b a rras d e s liza ble s
run Example (" 06 _ tabsets ") # varias pesta as
run Example (" 07 _ widgets ") # textos de ayuda y botones
run Example (" 08 _ html ") # Shiny desde HTML
r u nE x a m pl e ( " 09 _ u p loa d " ) # c a rga de a r c h i v o s
r u nE x a m pl e ( " 10 _ d o w n l o a d " ) # d e s c a r g a de a r c h i v o s
r u nE x a m pl e ( " 11 _ t i me r " ) # d a y h o r a
Ver galer a Rstudio
Ver galer a Showmeshiny
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 5 / 54

6.
Q u 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
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 6 / 54

7.
Q u 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:
New project d New directory
Project Type:
d 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).
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 7 / 54

8.
Q u 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
z
$
ui.R server.R
,
Outputs
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 8 / 54

9.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
Un primer ejemplo
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 9 / 54

10.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
El archivo u i . R
l i brary ( s h in y )
# UI
s h in yU I ( f l u i dP a g e (
# T tulo de la aplicaci n
t i t l eP a n el ( " L o s h i s to gram a s " ) ,
# Columna lateral con una barra d e slizable para el n mero de
# i n tervalos
s i d e ba rL a y o u t (
s i d e ba rP a n e l (
s l i d e rI n p u t ( " b i n s " ,
" N m e r o de i n t e rva lo s : " ,
min = 1 ,
max = 50 ,
value = 30)
),
# Panel p r incipal con el g r fico generado
main Panel (
p l o tO u t pu t ( " d i s tP l ot " )
)
)
J u
)
lio
)M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 10 / 54

11.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
El archivo s e r v e r . R
l i brary ( s h in y )
# SERVER
s h i n yS e r ve r ( f u n c t i o n ( i n p ut , o u tpu t ) {
# La e x p resi n que obtiene el h i stograma es
# un r e n d e rP l o t q u e q uiere d eci r q u e :
#
# 1) Es " r e a c t i v a " y d e b e re - e j e c uta rs e a u to m t i c a ment e
# c u a ndo el input c a m bie .
# 2) El o u tpu t es un gr f i c o .
o u tpu t $ d i s tP l o t < - r e nd e rP l o t ({
x <- faithful [, 2] # Old Faithful Geyser data
bins <- seq( min ( x ) , max ( x ) , length . out = input $ bins + 1)
# Dibujar el h i stograma con dicho n mero de i n tervalos
hist (x, breaks = bins , col = ' darkgray ', border = ' white ',
m a i n = ' H i s t og ram a ' )
})
})
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 11 / 54

12.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
Lanzando la aplicaci n
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 12 / 54

13.
Q u 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:
l i brary ( s h in y )
# UI
u < - s h in yU I ( T i p oD eP a g i n a (
))
# SERVER
s < - s h i n yS e r ve r ( f u n c t io n ( i n p ut , o utpu t ) {
})
s h i n yA p p ( ui = u , s e rve r = s )
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 13 / 54

14.
Q u 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 .
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 14 / 54

15.
Q u 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
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 15 / 54

16.
Q u 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 e s t ru c t u ra (barras laterales, paneles, pesta as, etc.).
2 El a s p e c t o (colores, tipos de fuentes, etc.).
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 16 / 54

17.
Q u 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
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 17 / 54

18.
Q u 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.
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 18 / 54

19.
Q u 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:
l i brary ( s h in y )
# UI
s h in yU I ( f l u i dP a g e(
# T t u l o de la a p l i c a c i n
t i t l eP a n e l ( " T t u l o " ) ,
# C o n t enid o de la a p l i c a c i n
s i d e b arL a y o u t (
# P a ne l l a tera l
sidebar Panel (" T tulo d e l panel lateral ",
C o ntenido
),
# P a ne l p r i n cipa l
m a i nP a n e l (
C o ntenido
)
)
))
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 19 / 54

20.
Q u 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.
s h in yU I ( f l u i dP a g e (
t i t l eP a n e l ( " H e ll o S h in y ! " ) ,
f l u i dR o w (
c o lum n (3 ,
w e l lP a n e l (
s l i d e rI n p u t ( " o b s 1 " , " N u m b er of o b s er vati on s : " ,
m i n = 1 , m a x = 1 00 0 , v a lu e = 5 0 0 )
) ) ,
c o lum n (8 ,
p l o tO u t pu t ( " d i s tP l o t1 " )
) ) ,
f l u i dR o w (
c o lum n (2 ,
w e l lP a n e l (
s l i d e rI n p u t ( " o b s 2 " , " N u m b er of o b s er vati on s : " ,
m i n = 1 , m a x = 1 00 0 , v a lu e = 5 0 0 )
) ) ,
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 20 / 54

21.
Q u 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.
m a i nP a n el (
t a b s e tP a n e l (
t a bP a n e l ( " P l o t " , p l o tO u t pu t ( " p l ot " ) ) ,
tab Panel (" Summary ", v e rbatim T e x t O u t p u t (" summary " ) ) ,
tab Panel (" Table ", table Output (" table "))
) ) ) ) )
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 21 / 54

22.
Q u 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.
s i d e b arL a y o u t (
s i d e ba rP a n e l (
c o nditional Panel ( c o ndition =" input . c o nditioned P a n e l s = = '
hist ' " ,
...
),
c o nditional Panel ( c o ndition =" input . c o nditioned Panels = = '
datos ' " ,
...
) ) ,
m a i nP a n e l (
t a b s e tP a n e l (
t a bP a nel( " hist " ,
...
),
t a bP a n e l ( " d a to s " ,
...
),
id = " c o n d it ion edP a nel s "
) ) ) ) )
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 22 / 54

23.
Q u 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
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 23 / 54

24.
Q u 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
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 24 / 54

25.
Q u 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
i n stall . p a c k a g e s ( " s h i n yth eme s " )
y escribir en el archivo ui.R:
l i brary ( s h in y )
l i brary ( s h i n yt heme s )
# UI
shiny UI ( fluid Page ( theme = s h inytheme (" cerulean "),
...
))
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 25 / 54

26.
Q u 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
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 26 / 54

27.
Q u 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!
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 27 / 54

28.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
Incluyendo contenido de tipo HTML
# P a ne l l a tera l
s i d e ba rP a n e l ( h5 ( " En e s t a a p l i c a c i n p o d r s p r a cti ca r g r a n
p a rt e de l o s c o n t enid o s v i stos en c las e . " ) ,
h4 ( " L a s v a r i ab le s c u a n tit ativ a s d i s c reta s s o n v a r i a ble s c u y o
conjunto d e posibles valores e s finito o infinito n u merable
. Para o r ganizar estos datos s e utilizan las ", span (" tablas
de f r e c uen ci a . " , s tyl e = " c o lo r : r e d " ) ) ,
br () ,
p( a c t i o n B u t t o n (" renovar ", " Nuevos datos " ) , align =" right " ) ,
br () ,
p( img ( src =" ua. png ", height = 45 , width = 200) , align =" center " ) ,
p ( " A p licaci n r e a l izad a por " , a ( "J u li o M u ler o" , href = " m a ilto:
j u li o . m u l e ro @u a . es " ) , " . " )
)
# P a ne l p r i n cipa l
m a i nP a n e l (
) ) ) )
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 28 / 54

29.
Q u 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
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 29 / 54

30.
Q u 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 modi caci 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.
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 30 / 54

31.
Q u 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!
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 31 / 54

32.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
(5) Esquema simple: u i . R
l i brary ( s h in y )
s h in yU I ( f l u i dP a g e (
t i t l eP a n e l ( " H e ll o S h in y ! " ) ,
s i d e ba rL a y o u t (
s i d e ba rP a n e l (
s l i d erI n p u t ( " o b s " ,
" N u mbe r of o b s e rvat ion s : " ,
m i n = 1 ,
max = 1000 ,
value = 500)
),
m a i nP a n e l (
p l o tO u t pu t ( " d i s tP l o t " )
) ) ) )
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 32 / 54

33.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
(5) Esquema simple: s e r v e r . R
l i brary ( s h in y )
s h i n yS e r ve r ( f u n c t i o n ( i n p ut , o u tpu t ) {
o u tpu t $ d i s tP l o t < - r e nd e rP l o t ({
d i s t < - r n or m ( i n pu t $ o b s )
h i s t ( d i s t )
})
})
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 33 / 54

34.
Q u 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:
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 34 / 54

35.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
(6) Esquema simple II: u i . R
l i brary ( " s h in y " )
s h in yU I ( f l u i dP a g e (
t i t l eP a n e l ( " E s quem a s i mpl e II " ) ,
s i d e ba rL a y o u t (
s i d e b arP a n e l (
s e l e c tI n p u t ( i n pu tI d = " n B r eak s " ,
l a be l = " N u mbe r of bins in h i s to gra m (
a p p r oxi mat e ) : " ,
c h oices = c (10 , 20 , 35 , 5 0 ) ,
s e l e c t e d = 2 0 ) ,
checkbox Input ( input Id = " i n dividual Obs ",
l a b el = s t ron g( " S h ow i n d i v idu a l o b s e r v a t i o ns
" ) ,
v a l ue = F A LSE )
),
m a i nP a n e l (
plot Output ( output Id = " plot Out ", height = " 300 px"),
text O u t p u t ( output Id = " text Out ")
) ) ) )
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 35 / 54

36.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
(6) Esquema simple II: s e r v e r . R
s h i n yS e r ve r ( f u n c t i o n ( i n p ut , o u tpu t ) {
o u tpu t $ p l o tO u t < - r e n de rP l o t ({
hist ( faithful $ eruptions , breaks = as. numeric ( input $ n Breaks ))
if ( i n pu t $ i n d i v idua lO b s ) r u g ( f a i t h f u l $ e r u p tion s )
})
o u tpu t $ t e x tO u t < - r e n de rT e x t ({
if ( i n pu t $ i n d i v idua lO b s ) f a i t h f u l $ e r u p ti on s
else NULL
})
})
Algo parecido, aunque no igual, puede consultarse en:
Ver enlace
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 36 / 54

37.
Q u 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
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 37 / 54

38.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
(7) Los inputs: u i . R
l i brary ( s h in y )
# UI
s h in yU I ( f l u i dP a g e (
# T tulo de la aplicaci n
t i t l eP a n el ( " L o s h i s to gram a s " ) ,
# Columna lateral con una barra d e slizable para el n mero de
# i n tervalos
s i d e ba rL a y o u t (
s i d e ba rP a n e l (
s l i d e rI n p u t ( " b i n s " ,
" N m e r o de i n t e rva lo s : " ,
min = 1 ,
max = 50 ,
value = 30)
),
# Panel p r incipal con el g r fico generado
main Panel (
p l o tO u t pu t ( " d i s tP l ot " )
)
)
J u
)
lio
)M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 38 / 54

39.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
(7) Los inputs: s e r v e r . R
l i brary ( s h in y )
# SERVER
s h i n yS e r ve r ( f u n c t i o n ( i n p ut , o u tpu t ) {
# La e x p resi n que obtiene el h i stograma es
# un r e n d e rP l o t q u e q uiere d eci r q u e :
#
# 1) Es " r e a c t i v a " y d e b e re - e j e c uta rs e a u to m t i c a ment e
# c u a ndo el input c a m bie .
# 2) El o u tpu t es un gr f i c o .
o u tpu t $ d i s tP l o t < - r e nd e rP l o t ({
x <- faithful [, 2] # Old Faithful Geyser data
bins <- seq( min ( x ) , max ( x ) , length . out = input $ bins + 1)
# Dibujar el h i stograma con dicho n mero de i n tervalos
hist (x, breaks = bins , col = ' darkgray ', border = ' white ',
m a i n = ' H i s t og ram a ' )
})
})
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 39 / 54

40.
Q u 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.
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 40 / 54

41.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
De input a output: s e r v e r . 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
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 41 / 54

42.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
De input a output: s e r v e r . 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
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 42 / 54

43.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
De input a output: s e r v e r . R
l i brary ( s h in y )
# SERVER
s h i n yS e r ve r ( f u n c t i o n ( i n p ut , o u tpu t ) {
# La e x p resi n que obtiene el h i stograma es
# un r e n d e rP l o t q u e q uiere d eci r q u e :
#
# 1) Es " r e a c t i v a " y d e b e re - e j e c uta rs e a u to m t i c a ment e
# c u a ndo el input c a m bie .
# 2) El o u tpu t es un gr f i c o .
o u tpu t $ d i s tP l o t < - r e nd e rP l o t ({
x <- faithful [, 2] # Old Faithful Geyser data
bins <- seq( min ( x ) , max ( x ) , length . out = input $ bins + 1)
# Dibujar el h i stograma con dicho n mero de i n tervalos
hist (x, breaks = bins , col = ' darkgray ', border = ' white ')
})
})
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 43 / 54

44.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
Los outputs: u i . 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 Signi cado
htmlOutput raw HTML
imageOutput image
plotOutput plot
tableOutput table
textOutput text
uiOutput raw HTML
verbatimTextOutput text
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 44 / 54

45.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
Los outputs: u i . R
Las funciones Output necesitan como argumento el "nombre" del output$nombre.
plotOutput("nombre")
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 45 / 54

46.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
Los outputs: u i . R
l i brary ( s h in y )
# UI
s h in yU I ( f l u i dP a g e (
# T tulo de la aplicaci n
t i t l eP a n el ( " L o s h i s to gram a s " ) ,
# Columna lateral con una barra d e slizable para el n mero de
# i n tervalos
s i d e ba rL a y o u t (
s i d e ba rP a n e l (
s l i d e rI n p u t ( " b i n s " ,
" N u mbe r of b i n s : " ,
m i n = 1 ,
max = 50 ,
value = 30)
),
# Panel p r incipal con el g r fico generado
main Panel (
p l o tO u t pu t ( " d i s tP l ot " )
) ) ) )
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 46 / 54

47.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
Los outputs
En ui.R
En server.R ~
renderImage ~ imageOutput
~ Tipo de objeto
~ Imagen
renderPlot ~ plotOutput ~ Gr co
renderTable ~ tableOutput ~ Tabla
renderText ~ textOutput ~ Texto
HTML
renderText ~
renderText ~
htmlOutput ~
verbatimTextOutput ~ Texto
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 47 / 54

48.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
Los conductores reactivos: s e r v e r . 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 modi caci 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:
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 48 / 54

49.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
(8) Conductores reactivos: u i . R
l i brary ( s h in y )
s h in yU I ( f l u i dP a g e (
t i t l eP a n e l ( " La s u ces i n de F i b ona cc i " ) ,
sidebar Layout (
s i d e b arP a n e l (
n u m e ri cI n p u t ( " n " , " n : " , 10 ,
m i n = 1 , m a x = 1 0 0 )
),
m a i nP a n e l (
h3 ( " El n - s i m o t r min o es : " ) ,
t e x tO u t pu t ( " n t hV a l u e " ) ,
h3 ( " El n - s i m o t r min o es : " ) ,
t e x tO u t pu t ( " n t hV a l u eI n v " )
) ) ) )
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 49 / 54

50.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
(8) Conductores reactivos: s e r v e r . R
fib <- function ( n) ifelse (n <3 , 1 , fib (n -1) + fib (n -2) )
s h i n yS e r ve r ( f u n c t i o n ( i n p ut , o u tpu t ) {
output $ nth Value <- r e n d e r Text ({ fib ( as. numeric ( input $ n ) ) })
output $ nth Value Inv <- render Text ({ 1 / fib ( as. numeric ( input $n)
) })
})
Observemos que antes de shinyServer podemos cargar todas las funciones
necesarias. En este caso, est de nida 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.
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 50 / 54

51.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
(8) Conductores reactivos II: s e r v e r . R
Si queremos mejorar la e ciencia 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) )
s h i n yS e r ve r ( f u n ctio n( input , o u tpu t) {
c u r r e nt Fib <- reactive ({ fib ( as. numeric ( input $ n ) ) })
o u t p ut $ n t hV a l u e < - r e nd e rT e x t ({ c u rr en tF i b () })
o u t put $ nth Value Inv <- r e n d e r Text ({ 1 / c u r r e n t Fib () })
})
Observemos que:
currentFib depende del valor input$n
output$nthValue y output$nthValueInv dependen de currentFib.
y, a su vez, d
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 51 / 54

52.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
(9) Conductores reactivos II: u i . 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(...).
l i brary ( s h in y)
s h in yU I ( f l u i dP a g e (
t i t l eP a n e l ( " I n t r odu cien d o d a to s " ) ,
s i d e b arL a y o u t (
s i d e ba rP a n e l (
text Input (' vect ', ' I n troduce los datos ( s e parados p o r
comas ) ' , " 0 ,1 ,2 ")
),
m a i nP a n el (
h4 ( ' T u s d a to s s on : ' ) ,
v e r b a t i mT e x tO u t p u t ( " d a t a " ) ,
h4 ( ' La m edi a es : ' ) ,
v e r b a t i mT e x tO u t p u t ( " m e a n " )
) ) ) )
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 52 / 54

53.
Q u es shiny El dise o de la aplicaci n El contenido de la aplicaci n La interactividad de shiny
(9) Conductores reactivos II: s e r v e r . R
l i brary ( s h in y )
n u m e xtr acta l l < - f u n c t io n ( s t rin g ) {
unlist ( r e gmatches ( string , gregexpr (" [[: digit :]] +. * [[: digit :]]
* " , s t rin g ) ) , u s e . n a m es = F A LS E )
}
s h i n yS e r ve r ( f u n c t i o n ( i n p ut , o u tpu t ) {
v e cto r < - r e a c t i v e ({
as. n u m eric ( n u mextractall ( input $ vect ))
})
o u tpu t $ d a t a < - r e n de rP r i nt ({
v e cto r ()
})
o u tpu t $ m e a n < - r e n de rP r i nt ({
mean ( v e ctor () )
})
})
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 53 / 54

54.
Q u 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!
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 54 / 54

55.
Q u 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
julio.mulero@ua.es
Departamento de Matem ticas
Universidad de Alicante
J u l i o M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 55 / 54