Criar um aplicativo otimizado para dispositivos móveis que usa designs dinâmicos

  • 6 minutos

Neste exercício, você criará um aplicativo de tela única otimizado para dispositivos móveis usando o Microsoft Power Apps e dados de Contoso Coffee Machines. Esta tarefa prática facilita a compreensão de como usar contêineres de layout automático e observar como o design dinâmico se comporta em todos os dispositivos.

Você começará na página inicial do Power Apps. Siga estas etapas:

  1. Baixe os arquivos do App in a Day e extraia-os. Abra o arquivo do Excel chamado Machine-Order-Data.xslx.

  2. Vá para make.powerapps.com. Selecione Criar>Começar com uma tela em branco>Dinâmico. Se um pop-up de boas-vindas for exibido, selecione Ignorar.

  3. Consulte a imagem abaixo para obter ajuda com as próximas etapas. Na barra de comandos, selecione o botão Configurações. Se ele não estiver visível, selecione Aplicativo no painel Modo de exibição de árvore para revelá-lo.

    A imagem mostra o painel Configurações do aplicativo com a barra de comandos e o Modo de exibição de árvore.

  4. No painel pop-up Configurações, selecione a guia Exibição, role para baixo e verifique se a opção Dimensionar para ajustar está Desativada. (Isso muda Bloquear taxa de proporção para Desativado.)

  5. Feche o pop-up Configurações.

  6. Crie uma Nova tela selecionando + Nova tela no painel Modo de exibição de árvore. Selecione um layout de Barra lateral para a nova tela. Dê nome de Catalog Screen clicando duas vezes no nome da tela (Screen2) e, em seguida, digitando "Catalog Screen".

  7. Crie outra tela; para essa tela, use o modelo Success. Dê à tela o nome "Success Screen".

  8. Exclua Screen1 clicando na tela no Modo de exibição de árvore, selecionando as reticências à direita da tela e, em seguida, selecionando Excluir.

  9. Em seguida, selecione o contêiner da barra lateral da tela Catalog Screen. (Você precisará expandir várias camadas de contêineres para encontrar o contêiner da barra lateral.) Adicione uma galeria vertical selecionando + Inserir e, em seguida, Galeria vertical com SidebarContainer1 selecionado.

  10. O painel Selecionar uma fonte de dados deve ser aberto automaticamente. Se isso não acontecer, selecione o botão Adicionar dados na barra de comandos com o controle da galeria selecionado no painel Modo de exibição de árvore.

  11. Em seguida, localize e selecione OneDrive for Business e crie a conexão. (Você pode usar o campo de entrada de pesquisa para restringir sua pesquisa.)

  12. O painel Escolher um arquivo do Excel é exibido à direita da sua tela. Selecione o arquivo Machine-Order-Data.xlsx e, em seguida, selecione a tabela Máquinas. Conecte a tabela selecionando Conectar na parte inferior do painel. Você deve ver uma notificação na parte superior da tela; clique no X para fechá-la.

  13. Talvez seja necessário atualizar os dados que estão sendo exibidos em sua galeria. Se a sua galeria se parecer com a imagem a seguir, siga as etapas abaixo. Se os campos corretos estiverem sendo exibidos, você poderá prosseguir diretamente para a etapa 17 abaixo.

    Captura de tela da galeria exibindo os campos a serem atualizados.

  14. Expanda a galeria e selecione o campo de título. Na barra de fórmulas, altere a propriedade Text do rótulo de texto do título para ThisItem.'Machine Name'.

  15. Em seguida, selecione o campo de subtítulo. Na barra de fórmulas, altere a propriedade Text do rótulo de texto do subtítulo para ThisItem.Price.

  16. Em seguida, selecione o campo de imagem. Na barra de fórmulas, altere a propriedade Image da propriedade Image do controle de imagem para ThisItem.Photo.

  17. No Modo de exibição de árvore, selecione a lista suspensa ao lado do contêiner da barra lateral para recolher seu conteúdo.

  18. Selecione o contêiner principal no lado direito da tela, chamado MainContainer2.

    Captura de tela das etapas numeradas de 11 a 13.

  19. Selecione o ícone de adição (+) (ou o botão Inserir na barra de comandos) para inserir Editar formulário. Selecione a tabela Máquinas como fonte de dados.

  20. No painel Propriedades à direita, selecione a opção Editar campos em Fonte de dados.

  21. No painel Campos, selecione Adicionar campo e adicione os campos a seguir marcando a caixa ao lado de cada nome de campo nesta ordem: Foto, ID da Máquina, Nome da Máquina, Cor, Descrição, Recurso, Preço, Tipo de Máquina, ID do Tipo de Máquina, Média de Copos por Semana e Média de Espressos por Semana. Em seguida, selecione o botão Adicionar na parte inferior.

  22. Feche o painel Campos.

  23. Observe que os campos foram inseridos no formulário na ordem em que você os selecionou.

  24. Com Form1 ainda selecionado, no menu suspenso Propriedade, no canto superior esquerdo da tela (acima do cabeçalho do Modo de exibição de árvore), selecione a propriedade Item e, no campo de fórmula (fx), insira: Gallery1.Selected. (Se o nome da galeria não for Gallery1, use o nome real da galeria.)

  25. Por fim, com o formulário ainda selecionado, defina a propriedade Fill como Color.LightSteelBlue.

  26. A seguir, você adicionará ao nosso contêiner de cabeçalho. Selecione o controle HeaderContainer2 (ao longo deste exercício, use o nome do seu controle de cabeçalho real, caso ele seja diferente) e use o ícone de adição (+) para inserir um controle de Rótulo de texto. Ajuste as propriedades do rótulo de texto usando a barra suspensa de propriedades e a barra de fórmulas da seguinte maneira:

    Text: "Contoso Coffee Catalog"

    Size: altere de 13 para 20

    Height: altere de 40 para Parent.Height

    Width: altere de 150 para 200

  27. Usando a lista suspensa Alinhar na barra de comandos (à esquerda do botão Cor; como alternativa, você pode procurar a opção Alinhamento de texto no painel Propriedades à direita), altere Alinhar de Alinhar à esquerda para Justificar.

  28. Em seguida, selecione no contêiner Cabeçalho fora do rótulo de texto para desmarcar o controle de rótulo de texto. Insira um controle de Imagem em HeaderContainer2 e ajuste as propriedades da seguinte forma:

    Image: User().Image

    Height: Parent.Height

  29. Você pode criar um ícone de conexão inserindo um Ícone de Globo em HeaderContainer2. Ajuste as propriedades da seguinte maneira:

    Height: 20

    Width: 20

    Color: If(Connection.Connected, Color.Green, Color.LightSteelBlue)

  30. Em seguida, você pode justificar à direita os itens do contêiner do cabeçalho. Para fazer isso, selecione HeaderContainer2 no Modo de exibição de árvore e procure no painel Propriedades à direita. Localize a opção Justificar (horizontal). A terceira opção é Fim (que você pode ver ao passar o mouse sobre o ícone). Selecione-a.

  31. Por fim, você pode adicionar uma cor de fundo ao contêiner de cabeçalho. Ajuste a propriedade Fill para: Color.LightSteelBlue.

  32. Selecione MainContainer2, onde reside seu formulário. Insira um controle de Botão com as seguintes propriedades:

    Text: "Salvar"

    Width: Parent.Width

    OnSelect: SubmitForm(Form1)

  33. Selecione o formulário dentro de MainContainer2 e ajuste a propriedade OnSuccess para Navigate('Success Screen').

  34. No painel Modo de exibição de árvore, selecione Success Screen.

  35. Selecione o ícone Verificação (iconCheck1) e atualize a propriedade OnSelect para:

    Back()

  36. Entre no modo visualização. Ajuste a tela para o iPhone 12 selecionando o menu suspenso Telefone. Observe como o layout se ajusta entre dispositivos e orientações.

  37. Salve seu aplicativo se quiser usá-lo ou revisitá-lo mais tarde.

Agora você criou um aplicativo responsivo utilizável em todas as plataformas.