[Publicado el 29 de Marzo, 2023 en rckstr1.github.io]

INTRODUCCIÓN

El principio de única responsabilidad, Single Responsibility Principle (SRP) es el primero de los 5 principios SOLID y es esencial para crear codigo limpio y mantenible. En este post, exploramos el principio de única responsabilidad en más detalle, discutiendo por qué es importante, como aplicarlo en la práctica, y algunos ejemplos de como puede usarse para crear codigo más limpio.

PRINCIPIO DE ÚNICA RESPONSABILIDAD (SRP)

El principio de única responsabilidad (SRP) es un principio de diseño clave en la programación orientada a objetos que establece que una clase debe tener una sola responsabilidad o razón para cambiar. En otras palabras, una clase debe tener un solo trabajo o función, y debe hacerlo bien.

Al apegarse al principio de única responsabilidad, los desarrolladores podemos crear código que sea mas modular, flexible y mantenible. Si una clase tiene mas de una responsabilidad, se vuelve mas difícil de modificar, probar y reusar. Al dividir clases complejas en varias clases mas pequeñas y especializadas, podemos hacer que nuestro código sea mas facil de entender y modificar.

Por ejemplo, consideremos una clase que se encargue de la autenticación y manejo del perfil de un usuario:

class Usuario {
    public void login(String username, String password) {
        // ejecutar autenticacion
    }

    public void actualizarPerfil(String nombre, String apellido, String email) {
        // ejecutar actualizacion de perfil
    }
}

Esta clase infringe el principio de única responsabilidad porque tiene dos responsabilidades distintas: ejecutar la autenticacion y manejar el perfil del usuario. Para resolver esto, podemos dividir la clase Usuario en dos clases distintas: un Authenticador y un AdministradorPerfil:

class Autenticador {
    public void login(String username, String password) {
        // ejecuta autentication
    }
}

class AdministradorPerfil {
    public void actualizarPerfil(String nombre, String apellido, String email) {
        // ejecuta actualizacion
    }
}

De esta manera, si necesitas cambiar la manera en que se ejecuta la autenticación, puedes modificar la clase Autenticador sin afectar la clase AdministradorPerfil.

En resumen, el principio de única responsabilidad (Single Responsibility Principle, SRP) es una herramienta poderosa para crear diseños de software mantenibles. Al seguir este y los otros principios SOLID, podemos crear sistemas que sean mas fáciles de mantener y escalar, reduciendo costos de desarrollo y mejorando la satisfacción del cliente. Asi que, si buscas mejorar tus habilidades de diseño de software, comienza por aplicar el principio de única responsabilidad a tu código y vé los beneficios por tí mismo.

Nos vemos en el siguiente post, donde cubriremos el segundo de los principios SOLID, principio de "Abierto-Cerrado" (Open-Closed Principle, OCP), que establece que las entidades de software deben ser abiertas a extensiones pero cerradas a modificaciones.

Happy coding!

INTRODUCCIÓN

Los principales lenguajes modernos de programación están influenciados por el paradigma orientado a objetos. Pero, ¿qué es el diseño orientado a objetos? ¿Cuáles son sus ventajas y desventajas?

Comúnmente los desarrolladores no podemos contestar estas preguntas ni tenemos presentes los principios que constituyen la base de las disciplinas de las que derivaron nuestros lenguajes de programación.

Podríamos afirmar que virtualmente todos los desarrolladores de software utilizan algún tipo de lenguaje orientado a objetos. Sin embargo, la mayoría, usamos estos lenguajes sin saber por qué, y sin saber cómo obtener el mayor beneficio del diseño orientado a objetos.

¿QUÉ ES SOLID?

SOLID es un acrónimo para los primeros 5 de 11 principios del diseño orientado a objetos que exponen el manejo de dependencias, presentados por Robert C. Martin, también conocido como “Uncle Bob”.

Los primeros 5 principios del diseño orientado a objetos se refieren al diseño de clases.

Apegarse a los principios SOLID, nos facilita a los desarrolladores escribir software fácil de mantener y extender. También nos ayuda a prevenir malas prácticas, a facilitar refactorización de código y también fomenta el desarrollo ágil de software.

En los siguientes posts exploraremos cada uno de los 5 principios SOLID para presentar los beneficios que brindan y ayudar a identificar las áreas de oportunidad para implementarlos, así como tomar en cuenta el posible costo de aumentar complejidad a nuestro código contra el beneficio de tener código más apegado a estos principios.

En resumen, aplicar los principios solid de manera adecuada nos permite tener código limpio, que se traduce en sistemas más flexibles y estables.

¡Hasta la próxima amigos!

FUENTES

• Pluralsight. “SOLID Principles of Object Oriented Design”. https://app.pluralsight.com/library/courses/principles-oo-design/table-of-contents

• butUncleBob.com. “The principles of OOD”. http://butunclebob.com/ArticleS.UncleBob.PrinciplesOfOod

CRÉDITOS

• Elementos de diseño en el banner. Designed by rawpixel.com / Freepik

INTRODUCCIÓN

Esta es la cuarta y última parte de la serie de posts “GLTrack”. Durante los 4 posts hemos construido una aplicación que permite a los pacientes de diabetes llevar un registro de sus mediciones diarias de niveles de glucosa en la sangre.

En el post anterior, comenzamos a construir la página principal de la aplicación e implementamos un componente que muestra una tabla con los datos de niveles de glucosa capturador por el usuario.

Hoy implementaremos gráficas de línea, barras y pastel para representar de manera visual los datos cargados en el sistema.

Comenzaremos corrigiendo un bug que encontré mientras trabajaba en este post. El bug quedó corregido también en los repositorios de GitHub de los posts anteriores.

NOTA: ESTA ES LA PARTE 4 DE 4 DE LA SERIE DE POSTS "GLTRACK"

• GLTrack parte 1: "Schematics, Componentes y Ruteo con Angular + Material".

• GLTrack parte 2: "Modelos, servicios, dependency injection, formas y data binding con Angular + Material".

• GLTrack parte 3: "Reutiliza componentes. Interacción entre componentes usando @Input() y EventEmmiter con Angular 8".

• GLTrack parte 4: "Gráficas con ng2-charts (Chart.js) y Angular 8. Ordena, filtra, mapea y reduce arreglos de objetos.".

PASO 0: CORREGIR BUG EN EL COMPONENTE “TABLA-REGISTROS”

El bug consiste en que la paginación de la tabla de registros no funciona correctamente. Esto es causado por que los elementos del paginador y el sorteador se conectan a la fuente de datos de la tabla en el constructor del componente.

Para corregir esto, debemos mover este código al método ngOnInit(). Modifica el siguiente código en “tabla-registros.component.ts”:

...
dataSource = new MatTableDataSource<MedicionGlucosa>(this._registros);
...
constructor() {
}

ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
}
...

El primer cambio consiste en declarar e inicializar la tabla con los datos en la propiedad “this._registros”.

Después eliminamos todo el contenido del método constructor del componente y lo pasamos al método “ngOnInit()”. Ya no es necesario inicializar los datos de la tabla así que solo dejamos el código que conecta el paginador y el sorteador a la tabla.

Después de hacer estos cambios, el paginador de la tabla funciona correctamente.

PASO 1: GENERAR REGISTROS DE PRUEBA (OPCIONAL)

Para generar registros con datos aleatorios para visualizarlos en las gráficas que implementaremos en el dashboard, agrega el siguiente código en el servicio “mediciones.service.ts”:

...
export class MedicionesService {
    debugMode = true;

    ...

    constructor() {
        ...
        if (this.debugMode) {
            this.CrearDatosDePrueba();
        }
    }

    ...

    private CrearDatosDePrueba() {
        if (this.GetAll().length < 2000) {
            localStorage.setItem(this.storageKey, JSON.stringify([] as MedicionGlucosa[]));
            const fechaA = new Date();
            const fechaB = new Date();
            fechaA.setMonth(fechaA.getMonth() - 24);

            while (fechaA < fechaB) {
                let medicion = this.CrearMedicionRandom('Desayuno', fechaA);
                this.Create(medicion);
                medicion = this.CrearMedicionRandom('Comida', fechaA);
                this.Create(medicion);
                medicion = this.CrearMedicionRandom('Cena', fechaA);
                this.Create(medicion);
                fechaA.setDate(fechaA.getDate() + 1);
            }
        }
    }

    private CrearMedicionRandom(comida: string, fecha: Date) {
        let rnd = (Math.random() * 130) + 60;
        const nivelGlucosa = rnd;

        rnd = (Math.floor(Math.random() * 100) % 2);
        const antesODespues = rnd === 0 ? 'Antes' : 'Despues';

        const medicion: MedicionGlucosa = {
            Id: this.NewGuid(),
            Timestamp: new Date(),
            Nivel: nivelGlucosa,
            Comida: comida,
            AntesDespues: antesODespues,
            Fecha: fecha
        };

        return medicion;
    }
}

Los cambios consisten en lo siguiente:

1. Creamos una propiedad booleana “debugMode”.

2. En el método constructor, si la propiedad “debugMode” es igual a “true” el servicio va a precargar datos de prueba en la aplicación llamando al método “CrearDatosDePrueba()”.

3. El método “CrearDatosDePrueba()” genera 3 registros diarios de mediciones por cada día de los últimos 2 años utilizando el método “CrearMedicionRandom()”.

4. El método “CrearMedicionRandom()” genera valores pseudoaleatorios para generar registros de niveles de glucosa que se encuentren dentro de rangos realistas.

Para deshabilitar este comportamiento, cambia el valor de la propiedad “debugMode” a “false”.

PASO 2: ACTUALIZAR ESTILOS EN EL DASHBOARD DE LA APLICACIÓN

La página principal de la aplicación debe mostrar el contenido de manera ordenada para que todos los datos y graficas sean más fácil de entender. Para esto vamos a agregar los siguientes estilos en el archivo “dashboard.component.css”:

.flex-row {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    padding-bottom: 20px;
}

.flex-row-item.uno {
    width: 100%;
}

.flex-row-item.dos {
    width: 50%;
}

.flex-row-item mat-card {
    margin-right: 10px;
}

.flex-row-item:last-child mat-card {
    margin-right: 0px;
}

Ahora agregaremos algunos componentes “mat-card” de Angular Material que nos servirán como contenedores para las gráficas que se van a mostrar en la aplicación. Actualiza el contenido de “dashboard.component.html”:

<div class="flex-row">
    <div class="flex-row-item uno">
        <mat-card>
            <p>RCKSTR1.GitHub.io</p>
        </mat-card>
    </div>
</div>

<div class="flex-row">
    <div class="flex-row-item dos">
        <mat-card>
            <p>RCKSTR1.GitHub.io</p>
        </mat-card>
    </div>
    <div class="flex-row-item dos">
        <mat-card>
            <p>RCKSTR1.GitHub.io</p>
        </mat-card>
    </div>
</div>

