Cómo construir tu propio motor de búsqueda de Instagram con jQuery y PHP

Desde que Google implementó las funciones de búsqueda instantánea, se ha convertido en una tendencia popular en el diseño web. Hay algunos ejemplos divertidos en línea como la aplicación Google Images de Michael Hart. Las técnicas son todas bastante sencillas, donde incluso un desarrollador web con experiencia moderada en jQuery puede recoger las API de programación y los datos JSON..

Para este tutorial quiero explicar. Cómo podemos construir una aplicación web de búsqueda instantánea similar. En lugar de extraer imágenes de Google, podemos utilizar Instagram, que ha crecido enormemente en tan solo unos pocos años..

Esta red social comenzó como una aplicación móvil para iOS. Los usuarios pueden tomar fotos y compartirlas con sus amigos, dejar comentarios y subirlas a redes de terceros como Flickr. El equipo fue adquirido recientemente por Facebook y había publicado una nueva aplicación para Android Market. Su base de usuarios ha crecido enormemente, y ahora los desarrolladores pueden crear increíbles mini-aplicaciones como esta demostración de búsqueda de investigación..

Ver demostración
Descargar fuente

Obtención de credenciales API

Antes de crear cualquier archivo de proyecto, primero debemos analizar las ideas detrás del sistema API de Instagram. Necesitará una cuenta para acceder al portal del desarrollador, que ofrece instrucciones útiles para principiantes. Todo lo que necesitamos para consultar la base de datos de Instagram es un “Identificación del cliente”.

En la barra de herramientas superior, haga clic en el enlace Administrar clientes, luego haga clic en el botón verde “Registrar un nuevo cliente”. Deberá darle a la aplicación un nombre, una breve descripción y la URL del sitio web. La URL y el URI de redireccionamiento pueden tener el mismo valor en esta instancia solo porque no necesitamos autenticar a ningún usuario. Solo complete todos los valores y genere los nuevos detalles de la aplicación.

Verás una larga cadena de caracteres nombrados IDENTIFICACIÓN DEL CLIENTE. Necesitaremos esta clave más adelante al crear el script de back-end, por lo que volveremos a esta sección. Por ahora podemos comenzar la construcción de nuestra aplicación de búsqueda instantánea jQuery..

Contenido de página web predeterminado

El HTML real es muy reducido para la cantidad de funcionalidad que estamos usando. Como la mayoría de los datos de imagen se agregan dinámicamente, solo necesitamos unos pocos elementos más pequeños dentro de la página. Este código se encuentra dentro de la index.html expediente.

    Aplicación de búsqueda instantánea de fotos de Instagram con jQuery         Nota: No se permiten espacios ni puntuación. Las búsquedas están limitadas a una (1) palabra clave.

Estoy usando la última biblioteca jQuery 1.7.2 junto con dos recursos externos .css y .js. El campo de búsqueda de entrada no tiene un envoltorio de formulario externo porque nunca queremos enviar el formulario y provocar una recarga de la página. He deshabilitado algunas pulsaciones de teclas dentro del campo de búsqueda para que haya más restricciones limitadas cuando los usuarios están escribiendo.

Rellenaremos todos los datos de la foto dentro de la ID de la sección central #fotos. Mantiene nuestro HTML básico limpio y fácil de leer. Todos los demás elementos HTML internos se agregarán a través de jQuery, y también se eliminarán antes de cada nueva búsqueda.

Tirando de la API

