เรียนรู้วิธีการสร้าง Shiny Interactive Web Apps บน R studio

หลายๆคนคงเคยทำการวิเคราะห์ข้อมูลแต่ไม่สามารถทำ User interface หรือ UI สวย ๆ ให้ได้ใช้และเผยแพร่ผ่านทางเว็บไซต์ได้ ในวันนี้ผมจะพามารู้จักกับแพคเกจบน R studio ที่จะช่วยให้เราสามารถทำทุกอย่างได้ตามที่กล่าวมาข้างต้น นั่นก็คือ Shiny นั่นเองครับ

Shiny คืออะไร?

Shiny คือ Web application framework สำหรับ Program R ซึ่งถือว่าเป็นการเปิดโลกของชาว R people เลยทีเดียว เพราะเราสามารถเขียนคำสั่งต่าง ๆ และแสดงผลลัพธ์ได้ในลักษณะของ interactive web application หรือ แดชบอร์ด ได้ใน Program R และสามารถสั่งรันได้ทั้งบนเซิฟเวอร์ของตัวเองเช่น Digital Ocean หรือบนเว็บไซต์ Shinyapps.io

เราจะได้เรียนรู้อะไรบ้างในบทความนี้

1. โครงสร้างของ Shiny web application
2. ตัวอย่าง Shiny web application
3. ขั้นตอนการเขียน interactive web application

โครงสร้างของ Shiny web application ประกอบด้วย 3 องค์ประกอบหลักได้แก่

1. User interface (ui)

• UI คือหน้าต่างที่คอยรับข้อมูลจากผู้ใช้งานและหน้าต่างแสดงผล

2. Server function (server)

• Server คือระบบที่ได้รับค่าจาก UI มาทำการคำนวนและส่งผลลัพธ์เพื่อไปแสดงผลบนเว็บไซต์

3. ShinyApp function (การรวมกันระหว่างองค์ประกอบที่ 1 และ 2)

การสร้าง Web application โดยใช้ Shiny นั้นมีตัวอย่างให้ทุกคนได้ศึกษาหรือลองใช้มากมายเลยโดยเข้าได้ผ่านเว็บไซต์ Shiny gallery นี้ได้เลยครับ

เรามาชมภาพตัวอย่าง Shiny web application กันดีกว่า

Interactive dashboard ด้านล่างเป็นการสร้าง web application ผ่าน Shiny โดยแสดงปริมาณผู้ติดเชื้อ COVID-19 ทั่วโลก ผู้สร้างคือ Dr. Edward Parker ซึ่งเปิดให้ผู้ใช้งานทั่วไปได้ใช้งานบน Shinyapps.io เพื่อน ๆ สามารถกดที่ Real time Covid-19 Tracker dashboard เพื่อเข้าไปใช้แดชบอร์ดนี้ได้เลยครับ

ตัวอย่างการเขียน interactive web application

เรามาถึงช่วงที่ทุกคนจะได้สนุกกันแล้วครับ นั่นคือการเขียนคำสั่งเพื่อสร้าง Interactive web application หรือ แดชบอร์ดของตัวเอง web application แรกที่ผมจะเริ่มทำจะเป็นการสร้างกราฟการแจกแจงความถี่หรือ ฮิสโตแกรมโดยกราฟจะเปลี่ยนเมื่อผู้ใช้งานเลือกจำนวน bins หรือแท่งกราฟตามที่ต้องการ ซึ่งเพื่อน ๆ สามารถเขียนโค้ดแล้วรันไปพร้อมกันได้เลยครับ ก่อนอื่นให้สร้างไฟล์ R script ที่เราจะเขียนคำสั่งหลังจากนั้นก็เริ่มกันได้เลย

ข้อมูลที่ผมใช้จะเป็นข้อมูลที่ติดมากับโปรแกรม R อยู่แล้วครับ นั่นคือชุดข้อมูล airquality หรือข้อมูลคุณภาพของอากาศ ก่อนอื่นเราต้องนำเข้าข้อมูลรวมถึงแพคเกจที่เราจำเป็นต้องใช้กันก่อนครับ

