Web Apps with Shiny

# Web Apps with Shiny
## R Learning Series for PSRC

---

.b--moon-gray.ba.bw1.br3.shadow-5.ph2[
<img src="images/mod-one-app.png" width="2100" style="display: block; margin: auto;" />
]
---

.bg-near-white.b--gray.ba.bw2.br3.shadow-5.ph4.mt6[
Getting Started (🏃/🛑)
]
--
.bg-near-white.b--gray.ba.bw2.br3.shadow-5.ph4.mt2[

Anatomy, Inputs ➡️ & Outputs ⬅️

Layout
]
--
.bg-near-white.b--gray.ba.bw2.br3.shadow-5.ph4.mt2[
Reactivity ⚙️
]
--
.bg-near-white.b--gray.ba.bw2.br3.shadow-5.ph4.mt2[
ggplot2 & Plotly 📦
]

---

## Intermediate Files

![](images/slide-images/directories.png)

---

# An R Framework

Build a web application using premade tools

![](images/slide-images/frameworks.png)

---

### Shiny in the Wild

.panel[.panel-name[App 1]
<iframe width="100%" height="400" src="https://jennadallen.shinyapps.io/pet-records-app/?_ga=2.129876812.1380069351.1614316913-2023337461.1608142979" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Source: [Jenna Allen, An App to Visualize and Share My Dogs' Medical History](https://jennadallen.shinyapps.io/pet-records-app/?_ga=2.129876812.1380069351.1614316913-2023337461.1608142979)
]

Source: [Philipp Reiner, Identifying real estate investment opportunities](https://phillyo.shinyapps.io/intelligentsia/?_ga=2.126665933.1380069351.1614316913-2023337461.1608142979)
]

]

---

# Running an app

## A high level view

---

### When our app is deployed, a shiny server is our web server

![](images/slide-images/Slide2.SVG)

---

### When running an app locally, our computer is the web server

![](images/slide-images/Slide1.SVG)

---

# Getting Started

## Operating the app

---

# Shiny Structure

![](images/nantasenamat-ui-server.png)

Image source: [Build Your First Shiny App in R, Chanin Nantasenamat towardsdatascience.com](https://towardsdatascience.com/build-your-first-shiny-web-app-in-r-72f9538f9868)

---

# The UI

---

# Outputs

![](images/slide-images/outputs.png)
---

## App

---

# Inputs

![](images/slide-images/inputs.png)

---

# Layout

---

# Reactivity

## The Building Blocks

---

## Reactive Programming

.bg-washed-yellow.b--gold.ba.bw2.br3.shadow-5.ph4.mt5[...a style of programming that focuses on values that change over time, and calculations and actions that depend on those values...We want outputs to stay in sync with inputs, while ensuring that we never do more work than necessary.

.tr.right[--Hadley Wickham, *Mastering Shiny*]

]]

.bg-washed-green.b--green.ba.bw2.br3.shadow-5.ph4.mt5.flex.justify-around[

`observe({})`
]

`observeEvent({})`
]

]

---

## Reactive Programming

.tr.right[--Hadley Wickham, *Mastering Shiny*]

]]

.bg-washed-green.b--green.ba.bw2.br3.shadow-5.ph4.mt5.flex.justify-around[

**`observe({})`**

]

`observeEvent({})`
]

]

---

### Chaining Reactives

```r
a_name <- reactive({
  # do stuff
})
```

```r
a_name_1 <- reactive({
  a_name() # do stuff with a_name
})
```
--

```r
a_name_2 <- reactive({
  a_name_1() # do stuff with a_name_1
})
```
--

```r
my_output$an_output <- renderTable({
  a_name_2() # render a_name_2
})
```

---

### Reactives

```r
a_name <- reactive({
  # do stuff
})
```

- a conduit between reactive source and endpoint

![](images/slide-images/reactive.png)

---

### Reactives

- can access other reactive values

```r
a_name <- reactive({
  # do stuff
})

another_name <- reactive({
  # do more stuff with a_name
  a_name() 
})
```

