Tutorial 2: trabalhar com dados

Habilidades intermediárias do App Maker

15 a 20 minutos

O que você criará

Você criará um aplicativo simples de banco de dados de funcionários. O usuário poderá:

  • criar novos registros de funcionários e inserir dados neles;
  • editar registros de funcionários;
  • navegar pelos registros;
  • classificar registros;
  • excluir registros.

O que você aprenderá

Com este tutorial, você aprenderá a:

  • criar um modelo de dados e adicionar campos a ele. Serão vistos conceitos relacionados a dados: modelos, campos, registros e fontes e vinculação de dados;
  • adicionar widgets de formulário e tabela a uma página. Você verá como modificá-los e como eles funcionam. Também será vista a diferença entre inserir e editar formulários.

Criar seu aplicativo

  1. Faça login na conta do G Suite fornecida pelo empregador ou pela escola.
  2. Abra o App Maker.
  3. Crie um aplicativo em branco:
    • Se o App Maker exibir a caixa de diálogo de boas-vindas, clique em Criar novo aplicativo.
    • Caso contrário, clique no menu Novo Aplicativo em branco.
  4. Renomeie o aplicativo Banco de dados dos funcionários.

Criar um modelo

Crie um modelo e defina seus campos. Um modelo contém os dados disponíveis no aplicativo. Os campos dele são como colunas em uma tabela, por exemplo, Nome, E-mail e DatadeContratação. Eles armazenam dados em registros, como linhas em uma tabela. Para este tutorial, use um modelo do Google Cloud SQL.

  1. Na navegação à esquerda, acesse Dados e clique em Adicionar . A caixa de diálogo Criar modelo abrirá com o Google Cloud SQL selecionado.
  2. Clique em Avançar.
  3. Nomeie o modelo como DadosdoFuncionário.
  4. Clique em Criar. O App Maker criará o modelo e abrirá o editor de modelos.
  5. Clique na guia Fontes de dados. Observe que o modelo tem uma fonte de dados chamada DadosdoFuncionário, criada automaticamente pelo App Maker. Uma fonte de dados define quais dados do banco de dados serão disponibilizados na IU do aplicativo.
  6. Clique em DadosdoFuncionário para abrir o editor de fonte de dados e inspecionar as configurações dela.

    Por padrão, todos os dados estão disponíveis (nenhuma consulta está definida), a fonte de dados é carregada automaticamente (Carregar dados automaticamente está selecionado) e as alterações também são salvas de forma automática (o Modo de salvamento manual não está selecionado). Para este aplicativo, pode ser usado o comportamento padrão. Para outros, desative a opção Carregar dados automaticamente se quiser transmitir uma consulta do usuário primeiro. Caso queira que os usuários salvem explicitamente as alterações nos registros da fonte de dados, ative o Modo de salvamento manual. Por exemplo, clicando no botão Salvar alterações.

Adicionar campos ao modelo

Na guia Campos, para cada campo:

  1. Clique em Adicionar novo campo e selecione o tipo.
  2. No campo Nome, insira o nome do campo. Não é preciso alterar a descrição e outras configurações.

    Adicione os seguintes campos:

    Nome do campoTipo de campo
    NameString
    EmailString
    HireDateData
    ActiveBooleano

Configurar uma página para a IU

O aplicativo tem uma página para começar. Nomeie e atribua essa página à fonte de dados do modelo. Ao criar uma página, ela não tem uma fonte de dados predefinida. Ao selecionar uma fonte de dados para uma página, os widgets herdam essa mesma fonte automaticamente.

  1. Na barra lateral esquerda, acesse NovaPágina e clique em Mais Renomear.
  2. Digite PáginadoFuncionário e clique em OK.
  3. No Editor de propriedade (visível quando Editor estiver selecionado), clique na propriedade origem de dados.
  4. Clique em DadosdoFuncionário para selecioná-lo como a fonte de dados.

Adicionar um formulário de edição

Um formulário de edição permite que um usuário:

  • crie novos registros no banco de dados;
  • insira dados para os registros;
  • selecione valores para campos com opções, como campos booleanos, de data e com valores possíveis;
  • edite dados nos registros;
  • exclua registros do banco de dados.

Para adicionar um formulário de edição, siga estas etapas:

  1. Abra a paleta de widgets (clique em Widgets ) e adicione um formulário Widget de Formulário à página.
  2. Por você ter definido a origem de dados da página como Herdada: DadosdoFuncionário, ela será automaticamente sugerida. Deixe esse campo selecionado e clique em Avançar.
  3. Na caixa de diálogo Escolher tipo de formulário, selecione Editar e clique em Avançar.
  4. Especifique as opções do formulário:

    • Campo: selecione os campos da fonte de dados para incluir no formulário.
    • Editável: defina os campos como editáveis.

    Para este tutorial, não altere as opções padrão. Elas criam um formulário que inclui todos os campos da fonte de dados. Com exceção do Id, todos os campos são editáveis.

  5. Clique em Concluir.

