Exercício: criar seu primeiro aplicativo no Power Apps

No exercício a seguir, você criará seu primeiro aplicativo usando uma tabela do Excel como a fonte de dados. Você pode usar qualquer tabela do Excel, desde que os dados sejam formatados como uma tabela e armazenados em um local que possa ser acessado pelo Microsoft Power Apps, como o OneDrive.

Este exercício inclui duas partes:

• Gerar um aplicativo de três telas a partir de uma tabela do Excel.

• Criar um aplicativo de tela em branco que será aprimorado em unidades futuras.

Ambos os aplicativos usam os mesmos dados. O aplicativo de três telas serve como referência para entender como os controles trabalham juntos para exibir dados.

Obter os dados

Para concluir este exercício, será necessário baixar os arquivos de App in a Day. Selecione o link para baixar os arquivos. Em seguida, extraia os arquivos do arquivo zip baixado. Depois de extrair os arquivos, localize e abra o arquivo do Excel chamado Machine-Order-Data.xslx.

1. Abra o OneDrive em um navegador. Selecione + Adicionar novo>Upload de arquivos.

   

2. Na caixa de diálogo Abrir, navegue até a pasta Downloads e selecione Machine-Order-Data.xlsx.

3. Selecione Abrir. Em seguida, procure por "Machine-Order-Data" no OneDrive para confirmar que o upload foi bem-sucedido.

Criar um aplicativo de três telas

Agora você criará um aplicativo móvel de três telas.

1. Acesse o Power Apps Maker Portal make.powerapps.com e se conecte.

2. No painel de navegação esquerdo, selecione Aplicativos.

3. Selecione Iniciar com um modelo de aplicativo.

   

4. Em Aplicativos móveis centrados em dados, selecione Do Excel.

5. Em Selecionar a tabela, expanda o OneDrive for Business, localize o arquivo Machine-Order_Data.xlsx, selecione a tabela Máquinas e escolha Criar aplicativo.

   

   O Power Apps gera um aplicativo móvel funcional. Se o seu aplicativo for semelhante à imagem abaixo, vá para a próxima etapa. Caso contrário, pule para a etapa 17.

   

6. Expanda BrowseGallery1 e selecione Title1. Com Title1 selecionado, mova o cursor para cima até o menu suspenso Propriedade (acima do cabeçalho do Modo de exibição de árvore) e selecione a propriedade chamada Text.

7. Na barra de fórmulas, exclua o valor existente e digite ThisItem. (certifique-se de inserir o ponto). O recurso de preenchimento automático exibe uma lista de todos os campos disponíveis para o item atual na galeria.

   

8. Como você deseja que o nome da máquina apareça no título, selecione 'Machine Name' na lista suspensa. Observe que a barra de fórmulas agora mostra ThisItem.'Machine Name'. Essa é uma fórmula do Power Fx, que informa o Power Apps para exibir o campo 'Machine Name' para cada item na galeria.

   Observe que cada item na galeria agora exibe seu próprio nome de máquina. Esse é o poder de usar ThisItem em uma galeria: ele se refere dinamicamente ao registro atual, de modo que cada controle dentro da galeria mostra dados específicos do item em questão.

9. Retorne ao painel Modo de exibição de árvore em BrowseGallery1 e selecione Subtitle1. Com Subtitle1 ainda selecionado, selecione a propriedade Text. Dessa vez, digite ThisItem.Price na barra de fórmulas.

   

   Observe que cada item na galeria agora exibe o preço do item.

10. Em seguida, você adicionará a cor da máquina a cada item na galeria. Selecione Body1 em BrowseGallery1 no painel Modo de exibição de árvore. Com Body1 ainda selecionado, selecione Text na lista suspensa de propriedades e digite ThisItem.Color.

    

