Esercizio - Visualizzare i dati da Microsoft 365

  • 3 minuti

Questo esercizio permette di fare pratica con i componenti di Microsoft Graph Toolkit nell'applicazione e di visualizzare i dati da Microsoft 365.

Prima di iniziare

Prima di procedere, assicurarsi di completare il primo esercizio in questo modulo.

Aggiunta nell'app del componente Agenda

I passaggi necessari per la gestione dell'autenticazione sono già stati completati nell'esercizio precedente. Ora nell'applicazione saranno visualizzati i prossimi eventi del calendario per un utente connesso. Aggiungere il componente Agenda nel corpo del file index.html :

<mgt-agenda></mgt-agenda>

La versione finale del file index.html sarà simile alla seguente:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
  </head>
  <body>
    <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
    <mgt-login></mgt-login>
    <mgt-agenda></mgt-agenda>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
  </head>
  <body>
    <mgt-msal2-provider client-id="f601c4cb-6902-4675-8415-7db28a4a332d"></mgt-msal2-provider>
    <mgt-login></mgt-login>
    <mgt-agenda></mgt-agenda>
  </body>
</html>

Test dell'app nel browser

Se Dev Proxy è stato arrestato dopo l'ultimo esercizio, riavviarlo. In un terminale eseguire il comando seguente:

devproxy --config-file "~appFolder/presets/learn-msgraph-toolkit-intro/devproxyrc.json"

Mantenere aperto il terminale ed eseguire Dev Proxy durante il test dell'applicazione.

Seguire questa procedura per testare l'app in un browser:

  1. Se è la prima volta che si usa il tenant per sviluppatori di Microsoft 365, è possibile che non siano presenti eventi nel calendario del relativo account. Prima di iniziare a testare l'app, visitare https://outlook.office.com/calendar e accedere con l'account del tenant per sviluppatori di Microsoft 365. Aggiungere eventi di esempio nel calendario per i giorni a venire.

  2. In Visual Studio Code eseguire Live Server per testare l'app. Aprire il browser e andare a to http://localhost:3000.

  3. Assicurarsi di accedere con l'account del tenant per sviluppatori di Microsoft 365. Concedere il consenso alle autorizzazioni necessarie per il calendario e selezionare Accetta.

  4. L'app mostrerà i prossimi eventi del calendario:

    Risultato finale in Microsoft Graph Toolkit.

  1. In Visual Studio Code eseguire Live Server per testare l'app. Aprire il browser e andare a to http://localhost:3000.

  2. Nel Web browser accedere all'app. Dev Proxy simula il processo di autenticazione.

  3. L'app mostrerà i prossimi eventi del calendario:

    Risultato finale in Microsoft Graph Toolkit.

  4. Arrestare Dev Proxy premendo CTRL+C nel terminale.

Nota

Per completare questo esercizio, apprezziamo il feedback dell'utente sull'esperienza con l'uso di Dev Proxy. Si prega di prendere un momento per completare questo breve sondaggio.