- returns a value (e.g. data frame, list, etc. )

- help avoid repetition

- decompose large complex code into smaller pieces

- returned value is cached until a reactive dependency is changed

---

```r
a_name <- reactive({
  # do stuff
})
```

- named

- very lazy

- called upon to do stuff

- returns a value

]

```r
observe({
  # do stuff right away
})
```

- not named

- very eager

- will react even when it doesn't have reactive dependents

- creates a side-effect

]
---

### Side-effects

Instead of storing the end-result in an R object, the end-result is some interaction with the 'external' world.

- 💾 writing, downloading a file to disk<sup>*<sup>

.footnote[
[*] Although Shiny has a specific download file function that doesn't require `observe({})`
]

- ✂️ copying & 📋 pasting files

- updating a database or web API

- 🎚 updating values of input widgets

---

# Web Apps with Shiny

## Session Two

---

.bg-near-white.b--gray.ba.bw2.br3.shadow-5.ph4.mt6[
More reactivity ⚙️
]
--
.bg-near-white.b--gray.ba.bw2.br3.shadow-5.ph4.mt2[
ggplot2 & Plotly 📦

DT 📦

]
--
.bg-near-white.b--gray.ba.bw2.br3.shadow-5.ph4.mt2[
Styling 💈 💅
]
--
.bg-near-white.b--gray.ba.bw2.br3.shadow-5.ph4.mt2[
Multi-file apps 📃
]
--
.bg-near-white.b--gray.ba.bw2.br3.shadow-5.ph4.mt2[
Deploy 🚀
]

---

```r
a_name <- reactive({
  # do stuff
})
```

- named

- very lazy

- called upon to do stuff

- returns a value

]

```r
observe({
  # do stuff right away
})
```

- not named

- very eager

- will react even when it doesn't have reactive dependents

- creates a side-effect

]

---

# Reactivity

## Delaying Reactions

---

### Delay with Events

.bg-washed-green.b--green.ba.bw2.br3.shadow-5.ph4.mt5.flex.justify-around[

`observe({})`
]

**`observeEvent({})`**
]

]

---

### Delay a reactive

```r
a_name <- eventReactive(input$action_button, {
  # do stuff when button is clicked
})
```

```r
a_name <- eventReactive(input$checkbox %in% c(1, 2), {
  # do stuff when boxes 1 or 2 are checked
})
```
]

]

---

### Delay an observer

```r
observeEvent(input$action_button, {
  # do side-effect when button is clicked
})
```

```r
observeEvent(input$checkbox %in% c(1, 2), {
  # do side-effect when boxes 1 or 2 are checked
})
```
]

]

---

# DT

### Not to be confused with data.table

---

# DT a.k.a. DataTables

<div id="htmlwidget-85ea948eee791368734a" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-85ea948eee791368734a">{"x":{"filter":"none","data":[["Mazda RX4","Mazda RX4 Wag","Datsun 710","Hornet 4 Drive","Hornet Sportabout","Valiant"],[21,21,22.8,21.4,18.7,18.1],[6,6,4,6,8,6],[160,160,108,258,360,225],[110,110,93,110,175,105],[3.9,3.9,3.85,3.08,3.15,2.76]],"container":"<table class=\"display\">\n  <thead>\n    <tr>\n      <th> <\/th>\n      <th>mpg<\/th>\n      <th>cyl<\/th>\n      <th>disp<\/th>\n      <th>hp<\/th>\n      <th>drat<\/th>\n    <\/tr>\n  <\/thead>\n<\/table>","options":{"columnDefs":[{"className":"dt-right","targets":[1,2,3,4,5]},{"orderable":false,"targets":0}],"order":[],"autoWidth":false,"orderClasses":false}},"evals":[],"jsHooks":[]}</script>

---

.bg-washed-green.b--green.ba.bw2.br3.shadow-5.ph4.mt5.flex.justify-around[

`formatPercentage()`
]

`formatDate()`
]

]

---

.bg-washed-green.b--green.ba.bw2.br3.shadow-5.ph4.mt5.flex.justify-around[

`formatPercentage()`
]

