Lección 2 Shiny

Semillero de R UNAL

Shiny

Url de la presentación

• Para ver esta presentación visitar:

https://freddy.quarto.pub/leccion2shiny

¿Qué aprendimos en la lección 1?

• Shiny es un paquete de R.
• Shiny permite convertir código de R en apps (html).
• Partes de una aplicación.
• Aprendimos para que sirven ui.R y server.R.
• Construimos la primera aplicación.

Ejemplo de la mínima app

Es posible crear la aplicación mínima (que no hace nada) para experimentar con la estética. A continuación el contenido de los archivos ui.R y server.R:

ui.R

library(shiny)
shinyUI(fluidPage(
))

server.R

library(shiny)
shinyServer(function(input, output) {
})

Su turno

Construya usted mismo la aplicación mínima usando el código mostrado abajo.

ui.R

library(shiny)
shinyUI(fluidPage(
))

server.R

library(shiny)
shinyServer(function(input, output) {
})

Resultado

Tranquilo!!! Al correr la aplicación usted no va a encontrar nada porque la aplicación no hace nada.

Su turno

Sustituya el archivo ui.R por lo siguiente:

ui.R

library(shiny)
shinyUI(fluidPage(
  titlePanel("Titulo de aplicacion"),
  sidebarLayout(
  sidebarPanel("Barra lateral"),
  mainPanel("Panel principal")
  )
))

Resultado

Su turno

Sustituya el archivo ui.R por lo siguiente:

ui.R

library(shiny)
shinyUI(fluidPage(
  titlePanel("Titulo de la aplicacion"),
  sidebarLayout(position = "right",
                sidebarPanel("Barra lateral"),
                mainPanel("Panel principal")
  )
))

Resultado

Contenido html

Su turno

Sustituya el archivo ui.R por lo siguiente:

shinyUI(fluidPage(
  titlePanel( strong("My Shiny App") ),
  sidebarLayout(
    sidebarPanel( em("Sidebar panel") ),
    mainPanel(
      h1("First level title with h1"),
      h2("Second level title with h2"),
      h3("Third level title with h3"),
      h4("Fourth level title with h4"),
      h5("Fifth level title with h5"),
      h6("Sixth level title with h6"),
      h1(em("Text obtained with h1 and then em"))
    )
  )
))

Resultado

Su turno

Sustituya el archivo ui.R por el código mostrado abajo.

library(shiny)
shinyUI(fluidPage(
  titlePanel("Mi aplicacion de prueba"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      p("p creates a paragraph of text."),
      p("A new p() command starts a new paragraph.", 
        style = "font-family: 'times'; font-si16pt"),
      strong("strong() makes bold text."),
      em("em() creates italicized (i.e, emphasized) text."),
      br(),
      code("code displays your text similar to computer code"),
      p("This is web page", a(href="", "click here"), "to visit it.")
    ))
))

Resultado

¿Cómo incluir una imagen en la app?

Se deben seguir los siguientes pasos:

1. Crear una carpeta con el nombre www.
2. La carpeta www debe estar en la misma carpeta donde están los archivos ui.R y server.R.
3. Guardar en la carpeta www la imagen a insertar.
4. Usar la función img para incluir la imagen.
5. Ejemplo: img(src="unal.png", height=300, width=520).

Su turno

1. Construya una carpeta llamada www.
2. Busque una foto de la unal (jpg o png), guárdela en www.
3. Busque una foto de un árbol (jpg o png), guárdela en www.
4. Sustituya el archivo ui.R por el código mostrado abajo.

library(shiny)
shinyUI(fluidPage(
  titlePanel("Mi app con Shiny"),
  sidebarLayout(
    sidebarPanel(img(src="unal.jpg", height=100, width=160)),
    
    mainPanel(img(src="arbol.png", height=150, width=250))
  )
))

Resultado

Video