Spanish (Español) translation by Steven (you can also view the original English article)
La interfaz con una API es una gran parte del desarrollo y diseño web en estos días. Las API ayudan a proporcionar una experiencia rica y dinámica en el navegador. En lugar de marcado e imágenes estáticas, puedes empujar y extraer datos dinámicamente de un servidor y renderizarlos en el navegador en función de la experiencia que desees proporcionar al usuario.
En este tutorial, crearemos un ejemplo básico de una aplicación basada en API. Usando la API de iTunes, tomaremos la URL de cualquier aplicación de iOS o Mac y mostraremos su ícono de resolución completa directamente en el navegador. Es posible que esta aplicación específica no sea inmediatamente útil para ti, pero lo que aprendas a lo largo del camino se puede aplicar a todo tipo de escenarios.
Visión general
La mayoría de las aplicaciones iOS y OSX correctamente diseñadas proporcionan recursos de alta resolución para sus ilustraciones de iconos. Por supuesto, esos iconos sólo pueden parecer de 150x150 píxeles de tamaño en la plataforma de tu iPhone, o tu base OSX, pero para tener en cuenta las pantallas de retina y diferentes requisitos de tamaño en todo el sistema operativo, Apple solicita que los creadores de aplicaciones proporcionan recursos de iconos de alta resolución, ¡tan grandes como 1024x1024 píxeles! Por ejemplo, a la izquierda verás el ícono Tweetbot para Mac, ya que aparecería aproximadamente en tu base OSX. Mientras que a la derecha está la imagen de resolución completa:
Apple hace que estos recursos sean accesibles a través de la API de iTunes. Entonces, si alguna vez deseas obtener la ilustración del icono en alta resolución y tamaño completo, ¡puedes hacerlo! Todo lo que necesitas es el identificador de la aplicación, luego, al hacer una solicitud a la API, se te dará una gran cantidad de información sobre la aplicación, incluido un enlace a la ilustración del icono de mayor resolución que la tienda tiene disponible.
Este tutorial no se trata de aprender la API de iTunes ni de aprender algunos de los conceptos básicos detrás de la creación de una aplicación web dinámica que muestre el contenido devuelto por una API. Por el contrario, una vez que aprendas los conceptos básicos de la interfaz con una API, puedes continuar construyendo tus propios sitios web personalizados utilizando APIs de terceros, como Dribbble o Twitter.
A modo de resumen, estos son los conceptos que cubriremos en este tutorial para lograr el producto final:
- Haremos un prototipo de la experiencia básica
- Produciremos simulaciones en Sketch
- Desarrollarremos en HTML/CSS
- Añadiremos interactividad a través de JavaScript
Wireframes
Para entender lo que vamos a construir, comencemos por detallar la experiencia básica de nuestra pequeña aplicación. Una vez que se haya completado, podemos ser un poco más específicos al enumerar sus componentes.
La experiencia básica de la aplicación
Para comenzar con el diseño del prototipo de los componentes de la aplicación, necesitamos una lista de la funcionalidad y experiencia básica de la aplicación:
- Solicita un enlace de la tienda de aplicaciones de iOS o Mac (como https://itunes.apple.com/us/app/twitter/id333903271?mt=8) del usuario
- Verifica que el enlace sea válido y solicita a la API se base en iTunes
- Analiza la respuesta de la API, asegúrate de que sea válida y recopila la información relevante
- Muestra un error o la ilustración del ícono de tamaño completo que devuelve la API
Las partes de los componentes de la aplicación
Ahora que tenemos una comprensión básica de lo que queremos que logre la aplicación, podemos comenzar a enmarcar sus diferentes partes. Ten en cuenta que queremos que sea una aplicación web adaptable, por lo que nos aseguraremos de diseñar nuestras piezas de manera que les permita aumentar y disminuir el tamaño de manera responsiva.
Encabezado: en la parte superior de la página, tendremos un texto con sus estilos, y representa el nombre de la aplicación, junto con una breve descripción de lo que hace. "Gimmie Dat iCon" es el nombre tonto que se me ocurrió para nuestra aplicación.
Entrada: Necesitamos proporcionar una manera para que el usuario ingrese un enlace a la aplicación del cual desea obtener el ícono. Para esto, agregaremos un campo de entrada simple y el botón enviar justo debajo del encabezado.
Salida: Una vez que se obtiene un enlace válido del usuario, necesitaremos un espacio para mostrar la ilustración del icono recuperada de iTunes. Así que crearemos un lugar para eso justo debajo del campo de entrada.
Eso es todo. Ahora tenemos todos los componentes básicos que necesitaremos para recuperar un enlace del usuario y mostrar la información que se obtiene de la API de iTunes.
Estados de las partes de los componentes
Hay otro factor importante que debemos tener en cuenta en nuestra etapa del diseño del prototipo: los diferentes estados de nuestros componentes. Nuestra pequeña aplicación estará en diferentes estados en determinados momentos. Por ejemplo, sabemos que debemos mostrar el diseño gráfico del ícono devuelto por la API de iTunes, eso ya lo hemos tenido en cuenta. Pero, ¿qué pasa si la API devuelve un error, entonces qué hacemos? ¿O qué pasa si el usuario ingresa un enlace incorrecto? Necesitamos tener en cuenta los diferentes estados en que puede estar nuestra aplicación, dependiendo de su estado de ejecución. Como nuestra aplicación es bastante simple, solo tenemos estos pocos casos de uso que necesitamos cubrir:
Estado cero: ¿qué sucede cuando el usuario accede por primera vez a nuestra página web? No hay ilustraciones de iconos para mostrar porque todavía no han ingresado una URL. Así que necesitaremos algún tipo de "estado cero" amigable que diga "oye, todavía no has ingresado un enlace. Continúa e ingresa uno, luego mostraremos el ícono aquí ".
Errores: Es muy posible que ocurran algunos errores durante la ejecución de nuestra aplicación. Por ejemplo, el usuario puede ingresar una URL no válida. O bien, la API de iTunes puede devolver datos incorrectos, o ningún dato en absoluto. Debemos tener en cuenta estos casos en el diseño de nuestra aplicación para que el usuario no se pregunte qué salió mal. Entonces, diseñaremos una forma de mostrar un mensaje de error (cuyo texto cambiará, dependiendo del error).
Cargando: Debido a que estamos trabajando con una API, no todo sucederá instantáneamente. La computadora del usuario debe realizar una solicitud a un servidor externo, que debe calcular la solicitud y enviar la información. Esto podría demorar unos segundos en ocurrir. Por lo tanto, nos aseguraremos de que el diseño de nuestra aplicación proporcione una forma de comunicar que el contenido se está cargando. De esa manera, el usuario no se frustra y confunde con una pantalla estática donde no sucede nada (aunque el contenido se esté cargando en segundo plano).
¡Eso es todo! Hemos cubierto todos nuestros diferentes componentes y sus diversos estados. En el siguiente tutorial, pasaremos a diseñar visualmente la aplicación con estructuras más detalladas.
