Driblando a API do Flickr para exibir Sets ordenados por data

Aqueles que já tentaram utilizar a API do Flickr para apresentar sets (Álbuns) ordenados por data já perceberam que esta simples função é… impossível de ser feita (pelo menos hoje, enquanto escrevo este breve howto). O método flickr.photosets.getList traz apenas os sets ordenados por ID, ordenação que pode apresentar um resultado inesperado para o desenvolvedor.

Com um jeitinho conseguimos pedalar pra cima do Flickr. A verdade é que este tricky way envolve a utilização de duas bibliotecas muito utilizadas e extremamente úteis no desenvolvimento web: jQuery e Prototype JS. Recomendo a utilização das versões compactadas dos arquivos .js para reduzir o tempo de carregamento da página.

Mas, antes de começar, informo que este não é um tutorial sobre como acessar a API do Flickr para exibir álbuns e fotos, mas apenas como ordená-los cronologicamente. Para o beabá recomendo este excelente post do Matt Ryall, o qual utilizei como referência.

Utilizando o jQuery e o retorno em JSON da API do Flickr (método flickr.photosets.getList) já conseguimos trabalhar facilmente com os sets. Será uma estrutura com a apresentada abaixo (Exemplo retirado do site de Matt Ryall):

jsonFlickrApi({
    "photosets": {
        "photoset": [ {
            "id": "72157604307419500",
            "primary": "2372816823",
            "secret": "c76ae35928",
            "server": "3264",
            "farm": 4,
            "photos": "5",
            "title": { "_content": "Axis & Allies" },
            "description": { "_content": "A day of intense gaming ..."}
        }, ... ],
    },
    "stat":"ok"
})

Como é possível notar-se, não existe nenhum campo de data na estrutura. Logo, a solução será incluir a data em algum dos campos existentes. No meu caso, escolhi o campo “_content” de “title”. Apenas defini um padrão. A partir de agora os álbuns possuirão a seguinte estrutura de título:

20090303 Meu álbum de férias em Maui

Mantendo todos os meus álbuns com esta estrututura, conseguirei ordená-los cronologicamente. Só em pensar que bastava o Flickr disponibilizar um campo a mais…

Enfim, minha função ficará assim:

getListaDeAlbuns = function() {
    var arrayOrdObj = new Array();
    jQuery.getJSON('http://api.flickr.com/...&jsoncallback=?', function (data) {
        jQuery.each(data.photosets.photoset, function (i, set) {
            var y, m, d, dtP;
            var dateText = set.description._content.substring(0, 8);
            y = parseInt(dateText.substring(0, 4));
            m = (parseInt(dateText.substring(4, 6),10) - 1);
            d = parseInt(dateText.substring(6, 8),10);
            dtP = new Date();
            dtP.setFullYear(y,m,d);
            set.dtPubl = dtP;
            arrayOrdObj[i] = set;
        });
        arrayOrdObj = arrayOrdObj.sortBy(function(i){return -i.dtPubl},this);
        var y,ny,m,d,dM,list,li,dtData;
        var divAlbunsList = jQuery('
').attr('id', 'divAlbunsList'); jQuery.each(arrayOrdObj, function (i, set) { y = set.dtPubl.getFullYear(); if (i == 0) setID = set.id; if (i == 0 || y != ny) { list = jQuery('
').attr('id', 'liAlbunsList'); divAlbunsList.append(jQuery('

').text(y)); } var link = jQuery('').attr('id', 'set_' + set.id) .attr('title', set.description._content.substr(13)) .attr('href', 'javascript:getImages('' + set.id + '')') .text(set.title._content); ddData = jQuery('
'); dtData = jQuery('
').attr('class', 'classDate') .text(set.dtPubl.getDate().toPaddedString(2) + '/' + (set.dtPubl.getMonth()+1).toPaddedString(2)); li = jQuery('
  • ').attr('style', 'line-height:25px') .append(link).append(dtData); jQuery(ddData).append(link); jQuery(list).append(dtData).append(ddData); divAlbunsList.append(list); ny = y; }); jQuery(divAlbunsList).append(list); jQuery('#container').empty(); jQuery('#container').append(divAlbunsList); }); }
  • Vamos às explicações de cada linha:

    1. Declaração da função.
    2. Criação do meu objeto Array que será ordenado.
    3. Chamada à API do Flickr pelo jQuery.
    4. Função para iteração dentro dos nós do array retornado.
    5. Variáveis que serão utilizadas para data
      y = ano
      m = mês
      d = dia
      dtP = data de publicação
    6. String com data é retirada do título do álbum.
    7. Inteiro com valor do ano.
    8. Inteiro com valor do mês.
    9. Inteiro com valor do dia.
    10. Criação do objeto Date.
    11. Definição do objeto Date.
    12. Inserção do objeto Date no objeto javascript retornado pela API do Flickr.
    13. Adição do objeto ao array criado na linha 2.
    14. A ordenação torna-se algo extremamente simples, resolvida em apenas uma linha, com a utilização do método sortBy, do Prototype. No meu exemplo, como quero ordenar do álbum mais recente para o mais antigo, retorno o valor negativo.

    Da linha 16 em diante define-se apenas a exibição dos dados. Novamente é feita iteração, agora com o array arrayOrdObj, e uma lista com os álbuns é apresentada. Nota-se que cada item de lista possui um link para uma função javascript getImages(), que faz a chamada à API do Flickr para trazer as fotos do álbum selecionado, mas isso é assunto para outro post.

    Nenhum comentário.

    Leave a Reply

    Your email address will not be published. Required fields are marked *