library(shiny) # Load R packages
data(airquality)    # Load data

ถ้าผู้ใช้งานใหม่ยังไม่เคยติดตั้งแพคเกจ ให้ใช้คำสั่ง install.package(“ชื่อแพคเกจ”) ก่อนการเรียก library นะครับ

จากโครงสร้างของ Shiny web application ที่กล่าวไปข้างต้นเราต้องเริ่มจากการสร้าง User interface

ui <- fluidPage(                                   # หัวข้อแดชบอร์ด
  titlePanel("Ozone level!"),                      # Sidebar layout ประกอบด้วยการสร้างกล่อง Input และ Output ---- 
  sidebarLayout(                                   # Sidebar panel for inputs ----
      sidebarPanel(                              # Input: Slider สำหรับเลือกจำนวนแท่งของกราฟ ----
            sliderInput(inputId = "bins",
                  label = "Number of bins:",
                  min = 1,
                  max = 50,
                  value = 30)                      # ค่าเริ่มต้นของจำนวน bins
          ),
    mainPanel(                                     # Main panel สำหรับแสดงผลหรือ output ----
      plotOutput(outputId = "distPlot")            # Output: Histogram ----
    )
  )
)

คำสั่งข้างต้นเป็นการกำหนดหน้าตาของ web application ที่เราจะสร้าง ซึ่งหลังเครื่องหมาย # จะเป็นคำอธิบายคำสั่งในบรรทัดนั้น ๆ ครับ โดย input จะมีหน้าตาออกมาเป็น slide bar เพื่อเลือกจำนวน bins ที่เราต้องการโดยมีค่าเริ่มต้นเป็น 30  ส่วน output จะมีหน้าตาเป็นกราฟฮิสโตแกรม โดยทั้งหมดนี้จะถูกเก็บไว้ในตัวแปรที่ชื่อว่า ui ครับ

ขั้นตอนต่อไปคือการสร้าง Server function เป็นการกำหนดว่าเราจะใช้ข้อมูลอะไร คำนวนอย่างไรให้ได้ output ออกมาเป็นฮิสโตแกรมที่เราต้องการ

server <- function(input, output) {
  output$distPlot <- renderPlot({
    x    <- airquality$Ozone                               #กำหนดคอลัมน์ Ozone ใน ข้อมูล airquality เพื่อนำมาพลอต
    x    <- na.omit(x)                                   #ลบข้อมูลที่เป็น na ออก
    bins <- seq(min(x), max(x), length.out = input$bins + 1)  #เก็บค่าที่นับไว้ในตัวแปร bins
    hist(x, breaks = bins, col = "#75AADB", border = "black", #สร้างกราฟจากข้อมูลและ bins ที่กำหนดไว้ด้านบนรวมถึงการกำหนดธีมและสีของกราฟ
         xlab = "Ozone level",                                #ชื่อแกน x
         main = "Histogram of Ozone level")                   #ชื่อหัวข้อกราฟ
  })
}

คำสั่งด้านบนเป็นการเขียนฟังก์ชันคำนวนจำนวน bins และการสร้างกราฟฮิสโตแกรมและเก็บคำสั่งไว้ในตัวแปรที่ชื่อว่า server ครับ

ใกล้จะเสร็จแล้ว ขั้นตอนสุดท้ายง่ายมากเลยครับคือการนำทั้งสองขั้นตอนแรกมารวมกันเพื่อสร้าง web application คำสั่งก็จะมีแค่การนำตัวแปรทั้งสองตัวมาระบุไว้ใน shinyApp นั่นเอง โดยใช้คำสั่งด้านล่าง

shinyApp(ui = ui, server = server) 

เมื่อเราสั่งรันทุกอย่างแล้วนั้นทุกคนก็จะได้แดชบอร์ดแรกที่สามารถเลื่อน slide bar แล้วกราฟแท่งด้านขวาก็จะปรับเปลี่ยนไปตามจำนวน bins ที่เราเลือกได้เลยครับ

