Auto-guardado local, no vuelvas a perder nada

Imagínate esta situación: estás trabajando en un informe importante en un editor en línea y, de repente, ¡la conexión a Internet se cae! ¿El resultado? Podrías perder todo tu trabajo. Para evitar este dolor de cabeza digital, el guardado local se convierte en tu mejor amigo. Así que, en un tono amigable y serio, exploremos esta característica y cómo funciona en un editor de informes en Angular.

El Guardado Local: Tu Compañero de Confianza

En este mundo de interrupciones y problemas técnicos constantes, el guardado local es como un héroe digital. Es una función que te permite guardar una copia de tu trabajo en tu dispositivo, asegurando que no se pierda en las nubes de Internet. El código que te voy a mostrar te enseña cómo implementar el guardado local en una aplicación Angular, especialmente en un editor de informes. ¿Las ventajas? Son muchas y muy valiosas.

1. Protección contra la Pérdida de Datos

Nada es más desalentador que perder horas de trabajo debido a problemas de conexión. Con el guardado local, esta pesadilla se desvanece. El código que vamos a ver se encarga de guardar automáticamente el informe en tu dispositivo, garantizando que tus datos estén a salvo, incluso cuando la tormenta digital hace de las suyas.

2. Flexibilidad y Continuidad

El guardado local también te da la libertad que necesitas. ¿Necesitas seguir trabajando en tu informe en un vuelo o en un lugar con una conexión limitada? No hay problema. Con el guardado local, puedes seguir trabajando sin problemas, sin importar dónde estés. Esto te asegura que tu trabajo siga avanzando sin contratiempos.

3. Protección contra Errores Humanos

Quién no ha borrado accidentalmente una sección importante de un informe o ha sobrescrito información crucial. Con el guardado local, los errores humanos son menos aterradores. El sistema te permite restaurar versiones anteriores de tu trabajo, lo que actúa como un salvavidas cuando cometes un error. Así, se reducen las situaciones de estrés y desesperación.

4. Ahorro de Tiempo y Estrés

La amenaza constante de perder datos puede ser estresante y llevar a perder tiempo valioso. El guardado local, en cambio, te ofrece tranquilidad al asegurarte de que tus datos estén respaldados en tu propio dispositivo. Esto ahorra tiempo y esfuerzo, algo realmente valioso en entornos profesionales y personales.

El Código en Acción: Implementación en Angular

Ahora que hemos hablado de los beneficios del guardado local, veamos cómo funciona en una aplicación Angular. En el componente «AutosaveComponent,» el código se encarga de guardar automáticamente el informe en tu dispositivo y de recuperar versiones anteriores en caso de problemas. A continuación, te muestro el código completo y una breve explicación de cómo funciona:

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import * as moment from 'moment';
import { AuthUserService } from 'projects/cris9/src/app/services/authUser.service';

@Component({
  selector: "app-autosave",
  templateUrl: "./autosave.component.html",
  styleUrls: ["./autosave.component.css"],
})
export class AutosaveComponent implements OnInit {
  @Input()
  set report(value: string) {
    this._report = {report: value, TTL: moment().format("DD/MM/yyyy HH:mm:ss") };
  }

@Input() set report(value: string): Aquí definimos un «setter» para la entrada «report» que nos permite capturar el valor del informe y su marca de tiempo actual. Esto nos ayudará a mantener un registro de los cambios.

@Input() set AN(value: string) { this._AN = value; }

@Input() set AN(value: string): Similar al anterior, este «setter» captura el valor de «AN,» que es parte del contexto del informe.

@Output() restoreTemplate = new EventEmitter<string>();

@Output() restoreTemplate: Esta línea define un evento de salida que nos permitirá restaurar una versión anterior del informe si es necesario.

constructor(private _authUser: AuthUserService) {}

constructor(private _authUser: AuthUserService): Aquí estamos inyectando el servicio «_authUser» para poder utilizarlo en nuestras funciones.

  lastTime;
  lastResult: boolean;
  saving: boolean;
  notSavedYet;
  private _report;
  private _AN;
  private _refreshInterval;

Variables: Estamos declarando varias variables que se usarán en todo el componente para realizar un seguimiento del estado del guardado y la información del informe.

  ngOnInit(): void {
    // Verificar si existe un informe anterior
    if (this.checkExist()) {
      // Iniciar temporizador
      this._refreshInterval = setInterval(() => {
        this.autosave();
      }, 15000);
    }
  }

ngOnInit(): Esta es una función del ciclo de vida de Angular. Aquí comenzamos por verificar si existe un informe anterior (la función checkExist lo hará por nosotros). Si hay un informe anterior, iniciamos un temporizador para el guardado automático con un intervalo de 15 segundos (15000 milisegundos).

