Una guía para principiantes sobre clientes API JSON basados ​​en jQuery

 

 

 

  • Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX
  • ¡Registro!

  • Índice
    1. Las API son el futuro pero, más importante aún, el presente
      1. API en pocas palabras
    2. Claro, genial, pero ¿qué código necesito?
      1. Jugador 1: JSON
      2. Jugador 2: jQuery
    3. El objetivo: un cliente API JSON basado en jQuery
      1. El HTML
      2. El jQuery
    4. El código completo
      1. El HTML
      2. El jQuery
    5. Conclusión
    6. Recursos adicionales
      1. Lecturas adicionales sobre SmashingMag:

    ¿Le fascinan los datos dinámicos? ¿Te pones verde de envidia cuando ves tweets incorporados mágicamente a sitios web? Créame, he estado allí.

     

    El objetivo del tutorial de hoy es crear una aplicación web sencilla para capturar carteles de películas de TMDb . Usaremos jQuery y la entrada del usuario para consultar una API basada en JSON y manejar los datos devueltos de manera adecuada.

    Espero convencerte de que las API no dan miedo y que la mayoría de las veces pueden ser las mejores amigas de un desarrollador.

    Las API son el futuro pero, más importante aún, el presente

    Las API basadas en JSON son una propiedad de moda en la Web en este momento. No puedo recordar la última vez que entré en un blog o portafolio sin ver los tweets del propietario o los amigos de Facebook mirándome. Esta interactividad hace de la Web un lugar apasionante. El único límite parece ser la imaginación de la gente. Como lo demuestra todo, desde tweets extraídos hasta una API de tipos de cambio consciente de sí misma , los datos son actualmente los reyes y los sitios web los intercambian libremente.

    Los desarrolladores nos permiten acceder a sus datos de forma mucho más abierta ahora; Ya no está todo bajo llave. Los sitios web se enorgullecen de que usted acceda a sus datos y, de hecho, lo fomentan. Los sitios web como TMDb y LastFM le permiten crear aplicaciones completamente independientes basadas en los datos que han pasado años acumulando. Esta apertura y receptividad están fomentando una red entrelazada de usuarios y sus correspondientes acciones.

    Este artículo está dirigido a personas competentes en HTML y CSS y que tengan conocimientos básicos de las técnicas de jQuery. No profundizaremos en las técnicas avanzadas de JavaScript, sino que ayudaremos al principiante que quiera crear herramientas web más complejas.

    API en pocas palabras

    En términos básicos, una API le permite acceder a los datos de un sitio web sin acercarse a sus bases de datos. Nos brinda una forma fácil de usar para leer y escribir datos hacia y desde las bases de datos de un sitio web.

    Claro, genial, pero ¿qué código necesito?

    Como muchos desarrolladores, salto alegremente entre el desarrollo back-end y front-end, y soy tan feliz trabajando en PHP como en jQuery. Depende simplemente del sombrero que lleve ese día.

    Debido a que este artículo trata principalmente sobre clientes API JSON basados ​​en jQuery, nos centraremos en el código del lado del cliente (es decir, jQuery).

    Cuando se trata de API y se cuenta con jQuery, es más probable que uno se encuentre con JSON.

    Jugador 1: JSON

    JSON (o notación de objetos JavaScript) es una forma ligera, fácil y popular de intercambiar datos. jQuery no es la única herramienta para manipular e interactuar con JSON; es simplemente mi método preferido y el de muchos otros.

    Muchos de los servicios que utilizamos a diario tienen API basadas en JSON: Twitter, Facebook y Flickr envían datos en formato JSON.

     

    Una respuesta JSON de una API tiene este aspecto:

    ([{"score":null,"popularity":3,"translated":true,"adult":false,"language":"en","original_name":"The Goonies","name":"The Goonies","alternative_name":"I Goonies","movie_type":"movie","id":9340,"imdb_id":"tt0089218","url":"https://www.themoviedb.org/movie/9340","votes":16,"rating":9.2,"certification":"PG","overview":"A young teenager named Mikey Walsh finds an old treasure map in his father's attic.Hoping to save their homes from demolition, Mikey and his friends Data Wang, Chunk Cohen, and Mouth Devereaux runs off on a big questto find the secret stash of the pirate One-Eyed Willie.","released":"1985-06-07","posters":[{"image":{"type":"poster","size":"original","height":1500,"width":1000,"url":"https://cf1.imgobject.com/posters/76b/4d406d767b9aa15bb500276b/the-goonies-original.jpg","id":"4d406d767b9aa15bb500276b"}}],"backdrops":[{"image":{"type":"backdrop","size":"original","height":1080,"width":1920,"url":"https://cf1.imgobject.com/backdrops/242/4d690e167b9aa13631001242/the-goonies-original.jpg","id":"4d690e167b9aa13631001242"}}],"version":3174,"last_modified_at":"2011-09-12 13:19:05"}])

    Un poco desordenado, ¿verdad? Compare esto con el mismo JSON visto en la consola de desarrollador de Google Chrome:

    ( Vista previa grande )

    Se puede acceder a la respuesta JSON a través de una función jQuery, lo que nos permite manipularla, mostrarla y, lo que es más importante, diseñarla como queramos.

    Jugador 2: jQuery

    Personalmente, elegiría jQuery en lugar de JavaScript cualquier día de la semana. jQuery hace las cosas mucho más fáciles para el desarrollador web principiante que sólo quiere que las cosas funcionen desde el principio. Lo uso todos los dias. Si tuviera que completar las mismas tareas usando Javascript nativo, mi productividad disminuiría. En mi opinión, JavaScript es para personas que desean una comprensión más profunda del lenguaje de programación y del propio DOM. Pero por simplicidad y facilidad de uso, jQuery es donde está.

    En esencia, jQuery es una biblioteca de JavaScript, con funciones útiles como getJSON. Esta función particular será el pegamento que mantendrá unido a nuestro cliente API.

    El objetivo: un cliente API JSON basado en jQuery

    Recientemente envié a An Event Apart la aplicación web que estamos a punto de analizar ahora. Se llama Primera Fila.

    La idea de la aplicación web es tomar el título de una película ingresado por el usuario, ejecutarlo a través de la API de TMDb y devolver el póster correspondiente. Luego, el usuario podría compartirlo o guardarlo en su computadora.

    La aplicación web está dividida en HTML, CSS y jQuery. Nos centraremos en jQuery, porque ahí es donde ocurre la magia.

    El HTML

    A continuación se muestra la estructura básica de la aplicación web. Nada especial aquí.

    !DOCTYPE htmlhtmlhead meta name="author" content="Ben Howdle and Dan Matthew" meta name="description" content="A responsive movie poster grabber" titleFront Row by Ben Howdle/title meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"/script !--jQuery, linked from a CDN-- script src="scripts.js"/script script type="text/javascript" src="https://use.typekit.com/oya4cmx.js"/script script type="text/javascript"try{Typekit.load();}catch(e){}/script link rel="stylesheet" href="style.css" //headbodydiv header h1Front Row/h1 /header section input type="text" placeholder="Enter a movie title" / buttonFind me a poster/button /section section /section footer pCreated by a href="https://twostepmedia.co.uk"Ben Howdle/a/p /footer/div/body/html

    Todo lo que tenemos es un poco de autocomplacencia de Twitter, un campo de entrada y un botón de envío. ¡Hecho!

     

    El CSS está un poco fuera de tema para este artículo, así que te dejaré inspeccionar los elementos de interés en el sitio web en vivo.

    El jQuery

    $(document).ready(function(){ //This is to remove the validation message if no poster image is present $('#term').focus(function(){ var full = $("#poster").has("img").length ? true : false; if(full == false){ $('#poster').empty(); } });

    Me gusta que los mensajes de validación desaparezcan cuando el usuario comienza a volver a escribir en un campo de entrada. El siguiente script comprueba si hay una imagen presente (es decir, un póster de película) y, en caso contrario, vacía el contenedor del mensaje de validación una vez que el campo de entrada se enfoca.

    //function definition var getPoster = function(){ //Grab the movie title and store it in a variable var film = $('#term').val(); //Check if the user has entered anything if(film == ’){ //If the input field was empty, display a message $('#poster').html("h2 class='loading'Ha! We haven't forgotten to validate the form! Please enter something./h2");

    La razón por la que almacenamos el código principal que recupera los datos en una función quedará clara más adelante (principalmente, es para programación DRY ). Partyflauta: Partituras para flauta dulce

    Luego almacenamos el valor de la entrada en una variable, de modo que cuando lo usemos nuevamente en el código, jQuery no tenga que volver a escanear el DOM.

    La validación básica se realiza en la entrada, verificando que realmente se haya ingresado algo en el campo.

    En un intento de humor por mi parte, muestro un mensaje advirtiendo al usuario que no ha ingresado nada y pidiéndole que por favor lo haga.

    } else { //They must have entered a value, carry on with API call, first display a loading message to notify the user of activity $('#poster').html("h2 class='loading'Your poster is on its way!/h2");

    Si la entrada contiene un valor, procesamos la solicitud del usuario. Se muestra otro mensaje, informándole al usuario que algo está sucediendo.

    $.getJSON("https://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/" + film + "?callback=?", function(json) { //TMDb is nice enough to return a message if nothing was found, so we can base our if statement on this information if (json != "Nothing found."){ //Display the poster and a message announcing the result $('#poster').html('h2Well, gee whiz! We found you a poster, skip!/h2img src=' + json[0].posters[0].image.url + ' /');

    Aquí llegamos al meollo de nuestro cliente API. Usamos getJSONla función jQuery, que, por definición, carga "datos codificados en JSON desde el servidor mediante una GETsolicitud HTTP".

     

    Luego usamos la URL de la API, proporcionada en este caso por TMDb . Como ocurre con muchas otras API, debe registrar su aplicación para recibir una clave (un proceso de 30 segundos). Insertamos la clave API ( 23afca60ebf72f8d88cdcae2c4f31866) en la URL y pasamos el título de la película del usuario a la URL como parámetro de búsqueda.

    Una cosa a mencionar es que agregar callback=?al final de la URL nos permite realizar llamadas JSON y AJAX entre dominios. ¡No olvides esto, de lo contrario los datos se limitarán a tu propio dominio! Este método utiliza lo que se llama JSONP (o JSON con relleno), que básicamente permite que un script obtenga datos de otro servidor en un dominio diferente. Para hacer esto, debemos especificar la devolución de llamada anterior cuando jQuery carga los datos. Reemplaza el ?con el nombre de nuestra función personalizada, lo que nos permite realizar llamadas entre dominios con facilidad.

    En la devolución de llamada de la función, hemos puesto la palabra json(que contiene nuestros datos recuperados), pero podríamos haber puesto datao message.

    La siguiente verificación es para ver si se devolvió algún dato. TMDb tiene la amabilidad de proporcionarnos un mensaje de "No se encontró nada" cuando no puede encontrar nada. Entonces, hemos basado nuestra ifdeclaración en el valor de esta cadena.

    Esta verificación es específica de API. Por lo general, si no se encuentran resultados, expandiríamos el objeto para encontrar una propiedad denominada length, que nos indicaría cuántos resultados se devolvieron. Si esto sucede, el código podría verse así:

    if (json.length != 0){

    Como nota al margen, antes de escribir incluso una línea de código en la función de devolución de llamada de la llamada JSON, debemos familiarizarnos con los resultados devueltos en la consola de Chrome o en Firebug. Esto nos diría exactamente qué verificar en iflas declaraciones y, lo que es más importante, qué camino tomar para obtener los datos que queremos.

    Agreguemos console.log(json);, así:

    $.getJSON("https://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/" + film + "?callback=?", function(json) { console.log(json);

    Esto generará algo como lo siguiente en la consola de su navegador favorito:

    ( Vista previa grande )

    La última línea de este código genera nuestro póster. Mostramos otro mensaje al usuario diciendo que hemos encontrado un resultado y luego procedemos a mostrar la imagen.

    Dediquemos un momento a descubrir cómo llegamos a las imágenes del cartel usando la línea json[0].posters[0].image.url.

    La razón que usamos json[0]es que, dado que queremos mostrar solo un póster y sabiendo qué tan relevantes son los resultados de TMDb, podemos apostar por el primer resultado. Luego accedemos a la postersmatriz así: json[0].posters[0]. Chrome incluso nos dice que posterses una matriz, para que sepamos a qué nos enfrentamos. Nuevamente accedemos al primer valor del array, teniendo fe en que será el más relevante. Luego nos dice que imagees un objeto, por lo que podemos acceder a él así: json[0].posters[0].image. Al expandir aún más nuestro objeto, vemos que imagecontiene una propiedad llamada url. ¡Bote! Este contiene un enlace de imagen directo, que podemos usar en el srcatributo de nuestro elemento de imagen.

     

    } else { //If nothing is found, I attempt humor by displaying a Goonies poster and confirming that their search returned no results. $.getJSON("https://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/goonies?callback=?", function(json) { $('#poster').html('h2We're afraid nothing was found for that search. Perhaps you were looking for The Goonies?/h2img src=' + json[0].posters[0].image.url + ' /'); });}

    Habiendo determinado que la API no tiene resultados para el usuario, podríamos mostrar un mensaje de error. Pero como se trata de una aplicación web relacionada con películas, le daremos al usuario un póster preestablecido de Los Goonies y le haremos saber que no pudimos encontrar nada. Usaremos exactamente el mismo srcatributo para la imagen que usamos antes, esta vez gooniescodificado en la URL de la llamada API.

    }); } return false; } //Because we've wrapped the JSON code in a function, we can call it on mouse click or on a hit of the Return button while in the input field $('#search').click(getPoster); $('#term').keyup(function(event){ if(event.keyCode == 13){ getPoster(); } });});

    Ahora está claro por qué envolvimos nuestra llamada JSON en una función: hacerlo nos permite ejecutar la función cuando el usuario presiona el botón de envío o presiona Enter mientras está en el campo de entrada.

    El código completo

    El HTML

    !DOCTYPE htmlhtmlhead meta name="author" content="Ben Howdle and Dan Matthew" meta name="description" content="A responsive movie poster grabber" titleFront Row by Ben Howdle/title meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"/script !--jQuery, linked from a CDN-- script src="scripts.js"/script script type="text/javascript" src="https://use.typekit.com/oya4cmx.js"/script script type="text/javascript"try{Typekit.load();}catch(e){}/script link rel="stylesheet" href="style.css" //headbodydiv header h1Front Row/h1 /header section input type="text" placeholder="Enter a movie title" / buttonFind me a poster/button /section section /section footer pCreated by a href="https://twostepmedia.co.uk"Ben Howdle/a/p /footer/div/body/html

    El jQuery

    $(document).ready(function(){ $('#term').focus(function(){ var full = $("#poster").has("img").length ? true : false; if(full == false){ $('#poster').empty(); } }); var getPoster = function(){ var film = $('#term').val(); if(film == ’){ $('#poster').html("h2 class='loading'Ha! We haven't forgotten to validate the form! Please enter something./h2"); } else { $('#poster').html("h2 class='loading'Your poster is on its way!/h2"); $.getJSON("https://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/" + film + "?callback=?", function(json) { if (json != "Nothing found."){ $('#poster').html('h2Well, gee whiz! We found you a poster, skip!/h2img src=' + json[0].posters[0].image.url + ' /'); } else { $.getJSON("https://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/goonies?callback=?", function(json) { console.log(json); $('#poster').html('h2We're afraid nothing was found for that search. Perhaps you were looking for The Goonies?/h2img src=' + json[0].posters[0].image.url + ' /'); }); } }); } return false; } $('#search').click(getPoster); $('#term').keyup(function(event){ if(event.keyCode == 13){ getPoster(); } });});

    Conclusión

    Eso es todo: un método útil para leer datos de una API remota con jQuery y manipular la salida JSON para adaptarla a nuestras necesidades.

     

    Cada API es diferente y cada una devuelve resultados diferentes en una estructura diferente: ¡todo es parte de la diversión! Por lo tanto, acostúmbrese a usar console.log()y familiarícese con los resultados establecidos antes de intentar acceder a ellos con código o usarlos en su aplicación.

    Comience con algo práctico y entretenido: cree un verificador de registro con la API de Gowalla; visualizar tendencias con la API de Twitter; o cree una aplicación de reconocimiento facial con la API de Face.com.

    Las API son divertidas. Por definición, los datos que aportan a la página son dinámicos, no estáticos.

    Si tiene algún problema con la API que hemos utilizado aquí o tiene historias de éxito con otras API, deje un comentario.

    Recursos adicionales

    • " Cómo utilizar las API JSON con jQuery ", Joel Sutherland, HiFi
    • "Cómo utilizar jQuery con un feed JSON de Flickr para mostrar fotografías", Richard Shepherd
    • “ Búsqueda instantánea de Bing con jQuery y Ajax ”, Srinivas Tamada, 9Lessons

    Lecturas adicionales sobre SmashingMag:

    • Una guía para principiantes sobre aplicaciones web progresivas
    • Almacenamiento local y cómo utilizarlo en sitios web
    • Comprensión de REST y RPC para las API HTTP
    • Representación del lado del servidor con React, Node y Express

    (un poco)Explora más en

    • Codificación
    • AJAX
    • javascript
    • jQuery
    • API





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Una guía para principiantes sobre clientes API JSON basados ​​en jQuery

    Una guía para principiantes sobre clientes API JSON basados ​​en jQuery

    Las API son el futuro pero, más importante aún, el presenteClaro, genial, pero ¿qué código necesito?El objetivo: un cliente API JSON basado en jQueryEl c�

    programar

    es

    https://pseint.es/static/images/programar-una-guia-para-principiantes-sobre-clientes-api-json-basados-en-jquery-791-0.jpg

    2024-05-20

     

    Una guía para principiantes sobre clientes API JSON basados ​​en jQuery
    Una guía para principiantes sobre clientes API JSON basados ​​en jQuery

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Update cookies preferences