<div class="flex-row">
    <div class="flex-row-item uno">
        <mat-card>
            <mat-card-title>Mis registros</mat-card-title>
            <app-tabla-registros [permitirEliminar]="false" [registros]="registros">
            </app-tabla-registros>
        </mat-card>
    </div>
</div>

PASO 3: INSTALAR NG2-CHARTS Y CHART.JS

Ng2-charts es un paquete de directivas de Angular para Chart.js que estaremos utilizando para crear graficas en Angular 8 utilizaremos ng2-charts.

En la terminal, ejecuta los siguientes comandos:

INSTALA NG2-CHARTS

npm install --save ng2-charts

INSTALA CHART.JS

npm install --save chart.js

IMPORTA NG2-CHARTS

Agrega el siguiente código en “App.module.ts”:

...    
import { ChartsModule } from 'ng2-charts';

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        ...
        ChartsModule
    ],
    ...
})
export class AppModule { }

INSTALA LOS SCHEMATICS DE NG2-CHARTS PARA GENERAR COMPONENTES QUE IMPLEMENTEN GRAFICAS MÁS RÁPIDAMENTE.

npm install --save-dev ng2-charts-schematics

PASO 4: CREAR GRÁFICAS UTILIZANDO SCHEMATICS DE NG2-CHARTS

A continuación, generaremos de manera automática componentes con implementaciones de gráficas de Charts.js utilizando los schematics que instalamos en el paso anterior. Ejecuta los siguientes comandos en la terminal para generar los nuevos componentes:

ng generate ng2-charts-schematics:line components/historico-mediciones-chart
ng generate ng2-charts-schematics:bar components/comparativo-mensual-chart
ng generate ng2-charts-schematics:pie components/global-niveles-chart

IMPLEMENTAR LOS NUEVOS COMPONENTES AL DASHBOARD

Para mostrar los componentes que acabamos de generar, actualiza el contenido de “dashboard.component.html”:

<div class="flex-row">
    <div class="flex-row-item uno">
        <mat-card>
            <app-historico-mediciones-chart>
            </app-historico-mediciones-chart>
        </mat-card>
    </div>
</div>
<div class="flex-row">
    <div class="flex-row-item dos">
        <mat-card>
            <app-comparativo-mensual-chart>
            </app-comparativo-mensual-chart>
        </mat-card>
    </div>
    <div class="flex-row-item dos">
        <mat-card>
            <app-global-niveles-chart>
            </app-global-niveles-chart>
        </mat-card>
    </div>
</div>
...

Ahora se muestran los nuevos componentes que acabamos de generar.

PASO 5: CONFIGURAR LAS GRAFICAS

En este paso modificaremos los componentes que incluyen las gráficas para ajustar aspectos estéticos, pero también para que los componentes reciban y procesen los datos que alimentan nuestras graficas.

ACTUALIZAR COMPONENTE “HISTÓRICO-MEDICIONES-CHART”

Comenzaremos a modificar la primera gráfica, ajustando la altura a 100 en el archivo “histórico-mediciones-chart.component.html”:

Para que el componente sea capaz de recibir y procesar los datos de las mediciones guardadas por el usuario, actualiza el archivo “historico-mediciones-chart.component.ts”:

...
export class HistoricoMedicionesChartComponent implements OnInit {
    public lineChartData: ChartDataSets[] = [
        { data: [], label: 'Nivel de glucosa' },
    ];
    public lineChartLabels: Label[] = [];
    public lineChartOptions: ChartOptions = {
        responsive: true,
        scales: {
            xAxes: [{
                display: false
            }]
        }
    };
    ...
    @Input()
    set mediciones(datos: MedicionGlucosa[]) {
        const fechaInicial = new Date();
        fechaInicial.setMonth(fechaInicial.getMonth() - 1);

        const ultimoMes = datos.filter(f => 
            new Date(Date.parse(f.Fecha.toString())) >= fechaInicial);

        this.lineChartData[0].data = ultimoMes.map(m => m.Nivel);
        this.lineChartLabels = ultimoMes
            .map(m => `${m.Comida} ${m.AntesDespues} ${new Date(Date.parse(m.Fecha.toString())).toDateString()}`);
    }
}

Los cambios consisten en lo siguiente:

1. Eliminar los datos precargados en el componente y actualizar la etiqueta principal.

2. Eliminar las etiquetas precargadas en el componente.

3. Configurar la gráfica para que no muestre las etiquetas en el eje X (opcional).

4. Agregar una propiedad de entrada “mediciones” con una función setter.

   Esta función intercepta los valores de la propiedad “mediciones” y se ejecuta cada vez que el valor cambia. En este caso, cuando el valor de “mediciones” cambia, la gráfica se actualiza para mostrar los valores de todas las mediciones del último mes.

EL MÉTODO FILTER()

En la función setter de “mediciones” filtramos los objetos del arreglo “datos” por fecha para guardar en la constante “ultimoMes” solamente los registros del último mes (línea 49). Para esto utilizamos el método filter().

El método filter() crea un nuevo array con todos los elementos que cumplan la condición implementada por la función dada.

En este caso, primero guardamos la fecha actual en la constante “fechaInicial” y le restamos 1 mes. Después, la función dada a datos.filter() evalúa que la fecha de cada registro sea mayor o igual a la guardada en “fechaInicial”.

EL MÉTODO MAP()

Puedes observar que en la función setter de “mediciones” también utilizamos el método map() para crear un arreglo de los niveles de glucosa a partir del arreglo de objetos de tipo MedicionGlucosa (línea 51).

El método map() crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos.

En este caso, la función regesa el valor de la propiedad “Nivel” de cada una de las mediciones en el arreglo.

PASAR LOS DATOS DE LA APLICACIÓN DESDE EL DASHBOARD AL COMPONENTE

Ahora necesitamos pasar los registros de la aplicación a nuestro componente a través de la propiedad de entrada “mediciones”. Actualiza el archivo “dashboard.component.html”:

De esta manera, el dashboard pasa los datos de la aplicación al componente de la gráfica a través de la propiedad de entrada “mediciones”.

ACTUALIZAR COMPONENTE “COMPARATIVO-MENSUAL-CHART”

Igual que con el componente anterior, eliminaremos los datos precargados en la gráfica. Modifica el código del archivo “comparativo-mensual-chart.component.ts”:

export class ComparativoMensualChartComponent implements OnInit {
    ...
    public barChartLabels: Label[] = [];
    ...
    public barChartData: ChartDataSets[] = [];

    nombreMeses = [
        'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio',
        'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
    ];
    ...
}

Estos cambios consisten en:

1. Eliminar las etiquetas precargadas en el componente.

2. Eliminar los datos precargados en el componente.

3. Crear la propiedad “nombreMeses” que contiene un arreglo con los nombres de los meses del año.

Ahora, para mostrar los datos comparativos de cada mes, crearemos una propiedad de entrada “mediciones” con una función setter en el archivo “comparativo-mensual-chart.component.ts”:

export class ComparativoMensualChartComponent implements OnInit {
    ...
    @Input()
    set mediciones(datos: MedicionGlucosa[]) {
        // Ordenar los datos por fecha
        datos.sort((a, b) => {
            return Date.parse(a.Fecha.toString()) - Date.parse(b.Fecha.toString());
        });

        // Obtener un arreglo de años disponibles
        let anos = datos.map(m => new Date(m.Fecha.toString()).getFullYear());
        // Filtrar duplicados
        anos = anos.filter((val, i) => anos.indexOf(val) === i);

        const anoActual = new Date().getFullYear();
        const anoAnterior = anoActual - 1;

        // Eliminar datos existentes en la gráfica
        this.barChartData = [{ label: anoAnterior.toString(), data: [] }, { label:
        anoActual.toString(), data: [] }];
        this.barChartLabels = [];

        const mesActual = new Date().getMonth();
        let iMes = 0;

        while (iMes <= mesActual) {
            // Agregar etiquetas con los nombres de cada mes desde Enero hasta el mes actual
            this.barChartLabels.push(this.nombreMeses[iMes]);

            // Obtener promedio mensual del año actual y el anterior
            this.barChartData[0].data.push(this.getPromedioMediciones(anoAnterior, iMes, datos));
            this.barChartData[1].data.push(this.getPromedioMediciones(anoActual, iMes, datos));

            iMes++;
        }
    }

    getPromedioMediciones(ano: number, mes: number, datos: MedicionGlucosa[]) {
        let promedio = 0;
        let datosFiltrados: MedicionGlucosa[] = [];
        let cantidadMediciones = 0;
        let suma = 0;

        // Filtrar las mediciones del mes y año que se desea promediar
        datosFiltrados = datos.filter(f =>
            new Date(f.Fecha.toString()).getFullYear() === ano
            && new Date(f.Fecha.toString()).getMonth() === mes
        );

        if (datosFiltrados.length > 0) {
            // Obtener la suma de los valores de las mediciones a promediar
            suma = datosFiltrados.map(m => m.Nivel)
                .reduce((a, b) => a + b);
            cantidadMediciones = datosFiltrados.length;
            promedio = suma / cantidadMediciones;
        }
        return promedio;
    }
}

De esta manera, cada vez que los datos del usuario cambien, se ejecutara esta función que procesa los datos para generar un promedio mensual y comparar estos datos con los del año anterior.

EL MÉTODO SORT()

En la función setter de “mediciones” ordenamos los objetos en el arreglo “datos” por fecha utilizando el método sort() (línea 51).

El método sort() ordena los elementos de un array de objetos y devuelve el array ordenado de acuerdo al valor que retorna la función de comparación dada. Siendo a y b dos elementos comparados, entonces:

1. Si el valor retornado es menor que 0, se sitúa “a” en un índice menor que “b”. Es decir, “a” viene primero.

2. Si el valor retornado es 0, se deja “a” y “b” sin cambios entre ellos, pero ordenados con respecto a todos los elementos diferentes.

3. Si el valor retornado es mayor que 0, se sitúa “b” en un índice menor que “a”.

En este caso, la función de comparación regresa el resultado de la resta entre las fechas de diferentes registros de mediciones.

EL MÉTODO REDUCE()

En la función “getPromedioMediciones()” estamos obteniendo la suma de los niveles de glucosa para después calcular el promedio de los niveles recibidos. Para esto, primero utilizamos el método map() para obtener un arreglo de los niveles de glucosa, “[1,2,3,4,5]” y después obtenemos la suma de las mediciones con el método reduce().

El método reduce() ejecuta una función reductora sobre cada elemento de un array, devolviendo como resultado un único valor.

En esta función, utilizamos el método reduce para obtener la suma de todos los elementos sin necesidad de utilizar un ciclo while, for, o el método forEach.

PASAR LOS DATOS DE LA APLICACIÓN DESDE EL DASHBOARD AL COMPONENTE

De la misma manera que con el primer componente, necesitamos pasar los registros de la aplicación a través de la propiedad de entrada “mediciones”. Actualiza el archivo “dashboard.component.html”:

ACTUALIZAR COMPONENTE “GLOBAL-NIVELES-CHART”

