# Editor de aplicativo

No PocketBlocks, o editor de aplicativos é onde você monta componentes, cria funções javascript para interagir com os dados do PocketBase e publica seus aplicativos. É composto por cinco áreas:

1. Barra de ferramentas
2. Canvas
3. Navegador de dados
4. Editor de consultas
5. Painel de componentes e propriedades

<figure><img src="/files/BSLrqb0nlaqAJIdKomxR" alt=""><figcaption></figcaption></figure>

## Barra de ferramentas

A barra de ferramentas é composta por uma barra superior e uma barra lateral esquerda.

<figure><img src="/files/BSLrqb0nlaqAJIdKomxR" alt=""><figcaption></figcaption></figure>

Na barra superior, você pode configurar seu aplicativo da seguinte forma:

* Alterar o nome do aplicativo
* Exportar para um arquivo JSON
* Controlar a visibilidade de outras áreas
* Compartilhe seu aplicativo
* Visualize e implante seu aplicativo
* Verifique as versões do histórico

Na barra lateral esquerda, algumas opções estão disponíveis como segue:

* Mostrar ou ocultar o **Navegador de dados**
* Defina o tamanho da tela e o tema do aplicativo
* Gerenciar scripts e estilos CSS
* Iniciar tutorial para editor de aplicativos
* Mostrar atalhos de teclado

## Canvas

O Canvas no centro do editor é onde você projeta e vê a UI geral. Arraste e solte componentes na tela, vincule-os a manipuladores de dados e eventos e monte-os para criar um aplicativo poderoso e agradável.

<figure><img src="/files/BVfzLy8GyEX9aKMvxsWk" alt=""><figcaption></figcaption></figure>

Confira [Design UI do aplicativo](/portugues-brasil/construcao-de-aplicativos/design-app-ui.md) para práticas de layout de UI.

## Navegador de dados

O navegador de dados no painel esquerdo contém as seções **Consultas**, **Componentes** e **Globais**. Aqui você pode inspecionar os dados em uma estrutura em árvore. Por exemplo, para verificar os dados retornados de uma consulta ou componente específico, encontre seu item na seção pertencente e clique em<img src="/files/ao72Ucd6PAwAi6Fcez47" alt="" data-size="line">para expandir.

<figure><img src="/files/MZ7D6ZpscnY0I1YswiiP" alt=""><figcaption></figcaption></figure>

## Editor de consultas

O editor de consultas na parte inferior consiste em duas seções: lista de consultas (com as guias **Consultas** e **Metadados**) à esquerda e configurações de consulta (com **Geral**, **Notificação** e **Guias Avançadas**) à direita. Crie consultas para interagir com a API Pocketbase aqui.

<figure><img src="/files/1XI7xjv6kewOGJ70x12b" alt=""><figcaption></figcaption></figure>

Você pode acessar o SDK do Pocketbase através do objeto **window\.pb**.

## Painel de componentes e propriedades

O painel de componentes e propriedades está localizado à direita da janela. Arraste os componentes para a tela a partir da guia **Inserir** e edite as propriedades dos componentes na guia **Propriedades**.

![](/files/bZBFYgQANRjiLSnIOyHZ) ![](/files/NaxrJ75L7f9GivBbTXlC)

Quando um componente é selecionado na tela, a guia **Propriedades** será ativada automaticamente e exibirá as propriedades desse componente.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://pocketblocks.pedroza.dev/portugues-brasil/construcao-de-aplicativos/app-editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.