Consumo práctico de una API de Geolocalización
Aplicaciones Web Orientadas a Servicios • ITIID-05 •

Consumo práctico de una API de Geolocalización

Hasta ahora hemos comprendido qué son las APIs de geolocalización y cómo se integran en aplicaciones web orientadas a servicios.
En esta sesión pondremos en práctica estos conceptos desarrollando una aplicación web sencilla que obtenga la ubicación del usuario utilizando una API de geolocalización.

El objetivo no es solo obtener coordenadas, sino entender el flujo de comunicación entre el cliente y un servicio.

Objetivo de la práctica

Al finalizar esta clase, el estudiante será capaz de:

  • Solicitar la ubicación del usuario desde el navegador.
  • Obtener coordenadas geográficas (latitud y longitud).
  • Mostrar la información en pantalla.
  • Relacionar el uso de APIs con la arquitectura orientada a servicios.

API de Geolocalización del Navegador

La API de Geolocalización del navegador permite obtener la ubicación del usuario sin necesidad de servicios externos adicionales.

Características:

  • Requiere permiso del usuario.
  • Funciona en la mayoría de los navegadores modernos.
  • Devuelve datos en tiempo real.
  • Forma parte del entorno del cliente.

Estructura del proyecto

Crearemos un proyecto básico con:

  • HTML
  • JavaScript
  • Navegador web

No se utilizarán frameworks para comprender mejor el funcionamiento de la API.

Paso 1: Estructura HTML

Creamos un archivo index.html con la siguiente estructura:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Geolocalización</title>
</head>
<body>
  <h1>API de Geolocalización</h1>
  <button onclick="obtenerUbicacion()">Obtener ubicación</button>

  <p id="resultado"></p>

  <script src="app.js"></script>
</body>
</html>

Paso 2: Uso de la API de Geolocalización

Creamos el archivo app.js:

function obtenerUbicacion() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      mostrarPosicion,
      mostrarError
    );
  } else {
    document.getElementById("resultado").innerText =
      "La geolocalización no es compatible con este navegador.";
  }
}

Paso 3: Mostrar la posición del usuario

Agregamos la función para procesar los datos recibidos:

function mostrarPosicion(posicion) {
  const latitud = posicion.coords.latitude;
  const longitud = posicion.coords.longitude;
  const precision = posicion.coords.accuracy;

  document.getElementById("resultado").innerHTML = `
    <strong>Latitud:</strong> ${latitud} <br>
    <strong>Longitud:</strong> ${longitud} <br>
    <strong>Precisión:</strong> ${precision} metros
  `;
}

Paso 4: Manejo de errores

Es importante contemplar posibles errores:

function mostrarError(error) {
  switch (error.code) {
    case error.PERMISSION_DENIED:
      mensaje = "El usuario negó el acceso a la ubicación.";
      break;
    case error.POSITION_UNAVAILABLE:
      mensaje = "La ubicación no está disponible.";
      break;
    case error.TIMEOUT:
      mensaje = "La solicitud tardó demasiado.";
      break;
    default:
      mensaje = "Ocurrió un error desconocido.";
  }

  document.getElementById("resultado").innerText = mensaje;
}

Actividad de la clase

Evidencia práctica

  1. Ejecutar la aplicación en tu navegador.
  2. Otorga permiso para acceder a la ubicación.
  3. Captura evidencia del resultado.
  4. Responde en un breve reporte:
  • ¿Qué datos proporciona la API?
  • ¿Por qué es necesario el permiso del usuario?
  • ¿Qué ventajas ofrece esta API en aplicaciones reales?

Esta actividad formará parte de tus evidencias de evaluación.