Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Web Apps

Planificación de una aplicación web básica basada en una API

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Building a Mini, API-Driven Web App.
Designing an API-Driven Web App in Sketch

Spanish (Español) translation by Steven (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

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:

tweetbot large and small iconstweetbot large and small iconstweetbot large and small icons

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:

  1. 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
  2. Verifica que el enlace sea válido y solicita a la API se base en iTunes
  3. Analiza la respuesta de la API, asegúrate de que sea válida y recopila la información relevante
  4. 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.

Wireframe showing app headerWireframe showing app headerWireframe showing app header

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.

Wireframe showing header and input fieldWireframe showing header and input fieldWireframe showing header and input field

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.

Wireframe showing header, input, and output sectionsWireframe showing header, input, and output sectionsWireframe showing header, input, and output sections

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í ".

Zero state wireframeZero state wireframeZero state wireframe

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).

Error state wireframeError state wireframeError state wireframe

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).

Loading state wireframeLoading state wireframeLoading state wireframe

¡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.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.