Para terminar, actualizaremos el ultimo componente para eliminar datos precargados y crear la propiedad de entrada “mediciones”. Modifica el código del archivo “global-niveles-chart.component.ts”:

export class GlobalNivelesChartComponent implements OnInit {
    ...
    // public pieChartLabels: Label[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
    public pieChartLabels: Label[] = [
        'Hipoglucemia', 'Normal',
        'Nivel elevado', 'Altamente elevado'
    ];

    // public pieChartData: SingleDataSet = [300, 500, 100];
    public pieChartData: SingleDataSet = [];
    ...
    @Input()
    set mediciones(datos: MedicionGlucosa[]) {
        let hipoglucemia = 0;
        let normal = 0;
        let elevado = 0;
        let altamenteElevado = 0;

        datos.forEach(m => {
            if (m.Nivel <= 70) {
                hipoglucemia++;
            } else {
                if (m.Nivel <= 115) {
                    normal++;
                } else {
                    if (m.Nivel <= 180) {
                        elevado++;
                    } else {
                        altamenteElevado++;
                    }
                }
            }
        });
        this.pieChartData = [hipoglucemia, normal, 
            elevado, altamenteElevado];
    }

    constructor() { }

    ngOnInit() {
    }
}

Los cambios consisten en lo siguiente:

1. Reemplazamos las etiquetas precargadas con las 4 categorías en las que clasificaremos los datos.

2. Eliminamos los datos precargados en el componente.

3. Creamos la propiedad de entrada “mediciones” con una función setter que se encarga de clasificar los datos disponibles en las categorías que definimos en el paso 1. Para después, llenar la gráfica con la cantidad de mediciones por categoría.

Para concluir, actualiza el archivo “dashboard.component.html” para pasar los datos de la aplicación a este componente:

CONCLUSIÓN

En este post terminamos de desarrollar GLTrack, una aplicación para registro de mediciones de glucosa en la sangre para pacientes de diabetes, implementando gráficas de Chart.js con el paquete de directivas para angular ng2-charts.

Procesamos la información de niveles de glucosa del usuario para convertirla en datos que pudiéramos representar visualmente en las gráficas utilizando mapeando, filtrando y reduciendo arreglos de objetos con las funciones map(), filter() y reduce().

También creamos propiedades de entrada en los componentes de angular, con el decorador Input() y funciones setter para interceptar cambios en las propiedades de entrada.

De esta manera concluimos el desarrollo del prototipo de GLTrack.

El código fuente completo de la aplicación de ejemplo puedes encontrarlo en GitHub, en https://github.com/RCKSTR1/GLTrack4 o si prefieres, puedes clonar el repositorio directo en https://github.com/RCKSTR1/GLTrack4.git

Si tuviste algún problema o duda al seguir los pasos, o si tienes alguna pregunta acerca de este post, contáctame en Twitter, Facebook o LinkedIn.

Es cuánto.

FUENTES

• Vive con Diabetes. "Tablas de los rangos de los niveles de azúcar en la sangre". https://www.vivecondiabetes.com/viviendo-con-diabetes/tratamiento-y-cuidados/9203-tablas-de-los-rangos-de-los-niveles-de-az%C3%BAcar-en-la-sangre.html

• ng2-charts. "Angular2 directives for Chart.js". https://valor-software.com/ng2-charts/

• MDN web docs. "Array.prototype.map()". https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/map

• MDN web docs. "Array.prototype.filter()". https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/filter

• MDN web docs. "Array.prototype.reduce()". https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduce

• MDN web docs. "Array.prototype.sort()". https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/sort

INTRODUCCIÓN

En el post de hoy haremos una nueva actualización a la aplicación GLTrack, que hemos venido construyendo y que tiene como objetivo servir para registrar y monitorear un registro personal de niveles de azúcar en la sangre para pacientes de diabetes.

Me han comentado que los posts anteriores pueden ser demasiado largos y no tan fáciles de entender. Voy a tratar de mantener los posts más breves y al mismo tiempo explicarlos mejor. Aunque creo que este post tampoco quedó tan corto, espero que si esté más claro.

NOTA: ESTA ES LA PARTE 3 DE 4 DE LA SERIE DE POSTS "GLTRACK"

• GLTrack parte 1: "Schematics, Componentes y Ruteo con Angular + Material".

• GLTrack parte 2: "Modelos, servicios, dependency injection, formas y data binding con Angular + Material".

• GLTrack parte 3: "Reutiliza componentes. Interacción entre componentes usando @Input() y EventEmmiter con Angular 8".

• GLTrack parte 4: "Gráficas con ng2-charts (Chart.js) y Angular 8. Ordena, filtra, mapea y reduce arreglos de objetos.".

En el post anterior, creamos un formulario para registrar mediciones e implementamos una tabla para mostrar las capturas.

Imagina que GLTrack ya está siendo usado por un usuario final, Diana. Diana entra a la aplicación y registra sus niveles de glucosa. Las mediciones se muestran en la tabla en la página de registro. Pero la aplicación sería mucho más útil para Diana si le mostrara sus datos de una manera más útil.

Hoy comenzaremos a modificar el Dashboard, la página principal de la aplicación. Lo primero que haremos es agregar al dashboard una tabla igual a la que tenemos en la página de registro.

PASO 1: CREAR NUEVO COMPONENTE

La manera incorrecta de agregar la tabla de registro a la página principal sería copiar el código de la tabla de la página de registro y pegarlo en el componente Dashboard. En cambio, lo que vamos a hacer es crear un componente reutilizable que podamos utilizar en la página de registro y en el dashboard sin tener código duplicado en la aplicación.

Comenzaremos creando un componente nuevo desde la consola:

ng generate component components/tabla-registros

Ahora, inserta el nuevo componente en la página de registro:

<h1>Niveles de glucosa</h1>
<mat-card>
    ...
</mat-card>

<mat-card>
    <mat-card-title>Mis registros</mat-card-title>

    <app-tabla-registros></app-tabla-registros>
    ...
</mat-card>

PASO 2: MOVER Y ADECUAR EL CÓDIGO DE LA TABLA EN EL NUEVO COMPONENTE

CÓDIGO HTML

Comenzamos moviendo el código HTML de la tabla desde "registro.component.html" hacia "tabla-registros.component.html".

registro.component.html:

<h1>Niveles de glucosa</h1>
<mat-card>
    ...
</mat-card>

<mat-card>
    <mat-card-title>Mis registros</mat-card-title>

    <app-tabla-registros></app-tabla-registros>

    <!- El codigo estaba aqui ->
</mat-card>

tabla-registros.component.html:

<div class="row">
    <mat-form-field class="row-item grow">
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Buscar">
    </mat-form-field>
</div>

<table mat-table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="fecha">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Fecha </th>
        <td mat-cell *matCellDef="let row"> {row.Fecha|date:'medium'} </td>
    </ng-container>

    <ng-container matColumnDef="nivel">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
        <td mat-cell *matCellDef="let row"> {row.Nivel} </td>
    </ng-container>

    <ng-container matColumnDef="comida">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Comida </th>
        <td mat-cell *matCellDef="let row"> {row.Comida} </td>
    </ng-container>

    <ng-container matColumnDef="antesDespues">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Antes/Después </th>
        <td mat-cell *matCellDef="let row"> {row.AntesDespues} </td>
    </ng-container>

    <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef> </th>
        <td mat-cell *matCellDef="let row">
            <button mat-icon-button (click)="Eliminar(row.Id)">
                <mat-icon>delete</mat-icon>
            </button>
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

CÓDIGO TYPESCRIPT

Ahora continuamos moviendo el código de la tabla desde el archivo registro.component.ts hacia tabla-registros.component.ts. Para más claridad, a continuación, se muestra el código comentado en registro.component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
import { MedicionGlucosa } from 'src/app/models/models';
import { MedicionesService } from 'src/app/services/mediciones.service';

@Component({
    selector: 'app-registro',
    templateUrl: './registro.component.html',
    styleUrls: ['./registro.component.css']
})
export class RegistroComponent implements OnInit {
    registros = [] as MedicionGlucosa[];
    nuevoRegistro = {} as MedicionGlucosa;

    // displayedColumns: string[] = ['fecha', 'nivel', 'comida', 'antesDespues', 'actions'];
    // dataSource: MatTableDataSource<MedicionGlucosa>;

    // @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
    // @ViewChild(MatSort, { static: true }) sort: MatSort;

    constructor(private mediciones: MedicionesService) {
    }

    ngOnInit() {
        this.registros = this.mediciones.GetAll();
        // this.dataSource = new MatTableDataSource(this.registros);
        // this.dataSource.paginator = this.paginator;
        // this.dataSource.sort = this.sort;
    }

    Guardar() {
        if (!this.IsInvalid()) {
            this.mediciones.Create(this.nuevoRegistro);
            this.LimpiarForma();
            this.registros = this.mediciones.GetAll();
            // this.dataSource.data = this.registros;
        }
    }

    Eliminar(id: string) {
        this.mediciones.Delete(id);
        this.registros = this.mediciones.GetAll();
        // this.dataSource.data = this.registros;
    }

    LimpiarForma() {
        this.nuevoRegistro = {} as MedicionGlucosa;
    }

    IsInvalid() {
    return this.nuevoRegistro.Nivel === undefined
        || this.nuevoRegistro.Comida === undefined
        || this.nuevoRegistro.AntesDespues === undefined
        || this.nuevoRegistro.Comida === undefined
        || this.nuevoRegistro.Fecha === undefined;
    }

    // applyFilter(filterValue: string) {
        // this.dataSource.filter = filterValue.trim().toLowerCase();

        // if (this.dataSource.paginator) {
            // this.dataSource.paginator.firstPage();
        // }
    // }
}

Puedes eliminar las líneas comentadas una vez que las pegas en "tabla-registros.component.ts":

import { Component, OnInit, ViewChild } from '@angular/core';
import { MedicionGlucosa } from 'src/app/models/models';
import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';

@Component({
    selector: 'app-tabla-registros',
    templateUrl: './tabla-registros.component.html',
    styleUrls: ['./tabla-registros.component.css']
})
export class TablaRegistrosComponent implements OnInit {
    registros = [] as MedicionGlucosa[];
    displayedColumns: string[] = ['fecha', 'nivel', 'comida', 'antesDespues', 'actions'];
    dataSource: MatTableDataSource<MedicionGlucosa>;

    @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
    @ViewChild(MatSort, { static: true }) sort: MatSort;

    constructor() {
        this.dataSource = new MatTableDataSource(this.registros);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
    }

    ngOnInit() {
    }

    applyFilter(filterValue: string) {
        this.dataSource.filter = filterValue.trim().toLowerCase();
        if (this.dataSource.paginator) {
            this.dataSource.paginator.firstPage();
        }
    }
}

Ahora el componente “tabla-registros.component” se muestra correctamente, pero la tabla aparece vacía, aunque tengamos registros capturados. Esto es porque, aunque la tabla tiene todos los elementos para almacenar y mostrar datos, no tenemos manera de comunicarnos con el componente para enviar o recibir datos.

