Conectando un API-Driven Web App con Javascript

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Final product image — What You'll Be Creating

Tenemos nuestra aplicación mirando solo al camino que queremos llegar, no hace nada aún. Bueno, empecemos a trabajar agregando algo de JavaScript para hacer nuestra app mas interactiva.

Esta parte de la serie requerirá una cierta concentración, pero incluso si no es un desarrollador experimentado de Javascript, prometo que se ira habiendo aprendido algunas habilidades valiosas.

Configuración inicial

En primer lugar, crearemos nuestro archivo javascript assets/js/main.js y dentro de eso crearemos un objeto llamado Gimmie (llamado así por nuestra aplicación). Aquí es donde almacenaremos las variables y funciones que necesitamos para que no estén en el objeto de window. Lo pondremos justo al lado de la llamada "document ready" de jQuery que también usaremos.

var Gimmie = {
    $content: $('.content'),
    $form: $('form'),
};

$(document).ready(function(){
    // On page load, execute this...
});

Tenga en cuenta que hemos añadido algunas variables en nuestro objeto Gimmie: $content, $form. Estos son objetos jQuery, así que los nombramos con un $ en frente para recordarnos eso. Dado que son nodos DOM específicos que nos referiremos más de una vez, los almacenaremos en variables para un uso más rápido y futuro.

Envío de formularios

Lo primero que debemos manejar es cuando el usuario introduzca algo en nuestro formulario y lo envía. Por lo tanto, dentro de nuestro "documento listo" vamos a adjuntar un evento oyente a nuestro formulario. Podríamos hacer $('form').on() pero debido a que ya hemos almacenado el elemento de formulario en una variable, solo haremos referencia a ella en Gimmie.$form.on(). A continuación, evitaremos la acción de formulario predeterminada (por lo que la página no se actualiza):

$(document).ready(function(){
    Gimmie.$form.on('submit', function(e){
        e.preventDefault();
        // Do more stuff here...
    });
});

Cargando

Ahora, queremos mostrar un estado de "Cargando" cuando un usuario envía el formulario. De esa manera saben que algo está sucediendo. Si te acuerdas, hemos diseñado esto en Sketch:

Screenshot of the loading state in Sketch

Para lograr esto, crearemos una función dentro de nuestro objeto Gimmie llamado toggleLoading y podemos ejecutarla cuando el usuario envíe un formulario llamando a Gimmie.toggleLoading() dentro de nuestro oyente de envío de formularios. Lo llamamos toggleLoading porque vamos a cambiar el estado de carga actual en la interfaz de usuario, es decir, lo ejecutamos una vez en enviar, luego ejecutaremos un montón de código, y cuando hayamos terminado lo ejecutaremos de nuevo para quitar estado Cargando.

var Gimmie = {
    /* our other code here */

    toggleLoading: function(){
        // Toggle loading indicator
        this.$content.toggleClass('content--loading');
        
        // Toggle the submit button so we don't get double submissions
        // https://stackoverflow.com/questions/4702000/toggle-input-disabled-attribute-using-jquery
        this.$form.find('button').prop('disabled', function(i, v) { return !v; });
    },
}
$(document).ready(function(){
    Gimmie.$form.on('submit', function(e){
        e.preventDefault();
        Gimmie.toggleLoading(); // call the loading function
    });
});

Observe que estamos alternando la clase en el elemento .content llamado content--loading. Necesitamos crear algunos estilos CSS con eso. Por lo tanto, en nuestro archivo CSS, vamos a agregar:

.content--loading:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: .9;
    z-index: 10;
}

.content--loading:after {
    content: url('../img/loading.gif');
    position: absolute;
    left: 50%;
    top: 3em;
    margin-left: -16px;
    margin-top: -16px;
    z-index: 11;
}

Aquí utilizamos pseudo elementos para crear un estado cargando en nuestro área de contenido. Nuestro elemento before se utiliza para crear una superposición blanca ligeramente opaca en el área de contenido. Luego usamos el elemento after para mostrar un gif de carga animado dentro de nuestra caja. Cuando esta clase se añade a nuestra sección de contenido, aparecerá como si algo se está cargando.

