เริ่มต้นใช้งานเริ่มต้นใช้งานได้ฟรี

เพิ่ม layout

อย่างที่เคยเห็นในบทก่อนหน้า การใช้ layout ใน Shiny app มีความสำคัญมาก เพราะช่วยจัดระเบียบหน้าตาของแอปและทำให้ใช้งานได้ง่ายขึ้น

ตอนนี้แอปมีองค์ประกอบไม่มากนัก (ชื่อหนึ่งรายการ, input สองรายการ, และ output ของ word cloud หนึ่งรายการ) จึงยังพอจัดการได้โดยไม่มี layout อย่างไรก็ตาม แอปจะมีองค์ประกอบเพิ่มขึ้นในแบบฝึกหัดถัดไป การมี sidebar layout ไว้ตั้งแต่ต้นจึงเป็นประโยชน์มาก เพราะการวาง UI element ใหม่ลงใน layout ที่มีอยู่แล้วทำได้ง่ายกว่าการมาจัดโครงสร้างแอปที่ยุ่งเหยิงภายหลัง

ตามแนวทางที่นิยมใช้กับ Shiny app และแอปพลิเคชันเชิงโต้ตอบทั่วไป input จะอยู่ใน sidebar ด้านข้างที่มีขนาดเล็กกว่า ส่วน output หลัก (word cloud) จะอยู่ใน main panel ที่มีขนาดใหญ่กว่า

แบบฝึกหัดนี้เป็นส่วนหนึ่งของหลักสูตร

กรณีศึกษา: การสร้างเว็บแอปพลิเคชันด้วย Shiny ใน R

ดูคอร์ส

คำแนะนำการฝึกหัด

ขั้นตอนต่อไปคือการเพิ่ม sidebar layout ให้กับ Shiny app ที่มีอยู่ โดยไม่ต้องเพิ่ม UI element ใหม่ใดๆ นอกจากโครงสร้างของ layout โดยเฉพาะ:

  • เพิ่ม sidebar layout เข้าไปใน UI
  • ภายใน sidebar layout ให้กำหนด sidebar panel สำหรับรองรับ input ทั้งสอง
  • ภายใน sidebar layout เดียวกัน ให้กำหนด main panel ที่มี output ของ word cloud (บรรทัดที่ 12)

แบบฝึกหัดเชิงโต้ตอบแบบลงมือทำ

ลองทำแบบฝึกหัดนี้โดยเติมโค้ดตัวอย่างนี้ให้สมบูรณ์

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)
แก้ไขและรันโค้ด