PASO 3: PASAR DATOS AL COMPONENTE UTILIZANDO @INPUT()

Para pasar datos de un componente a otro, en este caso, desde el componente “registro” hacia “tabla-registros” necesitamos agregar una propiedad al componente con el decorador @Input().

Modifica la propiedad “registros” e inserta el siguiente código en tabla-registros.component.ts:

// registros = [] as MedicionGlucosa[];
_registros = [] as MedicionGlucosa[];

@Input()
set registros(value: MedicionGlucosa[]) {
    this._registros = value;
    this.dataSource.data = this._registros;
}

Lo primero que hacemos es cambiar el nombre del arreglo de mediciones en la tabla de “registros” a “_registros”. Esto es porque estamos agregando una nueva propiedad con el nombre “registros”. El decorador @Input() indica que el valor de esta propiedad puede asignarse desde otro componente. La manera más sencilla de utilizar @Input() es la siguiente:

@Input() registros: MedicionGlucosa[] = [];

Sin embargo, en este caso necesitamos ejecutar algunas operaciones cuando el valor de la propiedad “registros” cambia:

1. Primero, tomamos el valor recibido “value” y lo guardamos en el arreglo “_registros”.

2. Actualiza la fuente de datos de la tabla de angular material (mat-table).

Ahora que tenemos una forma de recibir datos, agrega el siguiente atributo al componente “tabla-registros” en "registro.component.html":

De esta manera, estamos indicando que el contenido de la propiedad “registros” del componente “registro.component” va a insertarse a la propiedad de entrada “[registros]” del componente “tabla-registros”.

Ahora podemos observar que la tabla que ahora existe dentro del componente “tabla-registros” está mostrando los datos que recibe desde el componente “registro”.

PASO 4: ESCUCHAR EVENTOS DE UN COMPONENTE UTILIZANDO EVENTEMMITER<T>

Aunque el componente “tabla-registros” puede recibir datos. Al hacer click en el botón para eliminar un registro, podemos observar que, en lugar de eliminar el registro, la consola del navegador arroja un error:

Esto sucede porque el botón eliminar intenta ejecutar la función “Eliminar()” cuando el usuario hace click y esta función no existe todavía en el componente:

Para solucionar esto, crea la función “Eliminar()” en tabla-registros.component.ts agregando el siguiente código:

Primero estamos creando una propiedad de tipo EventEmmiter<string> y decorándola con “@Output()”. Después, en la función “Eliminar()” estamos recibiendo como parámetro el Id del registro a eliminar y emitiendo el evento “itemDeleted” con el Id recibido.

export class TablaRegistrosComponent implements OnInit {
    ...
    @Output() itemDeleted = new EventEmitter<string>();
    ...
    Eliminar(id: string) {
        this.itemDeleted.emit(id);
    }
}

Anteriormente, el código para eliminar un registro estaba dentro de la función Eliminar, sin embargo, el componente “tabla-registros” tiene como única responsabilidad mostrar datos en la pantalla y notificar a otros componentes acerca de las interacciones del usuario, por ejemplo, cuando el usuario hace click en el botón eliminar.

@OUTPUT()

El decorador “@Output()” indica que podemos leer el valor de la propiedad desde otro componente, de una manera muy similar a como lo hacemos con el decorador “@Input()”.

EVENTEMMITER<T>

EventEmmiter es una clase incluida en Angular que se usa en propiedades con el decorador “@Output()” para emitir eventos personalizados a los que podemos suscribirnos. “<T>” indica que al crear un EventEmmiter podemos configurar el tipo de dato que va a incluir el evento. En este caso estamos configurando el evento para contener un string.

Ahora que tenemos listo el EventEmmiter, podemos suscribirnos al evento itemDeleted para ejecutar alguna función cuando sea invocado. Agrega el siguiente atributo a “app-tabla-registros” en registro.component.html:

De esta manera, el componente “registro.component” queda suscrito al evento, y cuando el usuario haga click en el botón eliminar, el componente “tabla-registros” dispara el evento “itemDeleted” y entonces el componente “registro.component” ejecuta la función “Eliminar()”.

1. Cuando el usuario hace click en el botón para eliminar un registro, el componente “tabla-registros” ejecuta la función “Eliminar()”.

2. La función “Eliminar()” en “tabla-registros.component.ts” emite el evento “itemDeleted” que contiene el Id del registro a eliminar.

3. El componente “registro.component” está suscrito al evento, y cuando el evento se emite, ejecuta la función “Eliminar()” pasando como parámetro el Id del registro a eliminar.

4. La función “Eliminar()” en “registro.component.ts” se encarga de recibir el Id del registro a eliminar y llama al servicio encargado del almacenamiento de datos para que sea eliminado.

PASO 5: REUTILIZAR EL COMPONENTE “TABLA-REGISTROS”

Ahora que tenemos un componente independiente y reutilizable, podemos insertar la tabla de registros en la página principal de la aplicación. Agrega el componente al dashboard con el siguiente código en dashboard.component.html:

...
<mat-card>
    <app-tabla-registros></app-tabla-registros>
</mat-card>

La tabla se muestra correctamente, pero de nuevo nos encontramos con que no tiene datos para mostrar. Esto es porque el componente “tabla-registros” necesita recibir los datos a través del atributo de entrada “[registros]”.

Ahora debemos actualizar “dashboard.component.ts” para que recupere los datos y los pase a la tabla:

...
export class DashboardComponent implements OnInit {
registros = [] as MedicionGlucosa[];

    constructor(private mediciones: MedicionesService) {
    }

    ngOnInit() {
        this.registros = this.mediciones.GetAll();
    }
}

Ahora el componente tiene una propiedad “registros” que contiene los registros capturados por el usuario.

Utilizando Dependency Injection de Angular, en el constructor se está inyectando el servicio “MedicionesService” que se encarga de leer y escribir los registros de mediciones. De esta manera, Angular se encarga de que una instancia del servicio esté disponible en el componente.

Después, en la función “ngOnInit()” indicamos que una vez que el componente se cargue, recupere los registros de mediciones y los guarde en la propiedad “registros”.

Por último, necesitamos pasar los registros al componente “tabla-registros” utilizando el atributo de entrada “[registros]”. Actualiza “dashboard.component.html”:

Ahora la tabla de registros está disponible también en la página principal reutilizando el componente “tabla-registros” sin la necesidad de tener código duplicado. De esta manera la aplicación es más fácil de actualizar y mantener.

NUEVO PROBLEMA

Ahora tenemos un nuevo problema. Supongamos que, por seguridad, el usuario debe poder eliminar capturas de mediciones desde la página de registro, pero no desde la página principal de la aplicación.

Necesitamos actualizar el componente “tabla-registros” para que podamos configurar si los botones para eliminar registros están disponibles en ciertos casos.

Para esto, necesitamos hacer algunas modificaciones en “tabla-registros.component.ts”:

...
export class TablaRegistrosComponent implements OnInit {
    …
    @Input() permitirEliminar = true;
    …
    // displayedColumns: string[] = ['fecha', 'nivel', 'comida', 'antesDespues', 'actions'];
    …
    GetDisplayerColumns() {
        const displayedColumns: string[] = ['fecha', 'nivel', 'comida', 'antesDespues'];
        if (this.permitirEliminar) {
            displayedColumns.push('actions');
        }

        return displayedColumns;
    }
}

Estas modificaciones consisten en lo siguiente:

1. Agregamos una nueva propiedad de entrada “permitirEliminar”, con un valor verdadero (“true”) por default.

2. Eliminamos la propiedad “displayedColumns” que guardaba un arreglo con los nombres de las columnas que se muestran en la tabla.

3. Creamos una función nueva “GetDisplayedColumns()” que tiene como valor de retorno un arreglo con los nombres de las columnas que se mostrarán en la tabla. Esta función evalúa el valor de la propiedad “permitirEliminar” y si es verdadero entonces agrega la columna “actions” que es la que contiene el botón para eliminar registros.

Ahora necesitamos actualizar “tabla-registros.component.html” para que lea la lista de columnas desde la función “GetDisplayedColumns()” que acabamos de crear:

De esta manera, el componente “tabla-registros” muestra los botones para eliminar por default, pero ahora podemos configurarlo para ocultarlos si es necesario.

Para ocultar los botones en la pantalla principal de la aplicación, agrega el atributo de entrada “permitirEliminar” en “dashboard.component.html”:

De esta manera, evitamos que la tabla muestre los botones para eliminar registros en el dashboard de la aplicación.

CONCLUSIÓN

En este post continuamos construyendo GLTrack, una aplicación para registro de mediciones de glucosa en la sangre para pacientes de diabetes.

Para evitar tener código duplicado en la aplicación, creamos un componente reutilizable para mostrar la tabla de registros en la página principal y en la página de registros de la aplicación.

Utilizamos los decoradores “@Input()” y “@Output()” así como EventEmmiter<T> para interactuar entre componentes de angular y pasar datos de entrada y salida.

También reutilizamos servicios de angular en diferentes componentes con Dependency Injection de Angular 8.

En el siguiente post, continuaremos trabajando en el Dashboard de la aplicación, para mostrar datos relevantes para el usuario acerca de sus mediciones de glucosa a través de graficas que muestren los datos capturados en la aplicación de manera visual.

El código fuente completo de la aplicación de ejemplo puedes encontrarlo en GitHub, en https://github.com/RCKSTR1/GLTrack3 o si prefieres, puedes clonar el repositorio directo en https://github.com/RCKSTR1/GLTrack3.git

Si tuviste algún problema o duda al seguir los pasos, o si tienes alguna pregunta acerca de este post, contáctame en Twitter, Facebook o LinkedIn.

Es cuánto.

FUENTES

• Documentación de Angular. "Propiedades de @Input() y @Output()". https://angular.io/guide/template-syntax#input-and-output-properties

• Documentación de Angular. "EventEmitter". https://angular.io/api/core/EventEmitter#eventemitter

INTRODUCCIÓN

Hola de nuevo, hace tiempo que no escribía, estuve ocupado trabajando en un proyecto con Angular y ASP.NET Core, aprendí mucho y planeo compartir algunas cosas en próximos posts.

En este post continuaremos trabajando en GLTrack, nuestra aplicación para registrar y monitorear un registro personal de niveles de azúcar en la sangre, esas mediciones que deben tomarse regularmente los pacientes de diabetes.

En el post anterior, habíamos creado una aplicación con tres componentes básicos: navegación, dashboard y registro. Eso ya hace 1 mes y medio, así que si necesitas refrescar la memoria aquí está el link. "Schematics, Componentes y Ruteo con Angular + Material".

Hoy continuaremos trabajando en el componente de registro, este componente va a permitir que el usuario registre sus niveles de glucosa y que pueda revisar y eliminar registros si es necesario.

NOTA: ESTA ES LA PARTE 2 DE 4 DE LA SERIE DE POSTS "GLTRACK"

• GLTrack parte 1: "Schematics, Componentes y Ruteo con Angular + Material".

