(Para profundizar contenidos de este curso, o aprender otros aspectos no incluidos, sugerimos tener en cuenta este tutorial de Shiny).
Shiny es un paquete de R que facilita la creación de aplicaciones web interactivas (aplicaciones) directamente desde R. Shiny viene con una variedad de widgets para la construcción rapida de interfaces de usuario web, nosotros escribimos el codigo en R y shiny hará el trabajo pesado de generar el HTML, css, javascript, jquery, etc.
Si aún no has instalado el paquete Shiny, abre una sesión R, conéctate a Internet y ejecuta:
install.packages("shiny")
library("shiny")Las aplicaciones de Shiny deben tener tres componentes:
UI: un objeto de interfaz (user interface) de usuario. Esta componente: gestiona los inputs y organiza la visualización de los datos. “Dialoga” con el server (el 2º componente), que es quien procesa los datos, quien gestiona la información.
server: una función de servidor (server function). Esta componente tiene las estructuras de datos y la algoritmia de la aplicación.
app: una llamada a la función shinyApp. Es el compomente en donde se define la ubicación del UI y del server. Es el componente que se ejecuta (“Run”) para testear/utilizar la app.
Es decir: La interfaz de usuario (ui) controla el diseño y la apariencia de su aplicación. La función server contiene las instrucciones que el ordenador necesita para construir la aplicación. Finalmente, la función shinyApp crea objetos de aplicación Shiny a partir de un par de UI/server explícito.
Inicialmente, para aprender, vamos a crear un script “app.R”, que contendrá los tres componentes. Luego, las aplicaciones de Shiny más complejas tienen, al menos, un script para cada componente.
Primero, haremos nuestra primera Shiny app, y luego explicaremos cómo funciona:
1º Crea un nuevo script.
2º Pega el siguiente código:
library(shiny)
# Define UI for app that draws a histogram ----
ui <- fluidPage(
# App title ----
titlePanel("Hello Shiny!"),
# Sidebar layout with input and output definitions ----
sidebarLayout(
# Sidebar panel for inputs ----
sidebarPanel(
# Input: Slider for the number of bins ----
sliderInput(inputId = "bins",
label = "Number of bins:",
min = 1,
max = 50,
value = 30)
),
# Main panel for displaying outputs ----
mainPanel(
# Output: Histogram ----
plotOutput(outputId = "distPlot")
)
)
)
# Define server logic required to draw a histogram ----
server <- function(input, output) {
# Histogram of the Old Faithful Geyser Data ----
# with requested number of bins
# This expression that generates a histogram is wrapped in a call
# to renderPlot to indicate that:
#
# 1. It is "reactive" and therefore should be automatically
# re-executed when inputs (input$bins) change
# 2. Its output type is a plot
output$distPlot <- renderPlot({
x <- faithful$waiting
bins <- seq(min(x), max(x), length.out = input$bins + 1)
hist(x, breaks = bins, col = "#75AADB", border = "white",
xlab = "Waiting time to next eruption (in mins)",
main = "Histogram of waiting times")
})
}
# Create Shiny app ----
shinyApp(ui = ui, server = server)3º Selecciona todo el texto y ejecútalo. Deberías ver la aplicación funcionando similar a esto:
4º Prueba la aplicación modificando el sliderInput del Number of bins:. Verás que se modifica el histograma.
5º Si quieres, también puedes hacer click en “Open in Browser” para ver la aplicación como una ventana más de tu browser.
Ahora identifiquemos los tres componentes en el ejemplo anterior:
UI (primer componente) está implementado entre las filas 4 y la 32.server (segundo componente) está implementado entre las filas 35 y 56.Es una buena práctica, que cada componente esté en archivos diferentes:
Más adelante, vemos un ejemplo sobre esta buena práctica.
Opción 1: Ejecutando el script app.r presionando el boton “Run”. (Es la opción que utilizaste para ejecutar la app Hello Shiny)
Opción 2: También se puede ejecutar el comando por consola:
runApp("my_app")La UI en Shiny utiliza código HTML. Vamos a usar la función fluidPage para crear una pantalla que se ajusta automáticamente a las dimensiones de la ventana del navegador. Para diseñar la interfaz de usuario de su aplicación, hay que agregar elementos dentro de la función fluidPage.
La función fluidPage contiene layouts y, a su vez, los layouts contienen paneles.
Los layouts se utilizan para organizar los paneles y elementos dentro de un layout existente. A continuación, verás algunos layouts y cómo es su estructura interna:
Ejemplo:
library(shiny)
fluidPage(
titlePanel("Hello Shiny!"),
sidebarLayout(
sidebarPanel(HTML('<p>
<label>A numeric input:</label><br />
<input type="number" name="n" value="7" min="1" max="30" />
</p>')),
mainPanel(
p(strong("bold font "), em("italic font")),
p(code("code block")),
a(href="http://www.google.com", "link to Google"))
)
)En el código anterior, puedes identificar:
sidebarLayout (línea 4) con sus dos partes:
sidebarPanel (línea 5).mainPanel (línea 9).Como se puede observar en el ejemplo, la UI permite intercalar código HTML.
Los widgets son controles con los que el usuario va a interactuar, es decir que mediante estos controles el usuario va a comunicarse con nuestra aplicacion, filtrar, seleccionar, ingresar un dato por parámetro.
| function | widget |
|---|---|
| actionButton | Botón para acciones |
| checkboxGroupInput | Un grupo de checkboxes |
| checkboxInput | Un simple checkbox |
| dateInput | Seleccion de una fecha |
| dateRangeInput | Seleccion de un par de fechas |
| fileInput | Subir un archivo |
| helpText | Texto de ayuda para otro control |
| numericInput | Campo para insertar un dato numérico |
| radioButtons | Un grupo de radio buttons |
| selectInput | Clasica caja con opciones para seleccionar |
| sliderInput | Control para seleccionar un dato numérico |
| submitButton | Un boton de submit |
| textInput | Campo para ingresar un dato de texto |
Output de algunos widgets:
Probemos algunos de ellos usando, como base, el layout del ejemplo anterior:
library(shiny)##
## Attaching package: 'shiny'## The following objects are masked from 'package:DT':
##
## dataTableOutput, renderDataTable## The following object is masked from 'package:geosphere':
##
## spanfluidPage(
titlePanel("Mi primera Shiny App"),
sidebarLayout(
sidebarPanel(
numericInput("numInput", "Ingresa un número:", value = 7, min = 1, max = 30),
actionButton("MiBoton","Boton"),
checkboxInput("MiCheBox", "CheckBox", FALSE)
),
mainPanel(
p(strong("bold font "), em("italic font")),
p(code("code block")),
a(href="http://rusersgroup.com/", "R User Group"))
)
)