En este punto, si ingresa algo en el campo de entrada y envía el formulario, se mostrará un estado de carga y se quedará atascado en eso.

Validación de formulario

Antes de enviar una solicitud a la API de iTunes, asegúrese de que los datos introducidos por el usuario sean correctos.

Entonces, ¿qué es exactamente la información correcta? Bueno, si miramos la documentación de la API de iTunes hay algunas maneras diferentes de obtener contenido. Una forma es hacer una búsqueda basada en términos clave. Pero lo que vamos a hacer en su lugar se llama una "lookup". De la documentacion:

También puede crear una solicitud lookup para buscar contenido en las tiendas basado en el ID de iTunes

A continuación, ofrece algunos ejemplos, como buscar la aplicación de software de Yelp mediante su ID de iTunes: https://itunes.apple.com/lookup?id=284910350. Tenga en cuenta que el número de ID de la aplicación es lo que se comparte entre estas URL. Eso es lo que necesitaremos del usuario.

Desde una perspectiva UX, pedir un identificador de una aplicación en la tienda de aplicaciones podría resultar un poco difícil (especialmente para los principiantes). Así que en lugar de instruir a la gente sobre cómo obtener el ID de una aplicación, pediremos el enlace de la tienda de la aplicación. ¡Todo el mundo sabe cómo copiar y pegar enlaces! Los enlaces de la aplicación están fácilmente disponibles para cualquiera, simplemente copiándolos de la página de la aplicación individual en la tienda de aplicaciones (en iTunes, en la Web o en la tienda de Mac App).

Por lo tanto, una vez que el usuario ingresa un enlace, necesitamos validarlo:

Asegúrarse de que es una url válida que comienza con http://itunes
Asegúrarse de que contiene un ID

Para ello, crearemos una función de validación dentro de nuestra variable Gimmie y la ejecutaremos en nuestro oyente de evento de envío de formularios.

var Gimmie = {
    /* our prior code here */
    userInput: '',
    userInputIsValid: false,
    appId: '',
    validate: function(input) {
        // validation happens here
    },
}

Gimmie.$form.on('submit', function(e){
    /* our previous code here */
    Gimmie.userInput = $(this).find('input').val();
    Gimmie.validate();
    if( Gimmie.userInputIsValid ) {
        /* make API request */
    } else {
        /* throw an error */
    }
});

Tenga en cuenta lo que estamos haciendo en el código anterior:

Añadimos algunas variables y una función a Gimmie
- UserInput es una cadena y se establece como la entrada del usuario
- UserInputIsValid es un booleano que será verdadero o falso dependiendo de si la entrada del usuario es válida (escribiremos esas pruebas en un momento)
- AppId es una cadena de dígitos que se extraerá de userInput si es válida
- validate es una función donde vamos a validar la entrada del usuario cuando se llama
Cuando el formulario se envíe, nosotros:
- Establecemos Gimmie.userInput en el valor del campo de entrada del formulario
- Ejecutar la función de validación en Gimmie.validate()
- Ejecute un condicional if / else. Si la entrada del usuario es válida (algo que determinará nuestro Gimmie.validate), procederemos a realizar una solicitud a la API de iTunes. Si no es válido, mostraremos un error informando al usuario que los datos que introdujeron no son correctos.

Ahora vamos a escribir el código que valida si la entrada del usuario es correcta o no. Tenga en cuenta que en nuestro HTML establecemos nuestro tipo de entrada a url <input type="url"> Esto significa que algunos navegadores realizarán de forma nativa algún tipo de validación en esa entrada, sin embargo, no será coherente ni uniforme entre los navegadores. En algunos navegadores, ni siquiera funciona. Así que si el usuario escribe "blah", el navegador lo aceptará y el formulario se enviará. En otros navegadores, al menos tendrán que escribir algo que empiece con "http://" antes de que el navegador les permita enviar el formulario. Pero lo que queremos es una URL que empiece con "http://itunes", por lo que manejaremos eso en JavaScript.

