Capítulo 5: Introducción a ShinyApps

<img style="border-radius: 50%;" src="img/logofundapi.jpg" width="250px"/>
# Capítulo 5: Introducción a ShinyApps 
## **CAPACITACIÓN**
#### LINDA CABRERA ORELLANA
#### Mayo, 2024

---

# Contenido del Capítulo 5

- ¿Qué es `Shiny`?. Conociendo e instalando `Shiny`

- Estructura de `Shiny App`

- Ejecutar una `App`

- Construir un interfaz

- Contenido `HTML`

- Agregar `widgets` de control

- Expresiones reactivas

- Librería `Shinydashboards`

- Carga del tablero a `ShinyApps`

---

---

## ¿Qué es `Shiny`?

.pull-left[
- Shiny es un paquete de R que facilita la creación de aplicaciones web interactivas (apps) directamente desde R.

- Puede alojar aplicaciones independientes en una página web, implantarlo en un documento de R-markdown o crear dashboards.

- Puede ampliar las aplicaciones de Shiny contemas CSS, widgets html y acciones de JavaScript.
]

Para instalar `shiny`:

```r
install.packages("shiny")
```

]

---

---

## Estructura de `Shiny App`

Las aplicaciones Shiny están contenidas en un solo script llamado app.R. El script app.R vive en un directorio (por ejemplo, newdir/) y la aplicación se puede ejecutar con runApp("newdir").

app.R tiene tres componentes:

- Un objeto de interfaz de usuario

- Una función de servidor

- Llamar a la función shinyApp

El objeto de la interfaz de usuario _(ui)_ controla el diseño y la apariencia de su aplicación. La función de servidor _(server)_ contiene las instrucciones que la computadora necesita para construir la aplicación.

Finalmente, la función `shinyApp()` crea objetos de aplicación Shiny a partir de un interfaz de usuario y servidor.

---

## UI

Aquí está el objeto `ui` para el ejemplo de "Hello Shiny".

```r
library(shiny)
# Definir la interfaz de usuario para la aplicación que dibuja un histograma ----
ui <- fluidPage(
    # Título de la App ----
    titlePanel("Hello Shiny!"),
    # Diseño de barra lateral con definiciones de entrada y salida ----
    sidebarLayout(
        # Panel de barra lateral para entradas ----
        sidebarPanel(
            # Entrada: control deslizante para el número de barras ----
            sliderInput(inputId = "bins",
                        label = "Number of bins:",
                        min = 1,
                        max = 50,
                        value = 30)
        ),
        # Panel principal de visualización de salidas ----
        mainPanel(
            # Salida: Histograma ----
            plotOutput(outputId = "distPlot")
        )
    )
)
```

---

## Partes del UI

---

## Server

Aquí está la función `server()` para el ejemplo de "Hello Shiny".

```r

# Definir la lógica del servidor requerida para dibujar un histograma ----

server <- function(input, output) {
    
    # Histograma de la base Old Faithful Geyser Data ----
    # con el número de barras indicado
    # Esta expresión que genera un histograma está envuelta en una llamada a renderPlot para indicar que:
    # 1. Es "reactivo" y, por lo tanto, debe volver a ejecutarse automáticamente cuando cambian las entradas
    # 2. El tipo de salida es un gráfico
    output$distPlot <- renderPlot({
        
        x <- faithful$waiting
        bins <- seq(min(x), max(x), length.out = input$bins + 1 )
        
        hist(x, breaks = bins, col = "#007bc2", border = "white",
             xlab = "Waiting time to next eruption (in mins)",
             main = "Histogram of waiting times")
        })
}
```

---

## Partes del server

---

## ShinyApp

En un nivel, la función `server()` "Hello Shiny" es muy simple. El script hace algunos cálculos y luego traza un histograma con el número solicitado de contenedores.

Sin embargo, la mayor parte del script está envuelto en una llamada a `renderPlot`. El comentario sobre la función explica un poco sobre esto.

Tener en cuenta que en el archivo `app.R` deberá comenzar cargando el paquete Shiny y finaliza con una llamada a `shinyApp`:

```r
library(shiny)

# See above for the definitions of ui and server
ui <- ...

server <- ...

shinyApp(ui = ui, server = server)
```

