Interactive Webapps 💻 with Shiny ✨

# Interactive Webapps 💻 with Shiny ✨
### Florencia D’Andrea (🐦cantoflor_87)
### Meetup R-Ladies Rcia-Ctes + R en el NEA
### 21/02/2020

---

# Licence

<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%

## Interactive Webapps in R

---

# Basics

A Shiny app is a web page (UI) connected to a computer running a live R session (Server)

Users can manipulate the UI, which will cause the server to update the UI’s displays (by running R code).

---

# App.R 📄

```r
library(shiny)

# User interfase
UI <- fluidPage( )

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

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

You can insert all the code at once with the shinyapp snippet

---

# Building a shiny app

**UI**

1. Add the template -> ***app.R***

1. Select a layout function

1. Select Inputs and place them

]

**Server**

1. Select `render*()` and `*Output()` functions

1. Refer to outputs with `output$<id>`

1. Refer to inputs with `input$<id>`

]

---

# Run the app 🎬

* Click the Run App button in the document toolbar.

* Use a keyboard shortcut: Cmd/Ctrl + Shift + Enter.

* `shiny::runApp()` with the path to the directory containing **app.R**

---

# Cheatsheet

---

# User Interfase (UI)

---

# Layout

Organize panels and elements into a layout with a **layout function**

---

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

---

# Inputs

Collect values from the user

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

---
# Input selection

`radioButtons()` arguments

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

---

---

# ⚠️ Warning!

Families can be complex

---

---

---

# Live coding #1 🙌💻

* Add the Shinyapp template

* Layouts and inputs

* Run the App

➡️📁 Rladies_app

---

# Reactivity

---

**UI**

1. Add the template -> ***app.R***

1. Select a layout function

1. Select Inputs and place them

]

**Reactivity**

1. Select `render*()` and `*Output()` functions

1. Refer to outputs with `output$<id>`

1. Refer to inputs with `input$<id>`

]

---

# `render*()` and `*Output()` functions

---

# Plot

```r
library(ggplot2)

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

---

# Refer to inputs with `input$<id>`

---

# Refer to inputs with `input$<id>`

---

# Refer to outputs with `output$<id>`

---

# Refer to outputs with `output$<id>`

Observe `render*()` and `*Output()` functions!

---

---

# Extras

---

# Add a Theme

---

# Add a Title

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

---

# Include an image

1. Place the file in the ***www*** subdirectory
1. Link to it with  `img(src="<file name>")`

---

# Live coding #2 🙌💻

* Server

* Reactivity

* Run the app

➡️📁 Rladies_app

---

---

# Repo

https://github.com/flor14/rladies_shiny_meetup_2020

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

---

# Examples
 
[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)

---

# Thanks!

![](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)