Comece com o App Building

Bem-vindo à Tulip

Este artigo o guiará através da experiência de bordo e compartilhará recursos para ajudá-lo a se mover rapidamente.

Bem-vindo à Tulip!

A Tulip é uma plataforma sem código construída para as necessidades exclusivas das operações de linha de frente. Com a Tulip, você pode projetar soluções robustas e compostas para seus desafios de produção mais exigentes. Este guia se concentrará nos princípios básicos da plataforma Tulip. Revisaremos as principais características, locais e conceitos e construiremos juntos uma aplicação simples "Hello World".

:::(Info) (NOTA:)Este artigo assume que você tem acesso a uma Tulip Instance. Se você não tiver, você pode obter acesso iniciando um teste gratuito{target="_blank"}, ou contatando o indivíduo ou grupo que administra o acesso da Tulip para sua organização::::

Recursos para ajudar você a aprender

Antes de continuarmos, vamos apresentar alguns recursos-chave que você pode utilizar ao se familiarizar com a Tulip.

Base de conhecimento{target="_blank"}

A Base de Conhecimento é uma coleção de artigos, vídeos e documentação para ajudá-lo a aprender como usar a Tulip. Se você está lendo este artigo, você já o encontrou. Legal!

Siga a estrutura do arquivo na navegação esquerda, ou use a barra de busca para procurar conteúdo relacionado a qualquer tópico sobre o qual você precise de mais informações.

Tulip University{target="_blank"}

A Universidade Tulip é um recurso gratuito e sob demanda para o aprendizado da Tulip. A Universidade Tulip contém dezenas de cursos, certificações e desafios de construção de aplicações para ajudá-lo a levar seu edifício de aplicações para o próximo nível. Dê seus primeiros passos inscrevendo-se no Tulip Essentials{target="_blank"}, pratique suas habilidades com os desafios da Tulip e compartilhe suas conquistas tornando-se um App Builder certificado pela Tulip{target="_blank"}.

Biblioteca{target="_blank"}.

A Biblioteca Tulip é uma coleção de conteúdo pronto para uso desenvolvida por especialistas da Tulip. Você encontrará muito conteúdo para começar, desde aplicações completas e conjuntos de aplicativos até modelos, widgets personalizados e conectores.

Comunidade{target="_blank"}

Tem perguntas, mas não consegue encontrar a resposta na Base de Conhecimento ou na Universidade? Tem uma idéia para uma característica que tornaria sua vida 100x mais fácil? Precisa de uma maneira de acompanhar o que há de mais recente e melhor no Tuliverso? Confira a Comunidade Tulip Community.

Tulip Community é um fórum ativo e online para os usuários postarem perguntas, terem discussões e ajudarem-se mutuamente usando a Tulip para resolver seus problemas.

Orientando-se - Uma rápida visita à sua instância

Vamos começar fazendo uma rápida visita a sua instância. Para fins desta visão geral, existem 5 locais-chave que você deve saber como encontrar na Tulip.

• Aplicações e o editor de aplicativos
• Tabelas
• Piso da loja
• Painéis de controle
• Configurações da conta

Podemos olhar para cada um deles por sua vez.

Aplicações e o Editor de Aplicações

Página do aplicativo

Ao entrar em sua conta, você se encontrará na tela inicial dos aplicativos. Aqui, você pode visualizar e gerenciar todas as aplicações em sua instância.

Para encontrar esta página, passe o mouse sobre "Apps" na parte superior da navegação e clique em "Apps" no menu suspenso.

App Homescreen e Editor App

