class: center, middle

.linea-superior[]
.linea-inferior[]

<img src="imagenes/logo_portada2.png" width="200" />

## INE educa: Clases abiertas de R

## Introducción a Shiny

## Proyecto de Ciencia de Datos

### Junio 2023

---
background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# Pero antes que todo!!!

Trabajaremos con los siguientes paquetes, les invitamos a instalarlos para seguir la clase:

```r
install.packages(c("shiny","guaguas","dplyr","ggplot2",
                   "calidad","survey","writexl"))

library(shiny)
library(guaguas)
library(dplyr)
library(ggplot2)
library(calidad)
library(survey)
library(writexl)

#### versión de R 4.2.3 (2023-03-15)
```

.center[<img src="imagenes/brent-rambo-not-bad.gif" width= "300"/>]

---

background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# Estructura del taller

**Contenidos de la clase**

- I - Motivación

--

- II - Ejemplos de Shiny Apps construidas en el INE

--

- III - Principales características de una Shiny App

--

- IV - ¡A construir una Shiny App!

--

- V - Tips y referencias
      
      
<br>
<br>      
      
      
--

**Objetivos de la clase:**

-  Orientar sobre la construcción de una Shiny App

---

class: inverse, center, middle

# I. Motivación

---
background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# ¿Shiny?

.panelset[
.panel[.panel-name[¿Que es Shiny?]

<br>

.center[.font130[Es un paquete de R, que simplifica la construcción de plataformas interactivas para personas que vienen de disciplinas lejanas a la programación web o desde la ciencia y analítica de datos]]

<br>
<br>

.center[.font130[Shiny es un **"wrapper"** de html, css y JavaScript, los principales lenguajes para construir aplicaciones web]]

]

.panel[.panel-name[¿Porque utilizar Shiny?]

.Large[.center[.red.bold[Interactividad!!!]]]

Clickear, cargar datos, cambiar parámetros...

*¿Para qué?*

- Resultados de análisis de una investigación (shiny empresas)
  - Disponibilizar alguna herramienta (paquete de calidad)
  - Evaluar el avance de una investigación, (esto nos ahorra mucho código)
  - Simplemente automatizar un proceso tedioso

*Usuarios finales*
  - Usuarios que no sepan programar
  - Cada uno/a mismo!
  ]
  
]

---
class: inverse, center, middle

# II - Algunos ejemplos de Shiny Apps construidas en el INE

---
class: black_background

<video height="100%" controls>
  <source src="imagenes/rue.mp4" type="video/mp4">
</video>

---
class: black_background

<video height="100%" controls>
  <source src="imagenes/imagenes.mp4" type="video/mp4">
</video>

---
class: black_background

<video height="100%" controls>
  <source src="imagenes/nomenclatura.mp4" type="video/mp4">
</video>

---
class: black_background

<video height="100%" controls>
  <source src="imagenes/calidad.mp4" type="video/mp4">
</video>

---

class: inverse, center, middle

# III. Principales características de Shiny App

---

background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# Shiny como aplicaciones web

.pull-left[

<img src="imagenes/front_back.png" width="300" />

<img src="imagenes/html_css_js.gif" width="300" />

]

--

.pull-right[
<br>
<br>
<br>

<img src="imagenes/shinyApp_ui_server.png" width="400" />

]

---

background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# Principales características de Shiny App

Componentes básicos de una Shiny App

--

- **ui**: *(user interface)* Este objeto controla el diseño y la apariencia de la aplicación

--

- **server**: Esta función contiene las instrucciones que R necesita para construir la aplicación

--

- **shinyApp**(ui,server): Corre la app uniendo los dos elementos anteriores

--

```r
library(shiny)

ui <- fluidPage(
  
)

server <- function(input, output, session) {  
  
}

shinyApp(ui, server)
```

--

**¿Como comenzamos un proyecto en Shiny?**

--

Veamos el código!!!...

---

class: inverse, center, middle

# IV. ¡A construir una Shiny App!

---
background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# Como construi la ui

.panelset[
.panel[.panel-name[sidebarLayout]

**sidebarLayout()**

.pull-left[

```r
ui <- fluidPage(
  titlePanel("Central limit theorem"),
  sidebarLayout(
    sidebarPanel(
      numericInput("m", "Number of samples:", 2, min = 1, max = 100)
    ),
    mainPanel(
      plotOutput("hist")
    )
  )
)

##### * este código es solo de ejemplo, no está completo para generar una app
```

]

.pull-right[

.right[<img src="imagenes/sidebar.png" width= "400"/>]

]

]

.panel[.panel-name[tabsetPanel]

**tabsetPanel()**

.pull-left[

```r
ui <- fluidPage(
  tabsetPanel(
    tabPanel("Import data", 
      fileInput("file", "Data", buttonLabel = "Upload..."),
      textInput("delim", "Delimiter (leave blank to guess)", ""),
      numericInput("skip", "Rows to skip", 0, min = 0),
      numericInput("rows", "Rows to preview", 10, min = 1)
    ),
    tabPanel("Set parameters"),
    tabPanel("Visualise results")
  )
)

##### * este código es solo de ejemplo, no está completo para generar una app
```
]

.pull-right[
 
 .right[<img src="imagenes/tabset.png" width= "400"/>]

]

]

.panel[.panel-name[navbarPage]
**navbarPage()**

.pull-left[

```r
ui <- fluidPage(
  navbarPage("App Title",
             tabPanel("Plot"),
             tabPanel("Summary"),
             tabPanel("Table")
  )
)

##### * este código es solo de ejemplo, no está completo para generar una app
```
]

.pull-right[

.right[<img src="imagenes/navbarpage.png" width= "400"/>]
]

]

]

--

---
background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# Veamos como construir la ui

Shiny posee funciones que nos permiten agregar contenidos para mejorar nuestra ui, estas funciones son "**wrapper**" de html.

.center[<img src="imagenes/shiny_html1.png" width= "700"/>]

---
background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# Veamos como construir la ui

Shiny posee funciones que nos permiten agregar contenidos para mejorar nuestra ui, estas funciones son "**wrapper**" de html.

.center[<img src="imagenes/shiny_html2.png" width= "700"/>]

---

class: inverse, center, middle

# Pero... ¿Como el usuario interactua con la ui?

---
background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# Con widgets!

Se dividen entre **INPUTS** y **OUTPUTS**, ya que como sus nombres lo indican es donde ingresamos parametros y donde recibimos los productos procesados

<br>

.center[<img src="imagenes/input-output.gif" width= "500"/>]

---
background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# Inputs

Funciones que permiten al usuario ingresar parametros o información a la app, es por ello que van desde la **ui** al **server**

Parámetros básicos:

--

**inputId:** Es el nombre que le damos al input en particular, para luego poder acceder

--

**label:** Es la etiqueta que el usuario lee sobre el input

--

Son almacenados dentro de una lista llamada: **input**, para acceder a ellos debemos buscarlos en esa lista, tal y como se hace en **R**:

