Упражнение — пакетная загрузка сообщений электронной почты пользователя

Завершено

В этом упражнении вы расширите приложение, чтобы загружать письма пользователя блоками по 10 штук.

Загрузка писем блоками по 10 штук

Начните с обновления функции getEmails(), чтобы загружать письма блоками по 10 штук. Определив следующий набор писем для загрузки, передайте его в качестве аргумента функции.

1. В редакторе кода откройте файл graph.js.

2. Обновите подпись функции getEmails(), чтобы принять один аргумент nextLink:

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

3. Если аргумент nextLink задан, функция передаст его в пакет SDK для получения данных. Если аргумент nextLink не задан, функция загрузит начальный набор данных. Обновите функцию getEmails() заменив оператор return следующим оператором 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();
   }
   

   Обновленная функция getEmails() должна выглядеть следующим образом:

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

Расширьте шаблон, чтобы пользователи могли загружать больше писем

Вы расширили функцию getEmails(), чтобы загружать больше писем. Следующий шаг — отобразить кнопку, с помощью которой пользователи смогут загружать больше писем (если доступны).

1. В редакторе кода откройте файл index.html.

2. Найдите строку <ul id="emails"></ul> и добавьте следующий код сразу после него, чтобы добавить кнопку, которая позволяет пользователям загружать больше сообщений электронной почты.

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

Загрузка большего числа писем

Обновив приложение, чтобы пользователи могли загружать больше писем, выполните последний шаг — добавьте функциональность для обработки такой загрузки.

1. В редакторе кода откройте файл ui.js.

2. Перед выполнением функции displayEmail() определите новую переменную с именем nextLink, не назначая ей значение:

   var nextLink;
   

3. Во время выполнения функции displayEmail() обновите вызов, чтобы получить функцию getEmails() с аргументом nextLink.

   var emails = await getEmails(nextLink);
   

4. После получения данных получите значение свойства @odata.nextLink. Если оно задано, оно будет указывать на наличие дополнительных данных, доступных пользователям для отображения. Добавьте следующий код сразу после оператора if в функции displayEmail():

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

5. В конце выполнения функции displayEmail(), после отображения полученных писем, прокрутите страницу до конца, чтобы пользователь сразу же их увидел.

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

6. Наконец, проверьте, возвращен ли аргумент nextLink. Если да, отобразите кнопку для загрузки большего числа писем.

   Добавьте следующий код в конец функции displayEmail():

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

7. В итоге функция displayEmail() должна выглядеть следующим образом:

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

Запуск приложения

Вы расширили приложение, чтобы отображать письма пользователя с помощью Microsoft Graph блоками по 10 штук и дать пользователю возможность загружать больше писем. Запустим приложение локально.

1. Предварительно просмотрите веб-приложение, выполнив следующую команду в терминале.

   npm start
   

2. Браузер должен указывать на http://localhost:8080.

3. Нажмите кнопку Войти с помощью учетной записи Майкрософт, чтобы войти с помощью учетной записи Microsoft 365.

4. Выполнив вход с помощью учетной записи, нажмите кнопку Показать почту.

5. После этого список последних 10 писем пользователя должен отобразиться в приложении.

6. Если в вашем почтовом ящике больше 10 писем, вы увидите кнопку, позволяющую загрузить следующие 10 сообщений.

7. Остановите сервер Node.js, нажав клавиши CTRL+C в окне терминала.