My First Shiny App
As a data scientist I did fall in love with the Shiny R package. I believe it’s one of those packages that every data scientist must learn or must add to their bucket list as a must learn.
Deploying my project results with the help of Shiny has become part of my daily business. Shiny is a great way of letting users interact with their own data and the data science products that you build.
Shiny is an R package that makes it easy to build interactive web apps straight from R. You can host standalone apps on a webpage or embed them in R Markdown documents or build dashboards. You can also extend your Shiny apps with CSS themes, htmlwidgets, and JavaScript actions.
I will write a series of documents on Shiny apps but on this one we’ll look at how to build a Shiny app right from scratch using different techniques. As the saying goes “there is more than one way to skin a cat” that applies even in R, and for this particular document that I will call PART1, I will be demonstrating how to build our first Shiny app using different approach.
Note: I assume the reader of this document has basic knowledge of R language.
The objective
In this particular case we’re trying to build an app where one can input a text using the input text function and the text will be displayed to the UI (User Interface). We’ll achieve the same output using different techniques. The image below shows how this would look in practice, you shouldn’t be worried about the dark theme in which it appears when you run your code that will be covered in the upcoming series.
The Shiny app is made up of two components that are the UI and the Server. The UI is basically what the user sees and the Server is a set of functions that tells what the Server (where the app is hosted) has to do.
A simple example app
Here’s the complete code for a small example app using the first technique. We use a single script which is saved as app.R:
#Loading libraries
library(shiny)
#Building the UI
ui<- fluidPage(
sidebarLayout(
sidebarPanel(
textInput(inputId = “text_input”, label = “Enter your text here”, value = “”) #This is the text input element
),
mainPanel(uiOutput(“text_output”)) #This is the text output area
))
#Building the server
server<-function(input,output,session){
output$text_output<- renderUI({ #This will render/produce the text output
input$text_input #This is what will be rendered is the text in the input element
})
}
shinyApp(ui=ui,server = server)
This script contains both the ui and server functions and the two functions are then linked by a function shinyApp(ui = ui, server = server)
This code chunk below displays the same behaviour as the example shown above with one major difference that is the script is split into two.
We will look at the second technique; here we’ll use two scripts to run the same code.
Here’s the complete code for the app. We use two scripts which are saved as ui.R and server.R:
This is the Ui script
In this the ui.R script contains ui functions such as the input and output functions i.e. textInput that enables you input text and the uiOutput that creates a section where the output will be displayed.
#Loading library
library(shiny)
#Building the UI
ui<- fluidPage(
sidebarLayout(
sidebarPanel(
textInput(inputId = “text_input”, label = “Enter your text here”, value = “”) #This is the text input element
),
mainPanel(uiOutput(“text_output”)) #This is the text output area
))
This is the Server script
The Server.R script contains a set of functions that the server should follow and it also contains the render functions i.e. renderUI() to display the text
#Building the server
server<- function(input,output,session){
output$text_output<- renderUI({ #This will render/produce the text output
input$text_input #what will be rendered is the text in the input element
})
}
Both techniques first and second have their pros and cons but unfortunately they won’t be discussed here. With these two simple examples I have demonstrated two ways of letting you build your first Shiny app. In order to keep things simple I have used a basic textAreaInput for this demonstration, but both renderUI and uiOutput can hold so much more than just a simple input element.
So get creative and utilize these tools, maybe even in combination with other functions to make your apps even shinier!
