GitHub 페이지의 pkgdown 웹 사이트에 ShinyLive 앱 통합

GitHub 페이지의 pkgdown 웹 사이트에 ShinyLive 앱 통합
GitHub 페이지의 pkgdown 웹 사이트에 ShinyLive 앱 통합
Gerald Girard
2024년 12월 28일 토요일 오전 10:32:21

ShinyLive를 통해 비코더를 위한 상호 작용 향상

GitHub 페이지에 데이터 세트와 도우미 기능을 호스팅하는 것은 리소스에 액세스할 수 있는 훌륭한 방법입니다. R을 사용하는 개발자의 경우 대화형 기능의 통합은 특히 데이터를 탐색하는 비코더의 경우 사용자 참여를 더욱 향상시킬 수 있습니다. ShinyLive는 이러한 상호 작용을 pkgdown 웹 사이트에 직접 삽입하기 위한 실용적인 솔루션을 제공합니다.

Shiny 앱을 R 패키지 또는 GitHub 페이지에 통합하는 데 필요한 리소스가 있음에도 불구하고 ShinyLive를 pkgdown 웹 사이트와 효과적으로 결합하는 데는 지식 격차가 남아 있습니다. 데이터 세트와 도우미 기능이 포함된 작은 R 패키지를 유지 관리하는 사람은 데이터 탐색을 직관적이고 사용자 친화적으로 만드는 것을 목표로 할 것입니다. ShinyLive는 이러한 격차를 해소할 수 있습니다.

Shiny 앱을 pkgdown 웹 사이트의 "기사" 섹션에 통합하면 R 패키지 문서를 오버로드하지 않고 대화형 기능을 제공하는 간소화된 방법을 제공합니다. 이 방법을 사용하면 코딩에 익숙하지 않은 사용자라도 데이터를 쉽게 부분 집합화하고 시각화할 수 있습니다. 개발자와 사용자 모두에게 윈윈(win-win)입니다! 🚀

예를 들어 사용자가 인구 통계를 기준으로 인구 데이터를 필터링할 수 있는 건강 데이터 세트를 상상해 보세요. ShinyLive를 사용하면 GitHub 페이지에 이 앱을 구축하고 배포하여 동적인 방식으로 데이터에 액세스할 수 있습니다. 이 문서에서는 기존 앱 설정을 사용하여 이를 단계별로 달성하는 방법을 살펴봅니다. 🛠️

