Ejercicio: Carga de correos electrónicos de un usuario en lotes

Completado

En este ejercicio, ampliará la aplicación para que pueda cargar los correos electrónicos de un usuario en lotes de 10 elementos.

Cargar correos electrónicos en lotes de 10 elementos

Empiece por actualizar la función getEmails() para cargar correos electrónicos en lotes de 10 elementos. Si se ha definido el siguiente conjunto de correos electrónicos para cargar, se pasará como argumento de la función.

1. Abra el archivo graph.js en el editor de código.

2. Actualice la firma de la función getEmails() para aceptar un único argumento nextLink:

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

3. Si se ha establecido nextLink, la función debe pasarlo al SDK para recuperar los datos. Si no se ha establecido nextLink, la función debe cargar el conjunto inicial de datos. Actualice la función getEmails() reemplazando la instrucción return por la siguiente instrucción if:

   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 función actualizada getEmails() debe quedar así:

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

Ampliar la plantilla para permitir que los usuarios carguen más correos electrónicos

Ha ampliado la función getEmails() para cargar más correos electrónicos. El siguiente paso es mostrar un botón que permita a los usuarios cargar más correos electrónicos si están disponibles.

1. Abra el archivo index.html en el editor de código.

2. Busque la línea <ul id="emails"></ul> y agregue el siguiente código inmediatamente después para agregar un botón que permita a los usuarios cargar más correos electrónicos.

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

Agregar más correos electrónicos

Con la aplicación actualizada para permitir que los usuarios carguen más correos electrónicos, el último paso es agregar funcionalidad para controlar la carga de más correos electrónicos.

1. Abra el archivo ui.js en el editor de código.

2. Antes de la función displayEmail(), defina una nueva variable denominada nextLink sin asignarle un valor:

   var nextLink;
   

3. En la función displayEmail(), actualice la llamada para hacer que la función getEmails() incluya nextLink.

   var emails = await getEmails(nextLink);
   

4. A continuación, después de recuperar los datos, obtenga el valor de la propiedad @odata.nextLink. Si se ha establecido, indicará que hay más datos disponibles para que los usuarios los muestren. Agregue el siguiente código inmediatamente después de la instrucción ifen la función displayEmail():

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

5. Al final de la función displayEmail(), después de mostrar los correos electrónicos recuperados, desplácese hasta el final de la página para que el usuario pueda ver inmediatamente los correos electrónicos recuperados.

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

6. Por último, compruebe si se ha devuelto nextLink y, si es así, muestre el botón para cargar más correos electrónicos.

   Agregue el siguiente código al final de la función displayEmail():

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

7. La función displayEmail() completa debe tener el siguiente aspecto:

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

Ejecutar la aplicación

Ha ampliado la aplicación para mostrar los correos electrónicos de un usuario mediante Microsoft Graph en lotes de 10 elementos y permitirle cargar más correos electrónicos. Vamos a ejecutar la aplicación localmente.

1. Ejecute el siguiente comando en el terminal para obtener una vista previa de la aplicación web:

   npm start
   

2. El explorador debe apuntar a http://localhost:8080.

3. Seleccione el botón Iniciar sesión con Microsoft para iniciar sesión con su cuenta de Microsoft 365.

4. Después de iniciar sesión con su cuenta, seleccione el botón Mostrar correo electrónico.

5. Debería ver una lista de los últimos 10 correos electrónicos del usuario en la aplicación.

6. Si hay más de 10 correos electrónicos en el buzón, verá un botón que le permite cargar los 10 mensajes siguientes.

7. Detenga el servidor Node.js seleccionando CTRL+C en la ventana del terminal.

Continuar