Fala galera, tudo certo com vocês?
Dessa vez vamos fazer uma integração com uma ferramenta que quebra nosso galho todos os dias, o Trello. Nesse post vou mostrar como integrar com a nossa própria conta, acessar nossos boards, cards e finalmente criar um card. E nos próximos vamos ver como fazer a integração utilizando OAuth e integrando com qualquer conta, bora lá?
Como iniciar?
A primeira coisa que temos que fazer, é ter uma conta e estar logado no Trello, você pode fazer isso acessando o site: https://trello.com.
Feito isso, precisamos pegar nossa chave para integração com a API dos caras, podemos fazer isso acessando: https://trello.com/app-key e vamos ver uma tela parecida com essa aqui:
Depois que aceitarmos os termos, e clicarmos no botão “Show API Key”, vamos ver a seguinte tela com a nossa chave:
Guarde a sua chave que daqui a pouco a gente já usa ela, certo?
E por último, vamos obter um token para acessar as funcionalidades de nossa conta, esse token é quem te autentica no Trello. Para obter o token basta clicar no link conforme a imagem:
Após clicar no link, você vai ver essa tela aqui, com a solicitação de autorização, basta clicar em “Permitir”:
Depois de clicar no botão, você verá uma tela parecida com essa aqui, onde estará o seu Token:
Certo! Agora temos uma chave e um token, que serão necessários para fazer a integração.
E o código?
Agora vamos para a parte legal! Fazer a integração efetivamente.
Depois de criar uma aplicação com .NET Core MVC, compilar e rodar, ela vai ter mais ou menos essa cara aqui:
Depois de mudar um pouquinho, ela ficou com essa cara aqui, basicamente coloquei uma imagem e um botão:
O código dessa View ficou desse jeito, olhem para a funcionalidade do botão “Meu Trello” que vai para a Action “Index” do Controller “Trello”:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @{ | |
| ViewData["Title"] = "Home Page"; | |
| } | |
| <div class="text-center"> | |
| <h1 class="display-4">Integração com o</h1> | |
| </div> | |
| <div class="container"> | |
| <div class="row"> | |
| <img src="~/images/trello-logo-blue.png" class="img-fluid mx-auto" style="width: 50%; height: 50%"/> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <div class="row"> | |
| <a class="btn btn-primary" asp-controller="Trello" asp-action="Index">Meu Trello</a> | |
| </div> | |
| </div> |
Agora vejam o que acontece dentro dessa Action:
Primeiramente devemos criar a nossa classe “TrelloController” que herda de “Controller”; um Controller comum de um projeto em MVC.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| public class TrelloController : Controller | |
| { | |
| private string _apiKey = Environment.GetEnvironmentVariable("TRELLO_API_KEY"); | |
| private string _token = Environment.GetEnvironmentVariable("TRELLO_TOKEN"); | |
| private readonly HttpClient _httpClient; | |
| public TrelloController() | |
| { | |
| _httpClient = new HttpClient | |
| { | |
| BaseAddress = new Uri("https://api.trello.com/1/") | |
| }; | |
| } | |
| } |
Reparem que temos duas variáveis nas linhas 3 e 4: _apiKey e _token, que pegam valores de variáveis de ambiente. Nessas variáveis de ambiente estão os valores que pegamos logo acima no site do Trello. Beleza?
Na linha 6 temos a variável _httpClient que posteriormente vai guardar a instância da classe HttpClient, que vamos utilizar para fazer as requisições HTTP para a API do Trello.
E nas linhas de 7 a 13 temos o construtor da classe “TrelloController” que instancia a classe “HttpClient”, e vejam que no atributo BaseClass tem o valor “https://api.trello.com/1/” que é a base para todas as nossas requisições.
Logo abaixo, vamos implementar agora a Action “Index” que será responsável por buscar itens sobre meu perfil no Trello, vejam:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| public class TrelloController : Controller | |
| { | |
| //…continuação | |
| public async Task<IActionResult> Index() | |
| { | |
| var model = await TrelloGetRequest<TrelloUser>("members/me?boards=all&organizations=all&"); | |
| return View("Index", model); | |
| } | |
| private async Task<T> TrelloGetRequest<T>(string url) | |
| { | |
| var request = await _httpClient.GetAsync($"{url}key={_apiKey}&token={_token}"); | |
| if (!request.IsSuccessStatusCode) | |
| throw new Exception("Deu errado…"); | |
| var model = await request.Content.ReadAsAsync<T>(); | |
| return model; | |
| } | |
| } |
Antes de qualquer coisa, vou falar sobre o método “TrelloGetRequest“, ele basicamente faz uma requisição HTTP GET, para aquela url base do Trello, com mais alguma coisa que receber como parâmetro e por fim concatena a chave de acesso e o token.
No nosso exemplo a url a ser chamada vai ficar assim:
https://api.trello.com/1/members/me?boards=all&organizations=all&key=sua_key&token=seu_token
Esse endpoint vai nos retornar dados sobre o usuário, com todos os seus quadros e organizações.
A classe “TrelloUser” contém os seguintes atributos e métodos:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| public class TrelloUser | |
| { | |
| public string Id { get; set; } | |
| public string AvatarUrl { get; set; } | |
| public string FullName { get; set; } | |
| public string Initials { get; set; } | |
| public IEnumerable<TrelloBoard> Boards { get; set; } | |
| public IEnumerable<TrelloOrganization> Organizations { get; set; } | |
| public string GetAvatar(int size) | |
| { | |
| return $"{AvatarUrl}/{size}.png"; | |
| } | |
| public IEnumerable<TrelloBoard> GetBoardsByOrganization(string idOrganization) | |
| { | |
| return Boards.Where(x => x.IdOrganization == idOrganization); | |
| } | |
| } |
Como nesse endpoint são retornados todos os quadros em uma única lista, temos o método “GetBoardsByOrganization” para separar os quadros pra cada organização que possuímos.
O método “GetAvatar” retorna a url completa da imagem, que está hospedada na Amazon, e pode ser retornada com alguns tamanhos específicos.
E finalmente, as classes “TrelloBoard” e “TrelloOrganization” que tem o seguinte conteúdo:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //Organização | |
| public class TrelloOrganization | |
| { | |
| public string Id { get; set; } | |
| public string DisplayName { get; set; } | |
| } | |
| //Quadro | |
| public class TrelloBoard | |
| { | |
| public string Id { get; set; } | |
| public string IdOrganization { get; set; } | |
| public string Name { get; set; } | |
| } |
Por fim, quando acionamos a Action “Index“, temos nossa classe preenchida e retornada para a View com os dados do usuário a seguir:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @model TrelloUser | |
| @{ | |
| ViewData["Title"] = "Meu Trello"; | |
| } | |
| <div class="container"> | |
| <div class="row"> | |
| <img src="@Model.GetAvatar(170)" class="rounded mx-auto d-block" alt="@Model.FullName"> | |
| </div> | |
| <div class="row"> | |
| <b>Nome:</b> @Model.FullName | |
| </div> | |
| </div> | |
| <div class="container"> | |
| @foreach (var item in Model.Organizations) | |
| { | |
| <div class="row ml-1"> | |
| <b>@item.DisplayName</b> | |
| </div> | |
| <div class="row ml-3"> | |
| <div class="container"> | |
| @foreach (var board in Model.GetBoardsByOrganization(item.Id)) | |
| { | |
| <div class="row"> | |
| @board.Name <a asp-action="DetalhesBoard" asp-route-id="@board.Id"> (Ver Board)</a> | |
| </div> | |
| } | |
| </div> | |
| </div> | |
| } | |
| </div> |
A View vai basicamente percorrer os atributos da classe e exibir na tela, que vai ficar mais ou menos assim:
Que são as mesmas coisas que vemos no próprio site do Trello (sério?!)
Pra não estender muito esse post, vamos parar por aqui, ok?
No próximo vamos aprender como ver detalhes do quadro, com os cards e tudo mais, e também como criar um card via API. 😀
Para saber mais dos endpoints da API do Trello é só acessarmos o site: https://developers.trello.com/v1.0/reference. Lá tem informações sobre requisições, retornos e tudo que precisamos saber para buscar, cadastrar, editar e brincar com todos os itens do Trello, certo?
Belezura pessoal? Espero que seja útil!
Os códigos utilizados estão disponíveis no GitHub: https://github.com/vmussak/NetCoreTrelloIntegration
Por hoje é só isso, qualquer dúvida ou sugestão, estou à disposição! Até mais 😀
Vinícius Mussak 