Esercizio - Visualizza in realtà mista e Visualizza in 3D

• 15 minuti

Easy-Sales è un'applicazione di realtà mista orientata alle vendite creata per migliorare l'esperienza di acquisto. I venditori che usano questa applicazione possono controllare e misurare l'ambiente circostante del cliente per determinare quali prodotti possono essere inseriti nello spazio. Possono anche aiutare i clienti a visualizzare il prodotto attraverso la realtà mista.

Verranno implementate le funzionalità Visualizza in 3D e Visualizza in realtà mista di Power Apps per visualizzare in modo accurato i prodotti.

Aggiungere oggetti 3D all'elenco di SharePoint

I modelli 3D e le immagini necessari per l'applicazione vengono archiviati nell'elenco di SharePoint. Si inizierà aggiungendo le risorse necessarie a questo elenco.

1. Nell'elenco di SharePoint che è stato creato e si chiama Easy Sales selezionare + Aggiungi colonna e quindi Mostra/Nascondi colonne.

   

2. Assicurarsi che Allegati sia selezionato e quindi premere Applica nella parte superiore.

   

3. Selezionare un elemento nell'elenco, quindi Aggiungi allegati. Selezionare il modello 3D (file con estensione GLB) o un'immagine (file con estensione JPG) nella cartella personalizzata di Power Apps. Seguire la stessa procedura per tutti gli elementi dell'elenco.

   

4. Selezionare l'elenco a discesa accanto alla colonna Allegati, quindi Mostra allegati all'inizio. Devono essere posizionati all'inizio per potervi accedere facilmente.

   

Creare la pagina dei dettagli e aggiungere il componente Visualizza in 3D

La pagina dei dettagli include tutti i dettagli e le informazioni relative al prodotto selezionato. Contiene informazioni su determinate caratteristiche del prodotto. È necessario connettere la pagina del prodotto progettata nella sezione precedente e la pagina dei dettagli creata in questa sezione. Qui si userà anche il componente Visualizza in 3D di Power Apps per aggiungere contenuto 3D all'app canvas. Sarà possibile ruotare e ingrandire gli oggetti 3D per una visualizzazione migliore.

1. Creare due nuove pagine e rinominarle Prodotto_dettagli e Tappeti_dettagli.

   

2. Selezionare l'icona > nel controllo della raccolta incluso nella pagina Prodotti e nella pagina Tappeti. Configurare quindi la proprietà OnSelect aggiungendo rispettivamente le righe seguenti nella scheda Funzioni.

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

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

   

3. Si inizierà a creare la pagina Prodotto_dettagli aggiungendo alcune etichette, ad esempio Prezzo, Dimensioni, Peso, Colore e Materiale. È possibile modificare il testo all'interno dell'etichetta, inserendo il testo desiderato all'interno della proprietà Testo di tale etichetta. Rinominare di conseguenza le etichette.

   

   Nota

   È possibile personalizzare il tema, il carattere e la tavolozza dei colori dell'applicazione per migliorare l'esperienza utente e l'aspetto.

4. Inserire un'altra etichetta denominata Nome del prodotto per visualizzare il nome del prodotto nella parte superiore e allinearla al centro. Configurare la proprietà Testo dell'etichetta aggiungendo la riga seguente:

   content.'{Name}'
   

   

5. Selezionare l'elenco a discesa File multimediali,quindi Immagine per inserire un'immagine nella schermata Product_details. Configurare la proprietà Immagine nel modo seguente:

   content.ImageLink
   

   

6. Si sovrapporrà il componente Visualizza in 3D sul componente Immagine. I prodotti a cui non sono allegati modelli 3D possono essere visualizzati tramite il componente Immagine. Per aggiungere il componente Visualizza in 3D, selezionare l'elenco a discesa File multimediali e quindi Visualizza in 3D.

   

   Nota

   Una forma predefinita è inclusa nel componente. È possibile modificare questa forma in un'altra modificando la proprietà Origine.

7. Posizionare il componente sul componente immagine, come illustrato nell'immagine e configurare la proprietà Origine del componente Visualizza in 3D come indicato sotto per collegare i modelli 3D dall'elenco di SharePoint.

   First(Gallery_products.Selected.Attachments).Value
   

   

