Exercício – Exibição em MR e Exibição em 3D

  • 15 minutos

Easy Sales é um aplicativo de realidade misturada orientado para vendas, criado para aprimorar a experiência de compra. Os vendedores que usam esse aplicativo podem inspecionar e medir o entorno do cliente a fim de determinar quais produtos são viáveis no espaço. Eles também podem ajudar os clientes a visualizar o produto por meio da realidade misturada.

Aqui, vamos implementar os recursos de Exibição em 3D e Exibição em MR do Power Apps a fim de visualizar os produtos com precisão.

Adicionar objetos 3D à lista do SharePoint

As imagens e os modelos 3D necessários para o aplicativo estão armazenados na lista do SharePoint. Vamos começar adicionando os recursos necessários à essa lista.

  1. Na lista do SharePoint criada, chamada Easy Sales, selecione + Adicionar coluna e depois Mostrar/ocultar colunas.

    Captura de tela para adicionar coluna.

  2. Verifique se a opção Anexos está selecionada e pressione Aplicar na parte superior.

    Captura de tela da aplicação de anexos

  3. Selecione um item na lista e selecione Adicionar Anexos. Selecione o modelo 3D (arquivo .glb) ou a Imagem (arquivo .jpg) na pasta personalizada do Power Apps. Siga o mesmo procedimento para todos os itens na lista.

    Captura de tela da adição de anexos

  4. Selecione o menu suspenso ao lado da coluna Anexos e escolha Mostrar anexos primeiro. Queremos que isso seja posicionado primeiro para facilitar o acesso.

    Captura de tela da seleção de Mostrar anexos primeiro.

Criar página de detalhes e adicionar o componente Exibição em 3D

A página de detalhes inclui todos os detalhes e informações sobre o produto selecionado. Ela fornece uma compreensão de certos recursos do produto. Você deve conectar a página do produto que você projetou na seção anterior e a página de detalhes criada nesta seção. Aqui, você também usa o componente View em 3D do Power Apps para adicionar conteúdo 3D ao seu aplicativo de tela. Você poderá girar e ampliar objeto 3D para obter uma visualização melhor.

  1. Crie duas páginas e renomeie-as como Product_details e Carpet_details.

    Captura de tela da criação de páginas detalhadas.

  2. Selecione o ícone > no controle de galeria incluído na página Produtos e na página Tapetes. Em seguida, configure a propriedade OnSelect adicionando as linhas a seguir na guia Funções, respectivamente.

    Navigate(Product_details,ScreenTransition.Cover,{content : ThisItem})

    Navigate(Carpet_details,ScreenTransition.Cover,{content_carpets : ThisItem})

    Captura de tela da navegação para os próximos detalhes.

  3. Vamos começar a criar a página Product_details, adicionando alguns rótulos como Preço, Dimensões, Peso, Cor e Material. Você pode editar o texto dentro do rótulo, inserindo o texto desejado com a propriedade Texto desse Rótulo. Renomeie os Rótulos de acordo.

    Captura de tela da adição de rótulos

    Observação

    Você pode personalizar o tema, a fonte e a paleta de cores do aplicativo para aprimorar a experiência do usuário e a aparência.

  4. Insira outro rótulo chamado Nome do produto para exibir o nome do produto na parte superior e selecione Alinhamento no centro. Configure a propriedade Texto do rótulo adicionando a seguinte linha:

    content.'{Name}'

    Captura de tela da adição do rótulo de título.

  5. Selecione a lista suspensa Mídia e selecione Imagem para inserir uma imagem na tela Product_details. Configure a propriedade Imagem do seguinte modo:

    content.ImageLink

    Captura de tela da adição de imagem.

  6. Vamos sobrepor o componente Exibição em 3D sobre o componente Imagem. Os produtos que não têm modelos 3D anexados a eles podem ser visualizados por meio do componente Imagem. Para adicionar o componente Exibição em 3D, selecione o menu suspenso Mídia e depois Exibição em 3D.

    Captura de tela da adição do modo de exibição em 3D.

    Observação

    Uma forma padrão está incluída no componente. Você pode alterar essa forma por outra modificando a propriedade Fonte.

  7. Posicione o componente sobre o componente de imagem, conforme mostrado na figura, e configure a propriedade Fonte do componente Exibição em 3D do modo a seguir para conectar modelos 3D da lista do SharePoint.

    First(Gallery_products.Selected.Attachments).Value

    Captura de tela da configuração do modo de exibição em 3D.

  8. Alteraremos a propriedade Visível dos componentes Imagem e Exibição em 3D para visualizar os produtos com facilidade, dependendo do Tipo de arquivo armazenado na coluna Anexos. Configure a propriedade Visível da Imagem e do componente Exibição em 3D da seguinte forma:

    • Imagem:

      If(Gallery_products.Selected.FileType = "Image", true, false)

      Captura de tela da alteração da visibilidade da imagem.

    • Exibição em 3D:

      If(Gallery_products.Selected.FileType = "Model", true, false)

      Captura de tela da alteração do modo de exibição na visibilidade 3D.

  9. Adicione rótulos em branco ao lado dos rótulos de Preço, Dimensões, Peso, Cor e Material, conforme mostrado na imagem, para exibir as informações do produto sob esses títulos. Configure a propriedade Texto desses rótulos da seguinte maneira:

    • Preço:

      content.Price

      Captura de tela do rótulo em branco para o preço.

    • Dimensões:

      content.Dimensions

      Captura de tela do rótulo em branco para dimensão.

    • Peso:

      content.Weight

      Captura de tela do rótulo em branco para peso.

    • Cor:

      content.Color

      Captura de tela do rótulo em branco para cor.

    • Material:

      content.PrimaryMaterial

      Captura de tela do rótulo em branco do material.

  10. Adicionaremos um ícone Voltar para navegar até a tela anterior. Para adicionar o ícone Voltar, expanda o menu suspenso Ícones e selecione o Ícone Voltar. Posicione o ícone Voltar corretamente e configure a propriedade OnSelect adicionando o seguinte:

    Navigate('Products',ScreenTransition.Cover)

    Captura de tela da adição do ícone voltar e da OnSelect

    Siga o mesmo procedimento para Carpet_details. Personalize a função Navegar de acordo.

    Dica

    Para salvar o progresso, selecione a guia Arquivo na parte superior e selecione a opção Salvar. Você também pode usar Ctrl+S para salvar seu progresso.

    Observação

    Evite incluir o componente Exibição em 3D na página Carpet_details. Não usamos modelos 3D para a categoria Tapetes.

