6. Web APIs¶
Hay muchas Web APIs en los navegadores modernos que evitan la necesidad de usar librerías o APIs externas. No todas están disponibles en todos los navegadores y versiones, y algunas están en fase experimental. En este tema profundizaremos en su uso con algunos ejemplos para trabajar con:
El contenido del documento
El navegador
El almacenamiento
La posición
Esfuerzo Necesario
El curso está organizado en 8 sesiones de clase. Cada clase (sesión) implica una dedicación de entre 2 y 4 horas.
La dedicación depende del conocimiento previo, motivación y capacidad de aprendizaje del estudiante para esa sesión en concreto.
Video Clase
6.1. Manipulación de Documentos¶
Video Clase
Lo hemos visto anteriormente:
El navegador te ofrece un API para que puedas modificar el documento :
Tanto el contenido
Como el estilo
Los eventos no son imprescindibles (ayudan con la interactividad):
Una cosa es la interfaz para manipular el DOM
Y otra añadirle un control por eventos
Actividad T06-A01. Ejercicio Básico DOM
Tienes un documento web sencillo (con párrafos / enlaces / viñetas) con elementos identificados con p_1 y p_2 (párrafos), v_1 y v_2 (lista no numerada).
Realizarás la programación cliente para que cambie de forma aleatoria cada vez que se recargue la página. Los requisitos serán los siguientes:
p_1 tendrá un color de letra de entre los siguientes valores: rojo, azul, verde
La letra de la página cambiará su tamaño según diferentes porcentajes (50%, 120%, 200%)
Uno de los elementos de v_1 se ocultará (no siempre el mismo)
La primera letra de p_2 irá cambiando de color, de rojo a azul, cada vez que se recarga
El contenido de p_2 cambiará, cada vez que se recarga, de entre tres diferentes. Este contenido, en los tres casos, será html, es decir contendrá marcas (por ejemplo negritas y/o enlaces).
6.2. Eventos¶
Video Clase
Repasa lo que ya hemos visto en:
Los elementos HTML permiten añadirles un manejador de eventos (Event ). Por ejemplo:
Elemento HTML -> button
Evento click -> Element/click_event
Un uso habitual es la validación del formulario en el cliente . Se puede hacer de diferentes formas:
Usando HTML
Usando un API específico para validación de formularios
Y otro uso muy interesante son los eventos de tiempo (js_timing). Permite ejecutar tareas (funciones):
Con un retardo (setTimeout)
En intervalos (setInterval).
Actividad T06-A02a. Validación de Formularios
Al ejercicio de la clase Formularios en JS le añadirás un control de eventos con los siguientes requisitos:
El botón de enviar sólo estará activo cuando todos los campos estén validados
Añadirás un botón Rellenar para que, si el usuario quiere, rellene todos los campos con valores válidos
Añadirás un pequeño reloj con HH:MM::SS cada 10 segundos.
Actividad T06-A02b. Lista de tareas dinámica
Un ejercicio basado en este ejemplo de MDN. Pero en este caso será una lista de tareas:
Un campo en el que introduces una tarea a realizar.
Con una validación básica: Máximo 100 caractere. Sólo letras, números o símbolos básicos
Con un botón para añadir, que irá creando la lista automáticamente
Cada elemento de la lista tendrá un botón de «Terminado» que, una vez pulsado, tacha el elemento de la lista
Al llegar a 10 elementos de la lista, avisará de que ya tienes 10 elementos en la lista (estén terminados o no). Y no te deja añadir más.
6.6. Web Storage API¶
Video Clase
Existe una Web API de almacenamiento ( Web Storage API) que ofrece varias mejoras:
Sólo en el cliente (no se envía nada vía HTTP)
Tiene más capacidad (10x más)
Interfaz de uso más clara
Dos Mecanismos de almacenamiento:
Durante la Sesión: sessionStorage
Siempre: localStorage
A veces este mecanismo no es suficiente y necesitamos un almacenamiento estructurado:
Tenemos gran cantidad de datos
Necesitamos hacer consultas más complejas
Necesitamos un rendimiento alto (para gran cantidad de datos)
Para esos casos, se usa Indexed Database API :
Es una base de datos NoSQL
que guarda objetos JSON
Usando una interfaz JS
Actividad T06-A06. Usar Web Storage API
Refactoriza el ejercicio de la clase anterior, sustituyendo las cookies por el uso de Web Storage API.
6.7. Geolocalización¶
Video Clase
La Geolocation API permite
Tener una interfaz para obtener información de la posición (Geolocation )
El cálculo de la posición se estima en base a diversos dispositivos (no depende del navegador)
Permite usar la posición en aplicaciones donde es importante
Necesita permisos del usuario (y del sistema operativo). Y sólo funciona en un contexto seguro :
Off-line o localhost
HTTP con TLS (canales seguros)
Se puede evaluar con
window.isSecureContext
El interfaz tiene varios métodos que devuelven:
Un objeto con la posición GeolocationPosition (coordenadas y momento)
Una forma de monitorear la posición Geolocation/watchPosition. :
Puedes configurar qué hacer (función callback)
Y puedes desactivarlo Geolocation/clearWatch
Actividad T06-A07. Usando la API de Geolocalización
Crear una pequeña aplicación web con los siguientes requisitos:
Tiene un botón que se llama «Estimar mi posición». Al pulsarlo …
Te dice cuales son tus coordenadas y altitud
Te dice el grado de precisión de la estimación
Te muestra un enlace a un mapa (p.ej., a openstreetmap )
Además, diseñas otro botón «Sígueme» que:
Capture tu posición cada 10 segundos
Muestre las coordenadas, altitud y precisión
Muestre la fecha y hora. Puedes usar el formato estándar o darle algún formato
Y va añadiendo el histórico en una lista numerada
6.8. Almacenamiento y Geolocalización¶
Video Clase
El uso de la geolocalización se puede usar en muchos escenarios:
Mostrar la posición del usuario, en crudo o en un mapa
Mostrar lugares (puntos de interés)
Personalizar la información a ese lugar
Hacer seguimiento de un usuario (persona, vehículo, etc)
Posicionar objetos previamente geolocalizados (fotografías, vehículos, equipos) en el entorno del usuario
Lo habitual es usar diferentes APIs (muchas Web APIs) en tu aplicación web.
Actividad T06-A08. Almacenamiento y Geolocalización
Creas una aplicación web que aglutine los dos ejercicios anteriores:
Seguimiento de tu posición
Almacenamiento de tu histórico de posiciones al usar la aplicación
Cuando te vuelvas a conectar, te muestra un listado de posiciones, el número de posiciones y la duración (fecha de la última posición menos la fecha de la primera posición guardada)
Además, te permitirá borrar una posición concreta