Integrera ShinyLive-appar i en pkgdown-webbplats på GitHub-sidor

Förbättra interaktivitet för icke-kodare med ShinyLive

Att vara värd för datamängder och hjälpfunktioner på GitHub-sidor är ett utmärkt sätt att göra resurser tillgängliga. För utvecklare som arbetar med R kan integreringen av interaktivitet ytterligare förbättra användarnas engagemang, särskilt för icke-kodare som utforskar din data. ShinyLive erbjuder en praktisk lösning för att bädda in sådan interaktivitet direkt på en pkgdown-webbplats.

Trots tillgången på resurser för att införliva Shiny-appar i R-paket eller GitHub-sidor, finns det fortfarande en kunskapslucka när det gäller att effektivt kombinera ShinyLive med pkgdown-webbplatser. Som någon som underhåller små R-paket med datauppsättningar och hjälpfunktioner strävar du förmodligen efter att göra datautforskning intuitivt och användarvänligt. ShinyLive kan överbrygga detta gap.

Att införliva en Shiny-app i avsnittet "Artiklar" på din pkgdown-webbplats erbjuder ett strömlinjeformat sätt att leverera interaktiva funktioner utan att överbelasta R-paketets dokumentation. Denna metod säkerställer att även användare som inte är bekanta med kodning enkelt kan underställa och visualisera data. Det är en win-win för både utvecklare och användare! 🚀

Föreställ dig till exempel en hälsodatauppsättning där användare kan filtrera befolkningsdata efter demografi. Med ShinyLive kan du bygga och distribuera den här appen på GitHub-sidor, vilket gör data tillgänglig på ett dynamiskt sätt. Den här artikeln utforskar hur du uppnår detta steg-för-steg med din befintliga appkonfiguration. 🛠️

Skapa interaktiva verktyg för datautforskning med Shinylive

Det första skriptet, byggt med R och Shiny, fokuserar på att skapa ett dynamiskt gränssnitt som låter användare utforska datauppsättningar interaktivt. De välj Ingång kommandot är viktigt för att göra det möjligt för användare att dynamiskt välja variabler från en rullgardinsmeny och skräddarsy appen efter deras behov. Parat med sliderInput, kan användare förfina sin utforskning ytterligare genom att välja ett specifikt värdeintervall för att filtrera data. Till exempel i en datauppsättning som mtcars, kan användare välja "mpg" som variabel och använda reglaget för att isolera bilar med körsträcka mellan 20 och 30. Denna kombination säkerställer ett användarvänligt och intuitivt gränssnitt. 🚀

Serversidans logik kompletterar användargränssnittet genom att generera reaktiva utdata baserat på användarinmatningar. Här, den renderPlot Funktionen är avgörande – den bearbetar den filtrerade datamängden och genererar dynamiska visualiseringar i farten. Integreringen av dplyr's filtrera funktionen tillåter sömlös delinställning av datamängden, medan ggplot2:s geom_histogram säkerställer visuellt tilltalande och informativa tomter. Föreställ dig en hälsodatauppsättning där en användare kan filtrera åldersintervall och omedelbart se fördelningen av hälsomått – det här skriptet gör sådan interaktivitet möjlig med minimal ansträngning för utvecklare.

Det andra skriptet fokuserar på att automatisera distributionen med GitHub Actions. Detta är särskilt viktigt för att underhålla och uppdatera pkgdown-webbplatser effektivt. Genom att använda en deploy-app.yaml fil, kan du automatisera processen att skicka uppdateringar och distribuera ShinyLive-appen. Nyckelkommandon som actions/checkout@v3 se till att den senaste koden från förvaret används, medan den Shinylive-specifika installationen integreras sömlöst i arbetsflödet. Föreställ dig till exempel att du uppdaterar din app med nya filter eller funktioner – den här automatiseringen säkerställer att ändringar återspeglas online omedelbart, vilket sparar tid och minskar manuella fel. ⚙️

Den tredje lösningen innebär att linda in Shiny-appen i en statisk HTML-fil. Genom att använda shinylive.js, kan utvecklare bädda in appen direkt på sin pkgdown-webbplats och kringgå behovet av en aktiv R-server. Denna metod gör appen tillgänglig för användare utan R installerad, vilket förbättrar tillgängligheten. Till exempel kan en lärare dela en interaktiv app på befolkningsdata med elever, som kan utforska den direkt från sina webbläsare. Denna lösning är särskilt värdefull för icke-kodare, eftersom den förvandlar komplexa datauppsättningar till en engagerande och lärorik upplevelse. 🌐

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

Förbättra tillgänglighet och prestanda för pkgdown-webbplatser med ShinyLive

En kraftfull fördel med att använda ShinyLive är dess förmåga att möjliggöra fristående interaktivitet utan att förlita sig på en aktiv R-server. Detta gör den perfekt för att vara värd för appar på statiska plattformar som GitHub-sidor. Till skillnad från traditionella Shiny-appar som behöver kontinuerligt serverstöd, konverterar ShinyLive din applikation till ett fristående JavaScript-paket. Det här paketet kan bäddas in direkt på din pkgdown-webbplats, så att användare kan utforska dina datauppsättningar sömlöst från vilken webbläsare som helst. Till exempel, om ditt R-paket innehåller en datauppsättning av luftkvalitetsmått, kan användare dynamiskt filtrera och visualisera data utan att behöva installera någon ytterligare programvara. 🌍

En annan fördel ligger i dess anpassningsförmåga för icke-kodare. Genom att införliva funktioner som rullgardinsmenyer och reglage skapar du en miljö där alla kan interagera med din data. Till exempel kan en vårdpersonal undersöka befolkningsdata genom att välja åldersgrupper eller regioner utan att behöva skriva en enda kodrad. Kombinationen av ShinyLive och GitHub-sidor säkerställer att dessa interaktiva funktioner är lättillgängliga och intuitiva, vilket gör ditt projekt mycket effektfullt för en bredare publik. 🧩

Dessutom förbättrar ShinyLive prestandan på din pkgdown-webbplats genom att optimera de resurser som krävs för att köra appen. Eftersom hela logiken är kompilerad till JavaScript, laddas appar snabbare och erbjuder smidigare interaktivitet. Detta är särskilt användbart för att visa upp stora datamängder, där rendering av plotter eller tillämpning av filter annars kan orsaka förseningar. Resultatet är en användarupplevelse av professionell kvalitet som överensstämmer med moderna webbstandarder och tillgänglighetsförväntningar. 🚀