Ir para o conteúdo

App Builder Início Rápido

Introdução

O tempo estimado para concluir este aplicativo é de 10 minutos

Este App Builder passos de início rápido para criar um aplicativo de compras simples que permite aos usuários visualizar seu aplicativo em um smartphone enquanto fazem compras de supermercado e marcar itens da lista conforme eles vão. Criar este aplicativo de compras fornece uma visão geral básica do trabalho em App Builder e apresenta as principais capacidades e funcionalidades. Para um mergulho mais profundo em App Builder, inscreva-se para nossa Introdução a App Builder curso disponível na Jitterbit University.

anexo

Pré-requisitos

  • Navegador web cliente moderno

    • Chrome: 84+

    • Firefox: 73+

    • Safari: 13.0.1+

    • Borda: 84

App Builder visão Geral

App Builder é um aplicativo de baixo código projetado para grandes empresas resolverem problemas empresariais complexos em escala. App Builder permite que desenvolvedores full stack e cidadãos criem aplicativos poderosos, de ponta a ponta, de nível empresarial, com lógica sofisticada, fluxos de trabalho, segurança e integrações. Nenhum código necessário.

O App Builder a plataforma foi projetada com layout e elementos de navegação simples e intuitivos. App Builder aplicativos, e a plataforma em si, são compostos dos seguintes elementos principais:

  • Painel - o bloco de construção básico de uma página. Um painel atua como um contêiner que apresenta informações ao usuário.

  • Página - uma página é composta de pelo menos um painel, e pode conter uma coleção de painéis.

  • Controle - representa o que o painel exibe. Exemplos incluem texto, um botão, imagem, etc.

Navegando App Builder é semelhante para desenvolvedor e usuários finais de aplicativos, com a exceção de que um usuário desenvolvedor verá mais opções disponíveis. O diagrama a seguir ilustra as principais maneiras de navegar App Builder.

anexo

App Builder é agnóstico de plataforma. Isso significa que ele pode ser executado em qualquer navegador moderno e é totalmente compatível com dispositivos móveis. Ele pode ser acessado em qualquer sistema operacional e pode se conectar a fontes de dados de praticamente todos os principais provedores de serviços de banco de dados. Além disso, o App Builder a plataforma é desenvolvida com um design responsivo. Isso significa que a plataforma será executada e visualizável em qualquer tamanho de tela ou resolução e é automaticamente otimizada para dispositivos móveis.

Para mais informações, consulte o App Builder guia do usuário.

Criar um Novo Aplicativo

Para começar, usaremos o assistente Create New Application, um assistente inteligente avançado que o guiará pelo processo.

anexo

  1. Entre em sua conta App Builder ambiente com suas credenciais fornecidas

  2. Clique no botão + App no Menu do Site

  3. Forneça um Nome para o aplicativo. Por exemplo: Grocery App

    Nota

    O nome deve ser único dentro an App Builder ambiente

  4. Clique no botão Criar aplicativo

App Builder agora será executado em segundo plano e criará o andaime necessário para um aplicativo. Após terminar, você será levado para a página inicial do aplicativo. O andaime criado inclui:

  • Fonte de dados do Microsoft SQL Server

  • Tabela de parâmetros para armazenar dados variáveis

  • Página inicial

  • Página de parâmetros

  • Parâmetro (Objeto de Negócio)

  • Menu de navegação

Crie uma Tabela e Páginas de Produtos

Primeiro, criaremos uma tabela Product para armazenar nossas informações de produto. Nesta seção, usaremos o Table wizard e Assistente de página, assistentes inteligentes avançados projetados para simplificar processos.

anexo

  1. Na página inicial do aplicativo, vá para Action Drawer > Design Center

  2. Clique em + Table em Data Storage Layer

  3. Selecione o Table Builder e clique em Next

  4. Digite um nome de tabela e clique em Next. Por exemplo, Product

  5. Clique no botão Add Title e clique em Proceed

  6. Clique no botão Add Column

  7. Forneça um Name para a coluna. Por exemplo, Purchased

  8. Defina o tipo de dados Logical para a coluna. Por exemplo, Boolean

  9. Clique no ícone checkmark para salvar

  10. Clique no botão Add Column

  11. Forneça um Name para a coluna. Por exemplo, Quantidade

  12. Defina o tipo de dados Lógico para a coluna. Por exemplo, Número

  13. Clique no ícone marca de seleção para salvar

  14. Clique em Avançar

  15. Revise as atualizações propostas e clique em Gerar páginas

    Nota

    App Builder anexa automaticamente colunas do sistema e cria visualizações para ajudar a gerenciar seus dados

  16. Selecione Home como o menu do qual a nova página será vinculada e clique em Next

  17. Selecione Grid and Form como os tipos de página e clique em Next

  18. Revise as atualizações propostas e clique em Create Pages

