Cómo construir un reloj meteorológico con GPS con mi antiguo iPhone 4

Mi primer teléfono inteligente era un iPhone 4s. Recuerdo la emoción de explorar sus capacidades en un momento en que era lo mejor que existía. Finalmente, por supuesto, lo reemplacé con un modelo más nuevo y el viejo iPhone, todavía en perfecto estado, acumuló polvo durante dos años. ¡Qué desperdicio!

¿Pero lo fue? Se me ocurrió que podría reutilizar el viejo iPhone para crear un reloj meteorológico útil para nuestro pasillo.

En el proceso, descubre que reutilizar un dispositivo viejo no sólo es divertido y económico, sino que también puede profundizar tu comprensión de los estándares web. En este tutorial, se mostrará cómo crear una pequeña página web para mostrar la fecha, la hora y las condiciones climáticas actuales según la ubicación GPS actual. Juntos, recuperaremos datos meteorológicos de una API pública y ocultaremos una clave API en un archivo PHP por seguridad. Finalmente, veremos cómo agregar un archivo de manifiesto y metaetiquetas para que los usuarios puedan guardar la página en la pantalla de inicio de un dispositivo y luego iniciarla como una aplicación independiente, incluido un ícono personalizado.

Aquí hay una captura de pantalla de lo que buscamos:

Paso 1: ¿Qué hora es?

El HTML del reloj tiene un texto de marcador de posición que eventualmente reemplazaremos. Todo lo que realmente necesitamos en este momento es un mainelemento contenedor centrado y un par de timeelementos semánticos para la fecha y la hora. La spanetiqueta dentro del segundo timeelemento tendrá un estilo especial para mostrar los segundos en ejecución y el meridiano. El datetimeatributo dentro de los timeelementos se actualizará dinámicamente con JavaScript.

the updateTime call at the end of the function wd = document.getElementById("weather"); icon = document.getElementById("icon"); weatherminute = randRange(0,14); // ...}// Random number utility functionfunction randRange(min, max) { return Math.floor(Math.random()*(max-min+1))+min;}

A continuación modificaremos el ifbloque final de la updateTime()función. Deseamos evitar llamadas innecesarias a las API de clima y geolocalización, por lo que es importante realizar pruebas para sec === 0asegurarnos de no llamar a ninguna de las API 60 veces en un minuto determinado. También deseamos llamar a las API solo si el usuario ha aprobado la solicitud de geolocalización del navegador.

the next day's sunrise var isDark = nowtime sunsettime || nowtime sunrisetime; document.getElementById("container").className = isDark ? "nightmode":"daymode";}function convertTemperature(kelvin){ // Converts temps in kelvin to celsius or fahrenheit var celsius = (kelvin - 273.15); return temperaturescale === "F" ? celsius * 1.8 + 32 : celsius;}

Paso 4: ¿Realmente tengo que mostrarte mi clave API?

Utilicé una clave API desechable para crear una demostración funcional. Sin embargo, en general, colocar una clave API en texto sin formato dentro del código de una aplicación web front-end parece una mala idea. Otros podrían copiarla y utilizar su cuota de acceso a la API. Si tiene acceso a un servidor web típico (CodePen no hace PHP), puede ocultar la clave API en un archivo PHP. Aquí hay un código de muestra. Sustituye la clave API y carga el archivo como clock.php en el mismo directorio que el archivo HTML principal. El archivo PHP sirve como una especie de proxy para la API OpenWeatherMap que estamos usando para obtener datos en la demostración. Si tiene algún problema para recuperar datos meteorológicos, simplemente devuelve un objeto estructurado adecuadamente con “Weather Unavailable” como descripción y una temperatura que se convierte a 0° Fahrenheit. La clave API nunca se queda fuera del servidor del navegador, por lo que no hay nada que los ojos curiosos puedan ver.

Me interesaría saber si los lectores conocen alguna solución segura y sin servidor para ocultar una clave API (¿Netlify o Docker quizás?), porque sería bueno no tener que crear nuestro propio servidor para almacenar y acceder a los datos. Si tienes alguna idea, participa.

!DOCTYPE htmlhtmlheadmeta charset="UTF-8"titleClock Data/title/headbody?phperror_reporting(0);$latitude = "80";$longitude = "-85";if (isset($_GET["lat"])  isset($_GET["lon"])) {  $latitude = $_GET["lat"];  $longitude = $_GET["lon"];}$endpoint = "http://api.openweathermap.org/data/2.5/weather?";$apikey = "YOUR_API_KEY_HERE";$weatherurl = $endpoint . "lat=" . $latitude . "lon=" . $longitude . "appid=" . $apikey;$jsonfile = file_get_contents($weatherurl);if ($jsonfile !== false){  echo "$jsonfile";} else {  echo '{"weather":[{"description":"Weather Unavailable","icon":"01n"}],"main":{"temp":255.372278}}';}?/body/html

Si alguien más intenta utilizar este archivo PHP desde otro dominio, el navegador debería arrojar un error como el del siguiente ejemplo. Cargué una copia del reloj meteorológico en mi dominio makepages.com e intenté acceder al archivo PHP en mi dominio shearspiremedia.com. Hoy en día, la política del mismo origen está vigente de forma predeterminada en las instalaciones típicas de servidores web comerciales. Es posible que deba confirmar que ese es el caso en el servidor que está utilizando.

[Error] Origin https://makepages.com is not allowed by Access-Control-Allow-Origin.[Error] XMLHttpRequest cannot load https://shearspiremedia.com/demos/clock/clock.php?lat=40.14616446413611lon=-75.20946717104738 due to access control checks.

