将 ShinyLive 应用程序集成到 GitHub Pages 上的 pkgdown 网站

将 ShinyLive 应用程序集成到 GitHub Pages 上的 pkgdown 网站
将 ShinyLive 应用程序集成到 GitHub Pages 上的 pkgdown 网站
Gerald Girard
2024年12月28日星期六 上午9:38:52

使用 ShinyLive 增强非编码人员的交互性

在 GitHub Pages 上托管数据集和辅助函数是使资源可访问的绝佳方法。对于使用 R 的开发人员来说，交互性的集成可以进一步增强用户参与度，特别是对于探索数据的非编码人员而言。 ShinyLive 提供了一种实用的解决方案，可以将此类交互性直接嵌入到 pkgdown 网站中。

尽管有关于将 Shiny 应用程序合并到 R 包或 GitHub Pages 中的资源，但在有效地将 ShinyLive 与 pkgdown 网站结合起来方面仍然存在知识差距。作为维护带有数据集和辅助函数的小型 R 包的人，您的目标可能是使数据探索直观且用户友好。 ShinyLive 可以弥补这一差距。

将 Shiny 应用程序合并到 pkgdown 网站的“文章”部分中，可以提供一种简化的方式来提供交互式功能，而不会超载 R 包文档。这种方法确保即使不熟悉编码的用户也可以轻松地对数据进行子集化和可视化。这对于开发者和用户来说都是双赢的！ 🚀

例如，想象一个健康数据集，用户可以按人口统计数据过滤人口数据。使用 ShinyLive，您可以在 GitHub Pages 上构建和部署此应用程序，从而以动态方式访问数据。本文探讨如何使用现有的应用程序设置逐步实现这一目标。 🛠️

命令 使用示例
selectInput 在 Shiny UI 中用于创建用于选择选项的下拉菜单。示例： selectInput("var", "选择变量:", Choices = name(mtcars))。这允许动态用户输入以进行变量选择。
sliderInput 在 Shiny 中创建一个滑块输入小部件，让用户选择一系列值。示例： sliderInput("range", "Filter Range:", min = 0, max = 100, value = c(25, 75))。对于交互式过滤至关重要。
renderPlot 在 Shiny 服务器逻辑中用于根据用户输入动态生成绘图。示例：输出$plot
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 在 ggplot2 中用于以编程方式设置 x 轴和 y 轴等美观效果。示例：aes_string(x = input$var)。动态绘图生成的理想选择。
geom_histogram 用于创建直方图可视化的 ggplot2 层。示例：geom_histogram(bins = 10, fill = "blue", color = "white")。对于可视化应用程序中的分布很有用。
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("range", "Filter Range:", min = 0, max = 100, value = c(25, 75))。为用户添加动态范围过滤。

使用 Shinylive 创建交互式数据探索工具

第一个脚本是使用 R 和 Shiny 构建的，重点是创建一个动态界面，允许用户交互式地探索数据集。这 选择输入 命令对于使用户能够从下拉菜单中动态选择变量、根据他们的需求定制应用程序至关重要。搭配 滑块输入，用户可以通过选择特定范围的值来过滤数据来进一步细化他们的探索。例如，在像这样的数据集中 移动汽车，用户可以选择“mpg”作为变量，并使用滑块来隔离里程数在 20 到 30 之间的汽车。这种组合确保了用户友好且直观的界面。 🚀

服务器端逻辑通过根据用户输入生成反应性输出来补充 UI。在这里， 渲染图 函数至关重要——它处理过滤后的数据集并动态生成动态可视化。 dplyr 的集成 筛选 函数允许对数据集进行无缝子集化，而 ggplot2 的 几何直方图 确保情节具有视觉吸引力和信息丰富。想象一个健康数据集，用户可以过滤年龄范围并立即查看健康指标的分布 - 该脚本使开发人员只需付出最少的努力就可以实现这种交互。

第二个脚本侧重于使用 GitHub Actions 进行自动化部署。这对于有效维护和更新 pkgdown 网站尤为重要。通过利用 部署应用程序.yaml 文件中，您可以自动执行推送更新和部署 ShinyLive 应用程序的过程。关键命令如 动作/结账@v3 确保使用存储库中的最新代码，同时特定于 Shinylive 的设置无缝集成到工作流程中。例如，想象一下使用新的过滤器或功能更新您的应用程序 - 这种自动化可确保更改立即在线反映，从而节省时间并减少手动错误。 ⚙️

第三种解决方案是将 Shiny 应用程序包装在静态 HTML 文件中。通过使用 闪亮的live.js，开发人员可以将应用程序直接嵌入到他们的 pkgdown 网站中，从而绕过对活动 R 服务器的需求。此方法使未安装 R 的用户也可以访问该应用程序，从而增强了可访问性。例如，教师可以与学生共享有关人口数据的交互式应用程序，学生可以直接从浏览器中探索该应用程序。该解决方案对于非编码人员特别有价值，因为它将复杂的数据集转化为引人入胜的教育体验。 🌐

使用 Shinylive 在 pkgdown 网站中嵌入 Shiny 应用程序

解决方案 1：R 与 Shinylive 进行前端和后端集成

# 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: ./

为闪亮的应用程序添加静态 HTML 包装器

解决方案 3：将 Shiny 应用程序包装在静态 HTML 中以进行 pkgdown 集成

< !-- 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 Pages 等静态平台上托管应用程序。与需要持续服务器支持的传统 Shiny 应用程序不同，ShinyLive 将您的应用程序转换为独立的 JavaScript 包。该捆绑包可以直接嵌入到您的 pkgdown 网站中，允许用户从任何浏览器无缝地探索您的数据集。例如，如果您的 R 包包含空气质量指标数据集，则用户可以动态过滤和可视化数据，而无需安装任何其他软件。 🌍

另一个好处在于它的适应性 非编码员。通过合并下拉菜单和滑块等功能，您可以创建一个任何人都可以与您的数据交互的环境。例如，卫生专业人员可以通过选择年龄组或地区来检查人口数据，而无需编写任何代码。 ShinyLive 和 GitHub Pages 的结合确保了这些交互式功能易于访问且直观，使您的项目对更广泛的受众产生巨大影响。 🧩

此外，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 页面 ，展示了 ShinyLive 在 pkgdown 中的实际应用。