Exercício: criar seu primeiro aplicativo no Power Apps
No exercício a seguir, criaremos seu primeiro aplicativo com uma tabela do Excel como fonte de dados. Podemos usar qualquer tabela do Excel como fonte de dados se você tiver formatado os dados como uma tabela e salvado em uma fonte de dados à qual tenha acesso, como o OneDrive. Neste exercício, vamos baixar os dados, salvá-los no OneDrive, criar um aplicativo rápido de três telas e começar a criar um aplicativo em uma tela em branco. O aplicativo que começarmos a criar a partir de uma tela em branco neste exercício será aquele que usaremos nas unidades de aprendizagem futuras. O aplicativo de três telas é sua referência para que você possa ver como os controles interagem entre si para acessar os dados. Ambos os aplicativos são capazes de interagir com os mesmos dados.
Obtenha os dados
Baixe a planilha Excel CoffeeMachineData.xlsx. Selecione o link e o botão Fazer download do arquivo bruto para fazer download do arquivo. Depois de fazer os downloads, continue com estas etapas.
Na guia do navegador do OneDrive, selecione Adicionar novo>Upload de arquivos.
No pop-up Abrir, selecione o local do arquivo CoffeeMachineData.xlsx, provavelmente na pasta Downloads.
Depois de encontrar e selecionar o arquivo CoffeeMachineData.xlsx, selecione Abrir. Confirme se o arquivo está em seu OneDrive inserindo CoffeeMachineData no campo de pesquisa na parte superior central da barra de comandos do OneDrive. Agora que você tem o arquivo de dados no OneDrive, vamos criar o aplicativo.
Crie um aplicativo de três telas
Vamos começar criando um aplicativo de três telas que o Power Apps pode fazer com apenas alguns cliques de botão.
Retorne ao Power Apps Maker Portal make.powerapps.com e conecte-se com sua conta organizacional.
Selecione a guia Criar no menu do lado esquerdo.
Selecione o botão Excel nas opções Iniciar em.
Se você não vir sua conexão OneDrive for Business em Conexões, selecione Nova conexão e, em seguida, o botão Criar para criar a conexão. Quando estiver lá, selecione sua conexão OneDrive for Business.
Em Escolher um arquivo do Excel, selecione o arquivo CoffeeMachineData.xlsx. Você pode procurá-lo por meio do campo de pesquisa no canto superior direito.
Em Escolher uma tabela, selecione CoffeeMachines. CoffeeMachines é a tabela onde residem os dados do aplicativo.
Selecione o botão Conectar no canto inferior direito e veja o Power Apps criar um aplicativo de três telas.
Em apenas alguns instantes, o Power Apps mostra um aplicativo totalmente funcional com aparência móvel. Para ter uma ideia de como fica no dispositivo móvel, use o botão de visualização que se parece com um botão "reproduzir" no canto superior direito, próximo ao ícone "salvar". Selecione o botão “reproduzir” (ou pressione F5) e experimente a interface.
Observe que você pode percorrer a lista de itens, selecionar um item, ver alguns detalhes do item, editar detalhes do item e salvar/cancelar as alterações. Ao criar um aplicativo com o botão do Excel, você rapidamente pode ter um aplicativo totalmente funcional.
Vamos sair do modo de visualização pressionando o X no canto superior direito e salve este aplicativo.
Selecione o botão Salvar e digite um nome para este aplicativo no painel Salvar como. Em seguida, selecione Salvar.
Selecione o botão Voltar na parte superior esquerda da barra de comandos para sair do aplicativo.
Agora que você observou o Power Apps criar um aplicativo para você, vamos começar a criar nosso próprio aplicativo.
Criar um aplicativo de tela
A partir do Power Apps Maker Portal (make.powerapps.com), selecione a guia Criar e selecione Aplicativo em branco.
Na janela pop-up Criar, em Aplicativo de tela em branco, selecione Criar.
Dê um nome ao seu aplicativo "Máquinas de café Contoso" e deixe o botão de alternância de Formato selecionado para Tablet. Selecione Criar.
Agora você verá uma tela em branco com um pop-up Bem-vindo ao Power Apps Studio ou uma mensagem na tela. Ele solicita que você "Adicione um item do painel Inserir ou conecte-se aos dados". Começamos criando uma galeria para visualizar nossos registros de dados. Selecione a opção de galeria. Se você não vir este pop-up, selecione o botão Inserir na barra de comandos e localize/selecione Galeria vertical.
Um controle chamado Gallery1 aparece na tela. Ele atualmente não está conectado a dados, então o Power Apps nos leva a Selecionar uma fonte de dados. Com todos os diferentes tipos de dados, precisamos dizer ao Power Apps a que tipo de dados queremos nos conectar. Neste caso, precisamos nos conectar à planilha do Excel que salvamos no OneDrive. Realizamos isso com a conexão do OneDrive for Business. Essa conexão nos permite acessar documentos de nossa conta comercial do OneDrive e de qualquer biblioteca de documentos do SharePoint à qual tenhamos acesso.
Localize/selecione o OneDrive for Business. Você pode inserir o OneDrive no campo de pesquisa para encontrá-lo rapidamente. Talvez seja necessário selecionar Adicionar uma conexão e autenticar sua conexão com ela.
Depois de concluir a conexão com o OneDrive for Business, um painel aparecerá no lado direito da tela solicitando para você Escolher um arquivo do Excel. Encontre e selecione o documento do Excel que copiamos para nosso OneDrive for Business chamado "CoffeeMachineData.xlsx". Se estiver com problemas para encontrá-lo, você pode inserir o nome do arquivo no campo de pesquisa para restringir as opções.
Depois de selecionar "CoffeeMachineData.xlsx", o painel agora solicitará para você Escolher uma tabela. Deve haver uma única opção de “CoffeeMachines”. Selecione a caixa ao lado de "CoffeeMachines" e selecione o botão Conectar na parte inferior do painel.
Selecione sua galeria mais uma vez. No lado direito da tela, há um painel Propriedades para o controle da galeria. Verifique se a Fonte de dados está definida como CoffeeMachines. Se você ainda não viu a galeria preenchida com imagem, título e preço, você deve estar vendo isso agora.
Redimensione a galeria para alongá-la até a parte inferior da tela e tocar no lado esquerdo da tela.
Agora vamos adicionar um controle de formulário para que possamos atualizar os dados exibidos em nossa galeria. Selecione o botão Inserir no menu de cabeçalho. Localize e selecione Editar formulário.
O controle Form1 aparece na tela. Arraste-o para a metade direita da tela e reposicione-o e redimensione-o para que ocupe a metade direita da tela.
Observe que nosso novo formulário nos solicita a Conectar aos dados. Com o controle de formulário selecionado, observe o painel Propriedades no lado direito da tela. Diretamente em Propriedades, você verá Fonte de dados e um menu suspenso dizendo Nenhum. Selecione o menu suspenso e selecione a tabela CoffeeMachines.
Vamos adicionar campos ao nosso formulário, já que ele está em branco. No painel Propriedades, selecione o link para Editar campos logo abaixo do menu suspenso Fonte de dados.
No painel pop-up Campos, selecione o botão Adicionar campo.
Marque a caixa ao lado de cada campo em Escolher um campo. Depois, selecione Adicionar. Seu formulário agora mostra campos de entrada organizados em um formulário de três colunas. Todos os campos deverão estar em branco.
A seguir, precisamos designar qual item de nossos dados será exibido no formulário. Observe o controle Galeria à esquerda da tela. A Galeria mostra todas as máquinas de café, por isso queremos que nosso formulário mostre uma delas. Com o formulário selecionado, vá até a barra de fórmulas (fx) na parte superior da tela. À esquerda da barra de fórmulas, há um menu suspenso para encontrar as propriedades do controle Formulário. Selecione o menu suspenso e localize/selecione a propriedade Item.
No campo Item da caixa de entrada da fórmula fx, insira Gallery1.Selected. Você deverá ver imediatamente os dados preenchendo os campos do formulário.
Você pode visualizar o aplicativo a qualquer momento selecionando o ícone "Reproduzir" no canto superior direito da barra de comandos, pressionando a tecla de função F5 ou simplesmente selecionando e mantendo pressionada a tecla Alt do teclado. Com o aplicativo no modo de visualização, experimente percorrer a galeria e selecionar algumas máquinas de café diferentes. Observe como ele preenche o formulário com base no item selecionado.
A seguir, vamos adicionar um controle de botão para que possamos salvar as alterações feitas nos dados. Selecione o botão Inserir na barra de comandos e localize/selecione Botão.
Vamos alterar o texto do botão de “Botão” para “Salvar”. No painel Propriedades à direita, o primeiro item é a propriedade Text. Substitua “Botão” por “Salvar” e insira-o.
Reposicione o novo controle de botão no formulário na parte inferior da tela.
Com o controle de botão selecionado, vá até a barra de fórmulas fx. Altere a propriedade OnSelect de "false" para read SubmitForm(Form1).
Agora coloque o aplicativo no modo de Visualização novamente. E atualize um dos campos do formulário, como Preço da Máquina. Pressione o botão Salvar para gravar as alterações.
A seguir, vamos adicionar um cabeçalho para o aplicativo. Selecione o botão Inserir novamente e localize/selecione um controle de Retângulo.
Coloque o controle de retângulo no canto superior esquerdo da tela e alongue-o para que fique totalmente no lado direito da tela. No painel de propriedades do retângulo, localize o campo de entrada Height e insira 75.
Dica
Qualquer item no painel de propriedades tem um valor correspondente visível na barra de fórmulas (fx). Se não conseguir localizá-lo no painel de propriedades, você poderá selecionar o menu suspenso à esquerda do campo de entrada da barra de fórmulas. Neste caso, você pode localizar/selecionar a propriedade Height.
Agora redimensione a galeria e os controles do formulário para que caibam logo abaixo do retângulo.
Insira um controle Rótulo de texto. Mude a propriedade Text para ler "Máquinas de Café Contoso".
Em seguida, ajuste o Size do controle de rótulo para 24 e redimensione-o para que o título caiba em uma única linha.
A seguir, alteramos a cor da fonte. Você pode alterá-la selecionando a configuração Cor na barra de comandos. Em Cores padrão, selecione o círculo branco.
Por fim, reposicione seu controle de rótulo para que ele fique centralizado no meio da tela, no meio do retângulo. Observe como as linhas tracejadas aparecem conforme você se aproxima do centro da tela para ajudá-lo a alinhar o rótulo.
Pronto. Você criou um aplicativo de tela única a partir de uma tela em branco que permite atualizar e salvar qualquer dado nos dados da sua máquina de café. Na próxima unidade, continuaremos a desenvolver esse aplicativo e aprenderemos novos conceitos.