Verwendung von Shiny mit Quarto für Interaktivität

Einführung

Interaktive Shiny-Anwendungen können jetzt direkt in Ihre Quarto-Dokumente eingebettet werden. So können Sie erzählenden Text mit reaktiven Live-Anwendungen kombinieren, die vollständig im Browser laufen. Mit der Shinylive Quarto-Erweiterung und Standard-Shiny-Komponenten können Sie Shiny-Anwendungen erstellen, anzeigen und mit ihnen interagieren, ohne dass Sie einen eigenen Server benötigen. Dieses Tutorial bietet eine detaillierte Anleitung zum Einbetten einer Shiny-Anwendung, zum Anpassen ihres Aussehens und zur Fehlerbehebung bei allgemeinen Problemen.

1. Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:

• Quarto ist installiert: Laden Sie Quarto von [quarto.org] herunter und installieren Sie es(https://quarto.org).

• Shinylive Quarto Extension: Fügen Sie die Shinylive Extension zu Ihrem Projekt hinzu, indem Sie:

  quarto add quarto-ext/shinylive

• Konfigurieren Sie Filter: Fügen Sie in der YAML Ihres Dokuments (oder Ihrer _quarto.yml) den Filter Shinylive ein:

  filters:
    - shinylive

• Shiny und bslib: Stellen Sie sicher, dass die Pakete shiny und bslib in R installiert sind.

2. Erstellen einer einfachen eingebetteten Shiny App

Nachfolgend ein Beispiel für eine einfache Shiny-Anwendung, die direkt in ein Quarto-Dokument eingebettet ist und einen {shinylive-r}-Codeblock verwendet. Diese Anwendung zeigt ein Histogramm des mtcars-Datensatzes mit einem interaktiven Schieberegler zur Anpassung der Anzahl der Bins.

Schritt-für-Schritt-Durchlauf

1. Definieren Sie die UI:
   Verwenden Sie page_sidebar(), um ein Layout mit einer Seitenleiste für Eingaben und einem Hauptfeld für Ausgaben zu erstellen.

2. Eingaben erstellen:
   Fügen Sie eine sliderInput() in die Seitenleiste ein, um die Anzahl der Bins für das Histogramm auszuwählen.

3. Ausgabe anzeigen:
   Verwenden Sie plotOutput() im Hauptfenster, um das Histogramm anzuzeigen.

4. Server-Logik definieren:
   Verwenden Sie in der Serverfunktion renderPlot(), um das Histogramm auf der Grundlage der Schieberegler-Eingabe zu berechnen.

5. Ausführen der App:
   Fassen Sie die UI- und Server-Definitionen in einem Aufruf von shinyApp() zusammen.

Grundlegendes Beispiel für eine eingebettete R Shiny App

Quellcode

```{shinylive-r}
#| standalone: true
#| viewerHeight: 650

library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "Hello Shiny in Quarto",
  sidebar = sidebar(
    sliderInput("bins", "Number of bins:", min = 5, max = 30, value = 10)
  ),
  plotOutput("distPlot")
)

server <- function(input, output) {
  output$distPlot <- renderPlot({
    x <- mtcars$mpg
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    hist(x, breaks = bins, col = "skyblue", border = "white",
         main = "Histogram of MPG", xlab = "Miles Per Gallon")
  })
}

shinyApp(ui = ui, server = server)
```

Hinweis

• standalone: true: Diese Option zeigt an, dass dieser Codeblock eine vollständige Shiny-Anwendung darstellt.
• viewerHeight: 650: Mit dieser Option wird die Höhe des Anwendungsviewers festgelegt.

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| viewerHeight: 650

library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "Hello Shiny in Quarto",
  sidebar = sidebar(
    sliderInput("bins", "Number of bins:", min = 5, max = 30, value = 10)
  ),
  plotOutput("distPlot")
)

server <- function(input, output) {
  output$distPlot <- renderPlot({
    x <- mtcars$mpg
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    hist(x, breaks = bins, col = "skyblue", border = "white",
         main = "Histogram of MPG", xlab = "Miles Per Gallon")
  })
}

shinyApp(ui = ui, server = server)

Anpassen des eingebetteten Shiny-Erlebnisses

Wenn Sie den Code-Editor zusammen mit der laufenden Shiny-Anwendung anzeigen möchten (so dass Benutzer die Anwendung ändern und erneut ausführen können), können Sie zusätzliche Komponenten einfügen:

Quellcode

```{shinylive-r}
#| standalone: true
#| components: [editor, viewer]
#| viewerHeight: 650

library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "Editable Shiny App in Quarto",
  sidebar = sidebar(
    sliderInput("bins", "Number of bins:", min = 5, max = 30, value = 10)
  ),
  plotOutput("distPlot")
)

server <- function(input, output) {
  output$distPlot <- renderPlot({
    x <- mtcars$mpg
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    hist(x, breaks = bins, col = "skyblue", border = "white",
         main = "Histogram of MPG", xlab = "Miles Per Gallon")
  })
}

shinyApp(ui = ui, server = server)
```

