curso shiny.pptx

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

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

Outline
1 Qu es 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 " )

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

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

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

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

Un primer ejemplo

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

El archivo s e r v e r . R
# 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 ' )
})
})

Lanzando la aplicaci n

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

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 .

Outline
1 Qu es 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.).

Outline
1 Qu es shiny

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.

(1) La estructura de la interfaz
La estructura b sica es:
# 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
)
)
))

Se pueden incluir las de contenido con fluidRow, column. La funci n wellPanel
crea un panel lateral.
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 )
) ) ,

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

Se pueden incluir diferentes pesta as con diferentes barras laterales usando las
funciones conditionalPanel, tabsetPanel y tabPanel.
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 "
) ) ) ) )

Outline
1 Qu es shiny

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

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 i n yt heme s )
# UI
shiny UI ( fluid Page ( theme = s h inytheme (" cerulean "),
...
))

Outline
1 Qu es 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!

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

Outline
1 Qu es 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.

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!

(5) Esquema simple: u i . R
t i t l eP a n e l ( " H e ll o S h in y ! " ) ,
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 " )
) ) ) )

(5) Esquema simple: s e r v e r . R
d i s t < - r n or m ( i n pu t $ o b s )
h i s t ( d i s t )
})
})

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:

(6) Esquema simple II: u i . R
l i brary ( " s h in y " )
t i t l eP a n e l ( " E s quem a s i mpl e II " ) ,
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 ")
) ) ) )

(6) Esquema simple II: s e r v e r . R
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

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

(7) Los inputs: u i . R
# UI
# i n tervalos
" N m e r o de i n t e rva lo s : " ,
min = 1 ,
max = 50 ,
value = 30)
),
main Panel (
)
)
J u
)
lio
)M u l e r o (julio.mulero@ua.es) Aplicaciones dise adas con shiny 38 / 54

(7) Los inputs: s e r v e r . R
# SERVER
#
hist (x, breaks = bins , col = ' darkgray ', border = ' white ',
m a i n = ' H i s t og ram a ' )
})
})

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.

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

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

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

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

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

# UI
# i n tervalos
" N u mbe r of b i n s : " ,
m i n = 1 ,
max = 50 ,
value = 30)
),
main Panel (
) ) ) )

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

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:

(8) Conductores reactivos: u i . R
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 " )
) ) ) )

(8) Conductores reactivos: s e r v e r . R
fib <- function ( n) ifelse (n <3 , 1 , fib (n -1) + fib (n -2) )
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.

(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

(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)
t i t l eP a n e l ( " I n t r odu cien d o d a to s " ) ,
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 " )
) ) ) )

(9) Conductores reactivos II: s e r v e r . R
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 )
}
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 () )
})
})

Recomendaciones
Mucho cuidado con las llaves, las comas y los par ntesis!
Mucho cuidado con los nombres de los inputs y outputs!

Aplicaciones interactivas dise adas con shiny
Julio Mulero
julio.mulero@ua.es
Departamento de Matem ticas
Universidad de Alicante

curso shiny.pptx

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie curso shiny.pptx

Ähnlich wie curso shiny.pptx (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

curso shiny.pptx