ยินดีด้วยครับทุกคน เราได้ web application แรกกันแล้ว

ตัวอย่างการนำโมเดลขึ้น web application

แดชบอร์ดต่อไปจะเริ่มยากขึ้นโดยการประยุกต์นำโมเดลการทำนายมาใส่ไว้ในแดชบอร์ดด้วย เพื่อน ๆ บางคนน่าจะคุ้นชินกันดีกับข้อมูล iris หรือข้อมูลพันธ์ดอกไม้ไอริสที่จะมีลักษณะทางกายภาพของดอกไม้ในแต่ละ species นั้น ๆ โดยส่วนใหญ่ข้อมูลนี้จะเป็นตัวอย่างในการสร้างโมเดลพื้นฐานสำหรับผู้ที่เริ่มต้นทำโมเดลการทำนาย แต่ในสำหรับบทความนี้ผมจะเน้นไปในเรื่องการนำโมเดลที่ทำนายแล้วขึ้นเป็น Interactive web application หรือ แดชบอร์ด

ก่อนอื่นเราต้องติดตั้งและเรียกใช้แพคเกจที่ต้องการรวมถึงข้อมูล iris

library(RCurl)  #สำหรับนำเข้าข้อมูล csv ไฟล์
library(randomForest)   #สร้างโมเดล
library(caret)

นำเข้าข้อมูล iris dataset

iris <- read.csv(text = getURL("https://raw.githubusercontent.com/dataprofessor/data/master/iris.csv"))

ขั้นตอนการสร้างโมเดล

• แบ่งชุดข้อมูลเป็น 2 ส่วนคือ Train 80% และ Test 20%

TrainingIndex <- createDataPartition(iris$Species, p=0.8, list = FALSE)
TrainingSet <- iris[TrainingIndex,] # Training Set
TestingSet <- iris[-TrainingIndex,] # Test Set

• Export ทั้งสองชุดข้อมูลลงเครื่อง

write.csv(TrainingSet, "training.csv")
write.csv(TestingSet, "testing.csv")

• เรียกข้อมูล Train ไว้ในตัวแปรชื่อว่า TrainSet และนำหัวตารางออก

TrainSet <- read.csv("training.csv", header = TRUE,stringsAsFactors = T)
TrainSet <- TrainSet[,-1]

• สร้างโมเดล Random Forest จากข้อมูล TrainSet แล้วเก็บไว้ในตัวแปรชื่อว่า model

model <- randomForest(Species ~ ., data = TrainSet, ntree = 500, mtry = 4, importance = TRUE)

• บันทึกข้อมูลลงเครื่องเพื่อนำไปใช้ด้วยสกุลไฟล์ .rds

saveRDS(model, "model.rds")

เมื่อเราได้ไฟล์ข้อมูลที่ถูกแบ่งและไฟล์โมเดล เราจะเอาโมเดลมานี้สร้างแดชบอร์ดกัน โดยไฟล์เหล่านี้ควรจะที่โฟลเดอร์เดียวกันกับ R script ที่ใช้ในการสร้างแดชบอร์ด

เรามาเริ่มสร้างแดชบอร์ดด้วย 3 ขั้นตอนง่าย ๆ ตามตัวอย่างแรกกันเลยครับ

ในกรณีตัวอย่างนี้ผมได้แยกคำสั่งเป็นสองไฟล์โดยการบันทึกโมเดลลงเครื่องก่อนเพื่อสามารถนำไปประยุกต์ใช้กับ web application ได้หลายเว็บเพราะฉะนั้นเราจึงต้อง import ข้อมูลและโมเดลที่เราจะใช้ก่อนการสร้าง web application ทุกครั้ง

• เรียกใช้แพคเกจต่างๆ
• นำเข้าโมเดลที่บันทึกไว้เก็บไว้ในตัวแปรชื่อว่า model
• เรียกข้อมูล Train ไว้ในตัวแปรชื่อว่า TrainSet และนำหัวตารางออก
• เริ่มคำสั่งสร้าง User interface function หรือ UI