Hinweis

• Die Verwendung von components: [editor, viewer] zeigt sowohl den Quellcode der Anwendung als auch die laufende Anwendung an.
• Sie können das Layout auch mit #| layout: vertical anpassen, wenn Sie es bevorzugen, dass der Editor über dem Viewer angeordnet ist.

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| components: [editor, viewer]
#| viewerHeight: 650

library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "Editable Shiny App in Quarto",
  sidebar = sidebar(
    sliderInput("bins", "Number of bins:", min = 5, max = 30, value = 10)
  ),
  plotOutput("distPlot")
)

server <- function(input, output) {
  output$distPlot <- renderPlot({
    x <- mtcars$mpg
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    hist(x, breaks = bins, col = "skyblue", border = "white",
         main = "Histogram of MPG", xlab = "Miles Per Gallon")
  })
}

shinyApp(ui = ui, server = server)

Hinweis

In diesem Beispiel wird der Quellcode-Editor über der laufenden Anwendung angezeigt, so dass Codeänderungen in Echtzeit möglich sind.

Interaktive Übung

Versuchen Sie eine Übung zur Verbesserung der eingebetteten Anwendung. Ändern Sie zum Beispiel die Farbe des Histogramms oder fügen Sie ein neues Eingabefeld hinzu. Experimentieren Sie, indem Sie den obigen Code bearbeiten.

5. Tipps zur Fehlersuche und Anpassung

Tipps zur Fehlerbehebung

• Probleme beim Laden von Assets:
  Wenn Ihre Anwendung nicht geladen wird, überprüfen Sie, ob die Erweiterung Shinylive korrekt hinzugefügt wurde und Ihr Dokument YAML enthält:

  filters:
    - shinylive

• Größe des Viewers:
  Wenn die Anwendung zu klein erscheint, passen Sie die Option viewerHeight an.

• Fehler in der App:
  Überprüfen Sie die Browserkonsole auf Fehler und stellen Sie sicher, dass alle erforderlichen Pakete installiert sind.

Tipps zur Anpassung

• Verwendung von bslib für das Styling:
  Nutzen Sie das bslib-Paket, um das Thema und Aussehen Ihrer App anzupassen.

• Layout-Anpassungen:
  Verwenden Sie Quarto-Layout-Container (z. B. column-page-inset), um die Anzeige von eingebetteten Anwendungen zu verbessern, insbesondere wenn der Editor und der Viewer nebeneinander angezeigt werden.

• Sichtbarkeit des Editors:
  Verwenden Sie die Option components, um den Code-Editor ein- oder auszuschalten, je nachdem, ob Sie Änderungen durch den Benutzer zulassen möchten.

6. Überlegungen zur Leistung

• Reaktive Effizienz:
  Optimieren Sie reaktive Ausdrücke innerhalb Ihrer Shiny-Anwendung, um eine reibungslose Leistung zu gewährleisten.

• Browser-Kompatibilität:
  Stellen Sie sicher, dass Ihre Anwendung in modernen Browsern läuft, die notwendige APIs wie OffscreenCanvas unterstützen.

• Asset-Caching:
  Die Shinylive-Erweiterung verwaltet die Zwischenspeicherung von Elementen automatisch. Wenn es zu Verzögerungen kommt, überprüfen Sie, ob die Assets korrekt zwischengespeichert werden.

Weiterführende Literatur

• Interaktive Code-Blöcke erklärt
  Lernen Sie, wie Sie interaktive Codeblöcke in Quarto Live erstellen und anpassen können.
• Laden und Verwenden von Paketen
  Entdecken Sie Techniken zum Installieren und Laden zusätzlicher R-Pakete.
• Shinylive für R
  Vertiefung des Shinylive-Ökosystems zur Ausführung von Shiny-Anwendungen im Browser.
• Zellenoptionen-Referenz
  Erforschen Sie die erweiterten Konfigurationsoptionen für interaktive Codeblöcke.

Schlussfolgerung

Die Einbettung von Shiny-Apps in Quarto-Dokumente mit der Shinylive-Erweiterung verwandelt Ihre statischen Seiten in interaktive Erlebnisse und ermöglicht es Ihnen, reaktive Inhalte live zu teilen, ohne dass Sie einen eigenen Server benötigen. Experimentieren Sie mit den mitgelieferten Beispielen und passen Sie Ihre Anwendung an die Bedürfnisse Ihres Projekts an.

Viel Spaß beim Programmieren und beim Integrieren interaktiver Shiny-Anwendungen in Ihre Quarto-Dokumente!

Weitere Artikel erkunden

Hinweis

Hier finden Sie weitere Artikel aus derselben Kategorie, die Ihnen helfen, tiefer in das Thema einzutauchen.