`formatDate()`
]

]

.bg-washed-yellow.b--yellow.ba.bw2.br3.shadow-5.ph4.mt5.flex.justify-around[

**`styleColorBar()`**: displaying a color bar in the cell. Its size is relative to the share of the largest value in the column.

**`styleEqual()`**: style based on unique values.
]

]

---

# Styling

---

## If web development was building a house 🏠...

- HTML: organizing content (structure)

.bg-washed-blue.b--blue.ba.bw2.br3.shadow-5.mt2[
- **CSS**: design 
    - font 
    - color
    - margins
    - layout 
    - responsive design
    - many more...
]
- JavaScript: function (plumbing, electricity works)

---

## IYKYK

---

## Bootstrap

- An open-source CSS framework for designing the UI

- Reusable code combining HTML, CSS, and JS
  
  - Preset design (font-family, boldness, padding, etc.)
  
  - Creates responsive websites
  
  - Easily customizable...by web designers

]

.pull-right[
<iframe src="https://shiny.rstudio.com/gallery/widget-gallery.html" width="480" height="360" frameBorder="0" allowFullScreen></iframe>
]

---

### Per Joe Cheng (CTO RStudio)...

![](images/joe-cheng-slide-24.png)

Slide source: Joe Cheng, RStudio::Conf 2020, *Styling Shiny Apps with Sass and Bootstrap 4* Slide #24. Watch presentation and access his slide deck [here](https://www.rstudio.com/resources/rstudioconf-2020/styling-shiny-apps-with-sass-and-bootstrap-4/).

---

Using CSS to overwrite Bootstrap = working with tangled 🧶

---
class: center, middle

Using CSS to overwrite Bootstrap = working with tangled 🧶

.bg-washed-blue.b--blue.ba.bw2.br3.shadow-5.mt2.flex.justify-center[
.div.mr6[`shinythemes`] 
.div.ml6[`bslib`]
]

---

## CSS using Classes

```html
<div>
  
  <p>Here is some text 
in a 'box'</p>

</div>
```
]

]

```html
<div class=my-style>
  
  <p>Here is some text 
     in a 'box'</p>

</div>
```

```css
.my-style {
  
  color: blue;
  border: dashed red;
  border-radius: 30px;
  display: flex;
  justify-content: center;

}
```

]

.pull-right[
<style>
.my-style {
  color: blue;
  border: dashed red;
  border-radius: 30px;
  display: flex;
  justify-content: center;
}
</style>

<div class=my-style>
  <p>Here is some text
  in a 'box'<p>
</div>
]
]

]

---

## CSS Selectors

|CSS Selector Type | Examples |
|------------------|----------|
|HTML Tag| `p{}`, `div{}`|
|Class | `.class-name{}`, `.my-style{}` |
|Id | `#id-name{}`, `#main_table{}` |

...and many others

---

# Deploying your App

---

## PSRC Shiny Server

.f6[
http://aws-linux:3838
<iframe src="http://aws-linux:3838/" width="780" height="460" frameBorder="0" allowFullScreen></iframe>
]

---

### PSRC Shiny Server, Reqs

.bg-washed-blue.b--blue.ba.bw2.br3.shadow-5.mt2.ph4[
Code must be on Github <svg aria-hidden="true" role="img" viewBox="0 0 496 512" style="height:1em;width:0.97em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>.

---

.bg-washed-blue.b--blue.ba.bw2.br3.shadow-5.mv2.ph4[
Learning Bash commands to navigate the Linux server and reboot your app.

.f6[
We can help set it up, and our wiki can be a guide:  
http://aws-linux/mediawiki/index.php/Shiny_Server
]
]

---

# shinyapps.io

## Create a login

You'll be asked to create an account name which is just the prefix of your future url. You can change this later in `Settings`

## Deleting an account
- the only way is by contacting support@rstudio.com
- [https://community.rstudio.com/t/delete-account-shinyapps-io/22692](https://community.rstudio.com/t/delete-account-shinyapps-io/22692)