Me gustaría comenzar primero creando nuestro script PHP dinámico y luego pasar a jQuery. Mi nuevo archivo se llama instasearch.php que contendrá todos los ganchos de backend importantes en la API.

 La primera línea denota que nuestros datos de retorno están formateados como JSON en lugar de texto sin formato o HTML. Esto es necesario para que las funciones de JavaScript lean los datos correctamente. Luego, tengo algunas configuraciones de variables que contienen el ID del cliente de la aplicación, el valor de búsqueda del usuario y la URL final de la API. Asegúrese de actualizar la $ cliente valor de cadena para que coincida con su propia aplicación.
 Para acceder a los datos de esta URL, debemos analizar el contenido del archivo o usar las funciones cURL. La función personalizada get_curl () es solo un pequeño fragmento de código que se compara con la configuración actual de PHP.
 Si no tiene activada la tecla CURL, intentará activar la función y extraer los datos a través de su propia biblioteca de funciones. De lo contrario, simplemente podemos usar file_get_contents () que tiende a ser más lento, pero sigue funcionando igual de bien. Entonces podemos realmente jalar estos datos a una variable así:
 $ respuesta = get_curl ($ api); 
 Organizar y devolver datos
 Podríamos devolver esta respuesta JSON original de Instagram con toda la información cargada. Pero hay mucha información adicional y es muy molesto recorrer todo. Prefiero organizar las respuestas de Ajax y extraer exactamente los datos que necesitamos.
 Primero podemos configurar una matriz en blanco para todas las imágenes. Entonces dentro de un para cada() bucle extraeremos los objetos de datos JSON uno por uno. Sólo necesitamos tres (3) valores específicos que son los $ src(URL de imagen de tamaño completo), $ pulgar(URL de la imagen en miniatura), y $ url(foto única permalink).
 $ images = array (); if ($ response) foreach (json_decode ($ response) -> data como $ item) $ src = $ item-> images-> standard_resolution-> url; $ thumb = $ item-> images-> thumbnail-> url; $ url = $ item-> link; $ images [] = array ("src" => htmlspecialchars ($ src), "thumb" => htmlspecialchars ($ thumb), "url" => htmlspecialchars ($ url));  
 Aquellos que no están familiarizados con los bucles de PHP pueden perderse en el proceso. No se centre tanto en estos fragmentos de código si no entiende la sintaxis. Nuestro conjunto de imágenes contendrá como máximo 16-20 entradas únicas de fotos extraídas de la fecha de publicación más reciente. Luego podemos generar todo este código en la página como una respuesta jQuery Ajax.
 print_r (str_replace ('\\ /', '/', json_encode ($ images))); morir(); 
 Pero ahora que hemos echado un vistazo entre bambalinas, podemos saltar a los scripts de frontend. He creado un archivo ajax.js que contiene un par de controladores de eventos vinculados al campo de búsqueda. Si todavía estás haciendo un seguimiento hasta ahora, entonces emociona que estamos tan cerca de terminar.!
 Eventos Clave jQuery
 Al abrir el documento por primera vez. Listo() evento estoy configurando un par de variables. Los dos primeros se comportan como selectores de destino directos para el campo de búsqueda y el contenedor de fotos. También estoy usando un temporizador de JavaScript para pausar la consulta de búsqueda hasta 900 milisegundos después de que el usuario haya terminado de escribir.
 $ (document) .ready (function () var sfield = $ ("# s"); var container = $ ("# photos"); var timer; 
 Solo estamos trabajando con dos bloques de funciones principales. El controlador primario se activa mediante un evento .keydown () cuando se enfoca en el campo de búsqueda. Primero verificamos si el código clave coincide con alguna de nuestras claves prohibidas, y si es así, niega el evento clave. De lo contrario, borre el temporizador predeterminado y espere 900 ms antes de llamar instaSearch ().
 / ** * glosario del código clave * 32 = ESPACIO * 188 = COMMA * 189 = DASH * 190 = PERÍODO * 191 = BACKSLASH * 13 = ENTER * 219 = SOPORTE IZQUIERDO * 220 = AVANZAR AL PASO * 221 = SOPORTE DERECHO * / $ (sfield ) .keydown (función (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 (); else clearTimeout (timer); timer = setTimeout (function () instaSearch ();, 900);); 
 Cada vez que actualice el valor, irá automáticamente a buscar nuevos resultados de búsqueda. También hay muchos otros códigos clave que podríamos haber bloqueado para activar la función Ajax, pero demasiados para incluirlos en este tutorial..
 La función Ajax instaSearch ()
 Dentro de mi nueva función personalizada, primero estamos agregando un “cargando” clase en el campo de búsqueda. Esta clase actualizará el icono de la cámara para una nueva imagen de gif de carga. También queremos vaciar cualquier dato posible que quede en la sección de fotos. La variable de consulta se extrae dinámicamente del valor actual ingresado en el campo de búsqueda.
 función instaSearch () $ (sfield) .addClass ("cargando"); $ (contenedor) .empty (); var q = $ (sfield) .val (); $ .ajax (type: 'POST', url: 'instasearch.php', data: "q =" + q, success: function (data) $ (sfield) .removeClass ("loading"); $ .each (datos, función (i, elemento) var ncode = ' 
'; $ (contenedor) .append (ncode); ); , error: función (xhr, tipo, excepción) $ (sfield) .removeClass ("cargando"); $ (container) .html ("Error:" + tipo); );  
 Si está familiarizado con la función .ajax (), todos estos parámetros deben ser familiares. Estoy pasando el parámetro de búsqueda de usuario “q” como los datos POST. Tras el éxito y el fracaso eliminamos el “cargando” clase y anexar cualquier respuesta de nuevo en el #fotos envoltura.
 Dentro de la función de éxito, pasamos por la respuesta final de JSON para extraer elementos div individuales. Podemos lograr este bucle con la función $ .each () y apuntar a nuestra matriz de datos de respuesta. De lo contrario, el método de falla emitirá directamente cualquier mensaje de error de respuesta desde la API de Instagram. Y eso es todo lo que hay que hacer.!
  
 Ver demostración
 Descargar fuente
 
Pensamientos finales
 El equipo de Instagram ha hecho un trabajo maravilloso escalando una aplicación tan tremenda. La API puede ser lenta a veces, pero los datos de respuesta siempre tienen el formato correcto y es muy fácil trabajar con ellos. Espero que este tutorial pueda demostrar que hay mucho poder trabajando con aplicaciones de terceros..
 Desafortunadamente, las consultas de búsqueda actuales en Instagram no permiten más de 1 etiqueta a la vez. Esto limita nuestra demostración, pero ciertamente no elimina ninguno de sus encantos. Debes revisar el ejemplo en vivo de arriba y descargar una copia de mi código fuente para jugar. Además, háganos saber sus pensamientos en el área de discusión posterior.