Front-End
JS
Clase 15 - “API y procesamiento de datos”
¡Les damos la
bienvenida!
Vamos a comenzar a grabar la
clase
Clase Clase Clase
14.
JS 6 - Asincronía 15.
API y Procesamiento de 16.
Revisión final y
Datos despedida
1. Asincronía 1. Asincronía Desarrollo de un 1. Presentación y revisión de los
2. Consumo de API REST a proyecto integrador que proyectos finales
través de fetch combine HTML, CSS, y 2. Feedback personalizado a cada
3. Procesamiento de los datos JavaScript proyecto
4. Incluir los datos consumidos 2. Consumo de API REST 3. Comparación con proyectos
y procesados por medio de 3. Incorporación y procesamiento profesionales
fetch en nuestro proyecto de los datos en nuestro HTML 4. Despedida y recomendaciones
4. Incorporación de buenas para el futuro
prácticas de accesibilidad y SEO
5. Presentación del proyecto final
¿Qué es una API REST?
Comunicación entre aplicaciones
○ Definición de API: una API es una interfaz que permite la comunicación
entre diferentes aplicaciones.
○ API REST: es un tipo de API que usa HTTP para acceder y manipular datos
en un servidor.
○ Aplicación en E-commerce: en un sitio de E-commerce, una API REST
permite acceder a catálogos de productos, realizar operaciones de carrito de
compras y más.
Ejemplos de Uso en Empresas de Tecnología
● Redes Sociales: Facebook, Twitter e Instagram ofrecen APIs que permiten acceder a perfiles,
publicaciones y seguidores.
● E-commerce: Plataformas como Amazon y eBay usan APIs para facilitar la integración de productos,
precios y disponibilidad en tiendas online externas.
● Mapas y Geolocalización: Google Maps y OpenStreetMap tienen APIs que permiten a las
aplicaciones obtener información geográfica, rutas y mapas en tiempo real.
● Pago y Autenticación: PayPal, Stripe, y MercadoPago ofrecen APIs para gestionar pagos seguros y
verificar identidades.
● Noticias y Entretenimiento: APIs como las de Spotify y YouTube permiten que las aplicaciones
integren contenido musical o audiovisual.
Json vs Xml
La Evolución de APIs
En los inicios del desarrollo web, XML era el formato
estándar para compartir datos en APIs. Sin embargo,
JSON se volvió preferido por su simplicidad, menor
tamaño y compatibilidad directa con JavaScript,
facilitando la velocidad y eficiencia en aplicaciones
modernas. Hoy, JSON es el formato más usado en
APIs REST.
Consumo de API en JavaScript
Función fetch()
● Uso de fetch(): Realiza solicitudes HTTP de
manera asíncrona.
● fetch('https://fakestoreapi.com/products')
● .then(response => response.json()) // Convertir respuesta a JSON
● .then(data => { console.log(data); }) // Manipular los datos
● .catch(error => { console.error('Error:', error); }); // Manejo de errores
Procesamiento de Datos en HTML
Renderizado dinámico de productos
● Renderizado en HTML: usar JavaScript para insertar datos dinámicamente en
HTML.
● Ejemplo para mostrar productos:
fetch('https://fakestoreapi.com/products')
.then((response) => response.json())
.then((data) => {
const productosContainer = document.getElementById("productos-container");
data.forEach((producto) => {
productosContainer.innerHTML += `
<div class="card">
<img src="${producto.image}" alt="${producto.title}">
<h3>${producto.title}</h3>
<p>Precio: $${producto.price}</p>
<button onclick="addToCart(${producto.id})">Añadir al carrito</button>
</div>
`;
});
})
.catch((error) => console.error("Error al obtener productos:", error));
Buenas Prácticas de Accesibilidad y SEO
Mejorando la experiencia y visibilidad del sitio
● Accesibilidad:
○ Añadir etiquetas alt a las imágenes.
○ Navegación accesible con teclado.
○ Uso de etiquetas semánticas (<header>, <main>, <footer>) para organizar
el contenido.
● SEO:
○ Uso de metaetiquetas (<meta name="description" content="...">).
○ Encabezados (<h1>, <h2>) para resaltar la jerarquía del contenido.
Manejo de errores
Cuando una solicitud a la API falla, es esencial manejar el error para que el usuario reciba un mensaje
claro.
● Errores Comunes:
○ Errores 400: Problemas con la solicitud, como parámetros incorrectos o falta de permisos.
Ejemplo: 404 (No Encontrado), 401 (No Autorizado).
○ Errores 500: Problemas en el servidor. Estos errores son más difíciles de predecir, ya que
ocurren en el lado del servidor.
Manejo de errores - 400
Manejo de errores - 500
Guia para el proyecto final
Estructura y Requisitos del Proyecto
● HTML: Uso de etiquetas semánticas para organizar la página.
● CSS: Implementación de un diseño responsivo y atractivo usando Bootstrap y Flexbox.
● JavaScript: Integración de una API REST para obtener datos y renderizar productos en el DOM,
además de la funcionalidad de un carrito de compras usando localStorage.
● Accesibilidad y SEO: Implementar prácticas que mejoren la experiencia del usuario y optimicen la
página para los motores de búsqueda.
Guia para el proyecto final
Puntos Clave para Revisión y Entrega
● Subida del Proyecto: Debe estar disponible en GitHub Pages o Netlify para facilitar su acceso.
● Control de versiones: Mantener un historial de commits detallado para documentar cada avance.
● Presentación: El archivo README.md debe incluir una descripción del proyecto, las tecnologías
usadas, instrucciones de instalación y cualquier detalle relevante.
¡Vamos a la
práctica! 🚀
Ejercicios Prácticos
Optativos | No entregables
Revisión Final y Documentación en GitHub
Realiza una revisión completa de tu proyecto para asegurarte de que cumple con todos los
requisitos. Documenta los pasos importantes, decisiones de diseño, y cualquier
información relevante en el archivo README.md
Pasos:
● Verifica que cada parte del proyecto funcione correctamente (carrito, consumo de API, formulario
de contacto).
● Revisa el diseño responsivo y la accesibilidad, asegurándote de que el sitio sea navegable en
diferentes dispositivos.
● Actualiza el README.md:
○ Incluye una descripción detallada del proyecto, sus objetivos y funcionalidades.
○ Añade instrucciones claras sobre cómo clonar el repositorio y ejecutar el proyecto.
○ Explica cualquier tecnología o recurso externo utilizado (como la API o Bootstrap).
○ Adjunta una captura de pantalla de la interfaz y el enlace del despliegue en GitHub Pages.
● Tip: Un README.md bien documentado puede ser muy útil para otros usuarios y desarrolladores
que exploren tu proyecto.
Ejercicios Prácticos
Optativos | No entregables
Preparación de la Presentación del Proyecto
Prepara una breve presentación de tu proyecto para la clase siguiente. La presentación
debe incluir una introducción al proyecto, una demostración en vivo, y una explicación de
los principales desafíos y aprendizajes.
Pasos:
● Introducción (1-2 minutos): Explica el objetivo de tu proyecto de E-commerce y describe
brevemente sus funcionalidades principales.
● Demostración en Vivo (2-3 minutos): Muestra el sitio en funcionamiento, destacando la
visualización de productos, el carrito de compras, y el formulario de contacto.
● Desafíos y Aprendizajes (1-2 minutos): Menciona los principales retos que enfrentaste
durante el desarrollo (por ejemplo, el uso de fetch() o el almacenamiento en localStorage), y lo
que aprendiste de la experiencia.
● Tip: Practica la presentación para ajustarte al tiempo y asegúrate de que el proyecto esté
accesible y funcional durante la demostración.
Proyecto Final Integrador
Clase 15 - “API y procesamiento de datos”
Entrega de Proyecto
Obligatorio |
Entregable
Formato de entrega: Compartir un link al drive (público) que contenga los archivos y
carpetas que conforman tu proyecto o compartí el link de tu repositorio de Github. Los links
deberán ser entregados en el apartado de “Pre-Entrega de Proyecto” en el Campus Virtual.
Requisitos para la entrega:
1. Estructura Básica de HTML. 2. Formulario de Contacto.
● Estructura semántica: El HTML ● Formulario funcional: Crear
debe estar dividido en las etiquetas un formulario de contacto con
semánticas principales: header, campos para nombre, correo
nav, main, section, footer.
electrónico y mensaje,
● README.md: Incluir un archivo que
utilizando Formspree para
explique brevemente el propósito de
manejar el envío de datos.
la página.
Entrega de Proyecto
Requisitos para la entrega
3. Estilos básicos aplicados con CSS 4. Diseño responsivo con Flexbox y Grid
● Archivo styles.css: El proyecto debe ● Sección "Productos": Organizada en cards
contar con un archivo CSS externo que de forma responsiva utilizando Flexbox.
incluya: ● Sección "Reseñas": Organizada utilizando
○ Estilos básicos aplicados a las Grid, con una distribución lógica y estética.
secciones de header, footer y ● Sección "Contacto": Debe ser responsiva
lista de navegación. mediante el uso de Media Queries para
○ Fuentes de Google Fonts adaptarse a diferentes tamaños de pantalla.
correctamente implementadas.
○ Propiedades de background
aplicadas en alguna sección de la
página (color, imagen, degradado,
etc.).
Entrega de
Proyecto
Requisitos para la entrega:
5. Contenido Multimedia y Navegación 6. Subida del Proyecto.
● Multimedia: deberá incluir archivos ● El proyecto debe estar subido a un
multimedia (imágenes, video o iframe) hosting gratuito (Netlify o GitHub
correctamente integrado en la página. Pages), con una URL funcional para
● Lista de navegación: Implementar visualizar el sitio.
una lista desordenada con enlaces
que simulen una navegación interna
(Inicio, Productos, Contacto, etc.).
Entrega de
Proyecto
Requisitos para la entrega:
7. JavaScript
● Script.js: deberá incluir un archivo ● Fetch Api
Debes crear un archivo script.js para manejar
toda la interactividad de la página. Consume datos desde una API REST
usando fetch.
Asegúrate de enlazarlo correctamente en tu archivo
HTML. Muestra los productos obtenidos de la API
● DOM: Implementa funciones para validar en la página en forma de tarjetas (cards).
formularios (ej., campos requeridos y ● Visualización de Productos:
formato de correo).
Cada producto debe tener su imagen, título y precio,
Usa JavaScript para manipular elementos del DOM, por mostrando una lista atractiva para el usuario.
ejemplo, actualizar el carrito y mostrar mensajes al
usuario
Entrega de
Proyecto
Requisitos para la entrega:
8. Carrito de compras dinámico 9. Edición y visualización del carrito
● Agregar Productos al Carrito: Implementa un carrito ● Visualización de Productos en el Carrito: Muestra
de compras donde los usuarios puedan añadir una lista de productos añadidos al carrito, incluyendo
productos desde las tarjetas. cantidad, precio y total.
● Uso de localStorage o sessionStorage: Guarda el ● Edición de Cantidades y Eliminación de Productos:
estado del carrito en localStorage o sessionStorage Implementa funciones para que el usuario pueda editar
para que no se pierda al actualizar o cerrar la página. la cantidad de cada producto o eliminarlo del carrito.
● Contador Dinámico: Muestra el número total de ● Total Dinámico:Actualiza el total de la compra cada
productos en el carrito y asegúrate de actualizarlo en vez que se modifiquen los productos en el carrito.
tiempo real.
Entrega de
Proyecto
Requisitos para la entrega:
10. SEO & Accesibilidad 11. Git & Github
Buenas Prácticas de Accesibilidad: Historial de Cambios en GitHub:
● Usa alt en las imágenes para mejorar la accesibilidad. ● Realiza commits regulares que documenten el
● Asegúrate de que se pueda navegar fácilmente con el progreso del proyecto.
teclado. ● Crea un repositorio en GitHub y sube el proyecto.
SEO Básico: README.md:
● Usa metaetiquetas en el head del HTML para optimizar ● Documenta el propósito del proyecto, instrucciones de
el SEO. configuración, y cómo utilizarlo.
● Organiza los encabezados lógicamente usando <h1>, ● Incluye una breve guía de usuario y cualquier
<h2>, etc. dependencia necesaria.
Entrega de
Proyecto
Requisitos para la entrega:
12. Funcionalidad esperada del
proyecto
Diseño Responsivo:
Interactividad Completa:
● Asegúrate de que el diseño sea
● La página debe permitir al usuario ver adaptable a diferentes tamaños de
productos, añadirlos al carrito, editar el carrito, y pantalla.
simular la compra.
Persistencia del Carrito:
Formulario de Contacto:
● El carrito debe mantenerse activo
● Implementa un formulario funcional que envíe incluso si el usuario cierra o actualiza
datos a través de Formspree. la página, usando localStorage o
sessionStorage.