11. Você também pode adicionar uma imagem da máquina de café à galeria. Primeiro, você precisa mover os campos título, subtítulo e corpo ligeiramente para a direita de modo a abrir espaço para a imagem. Enquanto mantém pressionada a tecla Shift no teclado, selecione os campos Title1, Subtitle1 e Body1 no painel Modo de exibição de árvore ou na tela da galeria. Sua tela deve ser semelhante à imagem abaixo.

    

12. Com os três campos ainda selecionados, selecione X na lista suspensa de propriedades. O valor X é a localização horizontal dos campos na tela. Defina o valor na barra de fórmulas para 80. (Como alternativa, você pode arrastar os campos para a direita na tela.)

13. Select no espaço em branco que você criou à esquerda dos campos Body1, Subtitle1 e Title1. Isso desmarca os campos, e sua tela deve se parecer com a imagem abaixo.

    

14. Na barra de comandos, selecione + Inserir, na barra de pesquisa, digite imagem e selecione o controle de Imagem.

    

15. Redimensione e mova a imagem no item superior da tela até que ela esteja bem posicionada à esquerda dos campos título, subtítulo e corpo.

16. No painel Modo de exibição de árvore ou na tela, selecione a imagem, selecione Image na lista suspensa de propriedades e digite ThisItem.Photo. As imagens da máquina de café agora são exibidas em sua galeria.

    

    Use as habilidades que você acabou de adquirir e atualize as outras telas, DetailScreen1 e EditScreen1, do seu aplicativo para exibir os campos que deseja.

17. Para ter uma ideia da aparência do aplicativo em um 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 de "salvar"). Selecione o botão “reproduzir” (ou pressione F5) e teste 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 ou cancelar as alterações. Ao criar um aplicativo com o botão do Excel, rapidamente, você pode ter um aplicativo totalmente funcional.

    Vamos sair do modo de visualização pressionando o X no canto superior direito e salve este aplicativo.

18. Selecione o botão Salvar e digite um nome para este aplicativo no painel Salvar como. Em seguida, selecione Salvar.

19. Selecione o botão Voltar na parte superior esquerda da barra de comandos para sair do aplicativo.

Depois de ter visto o Power Apps criando um aplicativo, você pode começar a criar seu próprio aplicativo do zero.

Criar um aplicativo de tela

1. A partir do Power Apps Maker Portal (make.powerapps.com), selecione a guia Criar.

2. Na janela pop-up Criar, selecione Começar com um aplicativo de tela em branco.

   

3. Na janela pop-up Começar com uma tela em branco que é exibida, selecione Tamanho do tablet.

4. Você está navegado para a tela de edição do Power Apps. Se o pop-up Bem-vindo ao Power Apps Studio for exibido, você poderá selecionar Ignorar.

5. Selecione Salvar no canto superior direito da tela e, na janela Salvar como, dê ao seu aplicativo o nome Contoso Coffee Machines. Selecione Salvar.

   

6. Comece criando uma galeria para exibir os registros de dados. Selecione o botão Inserir na barra de comandos, localize e selecione Galeria vertical. Esse é o mesmo tipo de galeria que o Power Apps criou automaticamente para você no aplicativo móvel.

   

7. Um controle chamado Gallery1 aparece na tela. Atualmente, ele não está conectado a dados, de modo que no Power Apps, você precisa Selecionar uma fonte de dados. Com todos os diferentes tipos de dados, é preciso informar o Power Apps a que tipo de dados você deseja se conectar. Nesse caso, você se conectará à planilha do Excel que salvou no OneDrive com a conexão do OneDrive for Business. Essa conexão permite acessar documentos da sua conta comercial do OneDrive e de qualquer biblioteca de documentos do SharePoint à qual você tenha acesso.

8. Localize e selecione OneDrive for Business. Você pode digitar OneDrive no capo de pesquisa para localizá-lo rapidamente. Talvez seja necessário selecionar Adicionar uma conexão e autenticar sua conexão com ela.

   