var Gimmie = {
    /* our prior code */
    validate: function() {
        // Use regex to test if input is valid. It's valid if:
        // 1. It begins with 'http://itunes'
        // 2. It has '/id' followed by digits in the string somewhere
        var regUrl = /^(http|https):\/\/itunes/;
        var regId = /\/id(\d+)/i;
        if ( regUrl.test(this.userInput) && regId.test(this.userInput) ) {
            this.userInputIsValid = true;
            var id = regId.exec(this.userInput);
            this.appId = id[1];
        } else {
            this.userInputIsValid = false;
            this.appId = '';
        }
    }
}

Aquí estamos usando expresiones regulares para probar si la entrada cumple o no nuestras condiciones. Vamos a ver esto en un poco más de detalle:

1	var regUrl = /^(http\|https):\/\/itunes/i;
2	var regId = /\/id(\d+)/i;

Estos son los dos literales de expresiones regulares que definimos (lea más sobre las expresiones regulares). He aquí un breve resumen de lo que están haciendo esas expresiones regulares:

regUrl es el literal regex para determinar si la entrada del usuario es o no una URL que comienza con "http://itunes"
- /^ Dice "comienza el regex y comienza a mirar el principio de la cadena"
- (http|https): dice "busque 'http' o 'https' seguido de un punto y coma ':'"
- \/\/ Dice "buscar '//'" (porque una barra diagonal es un carácter especial en las expresiones regulares, como la forma en que lo usamos al principio de la expresión regular, tenemos que usar la barra invertida antes de la barra inclinada para Dígale a la expresión regular que no interprete la barra diagonal como un carácter especial, sino como una simple barra diagonal)
- itunes/i dice "busque 'itunes' y finalice la regex" mientras que el i en el final indica que la coincidencia debe hacerse insensible a mayúsculas y minúsculas (ya que alguien podría pegar 'HTTP://ITUNES' que sigue siendo válido)

RegId es el literal regex para determinar si la entrada del usuario tiene o no un ID de dígitos que coinciden con el patrón de URL del enlace de tienda de iTunes. Todos los enlaces válidos de iTunes Store tendrán /id en él, seguido de una secuencia de números.
- /\/id dice "inicie la regex y busque en cualquier parte de la cadena para '/id'" (vea el ejemplo anterior para la descripción de escape de barra diagonal)
- (\d+) dice "buscar una secuencia de dígitos (0 a 9) 1 o más veces y capturarlos". Los paréntesis indican que queremos recordar cualquier coincidencia definida dentro, es decir, en nuestro caso recordamos la secuencia de dígitos que representa el ID de la aplicación. El /d es un carácter especial en regex que indica que queremos dígitos [0-9] y el + dice coincide con los [0-9] 1 o más veces.
- /i dice “termina la expresión regular” y el i indica insensible a masculas (desde una dirección URL con /ID938491 todavía es válida)

El siguiente fragmento de nuestro código se ve así:

if ( regUrl.test(this.userInput) && regId.test(this.userInput) ) {
    this.userInputIsValid = true;
    var id = regId.exec(this.userInput);
    this.appId = id[1];
} else {
    this.userInputIsValid = false;
    this.appId = '';
}

El método .test() en un literal regex busca una coincidencia de una cadena especificada y devuelve verdadero o falso, dependiendo de si se encuentra la coincidencia especificada. Por lo tanto, en nuestro caso, probamos la entrada del usuario en relación con regUrl y regID para asegurar que la entrada empiece con "http://itunes" y tiene "/id" seguido de varios dígitos.

Si ambas pruebas devuelven verdadero, ponemos el indicador userInputIsValid a verdadero y luego extraemos el ID de la URL y lo configuramos como appId. Para ello, ejecutamos el método .exec() en la entrada. Esto devolverá una array de dos elementos: uno que coincida con la regex completa y uno que coincida con la cadena de números después de /id (esto se debe a que usamos el paréntesis en la expresión regular (/d+) para decir "recordar lo que se captura aquí"). Así, como ejemplo, el método .exec() devolvería algo como ["/id12345", "12345"] y queremos sólo el segundo elemento en la matriz, por lo que se establece appId a eso.

