Muchos de los nuevos servicios web en línea proporcionan API de back-end para los desarrolladores. Estos permiten que cualquier persona se conecte a una aplicación web y extraiga información específica (o envíe o cambie bits de datos). Hoy estamos buscando específicamente la API para Imgur.
En este tutorial, quiero demostrar cómo podemos reflejar remotamente una imagen encontrada en otro lugar en línea y cargarla automáticamente a Imgur. También es posible crear un formulario que maneje las imágenes subidas por el usuario. Pero quería mantener la demostración limpia sin necesidad de mover el contenido del usuario al servidor. Este proceso es muy simple una vez que entiendes cómo funcionan las API. ¡Eche un vistazo a mi demostración en vivo para ver exactamente lo que haremos, luego siga adelante!
Demo en vivo - Descargar código fuente
Diseño de página web
La interfaz de la página real es muy simple y sería fácil de personalizar para cualquier otro diseño. Tengo un pequeño cuadro de entrada donde el usuario debe ingresar una URL directa que enlaza con una imagen en línea. En lugar de enviar un formulario a otra página, podemos manejar la solicitud a través de Ajax. La única dependencia es una copia de la última biblioteca de jQuery.
Cuando obtengamos una respuesta del script PHP, debería contener la nueva URL de la imagen. Hay una larga lista de parámetros de respuesta que se pueden devolver desde Imgur que podríamos usar. Esto incluye el nombre de usuario del cargador, el título de la imagen, la fecha de carga, entre otros fragmentos de metadatos. Sin embargo, para esta demostración quería mantener las cosas simples y fáciles de seguir.
Después de hacer clic en el enlace Cargar, la imagen subirá a Imgur. Esto llevará unos segundos antes de que obtengamos los datos de retorno, que luego se devuelven a JavaScript. Apuntando al enlace de anclaje #newimgurllink podemos agregar la URL directa al valor href, además de agregar el texto de anclaje. Es una solución muy básica para crear vínculos dinámicos de imgur sin una actualización de página.
Profundizando en jQuery
Solo hay un gran bloque de código que debe ejecutarse utilizando jQuery. Esto sucede una vez que el usuario hace clic en #imgurupl que llama a la nueva solicitud de Ajax. Estoy usando el símbolo de hash (#) para un valor href porque cancelamos la acción original usando e.preventDefault ().
Lo primero que hacemos es crear una variable. b64ajax Para albergar la solicitud del Ajax. Enviará el valor del campo de entrada a una nueva página llamada upload.php que lo toma como una variable POST. Esto es importante porque necesitamos acceder a este valor de URL y devolver algo a la interfaz.
Esto se aplica a la propia variable Ajax ejecutando b64ajax.done (). Es una función que se ejecuta automáticamente después de que finaliza la devolución de llamada con un resultado Ajax. Suponiendo que obtengamos un valor de cadena devuelto desde PHP, entonces sabemos que una imagen se cargó correctamente, por lo que agregamos este valor de enlace en el HTML dinámicamente.
API Imgur en PHP
Cuando busqué por las demostraciones de API de Imgur v3, me encontré con este maravilloso script de Stack Overflow. Proporciona una aplicación de carga de imágenes localmente vinculada directamente a Imgur. Su código proporciona una buena línea de base para lo que estamos creando.
Ahora lo primero que debe hacer antes de que incluso la codificación en PHP sea registrarse para obtener una clave API. Puede registrarse desde esta página solo después de haber iniciado sesión en una cuenta. Entonces, si no tiene una cuenta Imgur, debe registrarse (es gratis). Una vez que cree una nueva aplicación, esto generará automáticamente un nuevo cliente y una ID secreta.
Al acceder a datos anónimos, todo lo que necesitamos es el ID de cliente. Las IDs secretas se utilizan para verificar las sesiones cuando se usa OAuth para conectarse a las cuentas de usuario. Puede ser una funcionalidad muy beneficiosa, pero no dentro del alcance de este tutorial. No hay mucho PHP que entender, así que lo desglosaré lentamente.
Obviamente $ clientid debe mantener su nueva ID de aplicación. La variable de URL pasada a través de Ajax también se establece en una nueva variable. cURL es una popular biblioteca de funciones que se utiliza para comunicarse con servidores a través de varios protocolos. En este caso, necesitamos acceder al punto final de carga de Imgur que se define como CURLOPT_URL.
Otra idea realmente importante para eliminar estas variables es la configuración de ID de cliente. Dentro de la documentación de la API de Imgur notará que hay un formato específico que debemos pasar a los encabezados de solicitud de Ajax. Esto se parece a? Autorización: ID de cliente lo que puede echar a algunas personas. Solo recuerda que necesitas el texto. Identificación del cliente precediendo la cadena de identificación real.
Estas líneas finales de código simplemente ejecutan la solicitud HTTP y luego devuelven exactamente lo que necesitamos para pasar a jQuery. curl_exec () y curl_close () deben ser bastante autoexplicativos. Observe que la función de ejecución devolverá datos del servidor que se encuentra en la variable $ respuesta. Dado que solicitamos datos JSON del servidor, necesitamos convertir esto en una matriz de PHP utilizando json_decode ().
Con esta nueva matriz de datos de respuesta, solo necesitamos extraer la URL de la imagen directa. Esto se puede acceder por $ responder-> datos-> enlace dónde $ responder-> datos Contiene un subconjunto de variables alternativas. Si tienes curiosidad por esta matriz, puedes ejecutar el código. print_r ($ reply-> data) Para ver qué otras piezas de información se devuelven. Pero finalmente, para cerrar el programa, hacemos eco de la URL del enlace de respuesta y terminamos con exit ().
Gran parte de este código se volverá más claro una vez que juegues más. Las API son una forma divertida de practicar el desarrollo de aplicaciones web porque puedes aprender superando desafíos en el camino. Recuerde que dado que esta demostración se está ejecutando a través de PHP, solo funcionará correctamente cuando se aloje en un servidor web local o remoto.
Demo en vivo - Descargar código fuente
Pensamientos finales
Imgur es una de las API más confusas con las que he trabajado debido al sistema específico de credenciales de ID de cliente. Una vez que haya configurado todo, parece funcionar de manera muy confiable; no dude en descargar una copia de mi código fuente y crear algo similar en uno de sus propios proyectos, o intente llevar el proyecto un poco más lejos con la carga directa de archivos del usuario ¡computadora!