Esercizio - Caricare i messaggi di posta elettronica di un utente in batch

In questo esercizio si estenderà l'app per consentire il caricamento dei messaggi di posta elettronica di un utente in batch di 10 elementi.

Caricamento dei messaggi di posta elettronica in batch di 10 elementi

Per iniziare, aggiornare la funzione getEmails() per caricare i messaggi di posta elettronica in batch di 10 elementi. Se la successiva serie di messaggi di posta elettronica da caricare è stata definita, viene passata come argomento della funzione.

1. Nell'editor di codice aprire il file graph.js.

2. Aggiornare la firma della funzione getEmails() in modo che accetti un singolo argomento nextLink:

   async function getEmails(nextLink) {
     // ...
   }
   

3. Se è stato impostato nextLink, la funzione deve passarlo all'SDK per recuperare i dati. Se nextLink non è stato impostato, la funzione deve caricare il set iniziale di dati. Aggiornare la funzione getEmails() sostituendo l'istruzione return con l'istruzione if seguente:

   if (nextLink) {
     return await graphClient
       .api(nextLink)
       .get();
   }
   else {
     return await graphClient
       .api('/me/messages')
       .select('subject,receivedDateTime')
       .orderby('receivedDateTime desc')
       .top(10)
       .get();
   }
   

   La funzione getEmails() aggiornata deve avere l’aspetto seguente:

   async function getEmails(nextLink) {
     ensureScope('mail.read');
   
     if (nextLink) {
       return await graphClient
         .api(nextLink)
         .get();
     }
     else {
       return await graphClient
         .api('/me/messages')
         .select('subject,receivedDateTime')
         .orderby('receivedDateTime desc')
         .top(10)
         .get();
     }
   }
   

Estensione del modello per consentire agli utenti di caricare altri messaggi di posta elettronica

La funzione getEmails() è stata estesa in modo da caricare altri messaggi di posta elettronica. Il passaggio successivo consiste nel visualizzare un pulsante che consentirà agli utenti di caricare altri messaggi di posta elettronica, se disponibili.

1. Nell'editor di codice, aprire il file index.html.

2. Individua la riga <ul id="emails"></ul> e aggiungi il codice seguente subito dopo per aggiungere un pulsante che consenta agli utenti di caricare più messaggi di posta elettronica.

   <div id="loadMoreContainer" style="display: none;">
     <button onclick="displayEmail();">Load more</button>
   </div>
   

Caricamento di ulteriori messaggi di posta elettronica

Con l'app aggiornata per consentire agli utenti di caricare altri messaggi di posta elettronica, il passaggio finale consiste nell'aggiungere funzionalità per gestire il caricamento di altri messaggi di posta elettronica.

1. Nell'editor di codice aprire il file ui.js.

2. Prima della funzione displayEmail(), definire una nuova variabile denominata nextLink senza assegnarle un valore:

   var nextLink;
   

3. Nella funzione displayEmail() aggiornare la chiamata per fare in modo che la funzione getEmails() includa il nextLink.

   var emails = await getEmails(nextLink);
   

4. Successivamente, dopo aver recuperato i dati, ottenere il valore della proprietà @odata.nextLink. Se impostato, indicherà che sono disponibili più dati da visualizzare per gli utenti. Aggiungere il codice seguente subito dopo l'istruzione if nella funzionedisplayEmail():

   nextLink = emails['@odata.nextLink'];
   

5. Alla fine della funzione displayEmail(), dopo aver visualizzato i messaggi di posta elettronica recuperati, scorrere fino alla fine della pagina in modo che l'utente possa visualizzare immediatamente i messaggi di posta elettronica recuperati.

   window.scrollTo({ top: emailsUl.scrollHeight, behavior: 'smooth' });
   

6. Infine, controllare se nextLink è stato restituito e, se lo è stato, visualizzare il pulsante per caricare altri messaggi di posta elettronica.

   Aggiungere il codice seguente alla fine della funzione displayEmail():

   if (nextLink) {
     document.getElementById('loadMoreContainer').style = 'display: block';
   }
   

7. La funzione displayEmail() completata dovrebbe avere l’aspetto seguente:

   var nextLink;
   async function displayEmail() {
     var emails = await getEmails(nextLink);
     if (!emails || emails.value.length < 1) {
       return;
     }
     nextLink = emails['@odata.nextLink'];
   
     document.getElementById('displayEmail').style = 'display: none';
   
     var emailsUl = document.getElementById('emails');
     emails.value.forEach(email => {
       var emailLi = document.createElement('li');
       emailLi.innerText = `${email.subject} (${new Date(email.receivedDateTime).toLocaleString()})`;
       emailsUl.appendChild(emailLi);
     });
     window.scrollTo({ top: emailsUl.scrollHeight, behavior: 'smooth' });
   
     if (nextLink) {
       document.getElementById('loadMoreContainer').style = 'display: block';
     }
   }
   

Esecuzione dell'app

L'app è stata estesa per mostrare i messaggi di posta elettronica di un utente usando Microsoft Graph in batch di 10 elementi e consentire loro di caricare altri messaggi di posta elettronica. Eseguire l'app in locale.

1. Visualizzare in anteprima l'app Web eseguendo il comando seguente nel terminale.

   npm start
   

2. Il browser deve puntare a http://localhost:8080.

3. Selezionare il pulsante Accedi con Microsoft per accedere con l'account Microsoft 365.

4. Dopo aver eseguito l'accesso con l'account, selezionare il pulsante Mostra messaggio.

5. Gli ultimi 10 messaggi di posta elettronica dovrebbero essere visualizzati nell'app.

6. Se nella cassetta postale sono presenti più di 10 messaggi di posta elettronica, verrà visualizzato un pulsante che consente di caricare i 10 messaggi successivi.

7. Arrestare il server Node.js selezionando CTRL+C nella finestra del terminale.