Si ambas pruebas devuelven falso, establecemos userInputIsValid a falso y appId a una cadena vacía.

Ahora todo lo que necesitamos para determinar si la entrada del usuario es válida está en su lugar. Así que podemos continuar con el resto de nuestro script.

Generar errores

En este momento estamos en un punto en nuestro guión donde podemos determinar si la entrada del usuario es lo que necesitamos. Así que nos quedamos con esto:

if( Gimmie.userInputIsValid ) {
    /* make API request */
} else {
    /* throw an error */
}

Por ahora, vamos a manejar la parte "lanzar un error". Debido a que habrá otros puntos en la ejecución de nuestra secuencia de comandos donde pueden ocurrir errores, vamos a hacer una función de error genérico que mostrará un error al usuario, dependiendo de lo que salió mal. Si recuerda, diseñamos como sería esto en Sketch:

Observe cómo nuestro estado de error tiene esencialmente dos elementos: un "encabezado" que es texto en negrita, y un "cuerpo" que es un texto regular. Así que vamos a crear una función de error genérico que acepta estos. El "encabezado" generalmente indicará el error y el "cuerpo" describirá cómo arreglar el error. Por lo tanto, en este caso en particular, si la entrada del usuario no es válida, necesitamos informarles qué tipo de entrada es correcto. Por lo tanto, vamos a crear una función genérica que puede mostrar errores basados en el texto que pasamos:

if( Gimmie.userInputIsValid ) {
    /* make API request */
} else {
    Gimmie.throwError(
        'Invalid Link',
        'You must submit a standard iTunes store link with an ID, i.e. <br> <a href="https://itunes.apple.com/us/app/twitter/id333903271?mt=8">https://itunes.apple.com/us/app/twitter/<em>id333903271</em>?mt=8</a>'
    );
}

Aquí llamamos a la función Gimmie.throwError() y le pasamos dos parámetros: el texto "encabezado" y el texto "cuerpo". Debido a que sólo estamos visualizando HTML, podemos pasar elementos HTML dentro de los parámetros si lo deseamos. En este caso, en el "cuerpo" pasamos un ejemplo de enlace de tienda de iTunes y destacamos el id/ parte con la etiqueta de énfasis (<em>) para ayudar a indicar al usuario, "hey, necesitamos un enlace de tienda de iTunes, Y asegúrese de que tiene una identificación en él ".

Podemos configurar nuestro CSS para resaltar lo que esté envuelto en etiquetas <em>, así como dar a nuestro estado de error un color:

.content--error {
    color: #196E76;
}
.content em {
    font-style: normal;
    background-color: lightyellow;
}

Ahora, crearemos la función throwError en el objeto Gimmie:

var Gimmie = {
    /* prior code here */
    throwError: function(header, text){
        this.$content
            .html('<p><strong>' + header + '</strong> ' + text + '</p>')
            .addClass('content--error');

        this.toggleLoading();
    }
}

Tenga en cuenta que estamos capturando this.$content. Esto es lo mismo que hacer $('.content'), pero guardamos esa selección como una variable en el objeto Gimmie, ya que la usaremos más de una vez. Así que hacemos referencia a esto haciendo this.$content. Ahora fijamos el contenido HTML del elemento $content al texto que pasamos, con el texto "encabezado" en negrita. A continuación, agregamos una clase de content--error a nuestro elemento del contenido de esa manera podemos dar estilo a los errores como deseamos. Por último, ejecutamos la función toggleLoading() de Gimmie para eliminar la clase de carga y dejar de mostrar el gif de carga.

En este momento, si escribes una URL incorrecta como http://google.com o si escribes una URL de iTunes apropiada que no tenga una ID como https://itunes.apple.com/us/app /gorjeo/ debería aparecer un mensaje de error:

Para mejorar nuestra forma un poco, vamos a añadir una bonita animación "pop" que se ejecuta cuando se produce un error (en los navegadores compatibles). Para ello, añadir / eliminar una clase CSS que contiene una animación. Por lo tanto, en nuestro archivo CSS, vamos a hacer:

.content--error-pop {
    -webkit-animation: pop .333s;
    -moz-animation: pop .333s;
    -o-animation: pop .333s;
    animation: pop .333s;
}