Criar Registros de Produtos

Após criar a tabela Produto e as páginas correspondentes, App Builder leva você para a página do formulário Product, onde você pode inserir registros para armazenar na tabela Product e usar pelo aplicativo.

attachment

  1. Na página Produto, insira um nome de Produto. Por exemplo, Queijo Americano

  2. Deixe o campo Comprado desmarcado

  3. Insira um valor numérico de Quantidade. Por exemplo, 1

  4. Deixe Está Ativo marcado para indicar que o Produto está disponível

  5. Clique no botão Salvar

  6. Clique no painel x para sair da tela Produto

  7. Clique no botão Criar para adicionar registros adicionais

  8. Siga as etapas para criar registros de Produto para o seguinte, usando valores de Quantidade de sua escolha: Torta de Maçã, Hambúrguer, Pãezinhos, Guardanapos, Sorvete de Baunilha

Modificar a Interface do Usuário do Aplicativo

Os aplicativos típicos contêm várias tabelas, regras de negócios, tabelas e muito mais dados, mas estamos simplificando esta construção de aplicativo para fornecer uma ilustração rápida de App Builder capacidades do. Revisitando o requisito de aplicativo definido, queremos visualizar o aplicativo em um smartphone enquanto fazemos compras de supermercado e marcar itens da lista conforme avançamos. Aqui, faremos algumas atualizações nas informações padrão para tornar nosso aplicativo ainda mais amigável.

  1. Na página Produtos, vá para Gaveta de Ações > Live Designer

  2. Selecione o controle Comprado na visualização de página

  3. Clique na aba Posição e Largura no Live Designer

  4. Clique no ícone de seta para a esquerda ao lado de Alterar posição para mover o controle para a esquerda do produto

  5. Clique na aba Rótulo e selecione Oculto para Visibilidade do Rótulo para ocultar o controle Rótulo

  6. Clique em Salvar

  7. Selecione o controle Está ativo na visualização de página

  8. Clique na aba Propriedades do Controle no Live Designer

  9. Desmarque o campo Ativo e clique em Salvar para ocultar este controle da visualização do painel

  10. Clique para selecionar o painel Produtos na visualização da página

  11. Altere o Nome do painel para Lista de compras (ou outro nome significativo)

  12. Clique na aba Métodos de atualização no Live Designer

  13. Selecione Excel para Método de edição para oferecer suporte à edição direta de registros

  14. Selecione Inline para Inserir método para anexar novos registros à página Produtos

  15. Selecione Última linha como Posição de inserção para definir onde o novo registro aparecerá

  16. Selecione Não para Excluir com suporte para evitar que os registros sejam excluídos

  17. Clique em Salvar para aplicar as alterações

  18. Selecione o painel Home na visualização da página

  19. Clique na aba Edge Case no Live Designer

  20. Expanda a seção Geral, desmarque o campo Ativo e clique em Salvar para ocultar este painel

  21. Clique no x para fechar o Live Designer

Defina a Página Inicial do Aplicativo

App Builder define automaticamente uma página inicial do aplicativo para a primeira página que um desenvolvedor adiciona. Para modificar essa configuração, passaremos pelo App Workbench, um local centralizado que fornece atalhos rápidos para tarefas diárias necessárias para construir e manter aplicativos.

  1. Navegue até a Gaveta de ações > App Workbench

  2. Clique no botão Mais em Configurações do aplicativo

  3. Selecione Edge Case

  4. Clique na aba Regiões - Controles

  5. Defina a Página inicial como a página que contém seu aplicativo de compras

  6. Clique no x para sair do pop-up

  7. Confirme a atualização navegando até Action Drawer > Site Menu, clique duas vezes para iniciar seu aplicativo no Site Menu

Você terminou de construir seu primeiro aplicativo simples! Nesta fase, você pode executar o Grocery App em um smartphone ou qualquer outro dispositivo. Há muitas maneiras de aumentar esse aplicativo simples. Exemplos incluem adicionar uma tabela Department e mapear Products para Departments, adicionar uma coluna Price à tabela Product e rastrear preços ao longo do tempo, e adicionar uma tabela List para armazenar e reutilizar listas.

Para saber mais sobre App Builder visite Jitterbit Success Central e faça nossa Introdução a App Builder curso disponível na Jitterbit University.

Recursos