Adicionar uma tabela

Uma tabela mostra dados como linhas e colunas. As linhas correspondem aos registros no modelo e as colunas correspondem aos campos. Com uma tabela, um usuário pode:

  • visualizar vários registros ao mesmo tempo e navegar por páginas de dados;
  • editar dados de registros em campos editáveis;
  • classificar registros por coluna;
  • excluir registros.

Para adicionar uma tabela, siga estas etapas:

  1. Em Widgets , adicione uma tabela Widget de Formulário à página abaixo do formulário de edição. Alinhe as bordas esquerdas do formulário com a tabela.
  2. Por você ter definido a origem de dados da página como Herdada: DadosdoFuncionário, ela será automaticamente sugerida. Deixe esse campo selecionado e clique em Avançar.
  3. Especifique as opções da tabela:

    • Campo: selecione os campos da fonte de dados para usar como colunas na tabela.
    • Editável: selecione quais campos são editáveis.

    Para este tutorial, não altere as opções padrão. Elas criam uma tabela com colunas que correspondem a todos os campos da fonte de dados e nenhuma delas é editável. Em geral, os aplicativos têm melhor desempenho quando não têm muitos campos editáveis. Em vez de uma tabela totalmente editável, forneça caixas de diálogo pop-up para criar e editar registros e uma tabela somente leitura para revisar registros, como mostrado neste tutorial.

  4. Clique em Avançar.

  5. Mantenha as opções adicionais: linhas paginadas, classificáveis e deletáveis.

  6. Clique em Concluir.

Visualizar e testar o aplicativo

  1. No canto superior direito, clique em Visualizar para executar o aplicativo em uma nova guia do navegador.
  2. Clique em Permitir para que o aplicativo use informações específicas.
  3. Aumente a janela do navegador para ajustar o formulário de edição inteiro e o topo da tabela.
  4. No formulário Editar DadosdoFuncionário, tente inserir um nome no campo Nome. Como ainda não há um registro, isso não será possível.
  5. Clique em Criar para criar um registro. O aplicativo adicionará o registro à tabela. Ele será um registro real no banco de dados. Agora, será possível inserir dados e eles serão salvos automaticamente no banco de dados. Esse comportamento será útil quando um usuário quiser atualizar um registro, mas não é intuitivo criar um registro. Inserir formulários, ação descrita mais adiante neste tutorial, é uma maneira mais intuitiva de os usuários adicionarem dados.
  6. Preencha o formulário. Ao inserir dados e selecionar valores, o App Maker adiciona os valores à tabela. Os dados ficarão ativos para cada campo assim que você pressionar Enter, clicar fora de um campo ou fizer uma seleção.
  7. Clique em Criar para criar um registro adicional e insira dados para ele.
  8. Selecione um dos registros na tabela. Clique em Excluir no formulário de edição para excluir o registro. Não há como desfazer algo automaticamente, ainda que isso possa ser feito com scripts.
  9. Observe os controles que o App Maker adiciona à parte inferior do formulário. Use-os para navegar pelas páginas de dados.

Parabéns! Você acabou de criar um aplicativo do App Maker que funciona com dados.

Explore o poder por trás da IU

Antes de concluir este tutorial, explore os recursos que proporcionam o poder por trás da IU: vinculações, eventos e ações.

Saiba mais sobre vinculações

Uma vinculação é um link bidirecional entre uma propriedade de widget e outra propriedade. Uma vinculação de dados é quando uma propriedade de widget é vinculada a uma propriedade de uma fonte de dados.

Como as vinculações são bidirecionais, a alteração de uma propriedade associada altera a outra.

Veja como a IU do aplicativo usa as vinculações:

  1. Se a guia "Visualização" do aplicativo ainda estiver aberta, feche-a e volte para o App Maker.
  2. No formulário Editar funcionário, selecione a caixa de texto Nome.
  3. No Editor de propriedade, observe que a propriedade valor está configurada como @datasource.item.Name.

    Essa vinculação conecta o valor de Nome, no formulário de edição, ao valor de Nome para o registro na origem de dados. O caminho na propriedade valor define a vinculação como:

    • datasource: refere-se à fonte de dados do widget
    • item: refere-se ao item atualmente selecionado (registro)
    • Name: refere-se ao valor do registro para Name
  4. No Editor de propriedade, selecione a propriedade rótulo. Ela está definida como @models.EmployeeData.fields.Name.displayName.

    Essa vinculação conecta o rótulo da caixa de texto Nome no formulário de edição à propriedade NomedeExibição do campo Nome no modelo DadosdoFuncionário. O caminho na propriedade rótulo define essa vinculação como:

    • models.EmployeeData: refere-se ao modelo DadosdoFuncionário.
    • fields.Name.displayName: refere-se à propriedade NomedeExibição do campo Nome.

Saiba mais sobre eventos e ações

