Exercício: criar um aplicativo de tela

Objetivo de aprendizagem

Neste exercício, os alunos usam o Copilot para criar um aplicativo de tela que os funcionários podem usar para relatar problemas de manutenção. Use o Copilot para criar o modelo de dados e o layout inicial do aplicativo.

Após a conclusão com êxito deste laboratório, você:

• Usa o Copilot para ajudá-lo a criar um modelo de dados para dar suporte ao seu aplicativo.
• Modifica um aplicativo de tela.

Cenário

A Contoso College está procurando um aplicativo que os funcionários possam usar para relatar problemas de manutenção em todo o campus. A Contoso quer criar um aplicativo de tela que os funcionários possam acessar de seus telefones conforme necessário.

Após a conclusão com êxito deste laboratório, você:

• Usa o Copilot para ajudá-lo a criar um modelo de dados para dar suporte ao seu aplicativo.
• Modifica um aplicativo de tela.

Tarefa 1: Criar modelo de dados e criar aplicativo

1. Abra um navegador da Web e navegue para o Power Apps Maker Portal.

2. Usando a navegação à esquerda, selecione Criar.

3. Em Criar seus aplicativos, escolha Começar com o Copilot.

4. Na tela Descrever as tabelas que você deseja que o Copilot crie, digite: "Criar uma única tabela para enviar problemas de manutenção".

5. Selecione o botão Opções de tabela. No menu exibido, selecione Uma Tabela.

   

6. Selecione o botão Gerar.

O Copilot criou uma tabela Maintenance Issue. Em seguida, adicionamos mais colunas à tabela.

7. No painel Copilot, insira: "Adicionar uma coluna de opção chamada Issue Type".

8. No painel Copilot, adicione individualmente as solicitações a seguir.

   1. "Adicione uma coluna de texto chamada Location".
   2. "Adicione uma coluna de texto chamada Contact Number".
   3. "Adicione uma coluna de opção chamada Priority level".
   4. "Adicione uma coluna de texto chamada Access Instructions".
   5. "Adicione uma coluna de texto chamada Resolution Notes".

Em seguida, removeremos todas as colunas desnecessárias, pois elas serão substituídas por Colunas de Pesquisa.

9. Se elas existirem na sua tabela, insira os seguintes comandos para removê-las.

   1. "Remover a coluna Reported By".
   2. "Remover a coluna Assigned To / Technician".

Sua tabela Maintenance Issue deve ser semelhante à imagem mostrada:

Em seguida, adicionaremos a tabela de usuários ao modelo de dados para que possamos associar solicitações de Maintenance Issue a usuários específicos.

10. Na Barra de comandos, selecione + Tabela existente.

11. Alterne de Recomendado para Todas as Tabelas.

12. No campo Pesquisar, insira User.

13. Selecione a tabela User e o botão Adicionar Selecionados.

14. Na Barra de comandos, selecione Criar relacionamentos.

15. Configure o relacionamento da seguinte forma:

    • Um: User
    • Muitos: Maintenance Issue
    • Nome de Exibição: Requesting Employee

16. Selecione Concluído.

17. Na Barra de comandos, selecione Criar relacionamentos.

18. Configure o relacionamento da seguinte forma:

    • Um: User
    • Muitos: Maintenance Issue
    • Nome de Exibição: Assigned to

19. Selecione Concluído.

Seu modelo de dados preenchido deve ser semelhante à imagem mostrada:

20. Selecione o botão Salvar e abrir o aplicativo.

Tarefa 2: Personalizar seu novo aplicativo

Agora que seu novo aplicativo foi criado, fazemos algumas modificações nele para melhor atender às nossas necessidades. Começamos fazendo algumas modificações na tela de boas-vindas.

1. Com o novo aplicativo aberto, selecione o espaço reservado Imagem acima do texto Maintenance Issues.
2. No menu exibido, selecione Editar>Imagens de Estoque.
3. No campo Pesquisar, insira Medical, selecione a imagem do Teclado do computador e estetoscópio e escolha Inserir.
4. Em seguida, selecione o espaço reservado Imagem acima de Usuários.
5. No campo Pesquisar, insira People, selecione a imagem que deseja usar e escolha Inserir.
6. No menu exibido, selecione Editar>Imagens de Estoque.

Em seguida, vamos ajustar o tamanho das imagens para que possam ser lidas com mais facilidade pelos usuários. Além disso, vamos ajustar o texto exibido para cada item.

7. Na barra de comandos, selecione o botão Propriedades. (Localizado à direita do botão de edição.)

8. Selecione a imagem acima Maintenance Issues.

9. No painel Propriedades, configure a imagem como a seguir:

   • Posição da Imagem: Preenchimento
   • Largura: 350
   • Altura: 350