• GLTrack parte 2: "Modelos, servicios, dependency injection, formas y data binding con Angular + Material".

• GLTrack parte 3: "Reutiliza componentes. Interacción entre componentes usando @Input() y EventEmmiter con Angular 8".

• GLTrack parte 4: "Gráficas con ng2-charts (Chart.js) y Angular 8. Ordena, filtra, mapea y reduce arreglos de objetos.".

PASO 1: DISEÑAR UN MODELO DE DATOS

Como primer paso debemos diseñar un modelo que defina los datos que vamos a guardar. Para esto necesitamos crear una clase o interfaz que contenga las propiedades que necesitamos. En el archivo models.ts crearemos la siguiente interfaz:

export interface MedicionGlucosa {
    Id: string;
    Timestamp: Date;
    Nivel: number;
    Comida: string;
    AntesDespues: string;
    Fecha: Date;
}

PASO 2: CREAR UNA FORMA DE CAPTURA

Comenzaremos creando un objeto nuevo para capturar una nueva medición agregando esta línea en el componente registro.component.ts:

nuevoRegistro = {} as MedicionGlucosa;

Antes de continuar con la interfaz gráfica, necesitamos importar algunos módulos de material para poder usar componentes como select y datepicker de angular material. Importa y exporta los siguientes módulos en material.module.ts:

FormsModule,
MatSelectModule,
MatDatepickerModule,
MatNativeDateModule

Una vez importados los módulos necesarios podemos agregar los controles para el formulario en registro.component.html:

<h1>Niveles de glucosa</h1>

<mat-card>
    <mat-card-title>Nuevo registro</mat-card-title>
    <div class="row">
        <mat-form-field class="row-item grow">
            <input matInput placeholder="Nivel de glucosa" [(ngModel)]="nuevoRegistro.Nivel" required>
        </mat-form-field>
        <mat-form-field class="row-item grow">
            <mat-label>Comida</mat-label>
            <mat-select [(ngModel)]="nuevoRegistro.Comida" required>
                <mat-option value="Desayuno">Desayuno</mat-option>
                <mat-option value="Comida">Comida</mat-option>
                <mat-option value="Cena">Cena</mat-option>
            </mat-select>
        </mat-form-field>
        <mat-form-field class="row-item grow">
            <mat-label>Antes o después de alimentos</mat-label>
            <mat-select [(ngModel)]="nuevoRegistro.AntesDespues">
                <mat-option value="Antes">Antes</mat-option>
                <mat-option value="Despues">Después</mat-option>
            </mat-select>
        </mat-form-field>
        <mat-form-field class="row-item grow">
            <input matInput type="datetime-local" placeholder="Fecha" [(ngModel)]="nuevoRegistro.Fecha">
        </mat-form-field>
        <button class="row-item" mat-button [disabled]="IsInvalid()" (click)="Guardar()">
            <mat-icon>save</mat-icon> Guardar
        </button>
        <button class="row-item" mat-button (click)="LimpiarForma()">
            <mat-icon>delete</mat-icon> Cancelar
        </button>
    </div>
</mat-card>

Como puedes observar, los controles como input y mat-select tienen un atributo [(ngModel)], en este atributo estamos especificando una variable o propiedad de un objeto con el que va a estar ligado el control. Por ejemplo, el control “Nivel de glucosa” estará ligado a la propiedad “Nivel” del objeto “nuevoRegistro” que acabamos de crear en registro.component.ts.

Observa que el atributo ngModel está envuelto en corchetes “[]” y paréntesis “()”, esto indica que la sincronización del valor es en dos sentidos, entrada “[]” y salida “()”. De esta manera, el valor del control en HTML queda sincronizado con el valor del objeto en nuestro componente.

También podemos ver que los botones del formulario tienen los atributos [disabled] y (click). Esto indica que solamente nos interesa escribir el valor de “[disabled]” con el resultado de la función “IsInvalid()” y que solamente estaremos escuchando el evento “(click)” de los botones.

EL BOTÓN “GUARDAR”

En este caso, el valor de “[disabled]” va a depender del resultado de la función “IsInvalid()”. Agrega esta función en registro.component.ts:

Esta función regresará un valor booleano. Verdadero si alguna de las propiedades del nuevo registro es undefined y falso si todas las propiedades tienen un valor asignado. De esta manera nos aseguramos de que el usuario pueda guardar un registro solamente si ha llenado todos los campos del formulario.

IsInvalid() {
    return this.nuevoRegistro.Nivel === undefined
        || this.nuevoRegistro.Comida === undefined
        || this.nuevoRegistro.AntesDespues === undefined
        || this.nuevoRegistro.Comida === undefined
        || this.nuevoRegistro.Fecha === undefined;
}

En el botón “Guardar”, indicamos que el evento “(click)” va a ejecutar la función “Guardar()”. Esta función debe encargarse de tomar los datos capturados y enviarlos a una base de datos, un archivo o alguna manera de almacenamiento de datos. En este caso estaremos utilizando “localStorage”, un espacio de almacenamiento del navegador. Agrega las siguientes funciones en registro.component.ts:

Guardar() {
    this.nuevoRegistro.Id = this.NewGuid();
    const mediciones = this.GetAll();
    mediciones.push(this.nuevoRegistro);
    localStorage.setItem('registros', JSON.stringify(mediciones));
}

private NewGuid() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0,
        v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}

La función “Guardar()” se está encargando de convertir el nuevo registro en una cadena de caracteres con formato JSON y guardarla en localStorage, mientras que utiliza la función “NewGuid()” para generar un GUID que es usado como llave o identificador único para el nuevo registro.

Esto podría funcionar, sin embargo, la única responsabilidad de este componente debería ser presentar datos en la pantalla y encargarse de las interacciones del usuario con la interfaz gráfica.

Para solucionar esto y cumplir con el 1er principio SOLID – Single responsibility – necesitamos crear un servicio de angular, que se va a encargar del almacenamiento de datos únicamente, sin depender de la interfaz gráfica, de validaciones ni del estado de ningún componente.

En la consola ejecuta el siguiente comando para crear el servicio:

ng generate service services/mediciones

Esto creará un nuevo servicio en app/services/mediciones.service.ts.

Comenzamos creando una variable que contiene el nombre de la llave que utilizaremos para acceder a los datos guardados en localStorage. De esta manera solo tenemos que modificar este valor si decidimos cambiar el nombre de nuestros datos en localStorage.

El servicio debe encargarse de inicializar nuestros datos en localStorage si es que no existen, por ejemplo, si es la primera vez que ejecutamos la aplicación o si hemos borrado los datos del navegador. Para esto, debemos agregar esta validación al constructor del servicio.

De esta manera cuando el servicio es instanciado en la aplicación, el constructor verifica si existen datos en el navegador y de no ser así inicializa con un arreglo vacío.

Para encargarse de la lectura y escritura de datos, vamos a agregar 3 funciones al servicio: GetAll() para recuperar la lista completa de registros, Create() para guardar un nuevo registro y Delete() para eliminar un registro en especial.

Esta función recupera los datos de localStorage como un string y lo convierte en un arreglo de objetos de tipo MedicionGlucosa.

Después, agregaremos la función Create(). Esta función recibe como parámetro un objeto que debemos guardar. Para esto, el primer paso es generar una nueva llave única para identificarlo en la lista de objetos. Después, obtenemos la lista de objetos guardados y agregamos el nuevo registro para guardar la lista actualizada.

Observa que la creación de un GUID se encuentra en una función separada “NewGuid()” esta función tiene el modificador “private”, esto quiere decir que esta función solo es accesible dentro del servicio, a diferencia de las demás funciones que son visibles desde otros servicios, módulos o componentes.

Por último, agregaremos la función “Delete()” que se encarga de eliminar registros de la lista. Esta función recibe como parámetro un string que debe contener el ID del objeto que será eliminado.

Después de este paso el servicio mediciones.service.ts debe contener lo siguiente:

import { Injectable } from '@angular/core';
import { MedicionGlucosa } from '../models/models';

@Injectable({
    providedIn: 'root'
})
export class MedicionesService {
    storageKey = 'mediciones';

    constructor() {
        if (localStorage.getItem(this.storageKey) === null) {
            localStorage.setItem(this.storageKey, JSON.stringify([] as MedicionGlucosa[]));
        }
    }

    GetAll() {
        const medicionesString = localStorage.getItem(this.storageKey);
        return JSON.parse(medicionesString) as MedicionGlucosa[];
    }

    Create(mc: MedicionGlucosa) {
        mc.Id = this.NewGuid();

        const mediciones = this.GetAll();
        mediciones.push(mc);
        localStorage.setItem(this.storageKey, JSON.stringify(mediciones));
    }

    Delete(id: string) {
        const mediciones = this.GetAll();
        const i = mediciones.findIndex(f => f.Id === id);
        if (i > -1) {
            mediciones.splice(i, 1);
            localStorage.setItem(this.storageKey, JSON.stringify(mediciones));
        }
    }

    private NewGuid() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = Math.random() * 16 | 0,
            v = c == 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }
}

Ahora podemos regresar al componente de registro y actualizarlo para dejar que el servicio se encargue de leer y escribir los datos.

Para poder utilizar el servicio que acabamos de crear desde registro.component.ts necesitamos utilizar una técnica conocida como Dependency Injection. De esta manera, no necesitamos crear una instancia del servicio, sino que Angular se encargará de crearla e inyectarla en todos los componentes que la necesiten. Para utilizar Dependency Injection, solamente agrega un parámetro al constructor del componente en registro.component.ts:

import { MedicionesService } from 'src/app/services/mediciones.service';
…
constructor(private mediciones: MedicionesService) {
}

Esto es suficiente para que una instancia del servicio “MedicionesService” sea accesible desde el componente.

Ahora podemos actualizar la función “Guardar()” en registro.component.ts para que solo se encargue de actualizar la interfaz gráfica y le deje el trabajo de escribir los datos al servicio inyectado:

Guardar() {
    if (!this.IsInvalid()) {
        this.mediciones.Create(this.nuevoRegistro);
        this.LimpiarForma();
        this.registros = this.mediciones.GetAll();
        this.dataSource.data = this.registros;
    }
}

LimpiarForma() {
    this.nuevoRegistro = {} as MedicionGlucosa;
}

Además de actualizar la función “Guardar()” hemos creado una función “LimpiarForma()” que se encarga de limpiar los controles del formulario reinicializando el objeto “nuevoRegistro”. Recuerda que los controles del formulario están ligados a este objeto utilizando la directiva “ngModel”, por eso no es necesario manipular el HTML manualmente.

Esta función (“LimpiarForma()”) también es utilizada por el botón “Cancelar” del formulario.

PASO 3: CREAR TABLA DE REGISTROS

A continuación, necesitamos crear un componente que muestre una tabla con los datos guardados por el usuario.

Agrega el siguiente código HTML al archivo registro.component.html:

<mat-card>
        <mat-card-title>Mis registros</mat-card-title>
        <div class="row">
            <mat-form-field class="row-item grow">
                <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Buscar">
            </mat-form-field>
        </div>

        <table mat-table [dataSource]="dataSource" matSort>
            <ng-container matColumnDef="fecha">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Fecha </th>
                <td mat-cell *matCellDef="let row"> {{row.Fecha|date:'medium'}} </td>
            </ng-container>

            <ng-container matColumnDef="nivel">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
                <td mat-cell *matCellDef="let row"> {{row.Nivel}} </td>
            </ng-container>

            <ng-container matColumnDef="comida">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Comida </th>
                <td mat-cell *matCellDef="let row"> {{row.Comida}} </td>
            </ng-container>

            <ng-container matColumnDef="antesDespues">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> Antes/Después </th>
                <td mat-cell *matCellDef="let row"> {{row.AntesDespues}} </td>
            </ng-container>

            <ng-container matColumnDef="actions">
                <th mat-header-cell *matHeaderCellDef> </th>
                <td mat-cell *matCellDef="let row">
                    <button mat-icon-button (click)="Eliminar(row.Id)">
                        <mat-icon>delete</mat-icon>
                    </button>
                </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>

        <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
    </mat-card>

Además de definir aspectos estéticos del componente, estamos insertando un campo de texto para filtrar los contenidos de la tabla, también especifica las columnas disponibles y el dato que mostraremos en cada una de ellas. Por último, estamos insertando un paginador para ayudar al usuario a navegar entre sus registros.

Ahora necesitamos conectar los datos en registro.component.ts a la tabla. Para esto comenzaremos creando una variable que guardará la lista de registros en el componente.

export class RegistroComponent implements OnInit {
    registros = [] as MedicionGlucosa[];
    nuevoRegistro = {} as MedicionGlucosa;
    …
}

También debemos agregar algunas variables para el funcionamiento de la tabla:

displayedColumns: string[] = ['fecha', 'nivel', 'comida', 'antesDespues', 'actions'];
dataSource: MatTableDataSource<MedicionGlucosa>;

@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;

La variable “displayedColumns” es un arreglo de strings que indica el nombre de las columnas y el orden en el que serán mostradas en la tabla, estos valores deben coincidir con el nombre que hemos indicado en el archivo registro.component.html.

Ahora tenemos una tabla lista para mostrar datos, pero necesitamos recuperar los datos existentes para llenar la tabla cuando se carga el componente. Para esto necesitamos utilizar el servicio mediciones.service.ts en la función “ngOnInit()” de nuestro componente. Agrega las siguientes líneas en el archivo registro.component.ts:

ngOnInit() {
    this.registros = this.mediciones.GetAll();
    this.dataSource = new MatTableDataSource(this.registros);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
}

De esta manera, cuando se inicializa registro.component.ts recuperamos los datos almacenados e inicializamos la tabla para mostrar los datos.

Lo único que falta en la tabla es la habilidad de eliminar un registro. Para esto utilizaremos el botón en la última columna.

Esta columna muestra un botón para eliminar registros. Con el atributo (click) estaremos ejecutando la función “Eliminar()” cuando el usuario dispare el evento “click”. Agrega la función “Eliminar()” en registro.component.ts:

Eliminar(id: string) {
    this.mediciones.Delete(id);
    this.registros = this.mediciones.GetAll();
    this.dataSource.data = this.registros;
}

Esta función recibe como parámetro el id del registro a eliminar y utiliza el servicio mediciones.service.ts para llevar a cabo la operación. Después de eliminar el registro, vuelve a utilizar el servicio para obtener los datos actualizados y actualiza los datos de la tabla.

Después de este paso, registro.component.ts queda así:

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
import { MedicionGlucosa } from 'src/app/models/models';
import { MedicionesService } from 'src/app/services/mediciones.service';

@Component({
    selector: 'app-registro',
    templateUrl: './registro.component.html',
    styleUrls: ['./registro.component.css']
})
export class RegistroComponent implements OnInit {
    registros = [] as MedicionGlucosa[];
    nuevoRegistro = {} as MedicionGlucosa;

    displayedColumns: string[] = ['fecha', 'nivel', 'comida', 'antesDespues', 'actions'];
    dataSource: MatTableDataSource<MedicionGlucosa>;

    @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
    @ViewChild(MatSort, { static: true }) sort: MatSort;

    constructor(private mediciones: MedicionesService) {
    }

    ngOnInit() {
        this.registros = this.mediciones.GetAll();
        this.dataSource = new MatTableDataSource(this.registros);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
    }

    Guardar() {
        if (!this.IsInvalid()) {
            this.mediciones.Create(this.nuevoRegistro);
            this.LimpiarForma();
            this.registros = this.mediciones.GetAll();
            this.dataSource.data = this.registros;
        }
    }

    Eliminar(id: string) {
        this.mediciones.Delete(id);
        this.registros = this.mediciones.GetAll();
        this.dataSource.data = this.registros;
    }

    LimpiarForma() {
        this.nuevoRegistro = {} as MedicionGlucosa;
    }

    IsInvalid() {
        return this.nuevoRegistro.Nivel === undefined
        || this.nuevoRegistro.Comida === undefined
        || this.nuevoRegistro.AntesDespues === undefined
        || this.nuevoRegistro.Comida === undefined
        || this.nuevoRegistro.Fecha === undefined;
    }

    applyFilter(filterValue: string) {
        this.dataSource.filter = filterValue.trim().toLowerCase();

        if (this.dataSource.paginator) {
            this.dataSource.paginator.firstPage();
        }
    }
}

CONCLUSIÓN

En este post continuamos construyendo GLTrack, una aplicación para registro de mediciones de glucosa en la sangre para pacientes de diabetes.

Para construir el componente de registro diseñamos un modelo de datos y creamos un formulario de captura utilizando Template-Driven forms de Angular y data-binding con la directiva ngModel.

También creamos un servicio y lo implementamos con Dependency Injection. Por último, creamos una tabla con filtros, sorting y paginación utilizando el componente MatTable de Angular Material.

En el siguiente post, continuaremos construyendo un Dashboard como página de inicio de la aplicación, donde mostraremos datos relevantes para el usuario acerca de sus mediciones de glucosa implementando valores de entrada y salida para interactuar entre componentes.

El código fuente completo de la aplicación de ejemplo puedes encontrarlo en GitHub, en https://github.com/RCKSTR1/GLTrack2 o si prefieres, puedes clonar el repositorio directo en https://github.com/RCKSTR1/GLTrack2.git

Si tuviste algún problema o duda al seguir los pasos, o si tienes alguna pregunta acerca de este post, contáctame en Twitter, Facebook o LinkedIn.

Es cuánto.

FUENTES

• Documentación de Angular. "Template-driven forms". https://angular.io/guide/forms

• Documentación de Angular. "Introducción a los servicios y dependency injection". https://angular.io/guide/architecture-services

• Documentación de Angular Material, "Form field". https://material.angular.io/components/form-field/overview

• Documentación de Angular Material, "Input". https://material.angular.io/components/input/overview

• Documentación de Angular Material, "Select". https://material.angular.io/components/select/overview

• Documentación de Angular Material, "Table". https://material.angular.io/components/table/overview

INTRODUCCIÓN

En este post comenzaremos a crear una aplicación para registrar y monitorear un registro personal de niveles de glucosa en la sangre, esas mediciones que deben tomarse regularmente los pacientes de diabetes.

Para crear nuestra aplicación utilizaremos componentes, esquemas prefabricados, gráficas, servicios y ruteo de Angular, así como componentes de Material Design para nuestra interfaz gráfica.

Nuestra aplicación constará de las siguientes características:

1. Registro de mediciones de glucosa.

2. Dashboard de resultados con gráficas.

NOTA: ESTA ES LA PARTE 1 DE 4 DE LA SERIE DE POSTS "GLTRACK"

• GLTrack parte 1: "Schematics, Componentes y Ruteo con Angular + Material".

• GLTrack parte 2: "Modelos, servicios, dependency injection, formas y data binding con Angular + Material".

• GLTrack parte 3: "Reutiliza componentes. Interacción entre componentes usando @Input() y EventEmmiter con Angular 8".

• GLTrack parte 4: "Gráficas con ng2-charts (Chart.js) y Angular 8. Ordena, filtra, mapea y reduce arreglos de objetos.".

PASO 1: CREAR UNA NUEVA APLICACIÓN E INSTALAR ANGULAR MATERIAL

Comenzaremos creando una aplicación nueva, instalando Angular Material y preparando una interfaz gráfica básica ejecutando los siguientes comandos en la terminal.

ng new gltrack-app
ng add @angular/material

Si necesitas ayuda creando una aplicación de Angular, puedes ver los detalles en el post "¡Hola Angular 8!".

Si necesitas ayuda instalando Angular Material, puedes ver los detalles en el post "Angular + Material".

PASO 2: CREAR MENÚ DE NAVEGACIÓN CON SCHEMATICS DE ANGULAR MATERIAL

Angular Material incluye esquemas prefabricados que nos permiten construir nuestras aplicaciones de manera más fácil y rápida.

Esta ocasión crearemos un menú de navegación utilizando el schematic 'navigation' para crear un componente que incluye una barra de herramientas con el nombre de la aplicación y una barra de navegación responsiva. En la terminal, ejecuta el siguiente comando:

ng generate @angular/material:nav components/nav

Hay que destacar que al indicar “components/[nombre del nuevo componente]” estamos creando el nuevo componente dentro de una carpeta “components” que va a contener los componentes de nuestra app. Esto nos permite tener nuestro código mejor organizado.

Después de generar nuestro componente de navegación, podemos ver que se importaron los módulos de Angular Material necesarios de manera automática directamente en el archivo app.module.ts.

Como buena práctica, crearemos un módulo separado para encargarse de importar los módulos de Angular Material con el siguiente comando:

ng generate module modules/material

Después, hay que mover las referencias a los módulos de Angular Material de app.module.ts a material.module.ts.

Ahora, importa el módulo MaterialModule en app.module.ts.

PASO 3: CREAR COMPONENTES

Para crear los componentes necesarios para nuestra aplicación, ejecuta:

ng generate component components/dashboard
ng generate component components/registro

PASO 4: PREPARAR NAVEGACIÓN Y RUTEO

Después de crear los componentes principales que conforman nuestra app, necesitamos permitir que el usuario pueda navegar entre ellos.

RUTEO DE ANGULAR

Actualiza el contenido de la constante “routes” en el archivo app-routing.module.ts como se muestra a continuación:

const routes: Routes = [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: '404', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'registro', component: RegistroComponent }
];

De esta manera, estamos registrando las rutas a las que el usuario puede navegar en nuestra aplicación. En la primera ruta, estamos estableciendo un valor predeterminado para cuando el usuario navegue a la raíz de nuestra app, en este caso, estaríamos redirigiendo a la ruta ‘dashboard’.

En la segunda ruta estamos indicando que cuando el usuario navegue por error a alguna ruta que no exista sea redirigido al dashboard.