É possível conectar situações (eventos) a respostas (ações).

Eventos desencadeiam ações. Eventos de aplicativos incluem o seguinte:

  • Um aplicativo é iniciado.
  • Uma fonte de dados é carregada.
  • Um aplicativo verifica as permissões.
  • Um usuário clica em um botão.
  • Um aplicativo acessa ou altera dados.
  • Um aplicativo valida dados.

Ações são respostas a eventos. Elas incluem o seguinte:

  • Criar um novo item.
  • Excluir o item atual.
  • Recarregar uma fonte de dados.
  • Executar um script do cliente.

Veja como o aplicativo usa eventos e ações:

  1. No formulário Editar DadosdoFuncionário, selecione o botão Criar.
  2. No Editor de propriedades, localize aoClicar. O evento aoClicar ocorre quando o usuário clica no botão Criar. O evento aoClicar está listado nas seções Botão e Eventos (por questões práticas, o mesmo item é mostrado em dois lugares).
  3. Clique em aoClicar. O menu inclui ações possíveis a serem realizadas quando o usuário clica no botão. Nesse caso, a ação é um script personalizado. Clique em Ação personalizada para abrir o código. Esse código cria um item na fonte de dados atribuída ao widget. O App Maker tem uma ação predefinida Criar novo item, mas ela serve para inserir formulários.
  4. Na tela (o editor de páginas), dentro da tabela, clique no cabeçalho Nome.
  5. No Editor de propriedades, clique em aoClicar > Ação personalizada. Quando o usuário clica no cabeçalho Nome, a ação é um script personalizado que classifica a tabela pelo campo Nome.

Comparar um formulário de inserção a um formulário de edição

Antes de sair do tópico de formulários, compare um formulário de edição a um de inserção.

Anteriormente neste tutorial, foi visto que um formulário de edição permite ao usuário editar um registro no banco de dados. Quando não houver registros, o usuário precisará criar um registro antes de poder inserir dados. Por outro lado, um formulário de inserção salva inicialmente os dados em um único registro de rascunho que está na fonte de dados, não no banco de dados. Quando o usuário estiver pronto, ele salvará explicitamente o conteúdo do registro de rascunho no banco de dados.

Com um formulário de inserção, um usuário poderá:

  • inserir dados e selecionar valores em campos em um registro de rascunho;
  • salvar o conteúdo do registro de rascunho em um novo registro no banco de dados. Depois que os dados são copiados, o registro de rascunho é esvaziado.

Adicionar um formulário de inserção

  1. Em Widgets , adicione um formulário Widget de Formulário à página ao lado do formulário de edição.
  2. A origem de dados Herdada: DadosdoFuncionário está selecionada por padrão. Não altere essa seleção e clique em Avançar.
  3. Selecione Inserir e clique em Avançar. Deixe todos os campos selecionados para que eles estejam presentes no formulário e sejam editáveis.
  4. Clique em Concluir.

Veja como o formulário de inserção funciona

  1. No canto superior direito, clique em Visualizar para executar o aplicativo em uma nova guia do navegador.
  2. Se a tabela contiver registros, vá até a linha e clique em Excluir até que nenhum registro esteja presente.
  3. Preencha o formulário Criar DadosdoFuncionário. É possível inserir dados imediatamente, ao contrário do formulário "Editar funcionário", mas os dados não são adicionados à tabela. Ao inserir dados, o App Maker os salva no registro de rascunho na fonte de dados, não no banco de dados. A tabela não será atualizada até que o registro seja salvo no banco de dados.
  4. Clique em Enviar para criar um registro real no banco de dados. O App Maker copia os dados do registro de rascunho para o registro real e, em seguida, esvazia o registro de rascunho. Agora os dados aparecem na tabela porque estão no banco de dados. Eles também aparecem no formulário de edição, que contém dados do registro atualmente selecionado.

    Ao inserir dados no formulário de edição, eles não aparecem no formulário de inserção, porque os valores nesse formulário são vinculados ao registro de rascunho.

Veja como um formulário de inserção é criado

  1. Se a guia "Visualização" do aplicativo ainda estiver aberta, feche-a e volte para o App Maker.
  2. No formulário Criar DadosdoFuncionário, selecione a caixa de texto Nome.
  3. No Editor de propriedade, observe que a propriedade valor está configurada como @datasource.item.Name, assim como o formulário de edição. No entanto, como esse formulário é de inserção, essa vinculação conecta o valor de Nome no formulário de inserção ao valor de Nome para o registro de rascunho na origem de dados. Saiba mais sobre registros de rascunho e origens de dados do modo de criação.
  4. Agora selecione o botão Enviar. Observe que a ação para o evento aoClicar é Criar novo item. Para um formulário de inserção, a ação Criar novo item:
    1. cria um novo registro no banco de dados;
    2. copia o conteúdo do registro de rascunho para o novo registro;
    3. limpa o registro de rascunho.

A seguir