```r
ui <- fluidPage(
  numericInput(inputId = "variable1",label = "Variable 1",value = 30)
)

##### * este código es solo de ejemplo, no está completo para generar una app
```

<br>

.center[.color_style_black[input$].color_style_burdeo[variable1]]

---
background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# Inputs

Reciben un tipo de dato en particular, sea  **texto**, **numérico**, **factores** o **fechas**, entre otros,

<br>

.center[<img src="imagenes/inputs.png" width= "700"/>] [*](https://www.paulamoraga.com/book-geospatial/sec-shiny.html)

---
background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# Outputs

- Lo que la app nos devuelve, pueden ser gráficos, imágenes, tablas, texto e incluso mapas

.center[<img src="imagenes/outputs.png" width= "200"/>] [*](https://www.paulamoraga.com/book-geospatial/sec-shiny.html)

--

- Los outputs se generan en el **server** de la aplicación y viajan hacia la **ui**

--

- Al igual que los inputs los outputs son almacenados dentro de una lista, llamada: **output**:

--

```r
server <- function(input, output, session) {

output$plot1 <- renderPlot({
    grafico
  })
}

##### * este código es solo de ejemplo, no está completo para generar una app
```

.center[.color_style_black[output$].color_style_burdeo[plot1]]

---
background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# Outputs

<br>

Para enviar los **outputs** desde el server hacia el ui, la manera de hacerlo es la siguiente:

<br>

```r
ui <-fluidPage(
  plotOutput("plot1")
)

server <- function(input, output, session) {

output$plot1 <- renderPlot({
    grafico
  })
}

##### * este código es solo de ejemplo, no está completo para generar una app
```

---
class: inverse, center, middle

# Vamos al código!!!...

---
background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# Construyendo una app que busca nombres

Usaremos el paquete [guaguas](https://github.com/rivaquiroga/guaguas)

```r
library(shiny)
library(guaguas)
library(dplyr)
library(ggplot2)

*datos <- guaguas %>% dplyr::filter(n >= 100)

ui <- fluidPage(
  titlePanel("Buscando nombres"),
      sidebarLayout(
        sidebarPanel(h3("Inputs"),
                    selectInput(inputId = "nombre",
                    label = "Nombres",
*                    choices = unique(datos$nombre))
    ),
    mainPanel(h3("Outputs"),
              plotOutput(outputId = "frecuencia_guaguas")
    )
  )
)

server <- function(input, output, session) {
  grafico <-  datos %>%
*    dplyr::filter(nombre == input$nombre) %>% 
    ggplot(aes(anio,n)) +
    geom_line()
  
  output$frecuencia_guaguas <- renderPlot({
    grafico
  })
}
shinyApp(ui, server)
```

---
background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# ¿Que es la reactividad?

Este es el error típico aprendiendo Shiny:

**"Caused by error in `input$nombre`:
! Can't access reactive value 'nombre' outside of reactive consumer.
ℹ Do you need to wrap inside reactive() or observe()?"**

--

.color_style_burdeo[En español:]

**"Provocado por error en input$nombre: ! No se puede acceder al valor reactivo 'nombre' fuera del consumidor reactivo
¿Necesita envolver dentro de reactivo() u observar()?"**

--

.color_style_burdeo[En sencillo:]

- La **reactividad**, es el mecanismo por el cual Shiny determina que objeto de R tiene que cambiar, cuándo el usuario realiza alguna acción o genera un input.

- Estos inputs se deben tratar de manera especial, siempre "envueltos" en funciones **reactivas** u **observadoras** (ya lo veremos)

---
background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# Construyendo una app que busca nombres

.center[.Large[Ahora sí!]]

```r
library(shiny)
library(guaguas)
library(dplyr)
library(ggplot2)

datos <- guaguas %>% dplyr::filter(n >= 100)

ui <- fluidPage(
  titlePanel("Buscando nombres"),
      sidebarLayout(
        sidebarPanel(h3("Inputs"),
                    selectInput(inputId = "nombre",
                    label = "Nombres",
                    choices = unique(datos$nombre))
             ),
        mainPanel(h3("Outputs"),
                  plotOutput(outputId = "frecuencia_guaguas")
                   )
          )
)

server <- function(input, output, session) {

grafico <- reactive({datos %>% 
      dplyr::filter(nombre == input$nombre) %>%
      ggplot(aes(anio,n)) +
      geom_line()
    }) 
  
  output$frecuencia_guaguas <- renderPlot({
* grafico() 
  })

}

shinyApp(ui, server)
```

---
background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# ¿Que es la reactividad?

¿Si queremos controlar cuando se genera el gráfico? y así se pueden agregar mas nombres en la búsqueda...
 
--

Como ya se mencionó existen dos grupos de funciones que reciben a los objetos reactivos, las funciones **reactivas** y las funciones que **observan**

--

A diferencia de las funciones **reactivas**, las funciones que **observan** permiten que pasen acciones secundarias, pero no generan un objeto nuevo

--

En el siguente ejemplo podemos ver como la función **observeEvent({})** recibe cómo argumento el input *input$generar_gráfico*, solo después de que este input sea generado, el gráfico se creará

```r
observeEvent(input$generar_gráfico,{  
  
  output$frecuencia_guaguas <- renderPlot({
grafico()
  })
  
  })

##### * este código es solo de ejemplo, no está completo para generar una app
```

--

Vamos al código!!!...

---
background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# ¿Que es la reactividad?

.panelset[
.panel[.panel-name[v1]

- Agreguemos un botón para generar un gráfico

```r
library(shiny)
library(guaguas)
library(dplyr)
library(ggplot2)

## Agregamo el botón
# actionButton(inputId = "generar_gráfico",label = "Generar gráfico")

### Generamos un botón que controle la generación del gráfico
# observeEvent(input$generar_gráfico,{  
#   output$frecuencia_guaguas <- renderPlot({
#     grafico()
#   })
# })

# isolate({grafico()})

datos <- guaguas %>% dplyr::filter(n >= 100)

ui <- fluidPage(
  titlePanel("Buscando nombres"),
  sidebarLayout(
    sidebarPanel(h3("Inputs"),
                 selectInput(inputId = "nombre",
                             label = "Nombres",
                             choices = unique(datos$nombre))
    ),
    mainPanel(h3("Outputs"),
              plotOutput(outputId = "frecuencia_guaguas")
    )
  )
)

server <- function(input, output, session) {
  
  grafico <- reactive({datos %>%
      dplyr::filter(nombre == input$nombre) %>%
      ggplot(aes(anio,n)) +
      geom_line()
  })
  
  output$frecuencia_guaguas <- renderPlot({
    grafico()
  })
}
shinyApp(ui, server)
```

]

.panel[.panel-name[v2]
- Permitamos que se puedan buscar más nombres

```r
library(shiny)
library(guaguas)
library(dplyr)
library(ggplot2)

### permitimos que se busquen mas nombres ###
# selectInput(inputId = "nombre",
#             label = "Nombres",
#             choices = unique(datos$nombre),multiple = T),

# datos %>% 
# dplyr::filter(nombre %in% input$nombre) %>%
#   ggplot(aes(anio,n,color=nombre)) +
#   geom_line()

datos <- guaguas %>% dplyr::filter(n >= 100)

ui <- fluidPage(
  titlePanel("Buscando nombres"),
  sidebarLayout(
    sidebarPanel(h3("Inputs"),
                 selectInput(inputId = "nombre",
                             label = "Nombres",
                             choices = unique(datos$nombre)),
                 actionButton(inputId = "generar_gráfico",label = "Generar gráfico")
    ),
    mainPanel(h3("Outputs"),
              plotOutput(outputId = "frecuencia_guaguas")
    )
  )
)

server <- function(input, output, session) {
  
  grafico <- reactive({datos %>%
      dplyr::filter(nombre == input$nombre) %>%
      ggplot(aes(anio,n)) +
      geom_line()
  })
  
observeEvent(input$generar_gráfico,{  
  output$frecuencia_guaguas <- renderPlot({
    isolate({grafico()})
  })
})  
  
}
shinyApp(ui, server)
```

]

]

---
background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# ¿Entonces que es la aislación?

```r
# isolate({input$valor1})  * isolate({ input$valor2})

library(shiny)

ui <- fluidPage(
  numericInput("valor1","Valor 1",value = 10),

br(),
  br(),

numericInput("valor2","Valor 2",value = 10),

br(),
  br(),

verbatimTextOutput("resultado"),

br() ,
  br() ,

actionButton("calc_btn","Calcular")

)

server <- function(input, output, session) {

observeEvent(input$calc_btn,{
*  print(input$calc_btn)
  
  output$resultado = renderText({

input$valor1  *  input$valor2

})

})

}

shinyApp(ui, server)
```

---
background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# Un ejemplo para el trabajo diario

--

- La siguiente shiny App genera cálculos de estadísticas publicadas por él INE, específicamente la Encuesta Nacional Urbana de Seguridad Ciudadana

--

- Esta app aplica el [estándar](https://www.ine.gob.cl/docs/default-source/institucionalidad/buenas-pr%C3%A1cticas/clasificaciones-y-estandares/est%C3%A1ndar-evaluaci%C3%B3n-de-calidad-de-estimaciones-publicaci%C3%B3n-27022020.pdf) de calidad definido por el INE para evaluar la calidad de las estadísticas publicadas

--

- Estos cálculos se realizan utilizando el paquete de [calidad](https://cran.r-project.org/web/packages/calidad/vignettes/tutorial.html)  desarrollado en R que aplica el [estándar](https://www.ine.gob.cl/docs/default-source/institucionalidad/buenas-pr%C3%A1cticas/clasificaciones-y-estandares/est%C3%A1ndar-evaluaci%C3%B3n-de-calidad-de-estimaciones-publicaci%C3%B3n-27022020.pdf)

--

- Este paquete es un **wrapper** del paquete [survey](https://cran.r-project.org/web/packages/survey/index.html) aplicado al [estándar](https://www.ine.gob.cl/docs/default-source/institucionalidad/buenas-pr%C3%A1cticas/clasificaciones-y-estandares/est%C3%A1ndar-evaluaci%C3%B3n-de-calidad-de-estimaciones-publicaci%C3%B3n-27022020.pdf) INE

.center[<img src="imagenes/ecuacion.png" width= "300"/>]

--

**Él es Thomas Lumley, su creador**

--

---
background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# Un ejemplo para el trabajo diario

.panelset[
.panel[.panel-name[v1]

Veamos como funciona

```r
library(shiny)
library(calidad)
library(survey)
### declaramos diseño complejo
com_dis <- svydesign(ids = ~Conglomerado,
                     strata = ~VarStrat,
                     weights = ~Fact_Pers,data = enusc)
options(survey.lonely.psu = "certainty")
## APP #
### UI ####
ui <- fluidPage(
  titlePanel("Probando paquete calidad del INE"),
  sidebarLayout(sidebarPanel(
*    selectInput("var",label = "Variable de interés",choices = c("",names(enusc)),selected = "")), 
    mainPanel(tableOutput("tabla")
    )
  )
)
  ### SERVER ####
  
server <- function(input, output, session) {
    ### generamos tabla
    tabulado <- reactive({
*      calidad::assess(calidad::create_prop(var = input$var, design = com_dis)) 
    })
    output$tabla <- renderTable({
   #   req(input$var)
      tabulado()
    })
  }
  
  shinyApp(ui, server)
```

]

.panel[.panel-name[v2]

- ¿Que implica agregar un nivel de desagregación a los cálculos?

```r
library(shiny)
library(calidad)
library(survey)

### declaramos diseño complejo
com_dis <- svydesign(ids = ~Conglomerado,
                     strata = ~VarStrat,
                     weights = ~Fact_Pers,data = enusc)

options(survey.lonely.psu = "certainty")

## probando calidad 
calidad::assess(calidad::create_prop(var = "VP_DC", domains = "enc_region", design = com_dis))

## APP #

### UI ####
ui <- fluidPage(
  titlePanel("Probando paquete calidad del INE"),
  sidebarLayout(sidebarPanel(
    selectInput("var",label = "Variable de interés",choices = c("",names(enusc)),selected = ""),
  #  selectInput("dominio",label = "Variable desagregacion",choices = c("",names(enusc)),selected = ""),
    downloadButton("download_tabla","Descarga")),
                mainPanel(tableOutput("tabla")
                          ))
)

### SERVER ####
server <- function(input, output, session) {

# R_dominio = reactive({
  #   # print(input$dominio)
  #
  #   if(input$dominio == ""){
  #     NULL
  #   }else{
  #     input$dominio
  #   }
  # })

### generamos tabla
  tabulado <- reactive({
  calidad::assess(calidad::create_prop(var = input$var,
              #  domains = #R_dominio(),
                design = com_dis))
  })

output$tabla <- renderTable({
# req(input$var)

tabulado()

})

}

shinyApp(ui, server)
```

]
  
  .panel[.panel-name[v3]

- ¿Y si quisiéramos descargar los tabulados a nuestro equipo?

```r
library(shiny)
library(calidad)
library(survey)

### declaramos diseño complejo
com_dis <- svydesign(ids = ~Conglomerado,
                     strata = ~VarStrat,
                     weights = ~Fact_Pers,data = enusc)

options(survey.lonely.psu = "certainty")

## APP #

### UI ####
ui <- fluidPage(
  titlePanel("Probando paquete calidad del INE"),
  sidebarLayout(sidebarPanel(
    selectInput("var",label = "Variable de interés",choices = c("",names(enusc)),selected = ""),
    selectInput("dominio",label = "Variable desagregacion",choices = c("",names(enusc)),selected = ""),
#    downloadButton("download_tabla","Descarga")
),
                mainPanel(tableOutput("tabla")
                          ))
)

### SERVER ####
server <- function(input, output, session) {

R_dominio = reactive({
    # print(input$dominio)

if(input$dominio == ""){
      NULL
    }else{
      input$dominio
    }
  })

### generamos tabla
  tabulado <- reactive({
  calidad::assess(calidad::create_prop(var = input$var,
                domains = R_dominio(),
                design = com_dis))
  })

output$tabla <- renderTable({
req(input$var)

# print(R_dominio)
    # print(R_denom)

tabulado()

})

# output$download_tabla <- downloadHandler(
  #   filename = function() {
  #     paste0("tabulado-", format(Sys.time(),"%Y-%m-%d-%H%M%S"), ".xlsx", sep="")
  #   },
  #   content = function(file) {
  #     writexl::write_xlsx(tabulado(), file)
  #   }
  # )
}

shinyApp(ui, server)
```

]

]

---

class: inverse, center, middle

# V. Tips y referencias

---
background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# Algunos tips

--

- Planificar tu app

--

- Explorar técnicas de debugging (**print()** es tu copiloto)
        
--
        
- GIT !!!

--

- Posibilidades para montar en la web una Shiny App
   - shinyapps.io
   - ShinyServer
   - Docker+Shiny o ShinyServer
   - ShinyProxy 
   
   
   .right[<img src="imagenes/docker_proxy_shiny.png" width= "400"/>]

---
background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# Paquetes complementarios

- Shinytheme (ui) https://rstudio.github.io/shinythemes/

--

- shinydashboard (ui) https://rstudio.github.io/shinydashboard/

--

- Leaflet (trabajo con mapas y datos georefenciados) https://rstudio.github.io/leaflet/shiny.html

--

- Golem (Desarrollo de apps) https://thinkr-open.github.io/golem/

--

- Rhino (Desarrollo de apps) https://rhinoverse.dev/#rhino

--

- ShinyManager (autenticación) https://datastorm-open.github.io/shinymanager/

--

- Recursos de shiny para aprender, usar comandos:
    - shiny::runExample(NA)
    - shiny::runExample("03_reactivity")
    - shiny::runExample("04_mpg")
    - shiny::runExample("05_sliders")... hasta el 11
      
--

- ¿Que viene respecto a Shiny?
     - Shiny for python
     - R in the browser
 
 
---
background-image: url("imagenes/fondo2.PNG")
background-size: contain;
background-position: 100% 0%

# Material utilizado para esta clase

- https://shiny.posit.co/r/gallery/

- Libro hadley Whickam https://mastering-shiny.org

- Libro golem https://engineering-shiny.org/golem.html

- Cheat sheet shiny https://ugoproto.github.io/ugo_r_doc/pdf/shiny.pdf
  
---

class: center, middle

.linea-superior[]
.linea-inferior[]

<img src="imagenes/logo_portada2.png" width="200" />

## INE educa: Clases abiertas de R

## Proyecto de Ciencia de Datos

### Junio 2023

Notes for current slide

Notes for next slide

INE educa: Clases abiertas de R

Introducción a Shiny

Proyecto de Ciencia de Datos

Junio 2023

1 / 37

Pero antes que todo!!!

Trabajaremos con los siguientes paquetes, les invitamos a instalarlos para seguir la clase:

install.packages(c("shiny","guaguas","dplyr","ggplot2",
                   "calidad","survey","writexl"))
library(shiny)
library(guaguas)
library(dplyr)
library(ggplot2)
library(calidad)
library(survey)
library(writexl)
#### versión de R 4.2.3 (2023-03-15)

2 / 37

Estructura del taller

Contenidos de la clase

I - Motivación

3 / 37

Estructura del taller

Contenidos de la clase

I - Motivación
II - Ejemplos de Shiny Apps construidas en el INE

3 / 37

Estructura del taller

Contenidos de la clase

I - Motivación
II - Ejemplos de Shiny Apps construidas en el INE
III - Principales características de una Shiny App

3 / 37

Estructura del taller

Contenidos de la clase

I - Motivación
II - Ejemplos de Shiny Apps construidas en el INE
III - Principales características de una Shiny App
IV - ¡A construir una Shiny App!

3 / 37

Estructura del taller

Contenidos de la clase

I - Motivación
II - Ejemplos de Shiny Apps construidas en el INE
III - Principales características de una Shiny App
IV - ¡A construir una Shiny App!
V - Tips y referencias

3 / 37

Estructura del taller

Contenidos de la clase

I - Motivación
II - Ejemplos de Shiny Apps construidas en el INE
III - Principales características de una Shiny App
IV - ¡A construir una Shiny App!
V - Tips y referencias

Objetivos de la clase:

Orientar sobre la construcción de una Shiny App

3 / 37

I. Motivación4 / 37

¿Shiny?

Es un paquete de R, que simplifica la construcción de plataformas interactivas para personas que vienen de disciplinas lejanas a la programación web o desde la ciencia y analítica de datos

Shiny es un "wrapper" de html, css y JavaScript, los principales lenguajes para construir aplicaciones web

Interactividad!!!

Clickear, cargar datos, cambiar parámetros...

¿Para qué?

Resultados de análisis de una investigación (shiny empresas)
Disponibilizar alguna herramienta (paquete de calidad)
Evaluar el avance de una investigación, (esto nos ahorra mucho código)
Simplemente automatizar un proceso tedioso

Usuarios finales

Usuarios que no sepan programar
Cada uno/a mismo!

5 / 37

II - Algunos ejemplos de Shiny Apps construidas en el INE6 / 37

7 / 37

8 / 37

9 / 37

10 / 37

III. Principales características de Shiny App11 / 37

Shiny como aplicaciones web

12 / 37

Shiny como aplicaciones web

12 / 37

Principales características de Shiny App

Componentes básicos de una Shiny App

13 / 37

Principales características de Shiny App

Componentes básicos de una Shiny App

ui: (user interface) Este objeto controla el diseño y la apariencia de la aplicación

13 / 37

Principales características de Shiny App

Componentes básicos de una Shiny App

ui: (user interface) Este objeto controla el diseño y la apariencia de la aplicación
server: Esta función contiene las instrucciones que R necesita para construir la aplicación

13 / 37

Principales características de Shiny App

Componentes básicos de una Shiny App

ui: (user interface) Este objeto controla el diseño y la apariencia de la aplicación
server: Esta función contiene las instrucciones que R necesita para construir la aplicación
shinyApp(ui,server): Corre la app uniendo los dos elementos anteriores

13 / 37

Principales características de Shiny App

Componentes básicos de una Shiny App

ui: (user interface) Este objeto controla el diseño y la apariencia de la aplicación
server: Esta función contiene las instrucciones que R necesita para construir la aplicación
shinyApp(ui,server): Corre la app uniendo los dos elementos anteriores

library(shiny)
ui <- fluidPage(
)
server <- function(input, output, session) {  
}
shinyApp(ui, server)

13 / 37

Principales características de Shiny App

Componentes básicos de una Shiny App

ui: (user interface) Este objeto controla el diseño y la apariencia de la aplicación
server: Esta función contiene las instrucciones que R necesita para construir la aplicación
shinyApp(ui,server): Corre la app uniendo los dos elementos anteriores

library(shiny)
ui <- fluidPage(
)
server <- function(input, output, session) {  
}
shinyApp(ui, server)

¿Como comenzamos un proyecto en Shiny?

13 / 37

Principales características de Shiny App

Componentes básicos de una Shiny App

ui: (user interface) Este objeto controla el diseño y la apariencia de la aplicación
server: Esta función contiene las instrucciones que R necesita para construir la aplicación
shinyApp(ui,server): Corre la app uniendo los dos elementos anteriores

library(shiny)
ui <- fluidPage(
)
server <- function(input, output, session) {  
}
shinyApp(ui, server)

¿Como comenzamos un proyecto en Shiny?

Veamos el código!!!...

13 / 37

IV. ¡A construir una Shiny App!14 / 37

Como construi la ui

sidebarLayout()

ui <- fluidPage(
  titlePanel("Central limit theorem"),
  sidebarLayout(
    sidebarPanel(
      numericInput("m", "Number of samples:", 2, min = 1, max = 100)
    ),
    mainPanel(
      plotOutput("hist")
    )
  )
)
##### * este código es solo de ejemplo, no está completo para generar una app

tabsetPanel()

ui <- fluidPage(
  tabsetPanel(
    tabPanel("Import data", 
      fileInput("file", "Data", buttonLabel = "Upload..."),
      textInput("delim", "Delimiter (leave blank to guess)", ""),
      numericInput("skip", "Rows to skip", 0, min = 0),
      numericInput("rows", "Rows to preview", 10, min = 1)
    ),
    tabPanel("Set parameters"),
    tabPanel("Visualise results")
  )
)
##### * este código es solo de ejemplo, no está completo para generar una app

navbarPage()

ui <- fluidPage(
  navbarPage("App Title",
             tabPanel("Plot"),
             tabPanel("Summary"),
             tabPanel("Table")
  )
)
##### * este código es solo de ejemplo, no está completo para generar una app

15 / 37

Como construi la ui

sidebarLayout()

ui <- fluidPage(
  titlePanel("Central limit theorem"),
  sidebarLayout(
    sidebarPanel(
      numericInput("m", "Number of samples:", 2, min = 1, max = 100)
    ),
    mainPanel(
      plotOutput("hist")
    )
  )
)
##### * este código es solo de ejemplo, no está completo para generar una app

tabsetPanel()

ui <- fluidPage(
  tabsetPanel(
    tabPanel("Import data", 
      fileInput("file", "Data", buttonLabel = "Upload..."),
      textInput("delim", "Delimiter (leave blank to guess)", ""),
      numericInput("skip", "Rows to skip", 0, min = 0),
      numericInput("rows", "Rows to preview", 10, min = 1)
    ),
    tabPanel("Set parameters"),
    tabPanel("Visualise results")
  )
)
##### * este código es solo de ejemplo, no está completo para generar una app

navbarPage()

ui <- fluidPage(
  navbarPage("App Title",
             tabPanel("Plot"),
             tabPanel("Summary"),
             tabPanel("Table")
  )
)
##### * este código es solo de ejemplo, no está completo para generar una app

15 / 37

Veamos como construir la ui

Shiny posee funciones que nos permiten agregar contenidos para mejorar nuestra ui, estas funciones son "wrapper" de html.

16 / 37

Veamos como construir la ui

Shiny posee funciones que nos permiten agregar contenidos para mejorar nuestra ui, estas funciones son "wrapper" de html.

17 / 37

Pero... ¿Como el usuario interactua con la ui?18 / 37

Con widgets!

Se dividen entre INPUTS y OUTPUTS, ya que como sus nombres lo indican es donde ingresamos parametros y donde recibimos los productos procesados

19 / 37

Inputs

Funciones que permiten al usuario ingresar parametros o información a la app, es por ello que van desde la ui al server

Parámetros básicos:

20 / 37

Inputs

Funciones que permiten al usuario ingresar parametros o información a la app, es por ello que van desde la ui al server

Parámetros básicos:

inputId: Es el nombre que le damos al input en particular, para luego poder acceder

20 / 37

Inputs

Funciones que permiten al usuario ingresar parametros o información a la app, es por ello que van desde la ui al server

Parámetros básicos:

inputId: Es el nombre que le damos al input en particular, para luego poder acceder

label: Es la etiqueta que el usuario lee sobre el input

20 / 37

Inputs

Funciones que permiten al usuario ingresar parametros o información a la app, es por ello que van desde la ui al server

Parámetros básicos:

inputId: Es el nombre que le damos al input en particular, para luego poder acceder

label: Es la etiqueta que el usuario lee sobre el input

Son almacenados dentro de una lista llamada: input, para acceder a ellos debemos buscarlos en esa lista, tal y como se hace en R:

ui <- fluidPage(
  numericInput(inputId = "variable1",label = "Variable 1",value = 30)
)
##### * este código es solo de ejemplo, no está completo para generar una app

input$variable1

20 / 37

Inputs

Reciben un tipo de dato en particular, sea texto, numérico, factores o fechas, entre otros,

21 / 37

Outputs

Lo que la app nos devuelve, pueden ser gráficos, imágenes, tablas, texto e incluso mapas

22 / 37

Outputs

Lo que la app nos devuelve, pueden ser gráficos, imágenes, tablas, texto e incluso mapas

Los outputs se generan en el server de la aplicación y viajan hacia la ui

22 / 37

Outputs

Lo que la app nos devuelve, pueden ser gráficos, imágenes, tablas, texto e incluso mapas

Los outputs se generan en el server de la aplicación y viajan hacia la ui
Al igual que los inputs los outputs son almacenados dentro de una lista, llamada: output:

22 / 37

Outputs

Lo que la app nos devuelve, pueden ser gráficos, imágenes, tablas, texto e incluso mapas

Los outputs se generan en el server de la aplicación y viajan hacia la ui
Al igual que los inputs los outputs son almacenados dentro de una lista, llamada: output:

server <- function(input, output, session) {
output$plot1 <- renderPlot({
    grafico
  })
}
##### * este código es solo de ejemplo, no está completo para generar una app

output$plot1

22 / 37

Outputs

Para enviar los outputs desde el server hacia el ui, la manera de hacerlo es la siguiente:

ui <-fluidPage(
  plotOutput("plot1")
)
server <- function(input, output, session) {
output$plot1 <- renderPlot({
    grafico
  })
}
##### * este código es solo de ejemplo, no está completo para generar una app

23 / 37

Vamos al código!!!...24 / 37

Construyendo una app que busca nombres

Usaremos el paquete guaguas

library(shiny)
library(guaguas)
library(dplyr)
library(ggplot2)
datos <- guaguas %>% dplyr::filter(n >= 100)
ui <- fluidPage(
  titlePanel("Buscando nombres"),
      sidebarLayout(
        sidebarPanel(h3("Inputs"),
                    selectInput(inputId = "nombre",
                    label = "Nombres",
                     choices = unique(datos$nombre))
    ),
    mainPanel(h3("Outputs"),
              plotOutput(outputId = "frecuencia_guaguas")
    )
  )
)
server <- function(input, output, session) {
  grafico <-  datos %>%
     dplyr::filter(nombre == input$nombre) %>% 
    ggplot(aes(anio,n)) +
    geom_line()
  output$frecuencia_guaguas <- renderPlot({
    grafico
  })
}
shinyApp(ui, server)

25 / 37

¿Que es la reactividad?

Este es el error típico aprendiendo Shiny:

"Caused by error in input$nombre: ! Can't access reactive value 'nombre' outside of reactive consumer. ℹ Do you need to wrap inside reactive() or observe()?"

26 / 37

¿Que es la reactividad?

Este es el error típico aprendiendo Shiny:

"Caused by error in input$nombre: ! Can't access reactive value 'nombre' outside of reactive consumer. ℹ Do you need to wrap inside reactive() or observe()?"

En español:

"Provocado por error en input$nombre: ! No se puede acceder al valor reactivo 'nombre' fuera del consumidor reactivo ¿Necesita envolver dentro de reactivo() u observar()?"

26 / 37

¿Que es la reactividad?

Este es el error típico aprendiendo Shiny:

"Caused by error in input$nombre: ! Can't access reactive value 'nombre' outside of reactive consumer. ℹ Do you need to wrap inside reactive() or observe()?"

En español:

"Provocado por error en input$nombre: ! No se puede acceder al valor reactivo 'nombre' fuera del consumidor reactivo ¿Necesita envolver dentro de reactivo() u observar()?"

En sencillo:

La reactividad, es el mecanismo por el cual Shiny determina que objeto de R tiene que cambiar, cuándo el usuario realiza alguna acción o genera un input.
Estos inputs se deben tratar de manera especial, siempre "envueltos" en funciones reactivas u observadoras (ya lo veremos)

26 / 37

Construyendo una app que busca nombres

Ahora sí!

library(shiny)
library(guaguas)
library(dplyr)
library(ggplot2)
datos <- guaguas %>% dplyr::filter(n >= 100)
ui <- fluidPage(
  titlePanel("Buscando nombres"),
      sidebarLayout(
        sidebarPanel(h3("Inputs"),
                    selectInput(inputId = "nombre",
                    label = "Nombres",
                    choices = unique(datos$nombre))
             ),
        mainPanel(h3("Outputs"),
                  plotOutput(outputId = "frecuencia_guaguas")
                   )
          )
)
server <- function(input, output, session) {
grafico <- reactive({datos %>% 
      dplyr::filter(nombre == input$nombre) %>%
      ggplot(aes(anio,n)) +
      geom_line()
    }) 
  output$frecuencia_guaguas <- renderPlot({
  grafico() 
  })
}
shinyApp(ui, server)

27 / 37

¿Que es la reactividad?

¿Si queremos controlar cuando se genera el gráfico? y así se pueden agregar mas nombres en la búsqueda...

28 / 37

¿Que es la reactividad?

¿Si queremos controlar cuando se genera el gráfico? y así se pueden agregar mas nombres en la búsqueda...

Como ya se mencionó existen dos grupos de funciones que reciben a los objetos reactivos, las funciones reactivas y las funciones que observan

28 / 37

¿Que es la reactividad?

¿Si queremos controlar cuando se genera el gráfico? y así se pueden agregar mas nombres en la búsqueda...

Como ya se mencionó existen dos grupos de funciones que reciben a los objetos reactivos, las funciones reactivas y las funciones que observan

A diferencia de las funciones reactivas, las funciones que observan permiten que pasen acciones secundarias, pero no generan un objeto nuevo

28 / 37

¿Que es la reactividad?

¿Si queremos controlar cuando se genera el gráfico? y así se pueden agregar mas nombres en la búsqueda...

Como ya se mencionó existen dos grupos de funciones que reciben a los objetos reactivos, las funciones reactivas y las funciones que observan

A diferencia de las funciones reactivas, las funciones que observan permiten que pasen acciones secundarias, pero no generan un objeto nuevo

En el siguente ejemplo podemos ver como la función observeEvent({}) recibe cómo argumento el input input$generar_gráfico, solo después de que este input sea generado, el gráfico se creará

observeEvent(input$generar_gráfico,{  
  output$frecuencia_guaguas <- renderPlot({
grafico()
  })
  })
##### * este código es solo de ejemplo, no está completo para generar una app

28 / 37

¿Que es la reactividad?

¿Si queremos controlar cuando se genera el gráfico? y así se pueden agregar mas nombres en la búsqueda...

Como ya se mencionó existen dos grupos de funciones que reciben a los objetos reactivos, las funciones reactivas y las funciones que observan

A diferencia de las funciones reactivas, las funciones que observan permiten que pasen acciones secundarias, pero no generan un objeto nuevo

En el siguente ejemplo podemos ver como la función observeEvent({}) recibe cómo argumento el input input$generar_gráfico, solo después de que este input sea generado, el gráfico se creará

observeEvent(input$generar_gráfico,{  
  output$frecuencia_guaguas <- renderPlot({
grafico()
  })
  })
##### * este código es solo de ejemplo, no está completo para generar una app

Vamos al código!!!...

28 / 37

¿Que es la reactividad?v1
v2
Agreguemos un botón para generar un gráfico
library(shiny)
library(guaguas)
library(dplyr)
library(ggplot2)
## Agregamo el botón
# actionButton(inputId = "generar_gráfico",label = "Generar gráfico")
### Generamos un botón que controle la generación del gráfico
# observeEvent(input$generar_gráfico,{  
#   output$frecuencia_guaguas <- renderPlot({
#     grafico()
#   })
# })
# isolate({grafico()})
datos <- guaguas %>% dplyr::filter(n >= 100)
ui <- fluidPage(
  titlePanel("Buscando nombres"),
  sidebarLayout(
    sidebarPanel(h3("Inputs"),
                 selectInput(inputId = "nombre",
                             label = "Nombres",
                             choices = unique(datos$nombre))
    ),
    mainPanel(h3("Outputs"),
              plotOutput(outputId = "frecuencia_guaguas")
    )
  )
)
server <- function(input, output, session) {
  grafico <- reactive({datos %>%
      dplyr::filter(nombre == input$nombre) %>%
      ggplot(aes(anio,n)) +
      geom_line()
  })
  output$frecuencia_guaguas <- renderPlot({
    grafico()
  })
}
shinyApp(ui, server)
Permitamos que se puedan buscar más nombres
library(shiny)
library(guaguas)
library(dplyr)
library(ggplot2)
### permitimos que se busquen mas nombres ###
# selectInput(inputId = "nombre",
#             label = "Nombres",
#             choices = unique(datos$nombre),multiple = T),
# datos %>% 
# dplyr::filter(nombre %in% input$nombre) %>%
#   ggplot(aes(anio,n,color=nombre)) +
#   geom_line()
datos <- guaguas %>% dplyr::filter(n >= 100)
ui <- fluidPage(
  titlePanel("Buscando nombres"),
  sidebarLayout(
    sidebarPanel(h3("Inputs"),
                 selectInput(inputId = "nombre",
                             label = "Nombres",
                             choices = unique(datos$nombre)),
                 actionButton(inputId = "generar_gráfico",label = "Generar gráfico")
    ),
    mainPanel(h3("Outputs"),
              plotOutput(outputId = "frecuencia_guaguas")
    )
  )
)
server <- function(input, output, session) {
  grafico <- reactive({datos %>%
      dplyr::filter(nombre == input$nombre) %>%
      ggplot(aes(anio,n)) +
      geom_line()
  })
observeEvent(input$generar_gráfico,{  
  output$frecuencia_guaguas <- renderPlot({
    isolate({grafico()})
  })
})  
}
shinyApp(ui, server)
29 / 37

¿Entonces que es la aislación?

# isolate({input$valor1})  * isolate({ input$valor2})
library(shiny)
ui <- fluidPage(
  numericInput("valor1","Valor 1",value = 10),
  br(),
  br(),
  numericInput("valor2","Valor 2",value = 10),
  br(),
  br(),
  verbatimTextOutput("resultado"),
  br() ,
  br() ,
  actionButton("calc_btn","Calcular")
)
server <- function(input, output, session) {
observeEvent(input$calc_btn,{
   print(input$calc_btn)
  output$resultado = renderText({
    input$valor1  *  input$valor2
  })
})
}
shinyApp(ui, server)

30 / 37

Un ejemplo para el trabajo diario31 / 37

Un ejemplo para el trabajo diarioLa siguiente shiny App genera cálculos de estadísticas publicadas por él INE, específicamente la Encuesta Nacional Urbana de Seguridad Ciudadana
31 / 37

Un ejemplo para el trabajo diario

La siguiente shiny App genera cálculos de estadísticas publicadas por él INE, específicamente la Encuesta Nacional Urbana de Seguridad Ciudadana
Esta app aplica el estándar de calidad definido por el INE para evaluar la calidad de las estadísticas publicadas

31 / 37

Un ejemplo para el trabajo diario

La siguiente shiny App genera cálculos de estadísticas publicadas por él INE, específicamente la Encuesta Nacional Urbana de Seguridad Ciudadana
Esta app aplica el estándar de calidad definido por el INE para evaluar la calidad de las estadísticas publicadas
Estos cálculos se realizan utilizando el paquete de calidad desarrollado en R que aplica el estándar

31 / 37

Un ejemplo para el trabajo diario

La siguiente shiny App genera cálculos de estadísticas publicadas por él INE, específicamente la Encuesta Nacional Urbana de Seguridad Ciudadana
Esta app aplica el estándar de calidad definido por el INE para evaluar la calidad de las estadísticas publicadas
Estos cálculos se realizan utilizando el paquete de calidad desarrollado en R que aplica el estándar
Este paquete es un wrapper del paquete survey aplicado al estándar INE

31 / 37

Un ejemplo para el trabajo diario

La siguiente shiny App genera cálculos de estadísticas publicadas por él INE, específicamente la Encuesta Nacional Urbana de Seguridad Ciudadana
Esta app aplica el estándar de calidad definido por el INE para evaluar la calidad de las estadísticas publicadas
Estos cálculos se realizan utilizando el paquete de calidad desarrollado en R que aplica el estándar
Este paquete es un wrapper del paquete survey aplicado al estándar INE

Él es Thomas Lumley, su creador

31 / 37

Un ejemplo para el trabajo diario

La siguiente shiny App genera cálculos de estadísticas publicadas por él INE, específicamente la Encuesta Nacional Urbana de Seguridad Ciudadana
Esta app aplica el estándar de calidad definido por el INE para evaluar la calidad de las estadísticas publicadas
Estos cálculos se realizan utilizando el paquete de calidad desarrollado en R que aplica el estándar
Este paquete es un wrapper del paquete survey aplicado al estándar INE

Él es Thomas Lumley, su creador

31 / 37

Un ejemplo para el trabajo diario

Veamos como funciona

library(shiny)
library(calidad)
library(survey)
### declaramos diseño complejo
com_dis <- svydesign(ids = ~Conglomerado,
                     strata = ~VarStrat,
                     weights = ~Fact_Pers,data = enusc)
options(survey.lonely.psu = "certainty")
## APP #
### UI ####
ui <- fluidPage(
  titlePanel("Probando paquete calidad del INE"),
  sidebarLayout(sidebarPanel(
     selectInput("var",label = "Variable de interés",choices = c("",names(enusc)),selected = "")), 
    mainPanel(tableOutput("tabla")
    )
  )
)
  ### SERVER ####
server <- function(input, output, session) {
    ### generamos tabla
    tabulado <- reactive({
       calidad::assess(calidad::create_prop(var = input$var, design = com_dis)) 
    })
    output$tabla <- renderTable({
   #   req(input$var)
      tabulado()
    })
  }
  shinyApp(ui, server)

¿Que implica agregar un nivel de desagregación a los cálculos?

library(shiny)
library(calidad)
library(survey)
### declaramos diseño complejo
com_dis <- svydesign(ids = ~Conglomerado,
                     strata = ~VarStrat,
                     weights = ~Fact_Pers,data = enusc)
options(survey.lonely.psu = "certainty")
## probando calidad 
calidad::assess(calidad::create_prop(var = "VP_DC", domains = "enc_region", design = com_dis))
## APP #
### UI ####
ui <- fluidPage(
  titlePanel("Probando paquete calidad del INE"),
  sidebarLayout(sidebarPanel(
    selectInput("var",label = "Variable de interés",choices = c("",names(enusc)),selected = ""),
  #  selectInput("dominio",label = "Variable desagregacion",choices = c("",names(enusc)),selected = ""),
    downloadButton("download_tabla","Descarga")),
                mainPanel(tableOutput("tabla")
                          ))
)
### SERVER ####
server <- function(input, output, session) {
  # R_dominio = reactive({
  #   # print(input$dominio)
  #
  #   if(input$dominio == ""){
  #     NULL
  #   }else{
  #     input$dominio
  #   }
  # })
### generamos tabla
  tabulado <- reactive({
  calidad::assess(calidad::create_prop(var = input$var,
              #  domains = #R_dominio(),
                design = com_dis))
  })
  output$tabla <- renderTable({
# req(input$var)
tabulado()
    })
}
shinyApp(ui, server)

¿Y si quisiéramos descargar los tabulados a nuestro equipo?

library(shiny)
library(calidad)
library(survey)
### declaramos diseño complejo
com_dis <- svydesign(ids = ~Conglomerado,
                     strata = ~VarStrat,
                     weights = ~Fact_Pers,data = enusc)
options(survey.lonely.psu = "certainty")
## APP #
### UI ####
ui <- fluidPage(
  titlePanel("Probando paquete calidad del INE"),
  sidebarLayout(sidebarPanel(
    selectInput("var",label = "Variable de interés",choices = c("",names(enusc)),selected = ""),
    selectInput("dominio",label = "Variable desagregacion",choices = c("",names(enusc)),selected = ""),
#    downloadButton("download_tabla","Descarga")
),
                mainPanel(tableOutput("tabla")
                          ))
)
### SERVER ####
server <- function(input, output, session) {
  R_dominio = reactive({
    # print(input$dominio)
    if(input$dominio == ""){
      NULL
    }else{
      input$dominio
    }
  })
### generamos tabla
  tabulado <- reactive({
  calidad::assess(calidad::create_prop(var = input$var,
                domains = R_dominio(),
                design = com_dis))
  })
  output$tabla <- renderTable({
req(input$var)
    # print(R_dominio)
    # print(R_denom)
tabulado()
    })
  # output$download_tabla <- downloadHandler(
  #   filename = function() {
  #     paste0("tabulado-", format(Sys.time(),"%Y-%m-%d-%H%M%S"), ".xlsx", sep="")
  #   },
  #   content = function(file) {
  #     writexl::write_xlsx(tabulado(), file)
  #   }
  # )
}
shinyApp(ui, server)

32 / 37

V. Tips y referencias33 / 37

Algunos tips34 / 37

Algunos tipsPlanificar tu app
34 / 37

Algunos tips

Planificar tu app
Explorar técnicas de debugging (print() es tu copiloto)

34 / 37

Algunos tips

Planificar tu app
Explorar técnicas de debugging (print() es tu copiloto)

GIT !!!

34 / 37

Algunos tips

Planificar tu app
Explorar técnicas de debugging (print() es tu copiloto)

GIT !!!
Posibilidades para montar en la web una Shiny App
- shinyapps.io
- ShinyServer
- Docker+Shiny o ShinyServer
- ShinyProxy

34 / 37

Paquetes complementarios

Shinytheme (ui) https://rstudio.github.io/shinythemes/

35 / 37

Paquetes complementarios

Shinytheme (ui) https://rstudio.github.io/shinythemes/
shinydashboard (ui) https://rstudio.github.io/shinydashboard/

35 / 37

Paquetes complementarios

Shinytheme (ui) https://rstudio.github.io/shinythemes/
shinydashboard (ui) https://rstudio.github.io/shinydashboard/
Leaflet (trabajo con mapas y datos georefenciados) https://rstudio.github.io/leaflet/shiny.html

35 / 37

Paquetes complementarios

Shinytheme (ui) https://rstudio.github.io/shinythemes/
shinydashboard (ui) https://rstudio.github.io/shinydashboard/
Leaflet (trabajo con mapas y datos georefenciados) https://rstudio.github.io/leaflet/shiny.html
Golem (Desarrollo de apps) https://thinkr-open.github.io/golem/

35 / 37

Paquetes complementarios

Shinytheme (ui) https://rstudio.github.io/shinythemes/
shinydashboard (ui) https://rstudio.github.io/shinydashboard/
Leaflet (trabajo con mapas y datos georefenciados) https://rstudio.github.io/leaflet/shiny.html
Golem (Desarrollo de apps) https://thinkr-open.github.io/golem/
Rhino (Desarrollo de apps) https://rhinoverse.dev/#rhino

35 / 37

Paquetes complementarios

Shinytheme (ui) https://rstudio.github.io/shinythemes/
shinydashboard (ui) https://rstudio.github.io/shinydashboard/
Leaflet (trabajo con mapas y datos georefenciados) https://rstudio.github.io/leaflet/shiny.html
Golem (Desarrollo de apps) https://thinkr-open.github.io/golem/
Rhino (Desarrollo de apps) https://rhinoverse.dev/#rhino
ShinyManager (autenticación) https://datastorm-open.github.io/shinymanager/

35 / 37

Paquetes complementarios

Shinytheme (ui) https://rstudio.github.io/shinythemes/
shinydashboard (ui) https://rstudio.github.io/shinydashboard/
Leaflet (trabajo con mapas y datos georefenciados) https://rstudio.github.io/leaflet/shiny.html
Golem (Desarrollo de apps) https://thinkr-open.github.io/golem/
Rhino (Desarrollo de apps) https://rhinoverse.dev/#rhino
ShinyManager (autenticación) https://datastorm-open.github.io/shinymanager/
Recursos de shiny para aprender, usar comandos:
- shiny::runExample(NA)
- shiny::runExample("03_reactivity")
- shiny::runExample("04_mpg")
- shiny::runExample("05_sliders")... hasta el 11

35 / 37

Paquetes complementarios

Shinytheme (ui) https://rstudio.github.io/shinythemes/
shinydashboard (ui) https://rstudio.github.io/shinydashboard/
Leaflet (trabajo con mapas y datos georefenciados) https://rstudio.github.io/leaflet/shiny.html
Golem (Desarrollo de apps) https://thinkr-open.github.io/golem/
Rhino (Desarrollo de apps) https://rhinoverse.dev/#rhino
ShinyManager (autenticación) https://datastorm-open.github.io/shinymanager/
Recursos de shiny para aprender, usar comandos:
- shiny::runExample(NA)
- shiny::runExample("03_reactivity")
- shiny::runExample("04_mpg")
- shiny::runExample("05_sliders")... hasta el 11

¿Que viene respecto a Shiny?
- Shiny for python
- R in the browser

35 / 37

Material utilizado para esta clase

https://shiny.posit.co/r/gallery/

Libro hadley Whickam https://mastering-shiny.org

Libro golem https://engineering-shiny.org/golem.html

Cheat sheet shiny https://ugoproto.github.io/ugo_r_doc/pdf/shiny.pdf

36 / 37

INE educa: Clases abiertas de R

Proyecto de Ciencia de Datos

Junio 2023

37 / 37

Pero antes que todo!!!

Trabajaremos con los siguientes paquetes, les invitamos a instalarlos para seguir la clase:

install.packages(c("shiny","guaguas","dplyr","ggplot2",
                   "calidad","survey","writexl"))
library(shiny)
library(guaguas)
library(dplyr)
library(ggplot2)
library(calidad)
library(survey)
library(writexl)
#### versión de R 4.2.3 (2023-03-15)

2 / 37

Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k	Go to previous slide
↓, →, Pg Dn, Space, j	Go to next slide
Home	Go to first slide
End	Go to last slide
Number + Return	Go to specific slide
b / m / f	Toggle blackout / mirrored / fullscreen mode
c	Clone slideshow
p	Toggle presenter mode
t	Restart the presentation timer
?, h	Toggle this help

Esc	Back to slideshow