Guia de início rápido para o Jitterbit App Builder
Introdução
O tempo estimado para concluir este aplicativo é de 10 minutos
Este App Builder Quickstart mostra como criar um aplicativo de compras simples que permite que os usuários visualizem seu aplicativo em um smartphone enquanto fazem compras de supermercado e marquem itens da lista conforme eles vão. A criação deste aplicativo de compras fornece uma visão geral básica do trabalho no App Builder e apresenta os principais recursos e capacidades. Para um mergulho mais profundo no App Builder, inscreva-se em nosso curso Introdução ao App Builder disponível na Jitterbit University.
Pré-requisitos
-
Navegador web cliente moderno
-
Chrome: 84+
-
Firefox: 73+
-
Safari: 13.0.1+
-
Borda: 84
-
Visão geral do App Builder
O App Builder é um aplicativo de baixo código projetado para grandes empresas para resolver problemas de negócios complexos em escala. O 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.
A plataforma App Builder é projetada com elementos de layout e navegação simples e intuitivos. Os aplicativos App Builder 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.
-
Control - representa o que o painel exibe. Exemplos incluem texto, um botão, imagem, etc.
Navegar no 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 no App Builder.
O 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, a plataforma App Builder é 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 obter mais informações, consulte o Guia do usuário do App Builder.
Criar um novo aplicativo
Para começar, usaremos o assistente Create New Application, um assistente inteligente avançado que o guiará pelo processo.
-
Faça login no seu ambiente App Builder com as credenciais fornecidas
-
Clique no botão + App no Menu do Site
-
Forneça um Nome para o aplicativo. Por exemplo: Grocery App
Nota
O nome deve ser exclusivo em um ambiente do App Builder
-
Clique no botão Criar aplicativo
O 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.
-
Na página inicial do aplicativo, vá para Action Drawer > Design Center
-
Clique em + Table em Data Storage Layer
-
Selecione o Table Builder e clique em Next
-
Digite um nome de tabela e clique em Next. Por exemplo, Product
-
Clique no botão Add Title e clique em Proceed
-
Clique no botão Add Column
-
Forneça um Name para a coluna. Por exemplo, Purchased
-
Defina o tipo de dados Logical para a coluna. Por exemplo, Boolean
-
Clique no ícone checkmark para salvar
-
Clique no botão Add Column
-
Forneça um Name para a coluna. Por exemplo, Quantidade
-
Defina o tipo de dados Lógico para a coluna. Por exemplo, Número
-
Clique no ícone marca de seleção para salvar
-
Clique em Avançar
-
Revise as atualizações propostas e clique em Gerar páginas
Nota
O App Builder anexa automaticamente colunas do sistema e cria visualizações para ajudar a gerenciar seus dados
-
Selecione Home como o menu do qual a nova página será vinculada e clique em Next
-
Selecione Grade e Formulário como tipos de página e clique em Avançar
-
Revise as atualizações propostas e clique em Criar páginas
Criar registros de produtos
Depois de criar a tabela Produto e as páginas correspondentes, o App Builder leva você para a página do formulário Produto, onde você pode inserir registros para armazenar na tabela Produto e usar pelo aplicativo.
-
Na página Produto, insira um nome de Produto. Por exemplo, Queijo Americano
-
Deixe o campo Comprado desmarcado
-
Insira um valor numérico de Quantidade. Por exemplo, 1
-
Deixe Está Ativo marcado para indicar que o Produto está disponível
-
Clique no botão Salvar
-
Clique no painel x para sair da tela Produto
-
Clique no botão Criar para adicionar registros adicionais
-
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 compilação de aplicativo para fornecer uma ilustração rápida dos recursos do App Builder. Revisitando o requisito de aplicativo definido, queremos visualizar o aplicativo em um smartphone enquanto fazemos compras de supermercado e verificar itens da lista conforme avançamos. Aqui, faremos algumas atualizações nas informações padrão para tornar nosso aplicativo ainda mais amigável.
-
Na página Produtos, vá para Gaveta de Ações > Live Designer
-
Selecione o controle Comprado na visualização de página
-
Clique na aba Posição e Largura no Live Designer
-
Clique no ícone de seta para a esquerda ao lado de Alterar posição para mover o controle para a esquerda do produto
-
Clique na aba Rótulo e selecione Oculto para Visibilidade do Rótulo para ocultar o controle Rótulo
-
Clique em Salvar
-
Selecione o controle Está ativo na visualização de página
-
Clique na aba Propriedades do Controle no Live Designer
-
Desmarque o campo Ativo e clique em Salvar para ocultar este controle da visualização do painel
-
Clique para selecionar o painel Produtos na visualização da página
-
Altere o Nome do painel para Lista de compras (ou outro nome significativo)
-
Clique na aba Métodos de atualização no Live Designer
-
Selecione Excel para Método de edição para oferecer suporte à edição direta de registros
-
Selecione Inline para Inserir método para anexar novos registros à página Produtos
-
Selecione Última linha como Posição de inserção para definir onde o novo registro aparecerá
-
Selecione Não para Excluir com suporte para evitar que os registros sejam excluídos
-
Clique em Salvar para aplicar as alterações
-
Selecione o painel Home na visualização da página
-
Clique na aba Edge Case no Live Designer
-
Expanda a seção Geral, desmarque o campo Ativo e clique em Salvar para ocultar este painel
-
Clique no x para fechar o Live Designer
Defina a página inicial do aplicativo
O 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 criar e manter aplicativos.
-
Navegue até a Gaveta de ações > App Workbench
-
Clique no botão Mais em Configurações do aplicativo
-
Selecione Edge Case
-
Clique na aba Regiões - Controles
-
Defina a Página inicial como a página que contém seu aplicativo de compras
-
Clique no x para sair do pop-up
-
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 o App Builder, visite Jitterbit Success Central e faça nosso curso Introdução ao App Builder disponível na Jitterbit University.