Exercício – Carregar e-mails de um usuário em lotes

Concluído

Neste exercício, você estenderá o aplicativo para permitir que você carregue emails de um usuário em lotes de 10 itens.

Carregar emails em lotes de 10 itens

Comece atualizando a função getEmails() para carregar emails em lotes de 10 itens. Se o próximo conjunto de emails a ser carregado tiver sido definido, ele será passado como o argumento da função.

1. No editor de código, abra o arquivo auth.js.

2. Atualize a assinatura da função getEmails() para aceitar um único argumento nextLink:

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

3. Se a nextLink tiver sido definida, a função deverá passá-la para o SDK para recuperar os dados. Se nextLink não tiver sido definida, a função deverá carregar o conjunto inicial de dados. Atualize a função getEmails() substituindo a instrução return pela seguinte instrução 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();
   }
   

   A função getEmails() deve ter a seguinte aparência:

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

Estenda o modelo para permitir que os usuários carreguem mais emails

Você estendeu a função getEmails() para carregar mais emails. A próxima etapa é mostrar um botão que permitirá que os usuários carreguem mais emails, se disponíveis.

1. No editor de código, abra o arquivo index.html.

2. Localize a linha <ul id="emails"></ul> e adicione o código a seguir imediatamente após ele para adicionar um botão que permita que os usuários carreguem mais emails.

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

Adicionar mais detalhes

Com o aplicativo atualizado para permitir que os usuários carreguem mais emails, a etapa final é adicionar funcionalidade para lidar com o carregamento de mais emails.

1. No editor de código, abra o arquivo auth.js.

2. Antes da função displayEmail(), defina uma nova variável chamada nextLink sem atribuir um valor a ela:

   var nextLink;
   

3. Na função displayEmail(), atualize a chamada para obter a função getEmails() para incluir o nextLink.

   var emails = await getEmails(nextLink);
   

4. Em seguida, depois de recuperar os dados, obtenha o valor da propriedade @odata.nextLink. Se definido, isso indicará que há mais dados disponíveis para os usuários mostrarem. Adicione o seguinte código imediatamente após a instrução if na função displayEmail():

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

5. No final da função displayEmail(), depois de exibir os emails recuperados, role até o final da página para que o usuário possa ver imediatamente os emails recuperados.

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

6. Por fim, verifique se nextLink retornou e, nesse caso, exiba o botão para carregar mais emails.

   Adicione o seguinte código ao final da função displayEmail():

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

7. A função displayEmail() completa deve ter a seguinte aparência:

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

Execute seu aplicativo

Você estendeu seu aplicativo para mostrar os emails de um usuário usando Microsoft Graph em lotes de 10 itens e permitir que ele carregue mais emails. Vamos executar o aplicativo localmente.

1. Visualize o aplicativo da Web executando o seguinte comando no terminal.

   npm start
   

2. Seu navegador deve estar apontando para http://localhost:8080.

3. Selecione o botão Entrar com a Microsoft para entrar com sua conta do Microsoft 365.

4. Depois de entrar com sua conta, selecione o botão Mostrar email.

5. Você deverá ver uma lista dos últimos 10 emails do usuário exibidos no aplicativo.

6. Se houver mais de 10 emails em sua caixa de correio, você verá um botão que permite carregar as próximas 10 mensagens.

7. Pare o servidor Node.js selecionando Ctrl+C na janela do terminal.

Continuar