1. shiny 101
2. Building a shiny app
3. The user interface (UI)
4. The server
5. Take-aways

Data on products sold by BC Liquor Store (source: OpenDataBC).

## Rows: 6,132
## Columns: 7
## $ Type            <chr> "WINE", "WINE", "WINE", "WINE", "WINE", "WINE", "WINE"~
## $ Subtype         <chr> "TABLE WINE RED", "TABLE WINE WHITE", "TABLE WINE RED"~
## $ Country         <chr> "CANADA", "CANADA", "CANADA", "CANADA", "UNITED STATES~
## $ Name            <chr> "COPPER MOON - MALBEC", "DOMAINE D'OR - DRY", "SOMMET ~
## $ Alcohol_Content <dbl> 14.0, 11.5, 12.0, 11.0, 13.5, 11.0, 12.5, 12.0, 11.5, ~
## $ Price           <dbl> 30.99, 32.99, 29.99, 33.99, 36.99, 34.99, 119.00, 32.9~
## $ Sweetness       <int> 0, 0, 0, 1, 0, 0, 0, 0, 0, NA, 0, NA, NA, 0, 0, 2, 0, ~

We’re going to create a shiny app to visualize these data interactively.

Let’s start with the empty shiny structure:

library(shiny)
ui <- fluidPage()
server <- function(input, output) {}
shinyApp(ui = ui, server = server)

ui <- fluidPage(
  titlePanel("BC Liquor Store prices")
)

The shiny function titlePanel()

• adds a visible big title-like text to the top of the page;
• sets the “official” title of the web page (i.e., displayed at the name of the tab in the browser).

To render text in our app, we can just add character/string objects inside fluidPage():

ui <- fluidPage(
  titlePanel("BC Liquor Store prices"),
  "BC Liquor Store", 
  "prices"
)

For formatted text, shiny has many functions that are wrappers around HTML tags. For example:

• h1(): top-level header;
• h2(): secondary header;
• strong(): bold text;
• em(): italicized text;
• br(): line break;
• img(): image;
• a(): hyperlink, etc.

Let’s replace the UI part of our code with the following:

ui <- fluidPage(
  titlePanel("BC Liquor Store prices"),
  h2("BC"),
  "Liquor",
  br(),
  em("Store"),
  strong("prices")
)

Inputs allow users to interact with a shiny app.

We’ve seen two types already:

• selectInput() creates a dropdown menu (e.g., number of bins in the template app);
• sliderInput() creates a numeric scale (e.g., bandwidth adjustment in the template app).

Can you guess what kind of element these input functions will create?

• textInput();
• dateInput();
• checkboxInput().

The resulting UI code looks like:

ui <- fluidPage(
  titlePanel("BC Liquor Store prices"),
  sidebarLayout(
    sidebarPanel(
      sliderInput("priceInput", "Price", 
                  min = 0, max = 100, value = c(25, 40), pre = "$")
      ),
    mainPanel("[outputs]")
  )
)

The full UI code is now:

ui <- fluidPage(
  titlePanel("BC Liquor Store prices"),
  sidebarLayout(
    sidebarPanel(
      sliderInput("priceInput", "Price", 0, 100, c(25, 40), pre = "$"),
      radioButtons("typeInput", "Product type",
                  choices = c("BEER", "REFRESHMENT", "SPIRITS", "WINE"),
                  selected = "WINE"),
      selectInput("countryInput", "Country",
                  choices = c("CANADA", "FRANCE", "ITALY"))
    ),
    mainPanel("[outputs]")
  )
)

The placeholder doesn’t show anything, because we haven’t created any figure yet on the server side.

But first, let’s add another output element:

mainPanel(
  plotOutput("coolplot"),
  br(),
  br(),
  tableOutput("our_table")
)

ui <- fluidPage(
  titlePanel("BC Liquor Store prices"),
  sidebarLayout(
    sidebarPanel(
      sliderInput("priceInput", "Price", 0, 100, c(25, 40), pre = "$"),
      radioButtons("typeInput", "Product type",
                  choices = c("BEER", "REFRESHMENT", "SPIRITS", "WINE"),
                  selected = "WINE"),
      selectInput("countryInput", "Country",
                  choices = c("CANADA", "FRANCE", "ITALY"))
    ),
    mainPanel(
      plotOutput("coolplot"),
      br(), 
      br(),
      tableOutput("our_table")
    )
  )
)

To incorporate interactivity, we’re going to filter the data based on the values of priceInput, typeInput, and countryInput:

