Passo a passo: Crie seu primeiro aplicativo

Neste passo a passo, você irá:- Exibir uma mensagem em uma etapa- Inserir uma mensagem personalizada- Criar uma contagem de mensagens- Documentar a data e a hora da exibição da mensagem mais recente

Neste passo a passo, você aprenderá os conceitos básicos de aplicativos criando vários componentes funcionais de aplicativos.

Ao final dos exercícios, você terá um aplicativo Hello World com a seguinte aparência:

Exercício 1: Criar um aplicativo Hello World

Neste exercício, você criará um aplicativo simples que exibe uma mensagem a partir de um acionador de botão.

Criar um aplicativo

1. Na guia Apps, clique em Apps.
2. Clique em + Create App (Criar aplicativo ) no canto superior direito.
3. Nomeie o aplicativo como "Hello World - Example". Opcionalmente, você pode adicionar uma descrição para que outros usuários saibam para que serve esse aplicativo.
4. Na página de detalhes do aplicativo, você pode clicar em Edit (Editar ), no canto superior direito, ou clicar no nome Untitled Step (Etapa sem título) para entrar no App Editor.

Projetar um layout de base

1. Na guia Steps (Etapas ) à esquerda, selecione Base Layout (Layout básico).
2. Clique em Icons (Ícones) e selecione uma forma de retângulo. Ajuste a largura do retângulo para abranger toda a tela do aplicativo e, em seguida, clique e arraste-o para a parte superior da tela. Para alterar a cor do retângulo, clique no quadrado Fill (Preencher ) na guia Widget e selecione a cor cinza fraco.
3. Selecione a forma e pressione CTRL/CMD + C para copiar. Arraste o segundo retângulo para a parte inferior da tela.
4. Clique em Input (Entrada) e selecione Variable (Variável). Na guia Widget, clique no campo Select a data source (Selecionar uma fonte de dados ). Clique na seta ao lado de App Info e selecione App name.
5. Clique e arraste a variável para o canto superior esquerdo, na parte superior do retângulo.
6. Adicione mais duas variáveis:
7. Selecione Step name (Nome da etapa ) na lista de fontes de dados de informações do aplicativo. Posicione essa variável no canto superior direito.
8. Selecione Logged-in user (Usuário conectado) na lista de fontes de dados de informações do aplicativo. Posicione essa variável no canto inferior esquerdo.
9. Por fim, clique em Buttons e selecione Menu. Clique e arraste o botão para a parte inferior da tela.

Seu layout básico terá a seguinte aparência:

Em seguida, criaremos a funcionalidade em uma etapa.

Adicionar o botão hello world

1. Na guia Steps (Etapas ), selecione Untitled Step (Etapa sem título). Clique duas vezes nela para renomeá-la e digite "Display message" (Exibir mensagem).
2. Clique em Buttons e selecione o botão. Redimensione o botão para que fique maior usando os quadrados ao redor do botão. Posicione o botão no meio da tela.
3. Adicione o seguinte estilo ao botão:
4. Texto - "Hello World"
5. Cor do botão - Verde
6. Ícone - Ferramenta panorâmica

O botão terá a seguinte aparência:

Em seguida, adicionaremos um acionador a esse botão para torná-lo funcional.

Adicionar um acionador de botão

1. Selecione o botão Hello World e navegue até a seção Triggers na guia Widget. Clique em + para adicionar um novo acionador.
2. Nomeie o acionador como "Hello world".
3. Na instrução Then, adicione a seguinte lógica**:Show Message** → Static Value → Text → "Hello World"

Seu acionador deve corresponder ao seguinte:

1. Clique em Save (Salvar).

Quando você testar o aplicativo, ele funcionará da seguinte forma:

Exercício 2: Armazenar dados de entrada

Neste exercício, você criará uma lógica que armazena o texto de entrada em uma variável.

1. Adicione uma nova etapa e nomeie-a "Store message" (Armazenar mensagem).
2. Clique em Input (Entrada) e selecione Text (Texto).
3. Na guia Widget, clique na caixa de fonte de dados. Selecione + Adicionar variável.
4. Nomeie a variável como "message" e clique em + Create.

Quando você testar o aplicativo, a entrada de texto será salva na variável "message". Você pode ver o valor armazenado no painel Variables (Variáveis ) no lado esquerdo da janela Developer Mode (Modo de desenvolvimento).

Exercício 3: Contar o número de mensagens de boas-vindas

Neste exercício, você criará uma análise que conta quantas vezes o botão Hello world foi pressionado.

1. Na etapa Exibir mensagem, clique em Incorporar e selecione Análise. Clique e arraste o widget para a esquerda do botão Hello world.
2. Clique em Select an Analysis e, em seguida, em Create Analysis.
3. Clique no menu suspenso Tipos de exibição e selecione Valor único.
4. Clique na guia Operations (Operações ) e em Add a new operation (Adicionar uma nova operação).
5. Selecione Aggregation Functions (Funções de agregação ) e, em seguida, Count of Records (Contagem de registros).
6. Clique na seta lateral no lado direito do editor para expandir o painel de visualização. Abaixo de Value (Valor), clique em + Add field (Adicionar campo ) e selecione Count of Records (Contagem de registros).
7. Clique no título da análise e renomeie-o como "Count of hellos" (Contagem de cumprimentos) e, em seguida, clique em Save (Salvar).
8. Clique em Save and Close (Salvar e fechar ) no canto superior direito.

Como as conclusões não são salvas no modo de desenvolvedor, clique em Run (Executar) para testar essa análise no Tulip Player.

Exercício 4: Calcular o último hello com uma expressão

Neste exercício, você escreverá uma expressão em um acionador que armazena em uma variável para mostrar a última vez que o aplicativo disse olá.

1. No painel lateral, navegue até a guia App.
2. Ao lado de Variables (Variáveis), selecione X.
3. Clique em + Create Variable (Criar variável).
4. Nomeie a variável como "Last time you said hello" e clique em + Create.
5. Na etapa Exibir mensagem, clique no botão Hello world e adicione um novo acionador.
6. Adicione a seguinte ação ao acionador**:Manipulação de dados** → Store → Expressão: 'A última vez que você disse olá foi em' + ' ' + App Info.Current Date and Time.Current Time → Variável → Última vez que você disse olá

1. Na etapa Count of hellos (Contagem de cumprimentos ), clique em Text (Texto ) e selecione Variable (Variável).
2. No painel lateral, em Opções de dados, clique no campo Fonte de dados em branco e selecione a variável Última vez que você disse olá.

Quando você testar o aplicativo, a expressão será salva na variável Last time you said hello e aparecerá como um carimbo de data/hora.

Próximas etapas

Agora que você criou seu primeiro aplicativo, saiba como publicá-lo e executá-lo aqui.

Saiba mais sobre a criação de aplicativos:* Noções básicas de criação de aplicativos* Introdução ao Tulip App Editor* Como criar um layout de base eficaz

Torne-se um construtor de aplicativos certificado pela Tulip:Certificação básica de construtor de aplicativos

Encontrou o que estava procurando?

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