Componente exibição em MR

A Exibição em MR é um recurso de realidade misturada fornecido pelo Power Apps, que permite aos usuários colocar Objetos 3D ou Imagens em ambientes do mundo real. As imagens e os modelos 3D necessários para o aplicativo estão armazenados na lista do SharePoint. Vamos começar adicionando os recursos necessários à lista do SharePoint.

  1. Adicione o componente Exibição em MR à tela Product_details. Abra a guia Inserir e expanda o menu suspenso Realidade Misturada e selecione o componente Exibição em MR.

    Captura de tela da adição do botão Exibir no MR.

  2. Na guia Propriedades do componente Exibição em MR, selecione o campo Fonte e insira para acessar os modelos 3D armazenados em sua lista do SharePoint:

    First(Gallery_products.Selected.Attachments).Value

    Captura de tela para adicionar a origem para exibição no MR.

    Observação

    Não incluímos o recurso Exibição em MR para a categoria Tapetes. Em vez disso, estimaremos o Preço do tapete dependendo da área calculada na sessão de Medida em MR.

Outra propriedade exclusiva fornecida pelo componente View no MR é Escala de objeto. Você pode editar os tamanhos dos modelos 3D externamente alterando as propriedades Largura do objeto, Altura do objeto e Profundidade do objeto.

  • Defina as seguintes propriedades no painel Propriedade, conforme mostrado na imagem:

    • Largura do objeto = 1,5
    • Altura do objeto = 1
    • Profundidade do objeto = 1
    • Unidade de medida = Metros

    Esses valores são definidos de acordo com os modelos 3D incluídos neste aplicativo.

    Captura de tela do dimensionamento de objeto para a exibição em MR.

    Observação

    Você também pode personalizar os valores passados para as propriedades Largura do objeto, Altura do objeto e Profundidade do objeto de acordo com suas necessidades. Os valores passados são retirados nas unidades especificadas na Unidade de medida. Escolha uma unidade de medição apropriada no menu suspenso e depois insira os valores.

    Dica

    Para salvar o progresso, selecione a guia Arquivo na parte superior e a opção Salvar. Você também pode usar Ctrl+S para salvar seu progresso.

A implementação das etapas acima produzirá um aplicativo com uma página de detalhes que contém informações detalhadas do produto. O aplicativo também incluirá o componente Exibição em 3D, permitindo que você inclua um conteúdo 3D. Você também pode colocar também modelos 3D em ambientes do mundo real por meio do componente Exibição em MR. Agora que aprendeu a implementar esses recursos, você pode incorporá-los aos seus aplicativos futuros.

Animação da demonstração do aplicativo após a implementação do modo de exibição em 3D e exibição no MR.