La sesión de R estará ocupada mientras la aplicación "Hello Shiny" esté activa, por lo que no podrá ejecutarse ningún comando de R. R está monitoreando la aplicación y ejecutando las reacciones de la aplicación. Para recuperar la sesión de R, se presiona
`ESC` o `hacer clic en el ícono de la señal de alto`
(que se encuentra en la esquina superior derecha del panel de la consola de RStudio).

---

---

## Ejecutar una `App`

Cada aplicación Shiny tiene la misma estructura: un archivo app.R que contiene la interfaz de usuario (`ui`) y el servidor (`server`). Se puede crear una aplicación Shiny creando un nuevo directorio y guardando un archivo app.R dentro de el. Se recomienda que cada aplicación viva en su propio directorio único.

`Nota`: runApp es similar a `read.csv()`, `read.table()` y muchas otras funciones en R. El primer argumento de runApp es la ruta del archivo desde su directorio de trabajo hasta el directorio de la aplicación. El código anterior asume que el directorio de la aplicación está en su directorio de trabajo. En este caso, la ruta del archivo es solo el nombre del directorio.

```r
library(shiny)

runApp("my_app")
```

---

## ¡Ejemplos a practicar!

Se puede crear Shiny Apps copiando y modificando aplicaciones existentes. La galería de Shiny proporciona algunos buenos ejemplos, o se puede usar los once ejemplos de Shiny preconstruidos que se enumeran a continuación.

```r
runExample("01_hello")  # un histograma
runExample("02_text")   # tablas y data frames
runExample("03_reactividad")    # expresiones reactivas
runExample("04_mpg")    # variables globales
runExample("05_sliders")        # barras deslizantes
runExample("06_tabsets")        # paneles con pestañas
runExample("07_widgets")        # texto de ayuda y botones de envío
runExample("08_html")   # Shiny App creada a partir de HTML
runExample("09_upload")         # asistente de carga de archivos
runExample("10_download")       # asistente de descarga de archivos
runExample("11_timer")          # temporizador automático
```

---

---

## Construir un interfaz

Luego de comprender la estructura de una aplicación Shiny, es hora de crear una aplicación desde cero.

Esta sección mostrará cómo crear una interfaz de usuario para su aplicación. Se aprenderá cómo diseñar la interfaz de usuario y luego agregar texto, imágenes y otros elementos HTML a su aplicación Shiny.

```r
library(shiny)

# Definir UI ----
ui <- fluidPage(
    
)

# Definir lógica server ----
server <- function(input, output) {
    
}

# Ejecutar App ----
shinyApp(ui = ui, server = server)
```

Este código es el mínimo necesario para crear una aplicación Shiny. El resultado es una aplicación vacía con una interfaz de usuario en blanco, un punto de partida adecuado para esta sección.

---

## Diseño

Shiny usa la función `fluidPage()` para crear una pantalla que se ajusta automáticamente a las dimensiones de la ventana del navegador de su usuario.

Por ejemplo, la siguiente función `ui` crea una interfaz de usuario que tiene un panel de título (`main panel`) y un diseño de barra lateral (`side bar panel`), que incluye un panel de barra lateral y un panel principal. Tenga en cuenta que estos elementos se colocan dentro de la función `fluidPage`.

```r
library(shiny)

ui <- fluidPage(
    titlePanel("title panel"),
    
    sidebarLayout(
        sidebarPanel("sidebar panel"),
        mainPanel("main panel")
    )
)
```
]

---

## Diseño