9. Depois de concluir a conexão com o OneDrive for Business, um painel aparecerá no lado direito da tela, no qual você tem que Escolher um arquivo do Excel. Encontre e selecione o documento do Excel chamado "Machine-Order-Data.xlsx" que você copiou no seu OneDrive. Se estiver com problemas para encontrá-lo, insira o nome do arquivo no campo de pesquisa para restringir as opções.

   

10. Depois de selecionar "Machine-Order-Data.xlsx", no painel, você precisa Escolher uma tabela. Deve haver duas opções: "Machines" e "MachineTypes". Selecione a caixa ao lado de "Machines" e, em seguida, o botão Conectar na parte inferior do painel.

    

11. Você receberá um aviso de que a fonte de dados foi adicionada ao seu aplicativo.

12. 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 Machines. Se sua galeria não foi preenchida com a imagem, o título e o preço, adicione-os agora seguindo as mesmas instruções que você usou com o aplicativo móvel acima. (Dica: use ThisItem.'Machine Name', ThisItem.Price e ThisItem.Photo.)

    

13. Redimensione a galeria para alongá-la até a parte inferior da tela e tocar no lado esquerdo da tela.

14. Agora você pode adicionar um controle de formulário para atualizar os dados exibidos na galeria. Selecione em uma parte em branco da tela para desmarcar a galeria e, em seguida, selecione o botão Inserir no menu de cabeçalho. Localize e selecione Editar formulário.

    

15. O controle Form1 aparece na tela. Arraste-o para a metade direita da tela, reposicione-o e redimensione-o para que ocupe a metade direita da tela.

16. Observe que o novo formulário solicita a opção 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 com a opção Nenhum. Selecione o menu suspenso e a tabela Machines.

    

17. Agora é possível adicionar campos ao formulário, já que ele está em branco. No painel Propriedades, selecione o link para Editar campos. Ele está logo abaixo do menu suspenso Fonte de dados.

18. No painel pop-up Campos, selecione o botão Adicionar campo.

19. Marque a caixa ao lado de cada um dos seguintes campos em Escolher um campo: Foto, ID da máquina, Nome da Máquina, Preço, Cor, Descrição, Recurso, Tipo de Máquina, ID do Tipo de Máquina, Média de Copos por Semana e Média de Espressos por Semana. Certifique-se de verificá-los na ordem listada. Talvez você precise rolar a tela para baixo para ver todos eles. Em seguida, selecione Adicionar. Feche o painel Campos.

    

    Seu formulário agora mostra os campos de entrada organizados em um formato de três colunas. Observe que os campos foram adicionados na ordem em que você os selecionou. Todos os campos devem estar em branco.

20. A seguir, você precisa designar qual item de nossos dados será exibido no formulário. Observe o controle de Galeria à esquerda da tela. A Galeria mostra todas as máquinas de café, e você quer que o 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.

    

21. 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.

    

22. A imagem da foto foi adicionada como uma caixa de texto em vez de um controle de imagem. É por isso que você pode ver a URL da imagem em vez da imagem em si. Você pode corrigir isso selecionando o cartão de dados da foto (no exemplo, Photo_DataCard2). No cartão de dados da foto, selecione o valor do cartão de dados (no exemplo, DataCardValue12). Exclua o valor do cartão de dados.

    

23. Quando você exclui o valor do cartão de dados, alguns x vermelhos aparecerão na tela, indicando que há erros de fórmula. Você pode corrigi-los em apenas alguns instantes. Mas, primeiro, selecione o cartão de dados da foto novamente e, em seguida, selecione Inserir. Procure a palavra imagem e selecione Imagem.

24. Você receberá uma mensagem de erro pop-up informando que o Cartão de dados está bloqueado. Você precisará desbloquear o cartão de dados para poder inserir um controle de imagem. Selecione Desbloquear e adicionar. Um controle de imagem agora deve ser inserido no cartão de dados da foto.

