In this section, we are going to build an app with a dataset. Before we start with the construction of the architecture of our app, we need some open data to work with. I'm going to use the computer dataset that can be found in the Ecdat package, so make sure to install it by running install.packages("Ecdat"). A documentation about its variables is found at https://vincentarelbundock.github.io/Rdatasets/doc/Ecdat/Computers.html.

Once it was installed, if you type class(Ecdat::Computers), you will see that it is a DataFrame. A lot of information is hidden inside this data, and our goal here is to present a couple of them in a Shiny application, publishing it in a web page. We are going to rearrange and group our dataset, so you'll need the dplyr package; make sure it is installed and run the following code:

library(dplyr)
dt <- Ecdat::Computers
dt <- dt %>% group_by(premium, ram, screen, hd)
dt <- dt %>% summarise(AveragePrice = round(mean(price), digits = 2), 
                       AverageSpeed = round(mean(speed), digits = 0))

The first two lines are dedicated to select the columns we'll use and to group them by premium, ram, screen and hd. The summarise function was called to condense the values of the average price and the average clock speed of the grouped variables. Now that we have our data, let's start our app, step by step. First, we will define the page structure:

library(shiny)
library(ggplot2)
library(dplyr)

#you must insert the codes to call the dataset here, just the ones we used above

#UI
ui <- fluidPage(
  titlePanel("Let's learn them all!", windowTitle = "Practicing"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      tabsetPanel(
        tabPanel("Plot", plotOutput(outputId = "plot")), 
        tabPanel("Going further!")
      ))))
#server function 
server <- function(input, output) {
  output$plot <- renderPlot({})
}
#calling shiny
shinyApp (ui = ui, server = server)

We started with the basic syntax of the Shiny app, that is, the ui object, the server function, and the Shiny app call. Inside the UI, we added a title with titlePanel(), divided the web page with sidebarLayout(), and kept the space for sidebarPanel(). Inside mainPanel, we created a tab panel with tabsetPanel(), with two tabs, using tabPanel() for each one. Note that the packages we'll use were written, and the place to set the code to call the dataset was defined, so copy and paste the codes for the dataset if you need. Now let's build the UI, adding the input, output, and a few HTML elements:

#the UI object

ui <- fluidPage(
  titlePanel("Let's learn them all!", windowTitle = "Practicing"),
  sidebarLayout(
    sidebarPanel(
      selectInput(inputId = "x_var",
                  label = "Choose the variable X:",
                  choices = c("Average Speed" = "AverageSpeed", "HD" =
                    "hd")),
      selectInput(inputId = "y_var",
                  label = "Choose the variable Y:",
                  choices = c("Avarage Price" = "AveragePrice",
                    "Average Speed" = "AverageSpeed")),
      radioButtons(inputId = "premium",
                   label = "Was the manufacturer a "premium" firm:",
                   choices = c("Yes" = "yes", "No" = "no"))
    ),
    mainPanel(
      tags$p("Hey there! I've learned a lot about shiny package,
        you should learn too, do it ",
             tags$a(href = "https://shiny.rstudio.com/", "here!")),
      tabsetPanel(
        tabPanel("Plot!", plotOutput(outputId = "plot")), 
        tabPanel("Going further!", tags$h2("Tips"),
                 tags$p("There are many things to learn,
                  to go deep into shiny, check these ",
                       tags$a(href =
                         "https://shiny.rstudio.com/articles/",
                          "articles."))
                         ))))
)

Inside sidebarPanel(), we added three inputs: they will be necessary for the user to interact with our plot. Selected inputs were used by calling choice and combining the display option with its value in the DataFrame. In mainPanel() and in tabPanel(), we used the tags functions to create some HTML codes. Use names(tags) to see all possible ways to set HTML codes; the syntax to call them is tags$name, and the elements inside them you'll need to explore by yourself. Each tag function has its own syntax, so spend some time there. In our case, we used tags$h2 to add a title, tags$p to add a paragraph, and tags$a to add a link. Let's build our server function:

#the server function
server <- function(input, output) {
  output$plot <- renderPlot({
    data <- dt[dt$premium == input$premium,]
    ggplot(data = data, aes(x = get(input$x_var), y = get(input$y_var))) +
      geom_point(alpha = .5, stroke = 1.5) +
      geom_smooth(method = 'lm', se = F, show.legend = F) +
      xlab(input$x_var) +
      ylab(input$y_var) +
      theme_minimal()
  })
}

The server function was built with the unique output we've used. The dataset is separated by premium with input$premium. The ggplot2 package is used to build the plot, and the get function is used with input$x_var and input$y_var, so the string sent by the input is read by the ggplot package as an object. Write the last line code by calling the Shiny app, using the following:

#the shiny app
shinyApp (ui = ui, server = server)

If you did everything right, you created the application shown in the following figure:

Don't forget to go further by yourself; there is a lot of stuff about Shiny to learn. In the next section, a couple of tips are given if you want to see more about the shiny package.