ShinyLive-apps integreren in een pkgdown-website op GitHub-pagina's

Verbetering van de interactiviteit voor niet-codeerders met ShinyLive

Het hosten van datasets en helperfuncties op GitHub Pages is een uitstekende manier om bronnen toegankelijk te maken. Voor ontwikkelaars die met R werken, kan de integratie van interactiviteit de gebruikersbetrokkenheid verder vergroten, vooral voor niet-codeerders die uw gegevens verkennen. ShinyLive biedt een praktische oplossing om dergelijke interactiviteit rechtstreeks in een pkgdown-website in te bedden.

Ondanks de beschikbaarheid van bronnen voor het integreren van Shiny apps in R-pakketten of GitHub-pagina's, blijft er een kennislacune bestaan ​​over het effectief combineren van ShinyLive met pkgdown-websites. Als iemand die kleine R-pakketten onderhoudt met datasets en helperfuncties, wil je waarschijnlijk het verkennen van data intuïtief en gebruiksvriendelijk maken. ShinyLive kan deze kloof overbruggen.

Het opnemen van een Shiny-app in het gedeelte 'Artikelen' van uw pkgdown-website biedt een gestroomlijnde manier om interactieve functies te leveren zonder de documentatie van het R-pakket te overbelasten. Deze methode zorgt ervoor dat zelfs gebruikers die niet bekend zijn met coderen, gegevens gemakkelijk kunnen onderverdelen en visualiseren. Het is een win-winsituatie voor zowel ontwikkelaars als gebruikers! 🚀

Stel je bijvoorbeeld een gezondheidsdataset voor waarin gebruikers bevolkingsgegevens kunnen filteren op demografische gegevens. Met ShinyLive kun je deze app bouwen en implementeren op GitHub Pages, waardoor de gegevens op een dynamische manier toegankelijk worden. In dit artikel wordt stapsgewijs beschreven hoe u dit kunt bereiken met uw bestaande app-installatie. 🛠️

Interactieve tools voor gegevensverkenning creëren met Shinylive

Het eerste script, gebouwd met R en Shiny, richt zich op het creëren van een dynamische interface waarmee gebruikers datasets interactief kunnen verkennen. De selecteerInvoer commando is essentieel om gebruikers in staat te stellen dynamisch variabelen uit een vervolgkeuzemenu te kiezen, waardoor de app op hun behoeften wordt afgestemd. Gekoppeld met sliderInvoerkunnen gebruikers hun verkenning verder verfijnen door een specifiek waardenbereik te selecteren om gegevens te filteren. Bijvoorbeeld in een dataset als mtcarskunnen gebruikers ‘mpg’ als variabele selecteren en de schuifregelaar gebruiken om auto’s met een kilometerstand tussen de 20 en 30 te isoleren. Deze combinatie zorgt voor een gebruiksvriendelijke en intuïtieve interface. 🚀

De logica aan de serverzijde vormt een aanvulling op de gebruikersinterface door reactieve uitvoer te genereren op basis van gebruikersinvoer. Hier, de renderPlot functie is cruciaal: deze verwerkt de gefilterde dataset en genereert direct dynamische visualisaties. De integratie van dplyr's filter -functie maakt een naadloze subsetting van de dataset mogelijk, terwijl ggplot2's geom_histogram zorgt voor visueel aantrekkelijke en informatieve plots. Stel je een gezondheidsdataset voor waarin een gebruiker leeftijdscategorieën kan filteren en direct de distributie van gezondheidsstatistieken kan zien: dit script maakt dergelijke interactiviteit mogelijk met minimale inspanning voor ontwikkelaars.

Het tweede script richt zich op het automatiseren van de implementatie met behulp van GitHub Actions. Dit is vooral belangrijk voor het efficiënt onderhouden en updaten van pkgdown-websites. Door gebruik te maken van een implementatie-app.yaml -bestand kunt u het proces van het pushen van updates en het implementeren van de ShinyLive-app automatiseren. Toetsopdrachten zoals acties/afrekenen@v3 zorg ervoor dat de nieuwste code uit de repository wordt gebruikt, terwijl de Shinylive-specifieke installatie naadloos in de workflow integreert. Stel je voor dat je je app bijwerkt met nieuwe filters of functies. Deze automatisering zorgt ervoor dat wijzigingen onmiddellijk online worden doorgevoerd, waardoor tijd wordt bespaard en handmatige fouten worden verminderd. ⚙️

De derde oplossing is het inpakken van de Shiny-app in een statisch HTML-bestand. Door te gebruiken glanzendlive.jskunnen ontwikkelaars de app rechtstreeks in hun pkgdown-website insluiten, waardoor de noodzaak van een actieve R-server wordt omzeild. Deze methode maakt de app toegankelijk voor gebruikers zonder R geïnstalleerd, waardoor de toegankelijkheid wordt verbeterd. Een docent zou bijvoorbeeld een interactieve app over bevolkingsgegevens kunnen delen met leerlingen, die deze rechtstreeks vanuit hun browser kunnen verkennen. Deze oplossing is vooral waardevol voor niet-codeerders, omdat complexe datasets worden omgezet in een boeiende en leerzame ervaring. 🌐

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

Verbetering van de toegankelijkheid en prestaties voor pkgdown-websites met ShinyLive

Een krachtig voordeel van het gebruik GlanzendLive is het vermogen om zelfstandige interactiviteit mogelijk te maken zonder afhankelijk te zijn van een actieve R-server. Dit maakt het perfect voor het hosten van apps op statische platforms zoals GitHub Pages. In tegenstelling tot traditionele Shiny-apps die continue serverondersteuning nodig hebben, converteert ShinyLive uw applicatie naar een op zichzelf staande JavaScript-bundel. Deze bundel kan rechtstreeks in uw pkgdown-website worden ingesloten, zodat gebruikers uw datasets naadloos vanuit elke browser kunnen verkennen. Als uw R-pakket bijvoorbeeld een dataset met luchtkwaliteitsgegevens bevat, kunnen gebruikers de gegevens dynamisch filteren en visualiseren zonder dat ze aanvullende software hoeven te installeren. 🌍

Een ander voordeel ligt in het aanpassingsvermogen ervan niet-codeerders. Door functies zoals vervolgkeuzelijsten en schuifregelaars op te nemen, creëert u een omgeving waarin iedereen met uw gegevens kan communiceren. Een zorgverlener zou bijvoorbeeld bevolkingsgegevens kunnen onderzoeken door leeftijdsgroepen of regio's te selecteren zonder ook maar één regel code te hoeven schrijven. De combinatie van ShinyLive en GitHub Pages zorgt ervoor dat deze interactieve functies gemakkelijk toegankelijk en intuïtief zijn, waardoor uw project een grote impact heeft voor een breder publiek. 🧩

Bovendien verbetert ShinyLive de prestaties van uw pkgdown-website door de bronnen te optimaliseren die nodig zijn om de app uit te voeren. Omdat de volledige logica in JavaScript is gecompileerd, worden apps sneller geladen en bieden ze een soepelere interactiviteit. Dit is met name handig voor het presenteren van grote datasets, waarbij het renderen van plots of het toepassen van filters anders vertragingen zou kunnen veroorzaken. Het resultaat is een professionele gebruikerservaring die aansluit bij moderne webstandaarden en toegankelijkheidsverwachtingen. 🚀