Incorporando aplicativos Python Shinylive em documentos Quarto

Introdução

Aplicativos Shiny interativos e sem servidor criados com Python podem ser integrados perfeitamente aos seus documentos Quarto, permitindo que você enriqueça suas postagens de blog e artigos com conteúdo dinâmico e ao vivo. Usando a extensão Quarto Shinylive, você pode incorporar esses aplicativos para que os usuários possam interagir com eles diretamente em seu site.

1. Pré-requisitos

Antes de incorporar um aplicativo Python Shinylive em seu documento Quarto, certifique-se de ter o seguinte:

• Quarto instalado: Baixe em quarto.org.

• Shinylive Pacote Python: Instale-o a partir do PyPI usando:

  pip install shinylive --upgrade

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

  quarto add quarto-ext/shinylive

• Configuração do documento YAML: No seu documento (ou _quarto.yml), inclua o filtro shinylive:

  filters:
    - shinylive

2. Incorporando um aplicativo Python Shinylive básico

Para incorporar um aplicativo Python Shinylive, use um bloco de código marcado com {shinylive-python}. Inclua a opção #| standalone: true para indicar que o código representa um aplicativo completo.

Exemplo: aplicativo ‘Hello Shinylive Python’

Abaixo está um exemplo de um aplicativo Shiny interativo básico para Python incorporado em um documento Quarto:

Código-fonte

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

from shiny import App, ui, render
import numpy as np
import matplotlib.pyplot as plt

# Defina a interface do usuário
app_ui = ui.page_fluid(
    ui.input_slider("bins", "Number of bins:", 5, 30, 10, step=1),
    ui.output_plot("histPlot")
)

# Defina a lógica do servidor
def server(input, output, session):
    @output
    @render.plot
    def histPlot():
        # Gere dados aleatórios para demonstração
        x = np.random.normal(0, 1, 1000)
        # Crie compartimentos com base na entrada do controle deslizante
        bins = np.linspace(x.min(), x.max(), input.bins() + 1)
        plt.figure(figsize=(8, 4))
        plt.hist(x, bins=bins, color="skyblue", edgecolor="white")
        plt.title("Interactive Histogram of Random Data")
        plt.xlabel("Value")
        plt.ylabel("Frequency")
        plt.show()

# Crie o aplicativo Shinylive
app = App(app_ui, server)
```

Resultados

Nota

Ao executar o bloco de código, um aplicativo interativo aparecerá diretamente no seu documento. Os usuários podem ajustar o controle deslizante para atualizar o histograma em tempo real.

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

from shiny import App, ui, render
import numpy as np
import matplotlib.pyplot as plt

# Defina a interface do usuário
app_ui = ui.page_fluid(
    ui.input_slider("bins", "Number of bins:", 5, 30, 10, step=1),
    ui.output_plot("histPlot")
)

# Defina a lógica do servidor
def server(input, output, session):
    @output
    @render.plot
    def histPlot():
        # Gere dados aleatórios para demonstração
        x = np.random.normal(0, 1, 1000)
        # Crie compartimentos com base na entrada do controle deslizante
        bins = np.linspace(x.min(), x.max(), input.bins() + 1)
        plt.figure(figsize=(8, 4))
        plt.hist(x, bins=bins, color="skyblue", edgecolor="white")
        plt.title("Interactive Histogram of Random Data")
        plt.xlabel("Value")
        plt.ylabel("Frequency")
        plt.show()

# Crie o aplicativo Shinylive
app = App(app_ui, server)

3. Personalizar o aplicativo incorporado

Você pode aprimorar o aplicativo incorporado: - Exibir o editor de código:
Adicione #| components: [editor, viewer] para mostrar o código-fonte e o aplicativo em execução. - Alterar o layout:
Use #| layout: vertical para empilhar o editor e o visualizador verticalmente. - Ajustar a altura do visualizador:
Defina #| viewerHeight: 420 (ou seu valor preferido) para controlar a área de exibição do aplicativo.

Exemplo: aplicativo editável

Código-fonte

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

from shiny import App, ui, render
import numpy as np
import matplotlib.pyplot as plt

app_ui = ui.page_fluid(
    ui.input_slider("bins", "Number of bins:", 5, 30, 10, step=1),
    ui.output_plot("histPlot")
)

def server(input, output, session):
    @output
    @render.plot
    def histPlot():
        x = np.random.normal(0, 1, 1000)
        bins = np.linspace(x.min(), x.max(), input.bins() + 1)
        plt.figure(figsize=(8, 4))
        plt.hist(x, bins=bins, color="skyblue", edgecolor="white")
        plt.title("Interactive Histogram of Random Data")
        plt.xlabel("Value")
        plt.ylabel("Frequency")
        plt.show()

app = App(app_ui, server)
```

Nota

Este exemplo fornece um editor e um visualizador lado a lado, permitindo que os usuários modifiquem o código e vejam os resultados instantaneamente.

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

from shiny import App, ui, render
import numpy as np
import matplotlib.pyplot as plt

app_ui = ui.page_fluid(
    ui.input_slider("bins", "Number of bins:", 5, 30, 10, step=1),
    ui.output_plot("histPlot")
)

def server(input, output, session):
    @output
    @render.plot
    def histPlot():
        x = np.random.normal(0, 1, 1000)
        bins = np.linspace(x.min(), x.max(), input.bins() + 1)
        plt.figure(figsize=(8, 4))
        plt.hist(x, bins=bins, color="skyblue", edgecolor="white")
        plt.title("Interactive Histogram of Random Data")
        plt.xlabel("Value")
        plt.ylabel("Frequency")
        plt.show()

app = App(app_ui, server)

4. Dicas e melhores práticas

• Garantir a instalação da extensão:
  Confirme se a extensão Quarto Shinylive foi adicionada ao seu projeto e se o filtro shinylive está incluído no cabeçalho YAML.
• Otimize as configurações do visualizador:
  Use viewerHeight e opções de layout para adaptar a exibição do aplicativo ao design do seu documento.
• Teste localmente:
  Sempre visualize seu aplicativo incorporado localmente antes de publicar seu documento.
• Verificar caminhos de ativos:
  Certifique-se de que todos os caminhos dos ativos estejam configurados corretamente para que o aplicativo carregue sem problemas.

Leitura adicional

• Blocos de código interativo explicados
  Aprenda a criar e personalizar blocos de código interativos no Quarto Live.
• Instalando e configurando Shinylive para Python
  Instruções detalhadas para instalar o pacote Python shinylive e configurar o gerenciamento de ativos.
• Criando um aplicativo Python Shinylive básico
  Crie e exporte seu primeiro aplicativo Python Shinylive.
• Personalização avançada e solução de problemas para Shinylive (Python)
  Explore tópicos avançados para ajustar e solucionar problemas em seus aplicativos Shinylive.

Conclusão

A incorporação de aplicativos Python Shinylive em seus documentos Quarto permite oferecer uma experiência dinâmica e interativa diretamente em suas postagens de blog ou artigos. Seguindo este tutorial, você aprendeu como integrar um aplicativo Shinylive totalmente funcional, personalizar sua aparência e fornecer uma experiência interativa perfeita para seus leitores. Continue explorando recursos de leitura adicionais para aprofundar seus conhecimentos e aprimorar seu conteúdo interativo.

Explore mais artigos

Nota

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