Building a shiny app

class: center, middle, inverse, title-slide

.title[
# Building a shiny app
]
.subtitle[
## SISBID 2024 <br> <a href="https://github.com/dicook/SISBID" class="uri">https://github.com/dicook/SISBID</a>
]
.author[
### Di Cook (<a href="mailto:dicook@monash.edu" class="email">dicook@monash.edu</a>) <br> Heike Hofmann (<a href="mailto:hhhofmann4@unl.edu" class="email">hhhofmann4@unl.edu</a>) <br> Susan Vanderplas (<a href="mailto:susan.vanderplas@unl.edu" class="email">susan.vanderplas@unl.edu</a>)
]
.date[
### 08/14-16/2024
]

---

# Shiny Apps in R

- `shiny` package developed and supported by RStudio (Winston Chang, Joe Cheng, JJ Allaire and others)
- Resources for shiny: https://shiny.rstudio.com/: 
    - [Gallery](https://shiny.rstudio.com/gallery/) of great examples,
    - [Tutorials](https://shiny.rstudio.com/tutorial/) at different levels

``` r
# Additional packages for Shiny
install.packages(c("bsicons", "showtext", "ragg", "thematic"))
remotes::install_github("rstudio/bslib") # Get the latest version
```

# Next five minutes

- Create a new shiny app in RStudio
- Run it
- Stop it

---
class: inverse middle 
# Create your first app

- In RStudio, `File` menu, `New file`, `Shiny web app` to start a new app
- The easiest start is the `Single file`, which will put both server and ui functions in the same file, `app.R`

---
# Two main parts

- What we see and interact with: <br/><br/>
  - user interface: layout with user input and (plot) output <br/><br/>
- What is going on underneath: <br/><br/>
  - the server: glue between user input and output
  
---
# A Minimal Example

``` r
library(shiny)

ui <- fluidPage(
)

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

shinyApp(ui, server)
```

---
# A bit more fancy

``` r
library(shiny)
sidebar <-  sidebarPanel(width = 3, 
                         "Fun inputs")

main_col <- column(width = 9, 
                   "Some results")

ui <- fluidPage(
  title = "App Title",
  sidebar, 
  main_col)
)

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

shinyApp(ui, server)
```
---
# A bit more fancy

``` r
library(shiny)

sidebar <-  sidebarPanel(
  width = 3, 
  textInput("name", "Enter your name:", value = "Heike"))

main_col <- column(width = 9, 
                   "Some results")

ui <- fluidPage(
  title = "App Title",
  sidebar, 
  main_col
)

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

shinyApp(ui, server)
```
---

# Shiny Inputs

Shiny has many different input options, see the [widget gallery](https://shiny.rstudio.com/gallery/widget-gallery.html):

- `actionButton()` - creates a clickable button
- `selectInput()` create a select list 
- `checkboxInput()` and `checkboxGroupInput()`
- `dateInput()` - calendar to select a date
- `dateRangeInput()` - select a range of dates
- `fileInput()` - upload a file
- `numericInput()` - input a numeric value
- `radioButtons()` - select one or more items
- `sliderInput()` - slide along a range of values
- `textInput()` - input a string

---
class: inverse
# Your Turn

In the shiny app below add a list of your favorite countries to the sidebar panel:

``` r
library(shiny)

sidebar <-  sidebarPanel(
  width = 3, 
  textInput("name", "Enter your name:", value = "Heike"))

main_col <- column(width = 9, 
                   "Some results")
ui <- fluidPage(
  title = "App Title",
  sidebar, 
  main_col
)

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

shinyApp(ui, server)
```

---
# Adding Output

- Output needs to be specified in two places: 
  - in the `ui` function we need to create a placeholder to reserve space for the output
  - in the `server` function, we need to create the output.

1. `ui` functionality for output has typically the form
  `xxxOutput (outputID)`
Output can be in form of tables, plots, text, ...

2. `server` funtionality has typically the form
  `renderXXX`, where `xxx` is a table, plot, text, etc.

---
# Shiny Outputs

Shiny also has a variety of different output options:

- `renderDataTable()` - outputs an interactive, sortable data table
- `htmlOutput()` - output html elements
- `renderPlot()` - output an R plot
- `renderPrint()` - output text from print() in R
- `renderTable()` - output an HTML table
- `renderText()` - output text from R
- `renderUI()` - output a custom part of the user interface
- `renderImage()` - print an image to the page

---
# Adding a plot

``` r
library(shiny)

sidebar <-  sidebarPanel(
  width = 3, 
  selectInput("country", "Pick your favorite country:", 
              choices = c("Australia", "United States", "Germany"))
)
*main_col <- column(
* width = 9,
* plotOutput("scatter")
*)

ui <- fluidPage(
  title = "App Title", sidebar, main_col)
)

server <- function(input, output, session) {
* output$scatter <- renderPlot({
*   mtcars %>% ggplot(aes(x = disp, y = mpg)) +
*     geom_point() +
*     ggtitle(input$country)
  })
}

shinyApp(ui, server)
```

---
class: inverse middle 
# Your turn

- Add an interactive plot of the TB data into your app.
- Change the select box, so that the user can choose any country. Think of `unique(tb$country)` for defining the choices

---
# Deploy an app

- Sign up for an account on [https://www.shinyapps.io/](https://www.shinyapps.io/)
- Authenticate your account
- You may need to do some setup in your session, e.g. install the library `rsconnect`

---
# Resources

- [RStudio Tutorial](http://shiny.rstudio.com/tutorial/)  
- [Deploy your app for others to use](https://www.shinyapps.io/)
- [Shiny Setup, Showcase, and Server](http://shiny.rstudio.com)  
- [Community discussion](https://community.rstudio.com)

---
# Share and share alike

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