25. Selecione o controle de Imagem recém-inserido e, na barra de fórmulas, digite ThisItem.Photo. Sua tela deve ser semelhante à imagem abaixo.

    

26. Agora, você pode corrigir os erros de fórmula que apareceram quando excluiu o valor do cartão de dados de entrada de texto da imagem. Selecione o x vermelho mais à direita e, em seguida, selecione Editar na barra de fórmulas.

    

27. A barra de fórmulas está mostrando DataCardValue12.Y + DataCardValue12.Height (ou o nome equivalente dos valores do cartão de dados que você excluiu anteriormente). Você lembrará que DataCardValue12 é o cartão de dados que excluiu. Altere a fórmula para excluir a referência ao valor do cartão de dados e incluir o nome do controle de imagem. No exemplo, o controle de imagem é Image2, portanto, a fórmula atualizada seria Image2.Y + Image2.Height. (A fórmula deve incluir o nome da imagem real.) O primeiro aviso de erro desaparece.

28. Selecione o aviso de erro restante (o x vermelho) e novamente selecione Editar na barra de fórmulas. A barra de fórmulas mostra que a propriedade Update está definida como DataCardValue12.Text. Exclua o valor do cartão de dados na fórmula e o substitua novamente pelo nome do seu controle de imagem. No exemplo, a fórmula seria atualizada para Image2.Text.

    O erro não desapareceu desta vez porque a imagem não tem uma propriedade chamada text. Você precisará editar ainda mais a fórmula. Altere a fórmula para Image2.Image. O aviso de erro da fórmula deve desaparecer agora.

29. Visualize o aplicativo 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 enquanto clica nos controles. 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 o item selecionado.

30. A seguir, você adicionará um controle de botão para salvar as alterações feitas nos dados. Primeiro, selecione Screen1 no painel Modo de exibição de árvore. Selecione o botão Inserir na barra de comandos, localize e selecione Botão.

    

31. Ajuste o tamanho e a localização do botão e do formulário para que o botão fique logo abaixo do formulário no lado direito da tela.

32. Altere o texto do botão, de "Botão" para "Salvar alterações". No painel Propriedades à direita, o primeiro item é a propriedade Text. Substitua "Botão" por "Salvar Alterações" e insira-o.

    

33. Com o controle de botão selecionado, vá até a barra de fórmulas fx. Altere a propriedade OnSelect de "false" para SubmitForm(Form1). (Se o formulário não se chamar Form1, use o nome real do formulário.)

34. 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.

35. A seguir, você adicionará um cabeçalho para o aplicativo. Selecione Screen1 no painel Modo de exibição de árvore. Depois de selecionar o botão Inserir novamente, localize e selecione um controle de Retângulo.

36. Coloque o controle de retângulo no canto superior esquerdo da tela e alongue-o para que se estenda completamente do lado esquerdo até o lado direito da tela. No painel de propriedades do retângulo, localize o campo de entrada Altura 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.

37. Agora redimensione a galeria e os controles do formulário para que caibam logo abaixo do retângulo.

38. Insira um controle Rótulo de texto. Altere a propriedade Text para indicar "Contoso Coffee Machines".

39. Em seguida, ajuste o Tamanho do controle de rótulo para tamanho de fonte 24 e redimensione-o para que o título caiba em uma única linha.

40. Em seguida, altere a cor da fonte selecionando a configuração Cor na barra de comandos. Em Cores padrão, selecione o círculo branco.

41. Com o rótulo ainda selecionado, encontre Alinhamento do texto no painel de propriedades. Altere o alinhamento para ser centralizado.

42. 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 ajudar a alinhar o rótulo. Sua tela deve ser semelhante à imagem abaixo.

    

Agora você criou um aplicativo de tela única do zero que lê e atualiza os dados da máquina de café. Na próxima unidade, você vai aprimorar esse aplicativo para aprender conceitos adicionais do Power Apps.