.pull-left[
`titlePanel()` y `sidebarLayout()` son los dos elementos más populares para agregar a fluidPage. Crean una aplicación Shiny básica con una barra lateral.

`sidebarLayout()` siempre toma dos argumentos:
 - Output de la función `sidebarPanel()`
 - Output de la función `mainPanel()`

Estas funciones colocan contenido en la barra lateral o en los paneles principales. El panel de la barra lateral aparecerá en el lado izquierdo de su aplicación de forma predeterminada. Se puede mover hacia el lado derecho dándole a `sidebarLayout()` el argumento opcional `position = "right"`.

Guía de diseño:
[https://shiny.rstudio.com/articles/layout-guide.html](https://shiny.rstudio.com/articles/layout-guide.html)
]

.pull-rigth[
`titlePanel()` y `sidebarLayout()` crean un diseño básico para Shiny, pero también puede crear diseños más avanzados. Se puede usar `navbarPage()` para darle a la aplicación una interfaz de usuario de varias páginas que incluya una barra de navegación. O puede usar `fluidRow()` y `column` para construir un diseño a partir de un sistema de cuadrícula.

```r
library(shiny)

ui <- fluidPage(
    titlePanel("title panel"),
    
    sidebarLayout(
        position = "right",
        sidebarPanel("sidebar panel"),
        mainPanel("main panel")
    )
)
```

]

---

## Contenido HTML

.pull-left[
Se puede agregar contenido al Shiny colocándolo dentro de la función `*Panel`. Por ejemplo, las aplicaciones anteriores muestran una cadena de caracteres en cada uno de sus paneles. Las palabras "sidebar panel" aparecen en el panel de la barra lateral, porque agregamos la cadena a la función `sidebarPanel()`; por ejemplo: `sidebarPanel(sidebarpanel")`. Lo mismo sucede para el texto en el panel de título y el panel principal.

Para agregar contenido más avanzado, se usará una de las funciones de etiquetas HTML de Shiny. Estasfunciones son paralelas a las etiquetas HTML5 comunes. Probemos algunos de ellos:
]

---

## Encabezados

Para crear un elemento de encabezado:

- Se selecciona una función de encabezado (por ejemplo, `h1` o `h5`)
- Se le da el texto que se desea ver en el encabezado

Por ejemplo, puede crear un encabezado de primer nivel que diga "Mi título" con `h1("Mi título")`. Si ejecuta el comando en la línea de comando, notará que produce código HTML.

```r
>library(shiny)
> h1("My title")
<h1>My title</h1>
```

Para colocar el elemento en su aplicación:

- Poner `h1("Mi título")` como argumento a `titlePanel()`, `sidebarPanel()` o `mainPanel()`

El texto aparecerá en el panel correspondiente a la página web. Puede colocar varios elementos en el mismo panel si los separa con una coma.

---

## Encabezados

Probemos esto: el nuevo script a continuación usa los seis niveles de encabezados. Actualice su ui.R para que coincida con el script y luego reinicie su aplicación.

Recuerde reiniciar la aplicación Shiny, puede ejecutar
`runApp("App-1")`, hacer clic en el botón `Run App` o usar los atajos de teclado.

```r
ui <- fluidPage(
    titlePanel("My Shiny App"),
    sidebarLayout(
        sidebarPanel(),
        mainPanel(
            h1("Titulo - Primer nivel"),
            h2("Titulo - Segundo nivel"),
            h3("Titulo - Tercer nivel"),
            h4("Titulo - Cuarto nivel"),
            h5("Titulo - Quinto nivel"),
            h6("Titulo - Sexto nivel")
        )
    )
)
```

---

## Encabezados

Una primera app, podría verse así....

---

## Encabezados

Se puede crear este efecto con `align = "center"`, como en `h6("Episode IV", align = "center")`. En general,cualquier atributo de etiqueta HTML se puede establecer como argumento en cualquier función de etiqueta de Shiny.

Aquí está el código para la interfaz de usuario inspirada en Star Wars:

```r
ui <- fluidPage(
    titlePanel("My Star Wars App"),
    sidebarLayout(
        sidebarPanel(),
        mainPanel(
            h6("Episode IV", align = "center"),
            h6("A NEW HOPE", align = "center"),
            h5("It is a period of civil war.", align = "center"),
            h4("Rebel spaceships, striking", align = "center"),
            h3("from a hidden base, have won", align = "center"),
            h2("their first victory against the", align = "center"),
            h1("evil Galactic Empire.")
        )
    )
)
```

---

# Introducción a ShinyApps
## **CAPÍTULO 5**

.center[
### [@lindateachtech <svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>](https://www.linkedin.com/in/lindateachtech/)

### [@lindateachtech <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>](https://twitter.com/lindateachtech)
]