  checkExist(): Boolean {
    try {
      if (
        localStorage.getItem(this._authUser.getUser() + "-" + this._AN) !=
          null &&
        localStorage.getItem(
          this._authUser.getUser() + "-" + this._AN + "-" + "lastDate"
        ) != null
      ) {

checkExist(): Esta función verifica si existen datos previamente guardados. Revisamos si hay una entrada en el almacenamiento local para el usuario y para «AN» (parte del contexto del informe), así como la marca de tiempo de la última modificación.

        if (
          (JSON.stringify(JSON.parse(localStorage.getItem(this._authUser.getUser() + "-" + this._AN)).report) != JSON.stringify(this._report.report)) &&
          confirm(
            "Se ha encontrado una versión local del informe con fecha " +
              localStorage.getItem(
                this._authUser.getUser() + "-" + this._AN + "-" + "lastDate"
              ) + " que no ha sido guardada en el servidor." +
              "\n¿Quieres cargarla?\n\n" +
              "** Si no cargas el informe recuperado, se descartará y se sobrescribirá **"
          )
        ) {

Continuación de checkExist(): Aquí, comparamos el informe actual con el informe guardado localmente para ver si ha habido cambios. Si se detectan cambios, mostramos un mensaje de confirmación para cargar la versión local. Si el usuario confirma, recuperamos el informe local y actualizamos el estado.

          this._report = JSON.parse(
            localStorage.getItem(this._authUser.getUser() + "-" + this._AN)
          );
          this.lastTime = localStorage.getItem(
            this._authUser.getUser() + "-" + this._AN + "-" + "lastDate"
          );
          this.lastResult = true;
          this.notSavedYet = false;
          this.restoreTemplate.emit(JSON.stringify(this._report.report));
        }
      } else {
        localStorage.removeItem(this._authUser.getUser() + "-" + this._AN);
        localStorage.removeItem(
          this._authUser.getUser() + "-" + this._AN + "-" + "lastDate"
        );
        this.notSavedYet = true;
      }

Continuación de checkExist(): Si el usuario decide cargar la versión local, aquí actualizamos el estado del informe y marcamos que no se ha guardado aún en el servidor. Si no hay datos locales, eliminamos cualquier información antigua y marcamos que aún no se ha guardado.

      return true;
    } catch (exception) {
      console.log(exception);
      alert("Lo sentimos, se ha producido un error al recuperar el informe :(");
      localStorage.removeItem(this._authUser.getUser() + "-" + this._AN);
      localStorage.removeItem(
        this._authUser.getUser() + "-" + this._AN + "-" + "lastDate"
      );
      this.notSavedYet = true;
      return true;
    }
  }

Continuación de checkExist(): En caso de que ocurra algún error durante la verificación, manejamos la excepción y mostramos un mensaje de alerta. Luego, limpiamos los datos locales y marcamos que no se ha guardado.

autosave() {
    try {
      this.saving = true;
      localStorage.setItem(
        this._authUser.getUser() + "-" + this._AN,
           JSON.stringify(this._report));
      localStorage.setItem(
        this._authUser.getUser() + "-" + this._AN + "-" + "lastDate",
        moment().format("DD/MM/yyyy HH:mm:ss")
      );
      this.lastTime = moment().format("DD/MM/yyyy HH:mm:ss");
      this.lastResult = true;
      this.saving = false;
      this.notSavedYet = false;
    } catch (exception) {
      this.lastTime = moment().format("DD/MM/yyyy HH:mm:ss");
      this.lastResult = false;
      this sving = false;
      this.notSavedYet = false;
    }
  }
}

autosave(): Esta función se encarga de guardar automáticamente el informe en el dispositivo del usuario. Primero, marcamos que estamos en proceso de guardado y luego almacenamos el informe y la marca de tiempo en el almacenamiento local. Si todo va bien, actualizamos el estado y marcamos que no se ha guardado en el servidor. Si ocurre un error, manejamos la excepción y marcamos que no se ha guardado.

Conclusión

En resumen, el guardado local es una función esencial para garantizar la seguridad y la continuidad en la creación de informes en línea. Protege contra la pérdida de datos, ofrece flexibilidad, previene errores humanos y ahorra tiempo. La implementación de esta característica, como se muestra en el código de Angular, es una excelente decisión para crear un editor en línea más amigable y eficiente.

Nuestra intención es ayudarte a que tu experiencia en la creación de informes sea lo más agradable y sin preocupaciones posible. Con el guardado local, puedes estar seguro de que tu trabajo está en buenas manos, incluso cuando las nubes digitales amenazan con tormenta.

Google Analytics en Angular

Si trabajas con Angular (o algún sistema similar SPA) y has intentado usar google analytics para monitorizar tu página, te habrás dado cuenta de que GA no es capaz de «seguir» los cambios de URL de las SPA.

