Интеграция приложений ShinyLive в веб-сайт pkgdown на страницах GitHub

Повышение интерактивности для непрограммистов с помощью ShinyLive

Размещение наборов данных и вспомогательных функций на страницах GitHub — отличный способ сделать ресурсы доступными. Для разработчиков, работающих с R, интеграция интерактивности может еще больше повысить вовлеченность пользователей, особенно для тех, кто не является программистом и изучает ваши данные. ShinyLive предлагает практическое решение для внедрения такой интерактивности непосредственно на веб-сайт pkgdown.

Несмотря на наличие ресурсов по включению приложений Shiny в пакеты R или страницы GitHub, остается пробел в знаниях по эффективному объединению ShinyLive с веб-сайтами pkgdown. Как человек, поддерживающий небольшие пакеты R с наборами данных и вспомогательными функциями, вы, вероятно, стремитесь сделать исследование данных интуитивно понятным и удобным для пользователя. ShinyLive может устранить этот пробел.

Включение приложения Shiny в раздел «Статьи» вашего веб-сайта pkgdown предлагает упрощенный способ предоставления интерактивных функций без перегрузки документации пакета R. Этот метод гарантирует, что даже пользователи, незнакомые с кодированием, смогут легко подбирать и визуализировать данные. Это беспроигрышный вариант как для разработчиков, так и для пользователей! 🚀

Например, представьте себе набор данных о здоровье, где пользователи могут фильтровать данные о населении по демографическим характеристикам. Используя ShinyLive, вы можете создать и развернуть это приложение на страницах GitHub, сделав данные доступными динамически. В этой статье описано, как шаг за шагом добиться этого с помощью существующей настройки приложения. 🛠️

Создание интерактивных инструментов исследования данных с помощью Shinylive

Первый скрипт, созданный с использованием R и Shiny, фокусируется на создании динамического интерфейса, который позволяет пользователям интерактивно исследовать наборы данных. выберитеВвод Команда необходима для того, чтобы пользователи могли динамически выбирать переменные из раскрывающегося меню, адаптируя приложение к их потребностям. В сочетании с слайдерВводпользователи могут уточнить свое исследование, выбрав определенный диапазон значений для фильтрации данных. Например, в наборе данных типа МТКАРС, пользователи могут выбрать «миль на галлон» в качестве переменной и использовать ползунок, чтобы изолировать автомобили с пробегом от 20 до 30. Эта комбинация обеспечивает удобный и интуитивно понятный интерфейс. 🚀

Логика на стороне сервера дополняет пользовательский интерфейс, генерируя реактивные выходные данные на основе вводимых пользователем данных. Здесь рендерплот Функция имеет решающее значение — она обрабатывает отфильтрованный набор данных и генерирует динамические визуализации на лету. Интеграция dplyr фильтр функция позволяет плавно разбивать набор данных, а функция ggplot2 geom_histogram обеспечивает визуально привлекательные и информативные сюжеты. Представьте себе набор данных о состоянии здоровья, в котором пользователь может фильтровать возрастные диапазоны и мгновенно видеть распределение показателей здоровья — этот скрипт делает такую ​​интерактивность возможной с минимальными усилиями для разработчиков.

Второй скрипт ориентирован на автоматизацию развертывания с помощью GitHub Actions. Это особенно важно для эффективного обслуживания и обновления веб-сайтов pkgdown. Используя развертывание-app.yaml файл, вы можете автоматизировать процесс отправки обновлений и развертывания приложения ShinyLive. Ключевые команды, такие как действия/оформление заказа@v3 убедитесь, что используется последний код из репозитория, а настройка, специфичная для Shinylive, легко интегрируется в рабочий процесс. Например, представьте, что вы обновляете свое приложение новыми фильтрами или функциями — такая автоматизация гарантирует, что изменения будут немедленно отражены в Интернете, экономя время и уменьшая количество ручных ошибок. ⚙️

Третье решение включает в себя упаковку приложения Shiny в статический HTML-файл. Используя Shinylive.jsразработчики могут встроить приложение непосредственно на свой веб-сайт pkgdown, минуя необходимость в активном сервере R. Этот метод делает приложение доступным для пользователей без установленного 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)

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

< !-- 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>

Повышение доступности и производительности веб-сайтов pkgdown с помощью ShinyLive

Одно мощное преимущество использования ShinyLive заключается в его способности обеспечивать автономную интерактивность, не полагаясь на активный сервер R. Это делает его идеальным для размещения приложений на статических платформах, таких как GitHub Pages. В отличие от традиционных приложений Shiny, которым требуется постоянная поддержка сервера, ShinyLive преобразует ваше приложение в автономный пакет JavaScript. Этот пакет можно встроить непосредственно в ваш веб-сайт pkgdown, что позволит пользователям беспрепятственно просматривать ваши наборы данных из любого браузера. Например, если ваш пакет R включает набор данных показателей качества воздуха, пользователи могут динамически фильтровать и визуализировать данные без необходимости установки какого-либо дополнительного программного обеспечения. 🌍

Еще одним преимуществом является его адаптируемость к непрограммисты. Включив такие функции, как раскрывающиеся списки и ползунки, вы создаете среду, в которой каждый может взаимодействовать с вашими данными. Например, медицинский работник может изучать данные о населении, выбирая возрастные группы или регионы, без необходимости писать единую строку кода. Сочетание ShinyLive и GitHub Pages гарантирует, что эти интерактивные функции легко доступны и интуитивно понятны, что делает ваш проект очень эффективным для более широкой аудитории. 🧩

Более того, ShinyLive повышает производительность вашего веб-сайта pkgdown за счет оптимизации ресурсов, необходимых для запуска приложения. Поскольку вся логика скомпилирована в JavaScript, приложения загружаются быстрее и обеспечивают более плавную интерактивность. Это особенно полезно для демонстрации больших наборов данных, где в противном случае отрисовка графиков или применение фильтров могут привести к задержкам. Результатом является пользовательский опыт профессионального уровня, соответствующий современным веб-стандартам и ожиданиям доступности. 🚀