10. Repita a etapa anterior para definir a Altura e a Largura da imagem Usuários como 350 x 350.

11. Selecione o texto abaixo de Maintenance Issues.

12. No painel Propriedades, selecione o campo Text e altere o texto para: "Enviar Maintenance Issue".

13. Selecione o texto Tela de Boas-Vindas no Cabeçalho.

14. No painel Propriedades, defina Mostrar Logotipo como Desativado.

15. Defina Imagem do Perfil como Desativada.

16. No painel Propriedades, no grupo Estiloe tema, selecione o ícone de cor Preenchimento.

17. Altere a cor para Preto.

18. Verifique se você ainda tem o Cabeçalho selecionado e altere o Título para Relatório de Problemas da Contoso.

Seu aplicativo é semelhante à imagem mostrada.

Tarefa 3: Adicionar uma nova tela ao aplicativo

Decidimos que, além de enviar Maintenance Issues, os usuários também devem conseguir adicionar ativos.

1. Com o aplicativo ainda aberto, se necessário, expanda o painel Copilot. No Copilot, insira o seguinte texto: "Adicionar uma nova tela chamada Assets". Selecione Enviar.

2. Selecione o botão Manter para aceitar a tela.

3. Uma nova tela chamada Assets é adicionada ao aplicativo.

4. Na tela, selecione Com Dados.

5. Na tela Selecionar Fonte de Dados, selecione Criar tabelas.

6. No Copilot, insira o seguinte texto: "Criar uma nova tela chamada Assets. Ela deve incluir as seguintes colunas. Asset Name, Asset ID, Asset Type, Asset Location, Data Installed e Department."

7. Se outra tabela (Department) tiver sido adicionada, use o Copilot para excluí-la inserindo: "Remover Tabela Department".

8. Depois que a tabela for criada, selecione Salvar e sair.

9. De volta ao Aplicativo, selecione Com Dados novamente.

10. Uma nova tela Asset é adicionada ao aplicativo.

11. Se necessário, na Barra de comandos, selecione o botão Propriedades. (Ao lado do botão Edição.)

12. Em seguida, selecione na lista de Assets. Um ícone de Lápis deve aparecer. Selecione o ícone de Lápis.

13. Selecione o botão Inserir e escolha Rótulo de Texto.

14. Posicione o Rótulo de Texto, localizado pelo Asset Location.

    

15. Com o Rótulo de Texto selecionado, na barra de fórmulas, insira o seguinte texto: ThisItem.’Asset Type’.

    

16. Selecione no plano de fundo do Formulário.

17. Defina a propriedade Columns como 1.

18. A tela concluída deve ser semelhante à imagem mostrada.

    

Tarefa 4: Atualizar a tela de boas-vindas

Após a revisão, decidimos que a capacidade de criar usuários neste aplicativo é desnecessária, por isso alteramos a tela de boas-vindas para permitir o acesso a Assets.

1. Usando a Exibição em árvore, selecione a Tela de Boas-Vindas.
2. Selecione a Imagem acima de Usuários/Contatos.
3. No menu exibido, selecione Editar e escolha Imagens de Estoque.
4. No campo Pesquisar, insira Equipment e selecione uma imagem a ser usada.
5. Defina a propriedade OnSelect da imagem como: Navigate('Assets')

6. Selecione o texto Usuários/Contatos e defina a propriedade Text como Assets.
7. Selecione o Text abaixo de Equipment e altere a propriedade Text para: "Exibir e criar registros de ativo".

Tarefa 5: Testar o aplicativo

Em seguida, vamos testar seu aplicativo para garantir que ele esteja funcionando corretamente.

1. Na Barra de comandos, selecione o botão Reproduzir.
2. Selecione a imagem Assets.
3. No campo Pesquisar, insira Escritório. (Observe como a lista é filtrada.)
4. Selecione o registro Office Chair.
5. Selecione o botão Editar (Lápis). Altere a Categoria para Furniture.
6. Altere o Asset Type para Equipment.
7. Selecione o botão Salvar (marca de seleção).
8. Selecione o botão Salvar.
9. Observe como o Asset Type da Desk muda para Equipment.
10. Selecione o botão Página Inicial.
11. Selecione o X roxo para sair do modo Visualização.

Tarefa 6: Salvar e publicar o aplicativo

Meta: salve e publique o aplicativo para torná-lo acessível em navegadores da Web, dispositivos móveis ou plataformas incorporadas, como o SharePoint ou o Teams.

1. No Power Apps Studio, selecione o botão Salvar.
2. Em Salvar como tela, defina o Nome como Relatório de Problemas da Contoso e selecione Salvar.
3. Selecione o botão Publicar.