Como construir seu próprio mecanismo de busca do Instagram com jQuery e PHP

Desde que o Google lançou recursos de busca instantânea, tornou-se uma tendência popular em web design. Há alguns exemplos divertidos on-line, como o aplicativo do Google Imagens do Michael Hart. As técnicas são bastante diretas, onde mesmo um desenvolvedor web com experiência moderada em jQuery pode obter APIs de programação e dados JSON.

Para este tutorial eu quero explicar como podemos construir um aplicativo da web de pesquisa instantânea semelhante. Em vez de puxar imagens do Google, podemos usar o Instagram, que cresceu tremendamente em apenas alguns anos..

Esta rede social começou como um aplicativo móvel para iOS. Os usuários podem tirar fotos e compartilhá-las com seus amigos, deixar comentários e fazer o upload para redes de terceiros, como o Flickr. A equipe foi recentemente adquirida pelo Facebook e publicou um novo aplicativo para o Android Market. Sua base de usuários cresceu enormemente, e agora os desenvolvedores podem criar mini-aplicativos incríveis como esta demonstração instasearch.

Ver demonstração
Fonte de download

Obtendo Credenciais da API

Antes de criar qualquer arquivo de projeto, devemos primeiro examinar as ideias por trás do sistema de API do Instagram. Você precisará de uma conta para acessar o portal do desenvolvedor, que oferece instruções úteis para iniciantes. Tudo o que precisamos para consultar o banco de dados do Instagram é um “ID do Cliente”.

Na barra de ferramentas superior, clique no link Gerenciar clientes e, em seguida, clique no botão verde “Registre um novo cliente”. Você precisará fornecer um nome, uma breve descrição e um URL do site ao aplicativo. O URL e o URI de redirecionamento podem ter o mesmo valor nesta instância apenas porque não precisamos autenticar nenhum usuário. Basta preencher todos os valores e gerar os novos detalhes do aplicativo.

Você verá uma longa seqüência de caracteres nomeados ID DO CLIENTE. Vamos precisar desta chave mais tarde, quando construirmos o script de backend, por isso voltaremos a esta seção. Por enquanto, podemos começar a construção do nosso aplicativo de pesquisa instantânea jQuery.

Conteúdo da Página da Web Padrão

O HTML real é muito pequeno para a quantidade de funcionalidade que estamos usando. Como a maioria dos dados da imagem é anexada dinamicamente, exigimos apenas alguns elementos menores dentro da página. Este código é encontrado dentro do index.html Arquivo.

    Aplicativo de Busca Instantânea Instagram com jQuery         Nota: Nenhum espaço ou pontuação é permitido. As pesquisas estão limitadas a uma (1) palavra-chave.

Estou usando a última biblioteca do jQuery 1.7.2 junto com dois recursos externos .css e .js. O campo de pesquisa de entrada não tem wrapper de formulário externo porque não queremos enviar o formulário nem gerar uma atualização de página. Desativei algumas teclas no campo de pesquisa para que haja restrições mais limitadas quando os usuários estão digitando.

Vamos preencher todos os dados da foto dentro do ID da seção intermediária #photos. Ele mantém nosso HTML básico limpo e fácil de ler. Todos os outros elementos HTML internos serão adicionados via jQuery e também removidos antes de cada nova pesquisa.

Puxando da API

