Integrando aplicativos ShinyLive em um site pkgdown nas páginas do GitHub

Aprimorando a interatividade para não programadores com ShinyLive

Hospedar conjuntos de dados e funções auxiliares nas páginas do GitHub é uma excelente maneira de tornar os recursos acessíveis. Para desenvolvedores que trabalham com R, a integração da interatividade pode melhorar ainda mais o envolvimento do usuário, especialmente para não programadores que exploram seus dados. ShinyLive oferece uma solução prática para incorporar essa interatividade diretamente em um site pkgdown.

Apesar da disponibilidade de recursos para incorporar aplicativos Shiny em pacotes R ou páginas GitHub, ainda há uma lacuna de conhecimento sobre como combinar ShinyLive com sites pkgdown de forma eficaz. Como alguém que mantém pequenos pacotes R com conjuntos de dados e funções auxiliares, você provavelmente pretende tornar a exploração de dados intuitiva e fácil de usar. ShinyLive pode preencher essa lacuna.

Incorporar um aplicativo Shiny na seção “Artigos” do seu site pkgdown oferece uma maneira simplificada de fornecer recursos interativos sem sobrecarregar a documentação do pacote R. Este método garante que mesmo usuários não familiarizados com codificação possam facilmente subdividir e visualizar dados. É uma situação vantajosa para desenvolvedores e usuários! 🚀

Por exemplo, imagine um conjunto de dados de saúde onde os usuários possam filtrar dados populacionais por dados demográficos. Usando o ShinyLive, você pode construir e implantar este aplicativo nas páginas do GitHub, tornando os dados acessíveis de forma dinâmica. Este artigo explora como fazer isso passo a passo com a configuração do seu aplicativo existente. 🛠️

Criando ferramentas interativas de exploração de dados com Shinylive

O primeiro script, construído usando R e Shiny, concentra-se na criação de uma interface dinâmica que permite aos usuários explorar conjuntos de dados de forma interativa. O selecioneInput O comando é essencial para permitir que os usuários escolham variáveis ​​em um menu suspenso de forma dinâmica, adaptando o aplicativo às suas necessidades. Emparelhado com entrada deslizante, os usuários podem refinar ainda mais sua exploração selecionando um intervalo específico de valores para filtrar dados. Por exemplo, em um conjunto de dados como mtcars, os usuários podem selecionar “mpg” como variável e usar o controle deslizante para isolar carros com quilometragem entre 20 e 30. Essa combinação garante uma interface amigável e intuitiva. 🚀

A lógica do lado do servidor complementa a UI gerando saídas reativas com base nas entradas do usuário. Aqui, o renderPlot A função é crucial: ela processa o conjunto de dados filtrado e gera visualizações dinâmicas dinamicamente. A integração do dplyr filtro A função permite subconjuntos contínuos do conjunto de dados, enquanto o do ggplot2 geom_histograma garante enredos visualmente atraentes e informativos. Imagine um conjunto de dados de saúde onde um usuário pudesse filtrar faixas etárias e ver instantaneamente a distribuição das métricas de saúde – esse script torna essa interatividade possível com o mínimo de esforço para os desenvolvedores.

O segundo script se concentra em automatizar a implantação usando GitHub Actions. Isto é particularmente importante para manter e atualizar sites pkgdown de forma eficiente. Ao utilizar um implantar-app.yaml arquivo, você pode automatizar o processo de envio de atualizações e implantação do aplicativo ShinyLive. Comandos principais como ações/checkout@v3 garanta que o código mais recente do repositório seja usado, enquanto a configuração específica do Shinylive se integra perfeitamente ao fluxo de trabalho. Por exemplo, imagine atualizar seu aplicativo com novos filtros ou recursos. Essa automação garante que as alterações sejam refletidas on-line imediatamente, economizando tempo e reduzindo erros manuais. ⚙️

A terceira solução envolve agrupar o aplicativo Shiny em um arquivo HTML estático. Usando brilhantelive.js, os desenvolvedores podem incorporar o aplicativo diretamente em seu site pkgdown, evitando a necessidade de um servidor R ativo. Este método torna o aplicativo acessível a usuários sem R instalado, melhorando a acessibilidade. Por exemplo, um professor pode partilhar uma aplicação interativa sobre dados populacionais com os alunos, que podem explorá-la diretamente a partir dos seus navegadores. Esta solução é particularmente valiosa para não programadores, pois transforma conjuntos de dados complexos em uma experiência envolvente e educacional. 🌐

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

Melhorando a acessibilidade e o desempenho de sites pkgdown com ShinyLive

Uma vantagem poderosa de usar BrilhanteLive é sua capacidade de permitir interatividade autônoma sem depender de um servidor R ativo. Isso o torna perfeito para hospedar aplicativos em plataformas estáticas como GitHub Pages. Ao contrário dos aplicativos Shiny tradicionais que precisam de suporte contínuo do servidor, o ShinyLive converte seu aplicativo em um pacote JavaScript independente. Este pacote pode ser incorporado diretamente em seu site pkgdown, permitindo que os usuários explorem seus conjuntos de dados perfeitamente em qualquer navegador. Por exemplo, se o seu pacote R incluir um conjunto de dados de métricas de qualidade do ar, os usuários poderão filtrar e visualizar dinamicamente os dados sem a necessidade de instalar qualquer software adicional. 🌍

Outro benefício reside na sua adaptabilidade para não codificadores. Ao incorporar recursos como menus suspensos e controles deslizantes, você cria um ambiente onde qualquer pessoa pode interagir com seus dados. Por exemplo, um profissional de saúde poderia examinar dados populacionais selecionando grupos etários ou regiões sem precisar escrever uma única linha de código. A combinação do ShinyLive e do GitHub Pages garante que esses recursos interativos sejam facilmente acessíveis e intuitivos, tornando seu projeto altamente impactante para um público mais amplo. 🧩

Além disso, ShinyLive melhora o desempenho do seu site pkgdown, otimizando os recursos necessários para executar o aplicativo. Como toda a lógica é compilada em JavaScript, os aplicativos carregam mais rapidamente e oferecem interatividade mais suave. Isto é particularmente útil para mostrar grandes conjuntos de dados, onde a renderização de gráficos ou a aplicação de filtros podem introduzir atrasos. O resultado é uma experiência de usuário de nível profissional que se alinha aos padrões modernos da web e às expectativas de acessibilidade. 🚀