library(shiny)
library(data.table)
model <- readRDS("model.rds")
TrainSet <- read.csv("training.csv", header = TRUE, stringsAsFactors = T)
TrainSet <- TrainSet[,-1]
ui <- pageWithSidebar(
  headerPanel('Iris Predictor'),# กำหนดชื่อแดชบอร์ด
    # สร้างแถบ input ต่าง ๆ
  sidebarPanel(
    HTML("<h3>Input parameters</h3>"),
    sliderInput("Sepal.Length", label = "Sepal Length", value = 5.0,
                min = min(TrainSet$Sepal.Length),
                max = max(TrainSet$Sepal.Length)),
    sliderInput("Sepal.Width", label = "Sepal Width", value = 3.6,
                min = min(TrainSet$Sepal.Width),
                max = max(TrainSet$Sepal.Width)),
    sliderInput("Petal.Length", label = "Petal Length", value = 1.4,
                min = min(TrainSet$Petal.Length),
                max = max(TrainSet$Petal.Length)),
    sliderInput("Petal.Width", label = "Petal Width", value = 0.2,
                min = min(TrainSet$Petal.Width),
                max = max(TrainSet$Petal.Width)),
      actionButton("submitbutton", "Submit", class = "btn btn-primary")), # สร้างปุ่ม submit
    mainPanel(# สร้างแถบแสดงผล
    tags$label(h3('Status/Output')), # Status/Output Text Box
    verbatimTextOutput('contents'),
    tableOutput('tabledata'))) #ผลการทำนาย

เช่นเดิมจากคำสั่งด้านบนจะมีคำอธิบายในแต่ละคำสั่งหลังเครื่องหมาย # นะครับ

คำสั่งการสร้าง ui ด้านบนผมได้สร้างแถบเครื่องมือเป็น slide bar รับข้อมูลของผู้ใช้งานด้วยลักษณะของดอกไม้ที่ใช้ทำนายนั่นคือ Sepal.Length, Sepal.Width, Petal.Length, Petal.Width ส่วนแถบ output ก็จะแสดงตารางซึ่งคือผลของการทำนายนั่นเอง

ขั้นตอนต่อไปเราก็มาสร้าง Server function กันเลย

server<- function(input, output) {
  datasetInput <- reactive({   #กำหนด input data ที่จะถูกป้อนเข้ามาผ่านทาง slide bar
      df <- data.frame(
      Name = c("Sepal Length",
               "Sepal Width",
               "Petal Length",
               "Petal Width"),
      Value = as.character(c(input$Sepal.Length,
                             input$Sepal.Width,
                             input$Petal.Length,
                             input$Petal.Width)),
      stringsAsFactors = FALSE)
    Species <- 0
    df <- rbind(df, Species)
    input <- transpose(df)
    write.table(input,"input.csv", sep=",", quote = FALSE, row.names = FALSE, col.names = FALSE)
    test <- read.csv(paste("input", ".csv", sep=""), header = TRUE)
    Output <- data.frame(Prediction=predict(model,test), round(predict(model,test,type="prob"), 3))     #นำข้อมูลที่ถูกป้อนเข้าโมเดลทำนาย
    print(Output)
  })
  
# สร้างกล่องข้อความในกรณีที่รอการป้อนข้อมูลและคำนวนเรียบร้อยแล้ว
  output$contents <- renderPrint({
    if (input$submitbutton>0) { 
      isolate("Calculation complete.") 
    } else {
      return("Server is ready for calculation.")
    }
  })
  # สร้างตารางผลการทำนายผ่านเงื่อนไขการกดปุ่ม submit
  output$tabledata <- renderTable({
    if (input$submitbutton>0) { 
      isolate(datasetInput()) 
    } 
  })
}

ขั้นตอนสุดท้ายง่ายสุด ๆ เลยครับ คือการรวมทั้งสองขั้นตอนเข้าด้วยกัน

shinyApp(ui = ui, server = server)

