Disclaimer: This post was originally published in 2016 and might not follow current best practises for Javascript programming so follow the tutorial with that in mind.
Hi, I’m Teo, how are you? I’m working on a project that for a specific reason needs to display data from the project management tool Trello in one of our View templates. We need, therefore, to extract data from our Trello board and display it elsewhere.Trello implements a ready to use solution in those cases: HTML code for cards that you can embed right into your page and display trello-style cards that display information from your board directly to users without them having to visit the website.It looks like this:
The code for this kind of solution is pretty simple, as documented hereand looks like this:
Pretty simple and easy to use, so far so good.It works flawlessly for public boards, from which data can be retrieved easily without worrying too much about privacy, for example. However, needed it be to display data from private boards in other page the HTML code aforementioned doesn’t work. Trello doesn’t allow for private information to be embedded outside it’s own domains. How should we do this, then?
Worry not, dear Javascript developer! Although it doesn’t allow for easy-to-use, plug-and-play HTML code for getting data from private boards, the Trello API is your friend. It has multiple endpoints that you can connect to and most importantly — it is actually readable and help developers, a trait lacking in many other services and open source libraries.
Without further ado, let’s get to business!
1 — Defining our scope
1.1 The user
From here on, I’ll call user the person who comes to our website and sees data — including lists and boards — from our private Trello board without the need to login or signup for Trello itself.
1.2 Data we want to get from trello
In this example, we want to display the lists on our board, the cards in each list and the name of members who are assigned to each card. Then, we build a view that shows that information to our users.
2 — The Trello API
Trello boards are composed of several elements. The board itself, the lists that belong to the board and cards that belong to the lists. The structure, in terms of API endpoints look somewhat like this:
A board has aGET board/{id}/lists
in which {id} is the id of the board we want to get information from. It can be easily deduced from the URL of your board, so for an address like this:https://trello.com/b/arggKDfh/YOUR-BOARD
the {id} is located between b/ and /YOUR-BOARD. In this case, therefore, the {id} is equal to arggKDfh.
The endpoint returns a JSON object structured as follows:
example taken from the Trello API reference
As you can see, we receive an array of Javascript objects that have three properties:1 - id: The id for each list on the board;2 - the name of each list3 - An array which consist of cards in that list
To get this data means we need to perform a call to the Trello API from our code. Since we need this information in order to proceed with development, some synchronicity which allows us to first get the data and only then continue is needed.
We’ll rely on Promises to achieve that. They’re the Javascript way of dealing with asynchronicity — or better put, with the scenario when you need synchronous dataflow in an asynchronous environment. The previous way of doing that was the Async library. Promises were introduced with the ECMAScript 2015 and we won’t go into much detail in this tutorial because there are extensive resources that cover whatever you need to know about them. A few of them are:
https://medium.com/dailyjs/asynchronous-adventures-in-javascript-promises-1e0da27a3b4
https://javascript.info/promise-chaining (This one is for chaining Promises, which will be important in our case)
https://github.com/getify/You-Dont-Know-JS/blob/master/async %26 performance/ch3.md
Anyway, enough with the introduction, let’s get to the code! First, we’ll introduce the whole code and later we’ll explain what each part is doing! We require the request-promise module, which allows us to make calls to an external API and handle the result from that call with a thenable object, in this case a Promise.
Following, we define the boardId, key and Token for accessing the Trello API. The first two should be quite self-explanatory. How you get the token, however, is defined by your use case: Here, we need a token that doesn’t expire.This link explains how you get one:
https://stackoverflow.com/questions/17178907/how-to-get-a-permanent-user-token-for-writes-using-the-trello-api
We also define a objects array, which will hold two pieces of information vital to our application: Trello Cards and the data we get specific to each member related to those cards.
Next, we define the entrypoint for our code: the getDataFromBoard() method. It is responsible for making a GET request to the Trello API endpoint and return the cards within each list on our board.
The result from that call is passed on to the getPersonInCards() method, which creates an array of Promise objects each containing a GET request to the /members endpoint of the Trello API.
That endpoint returns an object that represents a user in the Trello database. A full list of the properties returned by calls to the /members endpoint can be found here:
https://developers.trello.com/v1.0/reference#member-object
Among them, the one we need: fullName. For each card, we get the names of members associated to it and pass them on to next then in our getDataFromBoard() method. We also store them in our objects array, so that we're able to join the original Trello Cards with member's names sometime in the future. We then use the array of names returned by the Promise.all method in the joinCardsToMembersNames() method, which creates a property called nameMembers in every card we had previously gotten from the Trello API.
Lastly, we return that modified Card object to our view, which only sees an object that closely resembles the original Card object from the Trello API, only with a new property attached to it.
Each new Card object looks like this:{ id: '5a7ce599abb969513e966df4',name: 'Users should be able to change their profile picture on the "Profile" page',idMembers: [ '502a6651e4aa52502119c988' ],nameMembers: [ 'Teogenes Moura' ] }
It provides the View portion of the code with a clean, nice to use data from our private board from Trello.
That’s it for today, hope you enjoyed the tutorial.Bye,Teo