@-webkit-keyframes pop {
    0%   {-webkit-transform: scale(1);}
    50%  {-webkit-transform: scale(1.075);}
    100% {-webkit-transform: scale(1);}
}

@-moz-keyframes pop {
    0%   {-webkit-transform: scale(1);}
    50%  {-webkit-transform: scale(1.075);}
    100% {-webkit-transform: scale(1);}
}

@-o-keyframes pop {
    0%   {-webkit-transform: scale(1);}
    50%  {-webkit-transform: scale(1.075);}
    100% {-webkit-transform: scale(1);}
}

@keyframes pop {
    0%   {-webkit-transform: scale(1);}
    50%  {-webkit-transform: scale(1.075);}
    100% {-webkit-transform: scale(1);}
}

Esto hará que el área de contenido suba y disminuya en tamaño, haciéndolo "pop" cuando ocurre un error. Ahora solo tenemos que añadir / quitar esa clase con JavaScript. Así que de nuevo en nuestra función throwError:

throwError: function(header, text){
        // Remove animation class
        this.$content.removeClass('content--error-pop');

        // Trigger reflow
        // https://css-tricks.com/restart-css-animation/
        this.$content[0].offsetWidth = this.$content[0].offsetWidth;

        // Add classes and content
        this.$content
            .html('<p><strong>' + header + '</strong> ' + text + '</p>')
            .addClass('content--error content--error-pop');

        this.toggleLoading();
    },

Aquí se elimina la clase primero, luego se dispara un "reflujo" para asegurar que la animación empiece de nuevo cuando agregamos la clase en el siguiente paso (junto con la clase regular content--error). Ahora tenemos una agradable animación pop en nuestro estado de error también:

Realizar una solicitud API

Estamos terminando. Hemos comprobado que la entrada del usuario es correcta y hemos proporcionado una forma de mostrar errores, por lo que ahora sólo necesitamos hacer nuestra solicitud API.

Lo haremos dentro de nuestra sentencia if() que valida la entrada del usuario.

if( Gimmie.userInputIsValid ) {
    $.ajax({
        url: "https://itunes.apple.com/lookup?id=" + Gimmie.appId,
        dataType: 'JSONP'
    })
    .done(function(response) {
        // when finished
    })
    .fail(function(data) {
        // when request fails
    });
} else {
    /* our other code here */
}

Como se puede ver en el código anterior, hemos configurado una solicitud AJAX a la API de iTunes. Como se puede recordar anteriormente, la API de iTunes tiene una URL de "lookup" que podemos pulsar para recuperar los datos. Sigue este formato: https://itunes.apple.com/lookup?id= seguido de la identificación de la cosa que desea encontrar. La API proporciona un ejemplo de búsqueda de una aplicación de software mediante la aplicación Yelp: https://itunes.apple.com/lookup?id=284910350. Si vas a esa URL en tu navegador, verás un desorden de JSON:

Si se ejecuta a través de un embellecedor, como el JSON lint, los resultados se formatearán y comenzarán a tener mucho más sentido:

Screenshot of iTunes API response formatted

Si observa la documentación de la API, notará que la API proporciona resultados para todo tipo de contenido en la tienda de iTunes, desde música a películas y aplicaciones. Eso es ventajoso para nosotros, ya que significa que podemos aprovechar las ilustraciones de iconos no sólo para aplicaciones de iOS, sino también para aplicaciones de Mac. Las aplicaciones de Mac utilizan el mismo tipo de estructura de URL que las aplicaciones de iOS. Por ejemplo, Final Cut Pro tiene un enlace de https://itunes.apple.com/us/app/final-cut-pro/id424389933?mt=12. Tenga en cuenta que la URL comienza con https://itunes y tiene /id424389933, ¡que es justo lo que necesitamos!

Utilizando nuestra función de error desde anterior, vamos a lanzar un error para si/cuando falla nuestra solicitud a la API:

if( Gimmie.userInputIsValid ) {
    $.ajax({
        url: "https://itunes.apple.com/lookup?id=" + Gimmie.appId,
        dataType: 'JSONP'
    })
    .done(function(response) {
        // when finished
    })
    .fail(function(data) {
        Gimmie.throwError(
            'iTunes API Error',
            'There was an error retrieving the info. Check the iTunes URL or try again later.'
        );
    });
} else {
    /* our other code here */
}

A medida que abstraemos nuestro método para mostrar errores en una sola función, mostrar otro error es fácil!

La respuesta

Ahora vamos a preocuparnos por lo que sucede cuando la solicitud se completa correctamente:

$.ajax({
    /* other code here */
})
.done(function(response) {
    // Get the first response and log it
    var response = response.results[0];
    console.log(response);
})
.fail(function(data) {
    /* other code here */
});

Tenga en cuenta que estamos recibiendo la respuesta y registrando el primer resultado en la consola. Si observa una solicitud API de ejemplo, verá que en el nivel más arriba del objeto JSON, obtiene resultCount que le indica cuántos resultados hay (en una búsqueda sólo debe haber uno) y luego results que es un array (con un único objeto en este caso) que representa el resultado.

Por lo tanto, establecemos la respuesta al primer elemento en los resultados y luego registrarlo en la consola. Si abre nuestra pequeña aplicación en el navegador e ingresa una URL (por ejemplo, la URL de Yelp https://itunes.apple.com/lookup?id=284910350) Verá que la interfaz de usuario está bloqueada en el estado de carga, pero si observa las herramientas de desarrollo y accede a la consola, verá la respuesta de la API registrada. !Ahora podemos acceder a cualquiera de esas propiedades en JavaScript!

Como puede ver, la API devuelve un montón de información sobre la aplicación: su nombre, desarrollador, descripción, género, precio, ¡y mucho más! Realmente solo necesitamos algunas de esas cosas, como el icono de la aplicación. Por lo tanto, vamos a comprobar para asegurarnos de que nuestra solicitud contiene las piezas de información que necesitamos.

$.ajax({
    /* other code here */
})
.done(function(response) {
    // Get the first response and log it
    var response = response.results[0];
    console.log(response);

    // Check to see if request is valid & contains the info we want
    // If it does, render it. Otherwise throw an error
    if(response && response.artworkUrl512 != null){
        Gimmie.render(response);
    } else {
        Gimmie.throwError(
            'Invalid Response',
            'The request you made appears to not have an associated icon. <br> Try a different URL.'
        );
    }
})
.fail(function(data) {
    /* other code here */
});

Aquí verificamos para asegurarnos de que response existe y comprobamos para asegurarnos de que response.artworkUrl512 es parte de esa respuesta. ArtworkUrl512 es la clave que la API proporciona para un enlace al icono de la aplicación de tamaño completo. Si esas cosas están presentes, vamos a mostrar el icono de la aplicación en la página. Para eso, tenemos otra función llamada render que escribiremos en un momento. Si por alguna razón el material que necesitamos falta, lanzamos otro error con nuestra agradable función que ya hemos hecho.

Mostrando los resultados de la API

Ahora que tenemos la API devolviendo los datos que queremos, vamos a mostrar los resultados en la página. Una vez que sabemos que tenemos todo lo que necesitamos de la API, llamamos Gimmie.render(response) y pasar la respuesta de la API a ella, que es sólo un objeto de pares clave / valor. Por lo tanto, de nuevo en nuestro objeto Gimmie, vamos a crear la función render:

var Gimmie = {
    /* our other code here */
    render: function(response){
        var icon = new Image();
        icon.src = response.artworkUrl512;
        icon.onload = function() {
            Gimmie.$content
                .html(this)
                .append('<p><strong>' + response.trackName + '</strong></p>')
                .removeClass('content--error');
            Gimmie.toggleLoading();
        }
    }
}

Esto es lo que estamos haciendo en este código:

Para crear una imagen desde cero, creamos una variable llamada icon y usamos el constructor Image() que básicamente crea un HTMLImageElement. Piense en ello como crear una etiqueta <img> en la memoria usando JavaScript.
A continuación, establecemos el atributo src de nuestra imagen utilizando el método icon.src disponible para usar porque usamos el constructor Image(). Establecemos el origen de la imagen en el artworkUrl512 de nuestra respuesta. Esto hará que el navegador comience a buscar la imagen en esa URL especificada.
Utilizamos icon.onload para decirle al navegador "cuando hayas terminado de buscar la imagen, haz esto ...". Esta es una forma de que el navegador busque un recurso de imagen y luego no lo coloque en el DOM hasta que se haya descargado.
Dentro de icon.onload establecemos el HTML de $contents a la imagen que acaba de descargar. Entonces podemos agregar más información a ese área de contenido si queremos. En este ejemplo, tomo el trackName de nuestra respuesta del API para mostrar el nombre de la aplicación junto con su icono.
Por último, ejecutar nuestra función toggleLoading porque hemos terminado de cargar todo!

Prueba a ejecutar esto en tu navegador ahora y ¡deberías ver aparecer un bonito icono! Por ejemplo, prueba la URL de Yelp https://itunes.apple.com/us/app/yelp/id284910350?mt=8

Pruébelo con una URL de aplicación de Mac, como Final Cut Pro https://itunes.apple.com/us/app/final-cut-pro/id424389933?mt=12

Screenshot of API success for Final Cut Pro icon

Carga de la máscara del icono

Tenga en cuenta que el icono de iOS no está redondeado. Como se señaló anteriormente, la mayoría de los iconos de iOS no están diseñados con esquinas redondeadas. Estos se aplican en el nivel OS. Para iconos de iOS, tendremos que aplicar la máscara que creamos en Sketch. Por lo tanto, si entra en Sketch y exporta la máscara que creamos como un recurso de imagen, lo cargaremos en el navegador cuando carguemos el icono:

var Gimmie = {
    render: function(response){
        var icon = new Image();
        icon.src = response.artworkUrl512;
        icon.onload = function() {
            Gimmie.$content
                .html(this)
                .append('<p><strong>' + response.trackName + '</strong> Actual icon dimensions: ' + this.naturalWidth + '×' + this.naturalHeight + '</p>')
                .removeClass('content--error');
            Gimmie.toggleLoading();

            // If it's an iOS icon, load the mask too
            if(response.kind != 'mac-software') {
                var mask = new Image();
                mask.src = 'assets/img/icon-mask.png';
                mask.onload = function() {
                    Gimmie.$content.prepend(this);
                }
            }
        }
    }
}

Esto es lo que estamos haciendo:

En nuestros resultados de la API, hay un objeto llamado "kind" que se refiere al tipo de cosa que se devuelve por la API, como películas o música o software. Las aplicaciones de Mac tendrán un "kind" de "mac-software". Debido a que las aplicaciones Mac no necesitan una máscara aplicada a su icono, comprobamos si el tipo de respuesta no es "mac-software". Si no lo es, sabemos que es una aplicación de iOS y luego podemos cargar la máscara
Utilizamos el mismo constructor Image() como antes, establecemos el src de la imagen en el lugar donde guardamos nuestra máscara y luego la agregamos a nuestro área de contenido una vez que el evento onload se active para la imagen.

Ahora solo tenemos que añadir algunos estilos para posicionar la máscara sobre el icono:

.content img[src*="icon-mask.png"] {
    position: absolute;
    left: 0;
    top: 0;
}

¡Eso es todo! Si ingresa de nuevo en la URL de Yelp, esta vez aparecerá con las esquinas redondeadas.

¡Esta Completo!

Ha sido todo un viaje, y ¡espero que hayas aprendido mucho de este tutorial! Cubrimos la creación de esquema de página y simulacros para nuestra aplicación y sus diferentes estados. También cubrimos la redacción de HTML, CSS y Javascript para una aplicación web que interactúa con una API de terceros.

Esperamos que haya entendido algunos conceptos básicos de la interfaz con una API. Has aprendido cómo extraer dinámicamente contenidos y activos de una API y convertirlos en una página web. Con ese conocimiento básico ahora puede pasar a la creación de aplicaciones web más personalizadas adaptadas a sus intereses.

Aquí hay una lista de algunas APIs: