Esercizio - Creazione di un'app canvas

Completato

Obiettivo di apprendimento

In questo esercizio gli studenti usano Copilot per creare un'app canvas che permetterà ai dipendenti di segnalare problemi di manutenzione. Si usa Copilot per creare il modello di dati e il layout iniziale dell'applicazione.

Una volta completato il lab, si sarà in grado di:

• Usare Copilot per creare con facilità un modello di dati a supporto dell'app.
• Modificare un'applicazione canvas.

Scenario

Contoso College è alla ricerca di un'applicazione che consenta ai dipendenti di segnalare problemi di manutenzione in tutto il campus. Contoso intende creare un'app canvas alla quale i dipendenti possono accedere dai propri telefoni laddove necessario.

Una volta completato il lab, si sarà in grado di:

• Usare Copilot per creare con facilità un modello di dati a supporto dell'app.
• Modificare un'applicazione canvas.

Attività 1: Generazione del modello di dati e creazione dell'app

1. Aprire un browser Web e accedere a Power Apps Maker Portal.

2. Nella barra di spostamento a sinistra selezionare Crea.

3. In Crea le tue app scegliere Inizia con Copilot.

4. Nella schermata Descrivi le tabelle che dovrà creare Copilot digitare: "Crea una singola tabella per la segnalazione di problemi di manutenzione".

5. Selezionare il pulsante Opzioni tabella. Dal menu visualizzato selezionare Una tabella.

   

6. Selezionare il pulsante Genera.

Copilot ha creato una tabella Maintenance Issue. Il passaggio successivo consiste nell'aggiunta di ulteriori colonne alla tabella.

7. Nel riquadro Copilot immettere: "Aggiungi una colonna di scelta denominata Issue Type".

8. Nel riquadro Copilot aggiungere una dopo l'altra le richieste seguenti.

   1. "Aggiungi una colonna di testo denominata Location".
   2. "Aggiungi una colonna di testo denominata Contact Number".
   3. "Aggiungi una colonna di scelta denominata Priority level".
   4. "Aggiungi una colonna di testo denominata Access Instructions".
   5. "Aggiungi una colonna di testo denominata Resolution Notes".

Successivamente, si provvederà a rimuovere tutte le colonne non necessarie, poiché verranno sostituite con colonne di ricerca.

9. Se sono presenti nella tabella, immettere i comandi seguenti per rimuoverle.

   1. "Rimuovi la colonna Reported By".
   2. "Rimuovi la colonna Assigned To / Technician".

La tabella Maintenance Issue dovrebbe avere un aspetto simile all'immagine di seguito:

Successivamente, si aggiungerà la tabella utente al modello di dati in modo da poter associare le segnalazioni Maintenance Issue a utenti specifici.

10. Nella barra dei comandi selezionare + Tabella esistente.

11. Passare da Consigliati a Tutte le tabelle.

12. Nel campo Cerca immettere User.

13. Selezionare la tabella User, quindi fare clic sul pulsante Aggiungi selezionato.

14. Nella barra dei comandi selezionare Crea relazioni.

15. Configurare la relazione come segue:

    • Uno: User
    • Molti: Maintenance Issue
    • Nome visualizzato: Requesting Employee

16. Selezionare Fatto.

17. Nella barra dei comandi selezionare Crea relazioni.

18. Configurare la relazione come segue:

    • Uno: User
    • Molti: Maintenance Issue
    • Nome visualizzato: Assigned to
    • Selezionare Opzioni avanzate e modificare Nome schema in AssignedUser.

19. Selezionare Fatto.

Il modello di dati completato dovrebbe avere un aspetto simile all'immagine visualizzata di seguito:

20. Selezionare il pulsante Salva e apri app.

Nota

La creazione della nuova app potrebbe richiedere diversi minuti.

Attività 2: Personalizzazione della nuova app

Una volta creata l'app, si procederà ad apportare alcune modifiche per adattarla alle specifiche esigenze. Per prima cosa, si apportano alcune modifiche alla schermata iniziale.

1. Con la nuova app aperta, selezionare il segnaposto Immagine sopra il testo Maintenance Issues.
2. Nel menu visualizzato selezionare Modifica>Immagini di archivio
3. Nel campo Cerca immettere Medicina, selezionare l'immagine di tastiera di computer e stetoscopio, quindi scegliere Inserisci.
4. Quindi, selezionare il segnaposto Immagine sopra Users.
5. Nel campo Cerca immettere Persone, selezionare l'immagine che si vuole usare, quindi scegliere Inserisci.
6. Nel menu visualizzato selezionare Modifica>Immagini di archivio.

Ora si procederà a modificare la dimensione delle immagini per renderle più facilmente leggibili per gli utenti. Si modificherà inoltre il testo visualizzato per ogni elemento.

7. Nella barra dei comandi selezionare il pulsante Proprietà. Il pulsante si trova subito a destra del pulsante Modifica.

8. Selezionare l'immagine sopra Maintenance Issues.

