Привет, меня зовут Тео, как дела?
Я работаю над проектом, которому по определенной причине необходимо отобразить данные из инструмента управления проектами Trello в одном из наших шаблонов просмотра. Поэтому нам нужно извлечь данные из нашей доски Trello и отобразить их в другом месте.
В таких случаях Trello реализует готовое к использованию решение: HTML-код для карточек, который можно встроить прямо на страницу и отображать карточки в стиле Trello. которые отображают информацию с вашей доски непосредственно пользователям без необходимости посещения веб-сайта.
Это выглядит так:

Код такого решения довольно прост, как описано здесь
и выглядит так:

<blockquote class="trello-card">
  <a href="{url to card}">Trello Card</a>
</blockquote>
<script src="https://p.trellocdn.com/embed.min.js"></script>

Довольно простой и удобный в использовании, пока все хорошо.
Он безупречно работает для общедоступных досок, с которых можно легко получить данные, например, не слишком беспокоясь о конфиденциальности. Однако, если это необходимо для отображения данных с частных досок на другой странице, вышеупомянутый HTML-код не работает. Trello не позволяет встраивать личную информацию за пределы собственных доменов. Как мы должны это сделать?

Не беспокойтесь, дорогой разработчик Javascript! Несмотря на то, что он не позволяет использовать простой в использовании HTML-код plug-and-play для получения данных с частных досок, Trello API — ваш друг. У него есть несколько конечных точек, к которым вы можете подключиться, и, что наиболее важно, он действительно удобочитаем и помогает разработчикам, чего не хватает многим другим сервисам и библиотекам с открытым исходным кодом.

Без лишних слов, приступим к делу!

1 — Определение нашей области

1.1 Пользователь

С этого момента я буду называть пользователя человека, который заходит на наш веб-сайт и видит данные — включая списки и доски — с нашей частной доски Trello без необходимости входа в систему или регистрация в Trello.

1.2 Данные, которые мы хотим получить от Trello

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

2 — API Трелло

Доски Trello состоят из нескольких элементов. Сама доска, списки, которые принадлежат доске и карточки, которые принадлежат спискам. Структура с точки зрения конечных точек API выглядит примерно так:

На доске есть

GET board/{id}/lists

где {id} — это идентификатор доски, с которой мы хотим получить информацию. Его можно легко вывести из URL-адреса вашей доски, поэтому для такого адреса:

https://trello.com/b/arggKDfh/YOUR-BOARD

{id} находится между b/ и /YOUR-BOARD. Таким образом, в этом случае {id} равен arggKDfh.

Конечная точка возвращает объект JSON со следующей структурой:

[
  {
    "id": "57a890c6504676888e1dd737",
    "name": "Backlog",
    "cards": [
      {
        "id": "57a890c7504676888e1dd818",
        "name": "Product Owner: Brian"
      },
      {
        "id": "57a890c7504676888e1dd7e5",
        "name": "(3) fix /org/:id route"
      }
    ]
  },
  {
    "id": "57a890c6504676888e1dd738",
    "name": "Sprint Backlog",
    "cards": [
      {
        "id": "57a890c6504676888e1dd776",
        "name": "(8) Clicking the collection beneath a board should filter by collection, not open collections pop-over"
      },
      {
        "id": "57a890c7504676888e1dd7f0",
        "name": "(2) BC3 team boards page: Show Other Private Boards"
      },
      {
        "id": "57a890c6504676888e1dd772",
        "name": "(1) Add post-message-io"
      }
    ]
  },
  {
    "id": "57a890c6504676888e1dd739",
    "name": "In Progress",
    "cards": [
      {
        "id": "57a248d3977a6e388bf6cb80",
        "name": "Multiple due dates"
      }
    ]	
  }
]

пример взят из Справочника Trello API

Как видите, мы получаем массив объектов Javascript, у которых есть три свойства:

1 - id: The id for each list on the board;
2 - the name of each list
3 - An array which consist of cards in that list

Чтобы получить эти данные, нам нужно выполнить вызов API Trello из нашего кода. Поскольку нам нужна эта информация, чтобы продолжить разработку, необходима некоторая синхронность, которая позволяет нам сначала получить данные и только потом продолжить.

Для этого мы будем полагаться на Promises. Это способ Javascript справиться с асинхронностью — или, лучше сказать, со сценарием, когда вам нужен синхронный поток данных в асинхронной среде. Предыдущим способом сделать это была библиотека Async. Промисы были представлены в ECMAScript 2015, и в этом руководстве мы не будем вдаваться в подробности, потому что есть обширные ресурсы, которые охватывают все, что вам нужно знать о них. Вот некоторые из них:

https://medium.com/dailyjs/asynchronous-adventures-in-javascript-promises-1e0da27a3b4

https://javascript.info/promise-chaining (это для цепочки промисов, что будет важно в нашем случае)

https://github.com/getify/You-Dont-Know-JS/blob/master/async %26 производительности/ch3.md

В любом случае, хватит вступления, давайте перейдем к коду! Сначала мы представим весь код, а позже объясним, что делает каждая его часть!

Нам нужен модуль request-promise, который позволяет нам совершать вызовы к внешнему API и обрабатывать результат этого вызова с помощью объекта thenable, в данном случае Promise.

Далее мы определяем boardId, ключ и токен для доступа к Trello API. Первые два должны быть достаточно понятными. Однако то, как вы получите токен, определяется вашим вариантом использования: здесь нам нужен токен, срок действия которого не истекает.
Эта ссылка объясняет, как его получить:

https://stackoverflow.com/questions/17178907/how-to-get-a-permanent-user-token-for-writes-using-the-trello-api

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

Затем мы определяем точку входа для нашего кода: метод getDataFromBoard(). Он отвечает за отправку GET запроса к конечной точке API Trello и возврат карточек в каждом списке на нашей доске.

Результат этого вызова передается методу getPersonInCards(), который создает массив из Promise объектов, каждый из которых содержит GET запрос к конечной точке /members API Trello.

Эта конечная точка возвращает объект, представляющий пользователя в базе данных Trello. Полный список свойств, возвращаемых вызовами конечной точки /members, можно найти здесь:

https://developers.trello.com/v1.0/reference#member-object

Среди них нужный нам: fullName. Для каждой карточки мы получаем имена членов, связанных с ней, и передаем их следующему then в нашем методе getDataFromBoard(). Мы также храним их в нашем массиве objects, чтобы когда-нибудь в будущем мы могли присоединиться к исходным карточкам Trello с именами участников. Затем мы используем массив имен, возвращаемый методом Promise.all, в методе joinCardsToMembersNames(), который создает свойство с именем nameMembers в каждой карточке, которую мы ранее получили из Trello API.

Наконец, мы возвращаем этот измененный объект Card в наше представление, которое видит только объект, очень похожий на исходный объект Card из Trello API, только с новым свойством, прикрепленным к Это.

Каждый новый объект Card выглядит следующим образом:

{ id: '5a7ce599abb969513e966df4',
name: 'Users should be able to change their profile picture on the "Profile" page',
idMembers: [ '502a6651e4aa52502119c988' ],
nameMembers: [ 'Teogenes Moura' ] }

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

На сегодня это все, надеюсь, вам понравился урок.
Пока,
Тео