Інтеграція програм ShinyLive у веб-сайт pkgdown на сторінках GitHub

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

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

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

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

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

Створення інтерактивних інструментів дослідження даних за допомогою Shinylive

Перший сценарій, створений за допомогою R і Shiny, зосереджений на створенні динамічного інтерфейсу, який дозволяє користувачам досліджувати набори даних в інтерактивному режимі. The виберіть Вхід Команда необхідна для того, щоб користувачі могли динамічно вибирати змінні зі спадного меню, налаштовуючи програму відповідно до своїх потреб. У парі з sliderInput, користувачі можуть додатково уточнити своє дослідження, вибравши певний діапазон значень для фільтрації даних. Наприклад, у наборі даних, як mtcars, користувачі можуть вибрати «mpg» як змінну та використати повзунок, щоб виокремити автомобілі з пробігом від 20 до 30. Ця комбінація забезпечує зручний та інтуїтивно зрозумілий інтерфейс. 🚀

Логіка на стороні сервера доповнює інтерфейс користувача, генеруючи реактивні виходи на основі введених користувачем даних. Ось, renderPlot функція має вирішальне значення — вона обробляє відфільтрований набір даних і генерує динамічні візуалізації на льоту. Інтеграція dplyr фільтр функція дозволяє безперебійне створення піднабору даних, тоді як ggplot2 geom_hystogram забезпечує візуально привабливі та інформативні сюжети. Уявіть собі набір даних про здоров’я, де користувач може фільтрувати вікові діапазони та миттєво бачити розподіл показників здоров’я — цей сценарій робить таку інтерактивність можливою з мінімальними зусиллями для розробників.

Другий сценарій зосереджений на автоматизації розгортання за допомогою GitHub Actions. Це особливо важливо для ефективної підтримки та оновлення веб-сайтів pkgdown. Використовуючи a deploy-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, програми завантажуються швидше та пропонують плавнішу інтерактивність. Це особливо корисно для демонстрації великих наборів даних, де візуалізація графіків або застосування фільтрів може призвести до затримок. Результатом є користувальницький досвід професійного рівня, який відповідає сучасним веб-стандартам і очікуванням доступності. 🚀