A continuación, actualice la usephpvariable en el archivo JavaScript y pruebe:

var usephp = true; // Set to true to use a PHP document to hide your api key

Paso 5: ¿Puedo ponerlo en pantalla completa?

Una vez que la aplicación está instalada y funcionando, se puede cargar en cualquier navegador de smartphone. Sin embargo, el iPhone se ve obligado a soportar la presencia de la barra de ubicación y el pie de página. ¡Qué onda!

Sería fantástico poder verlo en pantalla completa. Para hacer eso, necesitamos un archivo de manifiesto para indicarle al dispositivo que deseamos ver el reloj como una aplicación independiente y para indicarle a los dispositivos Android dónde se encuentran los íconos de las aplicaciones. Aquí está mi archivo de manifiesto que guardé como manifest.json en el mismo directorio que el archivo HTML. Puede crear su propio archivo de manifiesto utilizando Web App Manifest Generator. Asegúrese de ajustar los nombres de los archivos de íconos en su propio archivo de manifiesto y en las etiquetas de enlace en el HTML como vemos aquí:

{  "short_name": "Weather Clock",  "name": "Weather Clock by Shearspire Media",  "icons":     {      "src": "icons/launcher-icon-1x.png",      "type": "image/png",      "sizes": "48x48"    },    {      "src": "icons/launcher-icon-2x.png",      "type": "image/png",      "sizes": "96x96"    },    {      "src": "icons/launcher-icon-128.png",      "type": "image/png",      "sizes": "128x128"    },    {      "src": "icons/launcher-icon-152.png",      "type": "image/png",      "sizes": "152x152"    },    {      "src": "icons/launcher-icon-4x.png",      "type": "image/png",      "sizes": "192x192"    }  ],  "orientation": "landscape",  "display": "standalone",  "start_url": "index.html"}

También necesitamos un conjunto de imágenes PNG cuadradas de 192px, 152px, 128px, 96px y 48px para el icono de la pantalla de inicio. Guárdelas en una carpeta de iconos dentro de la misma carpeta que el archivo HTML. Utilice los nombres de archivo que se encuentran en el manifiesto. El generador de manifiestos de aplicaciones web creará iconos en todos los tamaños requeridos excepto 48px cargando una única imagen de 512 x 512 píxeles. Este es el icono simple que hice:

Finalmente, necesitamos agregar un montón de etiquetas meta y de enlace en el encabezado del archivo HTML para que todo esto funcione. Aquí está el código del archivo index.html completo, incluidas todas las etiquetas principales que no se pueden ver en CodePen.

!DOCTYPE htmlhtmlhead  meta charset="utf-8" /  meta name="viewport" content="width=device-width, initial-scale=1"  meta name="mobile-web-app-capable" content="yes"  meta name="apple-mobile-web-app-capable" content="yes"  link rel="manifest" href="manifest.json"  link rel="apple-touch-icon" href="icons/launcher-icon-1x.png"  link rel="apple-touch-icon" href="icons/launcher-icon-2x.png"  link rel="apple-touch-icon" href="icons/launcher-icon-128.png"  link rel="apple-touch-icon" href="icons/launcher-icon-152.png"  link rel="apple-touch-icon" href="icons/launcher-icon-4x.png"  titleWeather Clock by ShearSpire Media/title  script src="clock.js"/script  link rel="stylesheet" type="text/css" href="clock.css"/headbody  /* Clock markup *//body/html

El visitante ahora puede tocar el botón compartir en el iPhone y elegir “Agregar a la pantalla de inicio”. Aparecerá un ícono que iniciará el reloj como una aplicación independiente de pantalla completa. ¡Disfruta!

Otra opción: ubicación de la dirección IP

Si la ubicación exacta del usuario no es un requisito, podríamos evitar por completa la API de geolocalización y obtener la ubicación aproximada mediante cualquiera de los diversos servicios de direcciones IP. En la demostración anterior, se recibe un objeto JSON de extreme-ip-lookup.com para obtener la ubicación GPS aproximada del usuario. Esto muestra los valores de la ciudad y la región que se encuentran en el JSON en lugar de las coordenadas GPS. En este caso, el usuario debería tener claro que la ubicación meteorológica es una ciudad vecina.

Dado que la información de IP es parte de la solicitud normal de una página web, se podría argumentar que no hay ningún problema ético en mostrar información de ubicación de IP sin el permiso del usuario. Eso elimina por completo la necesidad del botón GPS. De hecho, cambié la aplicación final para que utilice la función de ubicación de dirección IP con geolocalización únicamente como respaldo en caso de que el servicio de ubicación de IP no funcione. También agregué más información meteorológica, imágenes de fondo personalizados e íconos meteorológicos personalizados para que correspondan con las condiciones meteorológicas actuales. Los íconos personalizados están disponibles en este Pen. La aplicación final está disponible aquí en mi sitio ShearSpireMedia.com. También creé una pluma que genera un cielo estrellado para el modo nocturno que se puede usar para crear un fondo nocturno.

¡Eso es un envoltorio!

Cubrimos mucho terreno en este artículo, pero esperamos que te de una idea de qué:

• Podemos enseñarle trucos nuevos a un dispositivo viejo.
• La API de geolocalización no es tan aterradora.
• Es útil recuperar y utilizar datos de una API externa.
• Usar un pequeño archivo PHP es una manera fácil de ocultar su clave API de miradas indiscretas.
• Trabajar con permisos de usuario es una buena práctica (ya menudo necesaria).

Como mencioné anteriormente, una solución sin servidor para almacenar datos sería ideal aquí, así que si tienes alguna idea al respecto, o realmente alguna idea o pregunta, ¡házmelo saber en los comentarios!