server <- function(input, output) {
  output$coolplot <- renderPlot({
  bcl %>%
    filter(Price >= input$priceInput[1],
           Price <= input$priceInput[2],
           Type == input$typeInput,
           Country == input$countryInput
    ) %>% 
    ggplot(aes(Alcohol_Content)) +
      geom_histogram() +
      ggtitle("Histogram of alcohol content (interactive)")
})
}

To complete our app we need to build some output for the table placeholder, and add it to the server:

output$our_table <- renderTable({
  bcl %>%
    filter(Price >= input$priceInput[1],
           Price <= input$priceInput[2],
           Type == input$typeInput,
           Country == input$countryInput
    ) %>% 
    select(c("Name", "Price", "Type", "Country", "Alcohol_Content"))
})

In our server, we implicitly use reactivity when we filter the data for our outputs:

bcl %>%
  filter(Price >= input$priceInput[1],
         Price <= input$priceInput[2],
         Type == input$typeInput,
         Country == input$countryInput
  )

Whenever one of the inputs changes, our outputs change with it. But, this part of code is duplicated, because we didn’t use a reactive variable.

server <- function(input, output) {
  filtered <- reactive({
    bcl %>%
      filter(Price >= input$priceInput[1],
             Price <= input$priceInput[2],
             Type == input$typeInput,
             Country == input$countryInput
      )
  })
  output$coolplot <- renderPlot({
    ggplot(filtered(), aes(Alcohol_Content)) +
      geom_histogram() +
      ggtitle("Histogram of alcohol content")
  })
  output$our_table <- renderTable({
    filtered() %>% 
      select(c("Name", "Price", "Type", "Country", "Alcohol_Content"))
  })
}

Make your app more advanced:

• Change input element options from the server side with update...() functions;
• Use more complex layouts, such as tabs or dashboards;
• Modularize your app;
• Make the output elements ‘clickable’ with plotly and datatable.

In general:

• Keep It Simple, Stupid;
• Don’t rush into coding when you should be thinking;
• Use a design/UI-first approach;
• If you copy something just ONCE, make it a function;
• Avoid unnecessary complexity and ‘feature creep’.

Before building a shiny app, think about:

• Who are the end users of your app? Are they tech-literate?
• In what context will the app be used? On what machines (e.g., because of screen size)?

Build the front-end and the back-end separately.

Front-end:

• Work on the general appearance first, anything that does not rely on computation (e.g., tabs, inputs, outputs);
• Use mock data and/or text (build an ‘ipsum-app’);
• Make the app self-evident; the main usage of the app should not require reading any manual.

Back-end:

• Use sensible non-reactive defaults while developing (e.g., data <- mtcars instead of data <- reactive(...).);
• Think about what could to be ‘hard coded’ in the final app too, because of the reactivity vs. speed trade-off;
• Extract the complex (but non-reactive) processing functions and put them in separate files;
• Add user feedback to make server-side requirements explicit (e.g., input validation, pop-up messages, loading icons).

Deploy your app on shinyapps.io:

• You’ll have a link to use/share the app online;
• With a free account, your app will be public;
• If your app is too popular, you will need to pay (for an upgrade that is, not automatically);
• Advanced: You can tweak your app to cache certain outputs, or have several users in one session (like Google Drive documents);

If you want your Shiny app to last, you should make it robust:

• Run the app in the viewer panel, a separate window, and your browser;
• Monkey test it (i.e., click EVERYTHING);
• Provide the wrong inputs (e.g., a corrupt data file, a file with the ‘wrong’ extension, an ‘impossible’ numeric input, etc.);
• Advanced: Use the golem framework for production-grade shiny apps (but decide up-front!).

Check out these amazing resources:

• RStudio’s introduction to shiny webinar;
• Hadley Wickham’s book Mastering Shiny;
• The official cheatsheet;
• The more advanced Engineering Shiny;
• This webinar on Modularizing Shiny.

And look for inspiration here:

• The Shiny Gallery;
• The annual shiny contest;
• For example, this app for creating R package hex stickers.

• shiny allows you to build interactive (web) apps from R;
• shiny apps consist of two parts, the user interface (UI) and the server:
  • In the UI, you design what is shown to the user,
  • In the server, you do all the modeling and building of the outputs,
  • You link the UI and the server to make the app interactive,
  • To optimize these interactions, you can use reactive expressions;
• This is only the tip of the iceberg, there are many more things you can do with shiny;
• Good luck with your assignment!