Shiny basics for interactive apps in R Programming - Step-by-Step Execution

Concept Flow - Shiny basics for interactive apps

User opens app

↓

UI loads: inputs + outputs

↓

User changes input

↓

Server detects input change

↓

Server updates output

↓

UI shows updated output

↓

User interacts again or closes app

The app starts by showing the user interface (UI). When the user changes inputs, the server reacts and updates outputs, which the UI then displays.

Execution Sample

R Programming

library(shiny)

ui <- fluidPage(
  sliderInput("num", "Choose a number", 1, 100, 50),
  textOutput("result")
)

server <- function(input, output) {
  output$result <- renderText({ paste("You chose", input$num) })
}

shinyApp(ui, server)

This app shows a slider and text that updates to show the chosen number.

Execution Table

Step	Action	Input Value	Server Reaction	Output Displayed
1	App starts, UI loads	num = 50 (default)	Render text: 'You chose 50'	'You chose 50' shown
2	User moves slider to 30	num = 30	Render text: 'You chose 30'	'You chose 30' shown
3	User moves slider to 75	num = 75	Render text: 'You chose 75'	'You chose 75' shown
4	User closes app	N/A	Stop server	App closes

💡 User closes app, stopping the server and ending interaction

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
input$num	50	30	75	N/A
output$result	'You chose 50'	'You chose 30'	'You chose 75'	N/A

Key Moments - 2 Insights

Why does the output text update immediately when I move the slider?

Because Shiny's server automatically detects changes in input$num and re-runs renderText to update output$result, as shown in steps 2 and 3 in the execution_table.

What happens if I don't define output$result in the server?

No output will appear for 'result' in the UI because Shiny needs the server to tell it what to display, as seen in step 1 where output$result is rendered.

Visual Quiz - 3 Questions

Look at the execution_table, what is output$result after the user moves the slider to 30?

A 'You chose 50'

B 'You chose 75'

C 'You chose 30'

D No output

💡 Hint

Check the row for Step 2 in the execution_table where input$num is 30.

At which step does the server react to input changes and update the output?

A Step 1

B Steps 2 and 3

C Step 4

D No steps

💡 Hint

Look at the 'Server Reaction' column in the execution_table for steps where input$num changes.

If the slider input default was changed to 10, what would output$result show at app start?

A 'You chose 10'

B 'You chose 50'

C 'You chose 1'

D No output

💡 Hint

Refer to variable_tracker and execution_table Step 1 where output$result matches input$num default.

Concept Snapshot

Shiny apps have two parts: UI and server.
UI shows inputs and outputs.
Server reacts to input changes and updates outputs.
Use render functions to create reactive outputs.
App updates instantly when inputs change.

Full Transcript

This visual execution shows how a Shiny app works step-by-step. The app starts by loading the UI with a slider input and a text output. The default slider value is 50, so the server renders the text 'You chose 50' and the UI displays it. When the user moves the slider to 30, the server detects this input change and re-runs the renderText function to update the output to 'You chose 30'. The UI then shows this updated text. The same happens when the slider moves to 75. Finally, when the user closes the app, the server stops and the app ends. Variables input$num and output$result change as the user interacts, showing how Shiny reacts instantly to input changes to update outputs.

Practice

1. In a Shiny app, what is the main role of the ui part?

easy

A. To perform calculations and data processing

B. To define what the user sees and interacts with

C. To store data permanently

D. To connect to external databases

Solution

1. Step 1: Understand the purpose of ui in Shiny

   The ui defines the layout and elements the user interacts with, like buttons and plots.

2. Step 2: Differentiate from server role

   The server handles logic and calculations, not the ui.

3. Final Answer:

   To define what the user sees and interacts with -> Option B

4. Quick Check:

   ui = user interface [OK]

Hint: Remember UI means User Interface, what users see [OK]

Common Mistakes:

• Confusing ui with server
• Thinking ui does data processing
• Assuming ui stores data

