Aplicaciones Web Interactivas 💻 con Shiny ✨

# Aplicaciones Web Interactivas 💻 con Shiny ✨
## Meetup de R-Ladies Rcia-Ctes y R en el NEA
### Florencia D’Andrea (<span class="citation">@cantoflor_87</span>)
### R-Ladies Buenos Aires - R en Baires
### 21/02/2020

---

# Licencia

<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a>.

---

class: center, inverse, bottom
background-image: url("Shiny_grande.jpg")
background-position: 50% 50%

## Aplicaciones Web Interactivas con R

---

# ¡Comencemos!

Una Shiny App  es una página web (UI) conectada a una computadora que ejecuta una sesión de R en vivo (Server)

Los usuarios pueden manipular la UI,  lo cual lleva al server (_servidor_) a enviar una actualización de la UI exhibida (mediante ejecución de código en R).

---

# App.R 📄

```r
library(shiny)

# User interfase
UI <- fluidPage( )

# Server
Server <- function(input, output){      }

# Combines UI and server
shinyApp (ui = ui, server = server)
```

Podes insertar el template usando la plantilla precargada

---

# Construyendo una Shiny app

**UI**

1. Añadí la plantilla -> ***app.R***

1. Selecciona una función de diseño (_layout_)

1. Selecciona y organiza los inputs

]

**Server**

1. Selecciona las funciones `render*()` y `*Output()` adecuadas

1. Referite a las salidas esperadas usando `output$<id>`

1. Referite a las entradas esperadas usando `input$<id>`

]

---

# Ejecutá la Shinyapp 🎬

* Dale click al botón `Run App` en la barra de tareas.

* Usa un atajo del teclado: Cmd/Ctrl + Shift + Enter.

* Ejecuta `shiny::runApp()` incluyendo la ruta al archivo  **app.R**

---

# Guía Rápida

---

# User Interfase (UI)

---

# Diseño

Organiza los paneles y elementos dentro del diseño (_layout_) de UI que elegiste usando una **funcion de diseño**

---

`Ui <- fluidPage(sidebarLayout(sidebarPanel(…), mainPanel(…))`

---

# Inputs

Collect values from the user

`Ui <- fluidPage(sidebarLayout(sidebarPanel(radioButtons(…)), mainPanel(…))`

---
# Selección de inputs por el usuarie

Argumentos de la función `radioButtons()`

```r
radioButtons(inputId = `"axis_x"`, 
             label = `"X"`, 
             choices = c("Highway fuel economy (mpg)" = "hwy",
                         "Engine displacement (L)" = "displ",
                         "Car type" = "class"))
```

---

---

# ⚠️ ¡Cuidado!

Las familias pueden ser complejas

---

---

---

# Demo #1 🙌💻

* Usa la plantilla de Shiny

* Elegí un diseño e inputs

* Ejecutá the App

➡️📁 
**Rladies_app_es**

---

# Reactivity

---

**UI**

1. Añadí la plantilla -> ***app.R***

1. Selecciona una función de diseño (_layout_)

1. Selecciona y organiza los inputs

]

**Server**

1. Selecciona las funciones `render*()` y `*Output()` adecuadas

1. Referite a las salidas esperadas usando `output$<id>`

1. Referite a las entradas esperadas usando `input$<id>`

]

---

# Funciones `render*()` y `*Output()`

---

# Gráfico

```r
library(ggplot2)

ggplot(data = mpg)+
  geom_point(mapping = aes(x = displ,
                           y = hwy,
                           color = class))
```

---

# Referite a las entradas usando `input$<id>`

---

# Referite a las entradas usando`input$<id>`

---

# Referite a las salidas usando `output$<id>`

---

# Referite a las salidas usando `output$<id>`

Observa las funciones `render*()` y `*Output()`

---

---

# Extras

---

# Agrega un tema

---

# Agrega un título

```r
*ui<- fluidPage(theme = shinytheme("lumen"),
*              h1(strong("R-Ladies Buenos Aires")),
*              h4(em("Shiny meetup")),
     sidebarLayout( sidebarPanel( radioButtons(…) ),
                                  mainPanel(… ))
```

---

# Incluí una imagen

1. Agrega el archivo de la imagen dentro de una carpeta llamada ***www*** 
1. Agrega el siguiente código para posicionar la imagen en la UI `img(src="<file name>")`

---

# Demo #2 🙌💻

* Servidor

* Reactividad

* Elección de tema y posicionamiento de la imagen

* Ejecutar la app

➡️📁 
*Rladies_app*

---

---

# Repo

https://github.com/flor14/rladies_shiny_meetup_2020

![](https://media.giphy.com/media/X8HbeXDF7nzaM/200w_d.gif)

---

# Ejemplos
 
[RStudio Shiny Gallery](https://shiny.rstudio.com/gallery/)

[Winners of the 1st Shiny Contest](https://blog.rstudio.com/2019/04/05/first-shiny-contest-winners/)

---

# Links
 
 [Mastering Shiny](https://mastering-shiny.org/)
 
 [Shiny's Holy Grail - UseR! 2019 - Joe Cheng  video](https://www.youtube.com/watch?v=5KByRC6eqC8)

[Tutorial R-Studio](https://shiny.rstudio.com/tutorial)

[Javascript for Shiny Users](https://github.com/rstudio-conf-2020/js-for-shiny)

[Golem Package](https://github.com/ThinkR-open/golem)

[Shinytest](https://rstudio.github.io/shinytest/articles/package.html)

---

# ¡Muchas gracias!

[Florencia](@cantoflor_87)

![](https://media.giphy.com/media/3oEjHWPTo7c0ajPwty/giphy.gif)

Slides created via the R package [**xaringan**](https://github.com/yihui/xaringan).

The Template comes from [Allison Horst](https://remarkjs.com)