Eu gostaria de começar primeiro criando o nosso script PHP dinâmico e depois passar para o jQuery. Meu novo arquivo é chamado instasearch.php que conterá todos os importantes back-end da API.

 A primeira linha indica que nossos dados de retorno estão formatados como JSON, em vez de texto simples ou HTML. Isso é necessário para que as funções JavaScript leiam os dados corretamente. Depois, tenho algumas configurações de variáveis contendo o ID do cliente do aplicativo, o valor de pesquisa do usuário e o URL final da API. Certifique-se de atualizar o cliente $ valor da string para corresponder ao seu próprio aplicativo.
 Para acessar esses dados de URL, precisamos analisar o conteúdo do arquivo ou usar as funções cURL. A função personalizada get_curl () é apenas um pequeno pedaço de código que verifica a configuração atual do PHP.
 Se você não tiver o cURL ativado, ele tentará ativar o recurso e puxar os dados por meio de sua própria biblioteca de funções. Caso contrário, podemos simplesmente usar file_get_contents (), que tende a ser mais lento, mas ainda funciona bem. Então, podemos realmente puxar esses dados para uma variável da seguinte forma:
 $ response = get_curl ($ api); 
 Organizando e devolvendo dados
 Poderíamos apenas retornar essa resposta JSON original do Instagram com todas as informações carregadas. Mas há muitos dados extras e é muito irritante passar por tudo. Eu prefiro organizar as respostas do Ajax e extrair exatamente quais dados precisamos.
 Primeiro podemos configurar um array em branco para todas as imagens. Então dentro de um para cada() loop vamos extrair os objetos de dados JSON um por um. Nós só precisamos de três (3) valores específicos que são o $ src(URL de imagem em tamanho completo), $ thumb(URL da imagem em miniatura) e $ url(permalink foto única).
 $ images = array (); if ($ response) foreach (json_decode ($ resposta) -> dados como $ item) $ src = $ item-> imagens-> standard_resolution-> url; $ thumb = $ item-> images-> thumbnail-> url; $ url = $ item-> link; $ images [] = array ("src" => htmlspecialchars ($ src), "thumb" => htmlspecialchars ($ thumb), "url" => htmlspecialchars ($ url));  
 Aqueles que não estão familiarizados com loops PHP podem se perder no processo. Não se concentre tanto nesses snippets de código se você não entender a sintaxe. Nossa matriz de imagens conterá no máximo 16 a 20 entradas exclusivas de fotos retiradas da data de publicação mais recente. Então podemos enviar todo esse código para a página como uma resposta do jQuery Ajax.
 print_r (str_replace ('\\ /', '/', json_encode ($ imagens))); morrer(); 
 Mas agora que tivemos uma olhada nos bastidores, podemos entrar no script de frontend. Eu criei um arquivo ajax.js que contém alguns manipuladores de eventos vinculados ao campo de pesquisa. Se você ainda está seguindo até agora, então fique animado, estamos tão perto da conclusão!
 jQuery Key Events
 Quando primeiro abrindo o documento pronto() evento estou configurando algumas variáveis. Os dois primeiros se comportam como seletores de destino diretos para o campo de pesquisa e o contêiner de fotos. Também estou usando um temporizador de JavaScript para pausar a consulta de pesquisa até 900 milissegundos depois que o usuário terminar de digitar.
 $ (document) .ready (função () var sfield = $ ("# s"); var container = $ ("# fotos"); var timer; 
 Existem apenas dois blocos funcionais com os quais estamos trabalhando. O manipulador principal é acionado por um evento .keydown () quando focalizado no campo de pesquisa. Primeiro, verificamos se o código chave corresponde a qualquer uma das nossas chaves proibidas e, se assim for, negamos o evento principal. Caso contrário, limpe o temporizador padrão e espere 900 ms antes de chamar instaSearch ().
 / ** * glossário de keycode * 32 = SPACE * 188 = COMMA * 189 = DASH * 190 = PERÍODO * 191 = BACKSLASH * 13 = ENTER * 219 = SUPORTE ESQUERDO * 220 = SLASH PARA FRENTE * 221 = SUPORTE DIREITO * / $ (sfield ) .keydown (função (e) if (e.keyCode == '32' || e.keyCode == '188' || e.keyCode == '189' || e.keyCode == '13' | | e.keyCode == '190' || e.keyCode == '219' || e.keyCode == '221' || e.keyCode == '191' || e.keyCode == '220') e.preventDefault (); mais clearTimeout (temporizador); timer = setTimeout (function () instaSearch ();, 900);); 
 Toda vez que você atualizar o valor, ele automaticamente buscará novos resultados de pesquisa. Existem também muitos outros códigos chave que poderíamos ter bloqueado para ativar a função Ajax - mas muitos para listar neste tutorial.
 A função Ajax instaSearch ()
 Dentro da minha nova função personalizada estamos primeiro adicionando um “Carregando” classe no campo de pesquisa. Esta turma atualizará o ícone da câmera para uma nova imagem de carregamento do gif. Também queremos esvaziar todos os dados possíveis restantes na seção de fotos. A variável de consulta é obtida dinamicamente do valor atual inserido no campo de pesquisa.
 function instaSearch () $ (sfield) .addClass ("carregamento"); $ (container) .empty (); var q = $ (sfield) .val (); $ .ajax (tipo: 'POST', url: 'instasearch.php', dados: "q =" + q, sucesso: function (data) $ (sfield) .removeClass ("carregamento"); $ .each (dados, função (i, item) var ncode = ' 
'; $ (container) .append (ncode); ); , erro: function (xhr, tipo, exceção) $ (sfield) .removeClass ("loading"); $ (container) .html ("Erro:" + tipo); );  
 Se você estiver familiarizado com a função .ajax (), todos esses parâmetros devem parecer familiares. Estou passando o parâmetro de pesquisa do usuário “q” como os dados POST. Após o sucesso e o fracasso, removemos o “Carregando” classe e acrescentar qualquer resposta de volta para o #photos embrulho.
 Dentro da função de sucesso, estamos percorrendo a resposta JSON final para extrair elementos div individuais. Podemos realizar esse loop com a função $ .each () e direcionar nossa matriz de dados de resposta. Caso contrário, o método de falha emitirá diretamente qualquer mensagem de erro de resposta da API do Instagram. E isso é tudo que existe!
  
 Ver demonstração
 Fonte de download
 
Pensamentos finais
 A equipe do Instagram fez um ótimo trabalho escalando uma aplicação tão grande. A API pode ser lenta às vezes, mas os dados de resposta são sempre formatados corretamente e muito fáceis de se trabalhar. Espero que este tutorial possa demonstrar que há muita energia trabalhando com aplicativos de terceiros.
 Infelizmente, as consultas de pesquisa do Instagram atuais não permitem mais de uma tag de cada vez. Isso está limitando a nossa demonstração, mas certamente não elimina seu charme. Você deve verificar o exemplo ao vivo acima e fazer o download de uma cópia do meu código-fonte para brincar. Além disso, deixe-nos saber seus pensamentos na área de pós-discussão abaixo.