Estaba en medio de una de mis típicas crisis de aburrimiento tratando de buscar una idea para una app en React (buscar ideas factibles nunca ha sido mi fuerte) cuando, de repente, me acordé de la calculadora de variación del IPC que ofrece el INE (Instituto Nacional de Estadísticas, el ente chileno a cargo de cosas como el censo y estadísticas vitales) para determinar el poder adquisitivo del peso chileno (CLP) a lo largo del tiempo. La página cumple su propósito, sin lugar a dudas, pero me pregunté si podría hacer una propia que cumpla el mismo propósito, usando tecnologías más recientes y que se vea ligeramente mejor. Como me pareció una excelente idea para una app de la que me sentiría lo suficientemente orgulloso como para no tener oculta en una carpeta de mi PC, me dispuse a crear un proyecto Next.js y me puse manos a la obra.
La calculadora del INE, hecha con las mejores tecnologías que el año 2008 puede ofrecer.
Como pueden ver, la página de la que me estoy inspirando cumple su propósito, pero encuentro que podría mejorarse. Por ejemplo, la parte donde se especifican los intervalos de fechas y el monto a convertir es muy pequeña comparada al contenedor donde salen los resultados. Además, el valor ajustado, que es el resultado que cualquier persona que considere que la pregunta “¿cuánto costaría el pasaje de micro en mayo de 1987 en plata de hoy?” es digna de hacerse busca, está “relegado” a un texto más pequeño que el porcentaje de variación que, aunque importante, considero que podría dejarse más en un segundo lugar.
Volviendo a mi app, me puse a trabajar y, una vez tuve configurado el proyecto Next.js con TypeScript y Tailwind CSS, empecé a ver cómo podría rescatar la información sobre la variación del IPC (Índice de Precios al Consumidor). Partí revisando la página del INE en busca de alguna base de datos pública o algo, pero solo encontré las estadísticas desagregadas por tipo de bien o servicio en lugar del porcentaje de variación mensual y, ya que la estadística no es lo mío, decidí mejor probar con la misma API que usa la calculadora. Como quería evitar dentro de lo posible enviar repetidas consultas a su endpoint estando la aplicación en producción, pensé en descargar una sola vez toda la información que pudiera, ponerla en algún tipo de base de datos e irla actualizando cada mes.
Para tener una tabla propia con la variación mensual del IPC, creé un script en Python que llamara de forma repetida a la API del INE, consultando por la variación de $ 1000 millones (para obtener una buena cantidad de decimales) mes a mes desde marzo de 1928. Habría usado un número más grande, pero la plataforma no me dejaba usar más de 10 dígitos (ugh). Luego, extraje la información en XML (doble ugh) y mandé todo a un archivo CSV, el cual copié en una planilla de Google Sheets. Decidí usar esto en lugar de desplegar un servidor base de datos real (profe Varas, perdóneme si lee esto xd) porque no necesitaba algo muy complejo para esta aplicación y porque iba a aprovechar la capacidad de Next.js de generar sitios estáticos en tiempo de compilación para insertar la tabla de IPC en la misma página, actualizándola sólo cuando se añada una nueva entrada cada mes. De esa manera puedo ofrecer resultados a medida que el usuario tipea sin usar una API externa.
Con respecto al diseño, ocupé toda mi energía creativa en diseñar esta obra de arte:
Acepto ofertas como diseñador gráfico. No se peleen por mí.
No es la aplicación más bonita del mundo, pero el formulario mismo es más grande y muestra el valor calculado en mayor tamaño, además de que es responsiva y compatible como PWA.
Con respecto al uso, es simple de usar: definimos un intervalo de tiempo, un monto en el cuadro de texto y, a medida que escribimos, vamos obteniendo el resultado. Hice repetidas pruebas con la calculadora del INE para asegurarme de que los valores coinciden y lo logra perfectamente, aunque con cifras muy grandes los valores empiezan a diferir (no ocupé todos los decimales que me retornaba la API por temor a que hubiera artefactos producto de ser números de coma flotante).
Si les interesa echarle una mirada, pueden visitarla haciendo clic aquí e instalarla como PWA si gustan. Además, el proyecto con el código que usé para la app lo pueden encontrar acá. Si tienen alguna duda o problema, no duden en contactarme o reportar un bug o pull request en el repositorio. ¡Hasta la próxima!