9. Nel pannello Proprietà configurare l'immagine come segue:

   • Image Position: Fill
   • Width: 350
   • Height: 350

10. Ripetere il passaggio precedente per impostare le proprietà Height e Width dell'immagine Users su 350 x 350.

11. Selezionare il testo al di sotto di Maintenance Issues.

12. Nel pannello Proprietà selezionare il campo Text e modificare il testo in: "Submit Maintenance Issue".

13. Selezionare il testo Schermata iniziale nell'Intestazione.

14. Nel riquadro Proprietà impostare Mostra logo su Off.

15. Impostare Immagine profilo su Off.

16. Nel riquadro Proprietà sotto il gruppo Stilee tema selezionare l'icona del colore di Fill.

17. Impostare il colore su Nero.

18. Accertarsi che l'Intestazione sia ancora selezionata e modificare il Titolo in Contoso Issue Reporting.

Ora l'app dovrebbe avere un aspetto simile all'immagine mostrata.

Attività 3: Aggiunta di una nuova schermata all'app

Si decide che, oltre a segnalare Maintenance Issues, gli utenti dovranno poter aggiungere risorse.

1. Con l'app ancora aperta, se necessario, espandere il riquadro Copilot. In Copilot immettere il seguente testo: "Aggiungi una nuova schermata denominata Assets". Quindi, selezionare Invia.

2. Selezionare il pulsante Mantieni per accettare la schermata.

3. All'app viene aggiunta una nuova schermata denominata Assets.

4. Nella schermata selezionare Con dati.

5. Nella schermata Seleziona origine dati scegliere Crea nuove tabelle.

6. In Copilot immettere il testo seguente: "Crea una nuova tabella denominata Assets. La tabella deve includere le seguenti colonne. Asset Name, Asset ID, Asset Type, Asset Location, Data Installed e Department".

7. Selezionare Genera.

8. Se è stata aggiunta un'altra tabella (Department), usare Copilot per eliminarla immettendo: "Remove Department Table".

9. Una volta creata la tabella, selezionare Salva ed esci.

10. Tornare all'app e selezionare nuovamente Con dati.

11. All'app viene aggiunta una nuova schermata Asset.

12. Se necessario, nella barra dei comandi selezionare il pulsante Proprietà. Il pulsante Proprietà si trova accanto al pulsante Modifica.

13. Effettuare quindi una selezione nell'elenco Assets. Dovrebbe essere visualizzata un'icona a forma di matita. Selezionare l'icona Matita.

14. Selezionare il pulsante Inserisci e scegliere Etichetta di testo.

15. Posizionare l'Etichetta di testo posizionata accanto ad Asset Location.

    

16. Con l'Etichetta di testo selezionata, immettere il testo seguente nella barra della formula: ThisItem.'Asset Type'

    

17. Effettuare una selezione sullo sfondo del modulo.

18. Impostare la proprietà Columns su 1.

19. La schermata completata dovrebbe essere simile all'immagine visualizzata di seguito:

    

Attività 4: Aggiornamento della schermata iniziale

Al momento della revisione, si è deciso che la possibilità di creare utenti in questa app non è necessaria, quindi si è modificata la schermata iniziale per consentire l'accesso ad Assets.

1. Nella Visualizzazione struttura ad albero selezionare la Schermata iniziale.
2. Selezionare l'Immagine sopra Users / Contacts.
3. Nel menu visualizzato selezionare Modifica, quindi scegliere Immagini di archivio.
4. Nel campo Cerca immettere Attrezzatura e selezionare un'immagine da usare.
5. Impostare la proprietà OnSelect dell'immagine su: Navigate('Assets')

6. Selezionare il testo Users/Contacts e impostare la proprietà Text su Assets.
7. Selezionare Text sotto Equipment e modificare la proprietà Text in: "Visualizza e creare record dei cespiti".

Attività 5: Test dell'applicazione

Successivamente si procede a testare l'app per verificarne il corretto funzionamento.

1. Nella barra dei comandi selezionare il pulsante Esegui.
2. Selezionare l'immagine Assets.
3. Nel campo Cerca immettere Office. Notare come l'elenco viene filtrato.
4. Selezionare il record Office Chair.
5. Selezionare il pulsante Modifica (l'icona a forma di matita). Modificare la Categoria in Furniture.
6. Modificare Asset Type in Equipment.
7. Selezionare il pulsante Salva (il segno di spunta).
8. Selezionare il pulsante Salva.
9. Notare come il tipo di risorsa di Desk cambia in Equipment.
10. Selezionare il pulsante Home.
11. Seleziona l'icona X viola per uscire dalla modalità Anteprima.

Attività 6: Salvataggio e pubblicazione dell'app

Obiettivo: salvare e pubblicare l'app per renderla accessibile su browser Web, dispositivi mobili o piattaforme incorporate come SharePoint o Teams.

1. In Power Apps Studio selezionare il pulsante Salva.
2. Nella schermata Salva con nome impostare Nome su Contoso Issue Reporting, quindi selezionare Salva.
3. Selezionare il pulsante Pubblica.