Reflexión sobre el caso de estudio: Transacciones en Aplicaciones Web Progresivas
Autor: @lmk4t
Fecha: 04/11/25
Materia: Desarrollo de Aplicaciones Web Progresivas
Profesor: @frexus
Caso de estudio
He leído y analizado el caso publicado por el profesor:
https://steemit.com/pwa/@frexus/transacciones-en-aplicaciones-web-progresivas
En este caso se aborda el tema de las transacciones en aplicaciones web progresivas, donde se presenta una situación real o simulada para aplicar los conceptos vistos en clase.
Es importante garantizar la consistencia de las transacciones en aplicaciones offline para que los usuarios confíen en que los datos que ingresan se mantendrán intactos y precisos, sin importar el estado de la conexión, pues si una aplicación no maneja bien las transacciones, pueden ocurrir duplicaciones o pérdidas de la información, lo que genera desconfianza en los que la utilizan y errores críticos en los procesos.
Un fallo en las transacciones puede provocar una gran frustración, ansiedad e incluso enojo en los usuarios, especialmente cuando dependen de la aplicación para tareas importantes. En este caso, los registros de asistencia no se guardaban correctamente cuando ocurrían errores de conexión, generando en los profesores desconfianza hacia la herramienta desarrollada por Valeria. Un fallo de este tipo no sólo significa un error técnico, sino un golpe en la credibilidad hacia el proyecto.
Para mejorar la confianza de los que utilizan alguna PWA, es útil el uso de indicadores que brinden información del estado en el que se encuentran los datos. Mostrar mensajes claros como "guardado localmente" o "sincronizando con el servidor" ayuda a que el usuario sepa qué está ocurriendo con sus datos en todo momento. Esto genera una sensación de seguridad, ya que el usuario entiende que la aplicación está respondiendo ante las condiciones de red.
Una de las estrategias más efectivas que se pueden llevar a cabo para manejar correctamente las transacciones es, sin duda, el uso de almacenamiento local, como el ya conocido IndexedDB. De la misma forma, el uso de Service Workers para el almacenamiento en caché y un manejo de colas de transacciones son indispensables para no perder información. Sin embargo, también es necesario ser empáticos con los usuarios para comprender como un fallo técnico puede afectarlos emocionalmente. Cuando un desarrollador diseña pensando en las frustraciones, necesidades y limitaciones, crea soluciones más humanas y funcionales.
Con esto podemos concluir que, más allá de la estabilidad de la estabilidad o velocidad del sistema, el verdadero éxito se mide en la satisfacción y confianza del usuario. Si las personas utilizan la aplicación sin miedo a perder sus datos y la recomiendan a otros, se ha cumplido con el objetivo del proyecto. También se puede evaluar con los errores reportados, la retención de usuarios y comentarios positivos sobre la experiencia general.
Reflexión personal
Con este caso de estudio, descubrimos que son las transacciones y cuál es su funcionamiento dentro de las PWA. Estas transacciones son todas las operaciones que deben completarse de forma total para ser exitosas, ya sea online o de forma offline. El verdadero aprendizaje no se encuentra en el concepto, sino en su importancia para generar confianza en el usuario, pues al no ocurrir correctamente estas transacciones, las personas sienten frustración y enojo al ver sus datos perdidos o duplicados.
Considero que yo actuaría de la misma forma que Valeria, pues la empatía es nuestro mejor aliado al momento de desarrollar un proyecto, ya que vemos desde la perspectiva del usuario, lo que permite crear soluciones más funcionales pensando en la comodidad de las personas que usarán la PWA. Lo más importante en esta parte, es proteger la confianza y la tranquilidad de los visitantes. Personalmente, este es el aspecto más importante que tomaré en cuenta cuando desarrolle mi PWA final para este curso.
Actividades complementarias
Podcast escuchado: Transacciones PWA y el Service Worker https://audius.co/frexus/transacciones-pwa-y-el-services-worker
El podcast toca el tema de las transacciones PWA y su importancia para la integridad de los datos
Práctica desarrollada:
Se realizó una práctica en la que se probó un código que pudiera almacenar el nombre de usuario cuando no exista conexión y guardar los datos cuando se restablezca la red.
- Se creó el HTML para poder escribir los registros de visita.
- Se agregó un Service Worker y el manifest.json.
- Se anexó un app.js para la ejecución de las transacciones, donde se establecieron los indicadores del estado de los datos. Posteriormente, el db.js para usar el IndexedDB y guardar los datos localmente hasta que se restablezca la conexión.
- Después de esto, se creó la base de datos en PHPMyAdmin, que almacena las visitas generadas.
- El primer archivo php creado incluye el db_config, que es el que permite la conexión con el servidor.
- Por último, se integró un api que incluye el archivo save.php, el cual determina qué datos serán guardados.
Actividades lúdicas completadas:
Evidencias visuales
- Captura de la sopa de letras:
Ilustración 1. Evidencia Sopa de Letras. Fuente: Creación propia
La Ilustración 1 muestra los resultados de la sopa de letras realizada.
- Captura del crucigrama:
Ilustración 2. Evidencia Crucigrama. Fuente: Creación propia
La Ilustración 2 presenta los resultados obtenidos al realizar el crucigrama.
- Capturas de la práctica:
Ilustración 3. Captura del código del Service Worker. Fuente: Creación propia
La Ilustración 3 muestra la captura del código del Service Worker, el cual permite almacenar en caché y la carga sin conexión.
Ilustración 4. Captura del código del manifest.json. Fuente: Creación propia
En la ilustración 4 se puede visualizar el código del manifest.json generado para definir el comportamiento de instalación de la PWA.
Ilustración 5. Captura del código del index.html. Fuente: Creación propia
Se presenta en la ilustración 5 la estructuración del index, que incluye un pequeño formulario para ingresar el nombre del visitante.
Ilustración 6. Captura del código db.js. Fuente: Creación propia
En la ilustración 6 se visualizan las líneas de código que conforman el db.js, que utiliza IndexedDB para almacenar datos localmente hasta que se restablezca la conexión.
Ilustración 7. Captura del db_config.php. Fuente: Creación propia
Se establece la conexión del proyecto con el servidor mediante un php como se puede observar en la ilustración 7.
Ilustración 8. Captura del código app.js. Fuente: Creación propia
El app.js define las transacciones y los indicadores que informan el estado de los datos, como se presenta en la ilustración 8.
Ilustración 9. Captura del código api. Fuente: Creación propia
Como se observa en la ilustración 9, se hace uso de un api que es el save.php, el cual determina qué datos serán guardados y cuál será el proceso.
Conclusiones finales
Aprendizaje obtenido:
Lo que me llevo de este caso de estudio es la importancia de las transacciones seguras para no perder información al momento de perder conexión con la red y que se almacenen de forma íntegra. Comprendí que, más allá de completar un proceso, las transacciones seguras generan confianza en los usuarios hacia la PWA, mejorando su desarrollo para permitir experiencias fluidas y confiables para las personas que la utilizan. En un contexto real, aplicaría este conocimiento para mi proyecto de PWA, que consiste en una aplicación para buscar rentas de acuerdo al nivel de ingresos del usuario.
Considero muy importante las transacciones offline en mi app, pues si no hay conexión a internet al momento de publicar una vivienda, esta se pueda guardar localmente hasta que se restablezca la red y pueda ser visualizada. También los usuarios podrían consultar los inmuebles guardados previamente y los resultados desde la última conexión, todo esto para permitir tener información disponible si así se requiere.
Dificultades enfrentadas:
Un problema que tuve fue que se mostraran los datos en el servidor al restablecer la conexión, esto era un problema con la promesa del código, específicamente con los datos "pendientes". Para solucionarlo, utilicé un getAll para que tuviera una promesa correcta y no apareciera el error de iteración.
Backlinks y referencias
Post original del profesor en Steem: https://steemit.com/pwa/@frexus/transacciones-en-aplicaciones-web-progresivas
Podcast del profesor en Audius: https://audius.co/frexus/transacciones-pwa-y-el-services-worker
Mi comentario en el post original: https://steemit.com/pwa/@lmk4t/t58n54
Este post forma parte de la actividad de aprendizaje correspondiente a la tercera unidad.
Publicación realizada con fines educativos como parte del curso de Desarrollo de Aplicaciones Web progresivas.