• Atualizado em Jun 23, 2025
  • 5 minuto(s) lido(s)
  • Pete Hartnett
  • Lianna Churchill
 Prev Next

Neste artigo, você aprenderá:

  • As diferentes partes do Tulip App Editor
  • Elementos visuais básicos que você pode adicionar a um aplicativo (também chamados de Widgets)
  • Como adicionar lógica básica usando botões
  • Como completar um aplicativo para registrar dados

This topic is featured in the Introduction to app building course in Tulip University.

Se você ainda está se familiarizando com o Tulip App Editor, este artigo é para você. Usaremos um exemplo de um aplicativo de instruções de trabalho para apresentar todas as principais ferramentas do App Editor.

O App Editor permite que você crie aplicativos para operadores sem escrever nenhum código.

Veja como ele se parece:

No editor de aplicativos, você pode criar uma série de etapas que são elementos visuais digitais de um processo.

Vídeo de introdução

Note

We're constantly improving the applications that come in new instances. If you joined Tulip recently, the apps in your instance might look different than what you see in images in this article. No worries, the ideas are the still same even if the content is a little different.

Detalhamento do editor de aplicativos

O App Editor é o local onde você cria e edita seu aplicativo. O diagrama a seguir mostra as diferentes partes que compõem o editor de aplicativos:

App Editor.png

  1. Adicionar etapa/grupo de etapas - Adicionar uma nova etapa ou grupo de etapas
  2. Painel de etapas/registros - Visualize as etapas por meio da guia de etapas ou alterne para a guia de registros para visualizar as tabelas usadas
  3. Espaço de trabalho - O espaço para criar a interface do aplicativo
  4. Adicionar um Asset Widget - Adicione uma forma, um ícone ou um logotipo ao seu aplicativo
  5. Adicionar um widget de botão - Adicione um botão ao seu aplicativo
  6. Adicionar um widget de entrada - Adicione um campo de entrada ao seu aplicativo
  7. Adicionar um widget de texto - Adicione uma caixa de texto ao seu aplicativo
  8. Incorporar um widget - Incorpore uma variedade de widgets, como imagens, análises, atributos de máquina e muito mais
  9. Adicionar widget de câmera - Adicione uma câmera comum ou um instantâneo de câmera de código de barras
  10. Traduzir - O Tulip Player traduzirá automaticamente o aplicativo para o idioma selecionado por meio do seu perfil Tulip.
  11. Create Snapshot (Criar instantâneo) - Salve uma versão atual do seu aplicativo, criando uma duplicata
  12. Testar - Teste seu aplicativo por meio do Modo Desenvolvedor
  13. Executar - Execute seu aplicativo no Tulip Player
  14. Publicar - Publique seu aplicativo
  15. Avançar/retroceder - Mova um elemento dentro do espaço de trabalho para frente ou para trás de outros elementos
  16. Painel lateral - Defina acionadores e componentes estilísticos na guia Widget, na guia Step e na guia App.

Usando a ferramenta de panorâmica e zoom, você pode:

  • Mover a superfície de edição do seu aplicativo
  • Aumentar ou diminuir o zoom

A Lista de etapas à esquerda mostra a lista de etapas, incluindo o Layout básico.

Layout básico

Todas as edições de formatação ou layout feitas no Layout Base serão automaticamente aplicadas a cada etapa individual do aplicativo.

Você pode alterar o layout básico em uma única etapa "desbloqueando" elementos individuais no painel de contexto à direita.

Saiba mais sobre os layouts de base aqui.

Etapas

Você pode clicar em uma etapa para visualizar os elementos que ela contém.

Clique com o botão direito do mouse em uma etapa para duplicá-la, agrupar etapas ou excluí-la.

Saiba mais sobre as etapas aqui.

Barra de ferramentas

A barra de ferramentas na parte superior da tela inclui elementos visuais que podem ser adicionados ao aplicativo. São elementos como formas, fotos, texto, vídeos e botões. Para adicionar um novo elemento visual ao aplicativo, basta clicar e arrastá-lo para o local desejado.

No lado direito da barra de ferramentas, há ferramentas adicionais que você pode usar para colocar os objetos em camadas no Tulip App Editor.

Painel de contexto

O painel de contexto no lado direito da tela é onde você lida com toda a formatação e lógica do aplicativo. Leia mais sobre a configuração do Widget aqui.

Há três guias:

  • Guia Etapa
  • Guia Aplicativo
  • Guia Widget

Guia Etapa

A guia Step mostra a você:

  • Opções de formatação para toda a etapa
  • Permite que você especifique o tempo de ciclo desejado para essa etapa
  • Permite que você redefina o layout especificado no Layout Base
  • Permite excluir a etapa atual
  • Permite que você crie uma lógica que será executada sempre que essa etapa for aberta ou fechada - falaremos mais sobre gatilhos um pouco mais tarde.

Guia App

A guia App:

  • Permite que você imprima as etapas no aplicativo
  • Permite ajustar o cronômetro de ciclo para todo o aplicativo
  • Mostra uma lista de todas as variáveis associadas a esse aplicativo
  • Permite especificar a resolução do aplicativo para que se ajuste à interface pretendida.
  • Permite adicionar comentários se vários administradores estiverem revisando as alterações
  • Permite que você crie uma lógica que será executada sempre que esse aplicativo for iniciado, concluído ou cancelado

Guia Widget

Ao clicar em um elemento no aplicativo, você verá outra guia no painel lateral chamada Guia Widget. É aqui que você ajusta o formato dos vários elementos visuais do aplicativo, juntamente com seu comportamento ao interagir com eles.

Adicionar lógica a um aplicativo

A lógica determina o que acontece no aplicativo quando o operador interage com ele. Para começar, vamos usar um simples botão com um acionador para navegar de uma etapa para outra.

  1. Clique em Buttons na barra de ferramentas e selecione Button.
  2. Arraste o botão para o local desejado.

  1. Adicione um rótulo ao botão e ajuste as opções de formato/cor usando o painel de contexto à direita.

  1. Para adicionar lógica ao botão, clique em + ao lado de Triggers no painel lateral.

Os acionadores permitem que você adicione lógica aos seus aplicativos sem precisar usar nenhum código. O acionador usa uma sequência when, if, then, else.

O acionador que criaremos aqui tem a seguinte lógica:

Quando: O botão é pressionado

Then (então): A hora atual é salva em uma variável

Transição: Ir para a etapa → Próximo.

  1. Clique em Save (Salvar).

Esse botão move o usuário para a próxima etapa. Normalmente, é recomendável adicionar um botão que permita aos usuários navegar para a etapa anterior também.

Depois de criar a lógica básica do aplicativo, você pode clicar em Testar no canto superior direito. Isso iniciará o aplicativo no modo de desenvolvedor, para que você possa testá-lo.

Concluir um aplicativo e registrar dados

Um botão Concluir para que a Tulip registre todos os dados do aplicativo associados a cada operador.

Neste exemplo, vamos adicionar outro botão na última etapa do aplicativo.

  1. Selecione a última etapa de seu aplicativo.
  2. Clique em Botões e selecione Concluir.
  3. Arraste o novo botão para a posição desejada.

Leitura adicional

Use estes guias passo a passo para criar um aplicativo completo usando esses conceitos:

Encontrou o que estava procurando?

Você também pode acessar community.tulip.co para postar sua pergunta ou ver se outras pessoas tiveram uma pergunta semelhante!