Polish and share your own shiny app

class: center, middle, inverse, title-slide

.title[
# Polish and share your own shiny app
]
.subtitle[
## SISBID 2024 <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>) Heike Hofmann (<a href="mailto:hhhofmann4@unl.edu" class="email">hhhofmann4@unl.edu</a>) Susan Vanderplas (<a href="mailto:susan.vanderplas@unl.edu" class="email">susan.vanderplas@unl.edu</a>)
]
.date[
### 08/14-16/2024
]

---

class: inverse middle

# Your turn

- Join forces with your neighbours or work alone
- You need to make your own app, or interactive document, on a topic of your choice
- Some ideas are data from [TidyTuesday](https://github.com/rfordatascience/tidytuesday) or [fivethirtyeight](https://github.com/fivethirtyeight/data)
- Your app needs to have 
    - at least one interactive plot
    - some GUI element like a menu or checkboxes
    - some nice styling

😱 If you are not confident going alone, work through the steps in the next few slides instead, to make an app.

---
# RStudio Connect and ShinyApps

- Sign up for an account on https://www.shinyapps.io/ 
- Authenticate your account 
- Install the library rsconnect (this is the part that may require admin access to your machine) 
- Follow the instructions on ShinyApps.io to authenticate and upload your first app!

---
# Initiate

✅ Using the RStudio `File` menu,

- choose `New file`, 
- choose "Shiny web app"
- Give it a name, and choose `Single file`

This will create a folder in your workspace with the same name as you gave your app. It will also open the `app.R` file in your text editor pane.

🛑 Click the `Run App` button on the RStudio window.

✅ Click `Publish` to upload your app to the shinyapps.io server.

㊗️ You've just published your first app

---
# Make it yours

Change the plot to use `ggplot`, this involves changing the server function to be this:

``` r
server <- function(input, output) {
 output$distPlot <- renderPlot({
 ggplot(faithful, aes(x=waiting)) + geom_histogram(bins = input$bins)
 })
}
```

You will also need to add `library(ggplot2)` at the top of the file, just after `library(shiny)`.

🛑 Click the `Run App` button on the RStudio window. (Fix any errors)

✅ Click `Publish` to re-upload your app to the shinyapps.io server.

㊗️ You've just published your first modifed app

---
# Make the plot interactive

Change from a static ggplot plot, to an interactive plotly plot, by

1.Changing the server function to look like this. Note `renderPlotly`

``` r
server <- function(input, output) {

output$distPlot <- renderPlotly({
 p <- ggplot(faithful, aes(x=waiting)) +
 geom_histogram(bins = input$bins)
 print(ggplotly(p))
 })
}
```

---

2.Changing the `ui` function to render plotly output

``` r
mainPanel(
  plotlyOutput("distPlot")
)
```

3.Adding `library(plotly)` to the top of the file.

🛑 Click the `Run App` button on the RStudio window. (Fix any errors)

---
# Change the UI

Convert the slide into a numeric input, by changing the `ui` function to be:

``` r
sidebarLayout(
  sidebarPanel(
    numericInput("bins", "nbins", 30)
  ),
```

(The `numericInput` replaces the `sliderInput` code)

🛑 Click the `Run App` button on the RStudio window. (Fix any errors)

✅ Click `Publish` to re-upload your app to the shinyapps.io server.

㊗️ You've just published your second modifed app

---
# 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> 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>.