Utiliser Shiny dans Quarto pour l’interactivité

Introduction

Les applications interactives Shiny peuvent désormais être intégrées directement dans vos documents Quarto - ce qui vous permet de combiner un texte narratif avec des apps réactives en direct qui s’exécutent entièrement dans le navigateur. Avec l’extension Shinylive Quarto et les composants Shiny standard, vous pouvez construire, afficher et interagir avec des applications Shiny sans avoir besoin d’un serveur dédié. Ce didacticiel explique en détail comment intégrer une application Shiny, personnaliser son apparence et résoudre les problèmes courants.

1. Prérequis

Avant de commencer, assurez-vous que vous avez les éléments suivants:

• Quarto installé: Téléchargez et installez Quarto depuis quarto.org.

• Shinylive dans Quarto Extension: Ajoutez l’extension Shinylive à votre projet en exécutant:

  quarto add quarto-ext/shinylive

• Configurer les filtres: Dans le YAML de votre document (ou votre _quarto.yml), incluez le filtre Shinylive:

  filters:
    - shinylive

• Shiny et bslib: Assurez-vous que les packages shiny et bslib sont installés dans R.

2. Créer une application Shiny embarquée de base

En utilisant un bloc de code {shinylive-r}, voici un exemple d’une application Shiny simple intégrée directement dans un document Quarto. Cette application affiche un histogramme de la donnée mtcars avec un curseur interactif pour ajuster le nombre de bacs.

Visite guidée étape par étape

1. Définir l’interface utilisateur:
   Utiliser page_sidebar() pour créer une mise en page avec une barre latérale pour les entrées et un panneau principal pour les résultats.

2. Créer des entrées:
   Inclure un sliderInput() dans la barre latérale pour sélectionner le nombre de bins pour l’histogramme.

3. Afficher le résultat:
   Utilisez plotOutput() dans le panneau principal pour afficher l’histogramme.

4. Définir la logique du serveur:
   Dans la fonction serveur, utilisez renderPlot() pour calculer l’histogramme basé sur l’entrée du curseur.

5. Exécuter l’application:
   Enveloppez les définitions de l’interface utilisateur et du serveur dans un appel à shinyApp().

Exemple d’application Shiny R embarquée de base

Source Code

```{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)
```

Note

• standalone: true: Cette option indique que ce bloc de code représente une application Shiny complète.
• viewerHeight: 650: Cette option configure la hauteur du viewer de l’application.

#| '!! 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)

Personnaliser l’expérience Shiny intégrée

Si vous souhaitez afficher l’éditeur de code en même temps que l’application Shiny en cours d’exécution (ce qui permet aux utilisateurs de modifier et de réexécuter l’application), vous pouvez inclure des composants supplémentaires:

Source Code

```{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)
```

Note

• En utilisant components : [editor, viewer] affiche à la fois le code source de l’application et l’application en cours d’exécution.
• Vous pouvez également ajuster la disposition en utilisant #| layout: vertical si vous préférez que l’éditeur soit empilé au-dessus du viewer.

#| '!! 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)

Note

Cet exemple affiche l’éditeur de code source au-dessus de l’application en cours d’exécution, ce qui permet de modifier le code en temps réel.

Exercice interactif

Essayer un exercice pour améliorer l’application intégrée. Par exemple, modifier la couleur de l’histogramme ou ajouter un nouveau contrôle d’entrée. Expérimentez en éditant le code ci-dessus.

5. Dépannage et conseils de personnalisation

Conseils de dépannage

• Problèmes de chargement des actifs:
  Si votre app ne se charge pas, vérifiez que l’extension Shinylive est correctement ajoutée et que votre document YAML inclut:

  filters:
    - shinylive

• Taille du viewer:
  Si l’application semble trop petite, ajuster l’option viewerHeight.

• Erreurs dans l’application:
  Vérifiez la console du navigateur pour les erreurs et assurez-vous que tous les packages requis sont installés.

Conseils de personnalisation

• Utiliser bslib pour le style:
  Tirez parti du package bslib pour personnaliser le thème et l’apparence de votre application.

• Ajustements de la mise en page:
  Utiliser les conteneurs de mise en page dans Quarto (par exemple, column-page-inset) pour améliorer l’affichage des applications embarquées, en particulier lorsque l’éditeur et le viewer sont affichés côte à côte.

• Visibilité de l’éditeur:
  Utilisez l’option components pour activer ou désactiver l’éditeur de code, selon que vous souhaitez ou non autoriser les modifications par l’utilisateur.

6. Considérations sur les performances

• Efficacité réactive:
  Optimiser les expressions réactives au sein de votre application Shiny pour garantir des performances optimales.

• Compatibilité avec les navigateurs:
  Assurez-vous que votre application fonctionne dans les navigateurs modernes qui supportent les APIs nécessaires comme OffscreenCanvas.

• Mise en cache des actifs:
  L’extension Shinylive gère automatiquement la mise en cache des actifs. Si vous constatez des retards, vérifiez que les ressources sont correctement mises en cache.

Plus d’informations

• Explication des blocs de code interactifs
  Apprenez à créer et à personnaliser des blocs de code interactifs dans Quarto Live.
• Chargement et utilisation des packages
  Découvrez les techniques d’installation et de chargement de packages R supplémentaires.
• Shinylive pour R
  Plongez dans l’écosystème Shinylive pour exécuter des applications Shiny dans le navigateur.
• Référence des options de cellule
  Explorer les options de configuration avancées disponibles pour les blocs de code interactifs.

Conclusion

Intégrer des applications Shiny dans des documents Quarto en utilisant l’extension Shinylive transforme vos pages statiques en expériences interactives - vous permettant de partager du contenu réactif en direct sans avoir besoin d’un serveur dédié. Expérimentez avec les exemples fournis et personnalisez votre application pour répondre aux besoins de votre projet.

Bon codage et bonne intégration des applications interactives Shiny dans vos documents Quarto!

Explorer d’autres articles

Note

Voici d’autres articles de la même catégorie pour vous aider à approfondir le sujet.