Упражнение — отображение файлов пользователей

Завершено

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

Получение списка файлов

Для начала добавьте в приложение функцию вызова Microsoft Graph.

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

2. В конце файла добавьте новую асинхронную функцию getFiles(), позволяющую получать список файлов. Для получения свойств id, name, folder и package каждого файла используйте функцию select.

   // Get files in root of user's OneDrive
   async function getFiles() {
     ensureScope('files.read');
     try {
       const response = await graphClient
           .api('/me/drive/root/children')
           .select('id,name,folder,package')
           .get();
       return response.value;
     } catch (error) {
       console.error(error);
     }
   }
   

Добавление заполнителя HTML для отображения файлов

Далее добавьте HTML, отображающий список файлов.

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

2. Расширьте блок content горизонтальной линейкой, меткой и ненумерованным списком следующим образом:

   <div id="content" style="display: none;">
     <h4>Welcome <span id="userName"></span></h4>
     <!-- Add for file download -->
     <hr />
     <label>Files in your OneDrive root folder:</label>
     <ul id="downloadLinks"></ul>
   </div>
   

Отображение файлов в приложении

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

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

2. В конце файла добавьте функцию displayFiles().

   async function displayFiles() {
     const files = await getFiles();
     const ul = document.getElementById('downloadLinks');
     while (ul.firstChild) {
       ul.removeChild(ul.firstChild);
     }
     for (let file of files) {
       if (!file.folder && !file.package) {
         let a = document.createElement('a');
         a.href = '#';
         a.appendChild(document.createTextNode(file.name));
         let li = document.createElement('li');
         li.appendChild(a);
         ul.appendChild(li);
       }
     }
   }
   

   Обратите внимание, что инструкция if пропускает все папки и пакеты и отображает только файлы. На данный момент в API нет возможности отфильтровывать эти элементы. Кроме того, обратите внимание, что файлы отображаются как теги привязки объектов (гиперссылки). В следующем упражнении вы добавите функцию для скачивания файла при щелчке по его ссылке.

3. В конце функции displayUI() непосредственно перед закрывающей скобкой добавьте вызов displayFiles().

     // beginning of function omitted for brevity
     content.style = "display: block";
   
     displayFiles();
   }
   

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

Вы добавили в приложение функцию отображения файлов пользователя с помощью Microsoft Graph. Убедитесь, что в корневой папке экземпляра OneDrive пользователя есть какие-нибудь файлы, а затем запустите приложение в локальной среде.

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

   npm start
   

2. В браузере должен отображаться адрес http://localhost:8080.

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

4. Если вы запускаете приложение в первый раз, вам будет предложено предоставить приложению доступ к вашим файлам. Чтобы продолжить, предоставьте нужные разрешения.

   

5. Должен отобразиться список файлов.

   

6. Не выключайте сервер Node.js, так как он понадобится вам в следующей части упражнения.