Share
Lo que vas a crearLa interfaz con una API es una parte importante 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 marcas e imágenes estáticas, puede enviar y extraer datos de forma dinámica desde un servidor y procesarlos en el navegador según la experiencia que desee proporcionar al usuario..
En este tutorial, construiremos 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 icono de resolución completa directamente en el navegador. Es posible que esta aplicación específica no sea inmediatamente útil para usted, pero lo que aprende en el camino se puede aplicar a todo tipo de escenarios.
La mayoría de las aplicaciones de iOS y OSX diseñadas correctamente proporcionan activos de alta resolución para sus ilustraciones de iconos. Claro, esos íconos solo parecen tener un tamaño de 150 × 150 píxeles en el trampolín de su iPhone o en su base OSX, pero para tener en cuenta las pantallas de retina y los diferentes requisitos de tamaño del sistema operativo, Apple solicita a los creadores de aplicaciones que proporcionen un ícono de alta resolución activos, tan grande como 1024 × 1024 píxeles! Por ejemplo, a la izquierda verá el ícono de Tweetbot para Mac tal como aparecería aproximadamente en su base de OSX. Mientras que a la derecha está la imagen de resolución completa:
Apple hace que estos activos sean accesibles a través de la API de iTunes. Por lo tanto, si alguna vez desea obtener una obra de arte de alta resolución y tamaño completo, ¡puede hacerlo! Todo lo que necesita es el identificador de la aplicación, luego, al realizar una solicitud a la API, se le proporcionará un montón de información sobre la aplicación, incluido un enlace a la ilustración de mayor resolución que la tienda tiene disponible..
Este tutorial no se trata tanto de aprender la API de iTunes como de aprender algunos de los conceptos básicos de la creación de una aplicación web dinámica que muestre el contenido devuelto por una API. Una vez que aprenda los conceptos básicos de la interfaz con una API, puede crear sus propios sitios web personalizados utilizando API de terceros, como Dribbble o Twitter..
A modo de resumen rápido, aquí están los conceptos que cubriremos en este tutorial para lograr el producto final:
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.
Para iniciar el cableado de los componentes de la aplicación, necesitamos una lista de la experiencia y la funcionalidad básica de la aplicación:
Ahora que tenemos una comprensión básica de lo que queremos que la aplicación logre, podemos comenzar a armar un esquema de sus diferentes partes. Tenga en cuenta que vamos a querer que esta sea una aplicación web receptiva, por lo que nos aseguraremos de diseñar nuestras piezas de una manera que les permita aumentar su tamaño de forma responsiva.
Encabezamiento: En la parte superior de la página, tendremos un texto estilizado que 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 ha ocurrido para nuestra aplicación.
Entrada: Necesitamos proporcionar una forma para que el usuario ingrese un enlace a la aplicación cuyo ícono de ilustración desea. Para esto, agregaremos un campo de entrada simple y enviaremos el botón justo debajo del encabezado.
Salida: Una vez que se recupera 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 ese derecho 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 viene de la API de iTunes..
Hay otro factor importante que debemos considerar en nuestra etapa de alámbrico: los diferentes estados de nuestras partes componentes. Nuestra pequeña aplicación estará en diferentes estados en diferentes momentos. Por ejemplo, sabemos que tenemos que mostrar la ilustración del icono que devuelve la API de iTunes, 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 malo? Debemos tener en cuenta los diferentes estados en los que se encuentra 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 debemos cubrir:
Estado cero: ¿Qué sucede cuando el usuario llega por primera vez a nuestra página web? No hay ilustraciones de iconos para mostrar porque aún no han ingresado una URL. Así que necesitaremos algún tipo de "estado cero" que diga "hey, todavía no has ingresado a un enlace. Adelante, ingrese uno y luego mostraremos el ícono aquí ".
Los errores: Es muy posible que ocurran algunos errores durante la ejecución de nuestra aplicación. Por ejemplo, el usuario puede ingresar una URL inválida. O bien, la API de iTunes puede devolver datos erróneos, o ningún dato. Debemos tener en cuenta estos casos en el diseño de nuestra aplicación para que el usuario no se quede preguntando qué salió mal. Así que diseñaremos una manera de mostrar un mensaje de error (cuyo texto cambiará, dependiendo del error).
Cargando: Porque estamos trabajando con una API, no todo sucederá instantáneamente. La computadora del usuario debe realizar una solicitud a un servidor de terceros, que debe calcular la solicitud y devolver la información. Esto podría tardar unos segundos en ocurrir. Así que nos aseguraremos de que el diseño de nuestra aplicación proporcione una manera de comunicar que el contenido se está cargando. De esa manera, el usuario no se frustra ni confunde con una pantalla estática donde no pasa nada (aunque el contenido se está cargando en segundo plano).
¡Eso es! Hemos cubierto todos nuestros diferentes componentes y sus diversos estados. En el siguiente tutorial, pasaremos a diseñar visualmente la aplicación con wireframes más detallados..
Accentsconagua