O Editor de Aplicações é onde você fará o trabalho de construir aplicações. Para chegar ao editor de aplicações, você pode selecionar uma aplicação existente ou criar uma nova aplicação. Clique em sua aplicação. A partir desta tela você pode visualizar os dados de conclusão do aplicativo, gerenciar os aplicativos {{{glossário.Permission}}s e {{glossário.Approval}}s, e publicar uma Versão de seu aplicativo.

{{altura="" largura=""}

Clique em qualquer etapa deste menu, e você será levado ao Editor de Aplicativos.

Agora que estamos aqui, vamos fazer um balanço do que estamos vendo. Há algumas áreas-chave com as quais você vai se encontrar trabalhando.

:::(Info) (NOTA:)Para uma visita aprofundada ao editor do aplicativo, veja este artigo:::

Vamos rever 4 ferramentas-chave no editor de aplicativos:

• Interface Drag and Drop
• Barra de ferramentas
• Painel de Contexto
• Painel de Degrau e Registro

Interface Drag and Drop

No centro da tela, você tem sua interface de arrastar e soltar - sua chapa em branco.

{altura="" largura=""}

Aqui é onde você projetará uma interface de usuário. Aqui você incorporará widgets, criará elementos interativos e organizará todas as informações e recursos que um usuário precisará para interagir com sua aplicação.

Barra de ferramentas

Acima de sua tela, você verá uma série de dropdowns a que nos referimos como a barra de ferramentas. Use estes menus para adicionar texto, entradas e outros Widgets à sua aplicação.

Painel de Contexto

À direita, você encontrará o Painel de Contexto, onde você configurará os detalhes de aplicação, passo e widget. Aqui você adicionará lógica aos aplicativos, gerenciará as configurações de design em nível de aplicativo e ajustará os widgets que você adiciona ao seu aplicativo.

Painel de Degrau e Registro

Finalmente, no painel esquerdo, você adicionará novas etapas à sua aplicação e administrará as tabelas às quais sua aplicação se conecta.

Tabelas

As tabelas são bancos de dados personalizados que você constrói para armazenar os dados coletados por suas aplicações.

{altura=""" largura=""}

As tabelas atingem um meio de comunicação feliz entre ferramentas de planilhas como Excel e bancos de dados relacionais completos, permitindo que você construa um modelo de dados tão simples ou complexo quanto se sinta à vontade para trabalhar.

:::(Info) (NOTA:)Para uma rápida visão geral da construção de aplicativos com tabelas, experimente o curso"Construa um aplicativo simples de entrada de dados{target="_blank"}" na Universidade. As tabelas também são amplamente cobertas em outros pontos da Base de Conhecimento{target="_blank"}.
:::

Para encontrar tabelas, navegue até a guia "Apps" na navegação superior e selecione "Tables" (Tabelas) no menu suspenso.

Na tela inicial de Tabelas, você terá a opção de visualizar uma tabela existente, ou criar uma nova.

Piso da loja

A aba Shop Floor é utilizada para gerenciar Estações e Dispositivos físicos associados à sua Tulip Instance. Sob a aba Shop Floor, você encontrará opções para criar e gerenciar estações, gerenciar Edge Devices, Máquinas, e Tulip Vision.

Por enquanto, vamos nos concentrar em "Estações". Ao clicar em "Estações", você será levado a uma página onde você cria estações e atribui aplicações a elas - uma etapa crítica no fluxo de publicação.

:::(Info) (NOTA:)Você pode aprender mais sobre estações na Base de Conhecimento e na Universidade Tulip (alvo="_blank"}::::

Você vai interagir muito mais com esta página enquanto se prepara para mover suas aplicações acabadas para a produção.

Painel de Controle

Quando você começar a construir análises, elas aparecerão sob a seção "Painéis de Controle" de sua instância. Navegue aqui clicando na opção "Dashboards" na parte superior da navegação.

Você pode pensar em dashboards como coleções de Analíticos. Você pode organizar seus dashboards de acordo com qualquer lógica que desejar.

{altura=""" largura=""}

É importante ressaltar que os painéis podem ser exportados como URL e compartilhados com qualquer pessoa - com respeito a se eles têm uma conta Tulip.

Isto permite que você compartilhe seus resultados e métricas com qualquer pessoa de sua organização.

Configurações da conta

As configurações de sua conta podem ser acessadas clicando no ícone no canto superior direito de sua instância Tulip. As opções acessíveis a você aqui variam de acordo com seus níveis de permissão.

Tulip Player

Uma das partes mais importantes da Tulip - o Tulip Player - não está localizada em sua instância web.

O Tulip Player é uma aplicação projetada especificamente para a execução de aplicações. Ele pode ser executado em muitos dispositivos em vários sistemas operacionais. É fundamental que ele seja baixado em qualquer dispositivo no qual você gostaria de rodar aplicações.

Para baixar o Tulip Player, siga este link. Para instruções de instalação e configuração, verifique aqui

Aplicações de construção

Agora que você pode encontrar o caminho ao redor de sua instância, vamos fazer um curso intensivo em aplicações de construção. Não há melhor maneira de fazer isso do que construir uma aplicação em conjunto. Então, puxe sua instância e vamos construir juntos uma aplicação "Olá Mundo".

Criando uma nova aplicação

A primeira coisa que precisamos fazer é criar uma nova aplicação. Para fazer isso, navegue até a seção "Apps" da plataforma usando o menu "Apps" na parte superior da navegação.

Uma vez lá, clique em "create application" (criar aplicativo) no canto superior direito. Em seguida, você será solicitado com um modal que lhe perguntará se você gostaria ou não de criar uma nova aplicação ou começar a partir de um modelo. Encorajamos você a brincar com os diferentes modelos disponíveis, mas por enquanto, vamos começar com um aplicativo em branco clicando em "criar" no canto inferior direito do modal.

Você será direcionado para a tela inicial do aplicativo, onde você administrará as configurações deste aplicativo avançando. Vá em frente e nomeie seu aplicativo como "Hello World", clicando no lápis ao lado de "Untitled App", no canto superior esquerdo. Depois, clique em qualquer passo e você será levado ao editor do aplicativo.

Construindo um aplicativo "Hello World

Podemos dividir o processo de construção do aplicativo em algumas etapas chave que você replicará em diferentes níveis de escala e complexidade ao longo de sua jornada com a Tulip.

• Projeto da interface do usuário
• Adicionando Lógica
• Teste

Vamos mantê-lo o mais simples possível, e nos concentraremos apenas em projetar uma interface básica, adicionando uma única linha de lógica e testando nosso aplicativo usando o modo desenvolvedor.

Projetando uma IU de aplicação

Sua Interface de Usuário é a disposição dos elementos gráficos e interativos através das etapas de suas aplicações. Projetar uma boa interface de usuário é essencial para permitir que seus usuários interajam com sucesso com seus aplicativos.

:::(Info) (NOTA:)O design da interface do usuário é abordado em profundidade na Tulip University{target="_blank"}:::

Por enquanto, vamos mantê-lo básico. Vamos adicionar 4 elementos à nossa interface de usuário:

• Uma forma para criar uma barra de cabeçalho
• Uma variável que exibe o nome da aplicação
• Um botão de menu
• Um botão que exibe a mensagem "Olá Mundo" quando clicado

Desenhe um layout de base

Os Layouts Básicos são padrões de projeto que são aplicados a cada etapa de sua aplicação.

Projetaremos nossa IU como o Layout de Base para nossa aplicação.

Para acessar o Layout Base, clique no texto "Layout Base" na parte inferior esquerda do Editor de Aplicação. Você saberá que está editando o Layout Base quando o fundo por trás do texto estiver destacado em azul claro.

Para adicionar sua barra de cabeçalho, navegue até o Menu Ativos na barra de ferramentas, e selecione a opção "retângulo". Se não for imediatamente visível, procure "retângulo" usando a barra de busca.

Ao clicar em "retângulo", você verá que um formato foi adicionado à área de caixa de areia de seu editor de aplicativos. Clique sobre o formato para selecioná-lo. No painel à direita, você verá opções para ajustar as configurações de seu ativo. Mude a cor para cinza escuro. Ajuste as configurações do widget de modo que suas dimensões sejam 1920w x 100h, ou simplesmente arraste-o para o lugar de modo que ele se estenda pela parte superior de sua aplicação.

Adicione um nome de etapa ao Navio superior

Quando um usuário acessa nosso aplicativo, queremos que o aplicativo exiba o nome da etapa que está utilizando atualmente. Neste caso, queremos que nosso aplicativo leia "Olá Mundo" em toda a barra superior que acabamos de criar.

Para fazer isso, clique no menu "Texto" na barra de ferramentas, e selecione "Variável" no menu suspenso. Alternativamente, você pode usar o atalho de teclado e simplesmente pressionar "V".

As variáveis na Tulip são marcadores de posição para valores. Quando você seleciona exibir uma variável, seu aplicativo exibirá qualquer valor armazenado atualmente nessa variável.

Para acessar o nome do passo, precisamos configurar nossa variável.

Verifique se a variável embutida está selecionada e navegue até o painel de widget no painel direito. Em "Datasource", selecione "App Info". Selecione "Nome do passo" no menu suspenso "Selecionar informações do aplicativo".

Arraste e solte sua variável para o lugar na barra superior. Você pode desejar mudar a cor do texto para torná-lo mais legível contra o fundo escuro.

Alternativamente, você pode simplesmente adicionar um "nome do passo" do menu Texto na barra de ferramentas.

A última coisa que precisamos fazer é nomear nosso passo. Clique duas vezes no "Passo sem título" sob o painel de Passos à esquerda e renomeie seu passo "Olá Mundo".

Adicionar um botão de menu

Usando o menu "Botões" na barra de ferramentas, adicione um botão Menu à sua aplicação. Arraste-o para o lugar no canto superior esquerdo ou direito de sua barra superior.

É importante que um botão de menu seja acessível a partir de cada etapa de sua aplicação para que um usuário possa alterar, cancelar ou pausar suas aplicações.

Adicionar um botão de Olá Mundo

Usando o menu "Botões" na barra de ferramentas, adicione um botão a sua aplicação. Centralize-o em seu layout.

Vamos adicionar lógica a este botão na próxima seção.

Adicionando lógica a aplicativos

A lógica do gatilho é o que torna as aplicações inteligentes. É o que separa o software de slideshow dos aplicativos dinâmicos e responsivos que você vai construir na Tulip.

A estrutura da lógica na Tulip

As declarações lógicas na Tulip seguem o mesmo padrão: Quando → Se → Então.

Quando um evento ocorre, se certas condições são ou não atendidas, então o pedido realiza uma ação específica.

O gatilho para nossa aplicação "Olá Mundo" seguirá esta mesma estrutura.

Quando um usuário aperta um botão, então o aplicativo exibirá a mensagem "Hello World". Não colocaremos nenhuma declaração condicional neste gatilho.

Onde você adiciona gatilhos na Tulip

Na Tulip, a lógica está associada a eventos. Um usuário apertando um botão, uma mudança no estado de uma máquina ou digitalizando um código de barras são todos exemplos de eventos. Há vários locais comuns que você adicionará gatilhos na Tulip:

• Para widgets, como botões e tabelas interativas
• Aos passos, para ações como "no passo aberto" ou "no passo fechado", ou "quando o dispositivo dispara".
• Para aplicativos, para ações como "quando o aplicativo abre".
• Construa seu primeiro gatilho

Vamos escrever nosso primeiro gatilho.

Nosso gatilho vai fazer duas coisas:

1. Armazenar uma seqüência de texto em uma variável
2. Mostrar uma mensagem que contenha essa variável

Quando você terminar, deve gostar disto:

{altura=""" largura=""}

Vá em frente e selecione o botão que você colocou no meio de sua interface de usuário. Uma vez selecionado o widget, no painel de contexto, encontre a dobra rotulada "triggers" e clique no sinal de mais para adicionar um trigger. Isto trará à tona o modal de gatilho.

Dê a seu gatilho um nome, algo como "Print Hello World".

Como este gatilho está afixado a um botão, nossa declaração QUANDO é atendida por nós: QUANDO o botão é acionado.

Portanto, nossa tarefa é escrever nossas declarações de ação, as ENTRAS. Vamos começar com o armazenamento de uma seqüência de texto para uma variável.

Clique em "Adicionar nova ação". Usando o menu suspenso, selecione "Manipulação de dados" e depois "Armazenar". Com esta ação, precisamos especificar quais dados gostaríamos de armazenar, e onde. Usando o menu suspenso após "Data:", selecione "static value", e depois "Text". Colocaremos nossa mensagem neste valor estático. No campo de entrada, escreva sua mensagem, "Olá Mundo".

A próxima parte deste gatilho é determinar o "local:", ou onde seus dados serão armazenados. Selecione "Variável" no menu suspenso, e então opte por criar uma nova variável. Dê um nome a sua variável, algo como "Hello World Variable", e clique na verificação verde.

Está quase pronto. A próxima coisa que precisamos fazer é exibir nossa variável em uma mensagem. Vamos criar outra ação em nosso gatilho para fazer isso.

Então clique em "adicionar nova ação", e selecione "Mostrar mensagem" no menu suspenso. A última coisa que precisamos fazer é especificar os dados que vão em nossa Mensagem. Como já criamos uma variável, você pode selecionar "Variável" no menu suspenso, e então selecionar sua variável "Olá Mundo".

Salve seu gatilho. Agora você está pronto para testar seu aplicativo.

Testando seu aplicativo

Em qualquer ponto do processo de projeto, você pode testar sua aplicação usando o botão "Teste" à direita da barra de ferramentas no editor de aplicação. Isto abrirá o Modo Desenvolvedor, um ambiente sandbox que lhe permite testar aplicações sem prejudicar os dados ou sistemas de produção.

Uma vez aberto o Modo Desenvolvedor, você pode testar sua aplicação. Aperte "start" e depois aperte seu botão. Você deve ver uma mensagem que diz "Olá Mundo" exibida na parte inferior da tela.

Publique sua aplicação

Antes de colocar sua aplicação em produção, você precisa publicar essa aplicação. Isto criará uma versão somente leitura de sua aplicação que você pode acessar em uma Estação.

As aplicações são publicadas como Versões. Toda vez que você fizer mudanças em um aplicativo, você precisará publicar uma nova versão para acessar suas mais recentes mudanças no Player. Isto ajuda no gerenciamento de mudanças e garante que somente as versões e modificações aprovadas entrem em produção.

Para publicar sua solicitação, retorne ao Editor de Solicitação. Clique no botão "publicar" no canto superior direito da tela. Isto trará um modal que o levará a comentar sobre o que mudou nesta versão. Acrescente qualquer comentário que você gostaria. Os comentários serão mais importantes à medida que você começar a trabalhar em escala, mas por enquanto você pode mantê-lo simples. Depois, clique em "Publicar Versão 1".

O que você constrói com a Tulip

A Tulip é uma solução extremamente flexível. Por ser uma verdadeira plataforma, não há limites para os tipos de aplicações que você pode construir. O que levanta uma questão importante: O que eu construo com a Tulip?

A resposta, é claro, depende de suas necessidades operacionais. Muitos usuários têm em mente objetivos concretos para a Tulip, como por exemplo:

• Reduzir erros em uma operação de montagem manual
• Rastreamento do tempo de atividade e de parada da máquina
• Aumentar a visibilidade da produção
• Simplificando a genealogia do produto em ambientes de alta mistura

Estes objetivos comerciais concretos podem ser facilmente transformados em uma aplicação - ou série de aplicações - que proporcionam o resultado desejado. Geralmente nos referimos a estes conjuntos de aplicações por caso de uso, ou ao desafio operacional específico que eles ajudam a enfrentar. Os casos de uso que abordam a lista de objetivos operacionais acima seriam:

• Instruções de trabalho digitais
• Monitoramento de máquinas
• Rastreamento da produção
• Rastreabilidade e genealogia

Estes projetos podem abranger desde aplicações de inspeção de qualidade direcionada em uma única estação em uma única célula, até soluções de registro eletrônico de lotes em larga escala para uma operação completa de fabricação farmacêutica. Muitas vezes, os clientes da Tulip começam pequenos com um simples caso de uso que fornece valor rápido e constrói capacidades, expandindo suas soluções à medida que seu conforto com a Tulip cresce.

:::(Info) (NOTA)Saiba como escolher seu primeiro caso de uso neste{target="_blank"}. Curso da Universidade Tulip::::

O essencial aqui é que as mesmas características básicas da Tulip podem ser usadas para projetar qualquer aplicação que você possa imaginar, para qualquer desafio operacional que você possa enfrentar, em qualquer escala.

Ao aprender algumas características-chave na Tulip, você dará à sua equipe a capacidade de projetar soluções de software para seus desafios mais difíceis hoje, amanhã e no próximo ano.