Usando Shiny com Quarto para interatividade

Introdução

Agora, aplicativos Shiny interativos podem ser incorporados diretamente em seus documentos Quarto, permitindo que você combine texto narrativo com aplicativos reativos e ao vivo que são executados inteiramente no navegador. Com a extensão Quarto Shinylive e os componentes padrão do Shiny, você pode criar, exibir e interagir com aplicativos Shiny sem precisar de um servidor dedicado. Este tutorial fornece um passo a passo detalhado sobre como incorporar um aplicativo Shiny, personalizar sua aparência e solucionar problemas comuns.

1. Pré-requisitos

Antes de começar, certifique-se de ter o seguinte:

• Quarto instalado: Baixe e instale o Quarto em quarto.org.

• Shinylive Extensão Quarto: Adicione a extensão Shinylive ao seu projeto executando:

  quarto add quarto-ext/shinylive

• Configurar filtros: No YAML do seu documento (ou no seu _quarto.yml), inclua o filtro Shinylive:

  filters:
    - shinylive

• Shiny e bslib: Certifique-se de que os pacotes shiny e bslib estejam instalados no R.

2. Criando um aplicativo Shiny básico incorporado

Abaixo está um exemplo de um aplicativo Shiny simples incorporado diretamente em um documento Quarto usando um bloco de código {shinylive-r}. Este aplicativo exibe um histograma do conjunto de dados mtcars com um controle deslizante interativo para ajustar o número de compartimentos.

Passo a passo

1. Defina a interface do usuário:
   Use page_sidebar() para criar um layout com uma barra lateral para entradas e um painel principal para saídas.

2. Crie entradas:
   Inclua um sliderInput() na barra lateral para selecionar o número de compartimentos para o histograma.

3. Exibir saída:
   Use plotOutput() no painel principal para mostrar o histograma.

4. Definir lógica do servidor:
   Na função do servidor, use renderPlot() para calcular o histograma com base na entrada do controle deslizante.

5. Execute o aplicativo:
   Envolva as definições da interface do usuário e do servidor em uma chamada para shinyApp().

Exemplo básico de aplicativo Shiny R incorporado

Código-fonte

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

Nota

• standalone: true: Esta opção indica que este bloco de código representa um aplicativo Shiny completo.
• viewerHeight: 650: Esta opção define a altura do visualizador do aplicativo.

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

Personalizando a experiência Shiny incorporada

Se você deseja exibir o editor de código junto com o aplicativo Shiny em execução (permitindo que os usuários modifiquem e executem novamente o aplicativo), você pode incluir componentes adicionais:

Código-fonte

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

Nota

• Usar components: [editor, viewer] exibe o código-fonte do aplicativo e o aplicativo em execução.
• Você também pode ajustar o layout usando #| layout: vertical se preferir que o editor seja empilhado acima do visualizador.

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

Nota

Este exemplo exibe o editor de código-fonte acima do aplicativo em execução, permitindo modificações de código em tempo real.

Exercício interativo

Experimente um exercício para aprimorar o aplicativo incorporado. Por exemplo, modifique a cor do histograma ou adicione um novo controle de entrada. Experimente editando o código acima.

5. Dicas de solução de problemas e personalização

Dicas de solução de problemas

• Problemas de carregamento de ativos:
  Se seu aplicativo não carregar, verifique se a extensão Shinylive foi adicionada corretamente e se seu documento YAML inclui:

  filters:
    - shinylive

• Tamanho do visualizador:
  Se o aplicativo parecer muito pequeno, ajuste a opção viewerHeight.

• Erros no aplicativo:
  Verifique se há erros no console do navegador e certifique-se de que todos os pacotes necessários estejam instalados.

Dicas de personalização

• Usando bslib para estilizar:
  Aproveite o pacote bslib para personalizar o tema e a aparência do seu aplicativo.

• Ajustes de layout:
  Use contêineres de layout Quarto (por exemplo, column-page-inset) para melhorar a exibição de aplicativos incorporados, especialmente quando o editor e o visualizador são exibidos lado a lado.

• Visibilidade do editor:
  Use a opção components para ativar ou desativar o editor de código, dependendo se você deseja permitir modificações do usuário.

6. Considerações sobre desempenho

• Eficiência reativa:
  Otimize expressões reativas dentro do seu aplicativo Shiny para garantir um desempenho suave.

• Compatibilidade com o navegador:
  Certifique-se de que seu aplicativo seja executado em navegadores modernos que suportem APIs necessárias, como OffscreenCanvas.

• Cache de ativos:
  A extensão Shinylive gerencia o cache de ativos automaticamente. Se ocorrerem atrasos, verifique se os recursos estão armazenados corretamente no cache.

Leitura adicional

• Blocos de código interativo explicados
  Aprenda a criar e personalizar blocos de código interativos no Quarto Live.
• Carregando e usando pacotes
  Descubra técnicas para instalar e carregar pacotes R adicionais.
• Shinylive para R
  Mergulhe mais fundo no ecossistema Shinylive para executar aplicativos Shiny no navegador.
• Referência de opções de células
  Explore as opções de configuração avançadas disponíveis para blocos de código interativos.

Conclusão

A incorporação de aplicativos Shiny em documentos Quarto usando a extensão Shinylive transforma suas páginas estáticas em experiências interativas, permitindo que você compartilhe conteúdo reativo ao vivo sem a necessidade de um servidor dedicado. Experimente os exemplos fornecidos e personalize seu aplicativo para atender às necessidades do seu projeto.

Boa codificação e aproveite a integração de aplicativos Shiny interativos em seus documentos Quarto!

Explore mais artigos

Nota

Aqui estão mais artigos da mesma categoria para ajudá-lo a se aprofundar no tópico.