# 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
## Barra de ferramentas A barra de ferramentas é composta por uma barra superior e uma barra lateral esquerda.
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.
Confira [Design UI do aplicativo](https://pocketblocks.pedroza.dev/portugues-brasil/construcao-de-aplicativos/design-app-ui) 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 empara expandir.
## 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.
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**. ![](https://3319212993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fbz5pg8HuItSzRC8Qjkc6%2Fuploads%2Fgit-blob-1950caf7abe4060c084dafe558fb7223b5e001de%2F07.png?alt=media) ![](https://3319212993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fbz5pg8HuItSzRC8Qjkc6%2Fuploads%2Fgit-blob-d374ffcb88b8da7e78dedd864e152a2d04216b68%2F08.png?alt=media) Quando um componente é selecionado na tela, a guia **Propriedades** será ativada automaticamente e exibirá as propriedades desse componente.