Introdução ao editor do aplicativo Tulip

Objetivo

Neste artigo, você vai aprender:

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

:::(Info) (Nota:) Este tópico é apresentado no curso"Introdução ao App Building" na Universidade Tulip::::

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

Antes de começarmos, aqui vai um rápido lembrete: O App Editor permite que você crie aplicativos para operadores sem escrever nenhum código.

Aqui está o que parece:

O App Editor permite criar uma série de etapas, ou telas que os operadores podem usar dentro de um aplicativo. As Etapas também podem ser organizadas em Grupos de Etapas para uma melhor usabilidade.

:::(Warning) (OBSERVAÇÃO:)Estamos constantemente melhorando as aplicações que vêm em novas instâncias. Se você ingressou recentemente na Tulip, os aplicativos em sua instância podem ser diferentes do que você vê nas imagens deste artigo. Não se preocupe. As idéias são as mesmas, mesmo que o conteúdo seja um pouco diferente::::

Uma rápida visão geral do editor de aplicativos da Tulip

A Lista de Passos à esquerda mostra a lista de passos incluindo o Layout Base.

{altura="" largura="300"}

Qualquer formatação ou edição de layout que você fizer no Layout Base será automaticamente aplicada a cada etapa individual do aplicativo.

{altura="" largura="300"}

Você pode alterar o Layout Base dentro de cada Passo "desbloqueando" elementos individuais no Painel de Contexto do lado direito.

{altura="" largura="500"}

Usando 'clique com o botão direito' você pode Duplicar, Agrupar Passos, ou Excluir.

{altura="" largura="300"}

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

{altura="" largura="300"}

A barra de ferramentas na parte superior da tela inclui elementos visuais que podem ser adicionados ao aplicativo. Estes 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 colocar os objetos no Tulip App Editor.

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 abas:

• Aba Passo
• Aba App
• Aba Widget

A Aba Passo mostra a você:

• Opções de formatação para toda a Etapa
• Permite especificar o tempo de ciclo alvo para esta etapa
• Permite que você volte para o layout especificado no Layout Base
• Permite apagar a etapa atual
• Dá a você a capacidade de construir a lógica que será executada sempre que esta etapa for aberta ou fechada - falaremos mais sobre Gatilhos um pouco mais tarde.

{altura="" largura="300"}

A ficha de aplicação:

• Permite imprimir as etapas do aplicativo
• Permite ajustar o temporizador do ciclo para todo o aplicativo
• Mostra uma lista de todas as Variáveis associadas a este aplicativo
• Permite que você especifique a resolução do aplicativo para se adequar à interface pretendida.
• Permite adicionar comentários se vários administradores estiverem revendo mudanças
• Dá a você a capacidade de construir a lógica que será executada sempre que este aplicativo for iniciado, concluído ou cancelado

{altura="" largura="300"}

Clicando em um elemento do aplicativo, será exposta outra aba no painel de contexto chamado Widget Tab. Aqui é onde você vai para ajustar o formato dos vários elementos visuais do aplicativo, juntamente com seu comportamento quando interagido com ele.

{altura="" largura="300"}

Usando a ferramenta pan e zoom, você pode:

• Mover a superfície de edição de sua aplicação
• Aumentar ou diminuir o zoom

Adicionando etapas ao seu aplicativo

Para criar uma nova etapa em um aplicativo Tulip, clique na opção Adicionar etapa no lado esquerdo do editor do aplicativo. O design da nova etapa refletirá o Layout Base.

{altura="" largura="300"}

Pro-tip: você também pode duplicar uma etapa existente se quiser reutilizar o projeto ou a lógica em sua nova etapa, clicando no ícone da engrenagem e selecionando "Duplicate Step".

Adicionando lógica à sua aplicação

Agora que cobrimos como adicionar novos passos, precisamos dar aos operadores uma maneira de passar de um passo para o outro. Podemos criar esta lógica na Tulip usando Triggers. Para começar, vamos usar um simples botão para navegar de um passo para o outro.

Você pode adicionar um botão personalizado selecionando "Botão" na barra de ferramentas ao longo da parte superior do Editor de Aplicativos. Arraste o botão até o local desejado.

Adicione uma etiqueta para o botão e ajuste as opções de formato/coloração usando o Painel de Contexto ao longo da direita.

{altura="" largura="300"}

Para adicionar lógica ao botão, clique no sinal "+" ao lado de Gatilhos no Painel de Contexto.

{altura="" largura="300"}

Os gatilhos permitem adicionar lógica a suas aplicações sem ter que usar qualquer código usando uma simples seqüência quando, se, então, outra seqüência. Este é o Trigger Editor que se abre depois que você clica no sinal "+".

Uma Ação ou Transição é uma mudança que acontecerá no aplicativo quando o Trigger disparar.

Há muitas Ações e Transições que você pode tomar quando o botão é pressionado.

{altura="" largura="350"}

Este gatilho é simples:

Quando: Botão é pressionado

Então: O tempo atual é salvo para uma variável

E então: Vá para o passo → Próximo.

Este botão permite passar para a próxima etapa. Normalmente, você gostaria de adicionar um botão que permitisse aos usuários navegar também para a etapa anterior.

Uma vez construída a lógica básica do aplicativo, você pode clicar na opção Executar ou Testar no canto superior direito do Editor do aplicativo. Isto lançará seu aplicativo no TTulip Player e permitirá que você teste o aplicativo em seu computador em tempo real.

Completando seu aplicativo para registrar os dados

Você precisa adicionar um botão Completo para que a Tulip registre todos os dados do uso do aplicativo por parte do operador.

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

Clique na opção "Botões" na barra de ferramentas, e escolha o botão Completar. Arraste-o para a última etapa de seu aplicativo.

Parabéns! Isso é tudo o que você precisa saber para construir um simples aplicativo de instrução de trabalho.

Leitura adicional

Use estes guias passo a passo para construir uma aplicação completa usando estes conceitos.

• Criando um aplicativo Tulip
• Construir um aplicativo completo de relatório de defeitos
• Construir um aplicativo que capture dados de ordens de trabalho

Você encontrou o que estava procurando?

Você também pode ir ao community.tulip.co para postar sua pergunta ou ver se outros enfrentaram uma pergunta semelhante!