In questo breve tutorial vedremo come utilizzare le API di Trello, uno dei più noti strumenti di collaborazione online.

La buona coordinazione di un team non può prescindere dall’utilizzo di un metodo o strumento di collaborazione.
Dovendo quotidianamente sottostare a ritmi incessanti di attività e continue variazioni di richieste dei clienti, è necessario che il flusso di lavoro sia ben definito e condiviso tra i partecipanti che concorrono a finalizzare un progetto o uno scopo. Dopo una serie di valutazioni Futuraweb ha deciso di migliorare la sua produttività utilizzando uno strumento flessibile, accessibile e immediato: Trello. Trello è un’applicazione web-based con estensioni specifiche per dispositivi mobili e permette di organizzare qualunque tipo di attività – non esclusivamente inerente la sfera lavorativa – in bacheche (board), liste (list) e schede (card).

Implementare la produttività e organizzare i task è semplice con #Trello Condividi il Tweet

Oltre ad una serie di interessanti caratteristiche, Trello mette a disposizione degli sviluppatori delle API per poter creare delle proprie applicazioni. Vediamo quindi come, sfruttando queste funzioni, è possibile creare una semplice pagina html che effettua alcune ricerche e visualizza i risultati graficamente coerenti con l’aspetto delle board di Trello.

  1. Per prima cosa creiamo un’application key che utilizzeremo per autenticare le chiamate REST API.
  2. Colleghiamo poi tutte le librerie js e css che ci serviranno (bootstrap, jquery, moment js, …) mediante CDN (Content Delivery Network): il risultato sarà un’unica pagina html senza alcun file di appoggio:
    <script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
    integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script src="https://api.trello.com/1/client.js?key=<!-- REPLACE AppKey WITH YOUR APPLICATION KEY -->"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/locale/it.js"></script>
    
  3. Autenticazione e chiamate alle API saranno effettuate da una libreria javascript messaci a disposizione da Trello cioè Client.js. A seguito della corretta autenticazione verrà chiamata la funzione “searchCards”. Il codice necessario per effettuare l’autenticazione e inizializzare l’applicazione è il seguente:
    Trello.authorize({
        type: "redirect",
        name: "Trello dashboard",
        scope: {read: true, write: false}, // Richiediamo i permessi di sola lettura.
        expiration: "never",
        success: searchCards,
        error: function() { console.log("Failed authentication"); }
    });
    
  4. Impostiamo le ricerche utilizzando gli operatori specifici.
    var researches = [{
        'searchText': 'is:open list:focus',
        'label': 'Focus'
    }, {
        'searchText': 'is:open due:overdue',
        'label': 'Scadute'
    }, {
        'searchText': 'is:open due:2',
        'label': 'In scadenza tra 2 giorni'
    }, {
        'searchText': 'is:open @me is:starred',
        'label': 'Board preferite, assegnate a @me'
    }];
    
  5. A seguito della corretta autenticazione, per ogni ricerca impostata vengono eseguite le corrispondenti chiamate alle API di Trello e visualizzate le schede trovate:
    var searchCards = function() {
        $.each(researches, function(index, value) {
            ...
            Trello.get("/search", ....
                loadedCards(cards, divId);
    
    ...
    var loadedCards = function(cards, divId) {   
    


Codice completo dell’applicazione su Github

Per approfondire:
https://trello.com/inspiration
https://developers.trello.com