แล้วเราก็จะได้ Interactive web application ทำนายพันธุ์ดอกไม้จาก iris dataset ตามรูปภาพด้านล่างเลย

สำหรับคนที่ไม่ชอบ slide bar ในการป้อนข้อมูลก็จะมีวิธีสร้างแถบ input ด้วยการกรอกตัวเลข ง่าย ๆ เลยเราก็แก้ไขคำสั่งในการสร้าง User interface หรือ ui จาก sliderInput เป็น numericInput เท่านั้นเองครับ

ui <- pageWithSidebar(
   headerPanel('Iris Predictor'),
   sidebarPanel(
   tags$label(h3('Input parameters')),
    numericInput("Sepal.Length", 
                 label = "Sepal Length", 
                 value = 5.1),
    numericInput("Sepal.Width", 
                 label = "Sepal Width", 
                 value = 3.6),
    numericInput("Petal.Length", 
                 label = "Petal Length", 
                 value = 1.4),
    numericInput("Petal.Width", 
                 label = "Petal Width", 
                 value = 0.2),
   actionButton("submitbutton", "Submit", 
                 class = "btn btn-primary")
  ), mainPanel(
    tags$label(h3('Status/Output')), # Status/Output Text Box
    verbatimTextOutput('contents'),
    tableOutput('tabledata') # Prediction results table
  ))

Web application เราก็จะออกมาเป็นการป้อนตัวเลขเข้าไปแทน slide bar แล้ว

ทั้งนี้เพื่อน ๆ สามารถนำแดชบอร์ดที่เขียนไว้สั่งรันบนเว็บไซต์ Shinyapps.io ได้โดยไปที่ลิงค์ shinyapps.io ลงทะเบียนสร้างบัญชีของตัวเองก่อนหลังจากนั้นเพื่อนๆก็จะสามารถ public แดชบอร์ดขึ้นบนว็บไซต์ได้แล้ว โดยผมจะมาบอกวิธีการให้เพื่อนๆได้ลองทำตามได้ในบทความต่อไปครับ

เป็นไงกันบ้างครับทุกคน หลาย ๆ คนที่ยังไม่คุ้นชินกับ Shiny อาจจะมึนงงกันนิดหน่อยสำหรับคนที่ไม่เคยใช้คำสั่งหรือโค้ดในการสร้างแดชบอร์ดแบบนี้เพราะในปัจจุบันก็มีเครื่องมือสำเร็จรูปในการสร้างแดชบอร์ดมากมาย

แต่สำหรับ Shiny นั้นประโยชน์ที่สำคัญเลยคือเขียนบน Program R และทุกอย่างฟรี ประหยัดงบในการที่จะต้องซื้อโปรแกรมสำเร็จรูปได้มากเลยทีเดียว รวมถึงยังมีคลังแดชบอร์ดมากมายใน Shiny gallery ให้ได้ศึกษา และสามารถใช้แพคเกจต่าง ๆ ใน Program R เข้ามาร่วมในการทำแดชบอร์ดนี้ได้อีกด้วย ซึ่งใน Shiny ยังมี package เพิ่มเติมที่ช่วยให้ Shiny มีประสิทธิภาพมากขึ้นอีกมากมายเลย เช่น shinythemes ที่จะช่วยปรับธีม สี และฟอนต์ให้แดชบอร์ดเราดูสวยงามมากขึ้น shinydashboard ที่ถูกเขียนมาเพื่อวางโครงสร้างของแดชบอร์ดให้ผู้เขียนสามารถปรับแต่งได้ง่ายมากยิ่งขึ้น และแพคเกจอย่าง shinyjs ที่ถูกพัฒนามาช่วยปรับปรุงแอพได้เหมือนภาษา JavaScript เลย

หวังว่าบทความนี้จะเป็นไอเดียที่ดีในการที่ผู้อ่านจะนำไปต่อยอดหรือสร้างสุดยอด web application ในแบบของตัวเองต่อไปครับ

ขอขอบคุณแหล่งความรู้ดี ๆ จาก Youtube Dataprofessor : https://www.youtube.com/dataprofessor