More Shiny

background-image: url("img/logo_padded.001.jpeg")
background-position: left
background-size: 60%
class: middle, center,

.pull-right[

<br>

## .base_color[More `shiny`]

## .base_color[Applications/Dashboards]
 
<br>

#### .navy[Kelly McConville]

#### .navy[ Stat 108 | Week 7 | Spring 2023]

]

---

## Announcements

* No sections this week!
* Let's discuss Project 1.
* No lecture quiz this week. :)

************************

## Week's Goals

.pull-left[

**Mon Lecture**

* Interactive web applications with `shiny`.

]

.pull-right[

**Wed Lecture**

* More `shiny`.
* Dashboarding with `flexdashboard`.

]

---

### Recap

* **Inputs**: What user manipulates
    + Text
    + Sliders
    + Dropdown menus
    + Action buttons

* **Output**: What changes based on user's selections
    + Graphs
    + Maps
    + Tables
    + Text

* Use **reactive programming**
    + Update outputs when inputs change

---

### `shiny` Recap -- Main Components

* **UI**: User interface
    + Defines how your app **looks**

* **Server function**
    + Defines how your app **works**

```r
library(shiny)

# User interface
ui <- fluidPage()

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

# Creates app
shinyApp(ui = ui, server = server)
```

---

### Building Outputs

Server-side:

* Save the object with `output$___`.

* Use a `render___({})` function to create the object.  
    + Look at cheatsheet for examples.
    
* Access inputs with `input$___`.

UI-side:

* Place output with `___Output()`.

#### Troubleshooting common issues:

* Must comma separate all the elements in the `ui`.
* But don't add a comma after the last element in the `ui`.

---

## More Reactivity: `observe()`

* Let's look at another app in the shared folder.
    + Within the ShinyApps folder, it is in "app_biketown".

* Features `leaflet` functions and `observe()`.

* Need to use `leafletProxy()` so that the entire map isn't redrawn with each update to the inputs.

---

### Adding Source Code to the Dashboard

Create a `DESCRIPTION` text file with this text:

Title: Stat 108 Names

Author: Kelly McConville

AuthorUrl: https://kelly-mcconville.shinyapps.io/firstapp/

DisplayMode: Showcase

Type: Shiny

---

### Uploading to ShinyApps.io

* Go to [https://www.shinyapps.io/](https://www.shinyapps.io/)
* Create an account or sign in with your GitHub username.
* Install `rsconnect`.

```r
install.packages('rsconnect')
```

```r
library(rsconnect)
```

---

### Uploading to ShinyApps.io

* Configure `rsconnect`.

```r
setAccountInfo(name="<ACCOUNT>", token="<TOKEN>", secret="<SECRET>")
```

* Deploy app. (This will take a couple minutes.)

```r
# Include correct file path
deployApp("ShinyApps/biketown")
```

---

### [`flexdashboard`](https://pkgs.rstudio.com/flexdashboard/articles/flexdashboard.html)

* Will you to create dashboards that harness the power of `shiny` but also the simplicity of `R Markdown`.

* Can also been used to create stand-alone HTML files with some interactivity.

* I [converted the Shiny App we created last time into a `flexdashboard`](https://kelly-mcconville.shinyapps.io/firstflex).
    + Let's focus on some of the changes.

---

### So Much More...

* There are lots of potential [widgets](https://shiny.rstudio.com/gallery/widget-gallery.html) to consider including for inputs.

* My apps were **ugly**.  Start with ugly apps but then make them pretty!
    + Pick a better theme: [Flexdashboard themes](https://pkgs.rstudio.com/flexdashboard/articles/theme.html) and [shiny themes](https://rstudio.github.io/shinythemes/).
    + Use appropriate labels and titles.
    + Try out several different layouts: [Flexdashboard layouts](https://pkgs.rstudio.com/flexdashboard/articles/using.html#layout) and [shiny layouts](https://shiny.rstudio.com/articles/layout-guide.html).
    + Consider adding [HTML](https://shiny.rstudio.com/articles/tag-glossary.html) to further customize the appearance of the UI.

With that in mind...

---

### Project 1

#### Big idea:

* Create an interactive web application/dashboard using `shiny` or `flexdashboard` or `shinydashboard`.

* Make sure to satisfy the requirements (given in the handout).

* But then stretch yourself to add new features and a "non-default" look to your app.
    + Create something you'd want to share in a data science portfolio.

* Will have opportunities for feedback from your peers and from the teaching team as you are iterating toward the final product!

* Also as part of the project, each group member will write a "data scientist's statement" and reflect on the goals and design choices of the dashboard.

---

class: middle, center

## Practice

### Grab the appPractice.Rmd from the shared folder (stat108/live_coding/ShinyApps) on the RStudio Server