En las últimas dos rutas estamos indicando las rutas disponibles y el componente que debe mostrarse en cada ruta.

Una vez creadas las rutas, elimina el contenido auto generado en app.component.html para que quede de la siguiente manera:

<router-outlet></router-outlet>

Ahora, navega a las diferentes rutas de la app para comprobar el funcionamiento del ruteo de Angular.

IMPLEMENTAR EL COMPONENTE DE NAVEGACIÓN

En pasos anteriores creamos un componente de navegación utilizando schematics de Angular Material, para comenzar a utilizar el componente, agrega la siguiente línea al archivo nav.component.html justo al final del bloque “mat-sidenav-content”:

<ng-content></ng-content>

El contenido de nav.component.html debe quedar como se muestra a continuación:

<mat-sidenav-container class="sidenav-container">

    ...

    <mat-sidenav-content>
    <mat-toolbar color="primary">

    ...

    </mat-toolbar>
    <!-- Add Content Here -->
    <ng-content></ng-content>
    </mat-sidenav-content>
</mat-sidenav-container>

A continuación, reemplaza los contenidos del archivo app.component.html con lo siguiente:

<app-nav>
    <router-outlet></router-outlet>
</app-nav>

De esta manera, nuestra app muestra el componente de navegación, así como el componente que hayamos indicado en cada una de las rutas registradas para nuestra app en app-routing.module.ts.

PREPARAR MENÚ DE NAVEGACIÓN

Para crear nuestro menú de navegación, en lugar de escribir un menú de opciones estático, comenzaremos creando un arreglo de opciones que, de ser necesario, podríamos modificar de manera dinámica utilizando alguna fuente externa.

Primero, crearemos un nuevo archivo models.ts dentro de un folder nuevo en nuestra app. En el nuevo archivo models.ts, modelaremos una interfaz que usaremos como plantilla para nuestras opciones del menú de navegación:

export interface NavMenuItem {
    Label: string;
    Target: string;
}

Ahora, en el componente de navegación nav.component.ts, crea un arreglo con la lista de opciones que mostraremos en nuestro menú de la siguiente manera:

...

import { NavMenuItem } from 'src/app/models/models';

...
export class NavComponent {
    menu = [
        { Label: 'Dashboard', Target: '/dashboard' },
        { Label: 'Registro', Target: '/registro' }
    ] as NavMenuItem[];

    ...
}

Después de crear la lista de opciones, actualiza nav.component.html para generar las opciones del menú de navegación de manera dinámica. Elimina las opciones estáticas para incluir lo siguiente:

...
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
    <a mat-list-item *ngFor="let option of menu"
    [routerLink]="option.Target">{{ option.Label }}</a>
</mat-nav-list>
...

De esta manera, se estará generando una opción en el menú por cada objeto en nuestro arreglo de opciones y ahora podemos utilizar el menu para navegar entre las rutas de la aplicación.

CONCLUSIÓN

En este post vimos los pasos necesarios para generar componentes de Angular 8 en blanco, así como utilizando esquemas prefabricados (schematics). También utilizamos las características básicas del ruteo de Angular.

En la segunda parte de este post, continuaremos agregando funcionalidad a nuestra app implementando modelos de datos, formas de angular y data binding, así como servicios para leer y escribir datos.

El código fuente completo de la aplicación de ejemplo puedes encontrarlo en GitHub, en https://github.com/RCKSTR1/GLTrack1 o si prefieres, puedes clonar el repositorio directo en https://github.com/RCKSTR1/GLTrack1.git

Si tuviste algún problema o duda al seguir los pasos, o si tienes alguna pregunta acerca de este post, contáctame en Twitter, Facebook o LinkedIn.

Es cuánto.

FUENTES

• Documentación de Angular Material, "Schematics". https://material.angular.io/guide/schematics

• Documentación de Angular. "Arquitectura, Introducción a los módulos"https://angular.io/guide/architecture-modules

• Documentación de Angular, "Fundamentos, Ruteo y navegación" https://angular.io/guide/router

INTRODUCCIÓN

Material Design es un lenguaje visual que sintetiza los principios clásicos de buen diseño con la innovación de tecnología y ciencia. Material Design tiene como objetivo desarrollar un sistema que unifique la experiencia de usuario a través de diferentes plataformas, dispositivos y métodos de entrada y al mismo tiempo, proveer una base personalizable y flexible para la innovación.

Angular Material es una librería de componentes para aplicaciones con Angular. Estos componentes nos permiten crear aplicaciones atractivas, consistentes y funcionales apegándose a los principios de Material Design.

PASO 1: INSTALAR ANGULAR MATERIAL, ANGULAR CDK Y ANGULAR ANIMATIONS

Si necesitas ayuda creando una aplicación de Angular, puedes ver los detalles en el post "¡Hola Angular 8!".

Puedes usar NPM o YARN para instalar los paquetes. Desde el folder de tu aplicación, en la terminal del sistema ejecuta la siguiente línea:

NPM

npm install --save @angular/material @angular/cdk @angular/animations

YARN

yarn add @angular/material @angular/cdk @angular/animations

PASO 2: CONFIGURAR LAS ANIMACIONES

Después de instalar el paquete de animaciones, importa el módulo BrowserAnimationsModule en tu aplicación para habilitar el soporte de animaciones.

En el archivo app.module.ts de tu aplicación, agrega BrowserAnimationsModule a la lista de imports.

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
    ...
    imports: [BrowserAnimationsModule],
    ...
})
export class AppModule { }

PASO 3: IMPORTAR LOS COMPONENTES DE MATERIAL UI

Los componentes de Material pueden importarse directamente en app.module.ts, sin embargo, como buena práctica, vamos a crear un módulo separado para importar los componentes. De esta manera, podemos tener nuestros módulos mejor organizados.

1. En la consola, ejecuta la siguiente línea:

2.  ng generate module material
   

3. Importa el nuevo módulo en app.module.ts

4. 

5. Importa y exporta los componentes de Material en el módulo material.module.ts

6. Para este ejemplo importaremos los siguientes componentes:

   • MatButtonModule

   • MatMenuModule

   • MatToolbarModule

   • MatIconModule

   • MatCardModule

   • MatSidenavModule

   • MatListModule

Ya importados los componentes que vamos a utilizar, podemos llamarlos desde nuestra aplicación.

ESTILOS, ÍCONOS Y SOPORTE DE GESTOS (OPCIONAL)

TEMAS PREFABRICADOS

Podemos incluir estilos prefabricados en nuestra aplicación, para este ejemplo, agrega lo siguiente a styles.css.

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";

SOPORTE DE GESTOS

Algunos componentes como slide toggle, sliders y tooltips requieren HammerJS para soportar gestos. En este ejemplo no los estamos importando, pero en caso de que quieras usarlos puedes instalar HammerJS desde la consola ejecutando:

npm install --save hammerjs

Después de instalar hammerjs, debes importarlo en el archivo main.ts.

import 'hammerjs';

ICONOS

Para poder utilizar los iconos de Material UI, tenemos que cargar la fuente de Material Icons en el bloque head del archivo index.html.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

PASO 4: CONSTRUIR NUESTRA INTERFAZ DE USUARIO

En este paso crearemos un ejemplo de interfaz de usuario responsiva utilizando los componentes de Material UI importados en nuestra aplicación.

Reemplaza los contenidos de app.component.ts con el siguiente código:

import { Component, ChangeDetectorRef, OnDestroy } from '@angular/core';
import { MediaMatcher } from '@angular/cdk/layout';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy {
    title = 'Angular + Material';
    mobileQuery: MediaQueryList;
    fillerNav = ['Opción 1', 'Opción 2', 'Opción 3', 'Opción 4', 'Opción 5', 'Opción 6', 'Opción 7'];

    fillerContent = Array.from({ length: 50 }, () => 'Interfaz gráfica usando componentes de Material UI. RCKSTR1 en GitHub. rckstr1.github.io');

    private _mobileQueryListener: () => void;

    constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
    this.mobileQuery = media.matchMedia('(max-width: 600px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
    }

    ngOnDestroy(): void {
    this.mobileQuery.removeListener(this._mobileQueryListener);
    }
}

Reemplaza los contenidos de app.component.html con el siguiente código:

<div class="app-container" [class.app-is-mobile]="mobileQuery.matches">
    <mat-toolbar color="primary" class="app-toolbar">
        <button mat-icon-button (click)="snav.toggle()">
        <mat-icon>menu</mat-icon>
        </button>
        <h1 class="app-app-name">{{title}}</h1>
    </mat-toolbar>

    <mat-sidenav-container class="app-sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
        <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches"
        fixedTopGap="56">
        <mat-nav-list>
            <a mat-list-item routerLink="." *ngFor="let nav of fillerNav">{{nav}}</a>
        </mat-nav-list>
        </mat-sidenav>

        <mat-sidenav-content>
        <router-outlet></router-outlet>
        <p *ngFor="let content of fillerContent">{{content}}</p>
        </mat-sidenav-content>
    </mat-sidenav-container>
</div>

Reemplaza los contenidos de app.component.css con el siguiente código:

.app-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.app-is-mobile .app-toolbar {
    position: fixed;
    z-index: 2;
}

h1.app-app-name {
    margin-left: 8px;
}

.app-sidenav-container {
    flex: 1;
}

.app-is-mobile .app-sidenav-container {
    flex: 1 0 auto;
}

PASO 5: EJECUTAR NUESTRA APLICACIÓN

En la consola integrada de Visual Studio Code, ejecuta la aplicación.

ng serve --open

Listo. Tenemos nuestra primera aplicación con Angular 8 y Material UI.

CONCLUSIÓN

En este post vimos los pasos necesarios para utilizar componentes de Material Design en nuestras aplicaciones con Angular.

Ahora estas listo para experimentar con Angular 8 y los componentes de Material UI.

El código fuente completo de la aplicación de ejemplo puedes encontrarlo en GitHub, en https://github.com/RCKSTR1/AngularMaterial o si prefieres, puedes clonar el repositorio directo en https://github.com/RCKSTR1/AngularMaterial.git

Si tuviste algún problema o duda al seguir los pasos, o si tienes alguna pregunta acerca de este post, contáctame en Twitter, Facebook o LinkedIn.

Es cuánto.

FUENTES

• Documentación de Angular Material. https://material.angular.io/guide/getting-started

Introducción

Angular es un framework javascript muy popular, usado para desarrollar aplicaciones web, de escritorio y móviles. El desarrollo de aplicaciones con angular, involucra html, css y typescript que posteriormente es compilado a javascript.

Usar angular proporciona ventajas como:

1. Soporte para single page applications (spa)

Spas son un tipo de aplicación web que cargan una sola página html, esta página es actualizada dinámicamente de acuerdo a la interacción del usuario con la aplicación sin tener que recargar la página completa.

2. Two-way data binding

Esta característica nos permite actualizar datos de manera automática en dos vías. Es decir, si nuestra fuente de datos cambia, la interfaz actualiza los datos, y viceversa.

3. Modularidad