명령 사용예
selectInput Shiny UI에서 옵션 선택을 위한 드롭다운 메뉴를 만드는 데 사용됩니다. 예: selectInput("var", "변수 선택:", 선택 = 이름(mtcars)). 이를 통해 변수 선택을 위한 동적 사용자 입력이 가능합니다.
sliderInput 사용자가 값 범위를 선택할 수 있도록 Shiny에서 슬라이더 입력 위젯을 만듭니다. 예: SliderInput("범위", "필터 범위:", 최소 = 0, 최대 = 100, 값 = c(25, 75)). 대화형 필터링에 필수적입니다.
renderPlot 사용자 입력을 기반으로 동적으로 플롯을 생성하기 위해 Shiny 서버 로직에 사용됩니다. 예: 출력$플롯
filter A function from dplyr to subset data based on conditions. Example: filter(get(input$var) >조건에 따라 dplyr에서 데이터 하위 집합을 생성하는 함수입니다. 예: filter(get(input$var) >= input$range[1]). 데이터세트에 사용자 정의 필터를 적용하는 데 유용합니다.
aes_string x 및 y 축과 같은 미학을 프로그래밍 방식으로 설정하기 위해 ggplot2에서 사용됩니다. 예: aes_string(x = 입력$var). 동적 플롯 생성에 이상적입니다.
geom_histogram 히스토그램 시각화를 생성하기 위한 ggplot2 레이어. 예: geom_histogram(bins = 10, 채우기 = "파란색", 색상 = "흰색"). 앱의 분포를 시각화하는 데 유용합니다.
uses 재사용 가능한 작업을 지정하기 위한 GitHub Actions의 YAML 구문. 예: 용도: actions/checkout@v3. 사전 정의된 워크플로와의 원활한 통합을 보장합니다.
shinylive.js 브라우저에서 Shiny 앱을 실행하기 위한 JavaScript 라이브러리입니다. 예: . 정적 HTML 페이지에 Shiny 앱을 포함할 수 있습니다.
Shinylive.App 지정된 HTML 컨테이너에서 ShinyLive 앱을 초기화하고 실행합니다. 예: const app = new Shinylive.App("#shiny-app");. 브라우저 기반 앱 기능을 제공합니다.
sliderInput 숫자 범위 선택을 위한 슬라이더 입력을 만듭니다. 예: SliderInput("범위", "필터 범위:", 최소 = 0, 최대 = 100, 값 = c(25, 75)). 사용자를 위한 동적 범위 필터링을 추가합니다.

Shinylive로 대화형 데이터 탐색 도구 만들기

R 및 Shiny를 사용하여 구축된 첫 번째 스크립트는 사용자가 데이터 세트를 대화형으로 탐색할 수 있는 동적 인터페이스를 만드는 데 중점을 둡니다. 그만큼 선택입력 명령은 사용자가 드롭다운 메뉴에서 변수를 동적으로 선택하여 필요에 맞게 앱을 조정할 수 있도록 하는 데 필수적입니다. 다음과 페어링됨 슬라이더 입력, 사용자는 데이터를 필터링하기 위해 특정 범위의 값을 선택하여 탐색을 더욱 구체화할 수 있습니다. 예를 들어 다음과 같은 데이터 세트에서 엠티카, 사용자는 변수로 "mpg"를 선택하고 슬라이더를 사용하여 주행거리가 20에서 30 사이인 자동차를 격리할 수 있습니다. 이 조합은 사용자 친화적이고 직관적인 인터페이스를 보장합니다. 🚀

서버 측 로직은 사용자 입력을 기반으로 반응형 출력을 생성하여 UI를 보완합니다. 여기서는 렌더플롯 기능은 매우 중요합니다. 필터링된 데이터 세트를 처리하고 즉시 동적 시각화를 생성합니다. dplyr의 통합 필터 기능을 사용하면 데이터 세트의 원활한 하위 설정이 가능하지만 ggplot2의 기능은 기하학_히스토그램 시각적으로 매력적이고 유익한 플롯을 보장합니다. 사용자가 연령대를 필터링하고 건강 지표의 분포를 즉시 확인할 수 있는 건강 데이터 세트를 상상해 보십시오. 이 스크립트를 사용하면 개발자는 최소한의 노력으로 이러한 상호 작용이 가능해집니다.

두 번째 스크립트는 GitHub Actions를 사용한 배포 자동화에 중점을 둡니다. 이는 pkgdown 웹 사이트를 효율적으로 유지 관리하고 업데이트하는 데 특히 중요합니다. 활용함으로써 배포-app.yaml 파일을 사용하면 업데이트 푸시 및 ShinyLive 앱 배포 프로세스를 자동화할 수 있습니다. 다음과 같은 주요 명령 작업/체크아웃@v3 저장소의 최신 코드가 사용되는지 확인하는 동시에 Shinylive 관련 설정이 워크플로우에 원활하게 통합됩니다. 예를 들어, 새로운 필터나 기능으로 앱을 업데이트한다고 상상해보세요. 이 자동화를 통해 변경 사항이 온라인에 즉시 반영되어 시간이 절약되고 수동 오류가 줄어듭니다. ⚙️

세 번째 해결 방법은 Shiny 앱을 정적 HTML 파일로 래핑하는 것입니다. 사용하여 빛나는live.js, 개발자는 활성 R 서버가 필요 없이 앱을 pkgdown 웹 사이트에 직접 포함할 수 있습니다. 이 방법을 사용하면 R을 설치하지 않고도 사용자가 앱에 액세스할 수 있어 접근성이 향상됩니다. 예를 들어 교사는 인구 데이터에 대한 대화형 앱을 학생들과 공유할 수 있으며 학생들은 브라우저에서 직접 탐색할 수 있습니다. 이 솔루션은 복잡한 데이터 세트를 매력적이고 교육적인 경험으로 변환하므로 비코더에게 특히 유용합니다. 🌐

Shinylive를 사용하여 pkgdown 웹사이트에 Shiny 앱 삽입하기

솔루션 1: 프런트엔드 및 백엔드 통합을 위해 Shinylive를 사용한 R

# app.R
# Load necessary libraries
library(shiny)
library(dplyr)
library(ggplot2)

# UI definition
ui <- fluidPage(
  titlePanel("Interactive Data Viewer"),
  sidebarLayout(
    sidebarPanel(
      selectInput("var", "Select Variable:",
                  choices = names(mtcars)),
      sliderInput("range", "Filter Range:",
                  min = 0, max = 100, value = c(25, 75))
    ),
    mainPanel(plotOutput("plot"))
  )
)

# Server logic
server <- function(input, output) {
  output$plot <- renderPlot({
    data <- mtcars %>%
      filter(get(input$var) >= input$range[1],
             get(input$var) <= input$range[2])
    ggplot(data, aes_string(x = input$var)) +
      geom_histogram(bins = 10, fill = "blue", color = "white")
  })
}

# Run the app
shinyApp(ui, server)

GitHub Actions를 사용하여 Shinylive 배포

솔루션 2: GitHub Actions 및 Shinylive를 사용하여 배포 자동화

# deploy-app.yaml
# Workflow configuration
name: Deploy ShinyLive App

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repository
      uses: actions/checkout@v3

    - name: Set up R
      uses: r-lib/actions/setup-r@v2

    - name: Install dependencies
      run: |
        Rscript -e "install.packages(c('shiny', 'shinylive'))"

    - name: Deploy app
      uses: posit-dev/r-shinylive@actions-v1
      with:
        app-dir: ./

Shiny 앱을 위한 정적 HTML 래퍼 추가

솔루션 3: pkgdown 통합을 위해 정적 HTML로 Shiny 앱 래핑

< !-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Interactive Shiny App</title>
  <script src="shinylive.js"></script>
</head>
<body>
  <div id="shiny-app"></div>
  <script>
    const app = new Shinylive.App("#shiny-app");
    app.run();
  </script>
</body>
</html>

ShinyLive를 통해 pkgdown 웹사이트의 접근성 및 성능 향상

사용의 강력한 이점 중 하나 샤이니라이브 활성 R 서버에 의존하지 않고 독립형 상호 작용을 활성화하는 기능입니다. 이는 GitHub 페이지와 같은 정적 플랫폼에서 앱을 호스팅하는 데 적합합니다. 지속적인 서버 지원이 필요한 기존 Shiny 앱과 달리 ShinyLive는 애플리케이션을 자체 포함된 JavaScript 번들로 변환합니다. 이 번들은 pkgdown 웹사이트에 직접 삽입될 수 있으므로 사용자는 모든 브라우저에서 데이터세트를 원활하게 탐색할 수 있습니다. 예를 들어, R 패키지에 대기질 지표 데이터 세트가 포함되어 있는 경우 사용자는 추가 소프트웨어를 설치할 필요 없이 데이터를 동적으로 필터링하고 시각화할 수 있습니다. 🌍

또 다른 이점은 적응력에 있습니다. 코더가 아닌 사람. 드롭다운 및 슬라이더와 같은 기능을 통합하면 누구나 데이터와 상호 작용할 수 있는 환경을 만들 수 있습니다. 예를 들어, 의료 전문가는 코드를 한 줄도 작성할 필요 없이 연령 그룹이나 지역을 선택하여 인구 데이터를 검사할 수 있습니다. ShinyLive와 GitHub 페이지를 결합하면 이러한 대화형 기능에 쉽게 액세스하고 직관적으로 사용할 수 있으므로 프로젝트가 더 많은 청중에게 큰 영향을 미칠 수 있습니다. 🧩

또한 ShinyLive는 앱 실행에 필요한 리소스를 최적화하여 pkgdown 웹 사이트의 성능을 향상시킵니다. 전체 로직이 JavaScript로 컴파일되므로 앱이 더 빠르게 로드되고 더 원활한 상호작용이 제공됩니다. 이는 플롯을 렌더링하거나 필터를 적용하면 지연이 발생할 수 있는 대규모 데이터 세트를 표시하는 데 특히 유용합니다. 그 결과 최신 웹 표준 및 접근성 기대치에 부합하는 전문가 수준의 사용자 경험이 탄생했습니다. 🚀

pkgdown 웹사이트에서 ShinyLive 사용에 대해 자주 묻는 질문

  1. pkgdown 웹사이트에 Shiny 앱을 어떻게 삽입하나요?
  2. 당신은 사용할 수 있습니다 ShinyLive Shiny 앱을 JavaScript 번들로 변환하고 Articles pkgdown 웹사이트의 섹션입니다.
  3. ShinyLive 앱을 위한 라이브 R 서버가 필요합니까?
  4. 아니요, ShinyLive 앱은 독립형이며 활성 R 서버 없이 브라우저에서 직접 실행할 수 있습니다.
  5. GitHub에 변경 사항을 푸시하면 앱을 자동으로 업데이트할 수 있나요?
  6. 예, 사용할 수 있습니다 GitHub Actions 배포를 자동화합니다. 다음과 같은 워크플로 deploy-app.yaml 당신을 위해 이 일을 처리할 수 있습니다.
  7. 어떤 유형의 사용자 상호 작용을 포함할 수 있나요?
  8. 다음과 같은 기능을 추가할 수 있습니다. selectInput 드롭다운 및 sliderInput 숫자 범위를 사용하여 앱을 매우 대화형으로 만듭니다.
  9. ShinyLive는 비코더에게도 적합합니까?
  10. 전적으로! ShinyLive를 사용하면 비코더도 대화형 위젯을 통해 데이터를 탐색할 수 있으므로 접근성을 위한 훌륭한 도구가 됩니다.

대화형 데이터 탐색이 쉬워졌습니다.

ShinyLive는 pkgdown 웹사이트에 상호작용성을 통합하기 위한 사용자 친화적인 솔루션을 제공합니다. Shiny 앱을 브라우저 지원 JavaScript 번들로 변환함으로써 모든 기술 수준의 사용자에게 매력적인 데이터 시각화의 문을 열어줍니다. 예를 들어 간단한 드롭다운 메뉴와 슬라이더를 사용하여 인구통계 데이터세트를 탐색할 수 있습니다. 🌟

ShinyLive를 GitHub Actions와 결합하면 배포 프로세스가 간소화되어 웹 사이트를 쉽게 최신 상태로 유지할 수 있습니다. 개발자이든 데이터 전문가이든 이 접근 방식은 기술 콘텐츠와 직관적인 사용자 경험 간의 격차를 해소하여 데이터 스토리를 웹 브라우저에서 생생하게 만들어줍니다. 📊

리소스 및 참고 자료
  1. 콘텐츠와 예제는 공식 ShinyLive 문서와 튜토리얼에서 영감을 받았습니다. 자세한 내용은 다음을 방문하세요. 샤이니라이브 소개 .
  2. 배포 워크플로는 ShinyLive GitHub 리포지토리 , 샘플 GitHub Actions 워크플로 및 통합 팁이 포함되어 있습니다.
  3. pkgdown 통합 전략은 pkgdown 문서 , R 패키지용 문서 웹 사이트 생성 및 관리에 대한 통찰력을 제공합니다.
  4. 추가적인 영감은 다음의 실제 예제를 탐색하여 얻었습니다. SC 인구 GitHub 페이지 , pkgdown에서 ShinyLive의 실제 적용을 보여줍니다.