8. Verrà modificata la proprietà Visibile di entrambi i componenti Immagine e Visualizza in 3D per visualizzare facilmente i prodotti a seconda del tipo di file archiviato nella colonna Allegati. Configurare la proprietà Visibile dei componenti Immagine e Visualizza in 3D come indicato sotto:

   • Immagine:

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

     

   • Visualizza in 3D:

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

     

9. Aggiungere etichette vuote accanto alle etichette Prezzo, Dimensioni, Peso, Colore e Materiale, come mostrato nell'immagine per visualizzare le informazioni sul prodotto in tali intestazioni. Configurare la proprietà Testo di queste etichette vuote come segue:

   • Prezzo:

     content.Price
     

     

   • Dimensioni:

     content.Dimensions
     

     

   • Peso:

     content.Weight
     

     

   • Colore:

     content.Color
     

     

   • Materiale:

     content.PrimaryMaterial
     

     

10. Verrà aggiunta un'icona Indietro per passare alla schermata precedente. Per aggiungere l'icona Indietro, espandere l'elenco a discesa Icone e selezionare l'icona Indietro. Posizionare correttamente l'icona Indietro e configurare la proprietà OnSelect aggiungendo quanto segue:

    Navigate('Products',ScreenTransition.Cover)
    

    

    Seguire la stessa procedura per Tappeti_dettagli. Personalizzare di conseguenza la funzione Naviga.

    Suggerimento

    Per salvare lo stato di avanzamento, selezionare la scheda File in alto e selezionare l'opzione Salva. È anche possibile usare CTRL+S per salvare lo stato di avanzamento.

    Nota

    Evitare di includere il componente Visualizza in 3D nella pagina Tappeti_dettagli. Non si usano modelli 3D per la categoria Tappeto.

Componente Visualizza in realtà mista

Visualizza in realtà mista è una funzionalità di realtà mista offerta da Power Apps che consente agli utenti di inserire oggetti 3D o Immagini nell'ambiente reale. I modelli 3D e le immagini necessari per l'applicazione vengono archiviati nell'elenco di SharePoint. Si inizia aggiungendo le risorse necessarie nell'elenco di SharePoint.

1. Aggiungere il componente Visualizza in realtà mista alla schermata Prodotto_dettagli. Aprire la scheda Inserisci, quindi espandere l'elenco a discesa Realtà mista e selezionare il componente Visualizza in realtà mista.

   

2. Nella scheda Proprietà per il componente Visualizza in realtà mista selezionare il campo Origine ed entrare per accedere ai modelli 3D archiviati nell'elenco SharePoint:

   First(Gallery_products.Selected.Attachments).Value
   

   

   Nota

   La funzionalità Visualizza in realtà mista non viene inclusa per la categoria Tappeti. Verrà invece stimato il prezzo del tappeto a seconda dell'area calcolata nella sessione Misura in realtà mista.

Un'altra proprietà univoca resa disponibile dal componente Visualizza in realtà mista è Object scaling. È possibile modificare le dimensioni dei modelli 3D in modo esterno modificando le proprietà Object width, Object height e Object depth.

• Impostare le proprietà seguenti nel riquadro Proprietà come mostrato nell'immagine:

  • Object width = 1,5
  • Object height = 1
  • Object depth = 1
  • Unità di misura = Metri

  Questi valori vengono impostati in base ai modelli 3D inclusi in questa applicazione.

  

  Nota

  È anche possibile personalizzare i valori passati a Object width, Object height e Object depth in base alle esigenze. I valori passati vengono presi nelle unità specificate in Unità di misura. Scegliere un'unità di misura appropriata dall'elenco a discesa e quindi immettere i valori.

  Suggerimento

  Per salvare lo stato di avanzamento, selezionare la scheda File in alto e l'opzione Salva. È anche possibile usare CTRL+S per salvare lo stato di avanzamento.

L'implementazione dei passaggi precedenti produrrà un'applicazione con una pagina dei dettagli contenente informazioni dettagliate sul prodotto. L'applicazione includerà anche il componente Visualizza in 3D, consentendo di includere contenuto 3D. È anche possibile inserire modelli 3D nell'ambiente reale tramite il componente Visualizza in realtà mista. Dopo aver appreso come implementare queste funzionalità, è possibile incorporarle nelle applicazioni future.