ComenzarEmpieza gratis

Añade un diseño

Como has visto en capítulos anteriores, usar un diseño en una app de Shiny es clave para organizar la interfaz y facilitar su uso.

La app ahora mismo tiene muy pocos objetos (un título, dos inputs, una salida de nube de palabras), así que todavía se puede manejar sin un diseño. Sin embargo, la app va a crecer en los próximos ejercicios y contar con una barra lateral será beneficioso. Es buena idea añadir un diseño a tu app cuanto antes, porque colocar nuevos elementos de UI de Shiny en un diseño existente es más fácil que reorganizar más tarde una app grande y sin estructura.

Como se suele hacer en las apps de Shiny y otras aplicaciones interactivas, los inputs irán en la barra lateral, más pequeña, mientras que la salida principal (la nube de palabras) estará en el panel principal, más grande.

Este ejercicio forma parte del curso

Casos prácticos: crea aplicaciones web con Shiny en R

Ver curso

Instrucciones del ejercicio

Tu siguiente tarea es añadir un diseño con barra lateral a la app de Shiny actual. No se deben añadir nuevos elementos de UI más allá de la estructura del diseño. En concreto:

  • Añade un diseño con barra lateral a la UI.
  • Dentro del diseño con barra lateral, define un panel lateral para alojar los dos inputs.
  • También dentro del diseño con barra lateral, define un panel principal que contenga la salida de la nube de palabras (línea 12).

Ejercicio interactivo práctico

Prueba este ejercicio y completa el código de muestra.

ui <- fluidPage(
  h1("Word Cloud"),
  # Add a sidebar layout to the UI
  ___(
    # Define a sidebar panel around the inputs
    ___(
      numericInput("num", "Maximum number of words",
                   value = 100, min = 5),
      colourInput("col", "Background color", value = "white")
    ),
    # Define a main panel around the output
    ___(
      wordcloud2Output("cloud")
    )
  )
)

server <- function(input, output) {
  output$cloud <- renderWordcloud2({
    create_wordcloud(artofwar,
                     num_words = input$num, background = input$col)
  })
}

shinyApp(ui = ui, server = server)
Editar y ejecutar código