Introdução ao Tulip App Editor

Objetivo

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 seu aplicativo para registrar dados

:::(Info) (Observação:) Esse tópico é apresentado no curso"Introdução à criação de aplicativos" da Universidade Tulip:

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

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

Esta é a sua aparência:

O App Editor permite que você crie uma série de etapas, ou telas, que os operadores podem usar em um aplicativo. As etapas também podem ser organizadas em grupos de etapas para melhorar a usabilidade.

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

Uma visão geral rápida do Tulip App Editor

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

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

Você pode alterar o layout de base em cada etapa "desbloqueando" elementos individuais no painel de contexto à direita.

Usando o botão direito do mouse, você pode Duplicar, Agrupar etapas ou Excluir.

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

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.

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 App
• Guia Widget

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.

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.

Clicar em um elemento no aplicativo exporá outra guia no painel de contexto chamada Guia Widget. É aqui que você ajusta o formato dos vários elementos visuais do aplicativo, juntamente com o seu comportamento ao interagir com ele.

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

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

Adição de etapas ao aplicativo

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

Dica: você também pode duplicar uma etapa existente se quiser reutilizar o design ou a lógica em sua nova etapa clicando no ícone de engrenagem e selecionando "Duplicate Step" (Duplicar etapa).

Adição de lógica ao seu aplicativo

Agora que já falamos sobre como adicionar novas etapas, precisamos dar aos operadores uma maneira de passar de uma etapa para outra. Podemos criar essa lógica no Tulip usando Triggers. Para começar, vamos usar um simples botão para navegar de uma etapa para outra.

Você pode adicionar um botão personalizado selecionando "Button" (Botão) na barra de ferramentas na parte superior do App Editor. Arraste o botão para o local desejado.

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

Para adicionar lógica ao botão, clique no sinal "+" ao lado de Triggers no painel de contexto.

Os acionadores permitem que você adicione lógica aos seus aplicativos sem precisar usar nenhum código, usando uma sequência simples de when, if, then, else. Este é o Trigger Editor que se abre depois que você clica no sinal "+".

Uma ação ou uma transição é uma alteração que ocorrerá no aplicativo quando o acionador for disparado.

Há muitas ações e transições que você pode realizar quando o botão é pressionado.

Esse acionador é simples:

Quando: O botão é pressionado

Then: A hora atual é salva em uma variável

E depois: Ir para a etapa → Next.

Esse botão permite que você passe 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 na opção Run or Test ( Executar ou Testar) no canto superior direito do App Editor. Isso iniciará o aplicativo no TTulip Player e permitirá que você teste o aplicativo no seu computador em tempo real.

Conclusão do aplicativo para registrar os dados

É necessário adicionar um botão Complete para que a Tulip registre todos os dados do uso do aplicativo pelo operador.

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

Clique na opção "Buttons" (Botões) na barra de ferramentas e escolha o botão Complete (Concluir). Arraste-o para a última etapa do seu aplicativo.

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

Leitura adicional

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

• Criação de um aplicativo Tulip
• Criar um aplicativo completo de relatório de defeitos
• Criar um aplicativo que capture dados de ordens de serviço

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!