# Preparar uma app para QA

URL: /guias/preparar-app

Da criação do projeto ao primeiro report de teste na triagem, com as etapas de admin e de dev.

Ao fim, sua app mostra o botão do Mira e um report enviado por ela aparece na triagem do projeto.

Duas pessoas percorrem esta trilha. O **admin** configura o projeto no dashboard e o **dev** mexe no código da app. Cada etapa diz quem faz.

## Pré-requisitos [#pré-requisitos]

- Uma conta de administrador no Mira, ou de Mantenedor do projeto para as etapas 2 e 3.
- Uma app que o dev consegue alterar e publicar. Com bundler, use o pacote npm. Sem bundler, a tag de script.
- Chrome ou Edge. O widget foi testado nesses dois.

## Passos [#passos]

<Steps>
<Step>

### Criar o projeto [#criar-o-projeto]

**Quem faz:** admin.

Em **Administração do Mira**, **Projetos**, clique em **Novo projeto**. Informe o **Nome do projeto**, a **URL do app** e o **Nome do Ambiente** (`Produção` por padrão) e clique em **Criar projeto**. Em **Mais opções** você escolhe os Mantenedores. O dashboard abre o [Guia de configuração](/administrar/projetos#guia-de-configuração).

Resultado: o projeto existe com uma chave como `loja-demo-a3f92c1b`, e o primeiro ambiente já tem a origem da URL informada. Detalhes em [Projetos](/administrar/projetos).

</Step>
<Step>

### Conferir o ambiente e as origens [#conferir-o-ambiente-e-as-origens]

**Quem faz:** admin.

Em **Configurações do projeto**, **Ambientes**, confira a origem do primeiro ambiente. Para outro ambiente, como `staging`, clique em **Novo ambiente**, dê o nome e liste as origens da app, uma por linha. Copie o **ID do projeto** em **Geral** e passe ao dev.

<Figure src="/images/integrate-environments.png" alt="Lista de ambientes do projeto com as origens de cada um" caption="O ambiente aparece com as origens." />

Resultado: o ambiente está na lista. O formato das origens está em [Ambientes e origens](/administrar/ambientes).

</Step>
<Step>

### Liberar a CSP [#liberar-a-csp]

**Quem faz:** dev.

Se a app tem Content-Security-Policy, adicione a URL do Mira em `connect-src` e em `script-src`.

Resultado: o navegador deixa de bloquear as chamadas ao Mira. Sem CSP, esta etapa não pede nada. Veja [Integrar uma app](/desenvolvedores/integrar#liberar-a-csp).

</Step>
<Step>

### Instalar o bridge e ativar o widget [#instalar-o-bridge-e-ativar-o-widget]

**Quem faz:** dev.

O passo **Captura e primeiro report** do guia mostra o código já com a URL da instância, em duas abas. Em **npm**, instale o `@mira/bridge` pela URL da instância e crie o `bootstrap.ts` que chama `mira.init()` antes de carregar a app. Em **Script**, para app sem bundler, cole a tag `<script src=".../widget/v1/mira.js">` e o `mira.init` no `<head>`, antes dos scripts da app. O código de cada ambiente está em [Integrar uma app](/desenvolvedores/integrar#instalar-o-bridge).

Resultado: com a app rodando numa origem cadastrada, o botão flutuante do Mira aparece no canto da página.

<Figure src="/images/integrate-widget-button.png" alt="Botão flutuante do Mira no canto de uma página" caption="O botão do widget na app." />

</Step>
<Step>

### Enviar um report de teste [#enviar-um-report-de-teste]

**Quem faz:** dev.

Clique no botão. Na primeira vez, o widget pede o login: clique em **Entrar**, aprove o código mostrado na janela do Mira e confirme o projeto e o ambiente. O report abre num diálogo com o tipo em **Bug**; preencha o título e clique em **Criar**.

Resultado: o painel troca o formulário por **Report enviado**.

<Figure src="/images/integrate-report-sent.png" alt="Confirmação Report enviado no widget" caption="O Mira confirmou o recebimento." />

</Step>
<Step>

### Conferir na triagem [#conferir-na-triagem]

**Quem faz:** admin.

Abra **Reports** no projeto.

Resultado: o report enviado aparece na lista com o status **Backlog**, no ambiente certo.

<Figure src="/images/integrate-report-in-triage.png" alt="Report novo na lista de triagem" caption="O report do widget na triagem do projeto." />

</Step>
</Steps>

## Conferir que deu certo [#conferir-que-deu-certo]

Abra o report e confira que ele traz a URL da página e os anexos automáticos de console e rede. Se faltam, confira se o `mira.init()` não passa `capture: false`. As opções estão em [SDK](/desenvolvedores/sdk#opções-do-widget).

## Problemas comuns [#problemas-comuns]

| Sintoma | O que fazer |
| --- | --- |
| O botão não aparece | Confira se `VITE_MIRA_URL` está preenchida no build e se o `bootstrap.ts` é o primeiro import |
| O login diz que não há ambiente para a origem | Cadastre exatamente a origem da barra de endereço, com a porta |
| A janela de login não abre | Permita popups para a app ou abra o endereço mostrado no widget |
| Erro de CSP no console | Inclua o host do Mira em `connect-src` e `script-src` |
| O console mostra `widget indisponível na instância` | A CSP bloqueia `script-src` do Mira, ou a instância não serve `/widget/v1/widget.js` |

A lista completa está em [Integrar uma app](/desenvolvedores/integrar#problemas-comuns).

## Próximos passos [#próximos-passos]

- [Ativar a captura de erros em produção](/guias/erros-em-producao)
- [Triar a semana com o digest](/guias/triar-com-digest)
- [Administrar](/administrar)