Por diseño, el código de nuestra aplicación está organizado en módulos. Un módulo está relacionado a grupos de componentes, directivas, pipes y servicios.

La modularidad también provee otros beneficios en angular, como la habilidad de cargar solamente los componentes que necesitamos, conocida como lazy-loading.

4. Requiere escribir menos código

A todos nos gusta escribir menos código, que al mismo tiempo sea más efectivo. Angular soporta la arquitectura mvc (model-view-controller). Adaptarnos a este diseño nos permite escribir menos código y hace más fácil implementar buenas prácticas.

5. Interfaz de usuario declarativa

Nos permite definir la interfaz de usuario utilizando html de manera intuitiva y menos compleja que hacerlo con javascript. No tenemos que preocuparnos por el orden en que se cargan los componentes o el flujo del programa.

En los últimos días, se liberó la versión 8 de angular. En esta versión se mejoraron los tiempos de arranque de las aplicaciones y se incluyen nuevos api para interactuar con la cli.

Prerrequisitos

Para sacar el mayor provecho de angular necesitas conocer un poco de:

• Html

• Typescript

• Css

Paso 1: obtener las herramientas

Antes que nada, debemos contar con algunas herramientas instaladas en nuestra computadora. Como yo ya tenía las herramientas instaladas, creé una máquina virtual con elementary os, una distribución de linux basada en debian.

Node.js

Angular, angular cli y las aplicaciones con angular dependen de librerías disponibles como paquetes de npm.

En linux (debian)

Los siguientes comandos funcionan en distribuciones de linux basadas en debian. En la terminal del sistema, ejecuta las siguientes líneas:

sudo curl -sL https://deb.nodesource.com/setup_12.x | sudo bash -
sudo apt-get install -y nodejs

EN WINDOWS O MACOS

1. Utilizando cualquier navegador, ve a www.nodejs.org y descarga la versión más reciente.

2. Ejecuta el archivo descargado e instala Node.js.

3. Antes de continuar al siguiente paso, comprobamos la instalación ejecutando la siguiente línea en la terminal:

    npm -v
   

   ANGULAR CLI

   

   La interfaz de línea de comandos o CLI, es una herramienta que usaremos para inicializar, desarrollar y mantener nuestras aplicaciones. Para instalar Angular CLI ejecuta la siguiente línea en la terminal (es posible que necesites permisos de root o administrador):

    npm install -g @angular/cli
   

   VISUAL STUDIO CODE (O CUALQUIER OTRO EDITOR DE CÓDIGO)

   

   Este paso es opcional. Puedes usar el editor de código que más te guste. Visual Studio Code es mi favorito por la cantidad de extensiones disponibles y la terminal integrada. Si prefieres no usar Visual Studio Code puedes omitir esta parte.

   1. Utilizando cualquier navegador, ve a code.visualstudio.com

   2. Descarga el instalador

      Las opciones de descarga varían dependiendo de tu Sistema operativo. Si estas usando Linux, tienes la opción de descargar un archive .deb o .rpm, como estoy usando Elementary OS, descargué el archivo .deb.

   3. Instala la aplicación

      En mi caso, ya tenía preinstalado “Eddy” como manejador de paquetes, puedes instalar “Eddy” o cualquier otro manejador de paquetes dependiendo de la distribución de Linux que estés utilizando.

      Por otro lado, si estas en Windows o MacOS, no tienes de que preocuparte. Simplemente haz clic en el botón de descarga e instala Visual Studio Code como cualquier otra aplicación.

EXTENSIONES RECOMENDADAS

Esta parte también es opcional. Aunque puedes optar por utilizar Visual Studio Code sin instalar extensiones, recomiendo usar estas extensiones porque agregan características al editor y nos puede hacer el trabajo más fácil a corto y mediano plazo.

En la ventana de Visual Studio Code, haz clic en el último botón de la barra de actividades en el lado izquierdo para abrir la vista de extensiones.

ANGULAR LANGUAGE SERVICE

Esta extensión provee una mejor experiencia al trabajar con plantillas de Angular con características como listas de autocompletado, mensajes de diagnóstico AOT, opciones para ver la definición de variables u objetos.

1. En el campo de búsqueda, escribe “Angular” (sin comillas).

2. En la lista de resultados, selecciona la extensión “Angular Language Service” y después haz clic en “Install”

TSLINT

TSLint es una herramienta de análisis de código TypeScript que revisa legibilidad, facilidad de mantenimiento y errores de funcionalidad. Puede personalizarse con tus propias reglas, configuraciones y formateadores.

1. En el campo de búsqueda, escribe “TSLint” (sin comillas).

2. En la lista de resultados, selecciona la extensión “TSLint” de Microsoft y después haz clic en “Install”.

VISUAL STUDIO INTELLICODE

Esta extensión provee características asistidas por inteligencia artificial para varios lenguajes de programación basadas en contexto y machine learning.

1. En el campo de búsqueda, escribe “IntelliCode” (sin comillas).

2. En la lista de resultados, selecciona la extensión “Visual Studio IntelliCode” y después haz clic en “Install”.

TIPO DE LETRA FIRA CODE (OPCIONAL)

Fira Code es una extensión del tipo de letra Fira Mono, que contiene ligaduras para combinaciones multicaracter más comunes en programación. Esta característica ayuda a leer y entender código más rápidamente.

1. Utilizando cualquier navegador, ve a github.com/tonsky/FiraCode y descarga los archivos del repositorio

2. Instala el tipo de letra en tu computadora. En mi caso, instalé los archivos OpenType.

CONFIGURAR FIRA CODE EN VISUAL STUDIO CODE

1. 

2. En la ventana de Visual Studio Code, presiona CTRL+, en Windows o Linux, o CMD+, en MacOS para abrir la pantalla de configuración.

3. Una vez en la pantalla de configuración, haz clic en “Text Editor” y después en la opción “Font”.

4. En el campo “Font Family” escribe “Fira Code” (sin comillas).

5. Activa la casilla “Font Ligatures”

PASO 2: CREAR NUESTRA PRIMERA APP CON ANGULAR 8

1. Desde la terminal, navega al folder en donde quieres crear tu aplicación. Yo decidí crear un folder nuevo para guardar mis apps.

2. Una vez dentro del folder donde vas a crear tu app, escribe el siguiente comando:

    ng new [nombre de tu app]
   

   Angular CLI comenzará a crear tu aplicación y te presentará algunas opciones. Primero debes indicar si quieres agregar Angular Routing a tu app, por lo general vas a necesitarlo, selecciona la opción para agregarlo.

3. Después, debes especificar el formato de estilos que va a usar la aplicación, para este caso selecciona CSS.

4. Por último, indica si deseas compartir datos de uso con Google.

   Ahora verifica que se creó un folder con el nombre de tu nueva aplicación.

EJECUTA LA APLICACIÓN

A partir de este paso, comienza a utilizar la terminal integrada de Visual Studio Code, si prefieres otro editor de código, puedes seguir usando la terminal de tu sistema operativo para ejecutar comandos.

1. Abre Visual Studio Code y haz clic en el primer icono de la barra de actividad para mostrar el explorador de archivos.

2. Haz clic en el botón “Open Folder” y selecciona el folder de tu nueva aplicación para que Visual Studio Code muestre los contenidos de tu aplicación en el explorador de archivos.

3. En la barra de menú, has clic en “View” y después en la opción “Terminal” para abrir la terminal integrada.

4. Desde esta terminal puedes ejecutar tu aplicación escribiendo:

    ng serve --open
   

   

   El modificador "--open" es opcional. La diferencia es que si usas “-- open” la aplicación se abre automáticamente en tu navegador predeterminado, de otra manera, tendrías que ejecutar cualquier navegador y abrir http://localhost:4200.

   Mientras la aplicación se está ejecutando, la ventana del navegador se actualiza automáticamente después de guardar cualquier cambio en tu código.

   Para dejar de ejecutar tu aplicación, presiona CTRL+C en la terminal.

CONCLUSIÓN

Ahora ya tienes lo necesario para comenzar a escribir aplicaciones web, móviles o de escritorio con Angular 8.

El código fuente completo de la aplicación de ejemplo puedes encontrarlo en GitHub, en https://github.com/RCKSTR1/Angular8RCSTR-APP o si prefieres, puedes clonar el repositorio directo en https://github.com/RCKSTR1/Angular8RCSTR-APP.git

Si tuviste algún problema o duda al seguir los pasos, o si tienes alguna pregunta acerca de este post, contáctame en Twitter, Facebook o LinkedIn.

Es cuánto.

FUENTES

• Documentación de Angular. https://angular.io/docs

• Guía de setup de Angular. https://angular.io/guide/setup-local

Mi nombre es Adrian, soy de Tijuana, Baja California, “la ciudad mas peligrosa del mundo” dicen algunos. Pero a mi no me ha traído mas que cosas buenas. Aquí nací y crecí. Es una ciudad llena de oportunidades, que tiene oídos para las buenas ideas, sin importar de donde vengan.

Soy de los afortunados que tuvieron la oportunidad de convertirse en lo que querían ser desde niños. Yo no quería ser ni bombero ni astronauta, sino que esperaba los días de escuela en que nos llevaban al laboratorio de computación, a dibujar en Paint con Windows 95, o jugar algún juego en la computadora.

Un día, cuando tenía 8 años, en lugar de abrir Word, o Paint, llegamos al laboratorio y en las pantallas había una ventana desconocida, era el IDE de LOGO. La profesora Vicky nos contó una historia acerca de una tortuga, y escribió en el pizarrón 4 “palabras mágicas” necesarias para mover a la tortuga. Ese fue el día que escribí mi primera línea de código, Ahora podía hacer dibujos escribiendo líneas de código y ver como se iban dibujando en la pantalla. Y ya. Desde entonces lo que yo quería hacer era tener una computadora y escribir código para hacer dibujos y regalárselos a todo el mundo.

Pasaron algunos años, y ahora estaba en la universidad. Con las mismas ganas de escribir código en una computadora, pero ahora acompañado de personas que igual que yo, habían decidido en algún punto de sus vidas, escribir código, o hacer redes, o diseñar microprocesadores.

Fast forward al 2019, tengo 31 años, soy desarrollador de software, desde 2007 especializado en tecnologías de Microsoft, aunque últimamente incursionando en la realidad aumentada. Hace un año, recibí la invitación de LinkedIn para el programa de Career Advisors, me pareció una manera interesante de contribuir a otros con mi grano de arena. Sin embargo, hace tiempo que me vengo dando cuenta de los efectos que la barrera del lenguaje tiene en el desarrollo de software, de la desventaja que puede representar para las personas que no pueden adquirir conocimiento porque no han tenido el tiempo o la oportunidad de aprender inglés.

Este blog es mi manera de decir gracias a todos de los que he aprendido algo y que de alguna manera me ayudaron a convertirme en lo que siempre quise desde que era un niño.

Sinceramente, espero alguno de estos días poder escribir algo que le ayude a alguien a escribir su primera línea de código.

Es cuánto.