Exercice : Charger les e-mails d’un utilisateur par lots

Dans cet exercice, vous allez étendre l’application pour pouvoir charger les e-mails d’un utilisateur en lots de 10 éléments.

Charger des e-mails en lots de 10 éléments

Commencez par mettre à jour la fonction getEmails() pour charger des e-mails en lots de 10 éléments. Si le jeu d’e-mails à charger a été défini, il est passé comme argument de la fonction.

1. Dans votre éditeur de code. ouvrez le fichier graph.js.

2. Mettez à jour getEmails() la signature de la fonction pour accepter un seul argument nextLink :

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

3. Si la valeur nextLink a été définie, la fonction doit la transmettre au SDK pour récupérer les données. Si la valeur nextLink n’a pas été définie, la fonction doit charger le jeu de données initial. Mettez à jour getEmails() la fonction en remplaçant l’instruction return par l’instruction if suivante :

   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 fonction getEmails() mise à jour doit ressembler à ce qui suit :

   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();
     }
   }
   

Étendre le modèle pour permettre aux utilisateurs de charger des plus d’e-mails

Vous avez étendu la fonction getEmails() pour charger davantage d’e-mails. L’étape suivante consiste à afficher un bouton qui permet aux utilisateurs de charger plus d’e-mails s’ils sont disponibles.

1. Dans votre éditeur de code, ouvrez le fichier index.html.

2. Recherchez la ligne <ul id="emails"></ul> et ajoutez le code suivant immédiatement après celle-ci pour ajouter un bouton qui permet aux utilisateurs de charger plus d’e-mails.

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

Charger plus d’e-mails

L’application ayant été mise à jour pour permettre aux utilisateurs de charger plus d’e-mails, la dernière étape consiste à ajouter des fonctionnalités pour gérer le changement de plus d’e-mails.

1. Dans votre éditeur de code, ouvrez le fichier ui.js.

2. Avant la fonction displayEmail(), définissez une nouvelle variable nommée nextLink sans y assigner une valeur :

   var nextLink;
   

3. Dans la fonction displayEmail(), mettez à jour l’appel pour obtenir la fonction getEmails() afin d’inclure la valeur nextLink.

   var emails = await getEmails(nextLink);
   

4. Ensuite, après avoir récupéré les données, obtenez la valeur de la propriété @odata.nextLink . Si elle est définie, elle indique qu’il y a plus de données disponibles pour les utilisateurs à afficher. Ajoutez le code suivant immédiatement après l’instruction if dans la fonction displayEmail() :

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

5. À la fin de la fonction displayEmail() , après avoir affiché les e-mails récupérés, faites défiler jusqu’à la fin de la page afin que l’utilisateur puisse voir immédiatement les e-mails récupérés.

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

6. Enfin, vérifiez si la valeur nextLink a été retournée, et le cas échéant, affichez le bouton pour charger davantage d’e-mails.

   Ajoutez le code suivant à la fin de la fonction displayEmail() :

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

7. La fonction displayEmail() complète doit ressembler à ce qui suit :

   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';
     }
   }
   

Exécuter votre application

Vous avez étendu votre application pour afficher les e-mails d’un utilisateur en utilisant Microsoft Graph par lots de 10 éléments et lui permettre de charger davantage d’e-mails. Exécuter l’application localement.

1. Affichez un aperçu de l’application web en exécutant la commande suivante dans le terminal.

   npm start
   

2. Votre navigateur doit pointer vers http://localhost:8080.

3. Sélectionnez Se connecter avec Microsoft pour vous connecter avec votre compte Microsoft 365.

4. Après vous être connecté avec votre compte, sélectionnez le bouton Afficher l’e-mail.

5. Une liste des 10 derniers e-mails de l’utilisateur doit s’afficher dans l’application.

6. Si votre boîte aux lettres contient plus de 10 e-mails, un bouton permettant de charger les 10 e-mails suivants s’affiche.

7. Arrêtez le serveur Node.js en sélectionnant CTRL+C dans la fenêtre du terminal.