para que el seguimiento se realize correctamente, debemos llamar la función de Google Analytics que notifica que una URL ha sido visitada. Existen diferentes maneras de hacerlo, pero te explicaré la que yo uso 😉


El Script de Google Analytics

Voy a dar por supuesto que te has registrado en Google Analytics y tienes ya tu identificador ( del estilo ‘UA-4353454353-6’) Si no es así, ya sabes lo que toca!

Añade este código en tu ‘index.html’

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXXX-X', 'auto');
</script>

Este es el código de Google que realizará el seguimiento. (Recuerda cambiar ‘UA-XXXXXXXXX-X’ por tu ID!!)

 

Fíjate que hemos eliminado del script original de GA la línea

ga('send', 'pageview');

Esta es la función que «comunica» la url que estamos visitando. La eliminamos por que la llamaremos desde el constructor de nuestros componentes.

Cargando las funciones GA en los componentes

Ahora, para poder llamar las funciones de Google Analytics desde nuestros componentes, vamos a instalar los @types/google.analytics que contienen las definiciones para Google Analytics. (Puedes consultar el paquete npm para más información)

Para instalarlas ejecutaremos en la carpeta de nuestro proyecto la siguiente instrucción:

npm install --save-dev @types/google.analytics

De esta manera tendremos disponibles las funciones ga() en nuestros componentes.

 

Llamando a desde el constructor del componente

Genial, pues solo nos falta llamar las funciones desde el componente que deseemos (hay que tener en cuenta que deberemos añadir este código a los constructores de cada componente que sea subsceptible de ser llamado por una ruta)
  constructor(
    private router: Router,
  ) {
    this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
        ga('set', 'page', event.urlAfterRedirects);
        ga('send', 'pageview');
    }
    });
  }
Como habrás adivinado, debes importar el Router de angular y el NavigationEnd para poder usarlos:
import { Router } from '@angular/router';
import { NavigationEnd } from '@angular/router';

En ocasiones algunos usuarios han reportado errores del estilo:
Cannot find name 'ga'. webpack: Failed to compile.
Esto es debido a que al compilar, angular no reconoce ga() como una función (aunque en realidad si esta disponible). Podemos solucionarlo fácilmente escribiendo la siguiente línea justo debajo de los imports:
declare var ga: Function;

Y con esto ya lo tienes! Tu página está monitorizada y podrás saber que le gusta a tus visitantes!

Comparando cadenas: Eliminar acentos de una cadena con JavaScript

Desde que me dedico a la programación, me he encontrado en multitud de ocasiones con el problema de los acentos, ya se por que no se visualizan bien en las webs, porque el charset no esta bien especificado en la base de datos y nos los «convierte» en «simbolos raros» o porque al comparar cadenas necesitaríamos eliminarlos.

Habitualmente, al hacer buscadores o programar funciones que comparen un texto, nos encontramos con que el usuario es vago o analfabeto y no escribe correctamente. Esto se traduce en errores al comparar las cadenas de texto.

Lo primero que debemos hacer para garantizar que estamos comparando correctamente es pasar todo el texto a mayúsculas (o minúsculas, como prefieras) para lo cual tenemos las funciones toLowerCase() / toUpperCase() y podemos usarlas así:

let str = 'Mi Cadena de prueba';
console.log(str.toLowerCase());
console.log(str.toUpperCase());

Lo que nos produciría la siguiente salida:

mi cadena de prueba
MI CADENA DE PRUEBA

Hasta aquí todo fácil, ¿no? 
Pero … ¿y para eliminar los acentos?
Pues no existe ninguna función que permita eliminarlos, así que lo único que podemos hacer, es definirnos una nosotros mismos.

Si buscas por Internet, podrás ver una gran cantidad de «maneras» de eliminar los acentos, haciendo sustituciones con expresiones regulares o convirtiendo las cadenas de formato.

Pero muchas de ellas son «sucias» y muy rebuscadas. Por eso te propongo esta:

let str = 'Más Cadenas';
console.log(str.normalize('NFD').replace(/[\u00C0-\u00FF]/g, ''));

// Salida: 'Mas Cadenas'

Con esto ya tendríamos nuestra cadena lista para se comparada de manera que si unimos todos los trozos de código, podemos definirnos una función que nos «prepare» nuestro texto para ser comparado. Te pongo un ejemplo:

cleanCadena(value) {
 return return value.normalize('NFD').replace(/[\u00C0-\u00FF]/g, '').toUpperCase();
}

Recuerda que cuando vayas a comprar dos cadenas, deberás pasar ambas por el cleanCadena(), es muy común limpiar únicamente el valor a buscar por despiste!!