2. Which of the following is the correct way to create a numeric input in Shiny's UI?

easy

A. numericInput(inputId = "num", label = "Number", value = 0)

B. numericInput("Number", inputId = "num", value = 0)

C. numericInput(0, "Number", 0)

D. numericInput(label = "Number", value = 0)

Solution

1. Step 1: Recall numericInput syntax

   The correct order is numericInput(inputId, label, value).

2. Step 2: Check each option

   numericInput(inputId = "num", label = "Number", value = 0) matches the correct syntax exactly; others have wrong argument order or missing arguments.

3. Final Answer:

   numericInput(inputId = "num", label = "Number", value = 0) -> Option A

4. Quick Check:

   Correct argument order = numericInput(inputId = "num", label = "Number", value = 0) [OK]

Hint: Remember inputId first, then label, then value [OK]

Common Mistakes:

• Mixing argument order
• Omitting inputId
• Using unnamed arguments incorrectly

3. What will be the output shown in the Shiny app if the server code is:

server <- function(input, output) {
  output$text <- renderText({
    paste("Hello", input$name)
  })
}

and the UI has a textInput with inputId = "name" where the user types "Alice"?

medium

A. Error: object 'name' not found

B. input$name

C. Hello input$name

D. Hello Alice

Solution

1. Step 1: Understand renderText and input usage

   The renderText function returns text that updates automatically using input$name.

2. Step 2: Substitute input$name with user input

   User typed "Alice", so paste("Hello", input$name) becomes "Hello Alice".

3. Final Answer:

   Hello Alice -> Option D

4. Quick Check:

   Dynamic text output = "Hello Alice" [OK]

Hint: renderText shows text with input values replaced [OK]

Common Mistakes:

• Thinking input$name prints literally
• Confusing renderText with renderPrint
• Expecting error due to input usage

4. Identify the error in this Shiny server code snippet:

server <- function(input, output) {
  output$plot <- renderPlot({
    plot(data)
  })
}

Assuming data is not defined anywhere else.

medium

A. Missing definition of 'data' causes an error

B. renderPlot should be renderPlotly

C. output$plot should be output$plotOutput

D. plot() cannot be used inside renderPlot

Solution

1. Step 1: Check for variable definitions

   The code uses data inside plot() but data is not defined anywhere.

2. Step 2: Understand consequences of missing data

   This will cause an error because R cannot find the object data.

3. Final Answer:

   Missing definition of 'data' causes an error -> Option A

4. Quick Check:

   Undefined variable = error [OK]

Hint: Always define variables before using in render functions [OK]

Common Mistakes:

• Assuming plot() is invalid in renderPlot
• Confusing output variable names
• Thinking renderPlotly is required

5. You want to create a Shiny app that shows a histogram of a numeric variable chosen by the user from a dropdown menu. Which approach correctly connects the input and output?

hard

A. Use sliderInput to select variable, then plot histogram of entire data

B. Use numericInput for variable choice, then plot fixed variable in server

C. Use selectInput in UI for variable choice, then in server use renderPlot to plot histogram of data[[input$var]]

D. Use textInput for variable name, then plot histogram of input$var directly

Solution

1. Step 1: Choose correct input control for variable selection

   selectInput lets user pick a variable name from choices.

2. Step 2: Use input to select data column in server

   Access the chosen variable as data[[input$var]] and plot histogram with renderPlot.

3. Final Answer:

   Use selectInput in UI for variable choice, then in server use renderPlot to plot histogram of data[[input$var]] -> Option C

4. Quick Check:

   Dropdown input + dynamic plot = Use selectInput in UI for variable choice, then in server use renderPlot to plot histogram of data[[input$var]] [OK]

Hint: Use selectInput for choices, access with data[[input$var]] [OK]

Common Mistakes:

• Using numericInput instead of selectInput
• Trying to plot input$var directly without data
• Using sliderInput for variable selection