Editor de aplicativos

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 concluir 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 Editor de Aplicativos do Tulip, este artigo é para você. Usaremos o exemplo de um aplicativo de instruções de trabalho para apresentar todas as principais ferramentas do Editor de Aplicativos.

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

Veja como ele se parece:

No App Editor, você pode criar uma série de etapas que representam os 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 Editor de Aplicativos é 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

Adicionar Etapa/Grupo de Etapas — Adicione uma nova etapa ou um novo grupo de etapas
Painel de etapas/registros — Visualize suas etapas na guia “Etapas” ou alterne para a guia “Registros” para visualizar as tabelas utilizadas
Área de trabalho — O espaço para criar a interface do seu aplicativo
Adicionar um widget de recurso — Adicione uma forma, um ícone ou um logotipo ao seu aplicativo
Adicionar um widget de botão — Adicione um botão ao seu aplicativo
Adicionar um widget de entrada – Adicione um campo de entrada ao seu aplicativo
Adicionar um widget de texto – Adicione uma caixa de texto ao seu aplicativo
Incorporar um widget – Incorpore diversos widgets, como imagens, análises, atributos de máquinas e muito mais
Adicionar widget de câmera – Adicione uma foto tirada com uma câmera comum ou com uma câmera de código de barras
Traduzir — O Tulip Player traduzirá automaticamente o aplicativo para o idioma selecionado por meio do seu perfil do Tulip
Criar instantâneo - Salve uma versão atual do seu aplicativo, criando uma cópia
Testar — Teste seu aplicativo no Modo Desenvolvedor
Executar – Execute seu aplicativo no Tulip Player
Publicar – Publique seu aplicativo
Avançar/Voltar – Mova um elemento dentro da área de trabalho para a frente ou para trás de outros elementos
Painel lateral - Defina gatilhos e componentes estilísticos nas guias “Widget”, “Etapa” e “Aplicativo”.

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

Mover a área de edição do seu aplicativo
Ampliar ou reduzir

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

Layout básico

Quaisquer edições de formatação ou layout feitas no Layout Básico serão aplicadas automaticamente a cada etapa individual do aplicativo.

Você pode alterar o layout básico de uma única etapa “desbloqueando” elementos individuais no Painel de Contexto à direita.

Saiba mais sobre layouts básicos 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 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 até o local desejado.

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

Painel de contexto

O Painel de Contexto, no lado direito da tela, é onde você gerencia toda a formatação e a lógica do aplicativo. Saiba mais sobre a configuração de widgets aqui.

Existem três guias:

Guia “Etapa”
Guia “App”
Guia “Widget”

Guia “Etapa”

A aba “Etapa” mostra:

Opções de formatação para toda a etapa
Permite especificar o tempo de ciclo alvo para esta etapa
Permite redefinir para o layout especificado no “Layout de base”
Permite excluir a etapa atual
Oferece a possibilidade de criar uma lógica que será executada sempre que esta etapa for aberta ou fechada — falaremos mais sobre Gatilhos um pouco mais adiante.

Guia “App”

A guia “App”:

Permite imprimir as etapas do aplicativo
Permite ajustar o temporizador de ciclo para todo o aplicativo
Mostra uma lista de todas as variáveis associadas a este aplicativo
Permite especificar a resolução do aplicativo para se adequar à interface desejada.
Permite adicionar comentários caso vários administradores estejam revisando as alterações
Oferece a possibilidade de criar uma lógica que será executada sempre que este aplicativo for iniciado, concluído ou cancelado

Guia “Widget”

Ao clicar em um elemento no aplicativo, será exibida outra aba no painel lateral chamada “Aba Widget”. É aqui que você ajusta o formato dos diversos elementos visuais do aplicativo, bem como seu comportamento ao ser interagido.

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 botão simples com um Gatilho para navegar de uma etapa para outra.

Clique em “Botões ” na barra de ferramentas e selecione “Botão”.
Arraste o botão para o local desejado.

Adicione um rótulo ao botão e ajuste as opções de formato e cor usando o Painel de Contexto à direita.

Para adicionar lógica ao botão, clique no sinal de mais (+) ao lado de “Gatilhos” no painel lateral.

Os gatilhos permitem que você adicione lógica às suas aplicações sem precisar usar nenhum código. Os gatilhos utilizam uma sequência “quando, se, então, senão ”.

O gatilho que vamos criar aqui tem a seguinte lógica:

Quando: O botão é pressionado

Então: A hora atual é salva em uma variável

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

Clique em Salvar.

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

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

Conclua um aplicativo e registre os dados

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

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

Selecione a última etapa do seu aplicativo.
Clique em “Botões” e selecione “Concluir”.
Arraste o novo botão até a posição desejada.

Leitura complementar

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

Você encontrou o que estava procurando?

Você também pode acessar community.tulip.co para postar sua dúvida ou ver se outras pessoas já tiveram uma dúvida semelhante!